gatsby-matrix-theme 52.0.29 → 52.0.31

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [52.0.31](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v52.0.30...v52.0.31) (2024-11-07)
+
+
+### Bug Fixes
+
+* added more features in admin mode ([19b797f](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/19b797fc26c72661da4f2493b27bd7fbee362877))
+* tests ([26c671f](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/26c671fc6497731c948fdae2f61e1620bd833a5c))
+* update core version ([7d64f07](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/7d64f07578932ffa24f12adb7664e84fe98992bd))
+
+## [52.0.30](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v52.0.29...v52.0.30) (2024-10-30)
+
+
+### Bug Fixes
+
+* update version ([d725939](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/d7259397cb44b4f1ef63346cef2f297753d274bd))
+
 ## [52.0.29](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v52.0.28...v52.0.29) (2024-10-30)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "52.0.29",
+  "version": "52.0.31",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^5.11.0",
-    "gatsby-core-theme": "40.0.21",
+    "gatsby-core-theme": "40.0.30",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-transformer-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^6.13.1",

package/src/components/atoms/admin/card/button/admin-card-button.module.scss

@@ -0,0 +1,26 @@
+.container {
+    @include flex-align(center, center);
+
+    gap: 1rem;
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    z-index: 9;
+}
+
+.button {
+    @include flex-align(center, center);
+
+    box-shadow: 1px 1px 5px #888;
+    color: #fff;
+    font-size: 1.3rem;
+    padding: 1rem;
+    gap: .5rem;
+    background-color: #23282d;
+    border-radius: 4rem;
+    
+    &:hover {
+        background-color: #32373c;
+        color: #00b9eb;
+    }
+}

package/src/components/atoms/admin/card/button/index.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { FaRegEdit } from '@react-icons/all-files/fa/FaRegEdit';
+import { FaDatabase } from '@react-icons/all-files/fa/FaDatabase';
+
+import styles from './admin-card-button.module.scss';
+
+const index = ({ item, isToplist=false }) => {
+  const path = (type, relation, pageId) => {
+    switch (type) {
+      case 'page':
+        return `site-pages/${pageId}`;
+      case 'operator':
+        return `operators/${relation.operator_id}/sites-data?site=${process.env.GATSBY_SITE_NAME}`;
+      case 'game':
+        return `games/${relation.id}/sites?site_name=${process.env.GATSBY_SITE_NAME}`;
+      case 'author':
+        return `site-authors/${relation.id}`;
+      case 'payment_method':
+        return `deposit-methods/${relation.id}`;
+      default:
+        return '';
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      {!isToplist && <a
+        className={styles.button}
+        target="_blank"
+        href={`${process.env.HERCULES_BACKEND_URL}${path('page', null, item.id)}`}
+        rel="noreferrer"
+        type="button"
+        aria-label="Edit Page"
+      >
+        <FaRegEdit />
+      </a>}
+      <a
+        className={styles.button}
+        target="_blank"
+        href={`${process.env.HERCULES_BACKEND_URL}${path(isToplist ? 'operator' : item.type, isToplist ? item : item.relation)}`}
+        rel="noreferrer"
+        type="button"
+        aria-label="Edit Relation Data"
+      >
+        <FaDatabase />
+      </a>
+    </div>
+  );
+};
+
+export default index;

package/src/components/molecules/header/variants/payment/template-one-three/template-one-three.test.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-multi-assign */
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import getPaymentData from '../../../../../../../tests/factories/pages/payment.factory';
 import TemplateOneThree from '.';
@@ -18,6 +18,11 @@ describe('Payment template one three component', () => {
     expect(container.querySelectorAll('a')).toHaveLength(1);
     expect(container.getElementsByClassName('desc')).toHaveLength(1);
     expect(container.querySelectorAll('li')).toHaveLength(4);
+    expect(container.getElementsByClassName('open').length).toEqual(0);
+    const description = container.querySelector('.desc');
+    fireEvent.click(description);
+
+    expect(container.getElementsByClassName('open').length).toEqual(1);
   });
 
   test('Template Three Status Active', () => {
@@ -32,6 +37,8 @@ describe('Payment template one three component', () => {
     expect(container.querySelectorAll('a')).toHaveLength(1);
     expect(container.getElementsByClassName('desc')).toHaveLength(0);
     expect(container.querySelectorAll('li')).toHaveLength(4);
+
+   
   });
 });
 

package/src/components/molecules/header/variants/payment/template-two/template-two.test.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-multi-assign */
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import getPaymentData from '../../../../../../../tests/factories/pages/payment.factory';
 import TemplateTwo from '.';
@@ -17,6 +17,13 @@ describe('Payment Header template two  component', () => {
     expect(queryByText('Visit')).toBeInTheDocument();
     expect(container.querySelectorAll('a')).toHaveLength(1);
     expect(container.getElementsByClassName('desc')).toHaveLength(1);
+
+    const description = container.querySelector('.desc');
+    fireEvent.click(description);
+
+    expect(container.getElementsByClassName('open').length).toEqual(1);
+    
+
   });
 });
 

package/src/components/molecules/toplist/row/variant-one.js

@@ -1,11 +1,13 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import SellingPoints from 'gatsby-core-theme/src/components/atoms/selling-points';
 import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
 import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
 import Bonus from 'gatsby-core-theme/src/components/molecules/bonus-box/template-one';
+import AdminButton from '../../../atoms/admin/card/button';
+import { Context } from '~context/MainProvider.js';
 import CasinoDetails from '../../operator-details';
 import VerifiedAuthor from '../../../../images/icons/verified-author';
 import styles from './variant-one.module.scss';
