@blateral/b.kit 2.2.5 → 2.3.0-beta.1.0

package/lib/esm/Bdot-a103eeef.js

@@ -0,0 +1,1141 @@
+import { a as __makeTemplateObject, _ as __assign, f as __awaiter, g as __generator, e as __spreadArray, u as Check } from './ClockFilled-cff5900e.js';
+import * as React from 'react';
+import React__default, { useMemo, useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import styled, { css } from 'styled-components';
+import { s as spacings, m as mq, g as getColors, a as getFonts, c as getGlobals } from './styles-eca3acc8.js';
+import { H as Heading, C as Copy, c as copyStyle } from './Copy-d2be4fb7.js';
+import { u as useLibTheme } from './LibThemeProvider-17012395.js';
+import { A as Actions, S as StatusFormatter } from './Actions-59bdbbf7.js';
+import { I as Image } from './SocialList-385cde53.js';
+import { L as Link } from './Link-42f0b80f.js';
+import { i as isValidArray } from './arrays-65b644ef.js';
+import { u as useMediaQuery } from './useMediaQuery-07eee3f4.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$7 = styled.div.withConfig({
+  displayName: "Title__View",
+  componentId: "sc-1pyc768-0"
+})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n    display: block;\n    text-align: ", ";\n    margin: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    display: block;\n    text-align: ", ";\n    margin: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), function (_a) {
+  var isCentered = _a.isCentered;
+  return isCentered ? 'center' : 'left';
+}, function (_a) {
+  var isCentered = _a.isCentered;
+  return isCentered && '0 auto';
+}, spacings.nudge * 2);
+var SuperTitle = styled(Heading).withConfig({
+  displayName: "Title__SuperTitle",
+  componentId: "sc-1pyc768-1"
+})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n    display: block;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: -webkit-box;\n    -webkit-line-clamp: 2; /* number of lines to show */\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n"], ["\n    display: block;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: -webkit-box;\n    -webkit-line-clamp: 2; /* number of lines to show */\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n"])));
+var MainTitle = styled(Heading).withConfig({
+  displayName: "Title__MainTitle",
+  componentId: "sc-1pyc768-2"
+})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n    display: block;\n\n    ", "\n"], ["\n    display: block;\n\n    ", "\n"])), function (_a) {
+  var maxLines = _a.maxLines;
+  return maxLines && maxLines > 0 && css(templateObject_3$9 || (templateObject_3$9 = __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);
+});
+
+var Title$2 = function (_a) {
+  var _b = _a.colorMode,
+      colorMode = _b === void 0 ? 'default' : _b,
+      superTitle = _a.superTitle,
+      superTitleAs = _a.superTitleAs,
+      title = _a.title,
+      titleAs = _a.titleAs,
+      _c = _a.titleSize,
+      titleSize = _c === void 0 ? 'heading-2' : _c,
+      maxLines = _a.maxLines,
+      _d = _a.isCentered,
+      isCentered = _d === void 0 ? false : _d,
+      titleHyphens = _a.titleHyphens,
+      className = _a.className;
+  var colors = useLibTheme().colors;
+  return React__default.createElement(View$7, {
+    isCentered: isCentered,
+    className: className
+  }, superTitle && React__default.createElement(SuperTitle, {
+    renderAs: superTitleAs || 'div',
+    size: "super",
+    textColor: colorMode === 'onImage' ? colors.text.inverted : undefined,
+    isInverted: colorMode === 'inverted',
+    innerHTML: superTitle
+  }), title && React__default.createElement(MainTitle, {
+    renderAs: titleAs || 'h2',
+    size: titleSize === 'heading-1' ? 'heading-1' : 'heading-2',
+    hyphens: titleHyphens,
+    textColor: colorMode === 'onImage' ? colors.text.inverted : undefined,
+    isInverted: colorMode === 'inverted',
+    innerHTML: title,
+    maxLines: maxLines
+  }));
+};
+var templateObject_1$c, templateObject_2$b, templateObject_3$9, templateObject_4$5;
+
+var View$6 = styled.div.withConfig({
+  displayName: "IntroBlock__View",
+  componentId: "sc-w71lok-0"
+})(templateObject_1$b || (templateObject_1$b = __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$1 = styled.div.withConfig({
+  displayName: "IntroBlock__Content",
+  componentId: "sc-w71lok-1"
+})(templateObject_2$a || (templateObject_2$a = __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$2).withConfig({
+  displayName: "IntroBlock__StyledTitle",
+  componentId: "sc-w71lok-2"
+})(templateObject_3$8 || (templateObject_3$8 = __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$4 || (templateObject_5$4 = __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$4 || (templateObject_4$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$4 || (templateObject_6$4 = __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$3 || (templateObject_7$3 = __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$1 || (templateObject_8$1 = __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$6, {
+    as: renderAs,
+    isCentered: isCentered,
+    className: className
+  }, React__default.createElement(Content$1, 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$b, templateObject_2$a, templateObject_3$8, templateObject_4$4, templateObject_5$4, templateObject_6$4, templateObject_7$3, templateObject_8$1;
+
+var View$5 = styled(Link).withConfig({
+  displayName: "Tag__View",
+  componentId: "sc-1mw8uhi-0"
+})(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n    display: inline-block;\n    border: 1px solid\n        ", ";\n    border-radius: 8px;\n\n    padding: 1px ", "px;\n    max-height: 28px;\n    min-width: 60px;\n    user-select: none;\n\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    text-align: center;\n\n    text-decoration: none;\n\n    ", "\n\n    background: none;\n\n    && {\n        background-color: ", ";\n        color: ", ";\n\n        transition: background-color 0.2s ease-in-out, color 0.1s ease-in-out;\n    }\n\n    cursor: ", ";\n\n    ", "\n\n    &:focus {\n        /* background-color: ", ";\n        color: ", "; */\n        outline: 2px solid\n            ", ";\n        outline-offset: -1px;\n        text-decoration: underline;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        text-decoration: none;\n    }\n"], ["\n    display: inline-block;\n    border: 1px solid\n        ", ";\n    border-radius: 8px;\n\n    padding: 1px ", "px;\n    max-height: 28px;\n    min-width: 60px;\n    user-select: none;\n\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    text-align: center;\n\n    text-decoration: none;\n\n    ", "\n\n    background: none;\n\n    && {\n        background-color: ", ";\n        color: ", ";\n\n        transition: background-color 0.2s ease-in-out, color 0.1s ease-in-out;\n    }\n\n    cursor: ", ";\n\n    ", "\n\n    &:focus {\n        /* background-color: ", ";\n        color: ", "; */\n        outline: 2px solid\n            ", ";\n        outline-offset: -1px;\n        text-decoration: underline;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        text-decoration: none;\n    }\n"])), function (_a) {
+  var isInverted = _a.isInverted;
+  return isInverted ? '#dddddd' : '#444444';
+}, spacings.nudge, copyStyle('copy', 'small'), function (_a) {
+  var isActive = _a.isActive,
+      isInverted = _a.isInverted;
+  return isActive && (isInverted ? '#dddddd' : '#444444');
+}, function (_a) {
+  var isActive = _a.isActive,
+      isInverted = _a.isInverted;
+
+  if (isActive) {
+    return isInverted ? '#444444' : '#ffff';
+  } else {
+    return isInverted ? '#dddddd' : '#444444';
+  }
+}, function (_a) {
+  var isClickable = _a.isClickable;
+  return isClickable ? 'pointer' : 'default';
+}, function (_a) {
+  var isClickable = _a.isClickable,
+      isInverted = _a.isInverted;
+  return isClickable && css(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n            @media (hover: hover) and (pointer: fine) {\n                &&:hover {\n                    background-color: ", ";\n                    color: ", ";\n                }\n            }\n        "], ["\n            @media (hover: hover) and (pointer: fine) {\n                &&:hover {\n                    background-color: ", ";\n                    color: ", ";\n                }\n            }\n        "])), isInverted ? '#dddddd' : '#444444', isInverted ? '#444444' : '#ffff');
+}, function (_a) {
+  var isInverted = _a.isInverted;
+  return isInverted ? '#dddddd' : '#444444';
+}, function (_a) {
+  var isInverted = _a.isInverted;
+  return isInverted ? '#444444' : '#ffff';
+}, function (_a) {
+  var isInverted = _a.isInverted,
+      theme = _a.theme;
+  return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
+});
+
+var Tag = function (_a) {
+  var name = _a.name,
+      link = _a.link,
+      isInverted = _a.isInverted,
+      isActive = _a.isActive,
+      onClick = _a.onClick,
+      className = _a.className,
+      children = _a.children;
+  var tag = (link === null || link === void 0 ? void 0 : link.href) ? 'a' : onClick ? 'button' : 'span';
+  return React__default.createElement(View$5, __assign({
+    as: tag,
+    isInverted: isInverted,
+    isActive: isActive,
+    onClick: onClick,
+    isClickable: !!onClick || !!(link && link.href),
+    className: className
+  }, link), name || children);
+};
+var templateObject_1$a, templateObject_2$9;
+
+var View$4 = styled.div.withConfig({
+  displayName: "EventBlock__View",
+  componentId: "sc-1nnq189-0"
+})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n    text-decoration: none;\n    color: inherit;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        display: flex;\n        justify-content: flex-end;\n        flex-direction: row-reverse;\n\n        & > * + * {\n            margin-top: 0;\n            padding-right: ", "px;\n        }\n    }\n"], ["\n    text-decoration: none;\n    color: inherit;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        display: flex;\n        justify-content: flex-end;\n        flex-direction: row-reverse;\n\n        & > * + * {\n            margin-top: 0;\n            padding-right: ", "px;\n        }\n    }\n"])), spacings.nudge * 3, mq.large, spacings.spacer);
+var ImageContainer = styled.div.withConfig({
+  displayName: "EventBlock__ImageContainer",
+  componentId: "sc-1nnq189-1"
+})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n    flex: 0 1 30%;\n    margin-left: auto;\n"], ["\n    flex: 0 1 30%;\n    margin-left: auto;\n"])));
+var MainContent = styled.div.withConfig({
+  displayName: "EventBlock__MainContent",
+  componentId: "sc-1nnq189-2"
+})(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n    flex: 0 1 70%;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        max-width: 830px;\n    }\n"], ["\n    flex: 0 1 70%;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        max-width: 830px;\n    }\n"])), spacings.nudge * 3, mq.large);
+var TagContainer = styled.div.withConfig({
+  displayName: "EventBlock__TagContainer",
+  componentId: "sc-1nnq189-3"
+})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n    margin-top: -", "px;\n    margin-left: -", "px;\n\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n"], ["\n    margin-top: -", "px;\n    margin-left: -", "px;\n\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n"])), spacings.nudge, spacings.nudge);
+var TitleWrapper = styled.div.withConfig({
+  displayName: "EventBlock__TitleWrapper",
+  componentId: "sc-1nnq189-4"
+})(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge);
+var TagWrapper = styled.div.withConfig({
+  displayName: "EventBlock__TagWrapper",
+  componentId: "sc-1nnq189-5"
+})(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n    padding-top: ", "px;\n    padding-left: ", "px;\n"], ["\n    padding-top: ", "px;\n    padding-left: ", "px;\n"])), spacings.nudge, spacings.nudge);
+var TitleLink = styled(Link).withConfig({
+  displayName: "EventBlock__TitleLink",
+  componentId: "sc-1nnq189-6"
+})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n    display: inline-block;\n    ", "\n\n    color: ", ";\n    text-decoration: none;\n"], ["\n    display: inline-block;\n    ", "\n\n    color: ", ";\n    text-decoration: none;\n"])), copyStyle('copy-b', 'big'), function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getFonts(theme)['copy-b'].big.colorInverted : getFonts(theme)['copy-b'].big.color;
+});
+var Text = styled(Copy).withConfig({
+  displayName: "EventBlock__Text",
+  componentId: "sc-1nnq189-7"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: -webkit-box;\n    -webkit-line-clamp: 4;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n"], ["\n    display: -webkit-box;\n    -webkit-line-clamp: 4;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n"])));
+
+var EventBlock = function (_a) {
+  var customTag = _a.customTag,
+      onTagClick = _a.onTagClick,
+      title = _a.title,
+      image = _a.image,
+      date = _a.date,
+      text = _a.text,
+      link = _a.link,
+      tags = _a.tags,
+      isInverted = _a.isInverted,
+      action = _a.action;
+  var globals = useLibTheme().globals;
+  var publishedAt = '';
+
+  if (date) {
+    var formatter = new StatusFormatter(date.getTime(), '', globals.sections.eventDateFormat(date), globals.sections.eventTimeFormat(date), globals.sections.eventLocaleKey);
+    publishedAt = formatter.getFormattedDate();
+  }
+
+  var handleTagClick = function (tag) {
+    return onTagClick ? function (ev) {
+      ev === null || ev === void 0 ? void 0 : ev.preventDefault();
+      onTagClick(tag);
+    } : undefined;
+  };
+
+  var filteredTags = useMemo(function () {
+    return tags === null || tags === void 0 ? void 0 : tags.filter(function (tag) {
+      return tag.name;
+    });
+  }, [tags]);
+  return React__default.createElement(View$4, null, (image === null || image === void 0 ? void 0 : image.small) && React__default.createElement(ImageContainer, null, React__default.createElement(Image, __assign({}, image, {
+    coverSpace: true,
+    allowEdgeRadius: true,
+    isInverted: isInverted,
+    ratios: {
+      small: {
+        w: 640,
+        h: 320
+      },
+      medium: {
+        w: 752,
+        h: 276
+      },
+      large: {
+        w: 375,
+        h: 250
+      }
+    }
+  }))), React__default.createElement(MainContent, null, isValidArray(filteredTags, false) && React__default.createElement(TagContainer, null, filteredTags.map(function (tag, i) {
+    return tag && React__default.createElement(TagWrapper, {
+      key: 'tag_' + i
+    }, customTag ? customTag({
+      key: 'tag_' + i,
+      name: tag.name || '',
+      isInverted: isInverted,
+      isActive: false,
+      link: tag.link || {},
+      clickHandler: handleTagClick(tag)
+    }) : React__default.createElement(Tag, {
+      isInverted: isInverted,
+      name: tag.name,
+      link: tag.link,
+      onClick: handleTagClick(tag)
+    }));
+  })), React__default.createElement(TitleWrapper, null, date && React__default.createElement(Copy, {
+    isInverted: isInverted,
+    size: "medium",
+    type: "copy"
+  }, publishedAt), title && React__default.createElement(TitleLink, __assign({}, link, {
+    isInverted: isInverted
+  }), title)), text && React__default.createElement(Text, {
+    size: "small",
+    isInverted: isInverted,
+    innerHTML: text
+  }), action && React__default.createElement("div", null, " ", action({
+    isInverted: isInverted
+  }), " ")));
+};
+var templateObject_1$9, templateObject_2$8, templateObject_3$7, templateObject_4$3, templateObject_5$3, templateObject_6$3, templateObject_7$2, templateObject_8;
+
+var View$3 = styled.div.withConfig({
+  displayName: "InfoList__View",
+  componentId: "sc-1bggeo0-0"
+})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject([""], [""])));
+var Container = styled.ul.withConfig({
+  displayName: "InfoList__Container",
+  componentId: "sc-1bggeo0-1"
+})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n\n    margin: 0;\n    padding: 0;\n    margin-left: -", "px;\n    margin-top: -", "px;\n    list-style: none;\n"], ["\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n\n    margin: 0;\n    padding: 0;\n    margin-left: -", "px;\n    margin-top: -", "px;\n    list-style: none;\n"])), spacings.spacer, spacings.nudge * 5);
+var Item = styled.li.withConfig({
+  displayName: "InfoList__Item",
+  componentId: "sc-1bggeo0-2"
+})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n    flex: 1 1 100%;\n    padding-left: ", "px;\n    padding-top: ", "px;\n\n    @media ", " {\n        flex: 1 1 300px;\n    }\n"], ["\n    flex: 1 1 100%;\n    padding-left: ", "px;\n    padding-top: ", "px;\n\n    @media ", " {\n        flex: 1 1 300px;\n    }\n"])), spacings.spacer, spacings.nudge * 5, mq.medium);
+var Title$1 = styled(Copy).withConfig({
+  displayName: "InfoList__Title",
+  componentId: "sc-1bggeo0-3"
+})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n    display: block;\n    margin-bottom: ", "px;\n"], ["\n    display: block;\n    margin-bottom: ", "px;\n"])), spacings.nudge * 3);
+var Infos = styled.ul.withConfig({
+  displayName: "InfoList__Infos",
+  componentId: "sc-1bggeo0-4"
+})(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n    list-style: none;\n    margin: 0;\n    padding: 0;\n"], ["\n    list-style: none;\n    margin: 0;\n    padding: 0;\n"])));
+var Content = styled.li.withConfig({
+  displayName: "InfoList__Content",
+  componentId: "sc-1bggeo0-5"
+})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n    display: -ms-grid;\n    display: grid;\n    margin: 0;\n\n    -ms-grid-columns: min-content 1fr;\n    grid-template-columns: min-content 1fr;\n    -ms-grid-rows: min-content 1fr;\n    grid-auto-rows: min-content 1fr;\n\n    & + & {\n        margin-top: ", "px;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: -ms-grid;\n    display: grid;\n    margin: 0;\n\n    -ms-grid-columns: min-content 1fr;\n    grid-template-columns: min-content 1fr;\n    -ms-grid-rows: min-content 1fr;\n    grid-auto-rows: min-content 1fr;\n\n    & + & {\n        margin-top: ", "px;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge * 2, spacings.nudge * 2);
+var Icon = styled(Copy).withConfig({
+  displayName: "InfoList__Icon",
+  componentId: "sc-1bggeo0-6"
+})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n    height: 20px;\n    width: 20px;\n\n    & > * {\n        height: 20px;\n        width: 20px;\n    }\n"], ["\n    height: 20px;\n    width: 20px;\n\n    & > * {\n        height: 20px;\n        width: 20px;\n    }\n"])));
+
+var InfoList = function (_a) {
+  var isInverted = _a.isInverted,
+      items = _a.items,
+      className = _a.className;
+  return React__default.createElement(View$3, {
+    className: className
+  }, React__default.createElement(Container, null, items === null || items === void 0 ? void 0 : items.map(function (group, i) {
+    var _a;
+
+    var groupItems = ((_a = group === null || group === void 0 ? void 0 : group.items) === null || _a === void 0 ? void 0 : _a.filter(function (item) {
+      return item.text;
+    })) || [];
+    var hasItems = isValidArray(groupItems, false);
+    return React__default.createElement(Item, {
+      key: i
+    }, group.title && React__default.createElement(Title$1, {
+      size: "small",
+      type: "copy-b",
+      renderAs: "span",
+      isInverted: isInverted
+    }, group.title), hasItems && React__default.createElement(Infos, null, groupItems.map(function (info, ii) {
+      return React__default.createElement(Content, {
+        key: ii
+      }, React__default.createElement(Icon, {
+        isInverted: isInverted
+      }, info.icon && info.icon(isInverted)), info.text && React__default.createElement(Copy, {
+        size: "small",
+        isInverted: isInverted,
+        innerHTML: info.text,
+        allowLinkIcons: false
+      }));
+    })));
+  })));
+};
+var templateObject_1$8, templateObject_2$7, templateObject_3$6, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$1;
+
+var AnimationContainer = styled.div.withConfig({
+  displayName: "HeaderKenBurns__AnimationContainer",
+  componentId: "sc-1hmc5d0-0"
+})(templateObject_1$7 || (templateObject_1$7 = __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$6 || (templateObject_2$6 = __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$5 || (templateObject_3$5 = __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$7, templateObject_2$6, templateObject_3$5;
+
+var PosterView$1 = styled.div.withConfig({
+  displayName: "HeaderPoster__PosterView",
+  componentId: "sc-9zhj-0"
+})(templateObject_1$6 || (templateObject_1$6 = __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$5 || (templateObject_2$5 = __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$6, templateObject_2$5;
+
+var PosterView = styled.div.withConfig({
+  displayName: "HeaderVideo__PosterView",
+  componentId: "sc-i0iu8j-0"
+})(templateObject_1$5 || (templateObject_1$5 = __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$4 || (templateObject_2$4 = __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$4 || (templateObject_3$4 = __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$5, templateObject_2$4, templateObject_3$4;
+
+var View$2 = styled.div.withConfig({
+  displayName: "TableBlock__View",
+  componentId: "sc-1n2im8m-0"
+})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n    &:focus {\n        outline: 1px dashed ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"], ["\n    &:focus {\n        outline: 1px dashed ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"])), function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
+});
+var Caption = styled(Copy).withConfig({
+  displayName: "TableBlock__Caption",
+  componentId: "sc-1n2im8m-1"
+})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n    margin-bottom: ", "px;\n    padding: 0 ", "px;\n    text-align: left;\n"], ["\n    margin-bottom: ", "px;\n    padding: 0 ", "px;\n    text-align: left;\n"])), spacings.nudge, spacings.nudge * 2);
+var TableContainer = styled.div.withConfig({
+  displayName: "TableBlock__TableContainer",
+  componentId: "sc-1n2im8m-2"
+})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n    overflow-x: scroll;\n    overflow-y: hidden;\n    white-space: nowrap;\n\n    &:focus {\n        outline: none;\n        border: 1px solid ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        border: none;\n    }\n\n    &::-webkit-scrollbar {\n        display: none;\n        scrollbar-width: none;\n    }\n"], ["\n    overflow-x: scroll;\n    overflow-y: hidden;\n    white-space: nowrap;\n\n    &:focus {\n        outline: none;\n        border: 1px solid ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        border: none;\n    }\n\n    &::-webkit-scrollbar {\n        display: none;\n        scrollbar-width: none;\n    }\n"])), function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
+});
+var TableBody = styled.table.withConfig({
+  displayName: "TableBlock__TableBody",
+  componentId: "sc-1n2im8m-3"
+})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n    width: 100%;\n    max-width: 100%;\n\n    border-collapse: separate;\n    border-spacing: 0 ", "px;\n\n    padding: 0 ", "px;\n"], ["\n    width: 100%;\n    max-width: 100%;\n\n    border-collapse: separate;\n    border-spacing: 0 ", "px;\n\n    padding: 0 ", "px;\n"])), spacings.nudge * 0.5, spacings.nudge * 2);
+var TableHead = styled(Copy).withConfig({
+  displayName: "TableBlock__TableHead",
+  componentId: "sc-1n2im8m-4"
+})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n    text-align: left;\n    color: ", ";\n    background-color: ", ";\n\n    padding: 0 ", "px;\n    height: 56px;\n    box-sizing: content-box;\n\n    :last-child {\n        padding-right: ", "px;\n        text-align: ", ";\n    }\n"], ["\n    text-align: left;\n    color: ", ";\n    background-color: ", ";\n\n    padding: 0 ", "px;\n    height: 56px;\n    box-sizing: content-box;\n\n    :last-child {\n        padding-right: ", "px;\n        text-align: ", ";\n    }\n"])), function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).text.inverted : getColors(theme).text.default;
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).elementBg.dark : getColors(theme).elementBg.medium;
+}, spacings.nudge * 3, spacings.spacer * 2.5, function (_a) {
+  var alignRight = _a.alignRight;
+  return alignRight ? 'right' : 'left';
+});
+var TableData = styled(Copy).withConfig({
+  displayName: "TableBlock__TableData",
+  componentId: "sc-1n2im8m-5"
+})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n    padding: 0 ", "px;\n    height: 56px;\n    box-sizing: content-box;\n\n    background-color: ", ";\n\n    :last-child {\n        text-align: ", ";\n        padding-right: ", "px;\n    }\n"], ["\n    padding: 0 ", "px;\n    height: 56px;\n    box-sizing: content-box;\n\n    background-color: ", ";\n\n    :last-child {\n        text-align: ", ";\n        padding-right: ", "px;\n    }\n"])), spacings.nudge * 3, function (_a) {
+  var hasBack = _a.hasBack,
+      theme = _a.theme;
+  return hasBack ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
+}, function (_a) {
+  var alignRight = _a.alignRight;
+  return alignRight ? 'right' : 'left';
+}, spacings.spacer * 2.5);
+var TableBlock = forwardRef(function (_a, ref) {
+  var row = _a.row,
+      tableTitle = _a.tableTitle,
+      rowTitle = _a.rowTitle,
+      _b = _a.isInverted,
+      isInverted = _b === void 0 ? false : _b,
+      _c = _a.hasBack,
+      hasBack = _c === void 0 ? false : _c,
+      _d = _a.lastCol,
+      lastCol = _d === void 0 ? 'left' : _d;
+  return React__default.createElement(View$2, {
+    ref: ref
+  }, React__default.createElement(TableContainer, {
+    tabIndex: 1
+  }, React__default.createElement(TableBody, null, tableTitle && React__default.createElement(Caption, {
+    renderAs: "caption",
+    type: "copy-b",
+    isInverted: isInverted
+  }, tableTitle), rowTitle && React__default.createElement("thead", null, React__default.createElement("tr", null, rowTitle.map(function (item, ii) {
+    return React__default.createElement(TableHead, {
+      key: ii,
+      type: "copy-b",
+      renderAs: "th",
+      isInverted: !isInverted,
+      alignRight: lastCol === 'right'
+    }, item);
+  }))), React__default.createElement("tbody", null, row.map(function (_a, i) {
+    var cols = _a.cols;
+    return React__default.createElement("tr", {
+      key: i
+    }, cols.map(function (itemText, ii) {
+      return React__default.createElement(TableData, {
+        key: ii,
+        renderAs: "td",
+        hasBack: hasBack,
+        alignRight: lastCol === 'right',
+        innerHTML: itemText
+      });
+    }));
+  })))));
+});
+TableBlock.displayName = 'TableBlock';
+var templateObject_1$4, templateObject_2$3, templateObject_3$3, templateObject_4$1, templateObject_5$1, templateObject_6$1;
+
+var AspectContainer = styled.div.withConfig({
+  displayName: "VideoBlock__AspectContainer",
+  componentId: "sc-160aafd-0"
+})(templateObject_2$2 || (templateObject_2$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$3 || (templateObject_1$3 = __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$2 || (templateObject_3$2 = __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$3, templateObject_2$2, templateObject_3$2;
+
+var View$1 = styled.div.withConfig({
+  displayName: "POIFacts__View",
+  componentId: "sc-zp61fw-0"
+})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n    display: inline-flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n\n    margin-top: -", "px;\n    margin-left: -", "px;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"], ["\n    display: inline-flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n\n    margin-top: -", "px;\n    margin-left: -", "px;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge, spacings.nudge * 2, spacings.nudge * 3);
+var FactsWrapper = styled.div.withConfig({
+  displayName: "POIFacts__FactsWrapper",
+  componentId: "sc-zp61fw-1"
+})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n    padding-top: ", "px;\n    padding-left: ", "px;\n"], ["\n    padding-top: ", "px;\n    padding-left: ", "px;\n"])), spacings.nudge, spacings.nudge * 2);
+var Fact = styled.span.withConfig({
+  displayName: "POIFacts__Fact",
+  componentId: "sc-zp61fw-2"
+})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    ", "\n    color: ", ";\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    ", "\n    color: ", ";\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), copyStyle('copy', 'medium'), function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).text.copyInverted : getColors(theme).text.copy;
+}, spacings.nudge * 0.5);
+
+var POIFacts = function (_a) {
+  var facts = _a.facts,
+      customFact = _a.customFact,
+      isInverted = _a.isInverted;
+  return React__default.createElement(View$1, null, facts.map(function (fact, i) {
+    return React__default.createElement(FactsWrapper, {
+      key: 'tag_' + i
+    }, customFact ? customFact({
+      key: "headtag-".concat(i),
+      name: fact || '',
+      isInverted: isInverted
+    }) : React__default.createElement(Fact, {
+      isInverted: isInverted
+    }, React__default.createElement(Check, null), React__default.createElement("span", null, fact)));
+  }));
+};
+var templateObject_1$2, templateObject_2$1, templateObject_3$1;
+
+var View = styled.div.withConfig({
+  displayName: "POICard__View",
+  componentId: "sc-1l0tnmw-0"
+})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    border: 1px solid\n        ", ";\n    padding: ", "px;\n    border-radius: ", "px;\n    overflow: hidden;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    border: 1px solid\n        ", ";\n    padding: ", "px;\n    border-radius: ", "px;\n    overflow: hidden;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).elementBg.light : getColors(theme).elementBg.dark;
+}, spacings.nudge * 2, spacings.nudge, spacings.nudge * 3);
+var Title = styled(Copy).withConfig({
+  displayName: "POICard__Title",
+  componentId: "sc-1l0tnmw-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2; /* number of lines to show */\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"], ["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2; /* number of lines to show */\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge * 3);
+var Description = styled(Copy).withConfig({
+  displayName: "POICard__Description",
+  componentId: "sc-1l0tnmw-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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    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"])));
+var Body = styled.div.withConfig({
+  displayName: "POICard__Body",
+  componentId: "sc-1l0tnmw-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    /* align-items: flex-start; */\n\n    @media ", " {\n        margin-left: -", "px;\n        margin-right: -", "px;\n\n        & > * + * {\n            border-left: 1px solid\n                ", ";\n        }\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    /* align-items: flex-start; */\n\n    @media ", " {\n        margin-left: -", "px;\n        margin-right: -", "px;\n\n        & > * + * {\n            border-left: 1px solid\n                ", ";\n        }\n    }\n"])), mq.semilarge, spacings.spacer, spacings.spacer, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).elementBg.light : getColors(theme).elementBg.dark;
+});
+var Col = styled.div.withConfig({
+  displayName: "POICard__Col",
+  componentId: "sc-1l0tnmw-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    flex: 1 0 100%;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        flex: 1 0 60%;\n        padding: 0 ", "px;\n    }\n\n    @media ", " {\n        flex: 1 0 ", "%;\n    }\n"], ["\n    flex: 1 0 100%;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        flex: 1 0 60%;\n        padding: 0 ", "px;\n    }\n\n    @media ", " {\n        flex: 1 0 ", "%;\n    }\n"])), spacings.nudge * 3, mq.semilarge, spacings.spacer, mq.large, 2 / 3 * 100);
+var InfoCol = styled(Col).withConfig({
+  displayName: "POICard__InfoCol",
+  componentId: "sc-1l0tnmw-5"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: none;\n    margin-bottom: ", "px;\n\n    @media ", " {\n        display: block;\n        flex: 1 0 40%;\n    }\n\n    @media ", " {\n        display: block;\n        flex: 1 0 ", "%;\n    }\n"], ["\n    display: none;\n    margin-bottom: ", "px;\n\n    @media ", " {\n        display: block;\n        flex: 1 0 40%;\n    }\n\n    @media ", " {\n        display: block;\n        flex: 1 0 ", "%;\n    }\n"])), spacings.nudge * 2, mq.semilarge, mq.large, 1 / 3 * 100);
+var Action = styled.div.withConfig({
+  displayName: "POICard__Action",
+  componentId: "sc-1l0tnmw-6"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""])));
+
+var POICard = function (_a) {
+  var isInverted = _a.isInverted,
+      name = _a.name,
+      shortDescription = _a.shortDescription,
+      facts = _a.facts,
+      infos = _a.infos,
+      customFact = _a.customFact,
+      action = _a.action;
+  var hasFacts = isValidArray(facts, false);
+  var hasInfos = isValidArray(infos, false);
+  return React__default.createElement(View, {
+    isInverted: isInverted
+  }, name && React__default.createElement(Title, {
+    type: "copy-b",
+    size: "big",
+    isInverted: isInverted
+  }, name), (hasFacts || shortDescription || hasInfos || action) && React__default.createElement(Body, {
+    isInverted: isInverted
+  }, React__default.createElement(Col, null, isValidArray(facts, false) && React__default.createElement(POIFacts, {
+    facts: facts,
+    isInverted: isInverted,
+    customFact: customFact
+  }), shortDescription && React__default.createElement(Description, {
+    isInverted: isInverted,
+    innerHTML: shortDescription
+  }), action && React__default.createElement(Action, null, action(isInverted))), isValidArray(infos, false) && React__default.createElement(InfoCol, null, React__default.createElement(InfoList, {
+    isInverted: isInverted,
+    items: [{
+      items: infos
+    }]
+  }))));
+};
+var templateObject_1$1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+
+var bdotColor = '#1fc2f4';
+var Dot = styled(Link).withConfig({
+  displayName: "Bdot__Dot",
+  componentId: "sc-itin1p-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 14px;\n    height: 14px;\n\n    display: inline-block;\n    vertical-align: middle;\n    border-radius: 50%;\n\n    background: ", ";\n    color: ", ";\n    text-decoration: none;\n\n    span {\n        visibility: hidden;\n        font-size: 0;\n        color: transparent;\n    }\n"], ["\n    width: 14px;\n    height: 14px;\n\n    display: inline-block;\n    vertical-align: middle;\n    border-radius: 50%;\n\n    background: ", ";\n    color: ", ";\n    text-decoration: none;\n\n    span {\n        visibility: hidden;\n        font-size: 0;\n        color: transparent;\n    }\n"])), bdotColor, bdotColor);
+
+var Bdot = function (_a) {
+  var className = _a.className;
+  return React.createElement(Dot, {
+    ariaLabel: "b.lateral - creative agency",
+    className: className,
+    href: "https://blateral.com",
+    isExternal: true
+  }, React.createElement("span", null, "b.lateral - creative agency"));
+};
+var templateObject_1;
+
+export { Bdot as B, EventBlock as E, HeaderPoster as H, IntroBlock as I, POIFacts as P, Title$2 as T, VideoBlock as V, Tag as a, InfoList as b, HeaderKenBurns as c, HeaderVideo as d, TableBlock as e, POICard as f };
+//# sourceMappingURL=Bdot-a103eeef.js.map