{"version":3,"sources":["webpack:///./src/components/reviews/ReviewsHeader.js","webpack:///./src/templates/routes/reviews.js","webpack:///./node_modules/object-fit-images/dist/ofi.common-js.js","webpack:///./src/utils/order.js","webpack:///./src/components/seo/Page.js","webpack:///./src/components/InstagramSimpleImage.js","webpack:///./src/components/InstagramShowcase.js","webpack:///./src/components/product/ProductCategoryCards.js","webpack:///./node_modules/gatsby-image/withIEPolyfill/index.js","webpack:///./src/components/PageHero.js"],"names":["HeaderSection","styled","section","responsive","md","HeaderRow","Row","HeaderColumn","div","attrs","className","Header","Font","circular","rem","dutch","LearnMoreButton","a","ReviewsHeader","props","state","modalIsOpen","openModal","bind","closeModal","this","setState","render","heroTitle","heroSubhead","onClick","Text","id","defaultMessage","ReviewPolicyModal","isOpen","onRequestClose","React","Component","CategoryCardsWrapper","OrderedCategoryIds","ReviewsPage","data","allContentfulReviewsPage","edges","node","pageTitle","pageDescription","categories","_getOrderedCategories","allContentfulProductCategory","nodes","productsArray","categoryMap","forEach","category","products","generateProductsFromCategory","length","concat","push","name","shortName","selectedProductIndex","seo","pagePath","title","description","setAtLeastTablet","componentDidMount","updatePageData","label","updateLayoutState","navColor","banner","window","addEventListener","componentWillUnmount","removeEventListener","allCategoryNodes","orderArray","reduce","productArray","product","getProductIdForSku","sku","productReviews","allProductReview","filter","review","product_id","categoryName","reviews","simpleName","NameMap","plain","productUrl","process","slug","changeActiveProduct","index","_trackActiveProductClick","event","option","nonInteraction","metrics","track","atLeastTablet","atLeast","tablet","reviewRatingsMap","reviewCountsMap","activeProduct","productRating","productId","productName","reviewScore","reviewCount","page","experts","expertsTitle","expertsSubhead","instagramImages","press","heroImageDesktop","heroImageMobile","heroContent","Page","PageHero","backgroundColor","Color","ritualYellow","imageMobile","imageDesktop","imageObjectPosition","Reviews","key","onProductSelect","bottomPadding","InstagramShowcase","images","Experts","arrowsEnabled","Press","quotes","background","ProductCategoryCards","StickyProductNav","ctaLocation","scrollOffset","showLearnMore","showTopBar","connect","productSelectors","OFI","propRegex","testImg","Image","style","supportsObjectFit","supportsObjectPosition","supportsOFI","supportsCurrentSrc","currentSrc","nativeGetAttribute","getAttribute","nativeSetAttribute","setAttribute","autoModeEnabled","setPlaceholder","img","width","height","placeholder","call","onImageReady","callback","naturalWidth","setTimeout","fixOne","el","parsed","getComputedStyle","fontFamily","exec","getStyle","ofi","skipTest","srcset","src","naturalHeight","descriptors","get","prop","set","value","Object","defineProperty","ss","keepSrcUsable","err","console","warn","picturefill","pf","_","ns","evaled","fillImg","reselect","curSrc","supported","polyfillCurrentSrc","backgroundImage","replace","backgroundPosition","backgroundRepeat","backgroundOrigin","test","backgroundSize","fix","imgs","opts","startAutoMode","document","getElementsByTagName","querySelectorAll","i","body","e","target","tagName","watchMQ","getOfiImageMaybe","HTMLImageElement","prototype","String","hijackAttributes","module","exports","array","order","property","sort","b","aIndex","indexOf","bIndex","PageSEO","image","InstagramImageLink","sm","ImageWrapper","lg","InstagramImage","href","aria-label","rel","fixed","loading","alt","userSelect","userDrag","pointerEvents","touchCallout","OuterWrapper","noTopMargin","StyledContainer","Container","CommunityArea","Anchor","FeedTitle","h2","ritualBlue","FeedSubtitle","media","SimpleImageContainer","children","hrefLang","values","link","map","Wrapper","CategoryCardsContainer","p","scrollable","Slide","MagicLink","GridSlide","mobile","ImageContainer","RibbonStyle","css","OrderedCardShortNames","intl","cf","orderedCategoryNodes","handleClick","location","renderSlides","slides","SlideComponent","slide","to","url","fluid","altText","imgStyle","objectPosition","flag","contentStyle","white","bundleImage","bundleImages","discountData","getDiscountData","shopLandingReference","cardImage","t","titleCopy","bleedLeft","bleedRight","ProductCategoryCardsQuery","query","componentQuery","_interopRequireWildcard3","require","_interopRequireDefault","__esModule","default","_extends2","_objectWithoutPropertiesLoose2","_interopRequireWildcard2","_inheritsLoose2","_react","_propTypes","_index","ImageWithIEPolyfill","_Component","_this","_len","arguments","args","Array","_key","apply","imageRef","innerRef","createRef","placeholderRef","_proto","_this2","createElement","objectFit","Promise","resolve","then","_ref","ObjectFitImages","current","_this$props","polyfillStyle","ref","placeholderStyle","propTypes","string","defaultProps","_default","forwardRef","Column","ContentArea","columnStyling","defaultStyle","position","left","top","zIndex"],"mappings":"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","file":"component---src-templates-routes-reviews-js-8fe3f37614e88fefe753.js","sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\n\n// Utils\nimport { Font, rem, responsive } from \"../../utils/style\";\n\n// Components\nimport Row from \"../Row\";\nimport ReviewPolicyModal from \"../reviews/ReviewPolicyModal\";\nimport Text from \"../Text\";\n\nconst HeaderSection = styled.section`\n  height: 100%;\n  margin: 74px auto;\n\n  ${responsive.md`\n    margin: 80px auto;\n  `}\n`;\n\nconst HeaderRow = styled(Row)`\n  height: 100%;\n`;\n\nconst HeaderColumn = styled.div.attrs({\n  className: \"col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 text-center\",\n})`\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  padding-left: 0;\n  padding-right: 0;\n`;\n\nconst Header = styled.div`\n  margin: auto 8px;\n  h1 {\n    ${Font.circular}\n    font-size: ${rem(30)};\n    line-height: ${rem(36)};\n    letter-spacing: -0.4px;\n    text-align: center;\n    margin-bottom: 16px;\n\n    ${responsive.md`\n      font-size: ${rem(48)};\n      line-height: ${rem(54)};\n      letter-spacing: -1.4px;\n      margin-bottom: 24px;\n    `}\n  }\n\n  p {\n    ${Font.dutch}\n    font-size: ${rem(16)};\n    line-height: ${rem(26)};\n    margin-bottom: 0;\n\n    ${responsive.md`\n      font-size: ${rem(18)};\n      line-height: ${rem(28)};\n    `}\n  }\n`;\n\n// const Headers\n\nconst LearnMoreButton = styled.a.attrs({\n  className: \"-underline\",\n})`\n  border-width: 1px !important;\n`;\n\nexport default class ReviewsHeader extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      modalIsOpen: false,\n    };\n    this.openModal = this.openModal.bind(this);\n    this.closeModal = this.closeModal.bind(this);\n  }\n\n  openModal() {\n    this.setState({ modalIsOpen: true });\n  }\n\n  closeModal() {\n    this.setState({ modalIsOpen: false });\n  }\n\n  render() {\n    const { heroTitle, heroSubhead } = this.props;\n\n    return (\n      <HeaderSection>\n        <HeaderRow>\n          <HeaderColumn>\n            <Header>\n              <h1>{heroTitle}</h1>\n              <p>\n                {heroSubhead}{\" \"}\n                <LearnMoreButton onClick={this.openModal}>\n                  <Text id=\"general.learn-more\" defaultMessage=\"Learn More\" />\n                </LearnMoreButton>\n                .\n              </p>\n            </Header>\n          </HeaderColumn>\n        </HeaderRow>\n\n        <ReviewPolicyModal\n          isOpen={this.state.modalIsOpen}\n          onRequestClose={this.closeModal}\n        />\n      </HeaderSection>\n    );\n  }\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { graphql } from \"gatsby\";\n\n// Utils\nimport { atLeast, Color, responsive, rem } from \"../../utils/style\";\nimport NameMap from \"../../utils/nameMap\";\nimport { getProductIdForSku } from \"../../utils/planToProduct\";\nimport metrics from \"../../utils/metrics\";\nimport { orderArray } from \"../../utils/order\";\n\n// Components\nimport PageSEO from \"../../components/seo/Page\";\nimport ReviewsHeader from \"../../components/reviews/ReviewsHeader\";\nimport Reviews from \"../../components/product/Reviews\";\nimport InstagramShowcase from \"../../components/InstagramShowcase\";\nimport Experts from \"../../components/product/Experts\";\nimport Press from \"../../components/home/Press\";\nimport ProductCategoryCards from \"../../components/product/ProductCategoryCards\";\nimport CircleNew from \"../../components/home/Circle.New\";\nimport PageHero from \"../../components/PageHero\";\n\nimport Text from \"../../components/Text\";\n\nimport StickyProductNav from \"../../components/global/StickyProductNav\";\n\nimport { connect } from \"react-redux\";\nimport productSelectors from \"../../store/product/selectors\";\n\n// Styled Elements\nconst CategoryCardsWrapper = styled.div`\n  position: relative;\n  overflow: hidden;\n\n  h3 {\n    font-size: ${rem(24)};\n    letter-spacing: -0.28px;\n    line-height: ${rem(34)};\n    text-align: center;\n    margin-bottom: 24px;\n\n    ${responsive.md`\n      font-size: ${rem(40)};\n      letter-spacing: -1.17px;\n      line-height: ${rem(54)};\n      margin-bottom: 56px;\n    `}\n  }\n`;\n\nconst OrderedCategoryIds = [\n  \"44TmdusDzEH95uGu0URjIr\", // Women\n  \"71526baqpQqVsScHBZpIEl\", // Men\n  \"16dqMm2vfVsgy539guPkkE\", // Kids & Teens\n];\n\nexport class ReviewsPage extends React.Component {\n  constructor(props) {\n    super(props);\n\n    const {\n      pageTitle,\n      pageDescription,\n    } = props.data.allContentfulReviewsPage.edges[0].node;\n\n    const categories = this._getOrderedCategories(\n      props.data.allContentfulProductCategory.nodes,\n    );\n\n    let productsArray = [];\n    this.categoryMap = [];\n\n    categories.forEach(category => {\n      const products = this.generateProductsFromCategory(category);\n      if (!products.length) return;\n\n      productsArray = productsArray.concat(products);\n\n      this.categoryMap.push({\n        name: category.shortName,\n        products: products,\n      });\n    });\n\n    this.state = {\n      products: productsArray,\n      selectedProductIndex: 0,\n      seo: {\n        pagePath: \"reviews\",\n        title: pageTitle,\n        description: pageDescription,\n      },\n    };\n\n    this.setAtLeastTablet = this.setAtLeastTablet.bind(this);\n  }\n\n  componentDidMount() {\n    this.props.updatePageData({\n      label: \"Product Reviews\",\n    });\n\n    this.props.updateLayoutState({\n      navColor: \"#FFFFFF\",\n      banner: false,\n    });\n\n    window.addEventListener(\"resize\", this.setAtLeastTablet);\n    this.setAtLeastTablet();\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener(\"resize\", this.setAtLeastTablet);\n  }\n\n  _getOrderedCategories(allCategoryNodes) {\n    return orderArray(allCategoryNodes, OrderedCategoryIds, \"contentful_id\");\n  }\n\n  generateProductsFromCategory(category) {\n    return category.products.reduce((productArray, product) => {\n      const id = getProductIdForSku(product.sku);\n      const productReviews = this.props.data.allProductReview.nodes.filter(\n        review => review.product_id === id,\n      );\n\n      // Only include reviewed products\n      if (productReviews.length > 0) {\n        productArray.push({\n          ...product,\n          id: id,\n          categoryName: category.categoryName,\n          reviews: productReviews,\n          simpleName: NameMap(product.name).plain,\n          productUrl: `${process.env.GATSBY_URL}/products/${product.slug}`,\n        });\n      }\n      return productArray;\n    }, []);\n  }\n\n  changeActiveProduct(index) {\n    this.setState({\n      selectedProductIndex: index,\n    });\n\n    this._trackActiveProductClick(index);\n  }\n\n  _trackActiveProductClick(index) {\n    let event = {\n      option: this.state.products[index].simpleName,\n      nonInteraction: false,\n    };\n\n    metrics.track(\"Product Reviews Selected\", event);\n  }\n\n  setAtLeastTablet() {\n    this.setState({\n      atLeastTablet: atLeast.tablet(),\n    });\n  }\n\n  render() {\n    let { products, selectedProductIndex } = this.state;\n    const { reviewRatingsMap, reviewCountsMap } = this.props;\n    let activeProduct = products[selectedProductIndex];\n\n    let productRating = {\n      productId: activeProduct.id,\n      productUrl: activeProduct.productUrl,\n      productName: activeProduct.simpleName,\n      reviewScore: reviewRatingsMap[activeProduct.id],\n      reviewCount: reviewCountsMap[activeProduct.id],\n    };\n    let page = this.props.data.allContentfulReviewsPage.edges[0].node;\n    let {\n      experts,\n      expertsTitle,\n      expertsSubhead,\n      instagramImages,\n      heroTitle,\n      heroSubhead,\n      press,\n    } = page;\n\n    const { heroImageDesktop, heroImageMobile } = this.props.data;\n\n    let heroContent = {\n      products,\n      heroTitle,\n      heroSubhead,\n      heroImageDesktop,\n      heroImageMobile,\n    };\n\n    return (\n      <>\n        <PageSEO {...this.state.seo} />\n        <PageHero\n          backgroundColor={Color.ritualYellow}\n          imageMobile={heroImageMobile}\n          imageDesktop={heroImageDesktop}\n          imageObjectPosition=\"0% 0%\"\n          className=\"height-fit\"\n        >\n          <ReviewsHeader {...heroContent} />\n        </PageHero>\n\n        <Reviews\n          key={activeProduct.id}\n          reviews={activeProduct.reviews}\n          products={products}\n          categoryMap={this.categoryMap}\n          selectedProductIndex={selectedProductIndex}\n          onProductSelect={this.changeActiveProduct.bind(this)}\n          bottomPadding={false}\n          {...productRating}\n        />\n\n        <InstagramShowcase images={instagramImages} backgroundColor=\"#FFFFFF\">\n          <CircleNew className=\"bottom left\" />\n        </InstagramShowcase>\n\n        <Experts\n          arrowsEnabled={true}\n          expertsTitle={expertsTitle}\n          expertsSubhead={expertsSubhead}\n          experts={experts}\n        >\n          <CircleNew className=\"top left experts\" />\n        </Experts>\n\n        <Press quotes={press} background={\"#e9eef18f\"} />\n\n        <CategoryCardsWrapper className=\"mt-7 mt-md-9 mb-7 mb-md-9\">\n          <h3>\n            <Text\n              id=\"category-card.section.heading\"\n              defaultMessage=\"Find Your Ritual\"\n            />\n          </h3>\n          <ProductCategoryCards />\n        </CategoryCardsWrapper>\n\n        <StickyProductNav\n          sku={activeProduct.sku}\n          ctaLocation={\"PDP\"}\n          scrollOffset={150}\n          showLearnMore={true}\n          showTopBar={true}\n        />\n      </>\n    );\n  }\n}\n\nconst mapStateToProps = state => ({\n  reviewCountsMap: productSelectors.reviewCountsMap(state),\n  reviewRatingsMap: productSelectors.reviewRatingsMap(state),\n});\n\nexport default connect(mapStateToProps)(ReviewsPage);\n\nexport const pageQuery = graphql`\n  query reviewsPageQuery($locale: String!) {\n    allContentfulReviewsPage(\n      filter: {\n        node_locale: { eq: $locale }\n        contentful_id: { eq: \"1gmebXPSIMeyUYsw02qi2o\" }\n      }\n    ) {\n      edges {\n        node {\n          pageTitle\n          pageDescription\n          heroTitle\n          heroSubhead\n          expertsTitle\n          expertsSubhead\n          experts {\n            name\n            title\n            image {\n              fluid(maxWidth: 80, quality: 90) {\n                ...GatsbyContentfulFluid_withWebp_noBase64\n              }\n            }\n          }\n          products {\n            ...ProductCardFragment\n          }\n          instagramImages {\n            title\n            description\n            fixed(width: 270, height: 270, quality: 90) {\n              ...GatsbyContentfulFixed_withWebp_noBase64\n            }\n          }\n          press {\n            author\n            icon\n            link\n          }\n        }\n      }\n    }\n    allContentfulProductCategory(filter: { node_locale: { eq: $locale } }) {\n      nodes {\n        contentful_id\n        categoryName\n        shortName\n        id\n        products {\n          id\n          name {\n            name\n          }\n          slug\n          summary\n          sku\n          stockStatus\n        }\n      }\n    }\n    allProductReview {\n      nodes {\n        id\n        product_id\n        score\n        votes_up\n        votes_down\n        content\n        title\n        sentiment\n        created_at\n        verified_buyer\n        sticker\n        age_range\n        subscription_age\n        would_recommend\n        comment {\n          id\n          content\n          created_at\n        }\n        user {\n          user_id\n          display_name\n          social_image\n        }\n      }\n    }\n    heroImageDesktop: contentfulAsset(\n      node_locale: { eq: $locale }\n      contentful_id: { eq: \"5q4KEScoheALXp9aG1hu1i\" }\n    ) {\n      description\n      id\n      fluid(maxWidth: 1920, quality: 90) {\n        ...GatsbyContentfulFluid_withWebp_noBase64\n      }\n    }\n    heroImageMobile: contentfulAsset(\n      node_locale: { eq: $locale }\n      contentful_id: { eq: \"2O0LcQDCSvRkyDmf4jTJuy\" }\n    ) {\n      description\n      id\n      fluid(maxWidth: 912, quality: 90) {\n        ...GatsbyContentfulFluid_withWebp_noBase64\n      }\n    }\n    heroImageDesktop: contentfulAsset(\n      node_locale: { eq: $locale }\n      contentful_id: { eq: \"5q4KEScoheALXp9aG1hu1i\" }\n    ) {\n      description\n      id\n      fluid(maxWidth: 1920, quality: 90) {\n        ...GatsbyContentfulFluid_withWebp_noBase64\n      }\n    }\n    heroImageMobile: contentfulAsset(\n      node_locale: { eq: $locale }\n      contentful_id: { eq: \"2O0LcQDCSvRkyDmf4jTJuy\" }\n    ) {\n      description\n      id\n      fluid(maxWidth: 912, quality: 90) {\n        ...GatsbyContentfulFluid_withWebp_noBase64\n      }\n    }\n  }\n`;\n","/*! npm.im/object-fit-images 3.2.4 */\n'use strict';\n\nvar OFI = 'bfred-it:object-fit-images';\nvar propRegex = /(object-fit|object-position)\\s*:\\s*([-.\\w\\s%]+)/g;\nvar testImg = typeof Image === 'undefined' ? {\n  style: {\n    'object-position': 1\n  }\n} : new Image();\nvar supportsObjectFit = ('object-fit' in testImg.style);\nvar supportsObjectPosition = ('object-position' in testImg.style);\nvar supportsOFI = ('background-size' in testImg.style);\nvar supportsCurrentSrc = typeof testImg.currentSrc === 'string';\nvar nativeGetAttribute = testImg.getAttribute;\nvar nativeSetAttribute = testImg.setAttribute;\nvar autoModeEnabled = false;\n\nfunction createPlaceholder(w, h) {\n  return \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='\" + w + \"' height='\" + h + \"'%3E%3C/svg%3E\";\n}\n\nfunction polyfillCurrentSrc(el) {\n  if (el.srcset && !supportsCurrentSrc && window.picturefill) {\n    var pf = window.picturefill._; // parse srcset with picturefill where currentSrc isn't available\n\n    if (!el[pf.ns] || !el[pf.ns].evaled) {\n      // force synchronous srcset parsing\n      pf.fillImg(el, {\n        reselect: true\n      });\n    }\n\n    if (!el[pf.ns].curSrc) {\n      // force picturefill to parse srcset\n      el[pf.ns].supported = false;\n      pf.fillImg(el, {\n        reselect: true\n      });\n    } // retrieve parsed currentSrc, if any\n\n\n    el.currentSrc = el[pf.ns].curSrc || el.src;\n  }\n}\n\nfunction getStyle(el) {\n  var style = getComputedStyle(el).fontFamily;\n  var parsed;\n  var props = {};\n\n  while ((parsed = propRegex.exec(style)) !== null) {\n    props[parsed[1]] = parsed[2];\n  }\n\n  return props;\n}\n\nfunction setPlaceholder(img, width, height) {\n  // Default: fill width, no height\n  var placeholder = createPlaceholder(width || 1, height || 0); // Only set placeholder if it's different\n\n  if (nativeGetAttribute.call(img, 'src') !== placeholder) {\n    nativeSetAttribute.call(img, 'src', placeholder);\n  }\n}\n\nfunction onImageReady(img, callback) {\n  // naturalWidth is only available when the image headers are loaded,\n  // this loop will poll it every 100ms.\n  if (img.naturalWidth) {\n    callback(img);\n  } else {\n    setTimeout(onImageReady, 100, img, callback);\n  }\n}\n\nfunction fixOne(el) {\n  var style = getStyle(el);\n  var ofi = el[OFI];\n  style['object-fit'] = style['object-fit'] || 'fill'; // default value\n  // Avoid running where unnecessary, unless OFI had already done its deed\n\n  if (!ofi.img) {\n    // fill is the default behavior so no action is necessary\n    if (style['object-fit'] === 'fill') {\n      return;\n    } // Where object-fit is supported and object-position isn't (Safari < 10)\n\n\n    if (!ofi.skipTest && // unless user wants to apply regardless of browser support\n    supportsObjectFit && // if browser already supports object-fit\n    !style['object-position'] // unless object-position is used\n    ) {\n        return;\n      }\n  } // keep a clone in memory while resetting the original to a blank\n\n\n  if (!ofi.img) {\n    ofi.img = new Image(el.width, el.height);\n    ofi.img.srcset = nativeGetAttribute.call(el, \"data-ofi-srcset\") || el.srcset;\n    ofi.img.src = nativeGetAttribute.call(el, \"data-ofi-src\") || el.src; // preserve for any future cloneNode calls\n    // https://github.com/bfred-it/object-fit-images/issues/53\n\n    nativeSetAttribute.call(el, \"data-ofi-src\", el.src);\n\n    if (el.srcset) {\n      nativeSetAttribute.call(el, \"data-ofi-srcset\", el.srcset);\n    }\n\n    setPlaceholder(el, el.naturalWidth || el.width, el.naturalHeight || el.height); // remove srcset because it overrides src\n\n    if (el.srcset) {\n      el.srcset = '';\n    }\n\n    try {\n      keepSrcUsable(el);\n    } catch (err) {\n      if (window.console) {\n        console.warn('https://bit.ly/ofi-old-browser');\n      }\n    }\n  }\n\n  polyfillCurrentSrc(ofi.img);\n  el.style.backgroundImage = \"url(\\\"\" + (ofi.img.currentSrc || ofi.img.src).replace(/\"/g, '\\\\\"') + \"\\\")\";\n  el.style.backgroundPosition = style['object-position'] || 'center';\n  el.style.backgroundRepeat = 'no-repeat';\n  el.style.backgroundOrigin = 'content-box';\n\n  if (/scale-down/.test(style['object-fit'])) {\n    onImageReady(ofi.img, function () {\n      if (ofi.img.naturalWidth > el.width || ofi.img.naturalHeight > el.height) {\n        el.style.backgroundSize = 'contain';\n      } else {\n        el.style.backgroundSize = 'auto';\n      }\n    });\n  } else {\n    el.style.backgroundSize = style['object-fit'].replace('none', 'auto').replace('fill', '100% 100%');\n  }\n\n  onImageReady(ofi.img, function (img) {\n    setPlaceholder(el, img.naturalWidth, img.naturalHeight);\n  });\n}\n\nfunction keepSrcUsable(el) {\n  var descriptors = {\n    get: function get(prop) {\n      return el[OFI].img[prop ? prop : 'src'];\n    },\n    set: function set(value, prop) {\n      el[OFI].img[prop ? prop : 'src'] = value;\n      nativeSetAttribute.call(el, \"data-ofi-\" + prop, value); // preserve for any future cloneNode\n\n      fixOne(el);\n      return value;\n    }\n  };\n  Object.defineProperty(el, 'src', descriptors);\n  Object.defineProperty(el, 'currentSrc', {\n    get: function get() {\n      return descriptors.get('currentSrc');\n    }\n  });\n  Object.defineProperty(el, 'srcset', {\n    get: function get() {\n      return descriptors.get('srcset');\n    },\n    set: function set(ss) {\n      return descriptors.set(ss, 'srcset');\n    }\n  });\n}\n\nfunction hijackAttributes() {\n  function getOfiImageMaybe(el, name) {\n    return el[OFI] && el[OFI].img && (name === 'src' || name === 'srcset') ? el[OFI].img : el;\n  }\n\n  if (!supportsObjectPosition) {\n    HTMLImageElement.prototype.getAttribute = function (name) {\n      return nativeGetAttribute.call(getOfiImageMaybe(this, name), name);\n    };\n\n    HTMLImageElement.prototype.setAttribute = function (name, value) {\n      return nativeSetAttribute.call(getOfiImageMaybe(this, name), name, String(value));\n    };\n  }\n}\n\nfunction fix(imgs, opts) {\n  var startAutoMode = !autoModeEnabled && !imgs;\n  opts = opts || {};\n  imgs = imgs || 'img';\n\n  if (supportsObjectPosition && !opts.skipTest || !supportsOFI) {\n    return false;\n  } // use imgs as a selector or just select all images\n\n\n  if (imgs === 'img') {\n    imgs = document.getElementsByTagName('img');\n  } else if (typeof imgs === 'string') {\n    imgs = document.querySelectorAll(imgs);\n  } else if (!('length' in imgs)) {\n    imgs = [imgs];\n  } // apply fix to all\n\n\n  for (var i = 0; i < imgs.length; i++) {\n    imgs[i][OFI] = imgs[i][OFI] || {\n      skipTest: opts.skipTest\n    };\n    fixOne(imgs[i]);\n  }\n\n  if (startAutoMode) {\n    document.body.addEventListener('load', function (e) {\n      if (e.target.tagName === 'IMG') {\n        fix(e.target, {\n          skipTest: opts.skipTest\n        });\n      }\n    }, true);\n    autoModeEnabled = true;\n    imgs = 'img'; // reset to a generic selector for watchMQ\n  } // if requested, watch media queries for object-fit change\n\n\n  if (opts.watchMQ) {\n    window.addEventListener('resize', fix.bind(null, imgs, {\n      skipTest: opts.skipTest\n    }));\n  }\n}\n\nfix.supportsObjectFit = supportsObjectFit;\nfix.supportsObjectPosition = supportsObjectPosition;\nhijackAttributes();\nmodule.exports = fix;","export function orderArray(array, order, property) {\n  // Make a copy to ensure we're not modifying the original data.\n  array = [...array];\n\n  return array.sort((a, b) => {\n    const aIndex = order.indexOf(a[property]);\n    const bIndex = order.indexOf(b[property]);\n\n    if (aIndex < 0 && bIndex < 0) return 0;\n    if (aIndex < 0) return 1;\n    if (bIndex < 0) return -1;\n\n    return aIndex - bIndex;\n  });\n}\n","import React, { Component } from \"react\";\n\nimport GeneralTags from \"./GeneralTags\";\n\nclass PageSEO extends Component {\n  render() {\n    const { pagePath, title, description, image } = this.props;\n\n    return (\n      <div>\n        <GeneralTags\n          pagePath={pagePath}\n          title={title}\n          description={description}\n          image={image}\n        />\n      </div>\n    );\n  }\n}\n\nexport default PageSEO;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { responsive } from \"../utils/style\";\nimport Img from \"gatsby-image\";\n\nconst InstagramImageLink = styled.a`\n  width: calc(50vw - 30px) !important;\n  height: calc(50vw - 30px) !important;\n  margin-bottom: 20px;\n  ${responsive.sm`\n    width: calc(25% - 20px ) !important;\n    height: calc(25% - 20px )!important;\n    margin-bottom: 0;\n  `}\n`;\n\nconst ImageWrapper = styled.div`\n  width: 100%;\n  height: 100%;\n  position: relative;\n\n  .instagram-image {\n    width: 100% !important;\n    height: 100% !important;\n\n    ${responsive.sm`\n      width: 160px !important;\n      height: 160px !important;\n    `}\n\n    ${responsive.md`\n      width: 213px !important;\n      height: 213px !important;\n    `}\n\n    ${responsive.lg`\n      width: 270px !important;\n      height: 270px !important;\n    `}\n  }\n`;\n\nexport default class InstagramImage extends React.Component {\n  constructor(props) {\n    super(props);\n  }\n\n  render() {\n    let { image } = this.props;\n\n    return (\n      <InstagramImageLink\n        className=\"intagramImage\"\n        href=\"https://www.instagram.com/ritual/\"\n        target=\"_self\"\n        aria-label=\"Ritual Instagram\"\n        rel=\"noopener noreferrer\"\n      >\n        <ImageWrapper>\n          <Img\n            className=\"instagram-image\"\n            fixed={image.fixed}\n            loading=\"eager\"\n            alt={image.description}\n            style={{\n              userSelect: \"none\",\n              userDrag: \"none\",\n              pointerEvents: \"none\",\n              touchCallout: \"none\",\n            }}\n          />\n        </ImageWrapper>\n      </InstagramImageLink>\n    );\n  }\n}\n","import React from \"react\";\nimport InstagramSimpleImage from \"./InstagramSimpleImage\";\nimport Container from \"./Container\";\nimport Text from \"./Text\";\nimport { Color, rem, media, Font, responsive } from \"../utils/style\";\nimport styled from \"styled-components\";\n\nconst OuterWrapper = styled.section`\n  position: relative;\n  overflow: hidden;\n  padding: ${props => (props.noTopMargin ? \"0 0 80px\" : \"80px 0\")};\n  background-color: ${props =>\n    props.backgroundColor\n      ? props.backgroundColor\n      : \"rgba(242, 241, 245, 0.56)\"};\n\n  ${responsive.md`\n    padding: 120px 0;\n  `}\n`;\n\nconst StyledContainer = styled(Container)`\n  overflow: visible !important;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  padding: 0 !important;\n  margin: 0 !important;\n`;\n\nconst CommunityArea = styled.div`\n  position: relative;\n  z-index: 100;\n`;\n\nconst Anchor = styled.a`\n  display: block;\n  width: 100%;\n  margin: 0 auto;\n  padding: 0 20px;\n`;\n\nconst FeedTitle = styled.h2`\n  ${Font.circular}\n  color: ${Color.ritualBlue};\n  text-align: center !important;\n  margin-bottom: 24px;\n  font-size: ${rem(24)};\n  font-weight: 500;\n  letter-spacing: -1.4px;\n  ${responsive.sm`\n    font-size: ${rem(30)};\n  `}\n  ${responsive.md`\n    font-size: ${rem(48)};\n  `}\n  ${responsive.lg`\n  font-size: ${rem(40)};\n`}\n`;\n\nconst FeedSubtitle = styled.div`\n  ${Font.dutch}\n  color: ${Color.ritualBlue};\n  margin-bottom: 56px;\n  font-size: ${rem(18)};\n  text-align: center;\n  ${media.tablet`\n    font-size: ${rem(16)};\n    letter-spacing: -0.4px;\n    line-height: ${rem(26)};\n    margin-bottom: 40px;\n  `}\n\n  u {\n    position: relative;\n    text-decoration: none;\n\n    &::after {\n      content: '';\n      position: absolute;\n      height: 1px;\n      width: 100%;\n      left: 0;\n      bottom: -3px;\n      background: ${Color.ritualBlue};\n    }\n  }\n`;\n\nconst SimpleImageContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  margin-left: 5px;\n  margin-right: 5px;\n  ${responsive.sm`\n    margin-left: -15px;\n    margin-right: -15px;\n  `}\n`;\n\nexport default class InstagramShowcase extends React.Component {\n  constructor(props) {\n    super(props);\n  }\n\n  render() {\n    const { children, images, noTopMargin, backgroundColor } = this.props;\n\n    return (\n      <OuterWrapper backgroundColor={backgroundColor} noTopMargin={noTopMargin}>\n        <StyledContainer>{children}</StyledContainer>\n        <Container>\n          <CommunityArea className=\"row\">\n            <div className=\"col-12\">\n              <Anchor\n                href=\"https://www.instagram.com/ritual\"\n                hrefLang=\"x-default\"\n                rel=\"noopener noreferrer\"\n                target=\"_blank\"\n              >\n                <FeedTitle>\n                  <Text\n                    id=\"instagram.feed-title\"\n                    defaultMessage=\"Make Your Self\"\n                  />\n                </FeedTitle>\n                <FeedSubtitle>\n                  <Text\n                    id=\"instagram.feed-subtitle\"\n                    defaultMessage=\"Commit to yourself every single day with {link}\"\n                    values={{ link: <u>@Ritual</u> }}\n                  />\n                </FeedSubtitle>\n              </Anchor>\n              <SimpleImageContainer>\n                {images.map((image, index) => {\n                  return <InstagramSimpleImage key={index} image={image} />;\n                })}\n              </SimpleImageContainer>\n            </div>\n          </CommunityArea>\n        </Container>\n      </OuterWrapper>\n    );\n  }\n}\n","import React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { graphql, StaticQuery } from \"gatsby\";\n\n// Services\nimport intl from \"../../services/intl\";\n\n// Utils\nimport { Font, Color, media, rem, responsive } from \"../../utils/style\";\nimport metrics from \"../../utils/metrics\";\nimport { getDiscountData } from \"../../utils/bundle\";\nimport { orderArray } from \"../../utils/order\";\n\n// Components\nimport Container from \"../Container\";\nimport Img from \"gatsby-image\";\nimport Ribbon from \"../global/Ribbon\";\nimport ScrollableOverflow from \"../ScrollableOverflow\";\nimport MagicLink from \"../MagicLink\";\n\nconst Wrapper = styled.section``;\n\nconst CategoryCardsContainer = styled(Container)`\n  padding: 0 20px;\n\n  display: flex;\n  flex-direction: row;\n  flex-wrap: ${p => (p.scrollable ? \"nowrap\" : \"wrap\")};\n\n  ${responsive.sm`\n    padding: 0px;\n  `}\n`;\n\nconst Slide = styled(MagicLink)`\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n  width: calc(100vw * (84/320));\n  margin-right: calc(100vw * (8/320));\n  background-color: rgba(242, 241, 245, 0.56);\n\n  :last-of-type {\n    margin-right: 0;\n  }\n\n  p {\n    ${Font.circular};\n    color: ${Color.ritualBlue};\n    font-size: ${rem(14)};\n    line-height: ${rem(20)};\n    font-weight: 300;\n    letter-spacing: 0px;\n    text-align: center;\n    margin: 0;\n    padding: 6px 0;\n  }\n\n  ${responsive.sm`\n    width: 160px;\n    margin-right: 20px;\n\n    p:before {\n      content: \"Shop \";\n    }\n\n    img {\n      transition: transform 0.2s ease-in !important;\n    }\n\n    &:hover {\n      img {\n        transform: scale(1.1);\n      }\n    }\n  `}\n\n  ${responsive.md`\n    width: 214px;\n    margin-right: 26px;\n\n    p {\n      font-size: ${rem(18)};\n      line-height: ${rem(24)};\n      padding: 12px 0;\n    }\n  `}\n\n  ${responsive.lg`\n    width: 270px;\n    margin-right: 30px;\n  `}\n`;\n\nconst GridSlide = styled(Slide)`\n  ${media.mobile`\n    width: calc(50% - 7px);\n    margin-right: 14px;\n    margin-bottom: 16px;\n\n    &:nth-of-type(2n) {\n      margin-right: 0;\n    }\n\n    &:nth-last-of-type(2):nth-of-type(odd),\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n  `}\n`;\n\nconst ImageContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  img {\n    background-color: ${Color.ritualYellow};\n    height: 52px;\n  }\n\n  span {\n    position: absolute;\n    bottom: 4px;\n    left: 4px;\n  }\n\n\n  ${responsive.sm`\n    height: 82px;\n\n    span {\n      bottom: 8px;\n      left: 8px;\n    }\n  `}\n\n  ${responsive.md`\n    height: 110px;\n\n    span {\n      bottom: 12px;\n      left: 12px;\n    }\n  `}\n\n  ${responsive.lg`\n    height: 140px;\n  `}\n`;\n\nconst RibbonStyle = css`\n  height: 20px;\n  padding: 0px 8px;\n  font-size: ${rem(8)};\n  line-height: ${rem(16)};\n  letter-spacing: 0.53px;\n\n  &::before,\n  &::after {\n    border-width: 10px 4px;\n  }\n\n  ${responsive.md`\n    height: 30px;\n    padding: 0 14px;\n    font-size: ${rem(10)};\n    letter-spacing: 0.67px;\n\n    &::before,\n    &::after {\n      border-width: 15px 8px;\n    }\n  `}\n`;\n\nconst OrderedCardShortNames = [\n  \"44TmdusDzEH95uGu0URjIr\", // Women\n  \"71526baqpQqVsScHBZpIEl\", // Men\n  \"16dqMm2vfVsgy539guPkkE\", // Kids & Teens\n];\n\nexport class ProductCategoryCards extends React.Component {\n  constructor(props) {\n    super(props);\n\n    const categories = intl.cf(props.data.allContentfulProductCategory.nodes);\n    this.orderedCategoryNodes = this._getOrderedCategories(categories);\n  }\n\n  handleClick(name) {\n    metrics.track(\"CTA Clicked\", {\n      title: name,\n      location: \"Product Category Card\",\n      nonInteraction: false,\n    });\n  }\n\n  _getOrderedCategories(allCategoryNodes) {\n    return orderArray(allCategoryNodes, OrderedCardShortNames, \"contentful_id\");\n  }\n\n  renderSlides(slides, scrollable) {\n    const SlideComponent = scrollable ? Slide : GridSlide;\n\n    return (\n      <>\n        {slides.map((slide, i) => {\n          return (\n            <SlideComponent\n              to={slide.url}\n              onClick={this.handleClick.bind(this, slide.title)}\n              key={i}\n            >\n              <ImageContainer>\n                <Img\n                  fluid={slide.img.fluid}\n                  loading=\"eager\"\n                  backgroundColor={Color.ritualYellow}\n                  alt={slide.altText}\n                  style={{\n                    userSelect: \"none\",\n                    userDrag: \"none\",\n                    pointerEvents: \"none\",\n                    touchCallout: \"none\",\n                  }}\n                  imgStyle={{\n                    objectPosition: \"top center\",\n                  }}\n                />\n                {slide.flag && (\n                  <Ribbon contentStyle={RibbonStyle} white={true}>\n                    {slide.flag}\n                  </Ribbon>\n                )}\n              </ImageContainer>\n              <p>{slide.title}</p>\n            </SlideComponent>\n          );\n        })}\n      </>\n    );\n  }\n\n  render() {\n    const { data, className, scrollable = false } = this.props;\n\n    const bundleImage = intl.cf(data.bundleImages.nodes, true);\n    const discountData = getDiscountData();\n\n    const slides = this.orderedCategoryNodes.map(node => {\n      const flag = node.shortName === \"Kids\" ? \"New\" : \"\";\n      return {\n        title: node.shortName,\n        url: `/${node.shopLandingReference.slug}`,\n        altText: `Shop ${node.shortName}`,\n        img: node.cardImage,\n        flag,\n      };\n    });\n\n    slides.push({\n      title: intl.t(\"product.category-cards.slide-bundles\", \"Bundles\"),\n      url: \"/shop-bundles\",\n      altText: \"Shop Bundles\",\n      img: bundleImage,\n      flag: discountData.titleCopy,\n    });\n\n    return (\n      <Wrapper className={className}>\n        <CategoryCardsContainer scrollable={scrollable}>\n          {scrollable && (\n            <ScrollableOverflow bleedLeft={true} bleedRight={true}>\n              {this.renderSlides(slides, scrollable)}\n            </ScrollableOverflow>\n          )}\n          {!scrollable && <>{this.renderSlides(slides, scrollable)}</>}\n        </CategoryCardsContainer>\n      </Wrapper>\n    );\n  }\n}\n\nexport const ProductCategoryCardsQuery = props => (\n  <StaticQuery\n    query={componentQuery}\n    render={data => <ProductCategoryCards {...props} data={data} />}\n  />\n);\n\nexport default ProductCategoryCardsQuery;\n\nconst componentQuery = graphql`\n  query ProductCategoryCardsQuery {\n    bundleImages: allContentfulAsset(\n      filter: { contentful_id: { eq: \"2RQ7pdzdW9JmLk0z0shhzM\" } }\n    ) {\n      nodes {\n        node_locale\n        title\n        description\n        fluid(maxWidth: 580, quality: 90) {\n          ...GatsbyContentfulFluid_withWebp_noBase64\n        }\n      }\n    }\n    allContentfulProductCategory {\n      nodes {\n        node_locale\n        shortName\n        contentful_id\n        cardImage {\n          title\n          description\n          fluid(maxWidth: 580, quality: 90) {\n            ...GatsbyContentfulFluid_withWebp_noBase64\n          }\n        }\n        backgroundColor\n        shopLandingReference {\n          slug\n          header {\n            childMarkdownRemark {\n              rawMarkdownBody\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n","\"use strict\";\n\nvar _interopRequireWildcard3 = require(\"@babel/runtime/helpers/interopRequireWildcard\");\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));\n\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutPropertiesLoose\"));\n\nvar _interopRequireWildcard2 = _interopRequireDefault(require(\"@babel/runtime/helpers/interopRequireWildcard\"));\n\nvar _inheritsLoose2 = _interopRequireDefault(require(\"@babel/runtime/helpers/inheritsLoose\"));\n\nvar _react = _interopRequireWildcard3(require(\"react\"));\n\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\n\nvar _index = _interopRequireDefault(require(\"../index\"));\n\nvar ImageWithIEPolyfill = /*#__PURE__*/function (_Component) {\n  (0, _inheritsLoose2.default)(ImageWithIEPolyfill, _Component);\n\n  function ImageWithIEPolyfill() {\n    var _this;\n\n    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n      args[_key] = arguments[_key];\n    }\n\n    _this = _Component.call.apply(_Component, [this].concat(args)) || this;\n    _this.imageRef = _this.props.innerRef || /*#__PURE__*/(0, _react.createRef)();\n    _this.placeholderRef = /*#__PURE__*/(0, _react.createRef)();\n    return _this;\n  }\n\n  var _proto = ImageWithIEPolyfill.prototype;\n\n  // Load object-fit/position polyfill if required (e.g. in IE)\n  _proto.componentDidMount = function componentDidMount() {\n    var _this2 = this;\n\n    var testImg = document.createElement(\"img\");\n\n    if (typeof testImg.style.objectFit === \"undefined\" || typeof testImg.style.objectPosition === \"undefined\") {\n      Promise.resolve().then(function () {\n        return (0, _interopRequireWildcard2.default)(require(\"object-fit-images\"));\n      }).then(function (_ref) {\n        var ObjectFitImages = _ref.default;\n        ObjectFitImages(_this2.imageRef.current.imageRef.current);\n        ObjectFitImages(_this2.placeholderRef.current);\n      });\n    }\n  };\n\n  _proto.render = function render() {\n    var _this$props = this.props,\n        objectFit = _this$props.objectFit,\n        objectPosition = _this$props.objectPosition,\n        props = (0, _objectWithoutPropertiesLoose2.default)(_this$props, [\"objectFit\", \"objectPosition\"]);\n    var polyfillStyle = {\n      objectFit: objectFit,\n      objectPosition: objectPosition,\n      fontFamily: \"\\\"object-fit: \" + objectFit + \"; object-position: \" + objectPosition + \"\\\"\"\n    };\n    return /*#__PURE__*/_react.default.createElement(_index.default, (0, _extends2.default)({\n      ref: this.imageRef,\n      placeholderRef: this.placeholderRef\n    }, props, {\n      imgStyle: (0, _extends2.default)({}, props.imgStyle, polyfillStyle),\n      placeholderStyle: (0, _extends2.default)({}, props.placeholderStyle, polyfillStyle)\n    }));\n  };\n\n  return ImageWithIEPolyfill;\n}(_react.Component); // If you modify these propTypes, please don't forget to update following files as well:\n// https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/withIEPolyfill/index.d.ts\n// https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/README.md#gatsby-image-props\n// https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/gatsby-image.md#gatsby-image-props\n\n\nImageWithIEPolyfill.propTypes = {\n  objectFit: _propTypes.default.string,\n  objectPosition: _propTypes.default.string\n};\nImageWithIEPolyfill.defaultProps = {\n  objectFit: \"cover\",\n  objectPosition: \"50% 50%\"\n};\n\nvar _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {\n  return /*#__PURE__*/_react.default.createElement(ImageWithIEPolyfill, (0, _extends2.default)({}, props, {\n    innerRef: ref\n  }));\n});\n\nexports.default = _default;","import React from \"react\";\nimport styled from \"styled-components\";\n\n// Utils\nimport { responsive, media } from \"../utils/style\";\n\n// Components\nimport Img from \"gatsby-image/withIEPolyfill\";\n\n// Styled Elements\nconst Wrapper = styled.div`\n  background-color: ${p => p.backgroundColor};\n  position: relative;\n  overflow: hidden;\n  margin: 0 auto;\n  margin-top: 52px;\n\n  ${responsive.md`\n    margin-top: 64px;\n  `};\n\n  width: calc(100vw - 16px);\n  height: calc(100vw - 16px);\n\n  &.short {\n    height: calc((100vw - 16px) * 0.72368421052);\n  }\n\n  &.height-fit {\n    height: fit-content;\n  }\n\n  &.full-width-mobile {\n    ${media.mobile`\n      width: 100%;\n    `}\n  }\n\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ${responsive.sm`\n    width: calc(100vw - 48px);\n    height: calc((100vw - 48px) * 0.52778);\n    padding-left: 0px;\n    padding-right: 0px;\n\n    &.short {\n      height: calc((100vw - 48px) * 0.52778);\n    }\n\n    &.height-fit {\n      height: fit-contet;\n    }\n\n  `}\n\n  ${responsive.md`\n    height: calc((100vw - 48px) * 0.3883196721);\n\n    &.short {\n      height: calc((100vw - 48px) * 0.3883196721);\n    }\n\n    &.height-fit {\n      height: fit-content;\n    }\n\n  `}\n\n  ${responsive.lg`\n    width: calc(100vw - 80px);\n    height: calc((100vw - 80px) * 0.3888024883);\n    max-width: 1920px;\n    max-height: calc(1920px * 0.3888024883);\n\n    &.short {\n      height: calc((100vw - 80px) * 0.3888024883);\n    }\n\n    &.height-fit {\n      height: fit-content;\n      max-height: fit-content;\n    }\n\n  `}\n\n  > .container {\n    height: 100%;\n\n    > .row {\n      height: 100%;\n\n      > .col-12 {\n        height: 100%;\n      }\n    }\n  }\n`;\n\nconst Column = styled.div`\n  position: relative;\n`;\n\nconst ContentArea = styled.div`\n  z-index: 1;\n  position: relative;\n  height: 100%;\n  width: 100%;\n`;\n\nexport default class PageHero extends React.Component {\n  render() {\n    const {\n      id = \"page-hero\",\n      backgroundColor = \"#ffd600\",\n      children,\n      className,\n      columnStyling = \"col-12\",\n      imageMobile,\n      imageDesktop,\n      imageObjectPosition = \"50% 50%\",\n    } = this.props;\n\n    const defaultStyle = {\n      position: \"absolute\",\n      left: 0,\n      top: 0,\n      width: \"100%\",\n      height: \"100%\",\n      zIndex: \"0\",\n      userSelect: \"none\",\n      userDrag: \"none\",\n      pointerEvents: \"none\",\n      touchCallout: \"none\",\n    };\n\n    return (\n      <Wrapper id={id} className={className} backgroundColor={backgroundColor}>\n        <div className=\"container\">\n          <div className=\"row\">\n            <Column className={columnStyling}>\n              <ContentArea id={`${id}_content`}>{children}</ContentArea>\n            </Column>\n          </div>\n        </div>\n        <div>\n          {imageMobile && (\n            <Img\n              id={`${id}_mobile-image`}\n              className=\"d-sm-none\"\n              fluid={imageMobile.fluid}\n              loading=\"eager\"\n              alt={imageMobile.description}\n              style={defaultStyle}\n              objectFit=\"cover\"\n              objectPosition={imageObjectPosition}\n            />\n          )}\n          {imageDesktop && (\n            <Img\n              id={`${id}_desktop-image`}\n              className=\"d-none d-sm-block\"\n              fluid={imageDesktop.fluid}\n              loading=\"eager\"\n              alt={imageDesktop.description}\n              style={defaultStyle}\n            />\n          )}\n        </div>\n      </Wrapper>\n    );\n  }\n}\n"],"sourceRoot":""}