@blateral/b.kit 2.7.1 → 2.7.3-patch1.0

package/esm/sections.js

@@ -1,7 +1,7 @@
-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 { a as __makeTemplateObject, e as __spreadArray, a5 as Minus, a4 as Plus, Q as Info$1, _ 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 { C as Copy, c as copyStyle, H as Heading } from './Copy-fe52e5fb.js';
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, forwardRef, useMemo, useContext, createRef } from 'react';
 import styled, { css, ThemeContext } from 'styled-components';
@@ -12,28 +12,28 @@ import { g as gridSettings, G as Grid, a as getGridWidth } from './Grid-5eec127f
 import { L as Link } from './Link-3fd9c9b8.js';
 import { S as StatusFormatter } from './statusFormatter-9be0fbff.js';
 import { u as useEqualSheetHeight } from './useEqualSheetHeight-97420d63.js';
-import { T as Title$5, a as TableBlock } from './TableBlock-67fe2385.js';
+import { T as Title$5, a as TableBlock } from './TableBlock-e6b1d85d.js';
 import { A as Actions } from './Actions-21372b3a.js';
-import { I as IntroBlock, V as VideoBlock } from './VideoBlock-b227ae6e.js';
-import { I as Image } from './Image-dc2b33c1.js';
+import { I as IntroBlock, V as VideoBlock } from './VideoBlock-22f76f03.js';
+import { I as Image } from './Image-2441b8c0.js';
 import { u as useIE } from './useIE-a9c56989.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-42c123d2.js';
+import { e as getNavbarState, a as getFullNavbarHeights } from './Navigation-8223249d.js';
 import { a as useMediaQueries } from './useMediaQuery-b42fd64e.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-e6f342b8.js';
+import { V as VideoCard } from './VideoCard-96a60634.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-b89325f8.js';
-import './LanguageSwitcher-3fa20077.js';
+import './navigation-32f9866b.js';
+import './LanguageSwitcher-25434743.js';
 import './useCookieConsent-6b2d4d93.js';
 import './ButtonGhost-ae2e97a2.js';
 import './hexRgbConverter-edb91624.js';
@@ -41,15 +41,15 @@ import './hexRgbConverter-edb91624.js';
 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);
+})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n    margin: 0;\n    padding: 0;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    margin: 0;\n    padding: 0;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge);
 var View$9 = styled.details.withConfig({
   displayName: "Accordion__View",
   componentId: "sc-1el5cmc-1"
-})(templateObject_2$s || (templateObject_2$s = __makeTemplateObject([""], [""])));
+})(templateObject_2$t || (templateObject_2$t = __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) {
+})(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n\n    padding: ", "px;\n    margin: 0;\n    border: none;\n    outline: none;\n    background: none;\n    user-select: none;\n    list-style: none;\n\n    background: ", ";\n\n    cursor: pointer;\n    transition: background 0.2s ease-in-out;\n\n    @media ", " {\n        padding: ", "px;\n    }\n\n    &::-webkit-details-marker {\n        display: none;\n    }\n\n    &::marker {\n        display: none;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            background: ", ";\n        }\n    }\n\n    &:focus {\n        background: ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n\n    padding: ", "px;\n    margin: 0;\n    border: none;\n    outline: none;\n    background: none;\n    user-select: none;\n    list-style: none;\n\n    background: ", ";\n\n    cursor: pointer;\n    transition: background 0.2s ease-in-out;\n\n    @media ", " {\n        padding: ", "px;\n    }\n\n    &::-webkit-details-marker {\n        display: none;\n    }\n\n    &::marker {\n        display: none;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            background: ", ";\n        }\n    }\n\n    &:focus {\n        background: ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"])), spacings.nudge * 2, function (_a) {
   var isInverted = _a.isInverted,
       hasBg = _a.hasBg,
       theme = _a.theme;
@@ -68,7 +68,7 @@ var AccordionHead = styled.summary.withConfig({
 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"])));
+})(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n    flex: 1 1 0;\n"], ["\n    flex: 1 1 0;\n"])));
 var AccordionText = styled.div.withConfig({
   displayName: "Accordion__AccordionText",
   componentId: "sc-1el5cmc-4"
@@ -177,12 +177,12 @@ var Accordion = function (_a) {
   }))))));
 };
 var Accordion$1 = withLibTheme(Accordion);