@@ -32,7 +34,7 @@ export default function Row({
 }) {
   const sellingPoints = item.selling_points;
   const { ribbons } = item;
-
+  const { admin } = useContext(Context) || {};
   const addToRefs = (el, itemNum) => {
     if (el && itemRefs) {
       itemRefs.current[itemNum] = el;
@@ -43,6 +45,7 @@ export default function Row({
 
   const Content = () => (
     <>
+      {admin && <AdminButton item={item} isToplist />}
       <CasinoDetails
         item={item}
         tracker={tracker}

package/src/components/organisms/cards/template-one/cards.module.scss

@@ -9,16 +9,22 @@
   @include min(desktop) {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
-  column-gap: 0.8rem;
-  row-gap: 1rem;
+
+  gap: 1rem 0.8rem;
 
   @include min(desktop) {
     column-gap: 1.6rem;
   }
+
   > div {
     margin: 0.4rem 0;
+
     @include min(desktop) {
       margin: 0.8rem 0;
     }
   }
 }
+
+.container {
+  position: relative;
+}

package/src/components/organisms/cards/template-one/index.js

@@ -1,35 +1,16 @@
-/* eslint-disable react/prop-types */
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable react/destructuring-assignment */
-// import React from 'react';
-// import Card from 'gatsby-core-theme/src/components/organisms/cards/index';
-// import { getCard } from '../../../../helpers/cards';
-
-// export default ({ module, page }) => {
-//   const customCardComponent = getCard(module?.model_type || module?.cards_page_type);
-
-//   return (
-//       <Card
-//         module={module}
-//         mobileColumns={1}
-//         tabletColumns={2}
-//         desktopColumns={3}
-//         CustomCardComponent={customCardComponent}
-//         pageTemplate={page?.template}
-//       />
-//   );
-// };
-
 /* eslint-disable camelcase */
-import React, { Suspense } from 'react';
+import React, { Suspense, useContext } from 'react';
 import PropTypes from 'prop-types';
+import { Context } from '~context/MainProvider.js';
 import { getCard } from '../../../../helpers/cards';
+import AdminButton from '../../../atoms/admin/card/button';
 import styles from './cards.module.scss';
 import Card from '~atoms/cards/default-card';
 import keygen from '~helpers/keygen';
 
 const Cards = ({ module, page, modulePosition }) => {
   const CustomCardComponent = getCard(module?.model_type || module?.cards_page_type);
+  const { admin } = useContext(Context) || {};
 
   return (
     <div className={styles.cardsContainer}>
@@ -37,16 +18,32 @@ const Cards = ({ module, page, modulePosition }) => {
         module.items.map((item, index) =>
           CustomCardComponent ? (
             <Suspense fallback={<></>}>
-              <CustomCardComponent
-                key={keygen()}
-                featured={module.style === 'featured'}
-                item={item}
-                type={item.type}
-                number={index + 1}
-                page={page}
-                modulePosition={modulePosition}
-                itemPosition={index + 1}
-              />
+              {admin ? (
+                <div className={styles.container}>
+                  <AdminButton item={item} />
+                  <CustomCardComponent
+                    key={keygen()}
+                    featured={module.style === 'featured'}
+                    item={item}
+                    type={item.type}
+                    number={index + 1}
+                    page={page}
+                    modulePosition={modulePosition}
+                    itemPosition={index + 1}
+                  />
+                </div>
+              ) : (
+                <CustomCardComponent
+                  key={keygen()}
+                  featured={module.style === 'featured'}
+                  item={item}
+                  type={item.type}
+                  number={index + 1}
+                  page={page}
+                  modulePosition={modulePosition}
+                  itemPosition={index + 1}
+                />
+              )}
             </Suspense>
           ) : (
             <Card
@@ -67,8 +64,11 @@ Cards.propTypes = {
     items: PropTypes.arrayOf(PropTypes.object),
     featured_index: PropTypes.number,
     style: PropTypes.string,
+    cards_page_type: PropTypes.string,
+    model_type: PropTypes.string,
   }).isRequired,
   page: PropTypes.shape({}),
+  modulePosition: PropTypes.number,
 };
 
 export default Cards;

package/src/components/organisms/cards/template-two/index.js

@@ -1,9 +1,12 @@
 /* eslint-disable react/no-array-index-key */
 /* eslint-disable react/forbid-prop-types */
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
 import ScrollX from 'gatsby-core-theme/src/hooks/scroll-x';
+import { Context } from '~context/MainProvider.js';
+import AdminButton from '../../../atoms/admin/card/button';
 import Item from './item';
+import styles from './template-two.module.scss';
 import Buttons from './buttons';
 
 const CustomCarousel = ({ page, module, noModuleIntro, modulePosition }) => {
@@ -11,7 +14,7 @@ const CustomCarousel = ({ page, module, noModuleIntro, modulePosition }) => {
   const [scrollX, setScrollX] = useState(0);
   const [scrollEnd, setScrollEnd] = useState(false);
   const [showButtons, setShowButtons] = useState(false);
-
+  const { admin } = useContext(Context) || {};
   const updateButtons = (shift) => {
     setScrollEnd(
       Math.floor(container.current.scrollWidth - (container.current.scrollLeft + shift)) <=
@@ -49,17 +52,32 @@ const CustomCarousel = ({ page, module, noModuleIntro, modulePosition }) => {
     <ScrollX refTag={container} scroll stopScrolling={() => onStopScrolling()} onScroll={onScroll}>
       <div ref={container}>
         {module.items &&
-          module.items.map((item, index) => (
-            <Item
-              key={index}
-              index={index}
-              item={item}
-              page={page}
-              module={module}
-              modulePosition={modulePosition}
-              itemPosition={index + 1}
-            />
-          ))}
+          module.items.map((item, index) =>
+            admin ? (
+              <div className={styles.container}>
+                <AdminButton item={item} />
+                <Item
+                  key={index}
+                  index={index}
+                  item={item}
+                  page={page}
+                  module={module}
+                  modulePosition={modulePosition}
+                  itemPosition={index + 1}
+                />
+              </div>
+            ) : (
+              <Item
+                key={index}
+                index={index}
+                item={item}
+                page={page}
+                module={module}
+                modulePosition={modulePosition}
+                itemPosition={index + 1}
+              />
+            )
+          )}
         {showButtons && (
           <Buttons
             scroll={scroll}

package/src/components/organisms/cards/template-two/template-two.module.scss

@@ -0,0 +1,4 @@
+
+.container {
+  position: relative;
+}

package/src/gatsby-core-theme/components/atoms/admin/button/button.module.scss

@@ -0,0 +1,26 @@
+.linkList {
+    position: absolute;
+    top: 0;
+    right: 10%;
+
+    @include flex-align(center, center);
+
+    gap: 1rem
+}
+
+
+.editModule {
+    @include flex-align(center, center);
+
+    box-shadow: 1px 3px 12px #888;
+    color: #fff;
+    font-size: 1.3rem;
+    padding: 1rem 2rem;
+    gap: .5rem;
+    background-color: #23282d;
+  
+    &:hover {
+        background-color: #32373c;
+        color: #00b9eb;
+    }
+  }

package/storybook/public/{638.f09af860.iframe.bundle.js → 257.28f29947.iframe.bundle.js}

@@ -1 +1 @@
-"use strict";(self.webpackChunkgatsby_matrix_theme=self.webpackChunkgatsby_matrix_theme||[]).push([[638],{"./src/components/molecules/sportstake/fixtures/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>fixtures});var react=__webpack_require__("../node_modules/react/index.js"),prop_types=__webpack_require__("./node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),hooks_tabs=__webpack_require__("../node_modules/gatsby-core-theme/src/hooks/tabs/index.js"),sportstake=__webpack_require__("./src/gatsby-core-theme/helpers/sportstake.js"),services=__webpack_require__("./src/gatsby-core-theme/helpers/services.js"),constants_sportstake=__webpack_require__("./src/gatsby-core-theme/constants/sportstake.js"),lotto=__webpack_require__("./src/gatsby-core-theme/helpers/lotto.js"),injectStylesIntoStyleTag=__webpack_require__("../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),injectStylesIntoStyleTag_default=__webpack_require__.n(injectStylesIntoStyleTag),fixtures_module=__webpack_require__("../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/sass-loader/dist/cjs.js!../node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[10].use[3]!./src/components/molecules/sportstake/fixtures/fixtures.module.scss"),options={insert:"head",singleton:!1};injectStylesIntoStyleTag_default()(fixtures_module.A,options);const fixtures_fixtures_module=fixtures_module.A.locals||{};var SportstakeHeader=function(_ref){var _fixture$_id,fixture=_ref.fixture;if(fixture){var nrOfFixtures=null==fixture||null===(_fixture$_id=fixture._id)||void 0===_fixture$_id?void 0:_fixture$_id.split("-")[1],formattedDate=(0,lotto.Yq)(null==fixture?void 0:fixture.drawDate,"dd/MMM/yy");return react.createElement("div",{className:fixtures_fixtures_module.sportstakeHeader},react.createElement("p",null,`Fixtures List for ${nrOfFixtures} (Provisional) ${formattedDate}`," "))}};SportstakeHeader.displayName="SportstakeHeader",SportstakeHeader.__docgenInfo={description:"",methods:[],displayName:"SportstakeHeader",props:{fixture:{description:"",type:{name:"shape",value:{_id:{name:"string",required:!1},drawDate:{name:"string",required:!1},drawDetails:{name:"shape",value:{games:{name:"shape",value:{},required:!1},divs:{name:"shape",value:{},required:!1}},required:!1},more_info:{name:"shape",value:{},required:!1},toss_results:{name:"shape",value:{winnerData:{name:"arrayOf",value:{name:"shape",value:{}},required:!1}},required:!1},winnerData:{name:"arrayOf",value:{name:"shape",value:{}},required:!1}}},required:!1}}};const header=SportstakeHeader;SportstakeHeader.propTypes={fixture:prop_types_default().shape({_id:prop_types_default().string,drawDate:prop_types_default().string,drawDetails:prop_types_default().shape({games:prop_types_default().shape({}),divs:prop_types_default().shape({})}),more_info:prop_types_default().shape({}),toss_results:prop_types_default().shape({winnerData:prop_types_default().arrayOf(prop_types_default().shape({}))}),winnerData:prop_types_default().arrayOf(prop_types_default().shape({}))})},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/molecules/sportstake/fixtures/header/index.js"]={name:"SportstakeHeader",docgenInfo:SportstakeHeader.__docgenInfo,path:"src/components/molecules/sportstake/fixtures/header/index.js"});var table=__webpack_require__("./src/components/molecules/sportstake/table/index.js");function _toConsumableArray(r){return function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r)}(r)||function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}(r)||_unsupportedIterableToArray(r)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _slicedToArray(r,e){return function _arrayWithHoles(r){if(Array.isArray(r))return r}(r)||function _iterableToArrayLimit(r,l){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var e,n,i,u,a=[],f=!0,o=!1;try{if(i=(t=t.call(r)).next,0===l){if(Object(t)!==t)return;f=!1}else for(;!(f=(e=i.call(t)).done)&&(a.push(e.value),a.length!==l);f=!0);}catch(r){o=!0,n=r}finally{try{if(!f&&null!=t.return&&(u=t.return(),Object(u)!==u))return}finally{if(o)throw n}}return a}}(r,e)||_unsupportedIterableToArray(r,e)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}var Fixtures=function(_ref){var module=_ref.module,serverData=_ref.serverData,_useState2=_slicedToArray((0,react.useState)(null),2),tabData=_useState2[0],setTabData=_useState2[1],moduleName=module.name;if(serverData){var isCricket=moduleName.includes("cricket"),isSportstake4=moduleName.includes("sportstake4"),hasTwoTables=moduleName.includes("sportstake8")||isSportstake4,query=(0,sportstake.f9)(moduleName),headerList=constants_sportstake.qd.slice(0,4);if(null!=serverData&&serverData.data[moduleName]){var daysOfWeek=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],monthsOfYear=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tabs=Object.values(null==serverData?void 0:serverData.data[moduleName]),tabsContainerRef=(0,react.useRef)(null);(0,react.useEffect)((function(){tabsContainerRef.current&&(tabsContainerRef.current.scrollTop=tabsContainerRef.current.scrollWidth)}),[]);var mutateObjectAtributes=function(obj){obj.forEach((function(element,index){obj[index]={homeTeam:element.homeTeam,awayTeam:element.awayTeam,toss:element.toss_winner,dateTime:element.eventDate||element.dateTime}}))};return react.createElement(hooks_tabs.A,{showAll:!1,showNumberOfResults:!0,headerClass:"sportstakeTabs",activeTabClass:"sportstakeTabsActive",onTabChange:async function(tabId){var response=await(0,services.fu)(null==serverData?void 0:serverData.data[moduleName][tabId.split("_")[1]]._id);setTabData(response)},activeIndex:0,ref:tabsContainerRef},null==tabs?void 0:tabs.map((function(res,index){var _Object$values,_Object$values2,activeFixture=tabData||res,games=((null==activeFixture?void 0:activeFixture.drawDetails)||{}).games,firstTableGames=games?hasTwoTables||isCricket?(_Object$values=Object.values(games)).slice.apply(_Object$values,_toConsumableArray(query.firstTable)):Object.values(games):[];mutateObjectAtributes(firstTableGames);var secondTableGames=games?(_Object$values2=Object.values(games)).slice.apply(_Object$values2,_toConsumableArray(query.secondTable)):[];mutateObjectAtributes(secondTableGames);var label=0===index?"Latest":daysOfWeek[new Date(res.drawDate).getDay()],results=`${monthsOfYear[new Date(res.drawDate).getMonth()]} ${new Date(res.drawDate).getDate()}`;return react.createElement("div",{label,results,key:res,className:`${fixtures_fixtures_module.sportstake} ${hasTwoTables&&fixtures_fixtures_module.twoHalfs}`},react.createElement(header,{fixture:activeFixture}),isSportstake4&&react.createElement("h3",null,"1st half"),react.createElement(table.A,{headerList,rowList:firstTableGames}),hasTwoTables&&react.createElement(react.Fragment,null,react.createElement("h3",null,isSportstake4?"Full Time":"2nd Half"),react.createElement(table.A,{headerList,rowList:secondTableGames})))})))}}};Fixtures.displayName="Fixtures",Fixtures.__docgenInfo={description:"",methods:[],displayName:"Fixtures",props:{page:{description:"",type:{name:"shape",value:{}},required:!1},module:{description:"",type:{name:"shape",value:{items:{name:"arrayOf",value:{name:"shape",value:{}},required:!1},style:{name:"string",required:!1},name:{name:"string",required:!1},module_title:{name:"string",required:!1},module_introduction:{name:"string",required:!1}}},required:!0},pageContext:{description:"",type:{name:"shape",value:{}},required:!1},serverData:{description:"",type:{name:"arrayOf",value:{name:"shape",value:{_id:{name:"string",required:!1},data:{name:"shape",value:{},required:!1},drawDate:{name:"string",required:!1},drawDetails:{name:"shape",value:{games:{name:"shape",value:{},required:!1},divs:{name:"shape",value:{},required:!1}},required:!1}}}},required:!1}}};const fixtures=Fixtures;Fixtures.propTypes={page:prop_types_default().shape({}),module:prop_types_default().shape({items:prop_types_default().arrayOf(prop_types_default().shape({})),style:prop_types_default().string,name:prop_types_default().string,module_title:prop_types_default().string,module_introduction:prop_types_default().string}).isRequired,pageContext:prop_types_default().shape({}),serverData:prop_types_default().arrayOf(prop_types_default().shape({_id:prop_types_default().string,data:prop_types_default().shape({}),drawDate:prop_types_default().string,drawDetails:prop_types_default().shape({games:prop_types_default().shape({}),divs:prop_types_default().shape({})})}))},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/molecules/sportstake/fixtures/index.js"]={name:"Fixtures",docgenInfo:Fixtures.__docgenInfo,path:"src/components/molecules/sportstake/fixtures/index.js"})},"../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/sass-loader/dist/cjs.js!../node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[10].use[3]!./src/components/molecules/sportstake/fixtures/fixtures.module.scss":(module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../node_modules/css-loader/dist/runtime/cssWithMappingToString.js"),_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,"._5CwNzfVDr5fWiuLScgHi-g\\=\\={font-size:3rem;padding-bottom:3rem}._3crS9FTO2ODCRue\\+70iGhQ\\=\\={font-size:3rem}.McIL\\+RQKCbCnThcUSdHFag\\=\\={display:none}.McIL\\+RQKCbCnThcUSdHFag\\=\\= .dUjwNn8SpPoje2tY7\\+q6ig\\=\\={margin-bottom:1.6rem}.McIL\\+RQKCbCnThcUSdHFag\\=\\= .dUjwNn8SpPoje2tY7\\+q6ig\\=\\=>p{font-size:1.6rem;font-weight:400;line-height:2.4rem}.McIL\\+RQKCbCnThcUSdHFag\\=\\=._8XKZ4KdqfzcbvftCScKigA\\=\\=>h3{margin:3.2rem 0 1.6rem .8rem}","",{version:3,sources:["webpack://./src/components/molecules/sportstake/fixtures/fixtures.module.scss"],names:[],mappings:"AAcA,6BACE,cAAA,CACA,mBAAA,CAGF,8BACE,cAAA,CAGF,6BACE,YAAA,CAEA,0DACE,oBAAA,CAEA,4DACE,gBAAA,CACA,eAAA,CACA,kBAAA,CAKF,4DACE,4BAAA",sourcesContent:['/* stylelint-disable no-invalid-position-at-import-rule */\n@use \'sass:map\';\n\n// NOTE: General Styles\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/variables/stack-order";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/variables/typography";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/variables/layout";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/media-queries";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/icons";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/tooltip";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/loader";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/mixins";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/scrollbar";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/animations";\n.titlefixture {\n  font-size: 3rem;\n  padding-bottom: 3rem;\n}\n\n.title {\n  font-size: 3rem;\n}\n\n.sportstake {\n  display: none;\n\n  .sportstakeHeader {\n    margin-bottom: 1.6rem;\n\n    > p {\n      font-size: 1.6rem;\n      font-weight: 400;\n      line-height: 2.4rem;\n    }\n  }\n\n  &.twoHalfs {\n    > h3 {\n      margin: 3.2rem 0 1.6rem 0.8rem;\n    }\n  }\n}'],sourceRoot:""}]),___CSS_LOADER_EXPORT___.locals={titlefixture:"_5CwNzfVDr5fWiuLScgHi-g==",title:"_3crS9FTO2ODCRue+70iGhQ==",sportstake:"McIL+RQKCbCnThcUSdHFag==",sportstakeHeader:"dUjwNn8SpPoje2tY7+q6ig==",twoHalfs:"_8XKZ4KdqfzcbvftCScKigA=="};const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___}}]);
+"use strict";(self.webpackChunkgatsby_matrix_theme=self.webpackChunkgatsby_matrix_theme||[]).push([[257],{"./src/components/molecules/sportstake/fixtures/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>fixtures});var react=__webpack_require__("../node_modules/react/index.js"),prop_types=__webpack_require__("./node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),hooks_tabs=__webpack_require__("../node_modules/gatsby-core-theme/src/hooks/tabs/index.js"),sportstake=__webpack_require__("./src/gatsby-core-theme/helpers/sportstake.js"),services=__webpack_require__("./src/gatsby-core-theme/helpers/services.js"),constants_sportstake=__webpack_require__("./src/gatsby-core-theme/constants/sportstake.js"),lotto=__webpack_require__("./src/gatsby-core-theme/helpers/lotto.js"),injectStylesIntoStyleTag=__webpack_require__("../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),injectStylesIntoStyleTag_default=__webpack_require__.n(injectStylesIntoStyleTag),fixtures_module=__webpack_require__("../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/sass-loader/dist/cjs.js!../node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[10].use[3]!./src/components/molecules/sportstake/fixtures/fixtures.module.scss"),options={insert:"head",singleton:!1};injectStylesIntoStyleTag_default()(fixtures_module.A,options);const fixtures_fixtures_module=fixtures_module.A.locals||{};var SportstakeHeader=function(_ref){var _fixture$_id,fixture=_ref.fixture;if(fixture){var nrOfFixtures=null==fixture||null===(_fixture$_id=fixture._id)||void 0===_fixture$_id?void 0:_fixture$_id.split("-")[1],formattedDate=(0,lotto.Yq)(null==fixture?void 0:fixture.drawDate,"dd/MMM/yy");return react.createElement("div",{className:fixtures_fixtures_module.sportstakeHeader},react.createElement("p",null,`Fixtures List for ${nrOfFixtures} (Provisional) ${formattedDate}`," "))}};SportstakeHeader.displayName="SportstakeHeader",SportstakeHeader.__docgenInfo={description:"",methods:[],displayName:"SportstakeHeader",props:{fixture:{description:"",type:{name:"shape",value:{_id:{name:"string",required:!1},drawDate:{name:"string",required:!1},drawDetails:{name:"shape",value:{games:{name:"shape",value:{},required:!1},divs:{name:"shape",value:{},required:!1}},required:!1},more_info:{name:"shape",value:{},required:!1},toss_results:{name:"shape",value:{winnerData:{name:"arrayOf",value:{name:"shape",value:{}},required:!1}},required:!1},winnerData:{name:"arrayOf",value:{name:"shape",value:{}},required:!1}}},required:!1}}};const header=SportstakeHeader;SportstakeHeader.propTypes={fixture:prop_types_default().shape({_id:prop_types_default().string,drawDate:prop_types_default().string,drawDetails:prop_types_default().shape({games:prop_types_default().shape({}),divs:prop_types_default().shape({})}),more_info:prop_types_default().shape({}),toss_results:prop_types_default().shape({winnerData:prop_types_default().arrayOf(prop_types_default().shape({}))}),winnerData:prop_types_default().arrayOf(prop_types_default().shape({}))})},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/molecules/sportstake/fixtures/header/index.js"]={name:"SportstakeHeader",docgenInfo:SportstakeHeader.__docgenInfo,path:"src/components/molecules/sportstake/fixtures/header/index.js"});var table=__webpack_require__("./src/components/molecules/sportstake/table/index.js");function _toConsumableArray(r){return function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r)}(r)||function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}(r)||_unsupportedIterableToArray(r)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _slicedToArray(r,e){return function _arrayWithHoles(r){if(Array.isArray(r))return r}(r)||function _iterableToArrayLimit(r,l){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var e,n,i,u,a=[],f=!0,o=!1;try{if(i=(t=t.call(r)).next,0===l){if(Object(t)!==t)return;f=!1}else for(;!(f=(e=i.call(t)).done)&&(a.push(e.value),a.length!==l);f=!0);}catch(r){o=!0,n=r}finally{try{if(!f&&null!=t.return&&(u=t.return(),Object(u)!==u))return}finally{if(o)throw n}}return a}}(r,e)||_unsupportedIterableToArray(r,e)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}var Fixtures=function(_ref){var module=_ref.module,serverData=_ref.serverData,_useState2=_slicedToArray((0,react.useState)(null),2),tabData=_useState2[0],setTabData=_useState2[1],moduleName=module.name;if(serverData){var isCricket=moduleName.includes("cricket"),isSportstake4=moduleName.includes("sportstake4"),hasTwoTables=moduleName.includes("sportstake8")||isSportstake4,query=(0,sportstake.f9)(moduleName),headerList=constants_sportstake.qd.slice(0,4);if(null!=serverData&&serverData.data[moduleName]){var daysOfWeek=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],monthsOfYear=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tabs=Object.values(null==serverData?void 0:serverData.data[moduleName]),tabsContainerRef=(0,react.useRef)(null);(0,react.useEffect)((function(){tabsContainerRef.current&&(tabsContainerRef.current.scrollTop=tabsContainerRef.current.scrollWidth)}),[]);var mutateObjectAtributes=function(obj){obj.forEach((function(element,index){obj[index]={homeTeam:element.homeTeam,awayTeam:element.awayTeam,toss:element.toss_winner,dateTime:element.eventDate||element.dateTime}}))};return react.createElement(hooks_tabs.A,{showAll:!1,showNumberOfResults:!0,headerClass:"sportstakeTabs",activeTabClass:"sportstakeTabsActive",onTabChange:async function(tabId){var response=await(0,services.fu)(null==serverData?void 0:serverData.data[moduleName][tabId.split("_")[1]]._id);setTabData(response)},activeIndex:0,ref:tabsContainerRef},null==tabs?void 0:tabs.map((function(res,index){var _Object$values,_Object$values2,activeFixture=tabData||res,games=((null==activeFixture?void 0:activeFixture.drawDetails)||{}).games,firstTableGames=games?hasTwoTables||isCricket?(_Object$values=Object.values(games)).slice.apply(_Object$values,_toConsumableArray(query.firstTable)):Object.values(games):[];mutateObjectAtributes(firstTableGames);var secondTableGames=games?(_Object$values2=Object.values(games)).slice.apply(_Object$values2,_toConsumableArray(query.secondTable)):[];mutateObjectAtributes(secondTableGames);var label=0===index?"Latest":daysOfWeek[new Date(res.drawDate).getDay()],results=`${monthsOfYear[new Date(res.drawDate).getMonth()]} ${new Date(res.drawDate).getDate()}`;return react.createElement("div",{label,results,key:res,className:`${fixtures_fixtures_module.sportstake} ${hasTwoTables&&fixtures_fixtures_module.twoHalfs}`},react.createElement(header,{fixture:activeFixture}),isSportstake4&&react.createElement("h3",null,"1st half"),react.createElement(table.A,{headerList,rowList:firstTableGames}),hasTwoTables&&react.createElement(react.Fragment,null,react.createElement("h3",null,isSportstake4?"Full Time":"2nd Half"),react.createElement(table.A,{headerList,rowList:secondTableGames})))})))}}};Fixtures.displayName="Fixtures",Fixtures.__docgenInfo={description:"",methods:[],displayName:"Fixtures",props:{page:{description:"",type:{name:"shape",value:{}},required:!1},module:{description:"",type:{name:"shape",value:{items:{name:"arrayOf",value:{name:"shape",value:{}},required:!1},style:{name:"string",required:!1},name:{name:"string",required:!1},module_title:{name:"string",required:!1},module_introduction:{name:"string",required:!1}}},required:!0},pageContext:{description:"",type:{name:"shape",value:{}},required:!1},serverData:{description:"",type:{name:"arrayOf",value:{name:"shape",value:{_id:{name:"string",required:!1},data:{name:"shape",value:{},required:!1},drawDate:{name:"string",required:!1},drawDetails:{name:"shape",value:{games:{name:"shape",value:{},required:!1},divs:{name:"shape",value:{},required:!1}},required:!1}}}},required:!1}}};const fixtures=Fixtures;Fixtures.propTypes={page:prop_types_default().shape({}),module:prop_types_default().shape({items:prop_types_default().arrayOf(prop_types_default().shape({})),style:prop_types_default().string,name:prop_types_default().string,module_title:prop_types_default().string,module_introduction:prop_types_default().string}).isRequired,pageContext:prop_types_default().shape({}),serverData:prop_types_default().arrayOf(prop_types_default().shape({_id:prop_types_default().string,data:prop_types_default().shape({}),drawDate:prop_types_default().string,drawDetails:prop_types_default().shape({games:prop_types_default().shape({}),divs:prop_types_default().shape({})})}))},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/molecules/sportstake/fixtures/index.js"]={name:"Fixtures",docgenInfo:Fixtures.__docgenInfo,path:"src/components/molecules/sportstake/fixtures/index.js"})},"../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/sass-loader/dist/cjs.js!../node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[10].use[3]!./src/components/molecules/sportstake/fixtures/fixtures.module.scss":(module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../node_modules/css-loader/dist/runtime/cssWithMappingToString.js"),_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,"._5CwNzfVDr5fWiuLScgHi-g\\=\\={font-size:3rem;padding-bottom:3rem}._3crS9FTO2ODCRue\\+70iGhQ\\=\\={font-size:3rem}.McIL\\+RQKCbCnThcUSdHFag\\=\\={display:none}.McIL\\+RQKCbCnThcUSdHFag\\=\\= .dUjwNn8SpPoje2tY7\\+q6ig\\=\\={margin-bottom:1.6rem}.McIL\\+RQKCbCnThcUSdHFag\\=\\= .dUjwNn8SpPoje2tY7\\+q6ig\\=\\=>p{font-size:1.6rem;font-weight:400;line-height:2.4rem}.McIL\\+RQKCbCnThcUSdHFag\\=\\=._8XKZ4KdqfzcbvftCScKigA\\=\\=>h3{margin:3.2rem 0 1.6rem .8rem}","",{version:3,sources:["webpack://./src/components/molecules/sportstake/fixtures/fixtures.module.scss"],names:[],mappings:"AAcA,6BACE,cAAA,CACA,mBAAA,CAGF,8BACE,cAAA,CAGF,6BACE,YAAA,CAEA,0DACE,oBAAA,CAEA,4DACE,gBAAA,CACA,eAAA,CACA,kBAAA,CAKF,4DACE,4BAAA",sourcesContent:['/* stylelint-disable no-invalid-position-at-import-rule */\n@use \'sass:map\';\n\n// NOTE: General Styles\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/variables/stack-order";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/variables/typography";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/variables/layout";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/media-queries";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/icons";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/tooltip";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/loader";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/mixins";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/scrollbar";\n@import "../../../../../../node_modules/gatsby-core-theme/src/styles/utils/animations";\n.titlefixture {\n  font-size: 3rem;\n  padding-bottom: 3rem;\n}\n\n.title {\n  font-size: 3rem;\n}\n\n.sportstake {\n  display: none;\n\n  .sportstakeHeader {\n    margin-bottom: 1.6rem;\n\n    > p {\n      font-size: 1.6rem;\n      font-weight: 400;\n      line-height: 2.4rem;\n    }\n  }\n\n  &.twoHalfs {\n    > h3 {\n      margin: 3.2rem 0 1.6rem 0.8rem;\n    }\n  }\n}'],sourceRoot:""}]),___CSS_LOADER_EXPORT___.locals={titlefixture:"_5CwNzfVDr5fWiuLScgHi-g==",title:"_3crS9FTO2ODCRue+70iGhQ==",sportstake:"McIL+RQKCbCnThcUSdHFag==",sportstakeHeader:"dUjwNn8SpPoje2tY7+q6ig==",twoHalfs:"_8XKZ4KdqfzcbvftCScKigA=="};const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___}}]);

