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

package/esm/sections.js

@@ -0,0 +1,3740 @@
+import { a as __makeTemplateObject, e as __spreadArray, a5 as Minus, a4 as Plus, Q as Info, _ as __assign, x as ArrowLeftRight, y as External, s as ArrowDown, z as Instagram, J as Play, L as LocationPin, u as ArrowRightGhost, w as ArrowLeftGhost, P as Phone, M as Mail } from './ClockFilled-62515a8f.js';
+import { S as Section, m as mapToBgMode } from './Section-b76e6909.js';
+import { W as Wrapper, w as wrapperWhitespace } from './Wrapper-90dccc89.js';
+import { C as Copy, c as copyStyle, H as Heading } from './Copy-a28aeb61.js';
+import * as React from 'react';
+import React__default, { useState, useEffect, useRef, forwardRef, useMemo, useContext, createRef } from 'react';
+import styled, { css, ThemeContext } from 'styled-components';
+import { s as spacings, g as getColors, m as mq, c as getGlobals, w as withRange, a as getFonts, f as getSVGDataImg } from './styles-da982973.js';
+import { w as withLibTheme, u as useLibTheme } from './LibThemeProvider-52555ac9.js';
+import { a as generateFAQ, b as generateLocalBusiness } from './structuredData-abf610d8.js';
+import { g as gridSettings, G as Grid, a as getGridWidth } from './Grid-5eec127f.js';
+import { L as Link } from './Link-3fd9c9b8.js';
+import { S as StatusFormatter } from './statusFormatter-9be0fbff.js';
+import { u as useEqualSheetHeight } from './useEqualSheetHeight-4030635e.js';
+import { T as Title$5, a as TableBlock } from './TableBlock-cc49e089.js';
+import { A as Actions } from './Actions-21372b3a.js';
+import { I as IntroBlock, V as VideoBlock } from './VideoBlock-5fe94711.js';
+import { I as Image } from './Image-dc2b33c1.js';
+import ReactDOMServer from 'react-dom/server';
+import { P as Pointer } from './Pointer-5c77b1f1.js';
+import { u as useScrollTo } from './useScrollTo-70af34bf.js';
+import { e as getNavbarState, a as getFullNavbarHeights } from './Navigation-3ded0cfc.js';
+import { a as useMediaQueries } from './useMediaQuery-b08dda62.js';
+import { C as Callout } from './Callout-a926194d.js';
+import { i as isValidArray } from './arrays-65b644ef.js';
+import { u as useObserverSupport } from './useObserverSupport-02bce7f5.js';
+import { u as useUpdateEffect } from './useUpdateEffect-824c0c84.js';
+import { V as VideoCard } from './VideoCard-784c2a51.js';
+import { C as Control$1 } from './Control-2d605e12.js';
+import { u as useLeafletMap } from './useLeafletMap-84170d32.js';
+import './concat-ab3c66f2.js';
+import './clamp-12d37b65.js';
+import 'react-schemaorg';
+import './navigation-ada7fd84.js';
+import './LanguageSwitcher-3fa20077.js';
+import './useCookieConsent-0fc8667c.js';
+import './ButtonGhost-ae2e97a2.js';
+import './hexRgbConverter-edb91624.js';
+
+var useIE = function (initialValue) {
+  var _a = useState(initialValue || false),
+      isIE = _a[0],
+      setIE = _a[1];
+
+  useEffect(function () {
+    setIE(document.body.style.msTouchAction !== undefined);
+  }, []);
+  return isIE;
+};
+
+var AccordionContainer = styled.div.withConfig({
+  displayName: "Accordion__AccordionContainer",
+  componentId: "sc-1el5cmc-0"
+})(templateObject_1$w || (templateObject_1$w = __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$r || (templateObject_2$r = __makeTemplateObject([""], [""])));
+var AccordionHead = styled.summary.withConfig({
+  displayName: "Accordion__AccordionHead",
+  componentId: "sc-1el5cmc-2"
+})(templateObject_3$n || (templateObject_3$n = __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$k || (templateObject_4$k = __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$i || (templateObject_5$i = __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$w, templateObject_2$r, templateObject_3$n, templateObject_4$k, templateObject_5$i;
+
+var View$8 = styled.div.withConfig({
+  displayName: "Alert__View",
+  componentId: "sc-1d5c0fb-0"
+})(templateObject_1$v || (templateObject_1$v = __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$4 = styled.div.withConfig({
+  displayName: "Alert__Icon",
+  componentId: "sc-1d5c0fb-1"
+})(templateObject_2$q || (templateObject_2$q = __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$m || (templateObject_3$m = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n"], ["\n    display: flex;\n    align-items: center;\n"])));
+var Content$5 = styled.div.withConfig({
+  displayName: "Alert__Content",
+  componentId: "sc-1d5c0fb-3"
+})(templateObject_4$j || (templateObject_4$j = __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$4 = styled(Copy).withConfig({
+  displayName: "Alert__Title",
+  componentId: "sc-1d5c0fb-4"
+})(templateObject_5$h || (templateObject_5$h = __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$d || (templateObject_6$d = __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$4, null, customIcon ? customIcon({
+    isInverted: isInverted
+  }) : React__default.createElement(Info, null)), React__default.createElement(MainLabel$1, null, title && React__default.createElement(Title$4, {
+    textColor: "inherit",
+    size: "medium",
+    type: "copy-b"
+  }, title)), React__default.createElement("span", null), React__default.createElement(Content$5, 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$v, templateObject_2$q, templateObject_3$m, templateObject_4$j, templateObject_5$h, templateObject_6$d;
+
+var List$3 = styled.ul.withConfig({
+  displayName: "AlertList__List",
+  componentId: "sc-bfdeyu-0"
+})(templateObject_1$u || (templateObject_1$u = __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$p || (templateObject_2$p = __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$u, templateObject_2$p;
+
+var StyledTitle$1 = styled(Title$5).withConfig({
+  displayName: "Article__StyledTitle",
+  componentId: "sc-1lrfo1r-0"
+})(templateObject_1$t || (templateObject_1$t = __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$o || (templateObject_2$o = __makeTemplateObject(["\n    text-align: left;\n"], ["\n    text-align: left;\n"])));
+var StyledActions$5 = styled(Actions).withConfig({
+  displayName: "Article__StyledActions",
+  componentId: "sc-1lrfo1r-2"
+})(templateObject_3$l || (templateObject_3$l = __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$5, {
+    primary: primaryAction && primaryAction(isInverted),
+    secondary: secondaryAction && secondaryAction(isInverted)
+  })));
+};
+var Article$1 = withLibTheme(Article);
+var templateObject_1$t, templateObject_2$o, templateObject_3$l;
+
+var ContactView = styled.div.withConfig({
+  displayName: "CallToAction__ContactView",
+  componentId: "sc-1wdvzex-0"
+})(templateObject_1$s || (templateObject_1$s = __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$n || (templateObject_2$n = __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$k || (templateObject_3$k = __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$i || (templateObject_4$i = __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$g || (templateObject_5$g = __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$4 = styled(Actions).withConfig({
+  displayName: "CallToAction__StyledActions",
+  componentId: "sc-1wdvzex-5"
+})(templateObject_6$c || (templateObject_6$c = __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$9 || (templateObject_7$9 = __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$3 || (templateObject_8$3 = __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 colors = useLibTheme().colors;
+  var isInverted = bgMode === 'inverted';
+  return React__default.createElement(Section, {
+    addSeperation: true,
+    anchorId: anchorId,
+    bgColor: isInverted ? colors.sectionBg.dark : colors.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$4, {
+    primary: primaryAction && primaryAction({
+      isInverted: isInverted,
+      isTextCentered: true
+    }),
+    secondary: secondaryAction && secondaryAction({
+      isInverted: isInverted,
+      isTextCentered: true
+    })
+  })));
+};
+var CallToAction$1 = withLibTheme(CallToAction);
+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;
+
+var View$7 = styled.div.withConfig({
+  displayName: "CardList__View",
+  componentId: "sc-179ugoh-0"
+})(templateObject_1$r || (templateObject_1$r = __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$j || (templateObject_3$j = __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$m || (templateObject_2$m = __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$f || (templateObject_5$f = __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$h || (templateObject_4$h = __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$9 = styled(Image).withConfig({
+  displayName: "CardList__StyledImage",
+  componentId: "sc-179ugoh-3"
+})(templateObject_6$b || (templateObject_6$b = __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$4 = styled.div.withConfig({
+  displayName: "CardList__Content",
+  componentId: "sc-179ugoh-4"
+})(templateObject_7$8 || (templateObject_7$8 = __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$2 || (templateObject_8$2 = __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$3 = styled(Copy).withConfig({
+  displayName: "CardList__Title",
+  componentId: "sc-179ugoh-6"
+})(templateObject_9$2 || (templateObject_9$2 = __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$2 || (templateObject_10$2 = __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$2 || (templateObject_11$2 = __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$3 = styled.div.withConfig({
+  displayName: "CardList__Icon",
+  componentId: "sc-179ugoh-9"
+})(templateObject_12$2 || (templateObject_12$2 = __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$9, __assign({}, image, {
+    coverSpace: true,
+    isInverted: isInverted,
+    ratios: {
+      small: {
+        w: 352,
+        h: 108
+      },
+      medium: {
+        w: 286,
+        h: 244
+      }
+    }
+  })), React__default.createElement(Content$4, {
+    hasIcon: !!customIcon
+  }, customIcon ? React__default.createElement(Icon$3, null, customIcon({})) : '', React__default.createElement(TextContainer$1, null, title && React__default.createElement(Title$3, {
+    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$1 = 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$2 = withLibTheme(CardList$1);
+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, 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$q || (templateObject_1$q = __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$l || (templateObject_2$l = __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$g || (templateObject_4$g = __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$i || (templateObject_3$i = __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$e || (templateObject_5$e = __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$a || (templateObject_6$a = __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$7 || (templateObject_7$7 = __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$1 || (templateObject_8$1 = __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$1 || (templateObject_9$1 = __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$1 || (templateObject_11$1 = __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$1 || (templateObject_10$1 = __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$1 || (templateObject_12$1 = __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$q, templateObject_2$l, templateObject_3$i, templateObject_4$g, templateObject_5$e, templateObject_6$a, templateObject_7$7, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1;
+
+var View$6 = styled(Link).withConfig({
+  displayName: "PromotionCard__View",
+  componentId: "sc-1p1egy3-0"
+})(templateObject_2$k || (templateObject_2$k = __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$p || (templateObject_1$p = __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$8 = styled(Image).withConfig({
+  displayName: "PromotionCard__StyledImage",
+  componentId: "sc-1p1egy3-1"
+})(templateObject_3$h || (templateObject_3$h = __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$f || (templateObject_4$f = __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$5).withConfig({
+  displayName: "PromotionCard__StyledTitle",
+  componentId: "sc-1p1egy3-3"
+})(templateObject_5$d || (templateObject_5$d = __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$9 || (templateObject_6$9 = __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$2 = styled.div.withConfig({
+  displayName: "PromotionCard__Icon",
+  componentId: "sc-1p1egy3-5"
+})(templateObject_7$6 || (templateObject_7$6 = __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$8, __assign({}, image, {
+    isInverted: isInverted,
+    coverSpace: true
+  })), icon && React__default.createElement(Icon$2, 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$p, templateObject_2$k, templateObject_3$h, templateObject_4$f, templateObject_5$d, templateObject_6$9, templateObject_7$6;
+
+var Card$1 = styled(PromotionCard).withConfig({
+  displayName: "CrossPromotion__Card",
+  componentId: "sc-1jmsp4-0"
+})(templateObject_1$o || (templateObject_1$o = __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$o;
+
+var View$5 = styled.div.withConfig({
+  displayName: "Fact__View",
+  componentId: "sc-elpxk2-0"
+})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject([""], [""])));
+var ImageContainer$2 = styled.div.withConfig({
+  displayName: "Fact__ImageContainer",
+  componentId: "sc-elpxk2-1"
+})(templateObject_2$j || (templateObject_2$j = __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$7 = styled(Image).withConfig({
+  displayName: "Fact__StyledImage",
+  componentId: "sc-elpxk2-2"
+})(templateObject_3$g || (templateObject_3$g = __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$3 = styled.div.withConfig({
+  displayName: "Fact__Content",
+  componentId: "sc-elpxk2-3"
+})(templateObject_4$e || (templateObject_4$e = __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$2 = styled(Copy).withConfig({
+  displayName: "Fact__Title",
+  componentId: "sc-elpxk2-4"
+})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject([""], [""])));
+var SubTitle = styled(Copy).withConfig({
+  displayName: "Fact__SubTitle",
+  componentId: "sc-elpxk2-5"
+})(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject([""], [""])));
+var Text$3 = styled(Copy).withConfig({
+  displayName: "Fact__Text",
+  componentId: "sc-elpxk2-6"
+})(templateObject_7$5 || (templateObject_7$5 = __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$2, {
+    isCentered: isCentered
+  }, React__default.createElement(StyledImage$7, {
+    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$3, {
+    isCentered: isCentered
+  }, title && React__default.createElement(Title$2, {
+    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$n, templateObject_2$j, templateObject_3$g, templateObject_4$e, templateObject_5$c, templateObject_6$8, templateObject_7$5;
+
+var FactFill = styled.div.withConfig({
+  displayName: "FactGrid__FactFill",
+  componentId: "sc-114y2fo-0"
+})(templateObject_1$m || (templateObject_1$m = __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$m;
+
+var FactsContainer = styled.ul.withConfig({
+  displayName: "FactList__FactsContainer",
+  componentId: "sc-elh0vj-0"
+})(templateObject_1$l || (templateObject_1$l = __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$i || (templateObject_2$i = __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$1 = styled.img.withConfig({
+  displayName: "FactList__Icon",
+  componentId: "sc-elh0vj-2"
+})(templateObject_3$f || (templateObject_3$f = __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$d || (templateObject_4$d = __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$b || (templateObject_5$b = __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$1, {
+      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$l, templateObject_2$i, templateObject_3$f, templateObject_4$d, templateObject_5$b;
+
+var View$4 = styled.div.withConfig({
+  displayName: "Feature__View",
+  componentId: "sc-d7vugh-0"
+})(templateObject_1$k || (templateObject_1$k = __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$e || (templateObject_3$e = __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$h || (templateObject_2$h = __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$1 = styled(Link).withConfig({
+  displayName: "Feature__ImageContainer",
+  componentId: "sc-d7vugh-2"
+})(templateObject_4$c || (templateObject_4$c = __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$6 = styled(Image).withConfig({
+  displayName: "Feature__StyledImage",
+  componentId: "sc-d7vugh-3"
+})(templateObject_5$a || (templateObject_5$a = __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$7 || (templateObject_6$7 = __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$4 || (templateObject_7$4 = __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$1, __assign({}, link, {
+    isCentered: isCentered
+  }), React__default.createElement(StyledImage$6, {
+    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,
+    dataSheet: "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: isInverted,
+    isTextCentered: isCentered
+  })));
+});
+Feature.displayName = 'Feature';
+var templateObject_1$k, templateObject_2$h, templateObject_3$e, templateObject_4$c, templateObject_5$a, templateObject_6$7, templateObject_7$4;
+
+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$5 = styled(Image).withConfig({
+  displayName: "Gallery__StyledImage",
+  componentId: "sc-1c4lgpr-0"
+})(templateObject_1$j || (templateObject_1$j = __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$5, __assign({}, img, {
+      coverSpace: true,
+      isInverted: isInverted
+    })));
+  }))));
+};
+var Gallery$1 = withLibTheme(Gallery);
+var templateObject_1$j;
+
+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 View$3 = styled(Link).withConfig({
+  displayName: "NavBlock__View",
+  componentId: "sc-7v33be-0"
+})(templateObject_1$g || (templateObject_1$g = __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$e || (templateObject_2$e = __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$2 = styled(Copy).withConfig({
+  displayName: "NavBlock__Text",
+  componentId: "sc-7v33be-2"
+})(templateObject_3$b || (templateObject_3$b = __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 = styled.div.withConfig({
+  displayName: "NavBlock__Icon",
+  componentId: "sc-7v33be-3"
+})(templateObject_4$9 || (templateObject_4$9 = __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$7 || (templateObject_5$7 = __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$5 || (templateObject_6$5 = __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, 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$2, {
+    size: "small",
+    isInverted: isInverted,
+    innerHTML: text,
+    hasIcon: !!customIcon
+  })));
+};
+var templateObject_1$g, templateObject_2$e, templateObject_3$b, templateObject_4$9, templateObject_5$7, templateObject_6$5;
+
+var List = styled.ul.withConfig({
+  displayName: "NavList__List",
+  componentId: "sc-1lrkz0q-0"
+})(templateObject_1$f || (templateObject_1$f = __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$d || (templateObject_2$d = __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$f, templateObject_2$d;
+
+var CARD_MIN_WIDTH = 240;
+var CARD_MAX_WIDTH = 440;
+var MEDIA_QUERIES = {
+  medium: '(min-width: 36.5em)',
+  semilarge: '(min-width: 54.75em)',
+  large: '(min-width: 73em)',
+  xlarge: '(min-width: 90em)'
+};
+var View$2 = styled.li.withConfig({
+  displayName: "NumberList__View",
+  componentId: "sc-ehx754-0"
+})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n    text-align: ", ";\n\n    & > * {\n        margin: ", ";\n        margin-right: auto;\n    }\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    text-align: ", ";\n\n    & > * {\n        margin: ", ";\n        margin-right: auto;\n    }\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), function (_a) {
+  var isCentered = _a.isCentered;
+  return isCentered ? 'center' : 'left';
+}, function (_a) {
+  var isCentered = _a.isCentered;
+  return isCentered ? '0 auto' : 0;
+}, spacings.nudge * 3);
+var ImageContainer = styled.div.withConfig({
+  displayName: "NumberList__ImageContainer",
+  componentId: "sc-ehx754-1"
+})(templateObject_2$c || (templateObject_2$c = __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$4 = styled(Image).withConfig({
+  displayName: "NumberList__StyledImage",
+  componentId: "sc-ehx754-2"
+})(templateObject_3$a || (templateObject_3$a = __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 Label = styled(Copy).withConfig({
+  displayName: "NumberList__Label",
+  componentId: "sc-ehx754-3"
+})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject([""], [""])));
+var Text$1 = styled(Copy).withConfig({
+  displayName: "NumberList__Text",
+  componentId: "sc-ehx754-4"
+})(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject([""], [""])));
+var NumberListCard = forwardRef(function (_a, ref) {
+  var image = _a.image,
+      label = _a.label,
+      digit = _a.digit,
+      isInverted = _a.isInverted,
+      isCentered = _a.isCentered,
+      text = _a.text,
+      className = _a.className;
+  var colors = useLibTheme().colors;
+  return React__default.createElement(View$2, {
+    ref: ref,
+    isCentered: isCentered,
+    className: className
+  }, (image === null || image === void 0 ? void 0 : image.small) && React__default.createElement(ImageContainer, {
+    isCentered: isCentered
+  }, React__default.createElement(StyledImage$4, {
+    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(Callout, {
+    "data-sheet": "digit",
+    size: "mediumBold",
+    renderAs: "div",
+    isInverted: isInverted
+  }, digit), React__default.createElement(Label, {
+    type: "copy-b",
+    size: "big",
+    textColor: isInverted ? colors.primary.inverted : colors.primary.default,
+    "data-sheet": "label"
+  }, label), text && React__default.createElement(Text$1, {
+    type: "copy",
+    size: "medium",
+    isInverted: isInverted,
+    "data-sheet": "text",
+    innerHTML: text
+  }));
+});
+NumberListCard.displayName = 'NumberListCard';
+var CardList = styled.ul.withConfig({
+  displayName: "NumberList__CardList",
+  componentId: "sc-ehx754-5"
+})(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    align-items: center;\n\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    margin-left: -", "px;\n    margin-top: -", "px;\n\n    & > * {\n        flex: 0 0 100%;\n        width: 100%;\n        min-width: ", "px;\n        max-width: ", "px;\n        padding-left: ", "px;\n        padding-top: ", "px;\n    }\n\n    @media ", " {\n        flex-direction: row;\n        justify-content: center;\n        align-items: flex-start;\n\n        margin-top: -", "px;\n\n        & > * {\n            flex: 0 0 50%;\n            padding-top: ", "px;\n        }\n\n        & > li:first-child:nth-last-child(1) {\n            /* -or- li:only-child { */\n            flex: 0 0 100%;\n        }\n    }\n\n    @media ", " {\n        & > * {\n            flex: 0 0 33.33%;\n        }\n\n        /* one item */\n        & > li:first-child:nth-last-child(1) {\n            /* -or- li:only-child { */\n            flex: 0 0 100%;\n        }\n\n        /* two items */\n        & > li:first-child:nth-last-child(2),\n        & > li:first-child:nth-last-child(2) ~ li {\n            flex: 0 0 50%;\n        }\n    }\n\n    @media ", " {\n        & > * {\n            flex: 0 0 25%;\n        }\n\n        /* one item */\n        & > li:first-child:nth-last-child(1) {\n            /* -or- li:only-child { */\n            flex: 0 0 100%;\n        }\n\n        /* two items */\n        & > li:first-child:nth-last-child(2),\n        & > li:first-child:nth-last-child(2) ~ li {\n            flex: 0 0 50%;\n        }\n\n        /* three items */\n        & > li:first-child:nth-last-child(3),\n        & > li:first-child:nth-last-child(3) ~ li {\n            flex: 0 0 33.33%;\n        }\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    align-items: center;\n\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    margin-left: -", "px;\n    margin-top: -", "px;\n\n    & > * {\n        flex: 0 0 100%;\n        width: 100%;\n        min-width: ", "px;\n        max-width: ", "px;\n        padding-left: ", "px;\n        padding-top: ", "px;\n    }\n\n    @media ", " {\n        flex-direction: row;\n        justify-content: center;\n        align-items: flex-start;\n\n        margin-top: -", "px;\n\n        & > * {\n            flex: 0 0 50%;\n            padding-top: ", "px;\n        }\n\n        & > li:first-child:nth-last-child(1) {\n            /* -or- li:only-child { */\n            flex: 0 0 100%;\n        }\n    }\n\n    @media ", " {\n        & > * {\n            flex: 0 0 33.33%;\n        }\n\n        /* one item */\n        & > li:first-child:nth-last-child(1) {\n            /* -or- li:only-child { */\n            flex: 0 0 100%;\n        }\n\n        /* two items */\n        & > li:first-child:nth-last-child(2),\n        & > li:first-child:nth-last-child(2) ~ li {\n            flex: 0 0 50%;\n        }\n    }\n\n    @media ", " {\n        & > * {\n            flex: 0 0 25%;\n        }\n\n        /* one item */\n        & > li:first-child:nth-last-child(1) {\n            /* -or- li:only-child { */\n            flex: 0 0 100%;\n        }\n\n        /* two items */\n        & > li:first-child:nth-last-child(2),\n        & > li:first-child:nth-last-child(2) ~ li {\n            flex: 0 0 50%;\n        }\n\n        /* three items */\n        & > li:first-child:nth-last-child(3),\n        & > li:first-child:nth-last-child(3) ~ li {\n            flex: 0 0 33.33%;\n        }\n    }\n"])), spacings.spacer, spacings.nudge * 6, CARD_MIN_WIDTH + spacings.spacer, CARD_MAX_WIDTH + spacings.spacer, spacings.spacer, spacings.nudge * 6, MEDIA_QUERIES.medium, spacings.nudge * 10, spacings.nudge * 10, MEDIA_QUERIES.semilarge, MEDIA_QUERIES.large);
+
+var NumberList = function (_a) {
+  var anchorId = _a.anchorId,
+      items = _a.items,
+      bgMode = _a.bgMode,
+      _b = _a.isCentered,
+      isCentered = _b === void 0 ? true : _b;
+  var theme = useContext(ThemeContext);
+  var isInverted = bgMode === 'inverted';
+  var hasBg = bgMode === 'full';
+  var numbersRef = useEqualSheetHeight({
+    listLength: (items === null || items === void 0 ? void 0 : items.length) || 0,
+    identifiers: ['[data-sheet="digit"]', '[data-sheet="label"]', '[data-sheet="text"]'],
+    responsive: {
+      small: 1,
+      medium: 2,
+      semilarge: 3,
+      large: 4,
+      xlarge: 4
+    },
+    customMediaQueries: MEDIA_QUERIES
+  }).sheetRefs;
+  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(CardList, null, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
+    return React__default.createElement(NumberListCard, __assign({
+      key: i,
+      ref: numbersRef[i]
+    }, item, {
+      isInverted: isInverted,
+      isCentered: isCentered
+    }));
+  }))));
+};
+var NumberList$1 = withLibTheme(NumberList);
+var templateObject_1$e, templateObject_2$c, templateObject_3$a, templateObject_4$8, templateObject_5$6, templateObject_6$4;
+
+var View$1 = styled.section.withConfig({
+  displayName: "ParallaxBackground__View",
+  componentId: "sc-g8idp4-0"
+})(templateObject_1$d || (templateObject_1$d = __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$b || (templateObject_2$b = __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$9 || (templateObject_3$9 = __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$5 || (templateObject_5$5 = __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$7 || (templateObject_4$7 = __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$d, templateObject_2$b, templateObject_3$9, templateObject_4$7, templateObject_5$5;
+
+var Container = styled.figure.withConfig({
+  displayName: "Poster__Container",
+  componentId: "sc-k1cv7v-0"
+})(templateObject_1$c || (templateObject_1$c = __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$a || (templateObject_2$a = __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$8 || (templateObject_3$8 = __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$c, templateObject_2$a, templateObject_3$8;
+
+var ItemList = styled.ul.withConfig({
+  displayName: "PriceList__ItemList",
+  componentId: "sc-to452u-0"
+})(templateObject_1$b || (templateObject_1$b = __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$9 || (templateObject_2$9 = __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$7 || (templateObject_3$7 = __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$6 || (templateObject_4$6 = __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$4 || (templateObject_5$4 = __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$3 || (templateObject_6$3 = __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$b, templateObject_2$9, templateObject_3$7, templateObject_4$6, templateObject_5$4, templateObject_6$3;
+
+var View = styled.div.withConfig({
+  displayName: "PriceTag__View",
+  componentId: "sc-wnisbz-0"
+})(templateObject_1$a || (templateObject_1$a = __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$8 || (templateObject_2$8 = __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$a, templateObject_2$8;
+
+var Tag = styled(PriceTag).withConfig({
+  displayName: "PriceTable__Tag",
+  componentId: "sc-1n6x4b3-0"
+})(templateObject_1$9 || (templateObject_1$9 = __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$7 || (templateObject_2$7 = __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$9, templateObject_2$7;
+
+var Content$1 = styled.figure.withConfig({
+  displayName: "Quote__Content",
+  componentId: "sc-135tfv0-0"
+})(templateObject_1$8 || (templateObject_1$8 = __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$6 || (templateObject_2$6 = __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$6 || (templateObject_3$6 = __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$8, templateObject_2$6, templateObject_3$6;
+
+var ImageWrapper = styled(Wrapper).withConfig({
+  displayName: "SimpleImage__ImageWrapper",
+  componentId: "sc-1f8mjuo-0"
+})(templateObject_1$7 || (templateObject_1$7 = __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$7;
+
+var Cards = styled.ul.withConfig({
+  displayName: "SocialWall__Cards",
+  componentId: "sc-ggztu7-0"
+})(templateObject_1$6 || (templateObject_1$6 = __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$5 || (templateObject_2$5 = __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$5 || (templateObject_3$5 = __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$5 || (templateObject_4$5 = __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$3 || (templateObject_5$3 = __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$2 || (templateObject_6$2 = __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$2 || (templateObject_7$2 = __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$6, templateObject_2$5, templateObject_3$5, templateObject_4$5, templateObject_5$3, templateObject_6$2, templateObject_7$2;
+
+var TableWrapper = styled(Wrapper).withConfig({
+  displayName: "Table__TableWrapper",
+  componentId: "sc-16ge7gg-0"
+})(templateObject_1$5 || (templateObject_1$5 = __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$5;
+
+var Figure = styled.figure.withConfig({
+  displayName: "Teaser__Figure",
+  componentId: "sc-euyj1p-0"
+})(templateObject_1$4 || (templateObject_1$4 = __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$4 || (templateObject_2$4 = __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$4 || (templateObject_3$4 = __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$4 || (templateObject_4$4 = __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$2 || (templateObject_5$2 = __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$4, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$2;
+
+/**
+ * calculate single grid col from relative content wrapper
+ * (grid width = wrapper width without paddings)
+ * */
+
+var getGridColOfContent = function () {
+  return css(templateObject_1$3 || (templateObject_1$3 = __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$3 || (templateObject_3$3 = __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$3 || (templateObject_2$3 = __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$1 || (templateObject_5$1 = __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$3 || (templateObject_4$3 = __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$1 || (templateObject_6$1 = __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$1 || (templateObject_7$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 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$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$1, templateObject_6$1, templateObject_7$1;
+
+var TimelineBlock = styled.div.withConfig({
+  displayName: "Timeline__TimelineBlock",
+  componentId: "sc-em4o0o-0"
+})(templateObject_1$2 || (templateObject_1$2 = __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$2 || (templateObject_2$2 = __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$2 || (templateObject_3$2 = __makeTemplateObject([""], [""])));
+var ItemTextBlock = styled(Copy).withConfig({
+  displayName: "Timeline__ItemTextBlock",
+  componentId: "sc-em4o0o-3"
+})(templateObject_4$2 || (templateObject_4$2 = __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$2, templateObject_2$2, templateObject_3$2, templateObject_4$2;
+
+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$1 || (templateObject_1$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$1 || (templateObject_2$1 = __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$1 || (templateObject_3$1 = __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$1 || (templateObject_4$1 = __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$1, templateObject_2$1, templateObject_3$1, templateObject_4$1;
+
+var MapSection = styled(Section).withConfig({
+  displayName: "Map__MapSection",
+  componentId: "sc-6qc5jb-0"
+})(templateObject_1 || (templateObject_1 = __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 || (templateObject_3 = __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 || (templateObject_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% + ".concat(gridSettings.gutter, "px) - ") : "(-100% - ".concat(gridSettings.gutter, "px) + "), wrapperWhitespace);
+});
+var CardWrapper = styled(Wrapper).withConfig({
+  displayName: "Map__CardWrapper",
+  componentId: "sc-6qc5jb-2"
+})(templateObject_4 || (templateObject_4 = __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 || (templateObject_5 = __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 || (templateObject_6 = __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 || (templateObject_7 = __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, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
+
+export { Accordion$1 as Accordion, AlertList$1 as AlertList, Article$1 as Article, CallToAction$1 as CallToAction, CardList$2 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, 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