-var templateObject_1$w, templateObject_2$s, templateObject_3$n, templateObject_4$k, templateObject_5$i;
+var templateObject_1$x, templateObject_2$t, templateObject_3$o, templateObject_4$l, 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) {
+})(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n    display: -ms-grid;\n    display: grid;\n\n    -ms-grid-columns: min-content 1fr;\n    grid-template-columns: min-content 1fr;\n    -ms-grid-rows: min-content 1fr;\n    grid-auto-rows: min-content 1fr;\n\n    text-decoration: none;\n\n    position: relative;\n    border: 2px solid\n        ", ";\n    border-radius: ", ";\n\n    color: ", ";\n\n    padding: ", "px;\n\n    text-align: left;\n    width: 100%;\n    cursor: pointer;\n\n    transition: color ease-in-out 0.2s, border 0.2s ease-in-out;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            border: 2px solid\n                ", ";\n            color: ", ";\n        }\n    }\n"], ["\n    display: -ms-grid;\n    display: grid;\n\n    -ms-grid-columns: min-content 1fr;\n    grid-template-columns: min-content 1fr;\n    -ms-grid-rows: min-content 1fr;\n    grid-auto-rows: min-content 1fr;\n\n    text-decoration: none;\n\n    position: relative;\n    border: 2px solid\n        ", ";\n    border-radius: ", ";\n\n    color: ", ";\n\n    padding: ", "px;\n\n    text-align: left;\n    width: 100%;\n    cursor: pointer;\n\n    transition: color ease-in-out 0.2s, border 0.2s ease-in-out;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            border: 2px solid\n                ", ";\n            color: ", ";\n        }\n    }\n"])), function (_a) {
   var theme = _a.theme,
       isInverted = _a.isInverted;
   return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
@@ -205,15 +205,15 @@ var View$8 = styled.div.withConfig({
 var Icon$4 = styled.div.withConfig({
   displayName: "Alert__Icon",
   componentId: "sc-1d5c0fb-1"
-})(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n\n    & > * {\n        height: 48px;\n        width: 48px;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n\n    & > * {\n        height: 48px;\n        width: 48px;\n    }\n"])));
+})(templateObject_2$s || (templateObject_2$s = __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"])));
+})(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n"], ["\n    display: flex;\n    align-items: center;\n"])));
 var Content$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);
+})(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n    margin-top: ", "px;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    margin-top: ", "px;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge, spacings.nudge);
 var Title$4 = styled(Copy).withConfig({
   displayName: "Alert__Title",
   componentId: "sc-1d5c0fb-4"
@@ -248,7 +248,7 @@ var Alert = function (_a) {
     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, {
+  }) : React__default.createElement(Info$1, null)), React__default.createElement(MainLabel$1, null, title && React__default.createElement(Title$4, {
     textColor: "inherit",
     size: "medium",
     type: "copy-b"
@@ -263,16 +263,16 @@ var Alert = function (_a) {
     ariaLabel: (link === null || link === void 0 ? void 0 : link.href) ? title : undefined
   })));
 };
