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

package/esm/sections.js

@@ -1,3914 +0,0 @@
-import { a as __makeTemplateObject, e as __spreadArray, h as Minus, i as Plus, j as Info, _ as __assign, A as ArrowLeftRight, k as External, l as ArrowDown, L as LocationPin, m as ArrowRightGhost, n as ArrowLeftGhost, P as Phone, M as Mail, o as Instagram, p as Play } from './ClockFilled-6bae80dc.js';
-import { S as Section, m as mapToBgMode, W as Wrapper, w as wrapperWhitespace } from './Wrapper-29347885.js';
-import { C as Copy, c as copyStyle, H as Heading } from './Copy-fb124972.js';
-import * as React from 'react';
-import React__default, { useContext, useState, useRef, useEffect, forwardRef, useMemo, createRef } from 'react';
-import styled, { ThemeContext, css } from 'styled-components';
-import { s as spacings, g as getColors, m as mq, c as getGlobals, w as withRange, a as getFonts, e as getSVGDataImg } from './styles-f6c54818.js';
-import { w as withLibTheme, u as useLibTheme } from './LibThemeProvider-a38c5bf1.js';
-import { g as generateFAQ, a as generateLocalBusiness } from './structuredData-87423414.js';
-import { g as gridSettings, G as Grid, a as getGridWidth } from './Grid-151498da.js';
-import { L as Link } from './Link-0a1e35d6.js';
-import { S as StatusFormatter } from './statusFormatter-9be0fbff.js';
-import { u as useEqualSheetHeight } from './useEqualSheetHeight-c18cebd3.js';
-import { T as Title$6, a as TableBlock } from './TableBlock-26530c71.js';
-import { A as Actions } from './Actions-3f06c2e9.js';
-import { I as IntroBlock, H as HeaderPoster, a as HeaderKenBurns, b as HeaderVideo, V as VideoBlock } from './VideoBlock-b3f4ae27.js';
-import { I as Image } from './Image-b538f659.js';
-import { u as useIE } from './useIE-a9c56989.js';
-import ReactDOMServer from 'react-dom/server';
-import { g as generateNavbarIdent, a as getFullNavbarHeights, b as getNavbarState } from './Navigation-13dce48c.js';
-import { P as Pointer } from './Pointer-bc68154f.js';
-import { u as useScrollTo } from './useScrollTo-70af34bf.js';
-import { a as useMediaQueries } from './useMediaQuery-0d473a9c.js';
-import { C as Control$1 } from './Control-57a287dc.js';
-import { u as useLeafletMap } from './useLeafletMap-6dea7a8e.js';
-import { i as isValidArray } from './arrays-65b644ef.js';
-import { C as Callout } from './Callout-389fed95.js';
-import { u as useObserverSupport } from './useObserverSupport-02bce7f5.js';
-import { u as useUpdateEffect } from './useUpdateEffect-824c0c84.js';
-import { V as VideoCard } from './VideoCard-3fd368ef.js';
-import './concat-ab3c66f2.js';
-import './clamp-12d37b65.js';
-import 'react-schemaorg';
-import './navigation-a2998143.js';
-import './LanguageSwitcher-058e0145.js';
-import './useCookieConsent-8caef116.js';
-import './ButtonGhost-5b498dba.js';
-import './hexRgbConverter-edb91624.js';
-
-var AccordionContainer = styled.div.withConfig({
-  displayName: "Accordion__AccordionContainer",
-  componentId: "sc-1el5cmc-0"
-})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n    margin: 0;\n    padding: 0;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    margin: 0;\n    padding: 0;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge);
-var View$9 = styled.details.withConfig({
-  displayName: "Accordion__View",
-  componentId: "sc-1el5cmc-1"
-})(templateObject_2$s || (templateObject_2$s = __makeTemplateObject([""], [""])));
-var AccordionHead = styled.summary.withConfig({
-  displayName: "Accordion__AccordionHead",
-  componentId: "sc-1el5cmc-2"
-})(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n\n    padding: ", "px;\n    margin: 0;\n    border: none;\n    outline: none;\n    background: none;\n    user-select: none;\n    list-style: none;\n\n    background: ", ";\n\n    cursor: pointer;\n    transition: background 0.2s ease-in-out;\n\n    @media ", " {\n        padding: ", "px;\n    }\n\n    &::-webkit-details-marker {\n        display: none;\n    }\n\n    &::marker {\n        display: none;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            background: ", ";\n        }\n    }\n\n    &:focus {\n        background: ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n\n    padding: ", "px;\n    margin: 0;\n    border: none;\n    outline: none;\n    background: none;\n    user-select: none;\n    list-style: none;\n\n    background: ", ";\n\n    cursor: pointer;\n    transition: background 0.2s ease-in-out;\n\n    @media ", " {\n        padding: ", "px;\n    }\n\n    &::-webkit-details-marker {\n        display: none;\n    }\n\n    &::marker {\n        display: none;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            background: ", ";\n        }\n    }\n\n    &:focus {\n        background: ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"])), spacings.nudge * 2, function (_a) {
-  var isInverted = _a.isInverted,
-      hasBg = _a.hasBg,
-      theme = _a.theme;
-  return isInverted || hasBg ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
-}, mq.medium, spacings.nudge * 3, function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted,
-      hasBg = _a.hasBg;
-  return isInverted || hasBg ? getColors(theme).elementBg.lightHover : getColors(theme).elementBg.mediumHover;
-}, function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted,
-      hasBg = _a.hasBg;
-  return isInverted || hasBg ? getColors(theme).elementBg.lightHover : getColors(theme).elementBg.mediumHover;
-});
-var Column = styled(Copy).withConfig({
-  displayName: "Accordion__Column",
-  componentId: "sc-1el5cmc-3"
-})(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n    flex: 1 1 0;\n"], ["\n    flex: 1 1 0;\n"])));
-var AccordionText = styled.div.withConfig({
-  displayName: "Accordion__AccordionText",
-  componentId: "sc-1el5cmc-4"
-})(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    padding: ", "px;\n    margin-top: 2px;\n    background: ", ";\n\n    & > * {\n        max-width: 880px;\n    }\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        padding: ", "px;\n    }\n\n    @media ", " {\n        flex-direction: row;\n\n        & > * + * {\n            margin-top: 0px;\n            margin-left: ", "px;\n        }\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    padding: ", "px;\n    margin-top: 2px;\n    background: ", ";\n\n    & > * {\n        max-width: 880px;\n    }\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        padding: ", "px;\n    }\n\n    @media ", " {\n        flex-direction: row;\n\n        & > * + * {\n            margin-top: 0px;\n            margin-left: ", "px;\n        }\n    }\n"])), spacings.nudge * 2, function (_a) {
-  var isInverted = _a.isInverted,
-      hasBg = _a.hasBg,
-      theme = _a.theme;
-  return isInverted || hasBg ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
-}, spacings.spacer, mq.medium, spacings.nudge * 3, mq.semilarge, gridSettings.gutter);
-
-var AccordionBlock = function (_a) {
-  var label = _a.label,
-      text = _a.text,
-      aside = _a.aside,
-      isSelected = _a.isSelected,
-      onClick = _a.onClick,
-      hasBg = _a.hasBg,
-      isInverted = _a.isInverted,
-      itemIcon = _a.itemIcon,
-      className = _a.className;
-  var colors = useLibTheme().colors;
-  return React__default.createElement(View$9, {
-    open: isSelected,
-    onToggle: onClick,
-    className: className
-  }, React__default.createElement(AccordionHead, {
-    isInverted: isInverted,
-    hasBg: hasBg
-  }, React__default.createElement(Copy, {
-    renderAs: "span",
-    size: "big",
-    type: "copy-b"
-  }, label), React__default.createElement("span", null, itemIcon ? itemIcon({
-    isSelected: isSelected || false
-  }) : isSelected ? React__default.createElement(Minus, {
-    iconColor: colors.text.default
-  }) : React__default.createElement(Plus, {
-    iconColor: colors.text.default
-  }))), React__default.createElement(AccordionText, {
-    isInverted: isInverted,
-    hasBg: hasBg,
-    hasAside: !!aside
-  }, text && React__default.createElement(Column, {
-    type: "copy",
-    innerHTML: text
-  }), aside && React__default.createElement(Column, {
-    type: "copy",
-    innerHTML: aside
-  })));
-};
-
-var Accordion = function (_a) {
-  var anchorId = _a.anchorId,
-      items = _a.items,
-      bgMode = _a.bgMode,
-      itemIcon = _a.itemIcon;
-
-  var _b = React__default.useState([]),
-      currentItems = _b[0],
-      setCurrentItems = _b[1];
-
-  var colors = useLibTheme().colors;
-  var isInverted = bgMode === 'inverted';
-  var hasBg = bgMode === 'full';
-  return React__default.createElement(Section, {
-    addSeperation: true,
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : hasBg ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode, true)
-  }, items && generateFAQ(items), React__default.createElement(Wrapper, {
-    addWhitespace: true
-  }, React__default.createElement(Grid.Row, {
-    gutter: 0
-  }, React__default.createElement(Grid.Col, null, React__default.createElement(AccordionContainer, {
-    "aria-label": "Accordion Control Group Buttons"
-  }, items === null || items === void 0 ? void 0 : items.map(function (_a, i) {
-    var label = _a.label,
-        text = _a.text,
-        aside = _a.aside;
-    var isSelected = currentItems.indexOf(i) !== -1;
-    return React__default.createElement(AccordionBlock, {
-      key: "".concat(label, "_").concat(i),
-      isSelected: isSelected,
-      label: label,
-      text: text,
-      aside: aside,
-      onClick: function () {
-        setCurrentItems(function (prev) {
-          var copy = __spreadArray([], prev, true);
-
-          var index = copy.indexOf(i);
-
-          if (index === -1) {
-            copy.push(i);
-          } else {
-            copy.splice(index, 1);
-          }
-
-          return copy;
-        });
-      },
-      isInverted: isInverted,
-      hasBg: hasBg,
-      itemIcon: itemIcon
-    });
-  }))))));
-};
-var Accordion$1 = withLibTheme(Accordion);
-var templateObject_1$x, templateObject_2$s, templateObject_3$o, templateObject_4$l, templateObject_5$j;
-
-var View$8 = styled.div.withConfig({
-  displayName: "Alert__View",
-  componentId: "sc-1d5c0fb-0"
-})(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n    display: -ms-grid;\n    display: grid;\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    text-decoration: none;\n\n    position: relative;\n    border: 2px solid\n        ", ";\n    border-radius: ", ";\n\n    color: ", ";\n\n    padding: ", "px;\n\n    text-align: left;\n    width: 100%;\n    cursor: pointer;\n\n    transition: color ease-in-out 0.2s, border 0.2s ease-in-out;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            border: 2px solid\n                ", ";\n            color: ", ";\n        }\n    }\n"], ["\n    display: -ms-grid;\n    display: grid;\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    text-decoration: none;\n\n    position: relative;\n    border: 2px solid\n        ", ";\n    border-radius: ", ";\n\n    color: ", ";\n\n    padding: ", "px;\n\n    text-align: left;\n    width: 100%;\n    cursor: pointer;\n\n    transition: color ease-in-out 0.2s, border 0.2s ease-in-out;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            border: 2px solid\n                ", ";\n            color: ", ";\n        }\n    }\n"])), function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
-}, function (_a) {
-  var theme = _a.theme;
-  return getGlobals(theme).sections.edgeRadius;
-}, function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
-}, spacings.nudge * 3, spacings.nudge * 3, function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return isInverted ? getColors(theme).primary.invertedHover : getColors(theme).primary.hover;
-}, function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return isInverted ? getColors(theme).primary.invertedHover : getColors(theme).primary.hover;
-});
-var Icon$5 = styled.div.withConfig({
-  displayName: "Alert__Icon",
-  componentId: "sc-1d5c0fb-1"
-})(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n\n    & > * {\n        height: 48px;\n        width: 48px;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n\n    & > * {\n        height: 48px;\n        width: 48px;\n    }\n"])));
-var MainLabel$1 = styled.div.withConfig({
-  displayName: "Alert__MainLabel",
-  componentId: "sc-1d5c0fb-2"
-})(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n"], ["\n    display: flex;\n    align-items: center;\n"])));
-var Content$6 = styled.div.withConfig({
-  displayName: "Alert__Content",
-  componentId: "sc-1d5c0fb-3"
-})(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n    margin-top: ", "px;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    margin-top: ", "px;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge, spacings.nudge);
-var Title$5 = styled(Copy).withConfig({
-  displayName: "Alert__Title",
-  componentId: "sc-1d5c0fb-4"
-})(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n    display: inline-block;\n"], ["\n    display: inline-block;\n"])));
-var ViewLink = styled(Link).withConfig({
-  displayName: "Alert__ViewLink",
-  componentId: "sc-1d5c0fb-5"
-})(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n\n    && {\n        margin: 0;\n    }\n\n    &:focus-within {\n        outline: dotted 2px\n            ", ";\n        outline-offset: 4px;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        box-shadow: none;\n    }\n"], ["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n\n    && {\n        margin: 0;\n    }\n\n    &:focus-within {\n        outline: dotted 2px\n            ", ";\n        outline-offset: 4px;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        box-shadow: none;\n    }\n"])), function (_a) {
-  var isInverted = _a.isInverted,
-      theme = _a.theme;
-  return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
-});
-
-var Alert = function (_a) {
-  var isInverted = _a.isInverted,
-      title = _a.title,
-      date = _a.date,
-      description = _a.description,
-      link = _a.link,
-      customIcon = _a.customIcon,
-      className = _a.className;
-  var formattedDate = '';
-
-  if (date) {
-    var formatter = new StatusFormatter(date.getTime(), '', 'dd. MMMM yyyy', 'hh:mm', 'de');
-    formattedDate = formatter.getFormattedDate();
-  }
-
-  return React__default.createElement(View$8, {
-    isInverted: isInverted,
-    "data-sheet": "alert",
-    className: className
-  }, React__default.createElement(Icon$5, null, customIcon ? customIcon({
-    isInverted: isInverted
-  }) : React__default.createElement(Info, null)), React__default.createElement(MainLabel$1, null, title && React__default.createElement(Title$5, {
-    textColor: "inherit",
-    size: "medium",
-    type: "copy-b"
-  }, title)), React__default.createElement("span", null), React__default.createElement(Content$6, null, description && React__default.createElement(Copy, {
-    isInverted: isInverted,
-    size: "small",
-    innerHTML: description
-  }), date && React__default.createElement(Copy, {
-    size: "small",
-    isInverted: isInverted
-  }, formattedDate)), link && React__default.createElement(ViewLink, __assign({}, link, {
-    ariaLabel: (link === null || link === void 0 ? void 0 : link.href) ? title : undefined
-  })));
-};
-var templateObject_1$w, templateObject_2$r, templateObject_3$n, templateObject_4$k, templateObject_5$i, templateObject_6$e;
-
-var List$3 = styled.ul.withConfig({
-  displayName: "AlertList__List",
-  componentId: "sc-bfdeyu-0"
-})(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n    margin-top: -", "px;\n    margin-left: -", "px;\n    padding: 0;\n    list-style: none;\n\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n    flex-wrap: wrap;\n\n    @media ", " {\n        margin-top: -", "px;\n        margin-left: -", "px;\n    }\n"], ["\n    margin-top: -", "px;\n    margin-left: -", "px;\n    padding: 0;\n    list-style: none;\n\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n    flex-wrap: wrap;\n\n    @media ", " {\n        margin-top: -", "px;\n        margin-left: -", "px;\n    }\n"])), spacings.nudge * 2, spacings.nudge * 2, mq.medium, spacings.spacer, spacings.spacer);
-var ListItem$2 = styled.li.withConfig({
-  displayName: "AlertList__ListItem",
-  componentId: "sc-bfdeyu-1"
-})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n    padding-top: ", "px;\n    padding-left: ", "px;\n    flex: 1 1 100%;\n\n    @media ", " {\n        flex: 0 1 50%;\n        max-width: 50%;\n\n        padding-top: ", "px;\n        padding-left: ", "px;\n    }\n\n    @media ", " {\n        flex: 0 1 ", "%;\n        max-width: 600px;\n\n        padding-top: ", "px;\n        padding-left: ", "px;\n    }\n"], ["\n    padding-top: ", "px;\n    padding-left: ", "px;\n    flex: 1 1 100%;\n\n    @media ", " {\n        flex: 0 1 50%;\n        max-width: 50%;\n\n        padding-top: ", "px;\n        padding-left: ", "px;\n    }\n\n    @media ", " {\n        flex: 0 1 ", "%;\n        max-width: 600px;\n\n        padding-top: ", "px;\n        padding-left: ", "px;\n    }\n"])), spacings.nudge * 2, spacings.nudge * 2, mq.medium, spacings.spacer, spacings.spacer, mq.large, function (_a) {
-  var itemsPerRow = _a.itemsPerRow;
-  return 1 / itemsPerRow * 100;
-}, spacings.spacer, spacings.spacer);
-
-var AlertList = function (_a) {
-  var anchorId = _a.anchorId,
-      items = _a.items,
-      bgMode = _a.bgMode,
-      customIcon = _a.customIcon;
-  var colors = useLibTheme().colors;
-  var isInverted = bgMode === 'inverted';
-  var hasBg = bgMode === 'full';
-  var alertCount = (items === null || items === void 0 ? void 0 : items.length) || 0;
-  var itemsPerRow = alertCount % 3 === 1 || alertCount === 2 ? 2 : 3;
-  var alertRefs = useEqualSheetHeight({
-    listLength: alertCount,
-    identifiers: ['[data-sheet="alert"]'],
-    responsive: {
-      small: 1,
-      medium: 2,
-      semilarge: 2,
-      large: itemsPerRow,
-      xlarge: itemsPerRow
-    }
-  }).sheetRefs;
-  return React__default.createElement(Section, {
-    addSeperation: true,
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : hasBg ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode, true)
-  }, React__default.createElement(Wrapper, {
-    addWhitespace: true
-  }, React__default.createElement(List$3, null, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
-    return React__default.createElement(ListItem$2, {
-      key: i,
-      itemsPerRow: itemsPerRow,
-      ref: alertRefs[i]
-    }, React__default.createElement(Alert, __assign({}, item, {
-      isInverted: isInverted,
-      customIcon: customIcon
-    })));
-  }))));
-};
-var AlertList$1 = withLibTheme(AlertList);
-var templateObject_1$v, templateObject_2$q;
-
-var StyledTitle$1 = styled(Title$6).withConfig({
-  displayName: "Article__StyledTitle",
-  componentId: "sc-1lrfo1r-0"
-})(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        max-width: 880px;\n    }\n"], ["\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        max-width: 880px;\n    }\n"])), spacings.spacer, mq.semilarge);
-var ContentText = styled(Copy).withConfig({
-  displayName: "Article__ContentText",
-  componentId: "sc-1lrfo1r-1"
-})(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n    text-align: left;\n"], ["\n    text-align: left;\n"])));
-var StyledActions$6 = styled(Actions).withConfig({
-  displayName: "Article__StyledActions",
-  componentId: "sc-1lrfo1r-2"
-})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n    margin-top: ", "px;\n"], ["\n    margin-top: ", "px;\n"])), spacings.spacer);
-
-var Article = function (_a) {
-  var anchorId = _a.anchorId,
-      title = _a.title,
-      _b = _a.titleAs,
-      titleAs = _b === void 0 ? 'h2' : _b,
-      _c = _a.titleSize,
-      titleSize = _c === void 0 ? 'heading-2' : _c,
-      superTitle = _a.superTitle,
-      superTitleAs = _a.superTitleAs,
-      intro = _a.intro,
-      text = _a.text,
-      asideText = _a.asideText,
-      halfAside = _a.halfAside,
-      bgMode = _a.bgMode,
-      primaryAction = _a.primaryAction,
-      secondaryAction = _a.secondaryAction;
-  var colors = useLibTheme().colors;
-  var isInverted = bgMode === 'inverted';
-  var hasContent = intro || text || asideText;
-  return React.createElement(Section, {
-    addSeperation: true,
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : bgMode ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode)
-  }, React.createElement(Wrapper, {
-    clampWidth: "normal",
-    addWhitespace: true
-  }, (title || superTitle) && React.createElement(StyledTitle$1, {
-    title: title,
-    titleAs: titleAs,
-    titleSize: titleSize,
-    superTitle: superTitle,
-    superTitleAs: superTitleAs,
-    colorMode: isInverted ? 'inverted' : 'default'
-  }), hasContent && React.createElement(Grid.Row, {
-    valign: "top"
-  }, React.createElement(Grid.Col, {
-    semilarge: {
-      span: halfAside ? 6 / 12 : 8 / 12
-    }
-  }, intro && React.createElement(ContentText, {
-    type: "copy-b",
-    isInverted: isInverted,
-    innerHTML: intro
-  }), text && React.createElement(ContentText, {
-    type: "copy",
-    isInverted: isInverted,
-    innerHTML: text
-  })), asideText && React.createElement(Grid.Col, {
-    semilarge: {
-      span: halfAside ? 6 / 12 : 4 / 12
-    }
-  }, React.createElement(ContentText, {
-    type: "copy",
-    isInverted: isInverted,
-    innerHTML: asideText
-  }))), (primaryAction || secondaryAction) && React.createElement(StyledActions$6, {
-    primary: primaryAction && primaryAction(isInverted),
-    secondary: secondaryAction && secondaryAction(isInverted)
-  })));
-};
-var Article$1 = withLibTheme(Article);
-var templateObject_1$u, templateObject_2$p, templateObject_3$m;
-
-var ContactView = styled.div.withConfig({
-  displayName: "CallToAction__ContactView",
-  componentId: "sc-1wdvzex-0"
-})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin: 0 auto;\n    width: 100%;\n\n    text-align: left;\n    hyphens: auto;\n    overflow-wrap: break-word;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        flex-direction: row;\n\n        & > * + * {\n            margin-top: 0px;\n            margin-left: ", "px;\n        }\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin: 0 auto;\n    width: 100%;\n\n    text-align: left;\n    hyphens: auto;\n    overflow-wrap: break-word;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        flex-direction: row;\n\n        & > * + * {\n            margin-top: 0px;\n            margin-left: ", "px;\n        }\n    }\n"])), spacings.spacer, mq.semilarge, gridSettings.gutter);
-var Avatar = styled.img.withConfig({
-  displayName: "CallToAction__Avatar",
-  componentId: "sc-1wdvzex-1"
-})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n    align-self: center;\n    display: block;\n    border: solid 1px transparent;\n    border-radius: 50%;\n    width: 180px;\n    height: 180px;\n\n    background: ", ";\n\n    @media ", " {\n        display: block;\n        width: 190px;\n        height: 190px;\n    }\n"], ["\n    align-self: center;\n    display: block;\n    border: solid 1px transparent;\n    border-radius: 50%;\n    width: 180px;\n    height: 180px;\n\n    background: ", ";\n\n    @media ", " {\n        display: block;\n        width: 190px;\n        height: 190px;\n    }\n"])), function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return isInverted ? getGlobals(theme).sections.imagePlaceholderBg.inverted : getGlobals(theme).sections.imagePlaceholderBg.default;
-}, mq.semilarge);
-var Description$3 = styled(Copy).withConfig({
-  displayName: "CallToAction__Description",
-  componentId: "sc-1wdvzex-2"
-})(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n    text-align: center;\n\n    .icon-label {\n        flex-direction: column;\n    }\n\n    .icon-label > * + * {\n        margin-left: 0;\n        margin-top: ", "px;\n    }\n\n    & > * {\n        justify-content: center;\n    }\n\n    @media ", " {\n        text-align: left;\n\n        & > * {\n            justify-content: left;\n        }\n\n        .icon-label {\n            flex-direction: row;\n        }\n\n        .icon-label > * + * {\n            margin-left: ", "px;\n            margin-top: 0;\n        }\n    }\n"], ["\n    text-align: center;\n\n    .icon-label {\n        flex-direction: column;\n    }\n\n    .icon-label > * + * {\n        margin-left: 0;\n        margin-top: ", "px;\n    }\n\n    & > * {\n        justify-content: center;\n    }\n\n    @media ", " {\n        text-align: left;\n\n        & > * {\n            justify-content: left;\n        }\n\n        .icon-label {\n            flex-direction: row;\n        }\n\n        .icon-label > * + * {\n            margin-left: ", "px;\n            margin-top: 0;\n        }\n    }\n"])), spacings.nudge * 2, mq.semilarge, spacings.nudge * 2);
-
-var ContactBox = function (_a) {
-  var isInverted = _a.isInverted,
-      description = _a.description,
-      avatar = _a.avatar,
-      className = _a.className;
-  return React__default.createElement(ContactView, {
-    className: className
-  }, React__default.createElement(Avatar, {
-    src: avatar === null || avatar === void 0 ? void 0 : avatar.src,
-    alt: avatar === null || avatar === void 0 ? void 0 : avatar.alt,
-    isInverted: isInverted
-  }), description && React__default.createElement(Description$3, {
-    type: "copy",
-    isInverted: isInverted,
-    innerHTML: description
-  }));
-};
-
-var StyledIntro = styled(IntroBlock).withConfig({
-  displayName: "CallToAction__StyledIntro",
-  componentId: "sc-1wdvzex-3"
-})(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n    max-width: 880px;\n    margin-right: auto;\n    margin-left: auto;\n\n    @media ", " {\n        & > *:first-child {\n            min-height: ", ";\n        }\n    }\n"], ["\n    max-width: 880px;\n    margin-right: auto;\n    margin-left: auto;\n\n    @media ", " {\n        & > *:first-child {\n            min-height: ", ";\n        }\n    }\n"])), mq.xlarge, function (_a) {
-  var hasDecorator = _a.hasDecorator;
-  return hasDecorator && '110px';
-});
-var StyledContactBox = styled(ContactBox).withConfig({
-  displayName: "CallToAction__StyledContactBox",
-  componentId: "sc-1wdvzex-4"
-})(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n    margin-top: ", "px;\n\n    @media ", " {\n        max-width: ", ";\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    @media ", " {\n        max-width: ", ";\n    }\n"], ["\n    margin-top: ", "px;\n\n    @media ", " {\n        max-width: ", ";\n        margin-right: auto;\n        margin-left: auto;\n    }\n\n    @media ", " {\n        max-width: ", ";\n    }\n"])), spacings.spacer, mq.semilarge, getGridWidth({
-  cols: 8
-}), mq.large, getGridWidth({
-  cols: 6
-}));
-var StyledActions$5 = styled(Actions).withConfig({
-  displayName: "CallToAction__StyledActions",
-  componentId: "sc-1wdvzex-5"
-})(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n    margin-top: ", "px;\n\n    @media ", " {\n        display: block;\n        text-align: center;\n    }\n"], ["\n    margin-top: ", "px;\n\n    @media ", " {\n        display: block;\n        text-align: center;\n    }\n"])), spacings.spacer, mq.medium);
-var NewsletterWrapper = styled.div.withConfig({
-  displayName: "CallToAction__NewsletterWrapper",
-  componentId: "sc-1wdvzex-6"
-})(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n    width: 100%;\n    margin: 0 auto;\n    margin-top: ", "px;\n\n    @media ", " {\n        max-width: 400px;\n    }\n"], ["\n    width: 100%;\n    margin: 0 auto;\n    margin-top: ", "px;\n\n    @media ", " {\n        max-width: 400px;\n    }\n"])), spacings.spacer, mq.semilarge);
-var Badge = styled.div.withConfig({
-  displayName: "CallToAction__Badge",
-  componentId: "sc-1wdvzex-7"
-})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n    display: none;\n    position: relative;\n    height: 241px;\n    width: 241px;\n    margin-left: auto;\n    margin-bottom: -135px;\n    z-index: 3;\n\n    @media ", " {\n        display: block;\n        margin-right: ", ";\n    }\n"], ["\n    display: none;\n    position: relative;\n    height: 241px;\n    width: 241px;\n    margin-left: auto;\n    margin-bottom: -135px;\n    z-index: 3;\n\n    @media ", " {\n        display: block;\n        margin-right: ", ";\n    }\n"])), mq.xlarge, 1440 * (1 / 28) + 'px');
-var CallToAction = function (_a) {
-  var anchorId = _a.anchorId,
-      title = _a.title,
-      _b = _a.titleAs,
-      titleAs = _b === void 0 ? 'h2' : _b,
-      superTitle = _a.superTitle,
-      superTitleAs = _a.superTitleAs,
-      text = _a.text,
-      contact = _a.contact,
-      badge = _a.badge,
-      primaryAction = _a.primaryAction,
-      secondaryAction = _a.secondaryAction,
-      hasNewsletter = _a.hasNewsletter,
-      newsFormMain = _a.newsFormMain,
-      bgMode = _a.bgMode;
-  var theme = useContext(ThemeContext);
-  var isInverted = bgMode === 'inverted';
-  return React__default.createElement(Section, {
-    addSeperation: true,
-    anchorId: anchorId,
-    bgColor: isInverted ? getColors(theme).sectionBg.dark : getColors(theme).sectionBg.medium,
-    bgMode: bgMode ? mapToBgMode(bgMode, true) : 'full'
-  }, React__default.createElement(Wrapper, {
-    addWhitespace: true,
-    clampWidth: "normal"
-  }, badge && React__default.createElement(Badge, null, badge), title && React__default.createElement(StyledIntro, {
-    isCentered: true,
-    colorMode: isInverted ? 'inverted' : 'default',
-    title: title,
-    titleAs: titleAs,
-    superTitle: superTitle,
-    superTitleAs: superTitleAs,
-    hasDecorator: !!badge,
-    text: text
-  }), contact && React__default.createElement(StyledContactBox, {
-    isInverted: isInverted,
-    description: contact.description,
-    avatar: contact.avatar
-  }), newsFormMain && hasNewsletter && React__default.createElement(NewsletterWrapper, null, newsFormMain(isInverted)), (primaryAction || secondaryAction) && React__default.createElement(StyledActions$5, {
-    primary: primaryAction && primaryAction(isInverted),
-    secondary: secondaryAction && secondaryAction(isInverted)
-  })));
-};
-var CallToAction$1 = withLibTheme(CallToAction);
-var templateObject_1$t, templateObject_2$o, templateObject_3$l, templateObject_4$j, templateObject_5$h, templateObject_6$d, templateObject_7$a, templateObject_8$4;
-
-var View$7 = styled.div.withConfig({
-  displayName: "CardList__View",
-  componentId: "sc-179ugoh-0"
-})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    position: relative;\n    color: ", ";\n    border-radius: ", ";\n    min-height: 110px;\n\n    overflow: hidden;\n\n    @media ", " {\n        display: block;\n        padding-top: 85%;\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    position: relative;\n    color: ", ";\n    border-radius: ", ";\n    min-height: 110px;\n\n    overflow: hidden;\n\n    @media ", " {\n        display: block;\n        padding-top: 85%;\n    }\n"])), function (_a) {
-  var theme = _a.theme;
-  return getColors(theme).text.inverted;
-}, function (_a) {
-  var theme = _a.theme;
-  return getGlobals(theme).sections.edgeRadius;
-}, mq.medium);
-var SolidView = styled(View$7).withConfig({
-  displayName: "CardList__SolidView",
-  componentId: "sc-179ugoh-1"
-})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n    background-color: ", ";\n\n    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n\n    ", "\n"], ["\n    background-color: ", ";\n\n    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n\n    ", "\n"])), function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted,
-      cardColor = _a.cardColor;
-  return cardColor ? cardColor : isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
-}, function (_a) {
-  var hasLink = _a.hasLink;
-  return hasLink && css(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n            cursor: pointer;\n\n            @media (hover: hover) and (pointer: fine) {\n                &:hover {\n                    box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n                }\n            }\n        "], ["\n            cursor: pointer;\n\n            @media (hover: hover) and (pointer: fine) {\n                &:hover {\n                    box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n                }\n            }\n        "])));
-});
-var ImageView = styled(View$7).withConfig({
-  displayName: "CardList__ImageView",
-  componentId: "sc-179ugoh-2"
-})(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n    transition: box-shadow 0.2s ease-in-out;\n\n    ", "\n\n    &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        background: ", ";\n        pointer-events: none;\n    }\n\n    @media ", " {\n        padding-top: 0;\n    }\n"], ["\n    transition: box-shadow 0.2s ease-in-out;\n\n    ", "\n\n    &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        background: ", ";\n        pointer-events: none;\n    }\n\n    @media ", " {\n        padding-top: 0;\n    }\n"])), function (_a) {
-  var hasLink = _a.hasLink;
-  return hasLink && css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n            @media (hover: hover) and (pointer: fine) {\n                cursor: pointer;\n\n                img {\n                    -webkit-backface-visibility: hidden;\n                    -ms-transform: translateZ(0); /* IE 9 */\n                    -webkit-transform: translateZ(\n                        0\n                    ); /* Chrome, Safari, Opera */\n                    transform: translateZ(0);\n                    transform-origin: center;\n                    transition: transform 0.2s ease-in-out;\n                }\n\n                &:hover {\n                    box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n\n                    img {\n                        transform: scale(1.03);\n                    }\n                }\n            }\n        "], ["\n            @media (hover: hover) and (pointer: fine) {\n                cursor: pointer;\n\n                img {\n                    -webkit-backface-visibility: hidden;\n                    -ms-transform: translateZ(0); /* IE 9 */\n                    -webkit-transform: translateZ(\n                        0\n                    ); /* Chrome, Safari, Opera */\n                    transform: translateZ(0);\n                    transform-origin: center;\n                    transition: transform 0.2s ease-in-out;\n                }\n\n                &:hover {\n                    box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n\n                    img {\n                        transform: scale(1.03);\n                    }\n                }\n            }\n        "])));
-}, function (_a) {
-  var theme = _a.theme;
-  return getGlobals(theme).sections.imageTextGradient;
-}, mq.medium);
-var StyledImage$8 = styled(Image).withConfig({
-  displayName: "CardList__StyledImage",
-  componentId: "sc-179ugoh-3"
-})(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 0;\n\n    display: block;\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n    object-position: center;\n\n    @media ", " {\n        position: relative;\n    }\n"], ["\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 0;\n\n    display: block;\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n    object-position: center;\n\n    @media ", " {\n        position: relative;\n    }\n"])), mq.medium);
-var Content$5 = styled.div.withConfig({
-  displayName: "CardList__Content",
-  componentId: "sc-179ugoh-4"
-})(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n    z-index: 1;\n\n    padding: ", "px;\n\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    @media ", " {\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        overflow: hidden;\n\n        display: flex;\n        flex-direction: ", ";\n        justify-content: space-between;\n        align-items: ", ";\n\n        & > * + * {\n            margin-left: 0;\n        }\n    }\n"], ["\n    z-index: 1;\n\n    padding: ", "px;\n\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    @media ", " {\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        overflow: hidden;\n\n        display: flex;\n        flex-direction: ", ";\n        justify-content: space-between;\n        align-items: ", ";\n\n        & > * + * {\n            margin-left: 0;\n        }\n    }\n"])), spacings.nudge * 3, spacings.spacer, mq.medium, function (_a) {
-  var hasIcon = _a.hasIcon;
-  return hasIcon ? 'column' : 'row';
-}, function (_a) {
-  var hasIcon = _a.hasIcon;
-  return hasIcon ? 'flex-start' : 'flex-end';
-});
-var TextContainer$1 = styled.div.withConfig({
-  displayName: "CardList__TextContainer",
-  componentId: "sc-179ugoh-5"
-})(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n    width: 100%;\n    overflow: hidden;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    width: 100%;\n    overflow: hidden;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge / 2);
-var Title$4 = styled(Copy).withConfig({
-  displayName: "CardList__Title",
-  componentId: "sc-179ugoh-6"
-})(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n    display: inline-block;\n    max-width: 100%;\n\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    text-overflow: ellipsis;\n    overflow: hidden;\n"], ["\n    display: inline-block;\n    max-width: 100%;\n\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    text-overflow: ellipsis;\n    overflow: hidden;\n"])));
-var Footer = styled.div.withConfig({
-  displayName: "CardList__Footer",
-  componentId: "sc-179ugoh-7"
-})(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge * 2);
-var SubLabel = styled(Copy).withConfig({
-  displayName: "CardList__SubLabel",
-  componentId: "sc-179ugoh-8"
-})(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n    display: inline-block;\n\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n"], ["\n    display: inline-block;\n\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n"])));
-var Icon$4 = styled.div.withConfig({
-  displayName: "CardList__Icon",
-  componentId: "sc-179ugoh-9"
-})(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n    height: 100%;\n    max-height: 60px;\n    min-height: 40px;\n    min-width: 40px;\n\n    * {\n        height: 100%;\n    }\n\n    svg,\n    img {\n        width: 100%;\n    }\n\n    @media ", " {\n        svg,\n        img {\n            width: auto;\n        }\n    }\n"], ["\n    height: 100%;\n    max-height: 60px;\n    min-height: 40px;\n    min-width: 40px;\n\n    * {\n        height: 100%;\n    }\n\n    svg,\n    img {\n        width: 100%;\n    }\n\n    @media ", " {\n        svg,\n        img {\n            width: auto;\n        }\n    }\n"])), mq.medium);
-var CardLink = styled(Link).withConfig({
-  displayName: "CardList__CardLink",
-  componentId: "sc-179ugoh-10"
-})(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n    z-index: 1;\n    display: block;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n\n    outline-color: ", ";\n\n    &:focus {\n        border: 2px dotted ", ";\n        outline-offset: 4px;\n\n        color: ", ";\n    }\n"], ["\n    z-index: 1;\n    display: block;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n\n    outline-color: ", ";\n\n    &:focus {\n        border: 2px dotted ", ";\n        outline-offset: 4px;\n\n        color: ", ";\n    }\n"])), function (_a) {
-  var theme = _a.theme;
-  return getColors(theme).primary.default;
-}, function (_a) {
-  var theme = _a.theme;
-  return getColors(theme).primary.invertedHover;
-}, function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return isInverted ? getColors(theme).primary.invertedHover : getColors(theme).primary.hover;
-});
-
-var Card$2 = function (_a) {
-  var isInverted = _a.isInverted,
-      title = _a.title,
-      subLabel = _a.subLabel,
-      image = _a.image,
-      link = _a.link,
-      decorator = _a.decorator,
-      cardColor = _a.cardColor,
-      customIcon = _a.customIcon;
-  var colors = useLibTheme().colors;
-  var CardView = image && image.small ? ImageView : SolidView;
-  var defaultCardColor = isInverted ? colors.primary.inverted : colors.primary.default;
-  return React__default.createElement(CardView, {
-    isInverted: isInverted,
-    cardColor: cardColor || defaultCardColor,
-    hasLink: !!(link === null || link === void 0 ? void 0 : link.href)
-  }, (image === null || image === void 0 ? void 0 : image.small) && React__default.createElement(StyledImage$8, __assign({}, image, {
-    coverSpace: true,
-    isInverted: isInverted,
-    ratios: {
-      small: {
-        w: 352,
-        h: 108
-      },
-      medium: {
-        w: 286,
-        h: 244
-      }
-    }
-  })), React__default.createElement(Content$5, {
-    hasIcon: !!customIcon
-  }, customIcon ? React__default.createElement(Icon$4, null, customIcon({})) : '', React__default.createElement(TextContainer$1, null, title && React__default.createElement(Title$4, {
-    size: "big",
-    type: "copy",
-    isInverted: true
-  }, title), subLabel && React__default.createElement(Footer, null, React__default.createElement(SubLabel, {
-    type: "copy-b",
-    size: "big",
-    isInverted: true
-  }, subLabel), decorator ? decorator({
-    isInverted: isInverted
-  }) : undefined))), (link === null || link === void 0 ? void 0 : link.href) && React__default.createElement(CardLink, __assign({
-    isInverted: isInverted
-  }, link, {
-    ariaLabel: title || undefined
-  })));
-};
-
-var List$2 = styled.ul.withConfig({
-  displayName: "CardList__List",
-  componentId: "sc-179ugoh-11"
-})(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n    padding: 0;\n    margin-top: -", "px;\n    margin-left: -", "px;\n    list-style: none;\n\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n    flex-wrap: wrap;\n\n    @media ", " {\n        margin-top: -", "px;\n        margin-left: -", "px;\n    }\n"], ["\n    padding: 0;\n    margin-top: -", "px;\n    margin-left: -", "px;\n    list-style: none;\n\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n    flex-wrap: wrap;\n\n    @media ", " {\n        margin-top: -", "px;\n        margin-left: -", "px;\n    }\n"])), spacings.nudge * 2, spacings.nudge * 2, mq.medium, spacings.spacer, spacings.spacer);
-var CardItem = styled.li.withConfig({
-  displayName: "CardList__CardItem",
-  componentId: "sc-179ugoh-12"
-})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    padding-top: ", "px;\n    padding-left: ", "px;\n\n    width: 100%;\n\n    @media ", " {\n        flex: 0 0 50%;\n        max-width: 370px;\n        padding-top: ", "px;\n        padding-left: ", "px;\n    }\n\n    @media ", " {\n        flex: 0 0 33.33%;\n    }\n\n    @media (min-width: 75em) {\n        flex: ", ";\n    }\n"], ["\n    padding-top: ", "px;\n    padding-left: ", "px;\n\n    width: 100%;\n\n    @media ", " {\n        flex: 0 0 50%;\n        max-width: 370px;\n        padding-top: ", "px;\n        padding-left: ", "px;\n    }\n\n    @media ", " {\n        flex: 0 0 33.33%;\n    }\n\n    @media (min-width: 75em) {\n        flex: ", ";\n    }\n"])), spacings.nudge * 2, spacings.nudge * 2, mq.medium, spacings.spacer, spacings.spacer, mq.semilarge, function (_a) {
-  var isEqual = _a.isEqual,
-      threeCols = _a.threeCols;
-  return threeCols ? '0 0 33.33%' : isEqual && '0 0 25%';
-});
-
-var CardList = function (_a) {
-  var anchorId = _a.anchorId,
-      items = _a.items,
-      bgMode = _a.bgMode,
-      decorator = _a.decorator,
-      maxThreeCols = _a.maxThreeCols;
-  var colors = useLibTheme().colors;
-  var isInverted = bgMode === 'inverted';
-  return React__default.createElement(Section, {
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : bgMode ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode, true),
-    addSeperation: true
-  }, React__default.createElement(Wrapper, {
-    addWhitespace: true
-  }, React__default.createElement(List$2, null, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
-    return React__default.createElement(CardItem, {
-      key: i,
-      isEqual: items.length % 2 === 0,
-      threeCols: maxThreeCols
-    }, React__default.createElement(Card$2, __assign({}, item, {
-      isInverted: isInverted,
-      decorator: decorator
-    })));
-  }))));
-};
-var CardList$1 = withLibTheme(CardList);
-var templateObject_1$s, templateObject_2$n, templateObject_3$k, templateObject_4$i, templateObject_5$g, templateObject_6$c, templateObject_7$9, templateObject_8$3, templateObject_9$3, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$1, templateObject_14$1, templateObject_15;
-
-var clamp = function (num, min, max) {
-  return Math.min(Math.max(num, min), max);
-};
-
-var Images = styled.div.withConfig({
-  displayName: "ComparisonSlider__Images",
-  componentId: "sc-4f3ic1-0"
-})(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n    position: relative;\n    cursor: col-resize;\n    & > * {\n        pointer-events: none;\n        user-select: none;\n    }\n"], ["\n    position: relative;\n    cursor: col-resize;\n    & > * {\n        pointer-events: none;\n        user-select: none;\n    }\n"])));
-var BackgroundImg = styled(Image).withConfig({
-  displayName: "ComparisonSlider__BackgroundImg",
-  componentId: "sc-4f3ic1-1"
-})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n    position: relative;\n    display: block;\n    width: 100%;\n"], ["\n    position: relative;\n    display: block;\n    width: 100%;\n"])));
-var ForegroundContainer = styled.div.withConfig({
-  displayName: "ComparisonSlider__ForegroundContainer",
-  componentId: "sc-4f3ic1-2"
-})(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    width: 50%;\n    overflow: hidden;\n    transition: width ", "s\n        ease-in-out;\n    ", "\n"], ["\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    width: 50%;\n    overflow: hidden;\n    transition: width ", "s\n        ease-in-out;\n    ", "\n"])), function (_a) {
-  var hasTransition = _a.hasTransition;
-  return hasTransition ? 0.1 : 0;
-}, function (_a) {
-  var hasAnim = _a.hasAnim,
-      initalValue = _a.initalValue;
-  return hasAnim && css(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n            animation-name: ForegroundAnim;\n            animation-duration: 5s;\n            animation-iteration-count: 1;\n            animation-play-state: ", ";\n            animation-timing-function: ease-in-out;\n            @keyframes ForegroundAnim {\n                0% {\n                    width: ", ";\n                }\n                33% {\n                    width: ", ";\n                }\n                66% {\n                    width: ", ";\n                }\n                100% {\n                    width: ", ";\n                }\n            }\n        "], ["\n            animation-name: ForegroundAnim;\n            animation-duration: 5s;\n            animation-iteration-count: 1;\n            animation-play-state: ", ";\n            animation-timing-function: ease-in-out;\n            @keyframes ForegroundAnim {\n                0% {\n                    width: ", ";\n                }\n                33% {\n                    width: ", ";\n                }\n                66% {\n                    width: ", ";\n                }\n                100% {\n                    width: ", ";\n                }\n            }\n        "])), hasAnim && 'running', initalValue ? clamp(initalValue * 100, 0, 100) + '%' : '50%', initalValue ? clamp(initalValue * 100 + 10, 0, 100) + '%' : '60%', initalValue ? clamp(initalValue * 100 - 10, 0, 100) + '%' : '40%', initalValue ? initalValue * 100 + '%' : '50%');
-});
-var ForegroundImg = styled(Image).withConfig({
-  displayName: "ComparisonSlider__ForegroundImg",
-  componentId: "sc-4f3ic1-3"
-})(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    height: 100%;\n    max-width: none;\n    object-fit: cover;\n\n    img {\n        height: auto;\n        width: auto;\n    }\n"], ["\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    height: 100%;\n    max-width: none;\n    object-fit: cover;\n\n    img {\n        height: auto;\n        width: auto;\n    }\n"])));
-var ForegroundOverlay = styled.div.withConfig({
-  displayName: "ComparisonSlider__ForegroundOverlay",
-  componentId: "sc-4f3ic1-4"
-})(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: ", ";\n"], ["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: ", ";\n"])), function (_a) {
-  var color = _a.color;
-  return color;
-});
-var ImageLabel = styled(Copy).withConfig({
-  displayName: "ComparisonSlider__ImageLabel",
-  componentId: "sc-4f3ic1-5"
-})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n    height: ", "px;\n    padding: ", "px ", "px ", "px\n        ", "px;\n    background: ", ";\n"], ["\n    height: ", "px;\n    padding: ", "px ", "px ", "px\n        ", "px;\n    background: ", ";\n"])), spacings.spacer, spacings.nudge, spacings.spacer, spacings.spacer, spacings.spacer, function (_a) {
-  var bgColor = _a.bgColor;
-  return bgColor && bgColor;
-});
-var ForegroundLabel = styled(ImageLabel).withConfig({
-  displayName: "ComparisonSlider__ForegroundLabel",
-  componentId: "sc-4f3ic1-6"
-})(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n    position: absolute;\n    bottom: ", "px;\n    left: ", "px;\n    pointer-events: none;\n    white-space: nowrap;\n"], ["\n    position: absolute;\n    bottom: ", "px;\n    left: ", "px;\n    pointer-events: none;\n    white-space: nowrap;\n"])), spacings.spacer, spacings.spacer);
-var BackgroundLabel = styled(ImageLabel).withConfig({
-  displayName: "ComparisonSlider__BackgroundLabel",
-  componentId: "sc-4f3ic1-7"
-})(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n    position: absolute;\n    bottom: ", "px;\n    right: ", "px;\n    pointer-events: none;\n    white-space: nowrap;\n"], ["\n    position: absolute;\n    bottom: ", "px;\n    right: ", "px;\n    pointer-events: none;\n    white-space: nowrap;\n"])), spacings.spacer, spacings.spacer);
-var ControlContainer = styled.div.withConfig({
-  displayName: "ComparisonSlider__ControlContainer",
-  componentId: "sc-4f3ic1-8"
-})(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    transition: left ", "s\n        ease-in-out;\n    ", "\n"], ["\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    transition: left ", "s\n        ease-in-out;\n    ", "\n"])), function (_a) {
-  var hasTransition = _a.hasTransition;
-  return hasTransition ? 0.1 : 0;
-}, function (_a) {
-  var hasAnim = _a.hasAnim,
-      initalValue = _a.initalValue;
-  return hasAnim && css(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n            animation-name: ControlAnim;\n            animation-duration: 5s;\n            animation-iteration-count: 1;\n            animation-play-state: ", ";\n            animation-timing-function: ease-in-out;\n            @keyframes ControlAnim {\n                0% {\n                    left: ", ";\n                }\n                33% {\n                    left: ", ";\n                }\n                66% {\n                    left: ", ";\n                }\n                100% {\n                    left: ", ";\n                }\n            }\n        "], ["\n            animation-name: ControlAnim;\n            animation-duration: 5s;\n            animation-iteration-count: 1;\n            animation-play-state: ", ";\n            animation-timing-function: ease-in-out;\n            @keyframes ControlAnim {\n                0% {\n                    left: ", ";\n                }\n                33% {\n                    left: ", ";\n                }\n                66% {\n                    left: ", ";\n                }\n                100% {\n                    left: ", ";\n                }\n            }\n        "])), hasAnim && 'running', initalValue ? clamp(initalValue * 100, 0, 100) + '%' : '50%', initalValue ? clamp(initalValue * 100 + 10, 0, 100) + '%' : '60%', initalValue ? clamp(initalValue * 100 - 10, 0, 100) + '%' : '40%', initalValue ? initalValue * 100 + '%' : '50%');
-});
-var Control = styled.div.withConfig({
-  displayName: "ComparisonSlider__Control",
-  componentId: "sc-4f3ic1-9"
-})(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 54px;\n    width: 54px;\n    border: solid 2px ", ";\n    border-radius: 50%;\n    background-color: ", ";\n"], ["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 54px;\n    width: 54px;\n    border: solid 2px ", ";\n    border-radius: 50%;\n    background-color: ", ";\n"])), function (_a) {
-  var theme = _a.theme;
-  return getColors(theme).elementBg.light;
-}, function (_a) {
-  var theme = _a.theme;
-  return getColors(theme).elementBg.medium;
-});
-
-var ComparisonSlider = function (_a) {
-  var anchorId = _a.anchorId,
-      bgMode = _a.bgMode,
-      initialValue = _a.initialValue,
-      foregroundImg = _a.foregroundImg,
-      backgroundImg = _a.backgroundImg,
-      foregroundLabel = _a.foregroundLabel,
-      backgroundLabel = _a.backgroundLabel,
-      _b = _a.overlayColor,
-      overlayColor = _b === void 0 ? 'rgba(0, 0 , 0, 0.2)' : _b,
-      _c = _a.labelColor,
-      labelColor = _c === void 0 ? 'rgba(0, 0 , 0, 0.3)' : _c,
-      dragControl = _a.dragControl,
-      enableControlAnim = _a.enableControlAnim;
-  var isIE = useIE(true);
-
-  var _d = useState(initialValue ? Math.min(Math.max(initialValue, 0), 1) : 0.5),
-      slideValue = _d[0],
-      setSlideValue = _d[1];
-
-  var _e = useState(false),
-      isHolding = _e[0],
-      setIsHolding = _e[1];
-
-  var _f = useState(false),
-      isDragging = _f[0],
-      setIsDragging = _f[1];
-
-  var _g = useState(true),
-      interacted = _g[0],
-      setInteracted = _g[1];
-
-  var _h = useState(0),
-      sideOffset = _h[0],
-      setSideOffset = _h[1];
-
-  var controlRef = useRef(null);
-  var colors = useLibTheme().colors;
-  useEffect(function () {
-    if (controlRef.current) {
-      setSideOffset(controlRef.current.offsetWidth / 2);
-    }
-  }, []);
-  useEffect(function () {
-    var handleInitalLoad = function () {
-      var options = {
-        rootMargin: '0px',
-        threshold: 1.0
-      };
-      var observer = new IntersectionObserver(function (entries, observer) {
-        var _a, _b;
-
-        if (enableControlAnim && ((_a = entries[0]) === null || _a === void 0 ? void 0 : _a.isIntersecting)) {
-          // if control is first fully visible
-          observer.unobserve((_b = entries[0]) === null || _b === void 0 ? void 0 : _b.target);
-          setInteracted(false);
-        }
-      }, options);
-      if (controlRef.current) observer.observe(controlRef.current);
-      window.removeEventListener('load', handleInitalLoad);
-    }; // wait unitl user has scrolled once
-
-
-    if (!isIE) {
-      if (document.readyState === 'complete') handleInitalLoad();else window.addEventListener('load', handleInitalLoad);
-    }
-
-    return function () {
-      window.removeEventListener('load', handleInitalLoad);
-    };
-  }, [enableControlAnim, isIE]);
-
-  var setCurrentPos = function (target, clientX) {
-    if (target && clientX) {
-      var relativeClientX = clientX - target.getBoundingClientRect().x; // check side offset
-
-      if (relativeClientX >= sideOffset && relativeClientX <= target.getBoundingClientRect().width - sideOffset) {
-        var percentage = relativeClientX / target.getBoundingClientRect().width;
-        percentage = Math.min(Math.max(percentage, 0), 1);
-        setSlideValue(percentage);
-      }
-    }
-  };
-
-  var handleClick = function (ev) {
-    var target = ev.currentTarget;
-
-    if (target && ev.clientX) {
-      setCurrentPos(target, ev.clientX);
-      setInteracted(true);
-    }
-  };
-
-  var handleMouseMove = function (ev) {
-    var target = ev.currentTarget;
-
-    if (target && ev.clientX && isHolding) {
-      setIsDragging(true);
-      setInteracted(true);
-      if (isDragging) setCurrentPos(target, ev.clientX);
-    }
-  };
-
-  var handleTouchMove = function (ev) {
-    var _a, _b;
-
-    var target = ev.currentTarget;
-
-    if (target && ((_a = ev.touches[0]) === null || _a === void 0 ? void 0 : _a.clientX)) {
-      setInteracted(true);
-      setCurrentPos(target, (_b = ev.touches[0]) === null || _b === void 0 ? void 0 : _b.clientX);
-    }
-  };
-
-  var isInverted = bgMode === 'inverted';
-  return React__default.createElement(Section, {
-    addSeperation: true,
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : bgMode ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode)
-  }, React__default.createElement(Wrapper, null, backgroundImg && foregroundImg && React__default.createElement(Images, {
-    onClick: handleClick,
-    onMouseMove: handleMouseMove,
-    onMouseDown: function () {
-      setIsDragging(false);
-      setIsHolding(true);
-    },
-    onMouseUp: function () {
-      setIsDragging(false);
-      setIsHolding(false);
-    },
-    onMouseLeave: function () {
-      setIsHolding(false);
-      setIsDragging(false);
-    },
-    onTouchMove: handleTouchMove,
-    onTouchStart: function () {
-      return setIsHolding(true);
-    },
-    onTouchEnd: function () {
-      return setIsHolding(false);
-    }
-  }, React__default.createElement(BackgroundImg, __assign({}, backgroundImg)), backgroundLabel && React__default.createElement(BackgroundLabel, {
-    textColor: colors.text.inverted,
-    bgColor: labelColor
-  }, backgroundLabel), React__default.createElement(ForegroundContainer, {
-    hasTransition: !isHolding,
-    hasAnim: !interacted,
-    initalValue: initialValue,
-    style: {
-      width: slideValue * 100 + '%'
-    }
-  }, React__default.createElement(ForegroundImg, __assign({}, foregroundImg)), foregroundLabel && React__default.createElement(ForegroundLabel, {
-    textColor: colors.text.inverted,
-    bgColor: labelColor
-  }, foregroundLabel), React__default.createElement(ForegroundOverlay, {
-    color: overlayColor
-  })), React__default.createElement(ControlContainer, {
-    ref: controlRef,
-    hasTransition: !isHolding,
-    hasAnim: !interacted,
-    initalValue: initialValue,
-    style: {
-      left: slideValue * 100 + '%'
-    }
-  }, dragControl ? dragControl : React__default.createElement(Control, null, React__default.createElement(ArrowLeftRight, {
-    iconColor: colors.elementBg.light
-  }))))));
-};
-var ComparisonSlider$1 = withLibTheme(ComparisonSlider);
-var templateObject_1$r, templateObject_2$m, templateObject_3$j, templateObject_4$h, templateObject_5$f, templateObject_6$b, templateObject_7$8, templateObject_8$2, templateObject_9$2, templateObject_10$2, templateObject_11$2, templateObject_12$2;
-
-var View$6 = styled(Link).withConfig({
-  displayName: "PromotionCard__View",
-  componentId: "sc-1p1egy3-0"
-})(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    width: 100%;\n    border-radius: ", ";\n    overflow: hidden;\n    outline: none;\n\n    &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        background: ", ";\n        pointer-events: none;\n    }\n\n    ", "\n"], ["\n    display: block;\n    position: relative;\n    width: 100%;\n    border-radius: ", ";\n    overflow: hidden;\n    outline: none;\n\n    &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        background: ", ";\n        pointer-events: none;\n    }\n\n    ", "\n"])), function (_a) {
-  var theme = _a.theme;
-  return getGlobals(theme).sections.edgeRadius;
-}, function (_a) {
-  var theme = _a.theme;
-  return getGlobals(theme).sections.imageTextGradient;
-}, function (_a) {
-  var clickable = _a.clickable,
-      theme = _a.theme,
-      isInverted = _a.isInverted;
-  return clickable && css(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n            transition: box-shadow 0.2s ease-in-out;\n            cursor: pointer;\n\n            &:hover {\n                box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n            }\n\n            &:focus {\n                box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n                outline: solid 2px\n                    ", ";\n                outline-offset: 4px;\n\n                color: ", ";\n            }\n\n            &:focus:not(:focus-visible) {\n                outline: none;\n                box-shadow: none;\n            }\n        "], ["\n            transition: box-shadow 0.2s ease-in-out;\n            cursor: pointer;\n\n            &:hover {\n                box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n            }\n\n            &:focus {\n                box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.35);\n                outline: solid 2px\n                    ", ";\n                outline-offset: 4px;\n\n                color: ", ";\n            }\n\n            &:focus:not(:focus-visible) {\n                outline: none;\n                box-shadow: none;\n            }\n        "])), isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default, isInverted ? getColors(theme).primary.invertedHover : getColors(theme).primary.hover);
-});
-var StyledImage$7 = styled(Image).withConfig({
-  displayName: "PromotionCard__StyledImage",
-  componentId: "sc-1p1egy3-1"
-})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n    width: 100%;\n    height: 100%;\n    min-height: 300px;\n\n    img {\n        height: 100%;\n    }\n"], ["\n    width: 100%;\n    height: 100%;\n    min-height: 300px;\n\n    img {\n        height: 100%;\n    }\n"])));
-var IntroContainer = styled.div.withConfig({
-  displayName: "PromotionCard__IntroContainer",
-  componentId: "sc-1p1egy3-2"
-})(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    overflow: auto;\n    z-index: 1;\n\n    padding: ", "px ", "px;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: flex-start;\n\n    /* required to align items at flex-end in ie11 */\n    &:before {\n        content: '';\n        display: block;\n        flex: 1 0 0px;\n    }\n\n    @media ", " {\n        padding: ", "px ", "px;\n    }\n"], ["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    overflow: auto;\n    z-index: 1;\n\n    padding: ", "px ", "px;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: flex-start;\n\n    /* required to align items at flex-end in ie11 */\n    &:before {\n        content: '';\n        display: block;\n        flex: 1 0 0px;\n    }\n\n    @media ", " {\n        padding: ", "px ", "px;\n    }\n"])), spacings.spacer, spacings.nudge * 3, mq.medium, spacings.nudge * 5, spacings.spacer);
-var StyledTitle = styled(Title$6).withConfig({
-  displayName: "PromotionCard__StyledTitle",
-  componentId: "sc-1p1egy3-3"
-})(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n    max-width: ", ";\n"], ["\n    max-width: ", ";\n"])), function (_a) {
-  var clampTitle = _a.clampTitle;
-  return clampTitle && 13 / 28 * spacings.wrapper + 'px';
-});
-var ExternalIconHolder = styled.span.withConfig({
-  displayName: "PromotionCard__ExternalIconHolder",
-  componentId: "sc-1p1egy3-4"
-})(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n    margin-left: ", "px;\n\n    & > * {\n        display: inline-block;\n    }\n"], ["\n    margin-left: ", "px;\n\n    & > * {\n        display: inline-block;\n    }\n"])), spacings.nudge * 2);
-var Icon$3 = styled.div.withConfig({
-  displayName: "PromotionCard__Icon",
-  componentId: "sc-1p1egy3-5"
-})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n    ", ";\n    ", ";\n\n    position: absolute;\n    top: ", "px;\n    left: ", "px;\n\n    & > * {\n        ", ";\n        ", ";\n    }\n\n    color: ", ";\n"], ["\n    ", ";\n    ", ";\n\n    position: absolute;\n    top: ", "px;\n    left: ", "px;\n\n    & > * {\n        ", ";\n        ", ";\n    }\n\n    color: ", ";\n"])), withRange([60, 100], 'height'), withRange([60, 100], 'width'), spacings.nudge * 3, spacings.nudge * 3, withRange([60, 100], 'height'), withRange([60, 100], 'width'), function (_a) {
-  var theme = _a.theme;
-  return getColors(theme).text.inverted;
-});
-var PromotionCard = forwardRef(function (_a, ref) {
-  var isInverted = _a.isInverted,
-      image = _a.image,
-      title = _a.title,
-      titleAs = _a.titleAs,
-      superTitle = _a.superTitle,
-      superTitleAs = _a.superTitleAs,
-      href = _a.href,
-      link = _a.link,
-      externalLinkIcon = _a.externalLinkIcon,
-      icon = _a.icon,
-      className = _a.className; // fallback for older versions
-
-  var linkObj = link;
-
-  if (href && !link) {
-    linkObj = {
-      href: href,
-      isExternal: false
-    };
-  }
-
-  var externalIconString = ReactDOMServer.renderToString(React__default.createElement(ExternalIconHolder, null, externalLinkIcon || React__default.createElement(External, null)));
-  return React__default.createElement(View$6, __assign({
-    ref: ref,
-    clickable: !!href || !!link
-  }, linkObj, {
-    className: className
-  }), React__default.createElement(StyledImage$7, __assign({}, image, {
-    isInverted: isInverted,
-    coverSpace: true
-  })), icon && React__default.createElement(Icon$3, null, icon({
-    isInverted: isInverted
-  })), title && React__default.createElement(IntroContainer, null, React__default.createElement(StyledTitle, {
-    colorMode: "onImage",
-    superTitle: superTitle,
-    superTitleAs: superTitleAs,
-    title: (linkObj === null || linkObj === void 0 ? void 0 : linkObj.isExternal) ? title + externalIconString : title,
-    titleAs: titleAs || 'div',
-    clampTitle: true
-  })));
-});
-PromotionCard.displayName = 'PromotionCard';
-var templateObject_1$q, templateObject_2$l, templateObject_3$i, templateObject_4$g, templateObject_5$e, templateObject_6$a, templateObject_7$7;
-
-var Card$1 = styled(PromotionCard).withConfig({
-  displayName: "CrossPromotion__Card",
-  componentId: "sc-1jmsp4-0"
-})(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n\n    height: ", ";\n\n    flex: 1 0 auto;\n\n    & + & {\n        margin-top: ", "px;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n\n    height: ", ";\n\n    flex: 1 0 auto;\n\n    & + & {\n        margin-top: ", "px;\n    }\n"])), function (_a) {
-  var isMain = _a.isMain;
-  return isMain && '100%';
-}, gridSettings.gutter);
-
-var CrossPromotion = function (_a) {
-  var anchorId = _a.anchorId,
-      main = _a.main,
-      aside = _a.aside,
-      bgMode = _a.bgMode,
-      isMirrored = _a.isMirrored,
-      externalLinkIcon = _a.externalLinkIcon;
-  var colors = useLibTheme().colors;
-  var isInverted = bgMode === 'inverted';
-  return React.createElement(Section, {
-    addSeperation: true,
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : bgMode ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode, false, isMirrored)
-  }, React.createElement(Wrapper, {
-    clampWidth: "normal",
-    addWhitespace: true
-  }, aside ? isMirrored ? React.createElement(Grid.Row, null, React.createElement(Grid.Col, {
-    semilarge: {
-      span: 6 / 12
-    }
-  }, main && main.map(function (card, i) {
-    return React.createElement(Card$1, __assign({
-      key: i,
-      isMain: true
-    }, card, {
-      externalLinkIcon: externalLinkIcon,
-      isInverted: isInverted
-    }));
-  })), React.createElement(Grid.Col, {
-    semilarge: {
-      span: 6 / 12
-    }
-  }, aside.map(function (card, i) {
-    return React.createElement(Card$1, __assign({
-      key: i
-    }, card, {
-      externalLinkIcon: externalLinkIcon,
-      isInverted: isInverted
-    }));
-  }))) : React.createElement(Grid.Row, null, React.createElement(Grid.Col, {
-    semilarge: {
-      span: 6 / 12
-    }
-  }, aside.map(function (card, i) {
-    return React.createElement(Card$1, __assign({
-      key: i
-    }, card, {
-      externalLinkIcon: externalLinkIcon,
-      isInverted: isInverted
-    }));
-  })), React.createElement(Grid.Col, {
-    semilarge: {
-      span: 6 / 12
-    }
-  }, main && main.map(function (card, i) {
-    return React.createElement(Card$1, __assign({
-      key: i,
-      isMain: true
-    }, card, {
-      externalLinkIcon: externalLinkIcon,
-      isInverted: isInverted
-    }));
-  }))) : main && React.createElement(Grid.Row, null, main.map(function (card, i) {
-    return React.createElement(Grid.Col, {
-      semilarge: {
-        span: (card.size === 'half' ? 6 : 12) / 12
-      },
-      key: i
-    }, React.createElement(Card$1, __assign({
-      key: i
-    }, card, {
-      externalLinkIcon: externalLinkIcon,
-      isInverted: isInverted
-    })));
-  }))));
-};
-var CrossPromotion$1 = withLibTheme(CrossPromotion);
-var templateObject_1$p;
-
-var View$5 = styled.div.withConfig({
-  displayName: "Fact__View",
-  componentId: "sc-elpxk2-0"
-})(templateObject_1$o || (templateObject_1$o = __makeTemplateObject([""], [""])));
-var ImageContainer$1 = styled.div.withConfig({
-  displayName: "Fact__ImageContainer",
-  componentId: "sc-elpxk2-1"
-})(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n    display: flex;\n    justify-content: ", ";\n    margin-bottom: ", "px;\n    max-width: 100%;\n"], ["\n    display: flex;\n    justify-content: ", ";\n    margin-bottom: ", "px;\n    max-width: 100%;\n"])), function (_a) {
-  var isCentered = _a.isCentered;
-  return isCentered ? 'center' : 'flex-start';
-}, spacings.nudge * 3);
-var StyledImage$6 = styled(Image).withConfig({
-  displayName: "Fact__StyledImage",
-  componentId: "sc-elpxk2-2"
-})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n    overflow: hidden;\n    border-radius: ", ";\n"], ["\n    overflow: hidden;\n    border-radius: ", ";\n"])), function (_a) {
-  var theme = _a.theme;
-  return getGlobals(theme).sections.edgeRadius;
-});
-var Content$4 = styled.div.withConfig({
-  displayName: "Fact__Content",
-  componentId: "sc-elpxk2-3"
-})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n    text-align: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    text-align: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), function (_a) {
-  var isCentered = _a.isCentered;
-  return isCentered && 'center';
-}, spacings.nudge * 3);
-var Title$3 = styled(Copy).withConfig({
-  displayName: "Fact__Title",
-  componentId: "sc-elpxk2-4"
-})(templateObject_5$d || (templateObject_5$d = __makeTemplateObject([""], [""])));
-var SubTitle = styled(Copy).withConfig({
-  displayName: "Fact__SubTitle",
-  componentId: "sc-elpxk2-5"
-})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject([""], [""])));
-var Text$3 = styled(Copy).withConfig({
-  displayName: "Fact__Text",
-  componentId: "sc-elpxk2-6"
-})(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n    ", " + & {\n        margin-top: ", "px;\n    }\n"], ["\n    ", " + & {\n        margin-top: ", "px;\n    }\n"])), SubTitle, spacings.nudge);
-var Fact = forwardRef(function (_a, ref) {
-  var _b = _a.isInverted,
-      isInverted = _b === void 0 ? false : _b,
-      _c = _a.isCentered,
-      isCentered = _c === void 0 ? false : _c,
-      title = _a.title,
-      subTitle = _a.subTitle,
-      text = _a.text,
-      image = _a.image,
-      className = _a.className;
-  return React__default.createElement(View$5, {
-    ref: ref,
-    className: className
-  }, (image === null || image === void 0 ? void 0 : image.small) && React__default.createElement(ImageContainer$1, {
-    isCentered: isCentered
-  }, React__default.createElement(StyledImage$6, {
-    isInverted: isInverted,
-    small: image.small,
-    medium: image.medium,
-    semilarge: image.semilarge,
-    large: image.large,
-    xlarge: image.xlarge,
-    alt: image.alt,
-    coverSpace: image.coverSpace,
-    ratios: image.ratios,
-    showPlaceholder: image.showPlaceholder
-  })), React__default.createElement(Content$4, {
-    isCentered: isCentered
-  }, title && React__default.createElement(Title$3, {
-    type: "copy-b",
-    size: "big",
-    isInverted: isInverted,
-    "data-sheet": "title"
-  }, title), subTitle && React__default.createElement(SubTitle, {
-    type: "copy-b",
-    isInverted: isInverted,
-    "data-sheet": "subtitle"
-  }, subTitle), text && React__default.createElement(Text$3, {
-    type: "copy",
-    isInverted: isInverted,
-    "data-sheet": "text",
-    innerHTML: text
-  })));
-});
-Fact.displayName = 'Fact';
-var templateObject_1$o, templateObject_2$k, templateObject_3$h, templateObject_4$f, templateObject_5$d, templateObject_6$9, templateObject_7$6;
-
-var FactFill = styled.div.withConfig({
-  displayName: "FactGrid__FactFill",
-  componentId: "sc-114y2fo-0"
-})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n    display: none;\n\n    @media ", " {\n        display: block;\n    }\n"], ["\n    display: none;\n\n    @media ", " {\n        display: block;\n    }\n"])), mq.large);
-
-var FactGrid = function (_a) {
-  var anchorId = _a.anchorId,
-      _b = _a.columns,
-      columns = _b === void 0 ? 3 : _b,
-      facts = _a.facts,
-      bgMode = _a.bgMode,
-      isCentered = _a.isCentered;
-  var colors = useLibTheme().colors;
-  var factCount = (facts === null || facts === void 0 ? void 0 : facts.length) || 0;
-  var isInverted = bgMode === 'inverted';
-  var cardRefs = useEqualSheetHeight({
-    listLength: factCount,
-    identifiers: ['[data-sheet="title"]', '[data-sheet="subtitle"]'],
-    responsive: {
-      small: 1,
-      medium: columns < 3 ? columns : 3,
-      semilarge: columns < 4 ? columns : 4,
-      large: columns,
-      xlarge: columns
-    }
-  }).sheetRefs;
-  return React__default.createElement(Section, {
-    addSeperation: true,
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : bgMode ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode)
-  }, React__default.createElement(Wrapper, {
-    clampWidth: "normal",
-    addWhitespace: true
-  }, React__default.createElement(Grid.Row, null, facts && facts.map(function (fact, i) {
-    if ((fact === null || fact === void 0 ? void 0 : fact.title) || (fact === null || fact === void 0 ? void 0 : fact.subTitle) || (fact === null || fact === void 0 ? void 0 : fact.image) || (fact === null || fact === void 0 ? void 0 : fact.text)) {
-      return React__default.createElement(Grid.Col, {
-        key: i,
-        medium: {
-          span: 4 / 12
-        },
-        semilarge: columns > 3 ? {
-          span: 3 / 12
-        } : {
-          span: 4 / 12
-        },
-        large: {
-          span: 12 / columns / 12
-        }
-      }, React__default.createElement(Fact, __assign({
-        key: i,
-        ref: cardRefs[i]
-      }, fact, {
-        isCentered: isCentered,
-        isInverted: isInverted
-      })));
-    } else {
-      return React__default.createElement(Grid.Col, {
-        key: i,
-        medium: {
-          span: 4 / 12
-        },
-        semilarge: columns > 3 ? {
-          span: 3 / 12
-        } : {
-          span: 4 / 12
-        },
-        large: {
-          span: 12 / columns / 12
-        }
-      }, React__default.createElement(FactFill, {
-        ref: cardRefs[i],
-        key: i
-      }));
-    }
-  }))));
-};
-var FactGrid$1 = withLibTheme(FactGrid);
-var templateObject_1$n;
-
-var FactsContainer = styled.ul.withConfig({
-  displayName: "FactList__FactsContainer",
-  componentId: "sc-elh0vj-0"
-})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n    padding: 0;\n    margin: 0;\n\n    list-style-type: none;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    padding: 0;\n    margin: 0;\n\n    list-style-type: none;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge);
-var FactItem = styled.li.withConfig({
-  displayName: "FactList__FactItem",
-  componentId: "sc-elh0vj-1"
-})(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n    padding: ", "px;\n\n    background: ", ";\n\n    display: flex;\n    flex-direction: row;\n    align-items: ", ";\n\n    @media ", " {\n        padding: ", "px;\n    }\n"], ["\n    padding: ", "px;\n\n    background: ", ";\n\n    display: flex;\n    flex-direction: row;\n    align-items: ", ";\n\n    @media ", " {\n        padding: ", "px;\n    }\n"])), spacings.nudge * 2, function (_a) {
-  var theme = _a.theme,
-      hasBack = _a.hasBack;
-  return hasBack ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
-}, function (_a) {
-  var hasText = _a.hasText;
-  return hasText ? 'flex-start' : 'center';
-}, mq.medium, spacings.nudge * 3);
-var Icon$2 = styled.img.withConfig({
-  displayName: "FactList__Icon",
-  componentId: "sc-elh0vj-2"
-})(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n    margin-right: ", "px;\n    display: block;\n    max-width: ", "px;\n\n    @media ", " {\n        margin-right: ", "px;\n    }\n"], ["\n    margin-right: ", "px;\n    display: block;\n    max-width: ", "px;\n\n    @media ", " {\n        margin-right: ", "px;\n    }\n"])), spacings.nudge * 3, spacings.nudge * 5, mq.medium, spacings.spacer);
-var ContentBlock = styled.div.withConfig({
-  displayName: "FactList__ContentBlock",
-  componentId: "sc-elh0vj-3"
-})(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge * 2);
-var Description$2 = styled(Copy).withConfig({
-  displayName: "FactList__Description",
-  componentId: "sc-elh0vj-4"
-})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n    max-width: 880px;\n"], ["\n    max-width: 880px;\n"])));
-
-var FactList = function (_a) {
-  var anchorId = _a.anchorId,
-      facts = _a.facts,
-      icon = _a.icon,
-      bgMode = _a.bgMode;
-  var colors = useLibTheme().colors;
-  var isInverted = bgMode === 'inverted';
-  var hasBack = isInverted || bgMode === 'full';
-  return React__default.createElement(Section, {
-    addSeperation: true,
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : bgMode === 'full' ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode, true)
-  }, React__default.createElement(Wrapper, {
-    clampWidth: "normal",
-    addWhitespace: true
-  }, facts && React__default.createElement(FactsContainer, null, facts.map(function (_a, i) {
-    var label = _a.label,
-        text = _a.text;
-    return React__default.createElement(FactItem, {
-      key: i,
-      hasText: !!text,
-      hasBack: hasBack
-    }, icon && React__default.createElement(Icon$2, {
-      src: icon.src,
-      alt: icon.alt || ''
-    }), React__default.createElement(ContentBlock, null, label && React__default.createElement(Copy, {
-      type: "copy-b"
-    }, label), text && React__default.createElement(Description$2, {
-      type: "copy",
-      innerHTML: text
-    })));
-  }))));
-};
-var FactList$1 = withLibTheme(FactList);
-var templateObject_1$m, templateObject_2$j, templateObject_3$g, templateObject_4$e, templateObject_5$c;
-
-var View$4 = styled.div.withConfig({
-  displayName: "Feature__View",
-  componentId: "sc-d7vugh-0"
-})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n    min-width: 270px;\n    padding-bottom: ", "px;\n    text-align: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    min-width: 270px;\n    padding-bottom: ", "px;\n    text-align: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge, function (_a) {
-  var isCentered = _a.isCentered;
-  return isCentered && 'center';
-}, spacings.spacer);
-var TitleLink = styled(Link).withConfig({
-  displayName: "Feature__TitleLink",
-  componentId: "sc-d7vugh-1"
-})(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n    display: inline-block;\n    ", "\n\n    color: ", ";\n    text-decoration: none;\n\n    ", "\n"], ["\n    display: inline-block;\n    ", "\n\n    color: ", ";\n    text-decoration: none;\n\n    ", "\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;
-}, function (_a) {
-  var href = _a.href,
-      isInverted = _a.isInverted,
-      theme = _a.theme;
-  return !href && css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n            &:hover {\n                color: ", ";\n            }\n        "], ["\n            &:hover {\n                color: ", ";\n            }\n        "])), isInverted ? getFonts(theme)['copy-b'].big.colorInverted : getFonts(theme)['copy-b'].big.color);
-});
-var ImageContainer = styled(Link).withConfig({
-  displayName: "Feature__ImageContainer",
-  componentId: "sc-d7vugh-2"
-})(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n    display: flex;\n    justify-content: ", ";\n    width: 100%;\n"], ["\n    display: flex;\n    justify-content: ", ";\n    width: 100%;\n"])), function (_a) {
-  var isCentered = _a.isCentered;
-  return isCentered ? 'center' : 'flex-start';
-});
-var StyledImage$5 = styled(Image).withConfig({
-  displayName: "Feature__StyledImage",
-  componentId: "sc-d7vugh-3"
-})(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n    overflow: hidden;\n    border-radius: ", ";\n"], ["\n    overflow: hidden;\n    border-radius: ", ";\n"])), function (_a) {
-  var theme = _a.theme;
-  return getGlobals(theme).sections.edgeRadius;
-});
-var ArticleContent = styled.div.withConfig({
-  displayName: "Feature__ArticleContent",
-  componentId: "sc-d7vugh-4"
-})(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n    text-align: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        & > * {\n            max-width: 95%;\n            margin-right: ", ";\n            margin-left: ", ";\n        }\n    }\n"], ["\n    text-align: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        & > * {\n            max-width: 95%;\n            margin-right: ", ";\n            margin-left: ", ";\n        }\n    }\n"])), function (_a) {
-  var isCentered = _a.isCentered;
-  return isCentered && 'center';
-}, spacings.nudge * 2, mq.medium, function (_a) {
-  var isCentered = _a.isCentered;
-  return isCentered && 'auto';
-}, function (_a) {
-  var isCentered = _a.isCentered;
-  return isCentered && 'auto';
-});
-var Action = styled.div.withConfig({
-  displayName: "Feature__Action",
-  componentId: "sc-d7vugh-5"
-})(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n    max-width: 100%;\n"], ["\n    max-width: 100%;\n"])));
-var Feature = forwardRef(function (_a, ref) {
-  var title = _a.title,
-      description = _a.description,
-      intro = _a.intro,
-      text = _a.text,
-      link = _a.link,
-      image = _a.image,
-      _b = _a.isInverted,
-      isInverted = _b === void 0 ? false : _b,
-      _c = _a.isCentered,
-      isCentered = _c === void 0 ? false : _c,
-      action = _a.action,
-      className = _a.className;
-  return React__default.createElement(View$4, {
-    ref: ref,
-    isCentered: isCentered,
-    className: className
-  }, (image === null || image === void 0 ? void 0 : image.small) && React__default.createElement(ImageContainer, __assign({}, link, {
-    isCentered: isCentered
-  }), React__default.createElement(StyledImage$5, {
-    small: image.small,
-    medium: image.medium,
-    semilarge: image.semilarge,
-    large: image.large,
-    xlarge: image.xlarge,
-    alt: image.alt,
-    ratios: image.ratios,
-    coverSpace: image.coverSpace === undefined ? true : image.coverSpace,
-    isInverted: isInverted
-  })), React__default.createElement(TitleLink, __assign({}, link, {
-    isInverted: isInverted,
-    ariaLabel: title,
-    "data-sheet": "title"
-  }), title), React__default.createElement(Copy, {
-    size: "small",
-    isInverted: isInverted,
-    "data-sheet": "desc",
-    innerHTML: description
-  }), React__default.createElement(ArticleContent, {
-    isCentered: isCentered
-  }, React__default.createElement(Copy, {
-    type: "copy-b",
-    isInverted: isInverted,
-    innerHTML: intro,
-    "data-sheet": "intro"
-  }), React__default.createElement(Copy, {
-    type: "copy",
-    size: "medium",
-    isInverted: isInverted,
-    innerHTML: text,
-    "data-sheet": "text"
-  })), action && React__default.createElement(Action, null, action(isInverted)));
-});
-Feature.displayName = 'Feature';
-var templateObject_1$l, templateObject_2$i, templateObject_3$f, templateObject_4$d, templateObject_5$b, templateObject_6$8, templateObject_7$5;
-
-var FeatureList = function (_a) {
-  var anchorId = _a.anchorId,
-      features = _a.features,
-      bgMode = _a.bgMode,
-      _b = _a.isCentered,
-      isCentered = _b === void 0 ? false : _b,
-      columns = _a.columns;
-  var colors = useLibTheme().colors;
-  var isInverted = bgMode === 'inverted';
-  var featureCount = (features === null || features === void 0 ? void 0 : features.length) || 0;
-  var isHalf = useMemo(function () {
-    if (columns) {
-      return columns === 2;
-    } // legacy logic
-
-
-    return features && features.length % 2 === 0;
-  }, [features, columns]);
-  var cardRefs = useEqualSheetHeight({
-    listLength: featureCount,
-    identifiers: ['[data-sheet="title"]', '[data-sheet="desc"]', '[data-sheet="intro"]', '[data-sheet="text"]'],
-    responsive: {
-      small: 1,
-      medium: 1,
-      semilarge: 2,
-      large: isHalf ? 2 : 3,
-      xlarge: isHalf ? 2 : 3
-    }
-  }).sheetRefs;
-  return React__default.createElement(Section, {
-    addSeperation: true,
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : bgMode ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode)
-  }, React__default.createElement(Wrapper, {
-    addWhitespace: true,
-    clampWidth: "normal"
-  }, React__default.createElement(Grid.Row, {
-    halign: isHalf || featureCount <= 2 ? 'center' : 'left'
-  }, features === null || features === void 0 ? void 0 : features.map(function (feature, i) {
-    return React__default.createElement(Grid.Col, {
-      semilarge: {
-        span: 6 / 12
-      },
-      large: {
-        span: isHalf ? 5 / 12 : 4 / 12
-      },
-      key: i
-    }, React__default.createElement(Feature, __assign({
-      ref: cardRefs[i]
-    }, feature, {
-      isCentered: isCentered,
-      isInverted: isInverted
-    })));
-  }))));
-};
-var FeatureList$1 = withLibTheme(FeatureList);
-
-var StyledImage$4 = styled(Image).withConfig({
-  displayName: "Gallery__StyledImage",
-  componentId: "sc-1c4lgpr-0"
-})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n    width: 100%;\n    border-radius: ", ";\n    overflow: hidden;\n\n    picture > img {\n        width: 100%;\n        height: 100%;\n    }\n"], ["\n    width: 100%;\n    border-radius: ", ";\n    overflow: hidden;\n\n    picture > img {\n        width: 100%;\n        height: 100%;\n    }\n"])), function (_a) {
-  var theme = _a.theme;
-  return getGlobals(theme).sections.edgeRadius;
-});
-
-var Gallery = function (_a) {
-  var anchorId = _a.anchorId,
-      bgMode = _a.bgMode,
-      images = _a.images;
-  var colors = useLibTheme().colors;
-  var isInverted = bgMode === 'inverted';
-  return React__default.createElement(Section, {
-    addSeperation: true,
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : bgMode ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode)
-  }, React__default.createElement(Wrapper, {
-    addWhitespace: true
-  }, React__default.createElement(Grid.Row, null, images === null || images === void 0 ? void 0 : images.map(function (img, i) {
-    return React__default.createElement(Grid.Col, {
-      key: i,
-      semilarge: {
-        span: img.isFull ? 12 / 12 : 6 / 12
-      }
-    }, React__default.createElement(StyledImage$4, __assign({}, img, {
-      coverSpace: true,
-      isInverted: isInverted
-    })));
-  }))));
-};
-var Gallery$1 = withLibTheme(Gallery);
-var templateObject_1$k;
-
-var Poster$2 = 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$h || (templateObject_2$h = __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$j || (templateObject_1$j = __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$e || (templateObject_3$e = __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$c || (templateObject_4$c = __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$2).withConfig({
-  displayName: "Header__StyledPoster",
-  componentId: "sc-12uexfr-2"
-})(templateObject_5$a || (templateObject_5$a = __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$1 = styled.div.withConfig({
-  displayName: "Header__Overlay",
-  componentId: "sc-12uexfr-3"
-})(templateObject_6$7 || (templateObject_6$7 = __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$3 = styled.div.withConfig({
-  displayName: "Header__Content",
-  componentId: "sc-12uexfr-4"
-})(templateObject_8$1 || (templateObject_8$1 = __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$4 || (templateObject_7$4 = __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$1 || (templateObject_9$1 = __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$2 = styled(Heading).withConfig({
-  displayName: "Header__Title",
-  componentId: "sc-12uexfr-6"
-})(templateObject_10$1 || (templateObject_10$1 = __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$2 = styled(Copy).withConfig({
-  displayName: "Header__Text",
-  componentId: "sc-12uexfr-7"
-})(templateObject_11$1 || (templateObject_11$1 = __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$4 = styled(Actions).withConfig({
-  displayName: "Header__StyledActions",
-  componentId: "sc-12uexfr-8"
-})(templateObject_12$1 || (templateObject_12$1 = __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$1, {
-    bgValue: overlay,
-    textOnImage: textOnImage
-  }), React__default.createElement(Content$3, {
-    isCentered: isCentered,
-    textOnImage: textOnImage
-  }, title && React__default.createElement(Title$2, {
-    isInverted: true,
-    size: "heading-1",
-    isCentered: isCentered,
-    renderAs: titleAs,
-    innerHTML: title
-  }), text && React__default.createElement(Text$2, {
-    isInverted: true,
-    isCentered: isCentered,
-    type: "copy-b",
-    size: "big",
-    innerHTML: text
-  }), (primaryAction || secondaryAction) && React__default.createElement(StyledActions$4, {
-    isCentered: isCentered,
-    primary: primaryAction && primaryAction(true),
-    secondary: secondaryAction && secondaryAction(true)
-  })))), hasContent && !textOnImage && React__default.createElement(ContentMobile, null, title && React__default.createElement(Title$2, {
-    size: "heading-1",
-    isCentered: isCentered,
-    renderAs: titleAs,
-    innerHTML: title,
-    isInverted: isInverted
-  }), text && React__default.createElement(Text$2, {
-    type: "copy-b",
-    size: "big",
-    isCentered: isCentered,
-    innerHTML: text,
-    isInverted: isInverted
-  }), (primaryAction || secondaryAction) && React__default.createElement(StyledActions$4, {
-    isCentered: isCentered,
-    primary: primaryAction && primaryAction(isInverted),
-    secondary: secondaryAction && secondaryAction(isInverted)
-  })));
-};
-var Header$1 = withLibTheme(Header);
-var templateObject_1$j, templateObject_2$h, templateObject_3$e, templateObject_4$c, templateObject_5$a, templateObject_6$7, templateObject_7$4, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1;
-
-var StyledSection = styled(Section).withConfig({
-  displayName: "IconList__StyledSection",
-  componentId: "sc-10wpi8n-0"
-})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n    margin: 0 auto;\n\n    @media ", " {\n        margin: ", ";\n\n        text-align: ", ";\n    }\n"], ["\n    margin: 0 auto;\n\n    @media ", " {\n        margin: ", ";\n\n        text-align: ", ";\n    }\n"])), mq.semilarge, function (_a) {
-  var isCentered = _a.isCentered;
-  return isCentered ? '0 auto' : '0';
-}, function (_a) {
-  var isCentered = _a.isCentered;
-  return isCentered ? 'center' : 'left';
-});
-var ItemContainer = styled.div.withConfig({
-  displayName: "IconList__ItemContainer",
-  componentId: "sc-10wpi8n-1"
-})(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    text-align: center;\n\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        justify-content: ", ";\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    text-align: center;\n\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        justify-content: ", ";\n    }\n"])), spacings.spacer, mq.semilarge, function (_a) {
-  var isCentered = _a.isCentered;
-  return isCentered ? 'center' : 'flex-start';
-});
-var Items$1 = styled.ul.withConfig({
-  displayName: "IconList__Items",
-  componentId: "sc-10wpi8n-2"
-})(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n    display: ", ";\n    align-items: center;\n    justify-content: ", ";\n\n    flex-wrap: wrap;\n    padding: 0;\n    margin: 0;\n    margin-top: -", "px;\n    margin-left: -", "px;\n\n    list-style: none;\n\n    @media ", " {\n        margin-top: -", "px;\n        margin-left: -", "px;\n\n        & > * {\n            flex: 0 1 auto;\n        }\n    }\n"], ["\n    display: ", ";\n    align-items: center;\n    justify-content: ", ";\n\n    flex-wrap: wrap;\n    padding: 0;\n    margin: 0;\n    margin-top: -", "px;\n    margin-left: -", "px;\n\n    list-style: none;\n\n    @media ", " {\n        margin-top: -", "px;\n        margin-left: -", "px;\n\n        & > * {\n            flex: 0 1 auto;\n        }\n    }\n"])), function (_a) {
-  var isVisible = _a.isVisible;
-  return isVisible ? 'flex' : 'block';
-}, function (_a) {
-  var isCentered = _a.isCentered;
-  return isCentered ? 'center' : 'flex-start';
-}, spacings.nudge * 2, spacings.nudge * 2, mq.medium, spacings.spacer, spacings.spacer);
-var Item$1 = styled.li.withConfig({
-  displayName: "IconList__Item",
-  componentId: "sc-10wpi8n-3"
-})(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n    padding-top: ", "px;\n    padding-left: ", "px;\n\n    display: ", ";\n\n    & > img {\n        width: 100%;\n    }\n\n    @media ", " {\n        padding-top: ", "px;\n        padding-left: ", "px;\n\n        & > img {\n            width: auto;\n        }\n    }\n\n    @media ", " {\n        display: ", ";\n    }\n\n    @media ", " {\n        display: ", ";\n    }\n"], ["\n    padding-top: ", "px;\n    padding-left: ", "px;\n\n    display: ", ";\n\n    & > img {\n        width: 100%;\n    }\n\n    @media ", " {\n        padding-top: ", "px;\n        padding-left: ", "px;\n\n        & > img {\n            width: auto;\n        }\n    }\n\n    @media ", " {\n        display: ", ";\n    }\n\n    @media ", " {\n        display: ", ";\n    }\n"])), spacings.nudge * 2, spacings.nudge * 2, function (_a) {
-  var index = _a.index,
-      isVisible = _a.isVisible;
-  return isVisible || index < 6 ? 'block' : 'none';
-}, mq.medium, spacings.spacer, spacings.spacer, mq.semilarge, function (_a) {
-  var index = _a.index,
-      isVisible = _a.isVisible;
-  return isVisible || index < 8 ? 'block' : 'none';
-}, mq.large, function (_a) {
-  var index = _a.index,
-      isVisible = _a.isVisible;
-  return isVisible || index < 10 ? 'block' : 'none';
-});
-var ItemLink = styled(Link).withConfig({
-  displayName: "IconList__ItemLink",
-  componentId: "sc-10wpi8n-4"
-})(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n    display: block;\n    outline-color: ", ";\n"], ["\n    display: block;\n    outline-color: ", ";\n"])), function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
-});
-var ShowMore = styled.div.withConfig({
-  displayName: "IconList__ShowMore",
-  componentId: "sc-10wpi8n-5"
-})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n    display: ", ";\n\n    background: none;\n    border: none;\n    text-align: ", ";\n\n    @media ", " {\n        display: ", ";\n    }\n\n    @media ", " {\n        display: ", ";\n    }\n"], ["\n    display: ", ";\n\n    background: none;\n    border: none;\n    text-align: ", ";\n\n    @media ", " {\n        display: ", ";\n    }\n\n    @media ", " {\n        display: ", ";\n    }\n"])), function (_a) {
-  var itemCount = _a.itemCount;
-  return itemCount && itemCount > 6 ? 'block' : 'none';
-}, function (_a) {
-  var isCentered = _a.isCentered;
-  return isCentered ? 'center' : 'left';
-}, mq.semilarge, function (_a) {
-  var itemCount = _a.itemCount;
-  return itemCount && itemCount > 8 ? 'block' : 'none';
-}, mq.large, function (_a) {
-  var itemCount = _a.itemCount;
-  return itemCount && itemCount > 10 ? 'block' : 'none';
-});
-var StyledActions$3 = styled(Actions).withConfig({
-  displayName: "IconList__StyledActions",
-  componentId: "sc-10wpi8n-6"
-})(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n    margin-top: ", "px;\n\n    @media ", " {\n        display: block;\n        text-align: ", ";\n    }\n"], ["\n    margin-top: ", "px;\n\n    @media ", " {\n        display: block;\n        text-align: ", ";\n    }\n"])), spacings.spacer, mq.medium, function (_a) {
-  var isCentered = _a.isCentered;
-  return isCentered && 'center';
-});
-
-var IconList = function (_a) {
-  var anchorId = _a.anchorId,
-      items = _a.items,
-      _b = _a.isCentered,
-      isCentered = _b === void 0 ? false : _b,
-      primaryAction = _a.primaryAction,
-      secondaryAction = _a.secondaryAction,
-      toggle = _a.toggle,
-      _c = _a.showLessText,
-      showLessText = _c === void 0 ? 'show less' : _c,
-      _d = _a.showMoreText,
-      showMoreText = _d === void 0 ? 'show more' : _d,
-      enableToggle = _a.enableToggle,
-      bgMode = _a.bgMode;
-  var colors = useLibTheme().colors;
-  var isInverted = bgMode === 'inverted';
-
-  var _e = useState(!enableToggle),
-      showMore = _e[0],
-      setShowMore = _e[1];
-
-  var handleToggleClick = function () {
-    setShowMore(function (prev) {
-      return !prev;
-    });
-  };
-
-  return React__default.createElement(StyledSection, {
-    addSeperation: true,
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : bgMode ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode, true),
-    isCentered: isCentered
-  }, React__default.createElement(Wrapper, {
-    clampWidth: "normal",
-    addWhitespace: true
-  }, React__default.createElement(ItemContainer, {
-    isCentered: isCentered
-  }, React__default.createElement(Items$1, {
-    isVisible: !showMore ? true : showMore === true,
-    isCentered: isCentered
-  }, items === null || items === void 0 ? void 0 : items.map(function (_a, i) {
-    var src = _a.src,
-        link = _a.link,
-        alt = _a.alt,
-        ratio = _a.ratio,
-        showPlaceholder = _a.showPlaceholder;
-    return React__default.createElement(Item$1, {
-      isVisible: showMore,
-      index: i,
-      key: i
-    }, React__default.createElement(ItemLink, __assign({}, link, {
-      isInverted: isInverted,
-      ariaLabel: alt
-    }), React__default.createElement(Image, {
-      "data-img-loaded": false,
-      isInverted: isInverted,
-      small: src,
-      alt: alt,
-      ratios: ratio ? {
-        small: ratio
-      } : undefined,
-      showPlaceholder: showPlaceholder
-    })));
-  }))), enableToggle && React__default.createElement(ShowMore, {
-    isCentered: isCentered,
-    itemCount: (items === null || items === void 0 ? void 0 : items.length) || 0
-  }, toggle ? toggle({
-    isInverted: isInverted,
-    showLessText: showLessText,
-    showMoreText: showMoreText,
-    isToggled: showMore,
-    clickHandler: handleToggleClick,
-    additionalProps: {
-      'aria-pressed': showMore
-    }
-  }) : React__default.createElement(Pointer.View, {
-    as: "button",
-    isInverted: isInverted,
-    "aria-pressed": showMore,
-    onClick: function () {
-      return handleToggleClick();
-    }
-  }, React__default.createElement(Pointer.Label, null, showMore ? showLessText : showMoreText))), (primaryAction || secondaryAction) && React__default.createElement(StyledActions$3, {
-    isCentered: isCentered,
-    primary: primaryAction && primaryAction(isInverted),
-    secondary: secondaryAction && secondaryAction(isInverted)
-  })));
-};
-var IconList$1 = withLibTheme(IconList);
-var templateObject_1$i, templateObject_2$g, templateObject_3$d, templateObject_4$b, templateObject_5$9, templateObject_6$6, templateObject_7$3;
-
-var List$1 = styled.ul.withConfig({
-  displayName: "IndexList__List",
-  componentId: "sc-9my0y5-0"
-})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n    margin: 0;\n    padding: 0;\n    list-style: none;\n\n    max-width: 880px;\n\n    & > li + li {\n        border-top: 1px solid\n            ", ";\n    }\n\n    & > li:first-child {\n        border-top: 1px solid\n            ", ";\n    }\n\n    & > li:last-child {\n        border-bottom: 1px solid\n            ", ";\n    }\n"], ["\n    margin: 0;\n    padding: 0;\n    list-style: none;\n\n    max-width: 880px;\n\n    & > li + li {\n        border-top: 1px solid\n            ", ";\n    }\n\n    & > li:first-child {\n        border-top: 1px solid\n            ", ";\n    }\n\n    & > li:last-child {\n        border-bottom: 1px solid\n            ", ";\n    }\n"])), function (_a) {
-  var theme = _a.theme,
-      hasBg = _a.hasBg,
-      isInverted = _a.isInverted;
-  return hasBg && !isInverted ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
-}, function (_a) {
-  var theme = _a.theme,
-      hasBg = _a.hasBg,
-      isInverted = _a.isInverted;
-  return hasBg && !isInverted ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
-}, function (_a) {
-  var theme = _a.theme,
-      hasBg = _a.hasBg,
-      isInverted = _a.isInverted;
-  return hasBg && !isInverted ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
-});
-var ListItem$1 = styled.li.withConfig({
-  displayName: "IndexList__ListItem",
-  componentId: "sc-9my0y5-1"
-})(templateObject_2$f || (templateObject_2$f = __makeTemplateObject([""], [""])));
-var IndexLink = styled(Link).withConfig({
-  displayName: "IndexList__IndexLink",
-  componentId: "sc-9my0y5-2"
-})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    max-width: 100%;\n    padding: ", "px 0;\n\n    ", "\n"], ["\n    display: inline-flex;\n    align-items: center;\n    max-width: 100%;\n    padding: ", "px 0;\n\n    ", "\n"])), spacings.nudge, copyStyle('copy', 'big'));
-var LinkLabel = styled.span.withConfig({
-  displayName: "IndexList__LinkLabel",
-  componentId: "sc-9my0y5-3"
-})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n    display: inline-block;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n"], ["\n    display: inline-block;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n"])));
-var IconWrapper = styled.span.withConfig({
-  displayName: "IndexList__IconWrapper",
-  componentId: "sc-9my0y5-4"
-})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n    display: inline-block;\n\n    margin-left: ", "px;\n"], ["\n    display: inline-block;\n\n    margin-left: ", "px;\n"])), spacings.nudge * 2);
-
-var IndexList = function (_a) {
-  var anchorId = _a.anchorId,
-      items = _a.items,
-      bgMode = _a.bgMode,
-      customIcon = _a.customIcon,
-      scrollToOffset = _a.scrollToOffset;
-
-  var _b = useLibTheme(),
-      colors = _b.colors,
-      theme = _b.theme;
-
-  var setTargetPos = useScrollTo(500);
-  var semilarge = useMediaQueries().semilarge;
-
-  var _c = useState(0),
-      topOffset = _c[0],
-      setTopOffset = _c[1];
-
-  var isInverted = bgMode === 'inverted';
-  var hasBg = bgMode === 'full';
-
-  var handleLinkClick = function (ev) {
-    var _a;
-
-    if (!(ev === null || ev === void 0 ? void 0 : ev.currentTarget)) return;
-    ev.preventDefault();
-    var href = ev.currentTarget.getAttribute('href');
-    if (!href) return;
-    var target = document.getElementById(((_a = href.split('#')) === null || _a === void 0 ? void 0 : _a[1]) || href);
-
-    if (target) {
-      setTargetPos(target.getBoundingClientRect().top + window.scrollY - (scrollToOffset || topOffset));
-    }
-
-    if (window) {
-      var url = new URL(window.location);
-      url.hash = href.split('#')[1];
-      window.history.pushState({}, '', url);
-    }
-  };
-
-  useEffect(function () {
-    if (scrollToOffset) return; // if header is defined get navbar height and generate top offset
-
-    var header = document.querySelector('header[data-navbar-ident]');
-    var navbarIdent = header === null || header === void 0 ? void 0 : header.getAttribute('data-navbar-ident');
-    if (!navbarIdent) return;
-    var isStickable = getNavbarState(navbarIdent).isStickable;
-    if (!isStickable) return; // calculate offset from navbar height
-
-    var navbarHeights = getFullNavbarHeights(theme, navbarIdent);
-    if (semilarge) setTopOffset(navbarHeights.small[1] + spacings.spacer);else setTopOffset(navbarHeights.small[0] + spacings.spacer);
-  }, [theme, semilarge, scrollToOffset]);
-  return React__default.createElement(Section, {
-    addSeperation: true,
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : hasBg ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode, true)
-  }, React__default.createElement(Wrapper, {
-    addWhitespace: true
-  }, React__default.createElement(List$1, {
-    hasBg: hasBg,
-    isInverted: isInverted
-  }, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
-    return React__default.createElement(ListItem$1, {
-      key: i
-    }, React__default.createElement(IndexLink, __assign({}, item.link, {
-      isInverted: isInverted,
-      onClick: handleLinkClick
-    }), React__default.createElement(LinkLabel, null, item.label), React__default.createElement(IconWrapper, null, customIcon ? customIcon({
-      isInverted: isInverted
-    }) : React__default.createElement(ArrowDown, null))));
-  }))));
-};
-var IndexList$1 = withLibTheme(IndexList);
-var templateObject_1$h, templateObject_2$f, templateObject_3$c, templateObject_4$a, templateObject_5$8;
-
-var Intro$1 = function (_a) {
-  var anchorId = _a.anchorId,
-      title = _a.title,
-      titleAs = _a.titleAs,
-      _b = _a.titleSize,
-      titleSize = _b === void 0 ? 'heading-2' : _b,
-      superTitle = _a.superTitle,
-      superTitleAs = _a.superTitleAs,
-      abstract = _a.abstract,
-      text = _a.text,
-      primaryAction = _a.primaryAction,
-      secondaryAction = _a.secondaryAction,
-      _c = _a.isCentered,
-      isCentered = _c === void 0 ? false : _c,
-      _d = _a.isStackable,
-      isStackable = _d === void 0 ? false : _d,
-      bgMode = _a.bgMode,
-      image = _a.image;
-  var colors = useLibTheme().colors;
-  var isInverted = bgMode === 'inverted'; // set default ratio settings
-
-  if (image && !(image === null || image === void 0 ? void 0 : image.ratios)) {
-    image.ratios = {
-      small: {
-        h: 1,
-        w: 1
-      }
-    };
-  }
-
-  return React__default.createElement(Section, {
-    addSeperation: true,
-    anchorId: anchorId,
-    isStackable: isStackable,
-    bgColor: isInverted ? colors.sectionBg.dark : bgMode ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode)
-  }, React__default.createElement(Wrapper, {
-    clampWidth: "normal",
-    addWhitespace: true
-  }, React__default.createElement(IntroBlock, {
-    title: title,
-    titleAs: titleAs,
-    titleSize: titleSize,
-    superTitle: superTitle,
-    superTitleAs: superTitleAs,
-    abstract: abstract,
-    text: text,
-    colorMode: isInverted ? 'inverted' : 'default',
-    secondaryAction: secondaryAction,
-    primaryAction: primaryAction,
-    isCentered: isCentered,
-    image: image,
-    clampTitle: true,
-    clampAbstract: true,
-    clampText: true
-  })));
-};
-var Intro$2 = withLibTheme(Intro$1);
-
-var MapSection = styled(Section).withConfig({
-  displayName: "Map__MapSection",
-  componentId: "sc-6qc5jb-0"
-})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n    position: relative;\n    min-height: 500px;\n    z-index: 0;\n"], ["\n    position: relative;\n    min-height: 500px;\n    z-index: 0;\n"])));
-var MapContainer = styled.div.withConfig({
-  displayName: "Map__MapContainer",
-  componentId: "sc-6qc5jb-1"
-})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n    position: relative;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    z-index: 0;\n\n    height: 100%;\n    min-height: 230px;\n\n    @media ", " {\n        position: absolute;\n        /** \n            calculate width of 6 grid cols (grid width = viewport width without wrapper paddings)\n            and add left or right wrapper padding afterwards\n         */\n        width: calc(\n            ", " + ", "px\n        );\n        left: ", ";\n        right: ", ";\n    }\n\n    @media ", " {\n        width: calc(50% - ", "px ", "px);\n    }\n\n    @media ", " {\n        width: calc(\n            ", "px - ", "px +\n                ", "px\n        );\n\n        left: ", ";\n        right: ", ";\n\n        ", ";\n    }\n"], ["\n    position: relative;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    z-index: 0;\n\n    height: 100%;\n    min-height: 230px;\n\n    @media ", " {\n        position: absolute;\n        /** \n            calculate width of 6 grid cols (grid width = viewport width without wrapper paddings)\n            and add left or right wrapper padding afterwards\n         */\n        width: calc(\n            ", " + ", "px\n        );\n        left: ", ";\n        right: ", ";\n    }\n\n    @media ", " {\n        width: calc(50% - ", "px ", "px);\n    }\n\n    @media ", " {\n        width: calc(\n            ", "px - ", "px +\n                ", "px\n        );\n\n        left: ", ";\n        right: ", ";\n\n        ", ";\n    }\n"])), mq.semilarge, getGridWidth({
-  cols: 6,
-  gridWidth: "100% - ".concat(wrapperWhitespace * 2, "px ")
-}), wrapperWhitespace, function (_a) {
-  var isMirrored = _a.isMirrored;
-  return isMirrored ? 'auto' : '0';
-}, function (_a) {
-  var isMirrored = _a.isMirrored;
-  return isMirrored ? '0' : 'auto';
-}, mq.xlarge, gridSettings.gutter, wrapperWhitespace, mq.xxlarge, spacings.wrapperLarge / 2, gridSettings.gutter, wrapperWhitespace, function (_a) {
-  var isMirrored = _a.isMirrored;
-  return isMirrored ? 'auto' : '50%';
-}, function (_a) {
-  var isMirrored = _a.isMirrored;
-  return isMirrored ? '50%' : 'auto';
-}, function (_a) {
-  var isMirrored = _a.isMirrored;
-  return css(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n                transform: translateX(\n                    calc(\n                        ", "\n                            (", "px)\n                    )\n                );\n            "], ["\n                transform: translateX(\n                    calc(\n                        ", "\n                            (", "px)\n                    )\n                );\n            "])), isMirrored ? "(100% + ".concat(gridSettings.gutter, "px) - ") : "(-100% - ".concat(gridSettings.gutter, "px) + "), wrapperWhitespace);
-});
-var CardWrapper = styled(Wrapper).withConfig({
-  displayName: "Map__CardWrapper",
-  componentId: "sc-6qc5jb-2"
-})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n    pointer-events: none;\n"], ["\n    pointer-events: none;\n"])));
-var CardContainer = styled.div.withConfig({
-  displayName: "Map__CardContainer",
-  componentId: "sc-6qc5jb-3"
-})(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    width: 100%;\n    pointer-events: all;\n\n    ", "\n\n    @media ", " {\n        ", "\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    width: 100%;\n    pointer-events: all;\n\n    ", "\n\n    @media ", " {\n        ", "\n    }\n"])), function (_a) {
-  var theme = _a.theme;
-  return withRange(getGlobals(theme).sections.seperation.padding.default, 'padding-bottom');
-}, mq.semilarge, function (_a) {
-  var theme = _a.theme;
-  return withRange(getGlobals(theme).sections.seperation.padding.default, 'padding-top');
-});
-var InfoCardView = styled.div.withConfig({
-  displayName: "Map__InfoCardView",
-  componentId: "sc-6qc5jb-4"
-})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n    min-height: 100px;\n    pointer-events: all;\n\n    flex: 1 0 80%;\n    max-width: 80%;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    min-height: 100px;\n    pointer-events: all;\n\n    flex: 1 0 80%;\n    max-width: 80%;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.spacer);
-var CardHeader = styled.div.withConfig({
-  displayName: "Map__CardHeader",
-  componentId: "sc-6qc5jb-5"
-})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n    display: flex;\n"], ["\n    display: flex;\n"])));
-var ContactList = styled.ul.withConfig({
-  displayName: "Map__ContactList",
-  componentId: "sc-6qc5jb-6"
-})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    padding: 0;\n    list-style-type: none;\n    color: ", ";\n\n    li {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        padding: 0;\n        margin: 0;\n    }\n\n    li + li {\n        margin-top: ", "px;\n    }\n\n    span:first-child {\n        flex: 0 0 30px;\n        max-width: 30px;\n\n        & > * {\n            max-width: 100%;\n        }\n    }\n"], ["\n    padding: 0;\n    list-style-type: none;\n    color: ", ";\n\n    li {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        padding: 0;\n        margin: 0;\n    }\n\n    li + li {\n        margin-top: ", "px;\n    }\n\n    span:first-child {\n        flex: 0 0 30px;\n        max-width: 30px;\n\n        & > * {\n            max-width: 100%;\n        }\n    }\n"])), function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return isInverted ? getColors(theme).text.inverted : getColors(theme).text.default;
-}, spacings.nudge * 3);
-var ContactListLink = styled(Link).withConfig({
-  displayName: "Map__ContactListLink",
-  componentId: "sc-6qc5jb-7"
-})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: block;\n\n    ", "\n    color: ", ";\n\n    * + & {\n        margin-left: ", "px;\n    }\n"], ["\n    display: block;\n\n    ", "\n    color: ", ";\n\n    * + & {\n        margin-left: ", "px;\n    }\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;
-}, spacings.nudge * 1.5);
-var AddressContainer = styled.div.withConfig({
-  displayName: "Map__AddressContainer",
-  componentId: "sc-6qc5jb-8"
-})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    display: -ms-grid;\n    display: grid;\n\n    ", "\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: -ms-grid;\n    display: grid;\n\n    ", "\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), function (_a) {
-  var hasIcon = _a.hasIcon;
-  return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        -ms-grid-columns: ", " 1fr;\n        grid-template-columns: ", " 1fr;\n        -ms-grid-rows: ", " 1fr;\n        grid-auto-rows: ", " 1fr;\n    "], ["\n        -ms-grid-columns: ", " 1fr;\n        grid-template-columns: ", " 1fr;\n        -ms-grid-rows: ", " 1fr;\n        grid-auto-rows: ", " 1fr;\n    "])), hasIcon ? 'min-content' : '', hasIcon ? 'min-content' : '', hasIcon ? 'min-content' : '', hasIcon ? 'min-content' : '');
-}, spacings.nudge * 2);
-
-var CompanyInfo = function (_a) {
-  var isInverted = _a.isInverted,
-      companyName = _a.companyName,
-      address = _a.address,
-      customIcon = _a.customIcon;
-  return React__default.createElement(AddressContainer, {
-    hasIcon: !!customIcon
-  }, customIcon && React__default.createElement("span", null, " ", customIcon(), " "), React__default.createElement("div", null, React__default.createElement(Copy, {
-    type: "copy-b",
-    size: "big",
-    isInverted: isInverted
-  }, companyName), address && React__default.createElement(Copy, {
-    type: "copy-b",
-    size: "big",
-    isInverted: isInverted
-  }, React__default.createElement("div", null, address.street), React__default.createElement("div", null, "".concat(address.postalCode, " ").concat(address.city)), React__default.createElement("div", null, address.country))));
-};
-
-var Desc = styled(Copy).withConfig({
-  displayName: "Map__Desc",
-  componentId: "sc-6qc5jb-9"
-})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    @media ", " {\n        margin-top: ", "px;\n    }\n"], ["\n    @media ", " {\n        margin-top: ", "px;\n    }\n"])), mq.semilarge, spacings.spacer * 2.5);
-
-var LocationInfoCard = function (_a) {
-  var _b, _c, _d, _e, _f;
-
-  var isInverted = _a.isInverted,
-      title = _a.title,
-      titleAs = _a.titleAs,
-      superTitle = _a.superTitle,
-      superTitleAs = _a.superTitleAs,
-      companyName = _a.companyName,
-      address = _a.address,
-      addressIcon = _a.addressIcon,
-      contact = _a.contact,
-      description = _a.description;
-  var colors = useLibTheme().colors;
-  var addressIconContent = addressIcon ? addressIcon({
-    isInverted: isInverted
-  }) : React__default.createElement(LocationPin, {
-    iconColor: isInverted ? colors.text.inverted : colors.text.default
-  });
-  var phoneIconContent = ((_b = contact === null || contact === void 0 ? void 0 : contact.telephone) === null || _b === void 0 ? void 0 : _b.icon) ? contact.telephone.icon({
-    isInverted: isInverted
-  }) : React__default.createElement(Phone, null);
-  var mailIconContent = ((_c = contact === null || contact === void 0 ? void 0 : contact.email) === null || _c === void 0 ? void 0 : _c.icon) ? contact.email.icon({
-    isInverted: isInverted
-  }) : React__default.createElement(Mail, null);
-  return React__default.createElement(InfoCardView, null, React__default.createElement(CardHeader, null, React__default.createElement(IntroBlock, {
-    colorMode: isInverted ? 'inverted' : 'default',
-    title: title,
-    titleAs: titleAs,
-    superTitle: superTitle,
-    superTitleAs: superTitleAs
-  })), companyName && React__default.createElement(CompanyInfo, {
-    companyName: companyName || '',
-    address: address,
-    customIcon: addressIconContent ? function () {
-      return addressIconContent;
-    } : undefined,
-    isInverted: isInverted
-  }), contact && React__default.createElement(ContactList, {
-    isInverted: isInverted
-  }, ((_d = contact === null || contact === void 0 ? void 0 : contact.telephone) === null || _d === void 0 ? void 0 : _d.label) && React__default.createElement("li", null, phoneIconContent && React__default.createElement("span", null, phoneIconContent), React__default.createElement(ContactListLink, {
-    isInverted: isInverted,
-    href: "tel:".concat(contact.telephone.link || contact.telephone.label)
-  }, (_e = contact.telephone) === null || _e === void 0 ? void 0 : _e.label)), ((_f = contact === null || contact === void 0 ? void 0 : contact.email) === null || _f === void 0 ? void 0 : _f.label) && React__default.createElement("li", null, mailIconContent && React__default.createElement("span", null, mailIconContent), React__default.createElement(ContactListLink, {
-    isInverted: isInverted,
-    href: "mailto:".concat((contact === null || contact === void 0 ? void 0 : contact.email.link) || contact.email.label)
-  }, contact === null || contact === void 0 ? void 0 : contact.email.label))), React__default.createElement(Desc, {
-    isInverted: isInverted,
-    innerHTML: description
-  }));
-};
-
-var Controls = styled.div.withConfig({
-  displayName: "Map__Controls",
-  componentId: "sc-6qc5jb-10"
-})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    flex: 1 0 20%;\n    max-width: 20%;\n    display: flex;\n    flex-direction: column;\n    align-self: flex-start;\n    margin-left: auto;\n    text-align: right;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    flex: 1 0 20%;\n    max-width: 20%;\n    display: flex;\n    flex-direction: column;\n    align-self: flex-start;\n    margin-left: auto;\n    text-align: right;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge);
-var FylToCtrlContainer = styled.button.withConfig({
-  displayName: "Map__FylToCtrlContainer",
-  componentId: "sc-6qc5jb-11"
-})(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1000;\n    background: none;\n    border: none;\n    margin: 0;\n    padding: 0;\n\n    margin-top: ", "px;\n    margin-right: ", "px;\n    color: ", ";\n\n    cursor: pointer;\n"], ["\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1000;\n    background: none;\n    border: none;\n    margin: 0;\n    padding: 0;\n\n    margin-top: ", "px;\n    margin-right: ", "px;\n    color: ", ";\n\n    cursor: pointer;\n"])), spacings.spacer, spacings.spacer, function (_a) {
-  var theme = _a.theme;
-  return getColors(theme).elementBg.dark;
-});
-
-var Map = function (_a) {
-  var anchorId = _a.anchorId,
-      bgMode = _a.bgMode,
-      _b = _a.isMirrored,
-      isMirrored = _b === void 0 ? false : _b,
-      provider = _a.provider,
-      attribution = _a.attribution,
-      _c = _a.center,
-      center = _c === void 0 ? [51.505, -0.09] : _c,
-      _d = _a.zoom,
-      zoom = _d === void 0 ? 5 : _d,
-      flyToZoom = _a.flyToZoom,
-      initialLocation = _a.initialLocation,
-      locations = _a.locations,
-      _e = _a.allMarkersOnInit,
-      allMarkersOnInit = _e === void 0 ? false : _e,
-      fitBoundsPadding = _a.fitBoundsPadding,
-      flyToControl = _a.flyToControl,
-      controlNext = _a.controlNext,
-      controlPrev = _a.controlPrev;
-  var colors = useLibTheme().colors;
-
-  var _f = useState(initialLocation || ''),
-      activeLocationId = _f[0],
-      setActiveLocationId = _f[1];
-
-  var _g = useState(false),
-      isDirty = _g[0],
-      setIsDirty = _g[1];
-
-  var activeLocation = useMemo(function () {
-    return locations === null || locations === void 0 ? void 0 : locations.find(function (l) {
-      return l.id === activeLocationId;
-    });
-  }, [activeLocationId, locations]);
-  var hasBg = bgMode === 'full';
-  var isInverted = bgMode === 'inverted';
-  var defaultMarker = {
-    size: [28, 28],
-    anchor: [14, 28],
-    sizeActive: [70, 70],
-    anchorActive: [35, 70],
-    url: getSVGDataImg(React__default.createElement(LocationPin, null))
-  };
-
-  var _h = useLeafletMap({
-    url: provider,
-    attribution: attribution,
-    center: center,
-    zoom: zoom,
-    activeMarkerId: activeLocationId,
-    markers: locations === null || locations === void 0 ? void 0 : locations.map(function (_a) {
-      var id = _a.id,
-          position = _a.position,
-          icon = _a.icon;
-      return {
-        id: id,
-        position: position,
-        icon: icon || defaultMarker,
-        isInteractive: true
-      };
-    }),
-    fitBoundsPadding: fitBoundsPadding,
-    onMarkerClick: setActiveLocationId
-  }),
-      isLoaded = _h.isLoaded,
-      setMapContainer = _h.setContainer,
-      flyToActive = _h.flyToActive,
-      showAllMarkers = _h.showAllMarkers;
-
-  var goToNext = function () {
-    setActiveLocationId(function (prev) {
-      if (!locations) return prev;
-      var currentIndex = locations.findIndex(function (l) {
-        return l.id === activeLocationId;
-      });
-      if (currentIndex === -1) return prev; // get new index
-
-      var newIndex = (currentIndex + 1) % locations.length;
-      return locations[newIndex].id;
-    });
-  };
-
-  var goToPrevious = function () {
-    setActiveLocationId(function (prev) {
-      if (!locations) return prev;
-      var currentIndex = locations.findIndex(function (l) {
-        return l.id === activeLocationId;
-      });
-      if (currentIndex === -1) return prev; // get new index
-
-      var newIndex = currentIndex - 1 < 0 ? locations.length - 1 : currentIndex - 1;
-      return locations[newIndex].id;
-    });
-  };
-
-  useEffect(function () {
-    if (isLoaded && !isDirty) {
-      if (allMarkersOnInit) showAllMarkers();
-    } else {
-      flyToActive(flyToZoom);
-    }
-  }, [activeLocationId, allMarkersOnInit, flyToActive, flyToZoom, initialLocation, isDirty, isLoaded, showAllMarkers]);
-  useEffect(function () {
-    if (!isDirty && activeLocationId !== initialLocation) setIsDirty(true);
-  }, [activeLocationId, initialLocation, isDirty]);
-  return React__default.createElement(MapSection, {
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : hasBg ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode, true)
-  }, locations && generateLocalBusiness(locations), React__default.createElement(MapContainer, {
-    ref: setMapContainer,
-    isMirrored: isMirrored
-  }, flyToControl && React__default.createElement(FylToCtrlContainer, {
-    onClick: function (ev) {
-      ev.stopPropagation();
-      flyToActive(flyToZoom);
-    }
-  }, flyToControl)), React__default.createElement(CardWrapper, {
-    addWhitespace: true,
-    clampWidth: "normal"
-  }, React__default.createElement(Grid.Row, null, React__default.createElement(Grid.Col, {
-    semilarge: {
-      span: 6 / 12,
-      move: (isMirrored ? 6 : 0) / 12
-    }
-  }), React__default.createElement(Grid.Col, {
-    semilarge: {
-      span: 6 / 12,
-      move: (isMirrored ? -6 : 0) / 12
-    }
-  }, React__default.createElement(CardContainer, {
-    isMirrored: isMirrored
-  }, isValidArray(locations, false) && React__default.createElement(React__default.Fragment, null, activeLocation && React__default.createElement(LocationInfoCard, __assign({}, activeLocation, {
-    isInverted: isInverted
-  })), locations.length > 1 && React__default.createElement(Controls, null, controlNext ? controlNext({
-    isInverted: isInverted,
-    isActive: true,
-    clickHandler: goToNext,
-    name: 'control_next_head'
-  }) : React__default.createElement(Control$1, {
-    isInverted: isInverted,
-    isDisabled: false,
-    onClick: goToNext
-  }, React__default.createElement(ArrowRightGhost, null)), controlPrev ? controlPrev({
-    isInverted: isInverted,
-    isActive: true,
-    clickHandler: goToPrevious,
-    name: 'control_prev_head'
-  }) : React__default.createElement(Control$1, {
-    isInverted: isInverted,
-    isDisabled: false,
-    onClick: goToPrevious
-  }, React__default.createElement(ArrowLeftGhost, null)))))))));
-};
-var Map$1 = withLibTheme(Map);
-var templateObject_1$g, templateObject_2$e, templateObject_3$b, templateObject_4$9, templateObject_5$7, templateObject_6$5, templateObject_7$2, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
-
-var View$3 = styled(Link).withConfig({
-  displayName: "NavBlock__View",
-  componentId: "sc-7v33be-0"
-})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n    display: -ms-grid;\n    display: grid;\n\n    -ms-grid-columns: ", ";\n    grid-template-columns: ", ";\n    -ms-grid-rows: min-content 1fr;\n    grid-auto-rows: min-content 1fr;\n\n    cursor: pointer;\n    text-decoration: none;\n    color: ", ";\n\n    outline-color: ", ";\n\n    transition: all ease-in-out 0.2s;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            color: ", ";\n        }\n    }\n"], ["\n    display: -ms-grid;\n    display: grid;\n\n    -ms-grid-columns: ", ";\n    grid-template-columns: ", ";\n    -ms-grid-rows: min-content 1fr;\n    grid-auto-rows: min-content 1fr;\n\n    cursor: pointer;\n    text-decoration: none;\n    color: ", ";\n\n    outline-color: ", ";\n\n    transition: all ease-in-out 0.2s;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            color: ", ";\n        }\n    }\n"])), function (_a) {
-  var hasIcon = _a.hasIcon;
-  return hasIcon ? 'min-content 1fr' : '1fr';
-}, function (_a) {
-  var hasIcon = _a.hasIcon;
-  return hasIcon ? 'min-content 1fr' : '1fr';
-}, function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
-}, function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
-}, function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return isInverted ? getColors(theme).primary.invertedHover : getColors(theme).primary.hover;
-});
-var MainLabel = styled.div.withConfig({
-  displayName: "NavBlock__MainLabel",
-  componentId: "sc-7v33be-1"
-})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    margin-left: ", ";\n"], ["\n    display: flex;\n    align-items: center;\n    margin-left: ", ";\n"])), function (_a) {
-  var hasIcon = _a.hasIcon;
-  return hasIcon && "".concat(spacings.nudge * 3, "px");
-});
-var Text$1 = styled(Copy).withConfig({
-  displayName: "NavBlock__Text",
-  componentId: "sc-7v33be-2"
-})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n    margin-top: ", "px;\n    margin-left: ", ";\n"], ["\n    margin-top: ", "px;\n    margin-left: ", ";\n"])), function (_a) {
-  var hasIcon = _a.hasIcon;
-  return hasIcon ? spacings.nudge : spacings.nudge * 2;
-}, function (_a) {
-  var hasIcon = _a.hasIcon;
-  return hasIcon && "".concat(spacings.nudge * 3, "px");
-});
-var Icon$1 = styled.div.withConfig({
-  displayName: "NavBlock__Icon",
-  componentId: "sc-7v33be-3"
-})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n\n    & > * {\n        height: 48px;\n        width: 48px;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n\n    & > * {\n        height: 48px;\n        width: 48px;\n    }\n"])));
-var Title$1 = styled(Copy).withConfig({
-  displayName: "NavBlock__Title",
-  componentId: "sc-7v33be-4"
-})(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n    display: inline-block;\n"], ["\n    display: inline-block;\n"])));
-var TitleIcon = styled.span.withConfig({
-  displayName: "NavBlock__TitleIcon",
-  componentId: "sc-7v33be-5"
-})(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n    display: inline-block;\n    margin-left: ", "px;\n\n    @media ", " {\n        margin-left: ", "px;\n    }\n"], ["\n    display: inline-block;\n    margin-left: ", "px;\n\n    @media ", " {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge * 2, mq.medium, spacings.nudge * 3);
-
-var NavBlock = function (_a) {
-  var _b = _a.isInverted,
-      isInverted = _b === void 0 ? false : _b,
-      title = _a.title,
-      text = _a.text,
-      link = _a.link,
-      customIcon = _a.customIcon,
-      customTitleIcon = _a.customTitleIcon,
-      className = _a.className;
-  return React__default.createElement(View$3, __assign({}, link, {
-    isInverted: isInverted,
-    hasIcon: !!customIcon,
-    className: className
-  }), customIcon ? React__default.createElement(Icon$1, null, customIcon({})) : '', React__default.createElement(MainLabel, {
-    hasIcon: !!customIcon
-  }, title && React__default.createElement(Title$1, {
-    textColor: "inherit",
-    size: "medium",
-    type: "copy-b"
-  }, title, title && customTitleIcon && React__default.createElement(TitleIcon, null, customTitleIcon({
-    isInverted: isInverted
-  })))), text && React__default.createElement(React__default.Fragment, null, React__default.createElement("span", null), React__default.createElement(Text$1, {
-    size: "small",
-    isInverted: isInverted,
-    innerHTML: text,
-    hasIcon: !!customIcon
-  })));
-};
-var templateObject_1$f, templateObject_2$d, templateObject_3$a, templateObject_4$8, templateObject_5$6, templateObject_6$4;
-
-var List = styled.ul.withConfig({
-  displayName: "NavList__List",
-  componentId: "sc-1lrkz0q-0"
-})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n    margin: 0;\n    margin-top: -", "px;\n    margin-left: -", "px;\n    padding: 0;\n    list-style: none;\n\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    flex-wrap: wrap;\n\n    @media ", " {\n        margin-top: -", "px;\n    }\n"], ["\n    margin: 0;\n    margin-top: -", "px;\n    margin-left: -", "px;\n    padding: 0;\n    list-style: none;\n\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    flex-wrap: wrap;\n\n    @media ", " {\n        margin-top: -", "px;\n    }\n"])), spacings.spacer, spacings.spacer, mq.medium, spacings.spacer * 2);
-var ListItem = styled.li.withConfig({
-  displayName: "NavList__ListItem",
-  componentId: "sc-1lrkz0q-1"
-})(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n    padding-top: ", "px;\n    padding-left: ", "px;\n    flex: 1 0 100%;\n\n    @media ", " {\n        flex: 0 0 50%;\n        max-width: 50%;\n        padding-top: ", "px;\n    }\n\n    @media ", " {\n        flex: 0 0 33.33%;\n        max-width: 33.33%;\n    }\n\n    // print version\n    @media print {\n        flex: 0 0 50%;\n        max-width: 50%;\n        padding-top: ", "px;\n    }\n"], ["\n    padding-top: ", "px;\n    padding-left: ", "px;\n    flex: 1 0 100%;\n\n    @media ", " {\n        flex: 0 0 50%;\n        max-width: 50%;\n        padding-top: ", "px;\n    }\n\n    @media ", " {\n        flex: 0 0 33.33%;\n        max-width: 33.33%;\n    }\n\n    // print version\n    @media print {\n        flex: 0 0 50%;\n        max-width: 50%;\n        padding-top: ", "px;\n    }\n"])), spacings.spacer, spacings.spacer, mq.medium, spacings.spacer * 2, mq.large, spacings.spacer * 2);
-
-var NavList = function (_a) {
-  var anchorId = _a.anchorId,
-      items = _a.items,
-      bgMode = _a.bgMode,
-      customTitleIcon = _a.customTitleIcon;
-  var colors = useLibTheme().colors;
-  var isInverted = bgMode === 'inverted';
-  var hasBg = bgMode === 'full';
-  return React__default.createElement(Section, {
-    addSeperation: true,
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : hasBg ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode, true)
-  }, React__default.createElement(Wrapper, {
-    addWhitespace: true
-  }, React__default.createElement(List, null, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
-    return React__default.createElement(ListItem, {
-      key: i
-    }, React__default.createElement(NavBlock, __assign({}, item, {
-      isInverted: isInverted,
-      customTitleIcon: customTitleIcon
-    })));
-  }))));
-};
-var NavList$1 = withLibTheme(NavList);
-var templateObject_1$e, templateObject_2$c;
-
-var View$2 = styled.div.withConfig({
-  displayName: "NumberList__View",
-  componentId: "sc-ehx754-0"
-})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n    text-align: center;\n\n    & > * {\n        margin: 0 auto;\n    }\n\n    @media ", " {\n        text-align: left;\n\n        & > * {\n            margin: 0;\n        }\n    }\n"], ["\n    text-align: center;\n\n    & > * {\n        margin: 0 auto;\n    }\n\n    @media ", " {\n        text-align: left;\n\n        & > * {\n            margin: 0;\n        }\n    }\n"])), mq.semilarge);
-var Icon = styled.img.withConfig({
-  displayName: "NumberList__Icon",
-  componentId: "sc-ehx754-1"
-})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n    display: block;\n    max-width: 140px;\n    max-height: 140px;\n\n    margin-bottom: ", "px;\n"], ["\n    display: block;\n    max-width: 140px;\n    max-height: 140px;\n\n    margin-bottom: ", "px;\n"])), spacings.nudge * 2);
-var NumberContainer = styled.div.withConfig({
-  displayName: "NumberList__NumberContainer",
-  componentId: "sc-ehx754-2"
-})(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n    max-width: max-content;\n    min-height: 90px;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n\n    @media ", " {\n        min-height: 100px;\n    }\n\n    /* margin-bottom: ", "px; */\n\n    @media ", " {\n        min-height: 120px;\n    }\n"], ["\n    max-width: max-content;\n    min-height: 90px;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n\n    @media ", " {\n        min-height: 100px;\n    }\n\n    /* margin-bottom: ", "px; */\n\n    @media ", " {\n        min-height: 120px;\n    }\n"])), mq.semilarge, spacings.nudge * 2, mq.large);
-var Number = styled(Callout).withConfig({
-  displayName: "NumberList__Number",
-  componentId: "sc-ehx754-3"
-})(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n    max-height: 140px;\n    ", "\n\n    color: ", ";\n"], ["\n    max-height: 140px;\n    ", "\n\n    color: ", ";\n"])), function (_a) {
-  var stringLength = _a.stringLength;
-  return stringLength <= 6 ? withRange([72, 120], 'font-size') : stringLength >= 10 ? withRange([33, 42], 'font-size') : withRange([52, 72], 'font-size');
-}, function (_a) {
-  var isInverted = _a.isInverted,
-      theme = _a.theme;
-  return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
-});
-var Label = styled(Heading).withConfig({
-  displayName: "NumberList__Label",
-  componentId: "sc-ehx754-4"
-})(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n    max-width: 80%;\n"], ["\n    max-width: 80%;\n"])));
-
-var IconBlock = function (_a) {
-  var icon = _a.icon,
-      label = _a.label,
-      number = _a.number,
-      isInverted = _a.isInverted;
-  var theme = useContext(ThemeContext);
-  var stringLength = number ? number.length : 0;
-  return React__default.createElement(View$2, null, icon && React__default.createElement(Icon, {
-    src: icon.src,
-    alt: icon.alt
-  }), React__default.createElement(NumberContainer, {
-    height: 0
-  }, React__default.createElement(Number, {
-    renderAs: "div",
-    stringLength: stringLength,
-    isInverted: isInverted
-  }, number)), React__default.createElement(Label, {
-    size: "super",
-    textColor: isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default
-  }, label));
-};
-
-var ContentContainer = styled.div.withConfig({
-  displayName: "NumberList__ContentContainer",
-  componentId: "sc-ehx754-5"
-})(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n    flex-wrap: wrap;\n\n    margin: -", "px;\n    margin-top: -", "px;\n\n    @media ", " {\n        margin-top: -", "px;\n    }\n\n    & > * {\n        padding: ", "px;\n        padding-top: ", "px;\n\n        @media ", " {\n            padding-top: ", "px;\n        }\n\n        flex-basis: 100%;\n\n        @media ", " {\n            flex: 0 0 50%;\n        }\n\n        @media ", " {\n            flex: 0 1 33.33%;\n        }\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n    flex-wrap: wrap;\n\n    margin: -", "px;\n    margin-top: -", "px;\n\n    @media ", " {\n        margin-top: -", "px;\n    }\n\n    & > * {\n        padding: ", "px;\n        padding-top: ", "px;\n\n        @media ", " {\n            padding-top: ", "px;\n        }\n\n        flex-basis: 100%;\n\n        @media ", " {\n            flex: 0 0 50%;\n        }\n\n        @media ", " {\n            flex: 0 1 33.33%;\n        }\n    }\n"])), spacings.spacer, spacings.spacer * 2, mq.semilarge, spacings.spacer, spacings.spacer, spacings.spacer * 2, mq.semilarge, spacings.spacer, mq.semilarge, mq.large);
-
-var NumberList = function (_a) {
-  var anchorId = _a.anchorId,
-      items = _a.items,
-      bgMode = _a.bgMode;
-  var theme = useContext(ThemeContext);
-  var isInverted = bgMode === 'inverted';
-  var hasBg = bgMode === 'full';
-  return React__default.createElement(Section, {
-    addSeperation: true,
-    anchorId: anchorId,
-    bgColor: isInverted ? getColors(theme).sectionBg.dark : hasBg ? getColors(theme).sectionBg.medium : getColors(theme).sectionBg.light,
-    bgMode: mapToBgMode(bgMode, true)
-  }, React__default.createElement(Wrapper, {
-    addWhitespace: true
-  }, React__default.createElement(ContentContainer, null, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
-    return React__default.createElement(IconBlock, __assign({}, item, {
-      key: i,
-      isInverted: isInverted
-    }));
-  }))));
-};
-var NumberList$1 = withLibTheme(NumberList);
-var templateObject_1$d, templateObject_2$b, templateObject_3$9, templateObject_4$7, templateObject_5$5, templateObject_6$3;
-
-var View$1 = styled.section.withConfig({
-  displayName: "ParallaxBackground__View",
-  componentId: "sc-g8idp4-0"
-})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n    position: relative;\n    width: 100vw;\n    z-index: -1;\n"], ["\n    position: relative;\n    width: 100vw;\n    z-index: -1;\n"])));
-var Parallax = styled.div.withConfig({
-  displayName: "ParallaxBackground__Parallax",
-  componentId: "sc-g8idp4-1"
-})(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    margin-left: 0;\n    width: 100%;\n"], ["\n    position: absolute;\n    top: 0;\n    left: 0;\n    margin-left: 0;\n    width: 100%;\n"])));
-var Content$2 = styled.div.withConfig({
-  displayName: "ParallaxBackground__Content",
-  componentId: "sc-g8idp4-2"
-})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n    margin-left: ", ";\n    margin-right: ", ";\n\n    width: ", ";\n\n    max-width: ", "px;\n    overflow: hidden;\n\n    & > * {\n        width: ", ";\n    }\n"], ["\n    margin-left: ", ";\n    margin-right: ", ";\n\n    width: ", ";\n\n    max-width: ", "px;\n    overflow: hidden;\n\n    & > * {\n        width: ", ";\n    }\n"])), function (_a) {
-  var hAlign = _a.hAlign;
-  return (hAlign === 'right' || hAlign === 'center') && 'auto';
-}, function (_a) {
-  var hAlign = _a.hAlign;
-  return (hAlign === 'left' || hAlign === 'center') && 'auto';
-}, function (_a) {
-  var contentWidth = _a.contentWidth;
-  return contentWidth ? contentWidth === -1 ? 'auto' : contentWidth * 100 + '%' : undefined;
-}, spacings.wrapperLarge, function (_a) {
-  var contentWidth = _a.contentWidth;
-  return contentWidth !== -1 && '100%';
-});
-var StyledImage$3 = styled(Image).withConfig({
-  displayName: "ParallaxBackground__StyledImage",
-  componentId: "sc-g8idp4-3"
-})(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n    max-width: ", ";\n    float: ", ";\n    ", "\n"], ["\n    max-width: ", ";\n    float: ", ";\n    ", "\n"])), function (_a) {
-  var coverSpace = _a.coverSpace;
-  return !coverSpace && 'none';
-}, function (_a) {
-  var hAlign = _a.hAlign;
-  return hAlign === 'left' || hAlign === 'right' ? hAlign : undefined;
-}, function (_a) {
-  var coverSpace = _a.coverSpace,
-      hAlign = _a.hAlign;
-  return !coverSpace && hAlign === 'center' && css(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n            transform: translateX(-50%);\n            margin-left: 50%;\n        "], ["\n            transform: translateX(-50%);\n            margin-left: 50%;\n        "])));
-});
-
-var ParallaxBackground = function (_a) {
-  var image = _a.image,
-      _b = _a.hAlign,
-      hAlign = _b === void 0 ? 'left' : _b,
-      _c = _a.contentWidth,
-      contentWidth = _c === void 0 ? 1 : _c,
-      _d = _a.moveRatio,
-      moveRatio = _d === void 0 ? 0.2 : _d,
-      _e = _a.direction,
-      direction = _e === void 0 ? 'up' : _e,
-      className = _a.className;
-
-  var _f = useState(false),
-      isLoaded = _f[0],
-      setIsLoaded = _f[1];
-
-  var _g = useState(0),
-      yTransform = _g[0],
-      setYTransform = _g[1]; // const cRef = useRef<HTMLDivElement>(null);
-
-
-  var _h = useState(null),
-      cRef = _h[0],
-      setContainerRef = _h[1];
-
-  var parallaxRef = useRef(null);
-  var width = 1;
-
-  if (typeof contentWidth === 'string') {
-    switch (contentWidth) {
-      case '1/4':
-        {
-          width = 0.25;
-          break;
-        }
-
-      case 'half':
-        {
-          width = 0.5;
-          break;
-        }
-
-      case '3/4':
-        {
-          width = 0.75;
-          break;
-        }
-
-      case 'auto':
-        {
-          width = -1;
-          break;
-        }
-
-      default:
-      case 'full':
-        {
-          width = 1;
-          break;
-        }
-    }
-  } else if (!isNaN(contentWidth)) {
-    width = contentWidth;
-  }
-
-  useEffect(function () {
-    setIsLoaded(true);
-  }, []);
-  useEffect(function () {
-    var prevEl = cRef === null || cRef === void 0 ? void 0 : cRef.previousElementSibling;
-
-    if (prevEl) {
-      var bgIdent = prevEl.dataset.bgIdent;
-      var stackIdent = prevEl.dataset.stackIdent;
-
-      if (bgIdent) {
-        // set data background from previous element
-        cRef === null || cRef === void 0 ? void 0 : cRef.setAttribute('data-bg-ident', bgIdent);
-      }
-
-      if (stackIdent) {
-        // set data stack flag from previous element
-        cRef === null || cRef === void 0 ? void 0 : cRef.setAttribute('data-stack-ident', stackIdent);
-      }
-    }
-  }, [cRef]);
-  useEffect(function () {
-    var handleScroll = function () {
-      if (!cRef) return;
-      var containerPos = cRef.getBoundingClientRect().top;
-      var ratio = containerPos * moveRatio;
-      var offset = ratio * (direction === 'up' ? 1 : -1);
-      setYTransform(offset);
-    };
-
-    handleScroll();
-    window.addEventListener('scroll', handleScroll);
-    return function () {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [cRef, direction, moveRatio]);
-  return React__default.createElement(React__default.Fragment, null, isLoaded && React__default.createElement(View$1, {
-    ref: setContainerRef,
-    "data-bg-ident": "transparent"
-  }, React__default.createElement(Parallax, {
-    ref: parallaxRef,
-    style: {
-      transform: "translate3d(0px, ".concat(yTransform, "px, 0px)")
-    },
-    className: className
-  }, React__default.createElement(Content$2, {
-    hAlign: hAlign,
-    contentWidth: width
-  }, image && React__default.createElement(StyledImage$3, __assign({
-    hAlign: hAlign,
-    coverSpace: width !== -1
-  }, image))))));
-};
-var templateObject_1$c, templateObject_2$a, templateObject_3$8, templateObject_4$6, templateObject_5$4;
-
-var Container = styled.figure.withConfig({
-  displayName: "Poster__Container",
-  componentId: "sc-k1cv7v-0"
-})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n    position: relative;\n    width: 100%;\n    max-height: 550px;\n    padding: 0;\n    margin: 0;\n\n    &:after {\n        content: ", ";\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        background: ", ";\n        pointer-events: none;\n        z-index: 0;\n    }\n"], ["\n    position: relative;\n    width: 100%;\n    max-height: 550px;\n    padding: 0;\n    margin: 0;\n\n    &:after {\n        content: ", ";\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        background: ", ";\n        pointer-events: none;\n        z-index: 0;\n    }\n"])), function (_a) {
-  var hasContent = _a.hasContent;
-  return hasContent && '""';
-}, function (_a) {
-  var theme = _a.theme,
-      verticallyCentered = _a.verticallyCentered;
-  return verticallyCentered ? getGlobals(theme).sections.imageTextGradientCentered : getGlobals(theme).sections.imageTextGradient;
-});
-var StyledImage$2 = styled(Image).withConfig({
-  displayName: "Poster__StyledImage",
-  componentId: "sc-k1cv7v-1"
-})(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n    img {\n        height: 550px;\n    }\n"], ["\n    img {\n        height: 550px;\n    }\n"])));
-var Intro = styled(IntroBlock).withConfig({
-  displayName: "Poster__Intro",
-  componentId: "sc-k1cv7v-2"
-})(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n    position: absolute;\n    bottom: ", ";\n    top: ", ";\n    left: 50%;\n    right: 0;\n    max-height: 100%;\n    max-width: ", "px;\n\n    padding: ", "px;\n    z-index: 1;\n\n    transform: ", ";\n"], ["\n    position: absolute;\n    bottom: ", ";\n    top: ", ";\n    left: 50%;\n    right: 0;\n    max-height: 100%;\n    max-width: ", "px;\n\n    padding: ", "px;\n    z-index: 1;\n\n    transform: ", ";\n"])), function (_a) {
-  var verticallyCentered = _a.verticallyCentered;
-  return !verticallyCentered && '0';
-}, function (_a) {
-  var verticallyCentered = _a.verticallyCentered;
-  return verticallyCentered && '50%';
-}, spacings.wrapper, wrapperWhitespace + spacings.nudge * 2, function (_a) {
-  var verticallyCentered = _a.verticallyCentered;
-  return verticallyCentered ? 'translate(-50%, -50%)' : 'translateX(-50%)';
-});
-
-var Poster = function (_a) {
-  var anchorId = _a.anchorId,
-      _b = _a.width,
-      width = _b === void 0 ? 'content' : _b,
-      title = _a.title,
-      titleAs = _a.titleAs,
-      superTitle = _a.superTitle,
-      superTitleAs = _a.superTitleAs,
-      text = _a.text,
-      primaryAction = _a.primaryAction,
-      secondaryAction = _a.secondaryAction,
-      image = _a.image,
-      verticallyCentered = _a.verticallyCentered,
-      horizontallyCentered = _a.horizontallyCentered;
-  var isCentered = verticallyCentered && horizontallyCentered;
-  return React__default.createElement(Section, {
-    anchorId: anchorId,
-    bgColor: "image",
-    bgMode: "full"
-  }, React__default.createElement(Wrapper, {
-    clampWidth: width === 'content' ? 'normal' : 'large'
-  }, React__default.createElement(Container, {
-    hasContent: !!title || !!text,
-    verticallyCentered: verticallyCentered
-  }, React__default.createElement(StyledImage$2, __assign({}, image, {
-    coverSpace: true,
-    ratios: undefined
-  })), title && React__default.createElement(Intro, {
-    verticallyCentered: verticallyCentered,
-    horizontallyCentered: horizontallyCentered,
-    renderAs: "figcaption",
-    colorMode: "onImage",
-    title: title,
-    titleAs: titleAs,
-    superTitle: superTitle,
-    superTitleAs: superTitleAs,
-    text: text,
-    secondaryAction: secondaryAction,
-    primaryAction: primaryAction,
-    clampTitle: true,
-    maxTitleLines: 3,
-    clampText: true,
-    maxTextLines: 4,
-    isCentered: horizontallyCentered || isCentered
-  }))));
-};
-var Poster$1 = withLibTheme(Poster);
-var templateObject_1$b, templateObject_2$9, templateObject_3$7;
-
-var ItemList = styled.ul.withConfig({
-  displayName: "PriceList__ItemList",
-  componentId: "sc-to452u-0"
-})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n    margin: 0;\n    padding: 0;\n    list-style: none;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    margin: 0;\n    padding: 0;\n    list-style: none;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge);
-var ItemBlock = styled.li.withConfig({
-  displayName: "PriceList__ItemBlock",
-  componentId: "sc-to452u-1"
-})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n    max-width: 100%;\n    padding: ", "px;\n\n    background: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        padding: ", "px;\n    }\n"], ["\n    max-width: 100%;\n    padding: ", "px;\n\n    background: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        padding: ", "px;\n    }\n"])), spacings.nudge * 2, function (_a) {
-  var theme = _a.theme,
-      hasBg = _a.hasBg;
-  return hasBg ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
-}, spacings.nudge * 2, mq.semilarge, spacings.nudge * 3);
-var ListHead = styled.div.withConfig({
-  displayName: "PriceList__ListHead",
-  componentId: "sc-to452u-2"
-})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n    display: flex;\n    justify-content: space-between;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    justify-content: space-between;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge * 2);
-var Title = styled(Copy).withConfig({
-  displayName: "PriceList__Title",
-  componentId: "sc-to452u-3"
-})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n    max-width: 880px;\n"], ["\n    max-width: 880px;\n"])));
-var Price = styled(Copy).withConfig({
-  displayName: "PriceList__Price",
-  componentId: "sc-to452u-4"
-})(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n    white-space: nowrap;\n"], ["\n    white-space: nowrap;\n"])));
-var Description$1 = styled(Copy).withConfig({
-  displayName: "PriceList__Description",
-  componentId: "sc-to452u-5"
-})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n    max-width: 880px;\n"], ["\n    max-width: 880px;\n"])));
-var PriceBlock = function (_a) {
-  var text = _a.text,
-      price = _a.price,
-      _b = _a.hasBg,
-      hasBg = _b === void 0 ? false : _b,
-      title = _a.title;
-  return React__default.createElement(ItemBlock, {
-    hasBg: hasBg
-  }, React__default.createElement(ListHead, null, title && React__default.createElement(Title, {
-    type: "copy-b"
-  }, title), price && React__default.createElement(Price, {
-    type: "copy-b"
-  }, price)), text && React__default.createElement(Description$1, {
-    type: "copy",
-    innerHTML: text
-  }));
-};
-
-var PriceList = function (_a) {
-  var anchorId = _a.anchorId,
-      bgMode = _a.bgMode,
-      items = _a.items;
-  var colors = useLibTheme().colors;
-  var isInverted = bgMode === 'inverted';
-  var hasBack = isInverted || bgMode === 'full';
-  return React__default.createElement(Section, {
-    addSeperation: true,
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : bgMode === 'full' ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode, true)
-  }, React__default.createElement(Wrapper, {
-    addWhitespace: true
-  }, React__default.createElement(ItemList, null, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
-    return React__default.createElement(PriceBlock, __assign({
-      key: i
-    }, item, {
-      hasBg: hasBack
-    }));
-  }))));
-};
-var PriceList$1 = withLibTheme(PriceList);
-var templateObject_1$a, templateObject_2$8, templateObject_3$6, templateObject_4$5, templateObject_5$3, templateObject_6$2;
-
-var View = styled.div.withConfig({
-  displayName: "PriceTag__View",
-  componentId: "sc-wnisbz-0"
-})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n    padding: ", "px;\n\n    border: 1px solid transparent;\n    border-radius: ", ";\n\n    background: ", ";\n\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    text-align: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    padding: ", "px;\n\n    border: 1px solid transparent;\n    border-radius: ", ";\n\n    background: ", ";\n\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    text-align: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.spacer, function (_a) {
-  var theme = _a.theme;
-  return getGlobals(theme).sections.edgeRadius;
-}, function (_a) {
-  var theme = _a.theme,
-      hasBg = _a.hasBg,
-      isInverted = _a.isInverted,
-      isHighlighted = _a.isHighlighted;
-  return isInverted ? isHighlighted ? getColors(theme).primary.inverted : getColors(theme).elementBg.medium : isHighlighted ? getColors(theme).primary.default : hasBg ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
-}, function (_a) {
-  var isCentered = _a.isCentered;
-  return isCentered ? 'center' : 'left';
-}, spacings.nudge * 3);
-var StyledActions$2 = styled(Actions).withConfig({
-  displayName: "PriceTag__StyledActions",
-  componentId: "sc-wnisbz-1"
-})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n    display: block;\n    margin-top: auto;\n    padding-top: ", "px;\n    text-align: center;\n"], ["\n    display: block;\n    margin-top: auto;\n    padding-top: ", "px;\n    text-align: center;\n"])), spacings.spacer);
-var PriceTag = forwardRef(function (_a, ref) {
-  var superTitle = _a.superTitle,
-      title = _a.title,
-      text = _a.text,
-      action = _a.action,
-      isInverted = _a.isInverted,
-      isCentered = _a.isCentered,
-      isHighlighted = _a.isHighlighted,
-      hasBackground = _a.hasBackground,
-      className = _a.className;
-  var inverted = isHighlighted ? !isInverted : false;
-  return React__default.createElement(View, {
-    ref: ref,
-    isInverted: isInverted,
-    isCentered: isCentered,
-    isHighlighted: isHighlighted,
-    hasBg: hasBackground,
-    className: className
-  }, superTitle && React__default.createElement(Copy, {
-    type: "copy-b",
-    size: "big",
-    isInverted: inverted,
-    innerHTML: superTitle,
-    "data-sheet": "superTitle"
-  }), title && React__default.createElement(Callout, {
-    renderAs: "div",
-    size: "big",
-    isInverted: inverted,
-    innerHTML: title,
-    "data-sheet": "title"
-  }), text && React__default.createElement(Copy, {
-    size: "medium",
-    isInverted: inverted,
-    innerHTML: text,
-    "data-sheet": "desc"
-  }), React__default.createElement(StyledActions$2, {
-    mode: "cover",
-    primary: action && action({
-      isInverted: inverted,
-      isHighlighted: isHighlighted
-    })
-  }));
-});
-PriceTag.displayName = 'PriceTag';
-var templateObject_1$9, templateObject_2$7;
-
-var Tag = styled(PriceTag).withConfig({
-  displayName: "PriceTable__Tag",
-  componentId: "sc-1n6x4b3-0"
-})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n    min-height: 500px;\n"], ["\n    min-height: 500px;\n"])));
-var Items = styled.div.withConfig({
-  displayName: "PriceTable__Items",
-  componentId: "sc-1n6x4b3-1"
-})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n\n    margin-top: -", "px;\n    margin-left: -", "px;\n\n    & > * {\n        flex: 1 1 25%;\n        min-width: 286px;\n        max-width: 320px;\n        margin-top: ", "px;\n        margin-left: ", "px;\n    }\n\n    @media ", " {\n        & > * {\n            max-width: 286px;\n        }\n    }\n"], ["\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n\n    margin-top: -", "px;\n    margin-left: -", "px;\n\n    & > * {\n        flex: 1 1 25%;\n        min-width: 286px;\n        max-width: 320px;\n        margin-top: ", "px;\n        margin-left: ", "px;\n    }\n\n    @media ", " {\n        & > * {\n            max-width: 286px;\n        }\n    }\n"])), gridSettings.gutter, gridSettings.gutter, gridSettings.gutter, gridSettings.gutter, mq.large);
-
-var PriceTable = function (_a) {
-  var anchorId = _a.anchorId,
-      items = _a.items,
-      isCentered = _a.isCentered,
-      bgMode = _a.bgMode;
-  var isInverted = bgMode === 'inverted';
-  var hasBg = bgMode === 'full';
-  var priceTagCount = (items === null || items === void 0 ? void 0 : items.length) || 0;
-  var colors = useLibTheme().colors;
-  var cardRefs = useEqualSheetHeight({
-    listLength: priceTagCount,
-    identifiers: ['[data-sheet="superTitle"]', '[data-sheet="title"]', '[data-sheet="desc"]'],
-    responsive: {
-      small: 1,
-      medium: 1,
-      semilarge: 2,
-      large: 3,
-      xlarge: 3
-    }
-  }).sheetRefs;
-  return React__default.createElement(Section, {
-    addSeperation: true,
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : hasBg ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode)
-  }, React__default.createElement(Wrapper, {
-    addWhitespace: true
-  }, React__default.createElement(Items, null, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
-    return React__default.createElement(Tag, __assign({
-      key: i,
-      ref: cardRefs[i]
-    }, item, {
-      isInverted: isInverted,
-      isCentered: isCentered,
-      hasBackground: hasBg
-    }));
-  }))));
-};
-var PriceTable$1 = withLibTheme(PriceTable);
-var templateObject_1$8, templateObject_2$6;
-
-var Content$1 = styled.figure.withConfig({
-  displayName: "Quote__Content",
-  componentId: "sc-135tfv0-0"
-})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n    margin: 0;\n    padding: 0;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        max-width: 960px;\n        margin: 0 auto;\n    }\n"], ["\n    margin: 0;\n    padding: 0;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        max-width: 960px;\n        margin: 0 auto;\n    }\n"])), spacings.spacer, mq.medium);
-var Text = styled(Callout).withConfig({
-  displayName: "Quote__Text",
-  componentId: "sc-135tfv0-1"
-})(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n    text-align: center;\n    margin-left: 0;\n    margin-right: 0;\n    padding: 0;\n"], ["\n    text-align: center;\n    margin-left: 0;\n    margin-right: 0;\n    padding: 0;\n"])));
-var Source = styled(Copy).withConfig({
-  displayName: "Quote__Source",
-  componentId: "sc-135tfv0-2"
-})(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n    text-align: center;\n    margin-left: 0;\n    margin-right: 0;\n    padding: 0;\n"], ["\n    text-align: center;\n    margin-left: 0;\n    margin-right: 0;\n    padding: 0;\n"])));
-
-var Quote = function (_a) {
-  var anchorId = _a.anchorId,
-      bgMode = _a.bgMode,
-      text = _a.text,
-      source = _a.source,
-      citeUrl = _a.citeUrl;
-  var colors = useLibTheme().colors;
-  var isInverted = bgMode === 'inverted';
-  return React__default.createElement(Section, {
-    addSeperation: true,
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : bgMode === 'full' ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode, true)
-  }, React__default.createElement(Wrapper, {
-    clampWidth: "normal",
-    addWhitespace: true
-  }, React__default.createElement(Content$1, null, text && React__default.createElement(Text, __assign({
-    size: "small",
-    renderAs: "blockquote",
-    isInverted: isInverted,
-    innerHTML: text
-  }, {
-    cite: citeUrl
-  })), source && React__default.createElement(Source, {
-    isInverted: isInverted,
-    renderAs: "figcaption",
-    innerHTML: source
-  }))));
-};
-var Quote$1 = withLibTheme(Quote);
-var templateObject_1$7, templateObject_2$5, templateObject_3$5;
-
-var ImageWrapper = styled(Wrapper).withConfig({
-  displayName: "SimpleImage__ImageWrapper",
-  componentId: "sc-1f8mjuo-0"
-})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n    display: flex;\n    justify-content: ", ";\n"], ["\n    display: flex;\n    justify-content: ", ";\n"])), function (_a) {
-  var hAlign = _a.hAlign;
-
-  switch (hAlign) {
-    case 'center':
-      return 'center';
-
-    case 'right':
-      return 'flex-end';
-
-    default:
-      return 'flex-start';
-  }
-});
-
-var SimpleImage = function (_a) {
-  var anchorId = _a.anchorId,
-      image = _a.image,
-      _b = _a.hAlign,
-      hAlign = _b === void 0 ? 'left' : _b,
-      bgMode = _a.bgMode,
-      isStackable = _a.isStackable;
-  var theme = useContext(ThemeContext);
-  var isInverted = bgMode === 'inverted';
-  var hasBg = bgMode === 'full';
-  return React__default.createElement(Section, {
-    addSeperation: true,
-    anchorId: anchorId,
-    isStackable: isStackable,
-    bgColor: isInverted ? getColors(theme).sectionBg.dark : hasBg ? getColors(theme).sectionBg.medium : getColors(theme).sectionBg.light,
-    bgMode: mapToBgMode(bgMode)
-  }, React__default.createElement(ImageWrapper, {
-    hAlign: hAlign
-  }, image && React__default.createElement(Image, __assign({}, image))));
-};
-var SimpleImage$1 = withLibTheme(SimpleImage);
-var templateObject_1$6;
-
-var Cards = styled.ul.withConfig({
-  displayName: "SocialWall__Cards",
-  componentId: "sc-ggztu7-0"
-})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n\n    margin-top: -", "px;\n    margin-left: -", "px;\n\n    & > * {\n        flex: 1 1 100%;\n        margin-top: ", "px;\n        margin-left: ", "px;\n    }\n\n    @media ", " {\n        & > * {\n            flex: 1 1 calc(50% - ", "px);\n            max-width: calc(50% - ", "px);\n        }\n    }\n\n    @media ", " {\n        & > * {\n            flex: 1 1 calc(", "% - ", "px);\n            max-width: calc(", "% - ", "px);\n        }\n    }\n"], ["\n    display: flex;\n    flex-wrap: wrap;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n\n    margin-top: -", "px;\n    margin-left: -", "px;\n\n    & > * {\n        flex: 1 1 100%;\n        margin-top: ", "px;\n        margin-left: ", "px;\n    }\n\n    @media ", " {\n        & > * {\n            flex: 1 1 calc(50% - ", "px);\n            max-width: calc(50% - ", "px);\n        }\n    }\n\n    @media ", " {\n        & > * {\n            flex: 1 1 calc(", "% - ", "px);\n            max-width: calc(", "% - ", "px);\n        }\n    }\n"])), spacings.spacer, spacings.spacer, spacings.spacer, spacings.spacer, mq.medium, gridSettings.gutter, gridSettings.gutter, mq.large, 1 / 3 * 100, gridSettings.gutter, 1 / 3 * 100, gridSettings.gutter);
-var Item = styled.li.withConfig({
-  displayName: "SocialWall__Item",
-  componentId: "sc-ggztu7-1"
-})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    padding: 0;\n"], ["\n    display: block;\n    position: relative;\n    padding: 0;\n"])));
-var Card = styled(Link).withConfig({
-  displayName: "SocialWall__Card",
-  componentId: "sc-ggztu7-2"
-})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n    position: relative;\n    display: block;\n    text-decoration: none;\n    color: '#fff';\n    outline-color: ", ";\n\n    border-radius: ", ";\n    overflow: hidden;\n\n    &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        background: ", ";\n\n        opacity: 0;\n        pointer-events: none;\n        z-index: 1;\n        transition: opacity 0.2s ease-in-out;\n    }\n\n    &:hover {\n        &:before {\n            opacity: 1;\n            pointer-events: all;\n        }\n    }\n\n    &:focus {\n        &:before {\n            opacity: 1;\n            pointer-events: all;\n        }\n    }\n"], ["\n    position: relative;\n    display: block;\n    text-decoration: none;\n    color: '#fff';\n    outline-color: ", ";\n\n    border-radius: ", ";\n    overflow: hidden;\n\n    &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        background: ", ";\n\n        opacity: 0;\n        pointer-events: none;\n        z-index: 1;\n        transition: opacity 0.2s ease-in-out;\n    }\n\n    &:hover {\n        &:before {\n            opacity: 1;\n            pointer-events: all;\n        }\n    }\n\n    &:focus {\n        &:before {\n            opacity: 1;\n            pointer-events: all;\n        }\n    }\n"])), function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
-}, function (_a) {
-  var theme = _a.theme;
-  return getGlobals(theme).sections.edgeRadius;
-}, function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return isInverted ? getColors(theme).secondary.inverted : getColors(theme).secondary.default;
-});
-var StyledImage$1 = styled(Image).withConfig({
-  displayName: "SocialWall__StyledImage",
-  componentId: "sc-ggztu7-3"
-})(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n    display: block;\n    height: 100%;\n    z-index: 0;\n"], ["\n    display: block;\n    height: 100%;\n    z-index: 0;\n"])));
-var TextContainer = styled.div.withConfig({
-  displayName: "SocialWall__TextContainer",
-  componentId: "sc-ggztu7-4"
-})(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 100%;\n    transform: translate(-50%, -50%);\n    text-align: center;\n\n    padding: ", "px;\n\n    opacity: 0;\n    pointer-events: none;\n    z-index: 2;\n    transition: opacity 0.2s ease-in-out;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    ", ":hover & {\n        opacity: 1;\n        pointer-events: all;\n    }\n\n    ", ":focus & {\n        opacity: 1;\n        pointer-events: all;\n    }\n"], ["\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 100%;\n    transform: translate(-50%, -50%);\n    text-align: center;\n\n    padding: ", "px;\n\n    opacity: 0;\n    pointer-events: none;\n    z-index: 2;\n    transition: opacity 0.2s ease-in-out;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    ", ":hover & {\n        opacity: 1;\n        pointer-events: all;\n    }\n\n    ", ":focus & {\n        opacity: 1;\n        pointer-events: all;\n    }\n"])), spacings.nudge * 2, spacings.nudge * 2, Card, Card);
-var FollowUs = styled(Heading).withConfig({
-  displayName: "SocialWall__FollowUs",
-  componentId: "sc-ggztu7-5"
-})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n    text-transform: uppercase;\n"], ["\n    text-transform: uppercase;\n"])));
-var InstagramIcon = styled.div.withConfig({
-  displayName: "SocialWall__InstagramIcon",
-  componentId: "sc-ggztu7-6"
-})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n    position: absolute;\n    left: 20px;\n    bottom: 20px;\n    color: ", ";\n    z-index: 2;\n\n    & > * {\n        fill: #fff;\n\n        ", ":hover & {\n            color: ", ";\n        }\n    }\n"], ["\n    position: absolute;\n    left: 20px;\n    bottom: 20px;\n    color: ", ";\n    z-index: 2;\n\n    & > * {\n        fill: #fff;\n\n        ", ":hover & {\n            color: ", ";\n        }\n    }\n"])), function (_a) {
-  var theme = _a.theme;
-  return getColors(theme).text.inverted;
-}, Card, function (_a) {
-  var theme = _a.theme;
-  return getColors(theme).text.inverted;
-});
-
-var SocialWall = function (_a) {
-  var anchorId = _a.anchorId,
-      items = _a.items,
-      hashTag = _a.hashTag,
-      followUs = _a.followUs,
-      socialIcon = _a.socialIcon,
-      bgMode = _a.bgMode;
-  var colors = useLibTheme().colors;
-  var isInverted = bgMode === 'inverted';
-  var hasBg = bgMode === 'full';
-  return React__default.createElement(Section, {
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : hasBg ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode, true),
-    addSeperation: true
-  }, React__default.createElement(Wrapper, {
-    addWhitespace: true
-  }, React__default.createElement(Cards, null, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
-    var _a;
-
-    return React__default.createElement(Item, {
-      key: i
-    }, React__default.createElement(Card, __assign({
-      isExternal: true
-    }, item.link, {
-      isInverted: isInverted,
-      ariaLabel: (_a = item === null || item === void 0 ? void 0 : item.image) === null || _a === void 0 ? void 0 : _a.alt
-    }), item.image && React__default.createElement(StyledImage$1, __assign({}, item.image, {
-      coverSpace: true,
-      ratios: {
-        small: {
-          w: 1,
-          h: 1
-        }
-      },
-      isInverted: isInverted
-    })), React__default.createElement(TextContainer, null, React__default.createElement(FollowUs, {
-      size: "super",
-      isInverted: true
-    }, followUs ? followUs : 'Follow Us On Instagram'), hashTag && React__default.createElement(Heading, {
-      size: "heading-2",
-      isInverted: true
-    }, hashTag)), React__default.createElement(InstagramIcon, null, socialIcon || React__default.createElement(Instagram, null))));
-  }))));
-};
-var SocialWall$1 = withLibTheme(SocialWall);
-var templateObject_1$5, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$2, templateObject_6$1, templateObject_7$1;
-
-var TableWrapper = styled(Wrapper).withConfig({
-  displayName: "Table__TableWrapper",
-  componentId: "sc-16ge7gg-0"
-})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.spacer);
-
-var Table = function (_a) {
-  var anchorId = _a.anchorId,
-      bgMode = _a.bgMode,
-      tableItems = _a.tableItems;
-  var colors = useLibTheme().colors;
-  var isInverted = bgMode === 'inverted';
-  var hasBg = bgMode === 'full' || isInverted;
-  return React__default.createElement(Section, {
-    addSeperation: true,
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : hasBg ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode, true)
-  }, React__default.createElement(TableWrapper, null, tableItems.map(function (item, i) {
-    return React__default.createElement(TableBlock, __assign({
-      key: i
-    }, item, {
-      isInverted: isInverted,
-      hasBack: hasBg
-    }));
-  })));
-};
-var Table$1 = withLibTheme(Table);
-var templateObject_1$4;
-
-var Figure = styled.figure.withConfig({
-  displayName: "Teaser__Figure",
-  componentId: "sc-euyj1p-0"
-})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        & > * + * {\n            margin-top: ", "px;\n        }\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        & > * + * {\n            margin-top: ", "px;\n        }\n    }\n"])), spacings.nudge, mq.semilarge, spacings.nudge * 2);
-var StyledImage = styled(Image).withConfig({
-  displayName: "Teaser__StyledImage",
-  componentId: "sc-euyj1p-1"
-})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n    position: relative;\n    width: 100%;\n    height: 100%;\n\n    @media ", " {\n        border-radius: ", ";\n        overflow: hidden;\n    }\n"], ["\n    position: relative;\n    width: 100%;\n    height: 100%;\n\n    @media ", " {\n        border-radius: ", ";\n        overflow: hidden;\n    }\n"])), mq.semilarge, function (_a) {
-  var theme = _a.theme;
-  return getGlobals(theme).sections.edgeRadius;
-});
-var Video$3 = styled(VideoBlock).withConfig({
-  displayName: "Teaser__Video",
-  componentId: "sc-euyj1p-2"
-})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n    display: ", ";\n    width: 100%;\n    height: 100%;\n"], ["\n    display: ", ";\n    width: 100%;\n    height: 100%;\n"])), function (_a) {
-  var isVisible = _a.isVisible;
-  return isVisible ? 'block' : 'none';
-});
-var Description = styled(Copy).withConfig({
-  displayName: "Teaser__Description",
-  componentId: "sc-euyj1p-3"
-})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n    display: block;\n\n    @media ", " {\n        padding-left: ", "px;\n        padding-right: ", "px;\n        margin-left: ", ";\n        margin-right: ", ";\n        max-width: ", ";\n\n        color: ", ";\n    }\n\n    @media ", " {\n        max-width: ", ";\n    }\n"], ["\n    display: block;\n\n    @media ", " {\n        padding-left: ", "px;\n        padding-right: ", "px;\n        margin-left: ", ";\n        margin-right: ", ";\n        max-width: ", ";\n\n        color: ", ";\n    }\n\n    @media ", " {\n        max-width: ", ";\n    }\n"])), mq.semilarge, spacings.nudge * 2, spacings.nudge * 2, function (_a) {
-  var isMirrored = _a.isMirrored;
-  return isMirrored && 'auto';
-}, function (_a) {
-  var isMirrored = _a.isMirrored;
-  return !isMirrored && 'auto';
-}, function (_a) {
-  var isSplitted = _a.isSplitted;
-  return isSplitted && '81.5%';
-}, function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted,
-      isSplitted = _a.isSplitted;
-  return isInverted && !isSplitted ? getFonts(theme).copy.small.colorInverted : getFonts(theme).copy.small.color;
-}, mq.xlarge, function (_a) {
-  var isSplitted = _a.isSplitted;
-  return isSplitted && '69.5%';
-});
-var StyledActions$1 = styled(Actions).withConfig({
-  displayName: "Teaser__StyledActions",
-  componentId: "sc-euyj1p-4"
-})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"], ["\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"])), spacings.spacer);
-
-var Teaser = function (_a) {
-  var anchorId = _a.anchorId,
-      _b = _a.isMirrored,
-      isMirrored = _b === void 0 ? false : _b,
-      bgMode = _a.bgMode,
-      superTitle = _a.superTitle,
-      superTitleAs = _a.superTitleAs,
-      title = _a.title,
-      titleAs = _a.titleAs,
-      image = _a.image,
-      video = _a.video,
-      description = _a.description,
-      text = _a.text,
-      primaryAction = _a.primaryAction,
-      secondaryAction = _a.secondaryAction;
-  var colors = useLibTheme().colors;
-  var isInverted = bgMode === 'inverted' || bgMode === 'inverted-splitted';
-  var isSplitted = bgMode === 'splitted' || bgMode === 'inverted-splitted';
-  var hasVideo = isValidArray(video === null || video === void 0 ? void 0 : video.urls, false);
-  var viewRef = useRef(null);
-
-  var _c = useState(!(image === null || image === void 0 ? void 0 : image.small) || false),
-      isLoaded = _c[0],
-      setLoaded = _c[1];
-
-  var _d = useState(false),
-      isVideoActive = _d[0],
-      setVideoActive = _d[1];
-
-  var isObserverSupported = useObserverSupport();
-  useUpdateEffect(function () {
-    if (!viewRef.current || !hasVideo) 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]);
-  return React__default.createElement(Section, {
-    addSeperation: true,
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : bgMode ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToTeaserBgMode(bgMode, false, isMirrored)
-  }, React__default.createElement(Wrapper, {
-    addWhitespace: true,
-    clampWidth: "normal"
-  }, React__default.createElement(Grid.Row, {
-    valign: "center"
-  }, React__default.createElement(Grid.Col, {
-    semilarge: {
-      span: 6 / 12,
-      move: (isMirrored ? 6 : 0) / 12
-    },
-    xlarge: {
-      span: 7 / 12,
-      move: (isMirrored ? 5 : 0) / 12
-    }
-  }, ((image === null || image === void 0 ? void 0 : image.small) || hasVideo) && React__default.createElement(Figure, {
-    ref: viewRef
-  }, (image === null || image === void 0 ? void 0 : image.small) && (!video || !isLoaded) && React__default.createElement(StyledImage, __assign({}, image, {
-    isInverted: isInverted,
-    coverSpace: true
-  })), hasVideo && React__default.createElement(Video$3, {
-    urls: isVideoActive ? video === null || video === void 0 ? void 0 : video.urls : undefined,
-    muted: true,
-    autoPlay: true,
-    loop: true,
-    onCanPlayThrough: function () {
-      return setLoaded(true);
-    },
-    ratios: video === null || video === void 0 ? void 0 : video.aspectRatios,
-    isVisible: isLoaded,
-    isInverted: isInverted
-  }), description && React__default.createElement(Description, {
-    size: "small",
-    renderAs: "figcaption",
-    isInverted: isInverted,
-    isSplitted: isSplitted,
-    isMirrored: isMirrored,
-    innerHTML: description
-  }))), React__default.createElement(Grid.Col, {
-    semilarge: {
-      span: 6 / 12,
-      move: (isMirrored ? -6 : 0) / 12
-    },
-    xlarge: {
-      span: 5 / 12,
-      move: (isMirrored ? -7 : 0) / 12
-    }
-  }, React__default.createElement(IntroBlock, {
-    titleHyphens: true,
-    title: title,
-    titleAs: titleAs,
-    superTitle: superTitle,
-    superTitleAs: superTitleAs,
-    text: text,
-    colorMode: isInverted ? 'inverted' : 'default'
-  }), (primaryAction || secondaryAction) && React__default.createElement(StyledActions$1, {
-    primary: primaryAction && primaryAction(isInverted),
-    secondary: secondaryAction && secondaryAction(isInverted)
-  })))));
-};
-
-var mapToTeaserBgMode = function (mode, preventSplit, isMirrored) {
-  if (preventSplit === void 0) {
-    preventSplit = false;
-  }
-
-  if (isMirrored === void 0) {
-    isMirrored = false;
-  }
-
-  switch (mode) {
-    case 'full':
-      return 'full';
-
-    case 'inverted':
-      return 'inverted';
-
-    case 'splitted':
-      {
-        if (!preventSplit) return isMirrored ? 'larger-left' : 'larger-right';else return undefined;
-      }
-
-    case 'inverted-splitted':
-      {
-        if (!preventSplit) return isMirrored ? 'larger-left' : 'larger-right';else return undefined;
-      }
-
-    default:
-      return undefined;
-  }
-};
-var Teaser$1 = withLibTheme(Teaser);
-var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$1;
-
-/**
- * calculate single grid col from relative content wrapper
- * (grid width = wrapper width without paddings)
- * */
-
-var getGridColOfContent = function () {
-  return css(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n        ", "\n    "], ["\n        ", "\n    "])), getGridWidth({
-    cols: 1,
-    gridWidth: "".concat(spacings.wrapper - wrapperWhitespace * 2, "px ")
-  }));
-};
-
-var WideVideo = styled(VideoBlock).withConfig({
-  displayName: "TeaserWide__WideVideo",
-  componentId: "sc-cnpuar-0"
-})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n    display: ", ";\n    position: relative;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    height: 100%;\n\n    min-height: 400px;\n    object-fit: cover;\n    border-radius: ", ";\n\n    @media ", " {\n        position: absolute;\n        /** \n            calculate width of 6 grid cols (grid width = viewport width without wrapper paddings)\n            and add left or right wrapper padding afterwards\n         */\n        width: calc(\n            ", " + ", "px\n        );\n        left: ", ";\n        right: ", ";\n    }\n\n    @media ", " {\n        /** \n            calculate width of 1 grid cols\n            and add left or right wrapper padding afterwards. Then add this to 50% of current\n            viewport width.\n         */\n        width: calc(50% + ", " + ", "px);\n    }\n\n    @media ", " {\n        /** \n            calculate width of 1 grid cols\n            and add left or right wrapper padding afterwards. Then add this to 50% of large wrapper width.\n         */\n        width: calc(\n            ", "px + ", " +\n                ", "px\n        );\n\n        left: ", ";\n        right: ", ";\n\n        ", ";\n    }\n"], ["\n    display: ", ";\n    position: relative;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    height: 100%;\n\n    min-height: 400px;\n    object-fit: cover;\n    border-radius: ", ";\n\n    @media ", " {\n        position: absolute;\n        /** \n            calculate width of 6 grid cols (grid width = viewport width without wrapper paddings)\n            and add left or right wrapper padding afterwards\n         */\n        width: calc(\n            ", " + ", "px\n        );\n        left: ", ";\n        right: ", ";\n    }\n\n    @media ", " {\n        /** \n            calculate width of 1 grid cols\n            and add left or right wrapper padding afterwards. Then add this to 50% of current\n            viewport width.\n         */\n        width: calc(50% + ", " + ", "px);\n    }\n\n    @media ", " {\n        /** \n            calculate width of 1 grid cols\n            and add left or right wrapper padding afterwards. Then add this to 50% of large wrapper width.\n         */\n        width: calc(\n            ", "px + ", " +\n                ", "px\n        );\n\n        left: ", ";\n        right: ", ";\n\n        ", ";\n    }\n"])), function (_a) {
-  var isVisible = _a.isVisible;
-  return isVisible ? 'block' : 'none';
-}, function (_a) {
-  var theme = _a.theme;
-  return getGlobals(theme).sections.edgeRadius;
-}, mq.semilarge, getGridWidth({
-  cols: 6,
-  gridWidth: "100% - ".concat(wrapperWhitespace * 2, "px ")
-}), wrapperWhitespace, function (_a) {
-  var isMirrored = _a.isMirrored;
-  return isMirrored ? 'auto' : '0';
-}, function (_a) {
-  var isMirrored = _a.isMirrored;
-  return isMirrored ? '0' : 'auto';
-}, mq.xlarge, getGridColOfContent(), wrapperWhitespace, mq.xxlarge, spacings.wrapperLarge / 2, getGridColOfContent(), wrapperWhitespace, function (_a) {
-  var isMirrored = _a.isMirrored;
-  return isMirrored ? 'auto' : '50%';
-}, function (_a) {
-  var isMirrored = _a.isMirrored;
-  return isMirrored ? '50%' : 'auto';
-}, function (_a) {
-  var isMirrored = _a.isMirrored;
-  return css(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n                transform: translateX(\n                    calc(\n                        ", "\n                            (", " + ", "px)\n                    )\n                );\n            "], ["\n                transform: translateX(\n                    calc(\n                        ", "\n                            (", " + ", "px)\n                    )\n                );\n            "])), isMirrored ? '100% - ' : '-100% + ', getGridColOfContent(), wrapperWhitespace);
-});
-var WideImage = styled(Image).withConfig({
-  displayName: "TeaserWide__WideImage",
-  componentId: "sc-cnpuar-1"
-})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    position: relative;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n\n    height: 100%;\n    min-height: 400px;\n\n    img {\n        height: 100%;\n    }\n\n    @media ", " {\n        position: absolute;\n        /** \n            calculate width of 6 grid cols (grid width = viewport width without wrapper paddings)\n            and add left or right wrapper padding afterwards\n         */\n        width: calc(\n            ", " + ", "px\n        );\n        left: ", ";\n        right: ", ";\n    }\n\n    @media ", " {\n        /** \n            calculate width of 1 grid cols\n            and add left or right wrapper padding afterwards. Then add this to 50% of current\n            viewport width.\n         */\n        width: calc(50% + ", " + ", "px);\n    }\n\n    @media ", " {\n        /** \n            calculate width of 1 grid cols\n            and add left or right wrapper padding afterwards. Then add this to 50% of large wrapper width.\n         */\n        width: calc(\n            ", "px + ", " +\n                ", "px\n        );\n\n        left: ", ";\n        right: ", ";\n\n        ", ";\n    }\n"], ["\n    position: relative;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n\n    height: 100%;\n    min-height: 400px;\n\n    img {\n        height: 100%;\n    }\n\n    @media ", " {\n        position: absolute;\n        /** \n            calculate width of 6 grid cols (grid width = viewport width without wrapper paddings)\n            and add left or right wrapper padding afterwards\n         */\n        width: calc(\n            ", " + ", "px\n        );\n        left: ", ";\n        right: ", ";\n    }\n\n    @media ", " {\n        /** \n            calculate width of 1 grid cols\n            and add left or right wrapper padding afterwards. Then add this to 50% of current\n            viewport width.\n         */\n        width: calc(50% + ", " + ", "px);\n    }\n\n    @media ", " {\n        /** \n            calculate width of 1 grid cols\n            and add left or right wrapper padding afterwards. Then add this to 50% of large wrapper width.\n         */\n        width: calc(\n            ", "px + ", " +\n                ", "px\n        );\n\n        left: ", ";\n        right: ", ";\n\n        ", ";\n    }\n"])), mq.semilarge, getGridWidth({
-  cols: 6,
-  gridWidth: "100% - ".concat(wrapperWhitespace * 2, "px ")
-}), wrapperWhitespace, function (_a) {
-  var isMirrored = _a.isMirrored;
-  return isMirrored ? 'auto' : '0';
-}, function (_a) {
-  var isMirrored = _a.isMirrored;
-  return isMirrored ? '0' : 'auto';
-}, mq.xlarge, getGridColOfContent(), wrapperWhitespace, mq.xxlarge, spacings.wrapperLarge / 2, getGridColOfContent(), wrapperWhitespace, function (_a) {
-  var isMirrored = _a.isMirrored;
-  return isMirrored ? 'auto' : '50%';
-}, function (_a) {
-  var isMirrored = _a.isMirrored;
-  return isMirrored ? '50%' : 'auto';
-}, function (_a) {
-  var isMirrored = _a.isMirrored;
-  return css(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n                transform: translateX(\n                    calc(\n                        ", "\n                            (", " + ", "px)\n                    )\n                );\n            "], ["\n                transform: translateX(\n                    calc(\n                        ", "\n                            (", " + ", "px)\n                    )\n                );\n            "])), isMirrored ? '100% - ' : '-100% + ', getGridColOfContent(), wrapperWhitespace);
-});
-var Content = styled.div.withConfig({
-  displayName: "TeaserWide__Content",
-  componentId: "sc-cnpuar-2"
-})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    ", "\n\n    @media ", " {\n        ", "\n    }\n"], ["\n    ", "\n\n    @media ", " {\n        ", "\n    }\n"])), function (_a) {
-  var theme = _a.theme;
-  return withRange(getGlobals(theme).sections.seperation.padding.default, 'padding-bottom');
-}, mq.semilarge, function (_a) {
-  var theme = _a.theme;
-  return withRange(getGlobals(theme).sections.seperation.padding.default, 'padding-top');
-});
-var StyledActions = styled(Actions).withConfig({
-  displayName: "TeaserWide__StyledActions",
-  componentId: "sc-cnpuar-3"
-})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"], ["\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n"])), spacings.spacer);
-
-var TeaserWide = function (_a) {
-  var anchorId = _a.anchorId,
-      _b = _a.isMirrored,
-      isMirrored = _b === void 0 ? false : _b,
-      superTitle = _a.superTitle,
-      superTitleAs = _a.superTitleAs,
-      title = _a.title,
-      titleAs = _a.titleAs,
-      image = _a.image,
-      video = _a.video,
-      text = _a.text,
-      primaryAction = _a.primaryAction,
-      secondaryAction = _a.secondaryAction,
-      bgMode = _a.bgMode;
-  var colors = useLibTheme().colors;
-  var isInverted = bgMode === 'inverted';
-  var hasBg = bgMode === 'full';
-  var hasVideo = isValidArray(video === null || video === void 0 ? void 0 : video.urls, false);
-  var viewRef = useRef(null);
-
-  var _c = useState(!(image === null || image === void 0 ? void 0 : image.small) || false),
-      isLoaded = _c[0],
-      setLoaded = _c[1];
-
-  var _d = useState(false),
-      isVideoActive = _d[0],
-      setVideoActive = _d[1];
-
-  var isObserverSupported = useObserverSupport();
-  useUpdateEffect(function () {
-    if (!viewRef.current || !hasVideo) 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]);
-  return React__default.createElement(Section, {
-    ref: viewRef,
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : hasBg ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode, true)
-  }, (image === null || image === void 0 ? void 0 : image.small) && (!video || !isLoaded) && React__default.createElement(WideImage, __assign({
-    coverSpace: true
-  }, image, {
-    isMirrored: isMirrored,
-    isInverted: isInverted
-  })), hasVideo && React__default.createElement(WideVideo, {
-    urls: isVideoActive ? video === null || video === void 0 ? void 0 : video.urls : undefined,
-    muted: true,
-    autoPlay: true,
-    loop: true,
-    onCanPlayThrough: function () {
-      return setLoaded(true);
-    },
-    isVisible: isLoaded,
-    isInverted: isInverted,
-    isMirrored: isMirrored,
-    ratios: video === null || video === void 0 ? void 0 : video.aspectRatios
-  }), React__default.createElement(Wrapper, {
-    clampWidth: "normal",
-    addWhitespace: true
-  }, React__default.createElement(Grid.Row, {
-    valign: "center"
-  }, React__default.createElement(Grid.Col, {
-    semilarge: {
-      span: 6 / 12,
-      move: (isMirrored ? 6 : 0) / 12
-    },
-    xlarge: {
-      span: 7 / 12,
-      move: (isMirrored ? 5 : 0) / 12
-    }
-  }), React__default.createElement(Grid.Col, {
-    semilarge: {
-      span: 6 / 12,
-      move: (isMirrored ? -6 : 0) / 12
-    },
-    xlarge: {
-      span: 5 / 12,
-      move: (isMirrored ? -7 : 0) / 12
-    }
-  }, React__default.createElement(Content, null, React__default.createElement(IntroBlock, {
-    titleHyphens: true,
-    title: title,
-    titleAs: titleAs,
-    superTitle: superTitle,
-    superTitleAs: superTitleAs,
-    text: text,
-    colorMode: isInverted ? 'inverted' : 'default'
-  }), (primaryAction || secondaryAction) && React__default.createElement(StyledActions, {
-    primary: primaryAction && primaryAction(isInverted),
-    secondary: secondaryAction && secondaryAction(isInverted)
-  }))))));
-};
-var TeaserWide$1 = withLibTheme(TeaserWide);
-var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5, templateObject_6, templateObject_7;
-
-var TimelineBlock = styled.div.withConfig({
-  displayName: "Timeline__TimelineBlock",
-  componentId: "sc-em4o0o-0"
-})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    position: relative;\n\n    @media ", " {\n        text-align: ", ";\n    }\n\n    &:after {\n        content: '';\n        width: 10px;\n        height: 10px;\n\n        box-sizing: content-box;\n        border: 2px solid\n            ", ";\n        border-radius: 50%;\n\n        background: ", ";\n\n        position: absolute;\n        top: 16px;\n        left: 0px;\n\n        transition: all 0.2s ease-in-out;\n\n        @media ", " {\n            left: ", ";\n            right: ", ";\n            transform: translateX(\n                ", "\n            );\n        }\n    }\n\n    &:before {\n        content: '';\n        display: block;\n        position: absolute;\n        width: 2px;\n        min-height: 160px;\n        height: 100%;\n        background: ", ";\n        left: 5px;\n\n        @media ", " {\n            left: 50%;\n            transform: translateX(-50%);\n        }\n    }\n\n    &:first-child {\n        padding-top: 0;\n\n        &:before {\n            top: 16px;\n        }\n    }\n"], ["\n    position: relative;\n\n    @media ", " {\n        text-align: ", ";\n    }\n\n    &:after {\n        content: '';\n        width: 10px;\n        height: 10px;\n\n        box-sizing: content-box;\n        border: 2px solid\n            ", ";\n        border-radius: 50%;\n\n        background: ", ";\n\n        position: absolute;\n        top: 16px;\n        left: 0px;\n\n        transition: all 0.2s ease-in-out;\n\n        @media ", " {\n            left: ", ";\n            right: ", ";\n            transform: translateX(\n                ", "\n            );\n        }\n    }\n\n    &:before {\n        content: '';\n        display: block;\n        position: absolute;\n        width: 2px;\n        min-height: 160px;\n        height: 100%;\n        background: ", ";\n        left: 5px;\n\n        @media ", " {\n            left: 50%;\n            transform: translateX(-50%);\n        }\n    }\n\n    &:first-child {\n        padding-top: 0;\n\n        &:before {\n            top: 16px;\n        }\n    }\n"])), mq.large, function (_a) {
-  var isSwitched = _a.isSwitched;
-  return isSwitched ? 'left' : 'right';
-}, function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return isInverted ? getColors(theme).elementBg.light : getColors(theme).elementBg.dark;
-}, function (_a) {
-  var theme = _a.theme,
-      isActive = _a.isActive,
-      isInverted = _a.isInverted;
-  return isActive ? isInverted ? getColors(theme).elementBg.light : getColors(theme).elementBg.dark : isInverted ? getColors(theme).elementBg.dark : getColors(theme).elementBg.light;
-}, mq.large, function (_a) {
-  var isSwitched = _a.isSwitched;
-  return !isSwitched ? '50%' : 'auto';
-}, function (_a) {
-  var isSwitched = _a.isSwitched;
-  return isSwitched && '50%';
-}, function (_a) {
-  var isSwitched = _a.isSwitched;
-  return isSwitched ? '50%' : '-50%';
-}, function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return isInverted ? getColors(theme).elementBg.light : getColors(theme).elementBg.dark;
-}, mq.large);
-var TimelineText = styled.div.withConfig({
-  displayName: "Timeline__TimelineText",
-  componentId: "sc-em4o0o-1"
-})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n    position: relative;\n    padding-left: ", "px;\n    padding-bottom: ", "px;\n\n    @media ", " {\n        max-width: 50%;\n\n        margin-left: ", ";\n        margin-right: ", ";\n\n        padding: ", ";\n    }\n\n    &:first-child {\n        padding-top: 0;\n    }\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    position: relative;\n    padding-left: ", "px;\n    padding-bottom: ", "px;\n\n    @media ", " {\n        max-width: 50%;\n\n        margin-left: ", ";\n        margin-right: ", ";\n\n        padding: ", ";\n    }\n\n    &:first-child {\n        padding-top: 0;\n    }\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge * 3 + 2, spacings.spacer, mq.large, function (_a) {
-  var isSwitched = _a.isSwitched;
-  return isSwitched && '50%';
-}, function (_a) {
-  var isSwitched = _a.isSwitched;
-  return !isSwitched && '50%';
-}, function (_a) {
-  var isSwitched = _a.isSwitched;
-  return isSwitched ? "".concat(spacings.spacer, "px 0 ").concat(spacings.spacer * 1.75, "px ").concat(spacings.spacer, "px") : "".concat(spacings.spacer, "px ").concat(spacings.spacer, "px ").concat(spacings.spacer * 1.75, "px 0");
-}, spacings.nudge * 2);
-var ItemTitle = styled(Heading).withConfig({
-  displayName: "Timeline__ItemTitle",
-  componentId: "sc-em4o0o-2"
-})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject([""], [""])));
-var ItemTextBlock = styled(Copy).withConfig({
-  displayName: "Timeline__ItemTextBlock",
-  componentId: "sc-em4o0o-3"
-})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject([""], [""])));
-
-var Timeline = function (_a) {
-  var anchorId = _a.anchorId,
-      bgMode = _a.bgMode,
-      items = _a.items;
-  var theme = useContext(ThemeContext);
-  var isInverted = bgMode === 'inverted';
-  var hasBg = bgMode === 'full';
-
-  var _b = useState([]),
-      targetRefs = _b[0],
-      setTargetRefs = _b[1];
-
-  var observerSupported = useObserverSupport();
-  var observerRef = useRef(null);
-
-  var _c = useState(0),
-      activeItem = _c[0],
-      setActiveItem = _c[1];
-
-  useEffect(function () {
-    if (observerSupported && targetRefs && targetRefs.length > 0) {
-      var options = {
-        rootMargin: '-50% 0% -50% 0%',
-        threshold: 0
-      };
-      observerRef.current = new IntersectionObserver(function (entries) {
-        entries.forEach(function (entry) {
-          if (entry.isIntersecting) {
-            var index = targetRefs === null || targetRefs === void 0 ? void 0 : targetRefs.findIndex(function (t) {
-              return t.current === entry.target;
-            });
-            setActiveItem(index);
-          }
-        });
-      }, options);
-
-      for (var i = 0; i < targetRefs.length; i++) {
-        observerRef.current.observe(targetRefs[i].current);
-      }
-    }
-
-    return function () {
-      var _a;
-
-      (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
-    };
-  }, [targetRefs, observerSupported]);
-  useEffect(function () {
-    setTargetRefs(function () {
-      return Array(items === null || items === void 0 ? void 0 : items.length).fill(null).map(function (_, i) {
-        return targetRefs[i] || createRef();
-      });
-    }); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [items === null || items === void 0 ? void 0 : items.length]);
-  return React__default.createElement(Section, {
-    anchorId: anchorId,
-    bgColor: isInverted ? getColors(theme).sectionBg.dark : hasBg ? getColors(theme).sectionBg.medium : 'transparent',
-    bgMode: mapToBgMode(bgMode, true),
-    addSeperation: true
-  }, React__default.createElement(Wrapper, {
-    addWhitespace: true
-  }, items && items.map(function (item, i) {
-    return React__default.createElement(TimelineBlock, {
-      ref: targetRefs[i],
-      isActive: activeItem === i,
-      isSwitched: i % 2 === 0,
-      isInverted: isInverted,
-      key: i
-    }, React__default.createElement(TimelineText, {
-      isSwitched: i % 2 === 0
-    }, React__default.createElement(ItemTitle, {
-      size: "heading-2",
-      textColor: isInverted ? getColors(theme).text.inverted : getColors(theme).text.default
-    }, item.label), React__default.createElement(ItemTextBlock, {
-      type: "copy-b",
-      size: "big",
-      isInverted: isInverted
-    }, item.title), React__default.createElement(ItemTextBlock, {
-      innerHTML: item.text,
-      isInverted: isInverted
-    })));
-  })));
-};
-var Timeline$1 = withLibTheme(Timeline);
-var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1;
-
-var Video$1 = function (_a) {
-  var anchorId = _a.anchorId,
-      bgMode = _a.bgMode,
-      bgImage = _a.bgImage,
-      embedId = _a.embedId,
-      playIcon = _a.playIcon,
-      consentText = _a.consentText,
-      consentAction = _a.consentAction;
-  var colors = useLibTheme().colors;
-  var isInverted = bgMode === 'inverted';
-  return React__default.createElement(Section, {
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : bgMode ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode),
-    addSeperation: true
-  }, React__default.createElement(Wrapper, {
-    addWhitespace: true
-  }, React__default.createElement(VideoCard, {
-    bgImage: bgImage,
-    embedId: embedId,
-    playIcon: playIcon,
-    consentText: consentText,
-    consentAction: consentAction
-  })));
-};
-var Video$2 = withLibTheme(Video$1);
-
-var VideoContainer = styled.div.withConfig({
-  displayName: "RawVideo__VideoContainer",
-  componentId: "sc-ylrujv-0"
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    cursor: pointer;\n"], ["\n    position: relative;\n    cursor: pointer;\n"])));
-var Overlay = styled.div.withConfig({
-  displayName: "RawVideo__Overlay",
-  componentId: "sc-ylrujv-1"
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    position: relative;\n    padding-top: ", ";\n    background: ", ";\n\n    background-image: ", ";\n    background-size: cover;\n    background-repeat: no-repeat;\n    background-position: center;\n\n    border-radius: ", ";\n    overflow: hidden;\n\n    @media ", " {\n        text-align: left;\n\n        background-image: ", ";\n    }\n\n    @media ", " {\n        background-image: ", ";\n    }\n\n    @media ", " {\n        background-image: ", ";\n    }\n\n    @media ", " {\n        background-image: ", ";\n    }\n\n    &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        pointer-events: none;\n\n        background: linear-gradient(\n            358.19deg,\n            rgba(29, 34, 35, 0.52) 12.37%,\n            rgba(29, 34, 35, 0) 59.02%\n        );\n    }\n"], ["\n    position: relative;\n    padding-top: ", ";\n    background: ", ";\n\n    background-image: ", ";\n    background-size: cover;\n    background-repeat: no-repeat;\n    background-position: center;\n\n    border-radius: ", ";\n    overflow: hidden;\n\n    @media ", " {\n        text-align: left;\n\n        background-image: ", ";\n    }\n\n    @media ", " {\n        background-image: ", ";\n    }\n\n    @media ", " {\n        background-image: ", ";\n    }\n\n    @media ", " {\n        background-image: ", ";\n    }\n\n    &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        pointer-events: none;\n\n        background: linear-gradient(\n            358.19deg,\n            rgba(29, 34, 35, 0.52) 12.37%,\n            rgba(29, 34, 35, 0) 59.02%\n        );\n    }\n"])), "calc(100% / (16 / 9))", function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return isInverted ? getGlobals(theme).sections.imagePlaceholderBg.inverted : getGlobals(theme).sections.imagePlaceholderBg.default;
-}, function (_a) {
-  var bgImage = _a.bgImage;
-  return (bgImage === null || bgImage === void 0 ? void 0 : bgImage.small) && "url(\"".concat(bgImage.small, "\")");
-}, function (_a) {
-  var theme = _a.theme;
-  return getGlobals(theme).sections.edgeRadius;
-}, mq.medium, function (_a) {
-  var bgImage = _a.bgImage;
-  return (bgImage === null || bgImage === void 0 ? void 0 : bgImage.medium) && "url(\"".concat(bgImage.medium, "\")");
-}, mq.semilarge, function (_a) {
-  var bgImage = _a.bgImage;
-  return (bgImage === null || bgImage === void 0 ? void 0 : bgImage.semilarge) && "url(\"".concat(bgImage.semilarge, "\")");
-}, mq.large, function (_a) {
-  var bgImage = _a.bgImage;
-  return (bgImage === null || bgImage === void 0 ? void 0 : bgImage.large) && "url(\"".concat(bgImage.large, "\")");
-}, mq.xlarge, function (_a) {
-  var bgImage = _a.bgImage;
-  return (bgImage === null || bgImage === void 0 ? void 0 : bgImage.xlarge) && "url(\"".concat(bgImage.xlarge, "\")");
-});
-var VideoControls = styled.button.withConfig({
-  displayName: "RawVideo__VideoControls",
-  componentId: "sc-ylrujv-2"
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n    border: none;\n    background: none;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: ", ";\n    z-index: 1;\n    padding: 0;\n\n    cursor: pointer;\n\n    & > * {\n        opacity: 0.8;\n        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n        height: 80px;\n        width: 80px;\n\n        color: ", ";\n    }\n\n    ", ":hover > & > * {\n        transform: scale(1.05);\n        opacity: 1;\n    }\n\n    ", ":active > & > * {\n        transform: scale(0.95);\n        opacity: 1;\n    }\n\n    &:focus {\n        outline: 2px solid ", ";\n        border-radius: 50%;\n        opacity: 1;\n\n        & > * {\n            color: ", ";\n        }\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        box-shadow: none;\n    }\n"], ["\n    display: block;\n    border: none;\n    background: none;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: ", ";\n    z-index: 1;\n    padding: 0;\n\n    cursor: pointer;\n\n    & > * {\n        opacity: 0.8;\n        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n        height: 80px;\n        width: 80px;\n\n        color: ", ";\n    }\n\n    ", ":hover > & > * {\n        transform: scale(1.05);\n        opacity: 1;\n    }\n\n    ", ":active > & > * {\n        transform: scale(0.95);\n        opacity: 1;\n    }\n\n    &:focus {\n        outline: 2px solid ", ";\n        border-radius: 50%;\n        opacity: 1;\n\n        & > * {\n            color: ", ";\n        }\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        box-shadow: none;\n    }\n"])), function (_a) {
-  var theme = _a.theme;
-  return getColors(theme).elementBg.light;
-}, function (_a) {
-  var theme = _a.theme;
-  return getColors(theme).elementBg.dark;
-}, Overlay, Overlay, function (_a) {
-  var theme = _a.theme;
-  return getColors(theme).primary.default;
-}, function (_a) {
-  var theme = _a.theme;
-  return getColors(theme).primary.default;
-});
-var Video = styled(VideoBlock).withConfig({
-  displayName: "RawVideo__Video",
-  componentId: "sc-ylrujv-3"
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    opacity: ", ";\n    pointer-events: ", ";\n"], ["\n    opacity: ", ";\n    pointer-events: ", ";\n"])), function (_a) {
-  var isVisible = _a.isVisible;
-  return isVisible ? 1 : 0;
-}, function (_a) {
-  var isVisible = _a.isVisible;
-  return isVisible ? 'all' : 'none';
-});
-
-var RawVideo = function (_a) {
-  var anchorId = _a.anchorId,
-      bgMode = _a.bgMode,
-      videoUrls = _a.videoUrls,
-      placeholderImg = _a.placeholderImg,
-      playIcon = _a.playIcon,
-      autoplay = _a.autoplay,
-      loop = _a.loop;
-  var colors = useLibTheme().colors;
-  var isInverted = bgMode === 'inverted';
-
-  var _b = useState(autoplay || false),
-      isStarted = _b[0],
-      setIsStarted = _b[1];
-
-  return React__default.createElement(Section, {
-    anchorId: anchorId,
-    bgColor: isInverted ? colors.sectionBg.dark : bgMode ? colors.sectionBg.medium : colors.sectionBg.light,
-    bgMode: mapToBgMode(bgMode),
-    addSeperation: true
-  }, React__default.createElement(Wrapper, {
-    addWhitespace: true
-  }, React__default.createElement(VideoContainer, {
-    onClick: function () {
-      if (isValidArray(videoUrls, false)) {
-        setIsStarted(true);
-      }
-    }
-  }, isStarted && React__default.createElement(Video, {
-    isVisible: isStarted || !(placeholderImg === null || placeholderImg === void 0 ? void 0 : placeholderImg.small),
-    controls: !autoplay,
-    autoPlay: true,
-    loop: loop,
-    muted: autoplay,
-    ratios: {
-      small: 16 / 9
-    },
-    urls: videoUrls,
-    isInverted: isInverted
-  }), !isStarted && React__default.createElement(Overlay, {
-    bgImage: placeholderImg,
-    isInverted: isInverted
-  }, React__default.createElement(VideoControls, null, playIcon || React__default.createElement(Play, {
-    iconColor: "#000"
-  }))))));
-};
-var RawVideo$1 = withLibTheme(RawVideo);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
-
-export { Accordion$1 as Accordion, AlertList$1 as AlertList, Article$1 as Article, CallToAction$1 as CallToAction, CardList$1 as CardList, ComparisonSlider$1 as ComparisonSlider, CrossPromotion$1 as CrossPromotion, FactGrid$1 as FactGrid, FactList$1 as FactList, FeatureList$1 as FeatureList, Gallery$1 as Gallery, Header$1 as Header, IconList$1 as IconList, IndexList$1 as IndexList, Intro$2 as Intro, Map$1 as Map, NavList$1 as NavList, NumberList$1 as NumberList, ParallaxBackground, Poster$1 as Poster, PriceList$1 as PriceList, PriceTable$1 as PriceTable, Quote$1 as Quote, RawVideo$1 as RawVideo, SimpleImage$1 as SimpleImage, SocialWall$1 as SocialWall, Table$1 as Table, Teaser$1 as Teaser, TeaserWide$1 as TeaserWide, Timeline$1 as Timeline, Video$2 as Video };
-//# sourceMappingURL=sections.js.map