package/storybook/public/{563.41572fcb.iframe.bundle.js → 563.a3a067bc.iframe.bundle.js}

@@ -1 +1 @@
-"use strict";(self.webpackChunkgatsby_matrix_theme=self.webpackChunkgatsby_matrix_theme||[]).push([[563],{"../node_modules/gatsby-core-theme/src/components/molecules/pros-cons/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>pros_cons});var react=__webpack_require__("../node_modules/react/index.js"),prop_types=__webpack_require__("../node_modules/gatsby-core-theme/node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),injectStylesIntoStyleTag=__webpack_require__("../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),injectStylesIntoStyleTag_default=__webpack_require__.n(injectStylesIntoStyleTag),pros_cons_module=__webpack_require__("../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/sass-loader/dist/cjs.js!../node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[10].use[3]!../node_modules/gatsby-core-theme/src/components/molecules/pros-cons/pros-cons.module.scss"),options={insert:"head",singleton:!1};injectStylesIntoStyleTag_default()(pros_cons_module.A,options);const pros_cons_pros_cons_module=pros_cons_module.A.locals||{};var keygen=__webpack_require__("../node_modules/gatsby-core-theme/src/helpers/keygen.js"),useTranslate=__webpack_require__("../node_modules/gatsby-core-theme/src/hooks/useTranslate/useTranslate.js"),ProsCons=function(_ref){var _module$pros,_module$cons,_ref$module=_ref.module,module=void 0===_ref$module?{}:_ref$module,_ref$pros=_ref.pros,pros=void 0===_ref$pros?"Pros":_ref$pros,_ref$cons=_ref.cons,cons=void 0===_ref$cons?"Cons":_ref$cons,icons=_ref.icons;return react.createElement("div",{className:pros_cons_pros_cons_module.prosCons||""},react.createElement("div",{className:pros_cons_pros_cons_module.pros||""},icons&&react.createElement("span",{className:pros_cons_pros_cons_module.icon||""},icons[0]),react.createElement("span",{className:pros_cons_pros_cons_module.title||""},(0,useTranslate.A)("pros",pros)),react.createElement("ul",null,null===(_module$pros=module.pros)||void 0===_module$pros?void 0:_module$pros.map((function(perk){return react.createElement("li",{key:(0,keygen.A)()},react.createElement("span",{className:pros_cons_pros_cons_module.listIcon||""},icons&&icons[2]),perk)})))),react.createElement("div",{className:pros_cons_pros_cons_module.cons||""},icons&&react.createElement("span",{className:pros_cons_pros_cons_module.icon||""},icons[1]),react.createElement("span",{className:pros_cons_pros_cons_module.title||""},(0,useTranslate.A)("pros",cons)),react.createElement("ul",null,null===(_module$cons=module.cons)||void 0===_module$cons?void 0:_module$cons.map((function(con){return react.createElement("li",{key:(0,keygen.A)()},react.createElement("span",{className:pros_cons_pros_cons_module.listIcon||""},icons&&icons[3]),con)})))))};ProsCons.displayName="ProsCons",ProsCons.propTypes={module:prop_types_default().objectOf(prop_types_default().any).isRequired,pros:prop_types_default().string,cons:prop_types_default().string,icons:prop_types_default().arrayOf(prop_types_default().any),styles:prop_types_default().shape({})},ProsCons.__docgenInfo={description:"",methods:[],displayName:"ProsCons",props:{module:{defaultValue:{value:"{}",computed:!1},description:"",type:{name:"objectOf",value:{name:"any"}},required:!1},pros:{defaultValue:{value:"'Pros'",computed:!1},description:"",type:{name:"string"},required:!1},cons:{defaultValue:{value:"'Cons'",computed:!1},description:"",type:{name:"string"},required:!1},icons:{description:"",type:{name:"arrayOf",value:{name:"any"}},required:!1},styles:{description:"",type:{name:"shape",value:{}},required:!1}}};const pros_cons=ProsCons;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../node_modules/gatsby-core-theme/src/components/molecules/pros-cons/index.js"]={name:"ProsCons",docgenInfo:ProsCons.__docgenInfo,path:"../node_modules/gatsby-core-theme/src/components/molecules/pros-cons/index.js"})},"../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/sass-loader/dist/cjs.js!../node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[10].use[3]!../node_modules/gatsby-core-theme/src/components/molecules/pros-cons/pros-cons.module.scss":(module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../node_modules/css-loader/dist/runtime/cssWithMappingToString.js"),_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__),_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,"@media only screen and (min-width:768px){.C2N5Sip5HF0Xy0h28uZdoA\\=\\={display:flex}}.C2N5Sip5HF0Xy0h28uZdoA\\=\\= div{display:flex;flex-direction:column;align-items:center;border-radius:var(--border-radius);background:#fff;margin-top:4.3rem;padding:3rem}@media only screen and (max-width:767px){.C2N5Sip5HF0Xy0h28uZdoA\\=\\= div{max-width:45rem;margin:4.3rem auto 1rem}}@media only screen and (min-width:768px){.C2N5Sip5HF0Xy0h28uZdoA\\=\\= div{width:50%;padding:4rem;margin-bottom:1rem}}.C2N5Sip5HF0Xy0h28uZdoA\\=\\= div .kvDfEt53Pqnfmq37zSi9Yw\\=\\={display:flex;align-items:center;justify-content:center;border-radius:50%;width:9rem;height:9rem;margin-top:-7.3rem}@media only screen and (min-width:768px){.C2N5Sip5HF0Xy0h28uZdoA\\=\\= div .kvDfEt53Pqnfmq37zSi9Yw\\=\\={margin-top:-8.2rem}}.C2N5Sip5HF0Xy0h28uZdoA\\=\\= div .kvDfEt53Pqnfmq37zSi9Yw\\=\\= svg{fill:#fff}.C2N5Sip5HF0Xy0h28uZdoA\\=\\= div .Blj\\+9D4y7VA7JOJt5HJzMQ\\=\\={color:var(--color-22);margin:2rem 0 2.3rem;font-size:2.4rem;font-weight:bold}.C2N5Sip5HF0Xy0h28uZdoA\\=\\= div ul{font-size:1.8rem}.C2N5Sip5HF0Xy0h28uZdoA\\=\\= div ul li{display:flex;margin-bottom:1rem}.C2N5Sip5HF0Xy0h28uZdoA\\=\\= div ul li svg{margin-right:1rem}@media only screen and (min-width:768px){.C2N5Sip5HF0Xy0h28uZdoA\\=\\= .UO6hxJvyQQg2elOUZ2Z16g\\=\\={margin-right:4rem}}.C2N5Sip5HF0Xy0h28uZdoA\\=\\= .UO6hxJvyQQg2elOUZ2Z16g\\=\\= .kvDfEt53Pqnfmq37zSi9Yw\\=\\={background:var(--primary-color)}.C2N5Sip5HF0Xy0h28uZdoA\\=\\= .Sh\\+GXsSqgjyzgJOmzgKcBg\\=\\= .kvDfEt53Pqnfmq37zSi9Yw\\=\\={background:var(--color-35)}@media only screen and (max-width:767px){.C2N5Sip5HF0Xy0h28uZdoA\\=\\= .Sh\\+GXsSqgjyzgJOmzgKcBg\\=\\= .kvDfEt53Pqnfmq37zSi9Yw\\=\\={margin-top:-5.7rem}}","",{version:3,sources:["webpack://./../node_modules/gatsby-core-theme/src/styles/utils/_media-queries.scss","webpack://./../node_modules/gatsby-core-theme/src/components/molecules/pros-cons/pros-cons.module.scss","webpack://./../node_modules/gatsby-core-theme/src/styles/utils/_mixins.scss"],names:[],mappings:"AAoDE,yCCtCF,4BAEI,YAAA,CAAA,CAGF,gCCZA,YAAA,CACA,qBDY0B,CACxB,kBAAA,CACA,kCAAA,CACA,eAAA,CACA,iBAAA,CACA,YAAA,CDkCF,yCCxCA,gCASI,eAAA,CACA,uBAAA,CAAA,CDuBJ,yCCjCA,gCAcI,SAAA,CACA,YAAA,CACA,kBAAA,CAAA,CAGF,4DCrCF,YAAA,CACA,kBDqCwB,CCpCxB,sBDoCgC,CAC5B,iBAAA,CACA,UAAA,CACA,WAAA,CACA,kBAAA,CDSJ,yCCdE,4DAQI,kBAAA,CAAA,CAGF,gEACE,SAAA,CAIJ,6DACE,qBAAA,CACA,oBAAA,CAEE,gBAAA,CACA,gBAAA,CAIJ,mCACE,gBAAA,CAEA,sCACE,YAAA,CACA,kBAAA,CAEA,0CACE,iBAAA,CDnBR,yCCyBA,wDAEI,iBAAA,CAAA,CAGF,oFACE,+BAAA,CAIJ,qFACE,0BAAA,CD7BF,yCC4BA,qFAII,kBAAA,CAAA",sourcesContent:["$media-query-sizes: (\n  mobile-s: (\n    min: 320px,\n    max: 374px,\n  ),\n  mobile-m: (\n    min: 375px,\n    max: 424px,\n  ),\n  mobile: (\n    min: 425px,\n    max: 767px,\n  ),\n  tablet: (\n    min: 768px,\n    max: 991px,\n  ),\n  laptop: (\n    min: 992px,\n    max: 1199px,\n  ),\n  desktop: (\n    min: 1200px,\n  ),\n);\n\n// Get media query sizes\n$screen: 'only screen';\n@function media-query($media, $optional-media: '', $min: true) {\n  $media-label: '';\n\n  @if ($optional-media != '') {\n    $media-sizes-min: map-get($media-query-sizes, $media);\n    $media-sizes-max: map-get($media-query-sizes, $optional-media);\n    $media-label: $screen +\n      \" and (min-width:#{map-get($media-sizes-min, 'min')}) and (max-width:#{map-get($media-sizes-max, 'max')})\";\n  } @else {\n    $query: 'max';\n\n    @if ($min) {\n      $query: 'min';\n    }\n\n    $media-sizes: map-get($media-query-sizes, $media);\n    $media-label: $screen + ' and (#{$query}-width:#{map-get($media-sizes, $query)})';\n  }\n\n  @return $media-label;\n}\n\n// Min media query\n@mixin min($media) {\n  @media #{media-query($media)} {\n    @content;\n  }\n}\n\n// Max media query\n@mixin max($media) {\n  @media #{media-query($media, '', false)} {\n    @content;\n  }\n}\n\n// Min & max media query\n@mixin min-max($min, $max) {\n  @media #{media-query($min, $max)} {\n    @content;\n  }\n}\n\n// Use this ONLY if you need a media query that doesn't fit the $media-query-sizes breakpoints above\n// Pass number, for example @include custom-min(992)\n@mixin custom-min($min) {\n  @media #{$screen} and (min-width: #{$min}px) {\n    @content;\n  }\n}\n\n@mixin custom-max($max) {\n  @media #{$screen} and (max-width: #{$max}px) {\n    @content;\n  }\n}\n\n@mixin custom-min-max($min, $max) {\n  @media #{$screen} and (min-width: #{$min}px) and (max-width: #{$max}px) {\n    @content;\n  }\n}\n\n// Landscape\n// (If we find more use cases of this in the future, might want to refactor this and include it in the media-query function for $screen)\n// Pass number\n$landscape: 'screen and (orientation:landscape)';\n\n@mixin landscape-max($max) {\n  @media #{$landscape} and (max-width: #{$max}px) {\n    @content;\n  }\n}\n\n@mixin landscape-min($min) {\n  @media #{$landscape} and (min-width: #{$min}px) {\n    @content;\n  }\n}\n",'/* stylelint-disable no-invalid-position-at-import-rule */\n@use \'sass:map\';\n\n// NOTE: General Styles\n@import "../../../styles/utils/variables/stack-order";\n@import "../../../styles/utils/variables/typography";\n@import "../../../styles/utils/variables/layout";\n@import "../../../styles/utils/media-queries";\n@import "../../../styles/utils/icons";\n@import "../../../styles/utils/tooltip";\n@import "../../../styles/utils/loader";\n@import "../../../styles/utils/mixins";\n@import "../../../styles/utils/scrollbar";\n@import "../../../styles/utils/animations";\n.prosCons {\n  @include min(tablet) {\n    display: flex;\n  }\n\n  div {\n    @include flex-direction(column);\n    align-items: center;\n    border-radius: var(--border-radius);\n    background: white;\n    margin-top: 4.3rem;\n    padding: 3rem;\n\n    @include max(mobile) {\n      max-width: 45rem;\n      margin: 4.3rem auto 1rem;\n    }\n\n    @include min(tablet) {\n      width: 50%;\n      padding: 4rem;\n      margin-bottom: 1rem;\n    }\n\n    .icon {\n      @include flex-align(center, center);\n      border-radius: 50%;\n      width: 9rem;\n      height: 9rem;\n      margin-top: -7.3rem;\n\n      @include min(tablet) {\n        margin-top: -8.2rem;\n      }\n\n      svg {\n        fill: white;\n      }\n    }\n\n    .title {\n      color: var(--color-22);\n      margin: 2rem 0 2.3rem;\n      font: {\n        size: 2.4rem;\n        weight: bold;\n      }\n    }\n\n    ul {\n      font-size: 1.8rem;\n\n      li {\n        display: flex;\n        margin-bottom: 1rem;\n\n        svg {\n          margin-right: 1rem;\n        }\n      }\n    }\n  }\n\n  .pros {\n    @include min(tablet) {\n      margin-right: 4rem;\n    }\n\n    .icon {\n      background: var(--primary-color);\n    }\n  }\n\n  .cons .icon {\n    background: var(--color-35);\n\n    @include max(mobile) {\n      margin-top: calc(-7.3rem - -1.6rem);\n    }\n  }\n}\n',"@mixin flex-align($align-items, $justify-content) {\n  display: flex;\n  align-items: $align-items;\n  justify-content: $justify-content;\n}\n\n@mixin flex-direction($flex-direction) {\n  display: flex;\n  flex-direction: $flex-direction;\n}\n\n@mixin overflow($overflow-type, $overflow-value, $scrolling) {\n  #{$overflow-type}: $overflow-value;\n  -webkit-overflow-scrolling: $scrolling; // Autoprefixer doesn't add\n}\n\n@mixin text-background($bgcolor, $text-color) {\n  background: $bgcolor;\n  border-radius: 100px;\n  color: $text-color;\n  font-weight: 700;\n  @include flex-align(center, center);\n  padding: 0 2rem;\n}\n\n@mixin link-color($color) {\n  color: $color;\n\n  &:hover {\n    color: $color;\n  }\n}\n\n// Using em because I want images in content to inherit size based on parent element (not root)\n@mixin content-img-float($direction) {\n  float: $direction;\n  @if $direction == right {\n    margin: var(--img-float-direction-right, 0 0 2.4rem 4.8rem);\n  } @else if $direction == left {\n    margin: var(--img-float-direction-left, 0 4.8rem 2.4rem 0);\n  } @else {\n    margin: 0 1em 1em 0;\n  }\n}\n\n@mixin content-img-align($direction: center, $spacing: var(--content-img-spacing, 1em)) {\n  display: block;\n  @if $direction == right {\n    margin: $spacing 0 $spacing auto;\n  } @else if $direction == left {\n    margin: $spacing auto $spacing 0;\n  } @else {\n    margin: $spacing auto;\n  }\n}\n\n@mixin section-arrow-down($color, $width, $height) {\n  position: relative;\n  &:after {\n    top: 100%;\n    left: 50%;\n    border: solid transparent;\n    content: '';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n    border-color: rgba(0, 0, 0, 0);\n    border-top: $height solid $color;\n    border-right: calc($width / 2) solid transparent;\n    border-left: calc($width / 2) solid transparent;\n    margin-left: - calc($width / 2);\n  }\n}\n\n@mixin gradientBtn($color1, $color2, $color3) {\n  background: linear-gradient(to bottom, $color1 0, $color2 14%, $color3 61%);\n  &:hover {\n    background: linear-gradient(to bottom, $color1 0, $color2 14%, $color3 61%);\n  }\n}\n\n@mixin sportBtn($color1, $color2) {\n  background: linear-gradient(to bottom, $color1 0, $color2 100%);\n  &:hover {\n    background: linear-gradient(to bottom, $color2 0, $color1 100%);\n  }\n}\n\n@mixin star($border-color: #ffb400, $fill-color: #ffb400, $width: 16px, $line-height: 2rem) {\n  line-height: $line-height;\n  width: $width;\n  font-weight: normal;\n  display: inline-block;\n  color: $fill-color;\n  font-size: 15px;\n  position: relative;\n  text-shadow: -1px 0 $border-color, 0 1px $border-color, 1px 0 $border-color, 0 -1px $border-color;\n\n  &:last-child {\n    margin-right: 0;\n  }\n  &:before {\n    content: '\\2605';\n  }\n}\n\n@mixin half-star($border-color: #ffb400, $half-empty-color: #ffb400, $half-full-color: white) {\n  line-height: 2rem;\n  width: 16px;\n  font-weight: normal;\n  display: inline-block;\n  color: $half-full-color;\n  font-size: 15px;\n  position: relative;\n  &:before {\n    content: '\\2605';\n  }\n  text-shadow: -1px 0 $border-color, 0 1px $border-color, 1px 0 $border-color, 0 -1px $border-color;\n  &:after {\n    content: '\\2605';\n    color: $half-empty-color;\n    position: absolute;\n    width: 7px;\n    overflow: hidden;\n    bottom: 0;\n    left: 0;\n  }\n}\n\n@mixin border-gradient($color-1, $color-2, $bgcolor, $radius: 0.8rem, $border-width: 2px) {\n  background: $bgcolor;\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border-radius: $radius;\n    border: $border-width solid transparent;\n    background: $color-1, $color-2 border-box;\n    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n    -webkit-mask-composite: destination-out;\n    mask-composite: exclude;\n  }\n}\n\n@mixin border-gradient-single($color-1, $bgcolor, $radius: 0.8rem, $border-width: 0.1rem) {\n  background: $bgcolor;\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border-radius: $radius;\n    border: $border-width solid transparent;\n    background: $color-1 border-box;\n    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n    -webkit-mask-composite: destination-out;\n    mask-composite: exclude;\n  }\n}\n\n@mixin buttonsColor($color1, $color2, $color3, $textColor: 'white') {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background-color: $color1;\n  color: $textColor;\n  padding: 0.9rem 3rem;\n  font-weight: 700;\n  font-size: 1.8rem;\n  border-radius: var(--border-radius);\n\n  > svg {\n    flex: none;\n    margin-left: 0.8rem;\n  }\n\n  &:hover {\n    background-color: $color2;\n    color: $textColor;\n  }\n\n  &:active {\n    background-color: $color3;\n    color: $textColor;\n  }\n}\n"],sourceRoot:""}]),___CSS_LOADER_EXPORT___.locals={prosCons:"C2N5Sip5HF0Xy0h28uZdoA==",icon:"kvDfEt53Pqnfmq37zSi9Yw==",title:"Blj+9D4y7VA7JOJt5HJzMQ==",pros:"UO6hxJvyQQg2elOUZ2Z16g==",cons:"Sh+GXsSqgjyzgJOmzgKcBg=="};const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___}}]);
+"use strict";(self.webpackChunkgatsby_matrix_theme=self.webpackChunkgatsby_matrix_theme||[]).push([[563],{"../node_modules/gatsby-core-theme/src/components/molecules/pros-cons/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>pros_cons});var react=__webpack_require__("../node_modules/react/index.js"),prop_types=__webpack_require__("../node_modules/gatsby-core-theme/node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),injectStylesIntoStyleTag=__webpack_require__("../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),injectStylesIntoStyleTag_default=__webpack_require__.n(injectStylesIntoStyleTag),pros_cons_module=__webpack_require__("../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/sass-loader/dist/cjs.js!../node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[10].use[3]!../node_modules/gatsby-core-theme/src/components/molecules/pros-cons/pros-cons.module.scss"),options={insert:"head",singleton:!1};injectStylesIntoStyleTag_default()(pros_cons_module.A,options);const pros_cons_pros_cons_module=pros_cons_module.A.locals||{};var keygen=__webpack_require__("../node_modules/gatsby-core-theme/src/helpers/keygen.js"),useTranslate=__webpack_require__("../node_modules/gatsby-core-theme/src/hooks/useTranslate/useTranslate.js"),ProsCons=function(_ref){var _module$pros,_module$cons,_ref$module=_ref.module,module=void 0===_ref$module?{}:_ref$module,_ref$pros=_ref.pros,pros=void 0===_ref$pros?"Pros":_ref$pros,_ref$cons=_ref.cons,cons=void 0===_ref$cons?"Cons":_ref$cons,icons=_ref.icons;return react.createElement("div",{className:pros_cons_pros_cons_module.prosCons||""},react.createElement("div",{className:pros_cons_pros_cons_module.pros||""},icons&&react.createElement("span",{className:pros_cons_pros_cons_module.icon||""},icons[0]),react.createElement("span",{className:pros_cons_pros_cons_module.title||""},(0,useTranslate.A)("pros",pros)),react.createElement("ul",null,null===(_module$pros=module.pros)||void 0===_module$pros?void 0:_module$pros.map((function(perk){return react.createElement("li",{key:(0,keygen.A)()},react.createElement("span",{className:pros_cons_pros_cons_module.listIcon||""},icons&&icons[2]),perk)})))),react.createElement("div",{className:pros_cons_pros_cons_module.cons||""},icons&&react.createElement("span",{className:pros_cons_pros_cons_module.icon||""},icons[1]),react.createElement("span",{className:pros_cons_pros_cons_module.title||""},(0,useTranslate.A)("cons",cons)),react.createElement("ul",null,null===(_module$cons=module.cons)||void 0===_module$cons?void 0:_module$cons.map((function(con){return react.createElement("li",{key:(0,keygen.A)()},react.createElement("span",{className:pros_cons_pros_cons_module.listIcon||""},icons&&icons[3]),con)})))))};ProsCons.displayName="ProsCons",ProsCons.propTypes={module:prop_types_default().objectOf(prop_types_default().any).isRequired,pros:prop_types_default().string,cons:prop_types_default().string,icons:prop_types_default().arrayOf(prop_types_default().any),styles:prop_types_default().shape({})},ProsCons.__docgenInfo={description:"",methods:[],displayName:"ProsCons",props:{module:{defaultValue:{value:"{}",computed:!1},description:"",type:{name:"objectOf",value:{name:"any"}},required:!1},pros:{defaultValue:{value:"'Pros'",computed:!1},description:"",type:{name:"string"},required:!1},cons:{defaultValue:{value:"'Cons'",computed:!1},description:"",type:{name:"string"},required:!1},icons:{description:"",type:{name:"arrayOf",value:{name:"any"}},required:!1},styles:{description:"",type:{name:"shape",value:{}},required:!1}}};const pros_cons=ProsCons;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../node_modules/gatsby-core-theme/src/components/molecules/pros-cons/index.js"]={name:"ProsCons",docgenInfo:ProsCons.__docgenInfo,path:"../node_modules/gatsby-core-theme/src/components/molecules/pros-cons/index.js"})},"../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/sass-loader/dist/cjs.js!../node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[10].use[3]!../node_modules/gatsby-core-theme/src/components/molecules/pros-cons/pros-cons.module.scss":(module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../node_modules/css-loader/dist/runtime/cssWithMappingToString.js"),_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__),_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,"@media only screen and (min-width:768px){.C2N5Sip5HF0Xy0h28uZdoA\\=\\={display:flex}}.C2N5Sip5HF0Xy0h28uZdoA\\=\\= div{display:flex;flex-direction:column;align-items:center;border-radius:var(--border-radius);background:#fff;margin-top:4.3rem;padding:3rem}@media only screen and (max-width:767px){.C2N5Sip5HF0Xy0h28uZdoA\\=\\= div{max-width:45rem;margin:4.3rem auto 1rem}}@media only screen and (min-width:768px){.C2N5Sip5HF0Xy0h28uZdoA\\=\\= div{width:50%;padding:4rem;margin-bottom:1rem}}.C2N5Sip5HF0Xy0h28uZdoA\\=\\= div .kvDfEt53Pqnfmq37zSi9Yw\\=\\={display:flex;align-items:center;justify-content:center;border-radius:50%;width:9rem;height:9rem;margin-top:-7.3rem}@media only screen and (min-width:768px){.C2N5Sip5HF0Xy0h28uZdoA\\=\\= div .kvDfEt53Pqnfmq37zSi9Yw\\=\\={margin-top:-8.2rem}}.C2N5Sip5HF0Xy0h28uZdoA\\=\\= div .kvDfEt53Pqnfmq37zSi9Yw\\=\\= svg{fill:#fff}.C2N5Sip5HF0Xy0h28uZdoA\\=\\= div .Blj\\+9D4y7VA7JOJt5HJzMQ\\=\\={color:var(--color-22);margin:2rem 0 2.3rem;font-size:2.4rem;font-weight:bold}.C2N5Sip5HF0Xy0h28uZdoA\\=\\= div ul{font-size:1.8rem}.C2N5Sip5HF0Xy0h28uZdoA\\=\\= div ul li{display:flex;margin-bottom:1rem}.C2N5Sip5HF0Xy0h28uZdoA\\=\\= div ul li svg{margin-right:1rem}@media only screen and (min-width:768px){.C2N5Sip5HF0Xy0h28uZdoA\\=\\= .UO6hxJvyQQg2elOUZ2Z16g\\=\\={margin-right:4rem}}.C2N5Sip5HF0Xy0h28uZdoA\\=\\= .UO6hxJvyQQg2elOUZ2Z16g\\=\\= .kvDfEt53Pqnfmq37zSi9Yw\\=\\={background:var(--primary-color)}.C2N5Sip5HF0Xy0h28uZdoA\\=\\= .Sh\\+GXsSqgjyzgJOmzgKcBg\\=\\= .kvDfEt53Pqnfmq37zSi9Yw\\=\\={background:var(--color-35)}@media only screen and (max-width:767px){.C2N5Sip5HF0Xy0h28uZdoA\\=\\= .Sh\\+GXsSqgjyzgJOmzgKcBg\\=\\= .kvDfEt53Pqnfmq37zSi9Yw\\=\\={margin-top:-5.7rem}}","",{version:3,sources:["webpack://./../node_modules/gatsby-core-theme/src/styles/utils/_media-queries.scss","webpack://./../node_modules/gatsby-core-theme/src/components/molecules/pros-cons/pros-cons.module.scss","webpack://./../node_modules/gatsby-core-theme/src/styles/utils/_mixins.scss"],names:[],mappings:"AAoDE,yCCtCF,4BAEI,YAAA,CAAA,CAGF,gCCZA,YAAA,CACA,qBDY0B,CACxB,kBAAA,CACA,kCAAA,CACA,eAAA,CACA,iBAAA,CACA,YAAA,CDkCF,yCCxCA,gCASI,eAAA,CACA,uBAAA,CAAA,CDuBJ,yCCjCA,gCAcI,SAAA,CACA,YAAA,CACA,kBAAA,CAAA,CAGF,4DCrCF,YAAA,CACA,kBDqCwB,CCpCxB,sBDoCgC,CAC5B,iBAAA,CACA,UAAA,CACA,WAAA,CACA,kBAAA,CDSJ,yCCdE,4DAQI,kBAAA,CAAA,CAGF,gEACE,SAAA,CAIJ,6DACE,qBAAA,CACA,oBAAA,CAEE,gBAAA,CACA,gBAAA,CAIJ,mCACE,gBAAA,CAEA,sCACE,YAAA,CACA,kBAAA,CAEA,0CACE,iBAAA,CDnBR,yCCyBA,wDAEI,iBAAA,CAAA,CAGF,oFACE,+BAAA,CAIJ,qFACE,0BAAA,CD7BF,yCC4BA,qFAII,kBAAA,CAAA",sourcesContent:["$media-query-sizes: (\n  mobile-s: (\n    min: 320px,\n    max: 374px,\n  ),\n  mobile-m: (\n    min: 375px,\n    max: 424px,\n  ),\n  mobile: (\n    min: 425px,\n    max: 767px,\n  ),\n  tablet: (\n    min: 768px,\n    max: 991px,\n  ),\n  laptop: (\n    min: 992px,\n    max: 1199px,\n  ),\n  desktop: (\n    min: 1200px,\n  ),\n);\n\n// Get media query sizes\n$screen: 'only screen';\n@function media-query($media, $optional-media: '', $min: true) {\n  $media-label: '';\n\n  @if ($optional-media != '') {\n    $media-sizes-min: map-get($media-query-sizes, $media);\n    $media-sizes-max: map-get($media-query-sizes, $optional-media);\n    $media-label: $screen +\n      \" and (min-width:#{map-get($media-sizes-min, 'min')}) and (max-width:#{map-get($media-sizes-max, 'max')})\";\n  } @else {\n    $query: 'max';\n\n    @if ($min) {\n      $query: 'min';\n    }\n\n    $media-sizes: map-get($media-query-sizes, $media);\n    $media-label: $screen + ' and (#{$query}-width:#{map-get($media-sizes, $query)})';\n  }\n\n  @return $media-label;\n}\n\n// Min media query\n@mixin min($media) {\n  @media #{media-query($media)} {\n    @content;\n  }\n}\n\n// Max media query\n@mixin max($media) {\n  @media #{media-query($media, '', false)} {\n    @content;\n  }\n}\n\n// Min & max media query\n@mixin min-max($min, $max) {\n  @media #{media-query($min, $max)} {\n    @content;\n  }\n}\n\n// Use this ONLY if you need a media query that doesn't fit the $media-query-sizes breakpoints above\n// Pass number, for example @include custom-min(992)\n@mixin custom-min($min) {\n  @media #{$screen} and (min-width: #{$min}px) {\n    @content;\n  }\n}\n\n@mixin custom-max($max) {\n  @media #{$screen} and (max-width: #{$max}px) {\n    @content;\n  }\n}\n\n@mixin custom-min-max($min, $max) {\n  @media #{$screen} and (min-width: #{$min}px) and (max-width: #{$max}px) {\n    @content;\n  }\n}\n\n// Landscape\n// (If we find more use cases of this in the future, might want to refactor this and include it in the media-query function for $screen)\n// Pass number\n$landscape: 'screen and (orientation:landscape)';\n\n@mixin landscape-max($max) {\n  @media #{$landscape} and (max-width: #{$max}px) {\n    @content;\n  }\n}\n\n@mixin landscape-min($min) {\n  @media #{$landscape} and (min-width: #{$min}px) {\n    @content;\n  }\n}\n",'/* stylelint-disable no-invalid-position-at-import-rule */\n@use \'sass:map\';\n\n// NOTE: General Styles\n@import "../../../styles/utils/variables/stack-order";\n@import "../../../styles/utils/variables/typography";\n@import "../../../styles/utils/variables/layout";\n@import "../../../styles/utils/media-queries";\n@import "../../../styles/utils/icons";\n@import "../../../styles/utils/tooltip";\n@import "../../../styles/utils/loader";\n@import "../../../styles/utils/mixins";\n@import "../../../styles/utils/scrollbar";\n@import "../../../styles/utils/animations";\n.prosCons {\n  @include min(tablet) {\n    display: flex;\n  }\n\n  div {\n    @include flex-direction(column);\n    align-items: center;\n    border-radius: var(--border-radius);\n    background: white;\n    margin-top: 4.3rem;\n    padding: 3rem;\n\n    @include max(mobile) {\n      max-width: 45rem;\n      margin: 4.3rem auto 1rem;\n    }\n\n    @include min(tablet) {\n      width: 50%;\n      padding: 4rem;\n      margin-bottom: 1rem;\n    }\n\n    .icon {\n      @include flex-align(center, center);\n      border-radius: 50%;\n      width: 9rem;\n      height: 9rem;\n      margin-top: -7.3rem;\n\n      @include min(tablet) {\n        margin-top: -8.2rem;\n      }\n\n      svg {\n        fill: white;\n      }\n    }\n\n    .title {\n      color: var(--color-22);\n      margin: 2rem 0 2.3rem;\n      font: {\n        size: 2.4rem;\n        weight: bold;\n      }\n    }\n\n    ul {\n      font-size: 1.8rem;\n\n      li {\n        display: flex;\n        margin-bottom: 1rem;\n\n        svg {\n          margin-right: 1rem;\n        }\n      }\n    }\n  }\n\n  .pros {\n    @include min(tablet) {\n      margin-right: 4rem;\n    }\n\n    .icon {\n      background: var(--primary-color);\n    }\n  }\n\n  .cons .icon {\n    background: var(--color-35);\n\n    @include max(mobile) {\n      margin-top: calc(-7.3rem - -1.6rem);\n    }\n  }\n}\n',"@mixin flex-align($align-items, $justify-content) {\n  display: flex;\n  align-items: $align-items;\n  justify-content: $justify-content;\n}\n\n@mixin flex-direction($flex-direction) {\n  display: flex;\n  flex-direction: $flex-direction;\n}\n\n@mixin overflow($overflow-type, $overflow-value, $scrolling) {\n  #{$overflow-type}: $overflow-value;\n  -webkit-overflow-scrolling: $scrolling; // Autoprefixer doesn't add\n}\n\n@mixin text-background($bgcolor, $text-color) {\n  background: $bgcolor;\n  border-radius: 100px;\n  color: $text-color;\n  font-weight: 700;\n  @include flex-align(center, center);\n  padding: 0 2rem;\n}\n\n@mixin link-color($color) {\n  color: $color;\n\n  &:hover {\n    color: $color;\n  }\n}\n\n// Using em because I want images in content to inherit size based on parent element (not root)\n@mixin content-img-float($direction) {\n  float: $direction;\n  @if $direction == right {\n    margin: var(--img-float-direction-right, 0 0 2.4rem 4.8rem);\n  } @else if $direction == left {\n    margin: var(--img-float-direction-left, 0 4.8rem 2.4rem 0);\n  } @else {\n    margin: 0 1em 1em 0;\n  }\n}\n\n@mixin content-img-align($direction: center, $spacing: var(--content-img-spacing, 1em)) {\n  display: block;\n  @if $direction == right {\n    margin: $spacing 0 $spacing auto;\n  } @else if $direction == left {\n    margin: $spacing auto $spacing 0;\n  } @else {\n    margin: $spacing auto;\n  }\n}\n\n@mixin section-arrow-down($color, $width, $height) {\n  position: relative;\n  &:after {\n    top: 100%;\n    left: 50%;\n    border: solid transparent;\n    content: '';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n    border-color: rgba(0, 0, 0, 0);\n    border-top: $height solid $color;\n    border-right: calc($width / 2) solid transparent;\n    border-left: calc($width / 2) solid transparent;\n    margin-left: - calc($width / 2);\n  }\n}\n\n@mixin gradientBtn($color1, $color2, $color3) {\n  background: linear-gradient(to bottom, $color1 0, $color2 14%, $color3 61%);\n  &:hover {\n    background: linear-gradient(to bottom, $color1 0, $color2 14%, $color3 61%);\n  }\n}\n\n@mixin sportBtn($color1, $color2) {\n  background: linear-gradient(to bottom, $color1 0, $color2 100%);\n  &:hover {\n    background: linear-gradient(to bottom, $color2 0, $color1 100%);\n  }\n}\n\n@mixin star($border-color: #ffb400, $fill-color: #ffb400, $width: 16px, $line-height: 2rem) {\n  line-height: $line-height;\n  width: $width;\n  font-weight: normal;\n  display: inline-block;\n  color: $fill-color;\n  font-size: 15px;\n  position: relative;\n  text-shadow: -1px 0 $border-color, 0 1px $border-color, 1px 0 $border-color, 0 -1px $border-color;\n\n  &:last-child {\n    margin-right: 0;\n  }\n  &:before {\n    content: '\\2605';\n  }\n}\n\n@mixin half-star($border-color: #ffb400, $half-empty-color: #ffb400, $half-full-color: white) {\n  line-height: 2rem;\n  width: 16px;\n  font-weight: normal;\n  display: inline-block;\n  color: $half-full-color;\n  font-size: 15px;\n  position: relative;\n  &:before {\n    content: '\\2605';\n  }\n  text-shadow: -1px 0 $border-color, 0 1px $border-color, 1px 0 $border-color, 0 -1px $border-color;\n  &:after {\n    content: '\\2605';\n    color: $half-empty-color;\n    position: absolute;\n    width: 7px;\n    overflow: hidden;\n    bottom: 0;\n    left: 0;\n  }\n}\n\n@mixin border-gradient($color-1, $color-2, $bgcolor, $radius: 0.8rem, $border-width: 2px) {\n  background: $bgcolor;\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border-radius: $radius;\n    border: $border-width solid transparent;\n    background: $color-1, $color-2 border-box;\n    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n    -webkit-mask-composite: destination-out;\n    mask-composite: exclude;\n  }\n}\n\n@mixin border-gradient-single($color-1, $bgcolor, $radius: 0.8rem, $border-width: 0.1rem) {\n  background: $bgcolor;\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border-radius: $radius;\n    border: $border-width solid transparent;\n    background: $color-1 border-box;\n    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n    -webkit-mask-composite: destination-out;\n    mask-composite: exclude;\n  }\n}\n\n@mixin buttonsColor($color1, $color2, $color3, $textColor: 'white') {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background-color: $color1;\n  color: $textColor;\n  padding: 0.9rem 3rem;\n  font-weight: 700;\n  font-size: 1.8rem;\n  border-radius: var(--border-radius);\n\n  > svg {\n    flex: none;\n    margin-left: 0.8rem;\n  }\n\n  &:hover {\n    background-color: $color2;\n    color: $textColor;\n  }\n\n  &:active {\n    background-color: $color3;\n    color: $textColor;\n  }\n}\n"],sourceRoot:""}]),___CSS_LOADER_EXPORT___.locals={prosCons:"C2N5Sip5HF0Xy0h28uZdoA==",icon:"kvDfEt53Pqnfmq37zSi9Yw==",title:"Blj+9D4y7VA7JOJt5HJzMQ==",pros:"UO6hxJvyQQg2elOUZ2Z16g==",cons:"Sh+GXsSqgjyzgJOmzgKcBg=="};const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___}}]);