@blateral/b.kit 2.3.0-beta.1.4 → 2.3.1

package/esm/VideoBlock-b3f4ae27.js

@@ -1,624 +0,0 @@
-import { a as __makeTemplateObject, _ as __assign, f as __awaiter, g as __generator, e as __spreadArray } from './ClockFilled-6bae80dc.js';
-import React__default, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
-import styled, { css } from 'styled-components';
-import { m as mq, s as spacings, c as getGlobals } from './styles-f6c54818.js';
-import { T as Title } from './TableBlock-26530c71.js';
-import { C as Copy } from './Copy-fb124972.js';
-import { A as Actions } from './Actions-3f06c2e9.js';
-import { I as Image } from './Image-b538f659.js';
-import { u as useMediaQuery } from './useMediaQuery-0d473a9c.js';
-import { c as clampValue } from './clamp-12d37b65.js';
-import { u as useObserverSupport } from './useObserverSupport-02bce7f5.js';
-import { u as useUpdateEffect } from './useUpdateEffect-824c0c84.js';
-
-var View = styled.div.withConfig({
-  displayName: "IntroBlock__View",
-  componentId: "sc-w71lok-0"
-})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n    display: block;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    text-align: ", ";\n\n    @media ", " {\n        display: flex;\n        flex-direction: row;\n\n        & > * + * {\n            margin-left: ", "px;\n        }\n    }\n"], ["\n    display: block;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    text-align: ", ";\n\n    @media ", " {\n        display: flex;\n        flex-direction: row;\n\n        & > * + * {\n            margin-left: ", "px;\n        }\n    }\n"])), function (_a) {
-  var isCentered = _a.isCentered;
-  return isCentered && 'center';
-}, mq.semilarge, spacings.spacer);
-var Content = styled.div.withConfig({
-  displayName: "IntroBlock__Content",
-  componentId: "sc-w71lok-1"
-})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    max-width: 100%;\n\n    @media ", " {\n        flex: 1 0 66.66%;\n    }\n"], ["\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    max-width: 100%;\n\n    @media ", " {\n        flex: 1 0 66.66%;\n    }\n"])), spacings.spacer, mq.semilarge);
-var StyledTitle = styled(Title).withConfig({
-  displayName: "IntroBlock__StyledTitle",
-  componentId: "sc-w71lok-2"
-})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n    max-width: ", ";\n"], ["\n    max-width: ", ";\n"])), function (_a) {
-  var clamp = _a.clamp;
-  return clamp && '880px';
-});
-var ContentBlock = styled(Copy).withConfig({
-  displayName: "IntroBlock__ContentBlock",
-  componentId: "sc-w71lok-3"
-})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: block;\n    max-width: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n\n    ", "\n\n    & + & {\n        margin-top: ", "px;\n    }\n"], ["\n    display: block;\n    max-width: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n\n    ", "\n\n    & + & {\n        margin-top: ", "px;\n    }\n"])), function (_a) {
-  var clamp = _a.clamp;
-  return clamp && '880px';
-}, function (_a) {
-  var isCentered = _a.isCentered;
-  return isCentered && 'auto';
-}, function (_a) {
-  var isCentered = _a.isCentered;
-  return isCentered && 'auto';
-}, function (_a) {
-  var maxLines = _a.maxLines;
-  return maxLines && maxLines > 0 && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            overflow: hidden;\n            text-overflow: ellipsis;\n            display: -webkit-box;\n            -webkit-line-clamp: ", "; /* number of lines to show */\n            line-clamp: ", ";\n            -webkit-box-orient: vertical;\n        "], ["\n            overflow: hidden;\n            text-overflow: ellipsis;\n            display: -webkit-box;\n            -webkit-line-clamp: ", "; /* number of lines to show */\n            line-clamp: ", ";\n            -webkit-box-orient: vertical;\n        "])), maxLines, maxLines);
-}, spacings.nudge * 3);
-var StyledActions = styled(Actions).withConfig({
-  displayName: "IntroBlock__StyledActions",
-  componentId: "sc-w71lok-4"
-})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    @media ", " {\n        display: block;\n        text-align: ", ";\n    }\n"], ["\n    @media ", " {\n        display: block;\n        text-align: ", ";\n    }\n"])), mq.medium, function (_a) {
-  var isCentered = _a.isCentered;
-  return isCentered && 'center';
-});
-var MobileImageContainer = styled.div.withConfig({
-  displayName: "IntroBlock__MobileImageContainer",
-  componentId: "sc-w71lok-5"
-})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    width: 100%;\n    height: 100%;\n    max-width: 400px;\n    max-height: 400px;\n    text-align: center;\n\n    margin: 0 auto;\n    margin-top: ", "px;\n\n    @media ", " {\n        display: ", ";\n    }\n"], ["\n    width: 100%;\n    height: 100%;\n    max-width: 400px;\n    max-height: 400px;\n    text-align: center;\n\n    margin: 0 auto;\n    margin-top: ", "px;\n\n    @media ", " {\n        display: ", ";\n    }\n"])), spacings.spacer, mq.semilarge, function (_a) {
-  var isCentered = _a.isCentered;
-  return isCentered ? 'block' : 'none';
-});
-var DesktopImageContainer = styled.div.withConfig({
-  displayName: "IntroBlock__DesktopImageContainer",
-  componentId: "sc-w71lok-6"
-})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: none;\n    width: 100%;\n\n    @media ", " {\n        display: block;\n        /* flex: 1 0 33.33%; */\n\n        max-width: 400px;\n    }\n"], ["\n    display: none;\n    width: 100%;\n\n    @media ", " {\n        display: block;\n        /* flex: 1 0 33.33%; */\n\n        max-width: 400px;\n    }\n"])), mq.semilarge);
-
-var IntroBlock = function (_a) {
-  var _b = _a.renderAs,
-      renderAs = _b === void 0 ? 'div' : _b,
-      _c = _a.colorMode,
-      colorMode = _c === void 0 ? 'default' : _c,
-      title = _a.title,
-      titleAs = _a.titleAs,
-      _d = _a.titleSize,
-      titleSize = _d === void 0 ? 'heading-2' : _d,
-      superTitle = _a.superTitle,
-      superTitleAs = _a.superTitleAs,
-      abstract = _a.abstract,
-      text = _a.text,
-      _e = _a.textType,
-      textType = _e === void 0 ? 'copy' : _e,
-      _f = _a.textSize,
-      textSize = _f === void 0 ? 'medium' : _f,
-      primaryAction = _a.primaryAction,
-      secondaryAction = _a.secondaryAction,
-      _g = _a.isCentered,
-      isCentered = _g === void 0 ? false : _g,
-      _h = _a.clampTitle,
-      clampTitle = _h === void 0 ? false : _h,
-      _j = _a.clampAbstract,
-      clampAbstract = _j === void 0 ? false : _j,
-      maxTitleLines = _a.maxTitleLines,
-      maxAbstractLines = _a.maxAbstractLines,
-      _k = _a.clampText,
-      clampText = _k === void 0 ? false : _k,
-      maxTextLines = _a.maxTextLines,
-      className = _a.className,
-      titleHyphens = _a.titleHyphens,
-      image = _a.image;
-  var isInverted = colorMode === 'inverted' || colorMode === 'onImage';
-  var coverSpace = (image === null || image === void 0 ? void 0 : image.coverSpace) === false ? false : true;
-  return React__default.createElement(View, {
-    as: renderAs,
-    isCentered: isCentered,
-    className: className
-  }, React__default.createElement(Content, null, (title || superTitle) && React__default.createElement(StyledTitle, {
-    colorMode: colorMode,
-    title: title,
-    titleAs: titleAs,
-    titleSize: titleSize,
-    superTitle: superTitle,
-    superTitleAs: superTitleAs,
-    isCentered: isCentered,
-    clamp: clampTitle,
-    maxLines: maxTitleLines,
-    titleHyphens: titleHyphens
-  }), (image === null || image === void 0 ? void 0 : image.small) && React__default.createElement(MobileImageContainer, {
-    isCentered: isCentered
-  }, React__default.createElement(Image, __assign({}, image, {
-    coverSpace: coverSpace,
-    allowEdgeRadius: true,
-    isInverted: isInverted
-  }))), abstract && React__default.createElement(ContentBlock, {
-    type: "copy",
-    size: "big",
-    textColor: colorMode === 'onImage' ? '#fff' : undefined,
-    isInverted: isInverted,
-    isCentered: isCentered,
-    innerHTML: abstract,
-    clamp: clampAbstract,
-    maxLines: maxAbstractLines
-  }), text && React__default.createElement(ContentBlock, {
-    type: textType,
-    size: textSize,
-    textColor: colorMode === 'onImage' ? '#fff' : undefined,
-    isInverted: isInverted,
-    isCentered: isCentered,
-    innerHTML: text,
-    clamp: clampText,
-    maxLines: maxTextLines
-  }), (primaryAction || secondaryAction) && React__default.createElement(StyledActions, {
-    primary: primaryAction && primaryAction(isInverted),
-    secondary: secondaryAction && secondaryAction(isInverted)
-  })), (image === null || image === void 0 ? void 0 : image.small) && !isCentered && React__default.createElement(DesktopImageContainer, null, React__default.createElement(Image, __assign({}, image, {
-    coverSpace: coverSpace,
-    allowEdgeRadius: true,
-    isInverted: isInverted
-  }))));
-};
-var templateObject_1$4, templateObject_2$4, templateObject_3$3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
-
-var AnimationContainer = styled.div.withConfig({
-  displayName: "HeaderKenBurns__AnimationContainer",
-  componentId: "sc-1hmc5d0-0"
-})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n"], ["\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n"])));
-var PosterImage = styled(Image).withConfig({
-  displayName: "HeaderKenBurns__PosterImage",
-  componentId: "sc-1hmc5d0-1"
-})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    left: 0;\n\n    height: 100%;\n    width: 100%;\n\n    img {\n        height: 100%;\n    }\n"], ["\n    position: absolute;\n    top: 0;\n    left: 0;\n\n    height: 100%;\n    width: 100%;\n\n    img {\n        height: 100%;\n    }\n"])));
-var AnimationImage = styled.img.withConfig({
-  displayName: "HeaderKenBurns__AnimationImage",
-  componentId: "sc-1hmc5d0-2"
-})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n\n    object-fit: cover;\n    object-position: center;\n\n    transition-property: opacity, transform;\n    transition-duration: ", ";\n    transition-delay: ", ";\n\n    opacity: ", ";\n    transform: scale(", ")\n        rotate(", "deg);\n    transform-origin: ", ";\n\n    will-change: transform, opacity;\n"], ["\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n\n    object-fit: cover;\n    object-position: center;\n\n    transition-property: opacity, transform;\n    transition-duration: ", ";\n    transition-delay: ", ";\n\n    opacity: ", ";\n    transform: scale(", ")\n        rotate(", "deg);\n    transform-origin: ", ";\n\n    will-change: transform, opacity;\n"])), function (_a) {
-  var scale = _a.scale;
-  return "2s, ".concat(scale === 1 ? '0s' : '13s');
-}, function (_a) {
-  var scale = _a.scale;
-  return "".concat(scale === 1 ? '1s' : '0s', ", ").concat(scale === 1 ? '3s' : '0s');
-}, function (_a) {
-  var opacity = _a.opacity;
-  return opacity && opacity;
-}, function (_a) {
-  var scale = _a.scale;
-  return scale || 1;
-}, function (_a) {
-  var scale = _a.scale;
-  return scale !== 1 ? 0.04 : 0;
-}, function (_a) {
-  var zoomPoint = _a.zoomPoint;
-  return zoomPoint ? "".concat(zoomPoint[0] * 100, "% ").concat(zoomPoint[1] * 100, "%") : 'center';
-});
-
-var AnimationImages = function (_a) {
-  var _b = _a.zoom,
-      zoom = _b === void 0 ? 1.08 : _b,
-      _c = _a.zoomPoint,
-      zoomPoint = _c === void 0 ? [0.5, 0.5] : _c,
-      _d = _a.interval,
-      interval = _d === void 0 ? 10000 : _d,
-      images = _a.images,
-      onChange = _a.onChange;
-  var intervalRef = useRef();
-  var initialTimeoutRef = useRef();
-
-  var _e = useState(-1),
-      activeImg = _e[0],
-      setActiveImg = _e[1];
-
-  useEffect(function () {
-    var changeImage = function () {
-      setActiveImg(function (prev) {
-        return (prev + 1) % images.length;
-      });
-    }; // changeImage();
-
-
-    initialTimeoutRef.current = window.setTimeout(changeImage, 200);
-    if (intervalRef.current) window.clearInterval(intervalRef.current);
-    intervalRef.current = window.setInterval(changeImage, interval);
-    return function () {
-      if (initialTimeoutRef.current) window.clearTimeout(initialTimeoutRef.current);
-      if (intervalRef.current) window.clearInterval(intervalRef.current);
-    };
-  }, [images, interval]);
-  useEffect(function () {
-    if (activeImg !== -1) onChange && onChange(activeImg); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeImg]);
-  return React__default.createElement(React__default.Fragment, null, images.map(function (img, i) {
-    var imgZoom = 1;
-    var imgZoomPoint = zoomPoint;
-
-    if (i === activeImg) {
-      imgZoom = img.zoom !== undefined ? img.zoom : zoom;
-    }
-
-    if (img.zoomPoint) {
-      imgZoomPoint = getValidZoomPoint(img.zoomPoint);
-    }
-
-    return React__default.createElement(AnimationImage, {
-      key: i,
-      style: {
-        zIndex: i === activeImg ? 1 : 0
-      },
-      src: img.image,
-      scale: imgZoom,
-      opacity: i === activeImg ? 1 : 0,
-      zoomPoint: imgZoomPoint,
-      alt: img.alt || ''
-    });
-  }));
-};
-
-var preloadImages = function (images) {
-  var loadedImages = images.map(function (req) {
-    return new Promise(function (resolve) {
-      var img = new window.Image();
-      img.src = req.image;
-
-      img.onload = function () {
-        return resolve(req);
-      };
-    });
-  });
-  return loadedImages;
-};
-
-var getValidZoomPoint = function (point) {
-  return [clampValue(point[0], 0, 1), clampValue(point[1], 0, 1)];
-};
-
-var HeaderKenBurns = function (_a) {
-  var images = _a.images,
-      _b = _a.zoom,
-      zoom = _b === void 0 ? 1.08 : _b,
-      _c = _a.zoomPoint,
-      zoomPoint = _c === void 0 ? [0.5, 0.5] : _c,
-      _d = _a.interval,
-      interval = _d === void 0 ? 10000 : _d,
-      onImageChange = _a.onImageChange,
-      className = _a.className,
-      children = _a.children;
-  var mqs = ['small', 'medium', 'large', 'xlarge'];
-  var currentMq = useMediaQuery(mqs);
-
-  var _e = useState({
-    small: [],
-    medium: [],
-    large: [],
-    xlarge: []
-  }),
-      loadedImages = _e[0],
-      setLoadedImages = _e[1];
-
-  useEffect(function () {
-    if (currentMq) {
-      var loadedForMq = loadedImages[currentMq];
-
-      if (loadedForMq.length < images.length && images.length >= 2) {
-        var requestedImages = images.map(function (img, i) {
-          return {
-            id: i,
-            image: img[currentMq],
-            zoom: img.zoom || zoom,
-            zoomPoint: img.zoomPoint || zoomPoint,
-            alt: img.alt
-          };
-        });
-
-        var resolve = function (imagePromises) {
-          return __awaiter(void 0, void 0, void 0, function () {
-            var _loop_1, _i, imagePromises_1, promise;
-
-            return __generator(this, function (_a) {
-              switch (_a.label) {
-                case 0:
-                  _loop_1 = function (promise) {
-                    var loadedImg;
-                    return __generator(this, function (_b) {
-                      switch (_b.label) {
-                        case 0:
-                          return [4
-                          /*yield*/
-                          , promise];
-
-                        case 1:
-                          loadedImg = _b.sent();
-                          setLoadedImages(function (prev) {
-                            var _a; // check if image id already exists in array
-
-
-                            if (!prev[currentMq].find(function (e) {
-                              return e.id === loadedImg.id;
-                            })) {
-                              return __assign(__assign({}, prev), (_a = {}, _a[currentMq] = __spreadArray(__spreadArray([], prev[currentMq], true), [loadedImg], false), _a));
-                            } else return prev;
-                          });
-                          return [2
-                          /*return*/
-                          ];
-                      }
-                    });
-                  };
-
-                  _i = 0, imagePromises_1 = imagePromises;
-                  _a.label = 1;
-
-                case 1:
-                  if (!(_i < imagePromises_1.length)) return [3
-                  /*break*/
-                  , 4];
-                  promise = imagePromises_1[_i];
-                  return [5
-                  /*yield**/
-                  , _loop_1(promise)];
-
-                case 2:
-                  _a.sent();
-
-                  _a.label = 3;
-
-                case 3:
-                  _i++;
-                  return [3
-                  /*break*/
-                  , 1];
-
-                case 4:
-                  return [2
-                  /*return*/
-                  ];
-              }
-            });
-          });
-        };
-
-        resolve(preloadImages(requestedImages));
-      }
-    }
-  }, [currentMq, images, loadedImages, zoom, zoomPoint]);
-  return React__default.createElement(AnimationContainer, {
-    className: className
-  }, React__default.createElement(PosterImage, __assign({}, images[0], {
-    coverSpace: true,
-    ratios: undefined
-  })), currentMq && loadedImages[currentMq].length >= images.length && React__default.createElement(AnimationImages, {
-    zoom: zoom,
-    zoomPoint: getValidZoomPoint(zoomPoint),
-    interval: interval,
-    images: loadedImages[currentMq],
-    onChange: function (id) {
-      return images[id] && onImageChange && onImageChange(images[id]);
-    }
-  }), children);
-};
-var templateObject_1$3, templateObject_2$3, templateObject_3$2;
-
-var PosterView$1 = styled.div.withConfig({
-  displayName: "HeaderPoster__PosterView",
-  componentId: "sc-9zhj-0"
-})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n    position: relative;\n    width: 100%;\n    height: 100%;\n"], ["\n    position: relative;\n    width: 100%;\n    height: 100%;\n"])));
-var BgImage = styled(Image).withConfig({
-  displayName: "HeaderPoster__BgImage",
-  componentId: "sc-9zhj-1"
-})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n    height: 100%;\n\n    img {\n        height: 100%;\n        object-position: ", ";\n    }\n"], ["\n    height: 100%;\n\n    img {\n        height: 100%;\n        object-position: ", ";\n    }\n"])), function (_a) {
-  var focus = _a.focus;
-  return "".concat((focus === null || focus === void 0 ? void 0 : focus[0]) || 'center', " ").concat((focus === null || focus === void 0 ? void 0 : focus[1]) || 'center');
-});
-
-var HeaderPoster = function (_a) {
-  var isInverted = _a.isInverted,
-      bgImage = _a.bgImage,
-      focus = _a.focus,
-      className = _a.className,
-      children = _a.children;
-  return React__default.createElement(PosterView$1, {
-    className: className
-  }, bgImage && React__default.createElement(BgImage, __assign({}, bgImage, {
-    coverSpace: true,
-    ratios: undefined,
-    isInverted: isInverted,
-    focus: focus
-  })), children);
-};
-var templateObject_1$2, templateObject_2$2;
-
-var PosterView = styled.div.withConfig({
-  displayName: "HeaderVideo__PosterView",
-  componentId: "sc-i0iu8j-0"
-})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    position: relative;\n    width: 100%;\n    height: 100%;\n"], ["\n    position: relative;\n    width: 100%;\n    height: 100%;\n"])));
-var PlaceholderImg = styled(Image).withConfig({
-  displayName: "HeaderVideo__PlaceholderImg",
-  componentId: "sc-i0iu8j-1"
-})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n    position: relative;\n    height: 100%;\n\n    img {\n        object-position: ", ";\n\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        height: 100%;\n        z-index: 0;\n    }\n\n    margin: 0 auto;\n\n    @media ", " {\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-end;\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        padding: ", "px;\n        z-index: 2;\n\n        & > * {\n            margin-top: ", "px;\n            max-width: 880px;\n        }\n    }\n"], ["\n    position: relative;\n    height: 100%;\n\n    img {\n        object-position: ", ";\n\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        height: 100%;\n        z-index: 0;\n    }\n\n    margin: 0 auto;\n\n    @media ", " {\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-end;\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        padding: ", "px;\n        z-index: 2;\n\n        & > * {\n            margin-top: ", "px;\n            max-width: 880px;\n        }\n    }\n"])), function (_a) {
-  var focus = _a.focus;
-  return "".concat((focus === null || focus === void 0 ? void 0 : focus[0]) || 'center', " ").concat((focus === null || focus === void 0 ? void 0 : focus[1]) || 'center');
-}, mq.medium, spacings.spacer * 2, spacings.spacer);
-var AutoplayVideo = styled.video.withConfig({
-  displayName: "HeaderVideo__AutoplayVideo",
-  componentId: "sc-i0iu8j-2"
-})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n    object-position: ", ";\n    opacity: ", ";\n    pointer-events: none;\n    z-index: 1;\n\n    transition: opacity 0.3s ease-in-out;\n"], ["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n    object-position: ", ";\n    opacity: ", ";\n    pointer-events: none;\n    z-index: 1;\n\n    transition: opacity 0.3s ease-in-out;\n"])), function (_a) {
-  var focus = _a.focus;
-  return "".concat((focus === null || focus === void 0 ? void 0 : focus[0]) || 'center', " ").concat((focus === null || focus === void 0 ? void 0 : focus[1]) || 'center');
-}, function (_a) {
-  var isVisible = _a.isVisible;
-  return isVisible ? 1 : 0;
-});
-
-var HeaderVideo = function (_a) {
-  var isInverted = _a.isInverted,
-      _b = _a.loadOnMobile,
-      loadOnMobile = _b === void 0 ? true : _b,
-      placeholderImg = _a.placeholderImg,
-      focus = _a.focus,
-      videoUrl = _a.videoUrl,
-      className = _a.className,
-      children = _a.children;
-  var videoRef = useRef(null);
-  var viewRef = useRef(null);
-
-  var _c = useState(!(placeholderImg === null || placeholderImg === void 0 ? void 0 : placeholderImg.small) || false),
-      isLoaded = _c[0],
-      setLoaded = _c[1];
-
-  var isObserverSupported = useObserverSupport();
-  var currentMq = useMediaQuery(['small', 'medium', 'semilarge', 'large', 'xlarge']);
-  var isMobile = currentMq === undefined || currentMq === 'small';
-  var isVideoAllowed = loadOnMobile || !isMobile;
-
-  var _d = useState(false),
-      isVideoActive = _d[0],
-      setVideoActive = _d[1];
-
-  useEffect(function () {
-    if (!isVideoAllowed) setLoaded(false);
-  }, [isMobile, isVideoAllowed, loadOnMobile]);
-  useEffect(function () {
-    if (!videoRef.current) return;
-
-    if (videoRef.current.readyState > 3) {
-      setLoaded(true);
-    }
-  }, []);
-  useUpdateEffect(function () {
-    if (!isVideoAllowed || !videoUrl || !viewRef.current) return;
-
-    if (!isObserverSupported) {
-      setVideoActive(true);
-      return;
-    }
-
-    var observer = new IntersectionObserver(function (entries, observer) {
-      var entry = entries[0];
-
-      if (entry.isIntersecting) {
-        observer.unobserve(entry.target);
-        setVideoActive(true);
-      }
-    }, {
-      rootMargin: '200px 0px 200px 0px'
-    });
-    var viewEl = viewRef.current;
-    observer.observe(viewEl);
-    return function () {
-      if (viewEl) observer.unobserve(viewEl);
-    };
-  }, [isObserverSupported, isVideoAllowed]);
-  return React__default.createElement(PosterView, {
-    ref: viewRef,
-    className: className
-  }, (placeholderImg === null || placeholderImg === void 0 ? void 0 : placeholderImg.small) && !isLoaded && React__default.createElement(PlaceholderImg, __assign({}, placeholderImg, {
-    coverSpace: true,
-    ratios: undefined,
-    isInverted: isInverted,
-    focus: focus
-  })), videoUrl && isVideoAllowed && React__default.createElement(AutoplayVideo, {
-    ref: videoRef,
-    isVisible: isLoaded,
-    src: isVideoActive ? videoUrl : undefined,
-    muted: true,
-    autoPlay: true,
-    loop: true,
-    playsInline: true,
-    onCanPlayThrough: function () {
-      setLoaded(true);
-    },
-    focus: focus
-  }), children);
-};
-var templateObject_1$1, templateObject_2$1, templateObject_3$1;
-
-var AspectContainer = styled.div.withConfig({
-  displayName: "VideoBlock__AspectContainer",
-  componentId: "sc-160aafd-0"
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    position: relative;\n    border-radius: ", ";\n    overflow: hidden;\n\n    aspect-ratio: ", ";\n    width: ", ";\n    max-width: 100%;\n\n    background: ", ";\n    object-position: center;\n\n    @supports not (aspect-ratio: auto) {\n        height: ", ";\n        padding-top: ", ";\n    }\n\n    @media ", " {\n        aspect-ratio: ", ";\n\n        @supports not (aspect-ratio: auto) {\n            padding-top: ", ";\n        }\n    }\n\n    @media ", " {\n        aspect-ratio: ", ";\n\n        @supports not (aspect-ratio: auto) {\n            padding-top: ", ";\n        }\n    }\n\n    @media ", " {\n        aspect-ratio: ", ";\n\n        @supports not (aspect-ratio: auto) {\n            padding-top: ", ";\n        }\n    }\n\n    @media ", " {\n        aspect-ratio: ", ";\n\n        @supports not (aspect-ratio: auto) {\n            padding-top: ", ";\n        }\n    }\n\n    ", "\n"], ["\n    position: relative;\n    border-radius: ", ";\n    overflow: hidden;\n\n    aspect-ratio: ", ";\n    width: ", ";\n    max-width: 100%;\n\n    background: ", ";\n    object-position: center;\n\n    @supports not (aspect-ratio: auto) {\n        height: ", ";\n        padding-top: ", ";\n    }\n\n    @media ", " {\n        aspect-ratio: ", ";\n\n        @supports not (aspect-ratio: auto) {\n            padding-top: ", ";\n        }\n    }\n\n    @media ", " {\n        aspect-ratio: ", ";\n\n        @supports not (aspect-ratio: auto) {\n            padding-top: ", ";\n        }\n    }\n\n    @media ", " {\n        aspect-ratio: ", ";\n\n        @supports not (aspect-ratio: auto) {\n            padding-top: ", ";\n        }\n    }\n\n    @media ", " {\n        aspect-ratio: ", ";\n\n        @supports not (aspect-ratio: auto) {\n            padding-top: ", ";\n        }\n    }\n\n    ", "\n"])), function (_a) {
-  var theme = _a.theme;
-  return getGlobals(theme).sections.edgeRadius;
-}, function (_a) {
-  var ratios = _a.ratios;
-  return ratios === null || ratios === void 0 ? void 0 : ratios.small;
-}, function (_a) {
-  var ratios = _a.ratios;
-  return (ratios === null || ratios === void 0 ? void 0 : ratios.small) && '100%';
-}, function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return isInverted ? getGlobals(theme).sections.imagePlaceholderBg.inverted : getGlobals(theme).sections.imagePlaceholderBg.default;
-}, function (_a) {
-  var ratios = _a.ratios;
-  return (ratios === null || ratios === void 0 ? void 0 : ratios.small) && 0;
-}, function (_a) {
-  var ratios = _a.ratios;
-  return (ratios === null || ratios === void 0 ? void 0 : ratios.small) && "calc(100% / ".concat(ratios === null || ratios === void 0 ? void 0 : ratios.small, ")");
-}, mq.medium, function (_a) {
-  var ratios = _a.ratios;
-  return ratios === null || ratios === void 0 ? void 0 : ratios.medium;
-}, function (_a) {
-  var ratios = _a.ratios;
-  return (ratios === null || ratios === void 0 ? void 0 : ratios.medium) && "calc(100% / ".concat(ratios === null || ratios === void 0 ? void 0 : ratios.medium, ")");
-}, mq.semilarge, function (_a) {
-  var ratios = _a.ratios;
-  return ratios === null || ratios === void 0 ? void 0 : ratios.semilarge;
-}, function (_a) {
-  var ratios = _a.ratios;
-  return (ratios === null || ratios === void 0 ? void 0 : ratios.semilarge) && "calc(100% / ".concat(ratios === null || ratios === void 0 ? void 0 : ratios.semilarge, ")");
-}, mq.large, function (_a) {
-  var ratios = _a.ratios;
-  return ratios === null || ratios === void 0 ? void 0 : ratios.large;
-}, function (_a) {
-  var ratios = _a.ratios;
-  return (ratios === null || ratios === void 0 ? void 0 : ratios.large) && "calc(100% / ".concat(ratios === null || ratios === void 0 ? void 0 : ratios.large, ")");
-}, mq.xlarge, function (_a) {
-  var ratios = _a.ratios;
-  return ratios === null || ratios === void 0 ? void 0 : ratios.xlarge;
-}, function (_a) {
-  var ratios = _a.ratios;
-  return (ratios === null || ratios === void 0 ? void 0 : ratios.xlarge) && "calc(100% / ".concat(ratios === null || ratios === void 0 ? void 0 : ratios.xlarge, ")");
-}, function (_a) {
-  var ratios = _a.ratios;
-  return ratios && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            video {\n                height: 100%;\n                width: 100%;\n                object-fit: cover;\n\n                @supports not (aspect-ratio: auto) {\n                    position: absolute;\n                    top: 0;\n                    left: 0;\n                    right: 0;\n                }\n            }\n        "], ["\n            video {\n                height: 100%;\n                width: 100%;\n                object-fit: cover;\n\n                @supports not (aspect-ratio: auto) {\n                    position: absolute;\n                    top: 0;\n                    left: 0;\n                    right: 0;\n                }\n            }\n        "])));
-});
-var Video = styled.video.withConfig({
-  displayName: "VideoBlock__Video",
-  componentId: "sc-160aafd-1"
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
-var VideoBlock = forwardRef(function (_a, ref) {
-  var urls = _a.urls,
-      ratios = _a.ratios,
-      isInverted = _a.isInverted,
-      _b = _a.muted,
-      muted = _b === void 0 ? false : _b,
-      _c = _a.autoPlay,
-      autoPlay = _c === void 0 ? false : _c,
-      _d = _a.loop,
-      loop = _d === void 0 ? false : _d,
-      _e = _a.controls,
-      controls = _e === void 0 ? false : _e,
-      _f = _a.playsInline,
-      playsInline = _f === void 0 ? true : _f,
-      onCanPlayThrough = _a.onCanPlayThrough,
-      className = _a.className;
-  var videoRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return videoRef.current;
-  });
-  useEffect(function () {
-    if (videoRef.current && videoRef.current.readyState > 3) {
-      onCanPlayThrough === null || onCanPlayThrough === void 0 ? void 0 : onCanPlayThrough();
-    }
-  }, [onCanPlayThrough]);
-  return React__default.createElement(AspectContainer, {
-    ratios: ratios,
-    isInverted: isInverted,
-    className: className
-  }, React__default.createElement(Video, {
-    ref: videoRef,
-    muted: muted,
-    autoPlay: autoPlay,
-    loop: loop,
-    controls: controls,
-    onCanPlayThrough: onCanPlayThrough,
-    playsInline: playsInline
-  }, urls === null || urls === void 0 ? void 0 : urls.map(function (url, i) {
-    return React__default.createElement("source", {
-      src: url,
-      key: i
-    });
-  })));
-});
-VideoBlock.displayName = 'VideoBlock';
-var templateObject_1, templateObject_2, templateObject_3;
-
-export { HeaderPoster as H, IntroBlock as I, VideoBlock as V, HeaderKenBurns as a, HeaderVideo as b };
-//# sourceMappingURL=VideoBlock-b3f4ae27.js.map