@blateral/b.kit 2.4.2 → 2.5.0-beta.1.0

package/esm/headers.js

@@ -0,0 +1,639 @@
+import { a as __makeTemplateObject, _ as __assign, h as __awaiter, i as __generator, e as __spreadArray } from './ClockFilled-62515a8f.js';
+import React__default, { useState, useEffect, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { m as mq, s as spacings, w as withRange } from './styles-da982973.js';
+import { w as withLibTheme, u as useLibTheme } from './LibThemeProvider-52555ac9.js';
+import { u as useMediaQuery } from './useMediaQuery-b08dda62.js';
+import { I as Image } from './Image-dc2b33c1.js';
+import { c as clampValue } from './clamp-12d37b65.js';
+import { A as Actions } from './Actions-21372b3a.js';
+import { u as useObserverSupport } from './useObserverSupport-02bce7f5.js';
+import { u as useUpdateEffect } from './useUpdateEffect-824c0c84.js';
+import { H as Heading, C as Copy } from './Copy-a28aeb61.js';
+import { S as Section, m as mapToBgMode } from './Section-b76e6909.js';
+import { g as generateNavbarIdent, a as getFullNavbarHeights } from './Navigation-3ded0cfc.js';
+import 'react-dom/server';
+import './concat-ab3c66f2.js';
+import './arrays-65b644ef.js';
+import './Link-3fd9c9b8.js';
+import './navigation-ada7fd84.js';
+import './LanguageSwitcher-3fa20077.js';
+
+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 Poster = function (_a) {
+  var isInverted = _a.isInverted,
+      videoUrl = _a.videoUrl,
+      images = _a.images,
+      focus = _a.focus,
+      kenBurnsZoom = _a.kenBurnsZoom,
+      kenBurnsZoomPoint = _a.kenBurnsZoomPoint,
+      kenBurnsInterval = _a.kenBurnsInterval,
+      onImageChange = _a.onImageChange,
+      className = _a.className,
+      children = _a.children;
+
+  switch (true) {
+    case !!videoUrl:
+      {
+        return React__default.createElement(HeaderVideo, {
+          isInverted: isInverted,
+          videoUrl: videoUrl,
+          focus: focus,
+          placeholderImg: images === null || images === void 0 ? void 0 : images[0],
+          className: className
+        }, children);
+      }
+
+    case images && images.length > 1:
+      {
+        return React__default.createElement(HeaderKenBurns, {
+          images: images || [],
+          zoom: kenBurnsZoom,
+          zoomPoint: kenBurnsZoomPoint,
+          interval: kenBurnsInterval,
+          onImageChange: onImageChange,
+          className: className
+        }, children);
+      }
+    // single image
+
+    case images && images.length === 1:
+      {
+        return React__default.createElement(HeaderPoster, {
+          isInverted: isInverted,
+          bgImage: images === null || images === void 0 ? void 0 : images[0],
+          focus: focus,
+          className: className
+        }, children);
+      }
+
+    default:
+      {
+        return React__default.createElement("div", null, children);
+      }
+  }
+};
+
+var genHeightStyles = function (isFull) {
+  return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    // Doing some crazy shit to calculate curent navbar height in CSS\n    ", "\n"], ["\n    // Doing some crazy shit to calculate curent navbar height in CSS\n    ", "\n"])), function (_a) {
+    var theme = _a.theme; // navbar main only
+
+    var mainIdent = generateNavbarIdent({
+      pageFlow: 'beforeContent',
+      hasMain: true
+    }); // navbar main and top
+
+    var mainTopIdent = generateNavbarIdent({
+      pageFlow: 'beforeContent',
+      hasMain: true,
+      hasTop: true
+    }); // navbar main and bottom
+
+    var mainBottomIdent = generateNavbarIdent({
+      pageFlow: 'beforeContent',
+      hasMain: true,
+      hasBottom: true
+    }); // full navbar with all bars
+
+    var fullIdent = generateNavbarIdent({
+      pageFlow: 'beforeContent',
+      hasTop: true,
+      hasMain: true,
+      hasBottom: true
+    });
+    var navMainHeight = getFullNavbarHeights(theme, mainIdent).large;
+    var navMainTopHeight = getFullNavbarHeights(theme, mainTopIdent).large;
+    var navMainBottomHeight = getFullNavbarHeights(theme, mainBottomIdent).large;
+    var navFullHeight = getFullNavbarHeights(theme, fullIdent).large;
+
+    var mapToSelector = function (idents) {
+      return idents.map(function (id) {
+        return "[data-navbar-ident*='".concat(id, "']");
+      }).join('');
+    };
+
+    var refHeight = isFull ? '100vh' : '80vh';
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            & > ", " {\n                min-height: 500px;\n                height: ", ";\n            }\n\n            // with main navbar element\n            header", " + & {\n                & > ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with main and top navbar elements\n            header", " + & {\n                & > ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with main and bottom navbar elements\n            header", " + & {\n                & > ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with all navbar elements\n            header", " + & {\n                & > ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            @media ", " {\n                // with main navbar element\n                header", " + & {\n                    & > ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n\n                // with main and top navbar elements\n                header", " + & {\n                    & > ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n\n                // with main and bottom navbar elements\n                header", " + & {\n                    & > ", " {\n                        height: calc(\n                            ", " - ", "px\n                        );\n                    }\n                }\n\n                // with all navbar elements\n                header", " + & {\n                    & > ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n            }\n        "], ["\n            & > ", " {\n                min-height: 500px;\n                height: ", ";\n            }\n\n            // with main navbar element\n            header", " + & {\n                & > ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with main and top navbar elements\n            header", " + & {\n                & > ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with main and bottom navbar elements\n            header", " + & {\n                & > ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            // with all navbar elements\n            header", " + & {\n                & > ", " {\n                    height: calc(", " - ", "px);\n                }\n            }\n\n            @media ", " {\n                // with main navbar element\n                header", " + & {\n                    & > ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n\n                // with main and top navbar elements\n                header", " + & {\n                    & > ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n\n                // with main and bottom navbar elements\n                header", " + & {\n                    & > ", " {\n                        height: calc(\n                            ", " - ", "px\n                        );\n                    }\n                }\n\n                // with all navbar elements\n                header", " + & {\n                    & > ", " {\n                        height: calc(", " - ", "px);\n                    }\n                }\n            }\n        "])), StyledPoster, refHeight, mapToSelector(mainIdent.split('-')), StyledPoster, refHeight, navMainHeight[0], mapToSelector(mainTopIdent.split('-')), StyledPoster, refHeight, navMainTopHeight[0], mapToSelector(mainBottomIdent.split('-')), StyledPoster, refHeight, navMainBottomHeight[0], mapToSelector(fullIdent.split('-')), StyledPoster, refHeight, navFullHeight[0], mq.semilarge, mapToSelector(mainIdent.split('-')), StyledPoster, refHeight, navMainHeight[1], mapToSelector(mainTopIdent.split('-')), StyledPoster, refHeight, navMainTopHeight[1], mapToSelector(mainBottomIdent.split('-')), StyledPoster, refHeight, navMainBottomHeight[1], mapToSelector(fullIdent.split('-')), StyledPoster, refHeight, navFullHeight[1]);
+  });
+};
+
+var HeaderSection = styled(Section).withConfig({
+  displayName: "Header__HeaderSection",
+  componentId: "sc-12uexfr-0"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: relative;\n    ", "\n\n    header + & {\n        ", "\n        ", "\n    }\n"], ["\n    position: relative;\n    ", "\n\n    header + & {\n        ", "\n        ", "\n    }\n"])), genHeightStyles(true), withRange([0], 'padding-top'), withRange([0], 'margin-top'));
+var HeaderSectionSmall = styled(Section).withConfig({
+  displayName: "Header__HeaderSectionSmall",
+  componentId: "sc-12uexfr-1"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    position: relative;\n    ", "\n\n    header + & {\n        ", "\n        ", "\n    }\n"], ["\n    position: relative;\n    ", "\n\n    header + & {\n        ", "\n        ", "\n    }\n"])), genHeightStyles(false), withRange([0], 'padding-top'), withRange([0], 'margin-top'));
+var StyledPoster = styled(Poster).withConfig({
+  displayName: "Header__StyledPoster",
+  componentId: "sc-12uexfr-2"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    position: relative;\n    height: 100vh;\n    max-height: 1300px;\n    max-width: ", "px;\n    margin: 0 auto;\n"], ["\n    position: relative;\n    height: 100vh;\n    max-height: 1300px;\n    max-width: ", "px;\n    margin: 0 auto;\n"])), spacings.wrapperLarge);
+var Overlay = styled.div.withConfig({
+  displayName: "Header__Overlay",
+  componentId: "sc-12uexfr-3"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: ", ";\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background: ", ";\n    z-index: 2;\n\n    @media ", " {\n        display: block;\n    }\n"], ["\n    display: ", ";\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background: ", ";\n    z-index: 2;\n\n    @media ", " {\n        display: block;\n    }\n"])), function (_a) {
+  var textOnImage = _a.textOnImage;
+  return textOnImage ? 'block' : 'none';
+}, function (_a) {
+  var bgValue = _a.bgValue;
+  return bgValue && bgValue;
+}, mq.medium);
+var Content = styled.div.withConfig({
+  displayName: "Header__Content",
+  componentId: "sc-12uexfr-4"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: none;\n    max-width: ", "px;\n    margin: 0 auto;\n\n    ", "\n\n    @media ", " {\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-end;\n        align-items: ", ";\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    display: none;\n    max-width: ", "px;\n    margin: 0 auto;\n\n    ", "\n\n    @media ", " {\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-end;\n        align-items: ", ";\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"])), spacings.wrapper, function (_a) {
+  var textOnImage = _a.textOnImage,
+      isCentered = _a.isCentered;
+  return textOnImage && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n            display: flex;\n            flex-direction: column;\n            justify-content: flex-end;\n            align-items: ", ";\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            display: flex;\n            flex-direction: column;\n            justify-content: flex-end;\n            align-items: ", ";\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        "])), isCentered && 'center', spacings.spacer, spacings.spacer);
+}, mq.medium, function (_a) {
+  var isCentered = _a.isCentered;
+  return isCentered && 'center';
+}, spacings.spacer * 2, spacings.spacer);
+var ContentMobile = styled.div.withConfig({
+  displayName: "Header__ContentMobile",
+  componentId: "sc-12uexfr-5"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    padding: ", "px ", "px;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        display: none;\n    }\n"], ["\n    padding: ", "px ", "px;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        display: none;\n    }\n"])), spacings.spacer, spacings.nudge * 2, spacings.spacer, mq.medium);
+var Title = styled(Heading).withConfig({
+  displayName: "Header__Title",
+  componentId: "sc-12uexfr-6"
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    text-align: ", ";\n\n    @media ", " {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 3; /* number of lines to show */\n        line-clamp: 3;\n        -webkit-box-orient: vertical;\n    }\n"], ["\n    text-align: ", ";\n\n    @media ", " {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 3; /* number of lines to show */\n        line-clamp: 3;\n        -webkit-box-orient: vertical;\n    }\n"])), function (_a) {
+  var isCentered = _a.isCentered;
+  return isCentered && 'center';
+}, mq.medium);
+var Text = styled(Copy).withConfig({
+  displayName: "Header__Text",
+  componentId: "sc-12uexfr-7"
+})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    text-align: ", ";\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 4; /* number of lines to show */\n    line-clamp: 4;\n    -webkit-box-orient: vertical;\n"], ["\n    text-align: ", ";\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 4; /* number of lines to show */\n    line-clamp: 4;\n    -webkit-box-orient: vertical;\n"])), function (_a) {
+  var isCentered = _a.isCentered;
+  return isCentered && 'center';
+});
+var StyledActions = styled(Actions).withConfig({
+  displayName: "Header__StyledActions",
+  componentId: "sc-12uexfr-8"
+})(templateObject_12 || (templateObject_12 = __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 Header = function (_a) {
+  var anchorId = _a.anchorId,
+      _b = _a.size,
+      size = _b === void 0 ? 'full' : _b,
+      _c = _a.focusPoint,
+      focusPoint = _c === void 0 ? ['center', 'center'] : _c,
+      isCentered = _a.isCentered,
+      title = _a.title,
+      titleAs = _a.titleAs,
+      text = _a.text,
+      primaryAction = _a.primaryAction,
+      secondaryAction = _a.secondaryAction,
+      videoUrl = _a.videoUrl,
+      images = _a.images,
+      customImgOverlay = _a.customImgOverlay,
+      _d = _a.kenBurnsZoom,
+      kenBurnsZoom = _d === void 0 ? 1.08 : _d,
+      _e = _a.kenBurnsZoomPoint,
+      kenBurnsZoomPoint = _e === void 0 ? [0.5, 0.5] : _e,
+      _f = _a.kenBurnsInterval,
+      kenBurnsInterval = _f === void 0 ? 10000 : _f,
+      onImageChange = _a.onImageChange,
+      bgMode = _a.bgMode,
+      textOnImage = _a.textOnImage;
+
+  var _g = useLibTheme(),
+      globals = _g.globals,
+      colors = _g.colors;
+
+  var isInverted = bgMode === 'inverted';
+  var hasContent = title || text || primaryAction || secondaryAction;
+  var overlay = hasContent ? customImgOverlay || globals.sections.imageTextGradient : undefined;
+  var Section = size === 'full' ? HeaderSection : HeaderSectionSmall;
+  return React__default.createElement(Section, {
+    addSeperation: true,
+    anchorId: anchorId,
+    bgColor: isInverted ? colors.sectionBg.dark : bgMode ? colors.sectionBg.medium : colors.sectionBg.light,
+    bgMode: mapToBgMode(bgMode, true)
+  }, React__default.createElement(StyledPoster, {
+    isInverted: isInverted,
+    images: images,
+    videoUrl: videoUrl,
+    kenBurnsInterval: kenBurnsInterval,
+    kenBurnsZoom: kenBurnsZoom,
+    kenBurnsZoomPoint: kenBurnsZoomPoint,
+    onImageChange: onImageChange,
+    focus: focusPoint
+  }, hasContent && React__default.createElement(React__default.Fragment, null, React__default.createElement(Overlay, {
+    bgValue: overlay,
+    textOnImage: textOnImage
+  }), React__default.createElement(Content, {
+    isCentered: isCentered,
+    textOnImage: textOnImage
+  }, title && React__default.createElement(Title, {
+    isInverted: true,
+    size: "heading-1",
+    isCentered: isCentered,
+    renderAs: titleAs,
+    innerHTML: title
+  }), text && React__default.createElement(Text, {
+    isInverted: true,
+    isCentered: isCentered,
+    type: "copy-b",
+    size: "big",
+    innerHTML: text
+  }), (primaryAction || secondaryAction) && React__default.createElement(StyledActions, {
+    isCentered: isCentered,
+    primary: primaryAction && primaryAction(true),
+    secondary: secondaryAction && secondaryAction(true)
+  })))), hasContent && !textOnImage && React__default.createElement(ContentMobile, null, title && React__default.createElement(Title, {
+    size: "heading-1",
+    isCentered: isCentered,
+    renderAs: titleAs,
+    innerHTML: title,
+    isInverted: isInverted
+  }), text && React__default.createElement(Text, {
+    type: "copy-b",
+    size: "big",
+    isCentered: isCentered,
+    innerHTML: text,
+    isInverted: isInverted
+  }), (primaryAction || secondaryAction) && React__default.createElement(StyledActions, {
+    isCentered: isCentered,
+    primary: primaryAction && primaryAction(isInverted),
+    secondary: secondaryAction && secondaryAction(isInverted)
+  })));
+};
+var Header$1 = withLibTheme(Header);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
+
+export { Header$1 as Header, HeaderKenBurns, HeaderPoster, HeaderVideo };
+//# sourceMappingURL=headers.js.map