{"version":3,"sources":["webpack:///./src/components/Swipeable.js","webpack:///./src/components/product/ValueProps.js","webpack:///./node_modules/react-intersection-observer/react-intersection-observer.m.js","webpack:///./src/components/testimonials/TestimonialsCarouselVideos.js","webpack:///./src/components/testimonials/TestimonialsCarousel.js","webpack:///./src/components/testimonials/Testimonials.js","webpack:///./src/components/MagicVideo.js"],"names":["Swipeable","children","props","handlers","useSwipeable","Wrapper","styled","Container","attrs","id","p","margin20","css","media","mobile","StyledRow","Row","Column","div","removePadding","PropsArea","ValueProp","index","tablet","Icon","responsive","sm","md","ValuePropLabel","span","Font","circular","Color","ritualBlue","rem","ValueProps","renderValueProp","valueProp","icon","i","cleanedIconName","replace","IconElement","Icons","capitalize","ClinicalIcons","key","render","this","valueProps","icons","location","className","map","React","Component","_extends","Object","assign","target","arguments","length","source","prototype","hasOwnProperty","call","apply","ObserverMap","Map","RootIds","rootId","optionsToId","options","keys","filter","Boolean","sort","root","has","set","toString","get","observe","element","callback","_createObserver","instance","elements","observer","IntersectionObserver","entries","forEach","entry","_elements$get","inView","isIntersecting","thresholds","some","threshold","intersectionRatio","trackVisibility","isVisible","createObserver","callbacks","push","splice","indexOf","unobserve","size","disconnect","isPlainChildren","_React$Component","subClass","superClass","InView","_this","node","_unobserveCb","handleNode","triggerOnce","skip","setState","initialInView","undefined","observeNode","handleChange","onChange","state","create","constructor","__proto__","_proto","componentDidUpdate","prevProps","rootMargin","delay","componentWillUnmount","_this$props","_this$state","ref","_this$props2","as","tag","excluded","sourceKeys","_objectWithoutPropertiesLoose","displayName","defaultProps","fadeIn","keyframes","VideoOverlay","VideoContainer","notDesktop","VideoWrapper","zindex","Video","MagicVideo","nextSlide","previousSlide","VideoAbout","TRANSITION_DURATION","Name","Title","dutch","Controls","CloseButton","button","ControlButton","TestimonialsCarouselVideos","slides","activeSlideIndex","handleGoToNextSlide","handleGoToPreviousSlide","setShowVideos","videoOverlayRef","useRef","offsets","_","newOffsets","pointer","Math","abs","generateTransformOffsets","useEffect","logCarouselPosition","message","metrics","track","action","position","subject","name","nonInteraction","lockScroll","current","onSwipedRight","onSwipedLeft","onClick","Close","slide","activeSlide","transform","styles","opacity","CarouselVideo","shortname","ArrowRoundedLeft","ArrowRoundedRight","videoRef","image","title","includes","logVideoEvent","event","playback_time","currentTime","video_duration","duration","setTimeout","play","pause","videoContent","autoPlay","controls","crossorigin","preload","poster","file","url","onPlay","onPause","onEnded","document","fullScreenElement","webkitFullscreenElement","mozFullScreenElement","exitFullscreen","mozCancelFullScreen","webkitExitFullscreen","videoStyle","sources","captions","style","transition","CarouselContainer","Spacer","TextContainer","moveDown","moveUp","moveDownMobile","moveUpMobile","AnimateOnChange","direction","PullQuote","lg","MobileControlsButton","PlayButton","PlayButtonIcon","width","height","viewBox","fill","xmlns","fillRule","clipRule","d","Slides","Slide","Image","TestimonialsCarousel","useState","setSlide","controlsAreLocked","setLockControls","showVideos","_temp","_ref","_React$useState","setRef","result","useInView","numberOfSlideSections","Array","numberOfSlides","handleLockingControls","handleKeyDown","window","addEventListener","removeEventListener","dangerouslySetInnerHTML","__html","pullquote","offset","activeSlideOffset","visibleSlide","offsetIndexes","handleSlideClick","isForwards","zIndex","visibility","getSlideStylesBasedOnOrdering","fixed","verticalImage","alt","left","top","userSelect","userDrag","pointerEvents","touchCallout","aria-label","TestimonialsWrapper","section","paddingBottom","TestimonialsContainer","TestimonialsColumn","Headline","h2","Subhead","TestimonialsComponent","data","testimonials","contentfulHomePage","Text","defaultMessage","TestimonialsComponentQuery","query","MagicVideoWrapper","langLabel","en","videoElement","createRef","locale","componentDidMount","navigator","language","loop","onSeeking","onSeeked","videoElementStyle","console","warn","videoProps","crossOrigin","src","type","contentType","caption","description","kind","srcLang","label","default"],"mappings":"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","file":"bc1b873232b3fe4ed8704299139af7ad5f18cfc7-2b2af9d63f78779a0c1f.js","sourcesContent":["import React from \"react\";\nimport { useSwipeable } from \"react-swipeable\";\n\nconst Swipeable = ({ children, ...props }) => {\n  const handlers = useSwipeable(props);\n  return <div {...handlers}>{children}</div>;\n};\n\nexport default Swipeable;\n","import React from \"react\";\nimport { Icons, ClinicalIcons } from \"../../utils/svg\";\nimport {\n  Font,\n  Color,\n  rem,\n  media,\n  capitalize,\n  responsive,\n} from \"../../utils/style\";\nimport styled, { css } from \"styled-components\";\nimport Container from \"../Container\";\nimport Row from \"../Row\";\n\nconst Wrapper = styled(Container).attrs({\n  id: \"value-props\",\n})`\n  ${p =>\n    p.margin20 &&\n    css`\n      ${media.mobile`\n        padding: 0 20px;\n      `}\n    `}\n`;\n\nconst StyledRow = styled(Row).attrs({\n  id: \"value-props_row\",\n})`\n  position: relative;\n  z-index: 1;\n\n  ${media.mobile`\n    border: none;\n  `};\n`;\n\nconst Column = styled.div`\n  padding-top: ${p => (p.removePadding ? \"0px\" : \"40px\")};\n  padding-bottom: ${p => (p.removePadding ? \"0px\" : \"40px\")};\n  position: relative;\n\n  ${media.mobile`\n\n    &:after {\n      position: absolute;\n      content: '';\n      bottom: 0;\n      left: 20px;\n      right: 20px;\n    }\n  `};\n`;\n\nconst PropsArea = styled.div.attrs({\n  id: \"value-props_row_column_area\",\n})`\n  display: flex;\n  justify-content: space-between;\n\n  ${media.mobile`\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: center;\n  `};\n`;\n\nconst ValueProp = styled.div.attrs(p => ({\n  id: `value-props_row_column_area_prop-${p.index}`,\n}))`\n  display: flex;\n  flex-direction: column;\n  width: 134px;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ${media.tablet`\n    margin-right: 8px;\n  `};\n\n  ${media.mobile`\n    flex-direction: row;\n    width: 100%;\n    margin: 0 0 24px 0;\n\n\n    &:last-child {\n      margin: 0;\n    }\n  `};\n`;\n\nconst Icon = styled.div.attrs(p => ({\n  id: `value-props_row_column_area_prop-${p.index}_icon`,\n}))`\n  position: relative;\n  width: 32px;\n  height: 32px;\n  flex: 0 0 32px;\n  margin: 0 8px 0 0;\n\n  svg {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n\n  ${responsive.sm`\n    width: 40px;\n    height: 40px;\n    margin: 0 auto 16px;\n  `}\n\n  ${responsive.md`\n    min-height: 40px;\n  `}\n`;\n\nconst ValuePropLabel = styled.span.attrs(p => ({\n  id: `value-props_row_column_area_prop-${p.index}_label`,\n}))`\n  ${Font.circular}\n  color: ${Color.ritualBlue};\n  font-size: ${rem(16)};\n  line-height: ${rem(22)};\n  font-weight: 300;\n  text-align: center;\n  flex: 1 1 100%;\n\n  ${media.mobile`\n    text-align: left;\n    flex: 1 1 auto;\n    align-self: center;\n  `}\n`;\n\nexport default class ValueProps extends React.Component {\n  renderValueProp(valueProp, icon, i) {\n    let cleanedIconName = icon.replace(\"icon\", \"\").replace(/-/gi, \"\");\n    let IconElement =\n      Icons[capitalize(cleanedIconName)] ||\n      ClinicalIcons[capitalize(cleanedIconName)];\n    return (\n      <ValueProp index={i} key={\"value-prop\" + i}>\n        <Icon index={i}>\n          <IconElement />\n        </Icon>\n        <ValuePropLabel index={i}>{valueProp}</ValuePropLabel>\n      </ValueProp>\n    );\n  }\n\n  render() {\n    let {\n      valueProps,\n      icons,\n      location,\n      removePadding,\n      className = \"col-lg-10 offset-lg-1\",\n      margin20,\n    } = this.props;\n\n    if (typeof valueProps !== \"object\" || typeof icons !== \"object\")\n      return null;\n\n    return (\n      <Wrapper margin20={!!margin20}>\n        <StyledRow>\n          <Column className={className} removePadding={removePadding}>\n            <PropsArea>\n              {valueProps.map((valueProp, i) => {\n                return this.renderValueProp(valueProp, icons[i], i);\n              })}\n            </PropsArea>\n          </Column>\n        </StyledRow>\n      </Wrapper>\n    );\n  }\n}\n","import { createElement, Component, useRef, useState, useCallback, useEffect } from 'react';\n\nfunction _extends() {\n  _extends = Object.assign || function (target) {\n    for (var i = 1; i < arguments.length; i++) {\n      var source = arguments[i];\n\n      for (var key in source) {\n        if (Object.prototype.hasOwnProperty.call(source, key)) {\n          target[key] = source[key];\n        }\n      }\n    }\n\n    return target;\n  };\n\n  return _extends.apply(this, arguments);\n}\n\nfunction _inheritsLoose(subClass, superClass) {\n  subClass.prototype = Object.create(superClass.prototype);\n  subClass.prototype.constructor = subClass;\n  subClass.__proto__ = superClass;\n}\n\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n  if (source == null) return {};\n  var target = {};\n  var sourceKeys = Object.keys(source);\n  var key, i;\n\n  for (i = 0; i < sourceKeys.length; i++) {\n    key = sourceKeys[i];\n    if (excluded.indexOf(key) >= 0) continue;\n    target[key] = source[key];\n  }\n\n  return target;\n}\n\nvar ObserverMap = new Map();\nvar RootIds = new Map();\nvar rootId = 0;\n/**\r\n * Generate a unique ID for the root element\r\n * @param root\r\n */\n\nfunction getRootId(root) {\n  if (!root) return '0';\n  if (RootIds.has(root)) return RootIds.get(root);\n  rootId += 1;\n  RootIds.set(root, rootId.toString());\n  return RootIds.get(root);\n}\n/**\r\n * Convert the options to a string Id, based on the values.\r\n * Ensures we can reuse the same observer when observing elements with the same options.\r\n * @param options\r\n */\n\n\nfunction optionsToId(options) {\n  return Object.keys(options).filter(Boolean).sort().map(function (key) {\n    return key + \"_\" + (key === 'root' ? getRootId(options.root) : options[key]);\n  }).toString();\n}\n\nfunction createObserver(options) {\n  // Create a unique ID for this observer instance, based on the root, root margin and threshold.\n  var id = optionsToId(options);\n  var instance = ObserverMap.get(id);\n\n  if (!instance) {\n    // Create a map of elements this observer is going to observe. Each element has a list of callbacks that should be triggered, once it comes into view.\n    var elements = new Map();\n    var observer = new IntersectionObserver(function (entries) {\n      entries.forEach(function (entry) {\n        var _elements$get; // While it would be nice if you could just look at isIntersecting to determine if the component is inside the viewport, browsers can't agree on how to use it.\n        // -Firefox ignores `threshold` when considering `isIntersecting`, so it will never be false again if `threshold` is > 0\n\n\n        var inView = entry.isIntersecting && observer.thresholds.some(function (threshold) {\n          return entry.intersectionRatio >= threshold;\n        }); // @ts-ignore support IntersectionObserver v2\n\n        if (options.trackVisibility && typeof entry.isVisible === 'undefined') {\n          // The browser doesn't support Intersection Observer v2, falling back to v1 behavior.\n          // @ts-ignore\n          entry.isVisible = inView;\n        }\n\n        (_elements$get = elements.get(entry.target)) == null ? void 0 : _elements$get.forEach(function (callback) {\n          callback(inView, entry);\n        });\n      });\n    }, options);\n    instance = {\n      id: id,\n      observer: observer,\n      elements: elements\n    };\n    ObserverMap.set(id, instance);\n  }\n\n  return instance;\n}\n\nfunction observe(element, callback, options) {\n  if (options === void 0) {\n    options = {};\n  }\n\n  if (!element) return function () {}; // An observer with the same options can be reused, so lets use this fact\n\n  var _createObserver = createObserver(options),\n      id = _createObserver.id,\n      observer = _createObserver.observer,\n      elements = _createObserver.elements; // Register the callback listener for this element\n\n\n  var callbacks = elements.get(element) || [];\n\n  if (!elements.has(element)) {\n    elements.set(element, callbacks);\n  }\n\n  callbacks.push(callback);\n  observer.observe(element);\n  return function unobserve() {\n    // Remove the callback from the callback list\n    callbacks.splice(callbacks.indexOf(callback), 1);\n\n    if (callbacks.length === 0) {\n      // No more callback exists for element, so destroy it\n      elements[\"delete\"](element);\n      observer.unobserve(element);\n    }\n\n    if (elements.size === 0) {\n      // No more elements are being observer by this instance, so destroy it\n      observer.disconnect();\n      ObserverMap[\"delete\"](id);\n    }\n  };\n}\n\nfunction isPlainChildren(props) {\n  return typeof props.children !== 'function';\n}\n/**\r\n * Monitors scroll, and triggers the children function with updated props\r\n */\n\n\nvar InView = /*#__PURE__*/function (_React$Component) {\n  _inheritsLoose(InView, _React$Component);\n\n  function InView(props) {\n    var _this;\n\n    _this = _React$Component.call(this, props) || this;\n    _this.node = null;\n    _this._unobserveCb = null;\n\n    _this.handleNode = function (node) {\n      if (_this.node) {\n        // Clear the old observer, before we start observing a new element\n        _this.unobserve();\n\n        if (!node && !_this.props.triggerOnce && !_this.props.skip) {\n          // Reset the state if we get a new node, and we aren't ignoring updates\n          _this.setState({\n            inView: !!_this.props.initialInView,\n            entry: undefined\n          });\n        }\n      }\n\n      _this.node = node ? node : null;\n\n      _this.observeNode();\n    };\n\n    _this.handleChange = function (inView, entry) {\n      if (inView && _this.props.triggerOnce) {\n        // If `triggerOnce` is true, we should stop observing the element.\n        _this.unobserve();\n      }\n\n      if (!isPlainChildren(_this.props)) {\n        // Store the current State, so we can pass it to the children in the next render update\n        // There's no reason to update the state for plain children, since it's not used in the rendering.\n        _this.setState({\n          inView: inView,\n          entry: entry\n        });\n      }\n\n      if (_this.props.onChange) {\n        // If the user is actively listening for onChange, always trigger it\n        _this.props.onChange(inView, entry);\n      }\n    };\n\n    _this.state = {\n      inView: !!props.initialInView,\n      entry: undefined\n    };\n    return _this;\n  }\n\n  var _proto = InView.prototype;\n\n  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n    // If a IntersectionObserver option changed, reinit the observer\n    if (prevProps.rootMargin !== this.props.rootMargin || prevProps.root !== this.props.root || prevProps.threshold !== this.props.threshold || prevProps.skip !== this.props.skip || prevProps.trackVisibility !== this.props.trackVisibility || prevProps.delay !== this.props.delay) {\n      this.unobserve();\n      this.observeNode();\n    }\n  };\n\n  _proto.componentWillUnmount = function componentWillUnmount() {\n    this.unobserve();\n    this.node = null;\n  };\n\n  _proto.observeNode = function observeNode() {\n    if (!this.node || this.props.skip) return;\n    var _this$props = this.props,\n        threshold = _this$props.threshold,\n        root = _this$props.root,\n        rootMargin = _this$props.rootMargin,\n        trackVisibility = _this$props.trackVisibility,\n        delay = _this$props.delay;\n    this._unobserveCb = observe(this.node, this.handleChange, {\n      threshold: threshold,\n      root: root,\n      rootMargin: rootMargin,\n      // @ts-ignore\n      trackVisibility: trackVisibility,\n      // @ts-ignore\n      delay: delay\n    });\n  };\n\n  _proto.unobserve = function unobserve() {\n    if (this._unobserveCb) {\n      this._unobserveCb();\n\n      this._unobserveCb = null;\n    }\n  };\n\n  _proto.render = function render() {\n    if (!isPlainChildren(this.props)) {\n      var _this$state = this.state,\n          inView = _this$state.inView,\n          entry = _this$state.entry;\n      return this.props.children({\n        inView: inView,\n        entry: entry,\n        ref: this.handleNode\n      });\n    }\n\n    var _this$props2 = this.props,\n        children = _this$props2.children,\n        as = _this$props2.as,\n        tag = _this$props2.tag,\n        props = _objectWithoutPropertiesLoose(_this$props2, [\"children\", \"as\", \"tag\", \"triggerOnce\", \"threshold\", \"root\", \"rootMargin\", \"onChange\", \"skip\", \"trackVisibility\", \"delay\", \"initialInView\"]);\n\n    return /*#__PURE__*/createElement(as || tag || 'div', _extends({\n      ref: this.handleNode\n    }, props), children);\n  };\n\n  return InView;\n}(Component);\n\nInView.displayName = 'InView';\nInView.defaultProps = {\n  threshold: 0,\n  triggerOnce: false,\n  initialInView: false\n};\n\nfunction useInView(_temp) {\n  var _ref = _temp === void 0 ? {} : _temp,\n      threshold = _ref.threshold,\n      delay = _ref.delay,\n      trackVisibility = _ref.trackVisibility,\n      rootMargin = _ref.rootMargin,\n      root = _ref.root,\n      triggerOnce = _ref.triggerOnce,\n      skip = _ref.skip,\n      initialInView = _ref.initialInView;\n\n  var unobserve = useRef();\n\n  var _React$useState = useState({\n    inView: !!initialInView\n  }),\n      state = _React$useState[0],\n      setState = _React$useState[1];\n\n  var setRef = useCallback(function (node) {\n    if (unobserve.current !== undefined) {\n      unobserve.current();\n      unobserve.current = undefined;\n    } // Skip creating the observer\n\n\n    if (skip) return;\n\n    if (node) {\n      unobserve.current = observe(node, function (inView, entry) {\n        setState({\n          inView: inView,\n          entry: entry\n        });\n\n        if (entry.isIntersecting && triggerOnce && unobserve.current) {\n          // If it should only trigger once, unobserve the element after it's inView\n          unobserve.current();\n          unobserve.current = undefined;\n        }\n      }, {\n        root: root,\n        rootMargin: rootMargin,\n        threshold: threshold,\n        // @ts-ignore\n        trackVisibility: trackVisibility,\n        // @ts-ignore\n        delay: delay\n      });\n    }\n  }, [threshold, root, rootMargin, triggerOnce, skip, trackVisibility, delay]);\n  /* eslint-disable-next-line */\n\n  useEffect(function () {\n    if (!unobserve.current && state.entry && !triggerOnce && !skip) {\n      // If we don't have a ref, then reset the state (unless the hook is set to only `triggerOnce` or `skip`)\n      // This ensures we correctly reflect the current state - If you aren't observing anything, then nothing is inView\n      setState({\n        inView: !!initialInView\n      });\n    }\n  });\n  var result = [setRef, state.inView, state.entry]; // Support object destructuring, by adding the specific values.\n\n  result.ref = result[0];\n  result.inView = result[1];\n  result.entry = result[2];\n  return result;\n}\n\nexport default InView;\nexport { InView, useInView };","import React, { useRef, useEffect } from \"react\";\nimport styled, { keyframes } from \"styled-components\";\n\n// Utils\nimport { Font, rem, media } from \"../../utils/style\";\nimport { Icons } from \"../../utils/svg\";\nimport { lockScroll } from \"../../utils/lockScroll\";\nimport metrics from \"../../utils/metrics\";\n\n// Components\nimport Swipeable from \"../Swipeable\";\nimport MagicVideo from \"../MagicVideo\";\n\n// Animation\nconst TRANSITION_DURATION = 550;\n\nconst fadeIn = keyframes`\n  from {opacity: 0}\n  to {opacity: 1}\n`;\n\n// Styled Elements\nconst VideoOverlay = styled.div`\n  position: fixed;\n  height: 100vh;\n  width: 100vw;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  z-index: 2147483647;\n  background: rgba(255, 255, 255, 0.9);\n  backdrop-filter: blur(10px);\n  transition: opacity 500ms ease-in-out;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  opacity: 0;\n  animation: ${fadeIn} 300ms forwards;\n`;\n\nconst VideoContainer = styled.div`\n  position: relative;\n  display: flex;\n  width: 85vw;\n  height: 62vw;\n  max-width: 970px;\n  max-height: 547px;\n\n  ${media.notDesktop`\n    max-width: 647px;\n    max-height: 365px;\n  `};\n\n  ${media.mobile`\n    width: 100vw;\n    margin: 0 auto;\n  `};\n`;\n\nconst VideoWrapper = styled.div`\n  transition: transform ${TRANSITION_DURATION}ms cubic-bezier(0.42, 0, 0.335, 1);\n  z-index: ${p => p.zindex};\n`;\n\nconst Video = styled(MagicVideo)`\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform ${TRANSITION_DURATION}ms cubic-bezier(0.42, 0, 0.335, 1);\n\n  ${p =>\n    p.nextSlide &&\n    `\n    &:hover {\n      cursor: url(\"/svg/arrow-right-large.svg\") 38 0, e-resize;\n    }\n  `};\n\n  ${p =>\n    p.previousSlide &&\n    `\n    &:hover {\n      cursor: url(\"/svg/arrow-left-large.svg\") 38 0, w-resize;\n    }\n  `};\n\n  &:focus {\n    outline: none;\n  }\n\n  video {\n    width: 100% !important;\n    height: 100% !important;\n  }\n\n  @media (max-height: 415px) and (orientation: landscape) {\n    max-height: calc(100vh - 99px);\n  }\n`;\n\nconst VideoAbout = styled.div`\n  position: absolute;\n  left: 0;\n  opacity: 0;\n  bottom: -42px;\n  font-size: ${rem(18)};\n  transition: opacity ${TRANSITION_DURATION - 200}ms 400ms;\n\n  ${media.mobile`\n    display: flex;\n    flex-direction: column;\n    bottom: -82px;\n    width: 100%;\n    text-align: center;\n  `};\n\n  @media (max-height: 415px) and (orientation: landscape) {\n    max-height: calc(100vh - 99px);\n  }\n`;\n\nconst Name = styled.span`\n  margin-right: 8px;\n  font-weight: 600;\n\n  ${media.mobile`\n    margin-bottom: 4px;\n  `};\n`;\n\nconst Title = styled.span`\n  ${Font.dutch};\n  font-size: ${rem(16)};\n  font-style: italic;\n`;\n\nconst Controls = styled.div`\n  position: absolute;\n  right: 0;\n  bottom: -50px;\n\n  ${media.mobile`\n    bottom: -162px;\n    width: 100%;\n    text-align: center;\n  `};\n`;\n\nconst CloseButton = styled.button`\n  background: transparent;\n  border: none;\n  padding: 0;\n  width: 16px;\n  height: 16px;\n  position: absolute;\n  right: 0;\n  top: -50px;\n  display: flex;\n  justify-content: flex-end;\n\n  &:focus {\n    outline: none;\n  }\n\n  ${media.mobile`\n    right: 20px;\n  `};\n`;\n\nconst ControlButton = styled.button`\n  display: inline-flex;\n  background: transparent;\n  border: none;\n  outline: none;\n  padding: 0;\n  width: 40px;\n  height: 40px;\n\n  &:first-child {\n    justify-content: flex-start;\n  }\n\n  &:last-child {\n    justify-content: flex-end;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  ${media.mobile`\n    width: 50px;\n    height: 50px;\n  `};\n\n  svg {\n    width: 18px;\n    height: 12px;\n    transition: transform 0.2s;\n  }\n\n  &:hover {\n    svg {\n      transform: scale(1.1666);\n    }\n  }\n`;\n\nexport default function TestimonialsCarouselVideos({\n  slides,\n  activeSlideIndex,\n  handleGoToNextSlide,\n  handleGoToPreviousSlide,\n  setShowVideos,\n}) {\n  const videoOverlayRef = useRef(null);\n  const offsets = generateTransformOffsets(slides, activeSlideIndex);\n\n  useEffect(() => {\n    function logCarouselPosition(message) {\n      metrics.track(\"Video Testimonials Engagement\", {\n        action: message,\n        position: activeSlideIndex + 1,\n        subject: slides[activeSlideIndex].name,\n        nonInteraction: 0,\n      });\n    }\n\n    logCarouselPosition(\"Playback Carousel Expanded\");\n    lockScroll(true, videoOverlayRef.current);\n    return () => {\n      logCarouselPosition(\"Playback Carousel Closed\");\n      lockScroll(false, videoOverlayRef.current);\n    };\n  }, []);\n\n  return (\n    <Swipeable\n      onSwipedRight={handleGoToPreviousSlide}\n      onSwipedLeft={handleGoToNextSlide}\n    >\n      <VideoOverlay ref={videoOverlayRef}>\n        <VideoContainer>\n          <CloseButton onClick={() => setShowVideos(false)}>\n            <Icons.Close />\n          </CloseButton>\n          {slides.map((slide, index) => {\n            const activeSlide = offsets[index] === 0;\n\n            const transform = offsets[index];\n            const opacity = transform > 200 || transform < -200 ? 0 : 1;\n            const scale = activeSlide ? 1 : 0.75;\n\n            const styles = {\n              transform: `translateX(${transform}%) scale(${scale})`,\n              opacity,\n            };\n\n            return (\n              <CarouselVideo\n                activeSlide={activeSlide}\n                handleGoToNextSlide={handleGoToNextSlide}\n                handleGoToPreviousSlide={handleGoToPreviousSlide}\n                index={index}\n                key={slide.shortname}\n                slide={slide}\n                styles={styles}\n              />\n            );\n          })}\n          <Controls>\n            <ControlButton onClick={handleGoToPreviousSlide}>\n              <Icons.ArrowRoundedLeft />\n            </ControlButton>\n            <ControlButton onClick={handleGoToNextSlide}>\n              <Icons.ArrowRoundedRight />\n            </ControlButton>\n          </Controls>\n        </VideoContainer>\n      </VideoOverlay>\n    </Swipeable>\n  );\n}\n\nfunction CarouselVideo({\n  activeSlide,\n  handleGoToNextSlide,\n  handleGoToPreviousSlide,\n  index,\n  slide,\n  styles,\n}) {\n  const videoRef = useRef(null);\n  const { image, name, title } = slide;\n  const previousSlide = styles.transform.includes(\"(-100%)\");\n  const nextSlide = styles.transform.includes(\"(100%)\");\n\n  useEffect(() => {\n    if (!activeSlide) {\n      videoRef.current.pause();\n    } else {\n      setTimeout(() => {\n        videoRef.current.play();\n      }, TRANSITION_DURATION - 200);\n    }\n  }, [activeSlide]);\n\n  function logVideoEvent(message, event) {\n    metrics.track(\"Video Testimonials Engagement\", {\n      action: message,\n      position: index + 1,\n      subject: name,\n      playback_time: event.target.currentTime,\n      video_duration: event.target.duration,\n      nonInteraction: 0,\n    });\n  }\n\n  function onPlay(event) {\n    logVideoEvent(\"Video Playback Started\", event);\n  }\n\n  function onPause(event) {\n    logVideoEvent(\"Video Playback Paused\", event);\n  }\n  function onEnd(event) {\n    logVideoEvent(\"Video Playback Ended\", event);\n    exitFullscreen();\n    setTimeout(() => handleGoToNextSlide(), 750);\n  }\n\n  function handleNextAndPreviousClick() {\n    if (previousSlide) {\n      handleGoToPreviousSlide();\n    }\n    if (nextSlide) {\n      handleGoToNextSlide();\n    }\n\n    return false;\n  }\n\n  const { videoContent } = slide;\n\n  return (\n    <VideoWrapper zindex={activeSlide ? 9999 : 0}>\n      <Video\n        autoPlay={activeSlide ? \"autoplay\" : false}\n        controls={activeSlide}\n        crossorigin=\"anonymous\"\n        preload=\"none\"\n        poster={image.file.url}\n        onPlay={onPlay}\n        onPause={onPause}\n        onEnded={onEnd}\n        onClick={handleNextAndPreviousClick}\n        nextSlide={nextSlide}\n        previousSlide={previousSlide}\n        videoStyle={styles}\n        sources={videoContent.sources}\n        captions={videoContent.captions}\n        ref={videoRef}\n      />\n      <VideoAbout style={activeSlide ? { opacity: 1 } : { transition: \"none\" }}>\n        <Name>{name}</Name> <Title>{title}</Title>\n      </VideoAbout>\n    </VideoWrapper>\n  );\n}\n\nfunction generateTransformOffsets(slides, activeSlideIndex) {\n  const offsets = slides.map((_, index) => {\n    if (slides.length / 2 < index) {\n      return (index - slides.length) * 100 * -1;\n    } else {\n      return index * 100 * -1;\n    }\n  });\n\n  let newOffsets = [];\n\n  for (let i = 0; i < offsets.length; i++) {\n    let pointer =\n      (Math.abs(i - offsets.length) + activeSlideIndex) % offsets.length;\n    newOffsets.push(offsets[pointer]);\n  }\n\n  return newOffsets;\n}\n\nfunction exitFullscreen() {\n  const {\n    fullScreenElement,\n    webkitFullscreenElement,\n    mozFullScreenElement,\n  } = document;\n\n  const isFullScreenElement =\n    fullScreenElement || webkitFullscreenElement || mozFullScreenElement;\n\n  if (!isFullScreenElement) return;\n\n  if (document.exitFullscreen) {\n    document.exitFullscreen();\n  } else if (document.mozCancelFullScreen) {\n    document.mozCancelFullScreen();\n  } else if (document.webkitExitFullscreen) {\n    document.webkitExitFullscreen();\n  }\n}\n","import React, { Fragment, useState, useEffect } from \"react\";\nimport styled, { keyframes } from \"styled-components\";\nimport Img from \"gatsby-image\";\n\nimport { useInView } from \"react-intersection-observer\";\n\nimport TestimonialsCarouselVideos from \"./TestimonialsCarouselVideos\";\nimport Swipeable from \"../Swipeable\";\n\nimport { Font, rem, media, responsive } from \"../../utils/style\";\nimport { Icons } from \"../../utils/svg\";\n\nconst TRANSITION_DURATION = 400;\n\nconst CarouselContainer = styled.div`\n  position: relative;\n  display: flex;\n  margin-top: 40px;\n\n  @media (max-width: 600px) {\n    flex-direction: column-reverse;\n    margin: 40px -20px 0;\n    padding: 0 20px;\n    overflow: hidden;\n  }\n\n  ${responsive.md`\n    margin-top: 56px;\n  `};\n`;\n\nconst Spacer = styled.div.attrs({\n  className: \"col-3 col-md-3\",\n})`\n  min-width: 300px;\n\n  ${media.tablet`\n    min-width: unset;\n  `};\n\n  @media (max-width: 600px) {\n    display: none;\n  }\n`;\n\nconst Name = styled.div`\n  margin-bottom: 6px;\n  font-size: ${rem(18)};\n\n  ${media.mobile`\n    margin-bottom: 2px;\n  `};\n`;\n\nconst Title = styled.div`\n  ${Font.dutch};\n  font-style: italic;\n  font-weight: 500;\n  font-size: ${rem(16)};\n  margin-bottom: 30px;\n\n  ${media.tablet`\n    font-size: ${rem(14)}\n    margin-bottom: 24px;\n  `};\n\n  ${media.mobile`\n    margin-bottom: 0;\n  `};\n`;\n\nconst TextContainer = styled.div.attrs({\n  id: \"testimonials-new-carousel_text-container\",\n})`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  z-index: 60;\n  padding-top: 56px;\n  width: 370px;\n\n  ${media.tablet`\n    padding-top: 24px;\n    width: 220px;\n  `};\n\n  ${media.mobile`\n    width: 256px;\n\n    ${Name},\n    ${Title} {\n      display: none\n    }\n  `};\n\n  @media (max-width: 600px) {\n    position: relative;\n  }\n`;\n\nconst fadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst moveDown = keyframes`\n  from { transform: translateY(-20%) }\n  to { transform: translateY(0) }\n`;\n\nconst moveUp = keyframes`\n  from { transform: translateY(20%) }\n  to { transform: translateY(0) }\n`;\n\nconst moveDownMobile = keyframes`\n  from { transform: translateY(-50%) }\n  to { transform: translateY(0) }\n`;\n\nconst moveUpMobile = keyframes`\n  from { transform: translateY(50%) }\n  to { transform: translateY(0) }\n`;\n\nconst AnimateOnChange = styled.div`\n  opacity: 0;\n  animation: ${fadeIn} ${TRANSITION_DURATION}ms 100ms forwards,\n    ${p => (p.direction === \"forwards\" ? moveDown : moveUp)}\n      ${TRANSITION_DURATION}ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;\n\n  ${media.mobile`\n      animation: ${fadeIn} ${TRANSITION_DURATION}ms 100ms forwards,\n    ${p => (p.direction === \"forwards\" ? moveDownMobile : moveUpMobile)}\n      ${TRANSITION_DURATION}ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;\n  `};\n`;\n\nconst PullQuote = styled.div.attrs({\n  id: \"testimonials-new-carousel_text-container_quote\",\n})`\n  position: relative;\n  font-size: ${rem(34)};\n  line-height: ${rem(40)};\n  letter-spacing: -0.5px;\n  margin-bottom: 24px;\n  min-height: 120px;\n\n  ${media.tablet`\n    font-size: ${rem(22)};\n    line-height: ${rem(32)};\n    min-height: 96px;\n    margin-bottom: 16px;\n  `};\n\n  ${media.mobile`\n    margin-bottom: 0;\n  `};\n`;\n\nconst Controls = styled.div.attrs({\n  id: \"testimonials-new-carousel_slides_controls\",\n})`\n  position: absolute;\n  z-index: 70;\n  bottom: 30px;\n  left: 58.5%;\n\n  ${responsive.md`\n    bottom: 30px;\n    left: 60.5%;\n  `};\n\n  ${responsive.lg`\n    bottom: 70px;\n    left: 62%;\n  `};\n\n  @media (max-width: 600px) {\n    display: none;\n  }\n`;\n\nconst ControlButton = styled.button.attrs(p => ({\n  id: `testimonials-new-carousel_slides_controls_control-button-${p.index}`,\n}))`\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  background: transparent;\n  border: none;\n  padding: 0;\n  width: 57px;\n  height: 56px;\n  background: #f8f7f9;\n\n  ${responsive.md`\n    width: 60px;\n  `};\n\n  ${responsive.lg`\n    width: 62px;\n  `};\n\n  [data-whatintent=\"mouse\"] &:focus,\n  [data-whatintent=\"touch\"] &:focus {\n    outline: none;\n  }\n\n  @media (max-width: 600px) {\n    background: transparent;\n  }\n\n  svg {\n    width: 18px;\n    height: 12px;\n    transition: transform 0.2s;\n  }\n\n  &:hover {\n    svg {\n      transform: scale(1.1666);\n    }\n  }\n`;\n\nconst MobileControlsButton = styled.div`\n  position: absolute;\n  right: 0;\n  height: 100%;\n  width: 20%;\n  display: flex;\n  justify-content: flex-end;\n  background: transparent;\n  border: none;\n  z-index: 100;\n\n  @media (min-width: 600px) {\n    display: none;\n  }\n`;\n\nconst PlayButton = styled.button.attrs({\n  id: \"testimonials-new-carousel_slides_play-button\",\n})`\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  bottom: 24px;\n  left: 24px;\n  padding: 0;\n  z-index: 50;\n  background: transparent;\n  border: none;\n  border-radius: 50%;\n  color: #fff;\n  text-align: left;\n  opacity: 0;\n  animation: ${fadeIn} ${TRANSITION_DURATION}ms 100ms forwards;\n  pointer-events: none;\n  transition: background 200ms ease;\n\n  @media (min-width: 749px) {\n    ${Name}, ${Title} {\n      display: none;\n    }\n  }\n\n  [data-whatintent=\"mouse\"] &:focus,\n  [data-whatintent=\"touch\"] &:focus {\n    outline: none;\n  }\n\n  ${media.tablet`\n    left: 16px;\n    bottom: 16px;\n    border-radius: 0;\n  `};\n\n  @media (max-width: 748px) {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    max-width: 256px;\n    padding-left: 16px;\n    padding-bottom: 16px;\n    background: -moz-linear-gradient(\n      top,\n      rgba(68, 68, 68, 0) 0%,\n      rgba(68, 68, 68, 0.25) 100%\n    );\n    background: -webkit-linear-gradient(\n      top,\n      rgba(68, 68, 68, 0) 0%,\n      rgba(68, 68, 68, 0.25) 100%\n    );\n    background: linear-gradient(\n      to bottom,\n      rgba(68, 68, 68, 0) 0%,\n      rgba(68, 68, 68, 0.25) 100%\n    );\n    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00444444', endColorstr='#40444444',GradientType=0 );\n  }\n\n  @media (min-width: 601px) and (max-width: 748px) {\n    max-width: 220px;\n  }\n\n  /* PlayButtonIcon as SVG */\n  svg {\n    width: 40px;\n    height: 40px;\n    margin-bottom: 8px;\n\n    ${responsive.sm`\n      width: 48px;\n      height: 48px;\n      overflow: visible;\n    `};\n\n    ${responsive.md`\n      width: 60px;\n      height: 60px;\n      margin: 0;\n    `};\n  }\n`;\n\nconst PlayButtonIcon = () => (\n  <svg\n    width=\"60\"\n    height=\"60\"\n    viewBox=\"0 0 60 60\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M30 57.5C45.1878 57.5 57.5 45.1878 57.5 30C57.5 14.8122 45.1878 2.5 30 2.5C14.8122 2.5 2.5 14.8122 2.5 30C2.5 45.1878 14.8122 57.5 30 57.5ZM60 30C60 46.5685 46.5685 60 30 60C13.4315 60 0 46.5685 0 30C0 13.4315 13.4315 0 30 0C46.5685 0 60 13.4315 60 30Z\"\n      fill=\"white\"\n    />\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M27.0976 22.1153C26.8802 21.9748 26.6021 21.9619 26.3734 22.0812C26.1433 22.1998 26 22.4309 26 22.6825V36.3182C26 36.5698 26.1433 36.8009 26.3727 36.9195C26.4772 36.9734 26.5915 37 26.7059 37C26.8428 37 26.9791 36.9611 27.0976 36.8855L37.6859 30.0676C37.8821 29.9408 38 29.7281 38 29.5004C38 29.2726 37.8821 29.0599 37.6859 28.9331L27.0976 22.1153Z\"\n      fill=\"white\"\n    />\n  </svg>\n);\n\nconst Slides = styled.div.attrs({\n  id: \"testimonials-new-carousel_slides\",\n})`\n  display: flex;\n  position: relative;\n`;\n\nconst Slide = styled.div.attrs(p => ({\n  id: `testimonials-new-carousel_slides_slide-${p.index}`,\n}))`\n  position: relative;\n  width: 289px;\n  height: 351px;\n  cursor: pointer;\n  overflow: hidden;\n\n  &:first-child {\n    width: 375px;\n    height: 450px;\n\n    &:hover ~ ${PlayButton} {\n      background: rgba(255, 255, 255, 0.2);\n    }\n  }\n\n  &:not(:last-child) {\n    margin-right: 30px;\n  }\n\n  ${media.notDesktop`\n    width: 229px;\n    height: 279px;\n\n    &:first-child {\n      width: 294px;\n      height: 358px;\n    }\n\n    &:not(:last-child) {\n      margin-right: 26px;\n    }\n  `};\n\n  ${media.tablet`\n    width: 172px;\n    height: 209px;\n\n    &:first-child {\n      width: 220px;\n      height: 267px;\n\n      &:hover ~ ${PlayButton} {\n        background: transparent;\n      }\n    }\n\n    &:not(:last-child) {\n      margin-right: 20px;\n    }\n  `};\n\n  @media (max-width: 600px) {\n    min-width: 200px;\n    min-height: 242px;\n\n    &:first-child {\n      min-width: 256px;\n      min-height: 310px;\n    }\n\n    &:last-child {\n      display: none;\n    }\n\n    &:not(:last-child) {\n      margin-right: 16px;\n    }\n  }\n`;\n\nconst Image = styled.div`\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  color: #000;\n  visibility: hidden;\n  z-index: 20;\n  will-change: transform;\n  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.25);\n  transition: transform ${TRANSITION_DURATION}ms cubic-bezier(0.4, 0, 0.6, 1);\n`;\n\nfunction TestimonialsCarousel({ slides }) {\n  const initialState = {\n    activeSlideIndex: 0,\n    direction: \"forwards\",\n  };\n\n  const [{ activeSlideIndex, direction }, setSlide] = useState(initialState);\n  const [controlsAreLocked, setLockControls] = useState(false);\n  const [showVideos, setShowVideos] = useState(false);\n  const [ref, inView] = useInView();\n\n  const numberOfSlideSections = new Array(3).fill(\"\");\n  const numberOfSlides = slides.length;\n  const activeSlide = slides[activeSlideIndex];\n\n  useEffect(() => {\n    if (controlsAreLocked) return;\n\n    if (inView) {\n      const handleKeyDown = function(event) {\n        switch (event.key) {\n          case \"ArrowLeft\":\n            handleGoToPreviousSlide();\n            break;\n          case \"ArrowRight\":\n            handleGoToNextSlide();\n            break;\n          case \"Escape\":\n            setShowVideos(false);\n            break;\n          default:\n            break;\n        }\n      };\n      window.addEventListener(\"keydown\", handleKeyDown);\n      return () => window.removeEventListener(\"keydown\", handleKeyDown);\n    }\n  }, [controlsAreLocked, inView]);\n\n  /**\n   * In theory one could keep clicking and repeatedly very fast and break\n   * the carousel since the transition takes about 350ms. That's why we\n   * need to lock the controls for about 350ms and then unlock them.\n   */\n  function handleLockingControls() {\n    if (controlsAreLocked) return;\n\n    setLockControls(true);\n    setTimeout(() => setLockControls(false), TRANSITION_DURATION);\n  }\n\n  /**\n   * We need to update the active slide index and let the carousel know\n   * we are going forwards. This will trigger an animation when updated.\n   */\n  function handleGoToNextSlide() {\n    if (controlsAreLocked) return;\n\n    setSlide(({ activeSlideIndex }) => {\n      handleLockingControls();\n\n      // Can't get the activeSlideIndex out of bounds of the slides\n      if (activeSlideIndex === numberOfSlides - 1) {\n        return { activeSlideIndex: 0, direction: \"forwards\" };\n      } else {\n        return {\n          activeSlideIndex: activeSlideIndex + 1,\n          direction: \"forwards\",\n        };\n      }\n    });\n  }\n\n  /**\n   * We need to update the active slide index and let the carousel know\n   * we are going backwords. This will trigger an animation when updated.\n   */\n  function handleGoToPreviousSlide() {\n    if (controlsAreLocked) return;\n\n    setSlide(({ activeSlideIndex }) => {\n      handleLockingControls();\n\n      // We can't have an active index of -1, so when it's 0 update it to slides length!\n      if (activeSlideIndex === 0) {\n        return { activeSlideIndex: numberOfSlides - 1, direction: \"backwards\" };\n      } else {\n        return {\n          activeSlideIndex: activeSlideIndex - 1,\n          direction: \"backwards\",\n        };\n      }\n    });\n  }\n\n  /**\n   * In order to create the carousel animation effect we need to apply custom styles\n   * to the previous, visible, and next slides. In order to apply custom styles we need\n   * to know the index of the previous, active, and next slides.\n   *\n   * This function will return the indexes of each:\n   * previous index  0\n   * active index    1\n   * next index      2\n   */\n  function getPreviousVisibleAndNextSlideIndex(activeSlideOffset) {\n    const visibleSlide =\n      activeSlideOffset > numberOfSlides - 1\n        ? activeSlideOffset - numberOfSlides\n        : activeSlideOffset;\n\n    const previousSlide =\n      visibleSlide === 0 ? numberOfSlides - 1 : visibleSlide - 1;\n\n    const nextSlide =\n      visibleSlide === numberOfSlides - 1 ? 0 : visibleSlide + 1;\n\n    return {\n      previousSlide,\n      visibleSlide,\n      nextSlide,\n    };\n  }\n\n  function handleSlideClick(offset) {\n    switch (offset) {\n      case 0:\n        setShowVideos(true);\n        break;\n      case 1:\n        handleGoToPreviousSlide();\n        break;\n      case 2:\n        handleGoToNextSlide();\n        break;\n      default:\n        break;\n    }\n  }\n\n  /**\n   * This is where the magic happens!\n   * Depending on which slide index is passed into this function we will return a\n   * different set of styles. These styles are what create the transitions.\n   */\n  function getSlideStylesBasedOnOrdering(\n    { previousSlide, visibleSlide, nextSlide },\n    index,\n  ) {\n    // forwrdas and backwards have different transition stlyes\n    const isForwards = direction === \"forwards\";\n\n    // If no indexes match, pass back empty styles\n    let styles = {};\n\n    const previousStyles = {\n      transform: \"translateX(-50%)\",\n      zIndex: 0,\n      visibility: \"visible\",\n    };\n\n    const visibleStyles = {\n      transform: \"translateX(0)\",\n      zIndex: isForwards ? 10 : 20,\n      visibility: \"visible\",\n    };\n\n    const nextStyles = {\n      transform: \"translateX(100%)\",\n      zIndex: isForwards ? 20 : 30,\n      visibility: isForwards ? \"hidden\" : \"visible\",\n    };\n\n    if (index === previousSlide) {\n      styles = previousStyles;\n    }\n\n    if (index === visibleSlide) {\n      styles = visibleStyles;\n    }\n\n    if (index === nextSlide) {\n      styles = nextStyles;\n    }\n\n    return styles;\n  }\n\n  return (\n    <>\n      <Swipeable\n        onSwipedRight={handleGoToPreviousSlide}\n        onSwipedLeft={handleGoToNextSlide}\n      >\n        <CarouselContainer ref={ref}>\n          <Spacer />\n          <TextContainer>\n            <AnimateOnChange direction={direction} key={activeSlideIndex}>\n              <PullQuote\n                dangerouslySetInnerHTML={{\n                  __html: `“${activeSlide.pullquote.pullquote}”`,\n                }}\n              />\n              <Name>{activeSlide.name}</Name>\n              <Title>{activeSlide.title}</Title>\n            </AnimateOnChange>\n          </TextContainer>\n          <Slides>\n            {numberOfSlideSections.map((_, offset) => {\n              const activeSlideWithOffset = activeSlideIndex + offset;\n              const offsetIndexes = getPreviousVisibleAndNextSlideIndex(\n                activeSlideWithOffset,\n              );\n\n              return (\n                <Fragment key={offset}>\n                  <Slide\n                    index={offset}\n                    key={offset}\n                    onClick={() => handleSlideClick(offset)}\n                  >\n                    {slides.map((_, index) => {\n                      const styles = getSlideStylesBasedOnOrdering(\n                        offsetIndexes,\n                        index,\n                      );\n\n                      return (\n                        <Image\n                          key={slides[index].name}\n                          style={styles}\n                          direction={direction}\n                        >\n                          <Img\n                            fixed={slides[index].verticalImage.fixed}\n                            alt={`${slides[index].name} - ${slides[index].title}`}\n                            style={{\n                              position: \"absolute\",\n                              left: 0,\n                              top: 0,\n                              width: \"100%\",\n                              height: \"100%\",\n                              userSelect: \"none\",\n                              userDrag: \"none\",\n                              pointerEvents: \"none\",\n                              touchCallout: \"none\",\n                            }}\n                          />\n                        </Image>\n                      );\n                    })}\n                  </Slide>\n                </Fragment>\n              );\n            })}\n\n            <PlayButton key={activeSlideIndex} aria-label=\"Play\">\n              <PlayButtonIcon />\n              <AnimateOnChange direction={direction} key={activeSlideIndex}>\n                <Name name={activeSlide.name}>{activeSlide.name}</Name>\n                <Title title={activeSlide.title}>{activeSlide.title}</Title>\n              </AnimateOnChange>\n            </PlayButton>\n            <Controls>\n              <ControlButton\n                index={\"0\"}\n                onClick={handleGoToPreviousSlide}\n                aria-label=\"Previous\"\n              >\n                <Icons.ArrowRoundedLeft />\n              </ControlButton>\n              <ControlButton\n                index={\"1\"}\n                onClick={handleGoToNextSlide}\n                aria-label=\"Next\"\n              >\n                <Icons.ArrowRoundedRight />\n              </ControlButton>\n            </Controls>\n          </Slides>\n          <MobileControlsButton onClick={handleGoToNextSlide} />\n        </CarouselContainer>\n      </Swipeable>\n\n      {showVideos && (\n        <TestimonialsCarouselVideos\n          setShowVideos={setShowVideos}\n          slides={slides}\n          activeSlideIndex={activeSlideIndex}\n          handleGoToPreviousSlide={handleGoToPreviousSlide}\n          handleGoToNextSlide={handleGoToNextSlide}\n        />\n      )}\n    </>\n  );\n}\n\nexport default TestimonialsCarousel;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport Container from \"../Container\";\nimport TestimonialsCarousel from \"./TestimonialsCarousel\";\nimport Text from \"../Text\";\nimport { Font, Color, rem, media, responsive } from \"../../utils/style\";\nimport { graphql, StaticQuery } from \"gatsby\";\n\nconst componentQuery = graphql`\n  query TestimonialsNewComponentQuery {\n    contentfulHomePage {\n      testimonials {\n        image {\n          file {\n            url\n          }\n        }\n        verticalImage {\n          fixed(width: 375, quality: 90) {\n            ...GatsbyContentfulFixed_withWebp_noBase64\n          }\n        }\n        name\n        shortname\n        title\n        pullquote {\n          pullquote\n        }\n        videoContent {\n          sources {\n            file {\n              url\n              contentType\n            }\n          }\n          captions {\n            description\n            file {\n              url\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n\nconst TestimonialsWrapper = styled.section.attrs({\n  \"aria-labelledby\": \"testimonials-title\",\n})`\n  padding: 80px 0;\n  z-index: 2;\n  background: rgba(242, 241, 245, 0.56);\n\n  .container {\n    overflow: visible !important;\n    padding: 0 20px;\n  }\n\n  ${media.tablet`\n    padding: 80px 0;\n\n    .container {\n      padding: 0 20px;\n    }\n  `};\n\n  ${responsive.md`\n    padding: 120px 0 ${p => (p.paddingBottom ? p.paddingBottom : 40)}px;\n\n    .container {\n      padding: 0;\n    }\n  `}\n`;\n\nconst TestimonialsContainer = styled(Container)``;\n\nconst TestimonialsColumn = styled.div.attrs({\n  className: \"d-flex flex-column w-100\",\n})``;\n\nconst Headline = styled.h2.attrs({\n  id: \"testimonials-headline\",\n})`\n  ${Font.circular}\n  color: ${Color.ritualBlue};\n  font-size: ${rem(24)};\n  line-height: ${rem(36)};\n  letter-spacing: -0.4px;\n  font-weight: 500;\n  text-align: center !important;\n  margin: 0 0 24px;\n  ${responsive.sm`\n  font-size: ${rem(30)};\n`};\n  ${responsive.md`\n    font-size: ${rem(48)};\n    line-height: ${rem(54)};\n    letter-spacing: -1.4px;\n    margin: 0 0 16px;\n  `};\n  ${responsive.lg`\n    font-size: ${rem(40)};\n  `};\n`;\n\nconst Subhead = styled.p`\n  ${Font.dutch}\n  color: ${Color.ritualBlue};\n  font-size: ${rem(16)};\n  line-height: ${rem(26)};\n  font-weight: normal;\n  text-align: center;\n  letter-spacing: 0;\n  margin: 0;\n\n  ${responsive.md`\n    font-size: ${rem(18)};\n    line-height: ${rem(28)};\n  `};\n`;\n\nexport const TestimonialsComponent = class Testimonials extends React.Component {\n  render() {\n    const { data, paddingBottom } = this.props;\n    const testimonials = data.contentfulHomePage.testimonials;\n    return (\n      <TestimonialsWrapper paddingBottom={paddingBottom}>\n        <TestimonialsContainer>\n          <TestimonialsColumn>\n            <Headline>\n              <Text\n                id=\"testimonials.headline\"\n                defaultMessage=\"Skeptics Speak\"\n              />\n            </Headline>\n            <Subhead>\n              <Text\n                id=\"testimonials.subhead\"\n                defaultMessage=\"With millions of bottles delivered, discover what Ritual users\n              have to say.\"\n              />\n            </Subhead>\n          </TestimonialsColumn>\n          <TestimonialsCarousel slides={testimonials} />\n        </TestimonialsContainer>\n      </TestimonialsWrapper>\n    );\n  }\n};\n\nexport const TestimonialsComponentQuery = props => (\n  <StaticQuery\n    query={componentQuery}\n    render={data => <TestimonialsComponent {...props} data={data} />}\n  />\n);\n\nexport default TestimonialsComponentQuery;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport styled from \"styled-components\";\n\n// Styled Elements\nconst MagicVideoWrapper = styled.div`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  video {\n    max-width: 100%;\n    max-height: 100%;\n\n    [data-whatintent=\"mouse\"] &:focus,\n    [data-whatintent=\"touch\"] &:focus {\n      outline: none;\n    }\n  }\n\n  ${p => p.videoStyle};\n`;\n\n// Video related\nconst langLabel = {\n  en: \"English\",\n};\n\nexport default class MagicVideo extends React.Component {\n  static propTypes = {\n    captions: PropTypes.array,\n    className: PropTypes.string,\n    sources: PropTypes.array,\n    videoStyle: PropTypes.any,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.videoElement = React.createRef();\n    this.locale = null;\n  }\n\n  componentDidMount() {\n    this.locale = window.navigator.language;\n  }\n\n  play() {\n    this.videoElement.current.play();\n  }\n\n  pause() {\n    this.videoElement.current.pause();\n  }\n\n  render() {\n    const {\n      /* Attributes */\n      autoPlay = false,\n      captions,\n      controls = true,\n      crossorigin,\n      loop = false,\n      poster,\n      preload = \"metadata\",\n      sources,\n      /* Interaction Callbacks */\n      onPause,\n      onEnded,\n      onPlay,\n      onSeeking,\n      onSeeked,\n      onClick,\n      /* Other */\n      className,\n      videoStyle = {},\n      videoElementStyle = {},\n    } = this.props;\n\n    if (!sources) {\n      console.warn(\"No video sources found\");\n      return null;\n    }\n\n    if (!captions) console.warn(\"Captions missing for video\");\n\n    let videoProps = {\n      /* Attributes */\n      autoPlay,\n      controls,\n      loop,\n      poster,\n      preload,\n      /* Interaction Callbacks */\n      onPause,\n      onEnded,\n      onPlay,\n      onSeeking,\n      onSeeked,\n      onClick,\n    };\n\n    if (crossorigin) {\n      videoProps.crossOrigin = crossorigin;\n    }\n\n    /* eslint-disable jsx-a11y/media-has-caption */\n    /* ^ jsx-a11y cant see <track> inside the .map ¯\\_(ツ)_/¯ */\n    return (\n      <MagicVideoWrapper className={className} videoStyle={videoStyle}>\n        <video\n          /* Props */\n          {...videoProps}\n          /* Other */\n          ref={this.videoElement}\n          style={videoElementStyle}\n        >\n          {sources.map((source, i) => {\n            const { file, id } = source;\n            return (\n              <source id={id} key={i} src={file.url} type={file.contentType} />\n            );\n          })}\n          {captions &&\n            captions.map((caption, i) => {\n              let { description, file } = caption;\n              if (!description) description = \"en-us\";\n\n              return (\n                <track\n                  key={i}\n                  kind=\"captions\"\n                  src={file.url}\n                  srcLang={description}\n                  label={langLabel[description]}\n                  default={description === this.locale}\n                />\n              );\n            })}\n        </video>\n      </MagicVideoWrapper>\n    );\n    /* eslint-enable */\n  }\n}\n"],"sourceRoot":""}