-var templateObject_1$v, templateObject_2$r, templateObject_3$m, templateObject_4$j, templateObject_5$h, templateObject_6$d;
+var templateObject_1$w, templateObject_2$s, templateObject_3$n, templateObject_4$k, 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);
+})(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n    margin-top: -", "px;\n    margin-left: -", "px;\n    padding: 0;\n    list-style: none;\n\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n    flex-wrap: wrap;\n\n    @media ", " {\n        margin-top: -", "px;\n        margin-left: -", "px;\n    }\n"], ["\n    margin-top: -", "px;\n    margin-left: -", "px;\n    padding: 0;\n    list-style: none;\n\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n    flex-wrap: wrap;\n\n    @media ", " {\n        margin-top: -", "px;\n        margin-left: -", "px;\n    }\n"])), spacings.nudge * 2, spacings.nudge * 2, mq.medium, spacings.spacer, spacings.spacer);
 var ListItem$2 = styled.li.withConfig({
   displayName: "AlertList__ListItem",
   componentId: "sc-bfdeyu-1"
-})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n    padding-top: ", "px;\n    padding-left: ", "px;\n    flex: 1 1 100%;\n\n    @media ", " {\n        flex: 0 1 50%;\n        max-width: 50%;\n\n        padding-top: ", "px;\n        padding-left: ", "px;\n    }\n\n    @media ", " {\n        flex: 0 1 ", "%;\n        max-width: 600px;\n\n        padding-top: ", "px;\n        padding-left: ", "px;\n    }\n"], ["\n    padding-top: ", "px;\n    padding-left: ", "px;\n    flex: 1 1 100%;\n\n    @media ", " {\n        flex: 0 1 50%;\n        max-width: 50%;\n\n        padding-top: ", "px;\n        padding-left: ", "px;\n    }\n\n    @media ", " {\n        flex: 0 1 ", "%;\n        max-width: 600px;\n\n        padding-top: ", "px;\n        padding-left: ", "px;\n    }\n"])), spacings.nudge * 2, spacings.nudge * 2, mq.medium, spacings.spacer, spacings.spacer, mq.large, function (_a) {
+})(templateObject_2$r || (templateObject_2$r = __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);
@@ -317,20 +317,20 @@ var AlertList = function (_a) {
   }))));
 };
 var AlertList$1 = withLibTheme(AlertList);
-var templateObject_1$u, templateObject_2$q;
+var templateObject_1$v, templateObject_2$r;
 
 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);
+})(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        max-width: 880px;\n    }\n"], ["\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        max-width: 880px;\n    }\n"])), spacings.spacer, mq.semilarge);
 var ContentText = styled(Copy).withConfig({
   displayName: "Article__ContentText",
   componentId: "sc-1lrfo1r-1"
-})(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n    text-align: left;\n"], ["\n    text-align: left;\n"])));
+})(templateObject_2$q || (templateObject_2$q = __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);
+})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n    margin-top: ", "px;\n"], ["\n    margin-top: ", "px;\n"])), spacings.spacer);
 
 var Article = function (_a) {
   var anchorId = _a.anchorId,
@@ -394,16 +394,16 @@ var Article = function (_a) {
   })));
 };
 var Article$1 = withLibTheme(Article);
-var templateObject_1$t, templateObject_2$p, templateObject_3$l;
+var templateObject_1$u, templateObject_2$q, templateObject_3$m;
 
 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({
+})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin: 0 auto;\n    width: 100%;\n\n    text-align: left;\n    hyphens: auto;\n    overflow-wrap: break-word;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        flex-direction: row;\n\n        & > * + * {\n            margin-top: 0px;\n            margin-left: ", "px;\n        }\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin: 0 auto;\n    width: 100%;\n\n    text-align: left;\n    hyphens: auto;\n    overflow-wrap: break-word;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        flex-direction: row;\n\n        & > * + * {\n            margin-top: 0px;\n            margin-left: ", "px;\n        }\n    }\n"])), spacings.spacer, mq.semilarge, gridSettings.gutter);
+var Avatar$1 = styled.img.withConfig({
   displayName: "CallToAction__Avatar",
   componentId: "sc-1wdvzex-1"
-})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n    align-self: center;\n    display: block;\n    border: solid 1px transparent;\n    border-radius: 50%;\n    width: 180px;\n    height: 180px;\n\n    background: ", ";\n\n    @media ", " {\n        display: block;\n        width: 190px;\n        height: 190px;\n    }\n"], ["\n    align-self: center;\n    display: block;\n    border: solid 1px transparent;\n    border-radius: 50%;\n    width: 180px;\n    height: 180px;\n\n    background: ", ";\n\n    @media ", " {\n        display: block;\n        width: 190px;\n        height: 190px;\n    }\n"])), function (_a) {
+})(templateObject_2$p || (templateObject_2$p = __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;
@@ -411,7 +411,7 @@ var Avatar = styled.img.withConfig({
 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);
+})(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n    text-align: center;\n\n    .icon-label {\n        flex-direction: column;\n    }\n\n    .icon-label > * + * {\n        margin-left: 0;\n        margin-top: ", "px;\n    }\n\n    & > * {\n        justify-content: center;\n    }\n\n    @media ", " {\n        text-align: left;\n\n        & > * {\n            justify-content: left;\n        }\n\n        .icon-label {\n            flex-direction: row;\n        }\n\n        .icon-label > * + * {\n            margin-left: ", "px;\n            margin-top: 0;\n        }\n    }\n"], ["\n    text-align: center;\n\n    .icon-label {\n        flex-direction: column;\n    }\n\n    .icon-label > * + * {\n        margin-left: 0;\n        margin-top: ", "px;\n    }\n\n    & > * {\n        justify-content: center;\n    }\n\n    @media ", " {\n        text-align: left;\n\n        & > * {\n            justify-content: left;\n        }\n\n        .icon-label {\n            flex-direction: row;\n        }\n\n        .icon-label > * + * {\n            margin-left: ", "px;\n            margin-top: 0;\n        }\n    }\n"])), spacings.nudge * 2, mq.semilarge, spacings.nudge * 2);
 
 var ContactBox = function (_a) {
   var isInverted = _a.isInverted,
@@ -420,7 +420,7 @@ var ContactBox = function (_a) {
       className = _a.className;
   return React__default.createElement(ContactView, {
     className: className
-  }, React__default.createElement(Avatar, {
+  }, React__default.createElement(Avatar$1, {
     src: avatar === null || avatar === void 0 ? void 0 : avatar.src,
     alt: avatar === null || avatar === void 0 ? void 0 : avatar.alt,
     isInverted: isInverted
@@ -434,7 +434,7 @@ var ContactBox = function (_a) {
 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) {
+})(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n    max-width: 880px;\n    margin-right: auto;\n    margin-left: auto;\n\n    @media ", " {\n        & > *:first-child {\n            min-height: ", ";\n        }\n    }\n"], ["\n    max-width: 880px;\n    margin-right: auto;\n    margin-left: auto;\n\n    @media ", " {\n        & > *:first-child {\n            min-height: ", ";\n        }\n    }\n"])), mq.xlarge, function (_a) {
   var hasDecorator = _a.hasDecorator;
   return hasDecorator && '110px';
 });
@@ -508,7 +508,86 @@ var CallToAction = function (_a) {
   })));
 };
 var CallToAction$1 = withLibTheme(CallToAction);
-var templateObject_1$s, templateObject_2$o, templateObject_3$k, templateObject_4$i, templateObject_5$g, templateObject_6$c, templateObject_7$9, templateObject_8$3;
+var templateObject_1$t, templateObject_2$p, templateObject_3$l, templateObject_4$j, templateObject_5$g, templateObject_6$c, templateObject_7$9, templateObject_8$3;
+
+var Avatar = styled.img.withConfig({
+  displayName: "CallToActionTwoUp__Avatar",
+  componentId: "sc-lbofx3-0"
+})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n    display: block;\n    border: solid 1px transparent;\n    border-radius: 50%;\n    width: 260px;\n    max-width: 100%;\n    height: auto;\n    aspect-ratio: 1 / 1;\n\n    background: ", ";\n\n    @media ", " {\n        display: block;\n        width: 286px;\n    }\n"], ["\n    display: block;\n    border: solid 1px transparent;\n    border-radius: 50%;\n    width: 260px;\n    max-width: 100%;\n    height: auto;\n    aspect-ratio: 1 / 1;\n\n    background: ", ";\n\n    @media ", " {\n        display: block;\n        width: 286px;\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 Info = styled(Copy).withConfig({
+  displayName: "CallToActionTwoUp__Info",
+  componentId: "sc-lbofx3-1"
+})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject([""], [""])));
+var LeftContent = styled.div.withConfig({
+  displayName: "CallToActionTwoUp__LeftContent",
+  componentId: "sc-lbofx3-2"
+})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: ", "px;\n"], ["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: ", "px;\n"])), spacings.spacer);
+var RightContent = styled(Copy).withConfig({
+  displayName: "CallToActionTwoUp__RightContent",
+  componentId: "sc-lbofx3-3"
+})(templateObject_4$i || (templateObject_4$i = __makeTemplateObject([""], [""])));
+
+var CallToActionTwoUp = function (_a) {
+  var anchorId = _a.anchorId,
+      title = _a.title,
+      _b = _a.titleAs,
+      titleAs = _b === void 0 ? 'h2' : _b,
+      superTitle = _a.superTitle,
+      superTitleAs = _a.superTitleAs,
+      avatar = _a.avatar,
+      description = _a.description,
+      rightContent = _a.rightContent,
+      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 : bgMode ? colors.sectionBg.medium : colors.sectionBg.light,
+    bgMode: bgMode ? mapToBgMode(bgMode, true) : 'full'
+  }, React__default.createElement(Wrapper, {
+    addWhitespace: true,
+    clampWidth: "normal"
+  }, React__default.createElement(Grid.Row, {
+    gutter: spacings.nudge * 5,
+    semilarge: {
+      gutter: spacings.spacer
+    }
+  }, React__default.createElement(Grid.Col, {
+    span: 12 / 12,
+    semilarge: {
+      span: 4 / 12
+    }
+  }, React__default.createElement(LeftContent, null, title && React__default.createElement(IntroBlock, {
+    colorMode: isInverted ? 'inverted' : 'default',
+    title: title,
+    titleAs: titleAs,
+    superTitle: superTitle,
+    superTitleAs: superTitleAs
+  }), (avatar === null || avatar === void 0 ? void 0 : avatar.src) && 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(Info, {
+    type: "copy",
+    size: "big",
+    isInverted: isInverted,
+    innerHTML: description
+  }))), React__default.createElement(Grid.Col, {
+    span: 12 / 12,
+    semilarge: {
+      span: 8 / 12
+    }
+  }, rightContent && React__default.createElement(RightContent, {
+    innerHTML: rightContent
+  })))));
+};
+var CallToActionTwoUp$1 = withLibTheme(CallToActionTwoUp);
+var templateObject_1$s, templateObject_2$o, templateObject_3$k, templateObject_4$i;
 
 var View$7 = styled.div.withConfig({
   displayName: "CardList__View",
@@ -3287,7 +3366,8 @@ var Video$1 = function (_a) {
       embedId = _a.embedId,
       playIcon = _a.playIcon,
       consentText = _a.consentText,
-      consentAction = _a.consentAction;
+      consentAction = _a.consentAction,
+      onPlayClick = _a.onPlayClick;
   var colors = useLibTheme().colors;
   var isInverted = bgMode === 'inverted';
   return React__default.createElement(Section, {
@@ -3302,7 +3382,8 @@ var Video$1 = function (_a) {
     embedId: embedId,
     playIcon: playIcon,
     consentText: consentText,
-    consentAction: consentAction
+    consentAction: consentAction,
+    onPlayClick: onPlayClick
   })));
 };
 var Video$2 = withLibTheme(Video$1);
@@ -3752,5 +3833,5 @@ var HtmlCode = function (_a) {
 };
 var HtmlCode$1 = withLibTheme(HtmlCode);
 
-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, HtmlCode$1 as HtmlCode, 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 };
+export { Accordion$1 as Accordion, AlertList$1 as AlertList, Article$1 as Article, CallToAction$1 as CallToAction, CallToActionTwoUp$1 as CallToActionTwoUp, 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, HtmlCode$1 as HtmlCode, 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