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

package/esm/sections_news.js

@@ -0,0 +1,1023 @@
+import { a as __makeTemplateObject, _ as __assign, e as __spreadArray } from './ClockFilled-6bae80dc.js';
+import React__default, { forwardRef, useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import styled from 'styled-components';
+import { S as Section, m as mapToBgMode, W as Wrapper } from './Wrapper-1cac758b.js';
+import { C as Copy, H as Heading, c as copyStyle } from './Copy-bca0854c.js';
+import { g as getColors, s as spacings, m as mq, c as getGlobals, a as getFonts } from './styles-c387bdc6.js';
+import { w as withLibTheme, u as useLibTheme } from './LibThemeProvider-acf2e2bb.js';
+import { I as Image } from './Image-301c4433.js';
+import { T as Tag } from './Tag-cb972e1b.js';
+import { S as StatusFormatter } from './statusFormatter-9be0fbff.js';
+import { L as Link } from './Link-bccdb082.js';
+import { i as isValidArray } from './arrays-65b644ef.js';
+import { u as useMediaQuery } from './useMediaQuery-388bd65e.js';
+import { u as useEqualSheetHeight } from './useEqualSheetHeight-e68e1638.js';
+import { G as Grid } from './Grid-172051a9.js';
+import { u as useObserverSupport } from './useObserverSupport-02bce7f5.js';
+import { u as useScrollTo } from './useScrollTo-70af34bf.js';
+import { P as Pointer } from './Pointer-2276308c.js';
+import { g as getUrlParams, s as setUrlParam, d as deleteUrlParam } from './urlParams-9cfdaf71.js';
+import { F as Filter } from './Filter-fec6dc5c.js';
+import { u as useUpdateEffect } from './useUpdateEffect-824c0c84.js';
+import { u as useMounted } from './useMounted-1e4cc87b.js';
+import { T as Title, a as TableBlock } from './TableBlock-014f9821.js';
+import { V as VideoCard } from './VideoCard-aced65ef.js';
+import './concat-ab3c66f2.js';
+import './clamp-12d37b65.js';
+import 'react-dom/server';
+import './useCookieConsent-8caef116.js';
+import './ButtonGhost-6876b67f.js';
+import './hexRgbConverter-edb91624.js';
+
+var Seperator = styled.div.withConfig({
+  displayName: "NewsAuthorCard__Seperator",
+  componentId: "sc-17dx8qw-0"
+})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n    border-bottom: solid 1px\n        ", ";\n\n    margin-top: ", "px;\n    margin-bottom: ", "px;\n"], ["\n    border-bottom: solid 1px\n        ", ";\n\n    margin-top: ", "px;\n    margin-bottom: ", "px;\n"])), function (_a) {
+  var isInverted = _a.isInverted,
+      theme = _a.theme;
+  return isInverted ? getColors(theme).elementBg.light : getColors(theme).elementBg.dark;
+}, function (_a) {
+  var isTop = _a.isTop;
+  return !isTop && spacings.spacer;
+}, function (_a) {
+  var isTop = _a.isTop;
+  return isTop && spacings.spacer;
+});
+var AuthorContainer = styled.div.withConfig({
+  displayName: "NewsAuthorCard__AuthorContainer",
+  componentId: "sc-17dx8qw-1"
+})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        flex-direction: row;\n        justify-content: flex-start;\n        text-align: left;\n\n        & > * + * {\n            margin-top: 0;\n            margin-left: ", "px;\n        }\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        flex-direction: row;\n        justify-content: flex-start;\n        text-align: left;\n\n        & > * + * {\n            margin-top: 0;\n            margin-left: ", "px;\n        }\n    }\n"])), spacings.spacer, mq.medium, spacings.spacer);
+var Avatar = styled.img.withConfig({
+  displayName: "NewsAuthorCard__Avatar",
+  componentId: "sc-17dx8qw-2"
+})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n    border-radius: 50%; ;\n"], ["\n    border-radius: 50%; ;\n"])));
+var Author = styled.div.withConfig({
+  displayName: "NewsAuthorCard__Author",
+  componentId: "sc-17dx8qw-3"
+})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject([""], [""])));
+var StyledCopy = styled(Copy).withConfig({
+  displayName: "NewsAuthorCard__StyledCopy",
+  componentId: "sc-17dx8qw-4"
+})(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n    text-transform: uppercase;\n    margin-bottom: ", "px;\n"], ["\n    text-transform: uppercase;\n    margin-bottom: ", "px;\n"])), spacings.nudge * 3);
+
+var NewsAuthorCard = function (_a) {
+  var label = _a.label,
+      author = _a.author,
+      avatar = _a.avatar,
+      bgMode = _a.bgMode;
+  var colors = useLibTheme().colors;
+  var isInverted = bgMode === 'inverted';
+  var hasBg = bgMode === 'full';
+  return React__default.createElement(Section, {
+    addSeperation: true,
+    bgColor: isInverted ? colors.sectionBg.dark : hasBg ? colors.sectionBg.medium : colors.sectionBg.light,
+    bgMode: mapToBgMode(bgMode, true)
+  }, React__default.createElement(Wrapper, {
+    clampWidth: "small",
+    addWhitespace: true
+  }, author && React__default.createElement(React__default.Fragment, null, React__default.createElement(Seperator, {
+    isTop: true,
+    isInverted: isInverted
+  }), React__default.createElement(AuthorContainer, null, avatar && React__default.createElement(Avatar, {
+    src: avatar.src,
+    alt: avatar.alt
+  }), React__default.createElement(Author, null, author && React__default.createElement(StyledCopy, {
+    isInverted: isInverted,
+    type: "copy-b"
+  }, label || 'Written By'), React__default.createElement(Heading, {
+    isInverted: isInverted,
+    size: "heading-2"
+  }, author)))), React__default.createElement(Seperator, {
+    isInverted: isInverted
+  })));
+};
+var NewsAuthorCard$1 = withLibTheme(NewsAuthorCard);
+var templateObject_1$7, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$3;
+
+var View = styled.div.withConfig({
+  displayName: "NewsCard__View",
+  componentId: "sc-ahox9b-0"
+})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n    position: relative;\n    text-decoration: none;\n    margin: 0;\n    padding: 0;\n"], ["\n    position: relative;\n    text-decoration: none;\n    margin: 0;\n    padding: 0;\n"])));
+var ImageLink = styled(Link).withConfig({
+  displayName: "NewsCard__ImageLink",
+  componentId: "sc-ahox9b-1"
+})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n    display: block;\n    width: 100%;\n"], ["\n    display: block;\n    width: 100%;\n"])));
+var StyledImage$1 = styled(Image).withConfig({
+  displayName: "NewsCard__StyledImage",
+  componentId: "sc-ahox9b-2"
+})(templateObject_3$2 || (templateObject_3$2 = __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 BorderPlaceholder = styled.div.withConfig({
+  displayName: "NewsCard__BorderPlaceholder",
+  componentId: "sc-ahox9b-3"
+})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n    border-top: 1px solid\n        ", ";\n"], ["\n    border-top: 1px solid\n        ", ";\n"])), function (_a) {
+  var theme = _a.theme,
+      hasBg = _a.hasBg;
+  return hasBg ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
+});
+var TitleLink = styled(Link).withConfig({
+  displayName: "NewsCard__TitleLink",
+  componentId: "sc-ahox9b-4"
+})(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n    display: inline-block;\n    ", "\n\n    color: ", ";\n    text-decoration: none;\n"], ["\n    display: inline-block;\n    ", "\n\n    color: ", ";\n    text-decoration: none;\n"])), copyStyle('copy-b', 'big'), function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getFonts(theme)['copy-b'].big.colorInverted : getFonts(theme)['copy-b'].big.color;
+});
+var Head = styled.div.withConfig({
+  displayName: "NewsCard__Head",
+  componentId: "sc-ahox9b-5"
+})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n    display: flex;\n\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n\n    &:not(:first-child) {\n        margin-top: ", "px;\n    }\n\n    &:not(:last-child) {\n        margin-bottom: ", "px;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge * 3, spacings.nudge * 3, spacings.nudge * 3);
+var Tags$1 = styled.div.withConfig({
+  displayName: "NewsCard__Tags",
+  componentId: "sc-ahox9b-6"
+})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n    display: flex;\n    overflow: scroll;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n        display: none;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    overflow: scroll;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n        display: none;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge);
+var PublishDate = styled(Copy).withConfig({
+  displayName: "NewsCard__PublishDate",
+  componentId: "sc-ahox9b-7"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    &:only-child {\n        margin-left: auto;\n    }\n"], ["\n    &:only-child {\n        margin-left: auto;\n    }\n"])));
+var Main = styled.div.withConfig({
+  displayName: "NewsCard__Main",
+  componentId: "sc-ahox9b-8"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    max-width: 95%;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    max-width: 95%;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge * 3);
+var Text = styled(Copy).withConfig({
+  displayName: "NewsCard__Text",
+  componentId: "sc-ahox9b-9"
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 6; /* number of lines to show */\n    line-clamp: 6;\n    -webkit-box-orient: vertical;\n\n    & > * {\n        margin: 0 !important;\n    }\n\n    & > p:not(:first-of-type) {\n        display: none;\n    }\n\n    & > ul,\n    & > ol,\n    & > table {\n        display: none;\n    }\n"], ["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 6; /* number of lines to show */\n    line-clamp: 6;\n    -webkit-box-orient: vertical;\n\n    & > * {\n        margin: 0 !important;\n    }\n\n    & > p:not(:first-of-type) {\n        display: none;\n    }\n\n    & > ul,\n    & > ol,\n    & > table {\n        display: none;\n    }\n"])));
+var Action = styled.div.withConfig({
+  displayName: "NewsCard__Action",
+  componentId: "sc-ahox9b-10"
+})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    margin-top: ", "px;\n"], ["\n    margin-top: ", "px;\n"])), spacings.nudge * 3);
+var NewsCard = forwardRef(function (_a, ref) {
+  var tags = _a.tags,
+      onTagClick = _a.onTagClick,
+      publishDate = _a.publishDate,
+      title = _a.title,
+      text = _a.text,
+      image = _a.image,
+      link = _a.link,
+      isInverted = _a.isInverted,
+      action = _a.action,
+      customTag = _a.customTag,
+      className = _a.className,
+      hasBg = _a.hasBg;
+  var globals = useLibTheme().globals;
+  var publishedAt = '';
+
+  if (publishDate) {
+    var formatter = new StatusFormatter(publishDate.getTime(), '', globals.sections.newsDateFormat(publishDate), globals.sections.newsTimeFormat(publishDate), globals.sections.newsLocaleKey);
+    publishedAt = formatter.getFormattedDate();
+  }
+
+  var handleTagClick = function (tag) {
+    return onTagClick ? function (ev) {
+      ev === null || ev === void 0 ? void 0 : ev.preventDefault();
+      onTagClick(tag);
+    } : undefined;
+  };
+
+  var filteredTags = useMemo(function () {
+    return tags === null || tags === void 0 ? void 0 : tags.filter(function (tag) {
+      return tag.name;
+    });
+  }, [tags]);
+  return React__default.createElement(View, {
+    ref: ref,
+    className: className
+  }, image ? React__default.createElement(ImageLink, __assign({}, link, {
+    ariaLabel: title
+  }), React__default.createElement(StyledImage$1, __assign({}, image, {
+    coverSpace: true,
+    isInverted: isInverted
+  }))) : React__default.createElement(BorderPlaceholder, {
+    hasBg: hasBg
+  }), React__default.createElement(Head, {
+    "data-sheet": "head"
+  }, isValidArray(filteredTags, false) && React__default.createElement(Tags$1, null, filteredTags.map(function (tag, i) {
+    if (customTag) {
+      return customTag({
+        key: i,
+        name: tag.name || '',
+        isInverted: isInverted,
+        isActive: false,
+        link: tag.link,
+        clickHandler: handleTagClick(tag)
+      });
+    } else {
+      return React__default.createElement(Tag, {
+        key: i,
+        isInverted: isInverted,
+        name: tag.name,
+        link: tag.link,
+        onClick: handleTagClick(tag)
+      });
+    }
+  })), publishedAt && React__default.createElement(PublishDate, {
+    size: "small",
+    renderAs: "div",
+    isInverted: isInverted
+  }, publishedAt)), React__default.createElement(Main, null, title && React__default.createElement(TitleLink, __assign({}, link, {
+    ariaLabel: title,
+    isInverted: isInverted,
+    dataSheet: "title"
+  }), title), text && React__default.createElement(Text, {
+    isInverted: isInverted,
+    type: "copy",
+    innerHTML: text,
+    "data-sheet": "text",
+    size: "medium"
+  })), action && React__default.createElement(Action, null, action(isInverted)));
+});
+NewsCard.displayName = 'NewsCard';
+var templateObject_1$6, templateObject_2$3, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+
+var TagContainer = styled.div.withConfig({
+  displayName: "NewsOverview__TagContainer",
+  componentId: "sc-5r2c7-0"
+})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n    margin-top: -", "px;\n    margin-left: -", "px;\n\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n\n    &:not(:only-child) {\n        margin-bottom: ", "px;\n    }\n"], ["\n    margin-top: -", "px;\n    margin-left: -", "px;\n\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n\n    &:not(:only-child) {\n        margin-bottom: ", "px;\n    }\n"])), spacings.nudge, spacings.nudge, spacings.nudge * 6);
+var TagWrapper$1 = styled.div.withConfig({
+  displayName: "NewsOverview__TagWrapper",
+  componentId: "sc-5r2c7-1"
+})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n    padding-top: ", "px;\n    padding-left: ", "px;\n"], ["\n    padding-top: ", "px;\n    padding-left: ", "px;\n"])), spacings.nudge, spacings.nudge);
+var News$1 = styled.ul.withConfig({
+  displayName: "NewsOverview__News",
+  componentId: "sc-5r2c7-2"
+})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    list-style: none;\n    margin: 0;\n    margin-top: -", "px;\n    margin-left: -", "px;\n    padding: 0;\n\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n\n    flex-wrap: wrap;\n"], ["\n    list-style: none;\n    margin: 0;\n    margin-top: -", "px;\n    margin-left: -", "px;\n    padding: 0;\n\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n\n    flex-wrap: wrap;\n"])), spacings.nudge * 6, spacings.spacer);
+var NewsItem$1 = styled.li.withConfig({
+  displayName: "NewsOverview__NewsItem",
+  componentId: "sc-5r2c7-3"
+})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n    padding-top: ", "px;\n    padding-left: ", "px;\n    flex: 1 0 100%;\n\n    @media ", " {\n        flex: 1 0 50%;\n        max-width: 50%;\n    }\n\n    @media ", " {\n        flex: 1 0 33.33%;\n        max-width: 33.33%;\n    }\n"], ["\n    padding-top: ", "px;\n    padding-left: ", "px;\n    flex: 1 0 100%;\n\n    @media ", " {\n        flex: 1 0 50%;\n        max-width: 50%;\n    }\n\n    @media ", " {\n        flex: 1 0 33.33%;\n        max-width: 33.33%;\n    }\n"])), spacings.nudge * 6, spacings.spacer, mq.medium, mq.large);
+var ListFooter = styled.div.withConfig({
+  displayName: "NewsOverview__ListFooter",
+  componentId: "sc-5r2c7-4"
+})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n    margin-top: ", "px;\n    text-align: center;\n\n    @media ", " {\n        text-align: left;\n    }\n"], ["\n    margin-top: ", "px;\n    text-align: center;\n\n    @media ", " {\n        text-align: left;\n    }\n"])), spacings.nudge * 6, mq.medium);
+var ShowMore = styled.span.withConfig({
+  displayName: "NewsOverview__ShowMore",
+  componentId: "sc-5r2c7-5"
+})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n    display: ", ";\n"], ["\n    display: ", ";\n"])), function (_a) {
+  var itemCount = _a.itemCount;
+  return itemCount && itemCount > 2 ? 'block' : 'none';
+});
+var FilterIcon = styled(Copy).withConfig({
+  displayName: "NewsOverview__FilterIcon",
+  componentId: "sc-5r2c7-6"
+})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    padding: ", "px ", "px 0 0;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    padding: ", "px ", "px 0 0;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge / 2, spacings.nudge, spacings.nudge);
+var getNewsFilterParams = function (url, theme, tags) {
+  if (tags === void 0) {
+    tags = [];
+  }
+
+  if (!url) return '';
+  if (!isValidArray(tags, false)) return url;
+  var filterName = theme.globals.sections.newsFilterName;
+  if (!filterName) return url;
+
+  try {
+    var validUrl = new URL(url);
+    var newParams = new URLSearchParams(validUrl.search);
+    newParams.set(filterName, encodeURIComponent(tags.join(',')));
+    return "".concat(url, "?").concat(newParams.toString());
+  } catch (err) {
+    return "".concat(url, "?").concat(filterName, "=").concat(encodeURIComponent(tags.join(',')));
+  }
+};
+
+var NewsOverview = function (_a) {
+  var anchorId = _a.anchorId,
+      news = _a.news,
+      tags = _a.tags,
+      initial = _a.initial,
+      showMoreText = _a.showMoreText,
+      bgMode = _a.bgMode,
+      onTagClick = _a.onTagClick,
+      customTag = _a.customTag;
+
+  var _b = useLibTheme(),
+      colors = _b.colors,
+      globals = _b.globals;
+
+  var filterName = globals.sections.newsFilterName;
+  var isInverted = bgMode === 'inverted';
+  var hasBg = bgMode === 'full';
+
+  var _c = useState((initial === null || initial === void 0 ? void 0 : initial.activeTags) || []),
+      selectedTags = _c[0],
+      setSelectedTags = _c[1];
+
+  var mqs = ['small', 'semilarge', 'large'];
+  var currentMq = useMediaQuery(mqs);
+
+  var _d = useState(3),
+      itemsPerRow = _d[0],
+      setItemsPerRow = _d[1];
+
+  var _e = useState((initial === null || initial === void 0 ? void 0 : initial.visibleRows) || 3),
+      visibleRows = _e[0],
+      setVisibleRows = _e[1];
+
+  var isMounted = useMounted();
+  var targetRef = useRef(null);
+  var observerSupported = useObserverSupport();
+  var newsCount = (news === null || news === void 0 ? void 0 : news.length) || 0;
+  var setNewPos = useScrollTo(800);
+
+  var _f = useEqualSheetHeight({
+    listLength: Math.min(visibleRows * itemsPerRow, newsCount),
+    identifiers: ['[data-sheet="head"]', '[data-sheet="title"]', '[data-sheet="text"]'],
+    responsive: {
+      small: 1,
+      medium: 1,
+      semilarge: 2,
+      large: 3,
+      xlarge: 3
+    }
+  }),
+      cardRefs = _f.sheetRefs,
+      triggerCalculation = _f.triggerCalculation;
+
+  var getFilters = useCallback(function () {
+    var tags = [];
+    var filters = getUrlParams()[filterName];
+
+    if (filters) {
+      var tagsFilter = filters === null || filters === void 0 ? void 0 : filters.split(',');
+
+      if (isValidArray(tagsFilter, false)) {
+        tags.push.apply(tags, tagsFilter);
+      }
+    }
+
+    return tags;
+  }, [filterName]);
+  useEffect(function () {
+    // if initial data is defined exit hook
+    if (initial) return; // if no initial data provied try to find needed params in URL
+
+    var paramTags = getFilters();
+    var paramRows = parseInt(getUrlParams()['rows']);
+    setVisibleRows(paramRows || 3);
+
+    if (isValidArray(paramTags, false)) {
+      setSelectedTags(paramTags);
+    } // trigger equal sheet height recalculation
+
+
+    triggerCalculation(); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getFilters, initial]);
+  useEffect(function () {
+    var _a;
+
+    if (!initial || isMounted) return; // set inital data into URL
+
+    setUrlParam('rows', (initial === null || initial === void 0 ? void 0 : initial.visibleRows) || 3);
+
+    if (isValidArray(initial === null || initial === void 0 ? void 0 : initial.activeTags, false)) {
+      setUrlParam(filterName, (_a = initial === null || initial === void 0 ? void 0 : initial.activeTags) === null || _a === void 0 ? void 0 : _a.join(','));
+    } else {
+      deleteUrlParam(filterName);
+    }
+  }, [filterName, initial, isMounted]);
+  useUpdateEffect(function () {
+    setUrlParam('rows', visibleRows);
+  }, [visibleRows]);
+  useUpdateEffect(function () {
+    if (onTagClick || !isValidArray(selectedTags)) return; // set filters to URL params
+
+    if (selectedTags.length > 0) {
+      setUrlParam(filterName, selectedTags.join(','));
+    } else {
+      deleteUrlParam(filterName);
+    }
+  }, [selectedTags]);
+  useEffect(function () {
+    switch (currentMq) {
+      case 'large':
+        setItemsPerRow(3);
+        break;
+
+      case 'semilarge':
+        setItemsPerRow(2);
+        break;
+
+      case 'small':
+        setItemsPerRow(1);
+        if (visibleRows < 3) setVisibleRows(3);
+        break;
+
+      default:
+        setItemsPerRow(1);
+    }
+  }, [currentMq, visibleRows]);
+
+  var handleTagClick = function (tag, enableToggling) {
+    if (enableToggling === void 0) {
+      enableToggling = true;
+    }
+
+    setSelectedTags(function (prev) {
+      var prevCopy = __spreadArray([], prev, true);
+
+      var itemIndex = tag.name ? prev.indexOf(tag.name) : -1;
+
+      if (itemIndex === -1 && tag.name) {
+        return __spreadArray(__spreadArray([], prevCopy, true), [tag.name], false);
+      }
+
+      if (enableToggling) {
+        prevCopy.splice(itemIndex, 1);
+        return prevCopy;
+      }
+
+      return prev;
+    }); // trigger equal sheet height recalculation
+
+    triggerCalculation();
+    setVisibleRows(3);
+  };
+
+  var filteredNews = useMemo(function () {
+    var tagFilterFn = function (item) {
+      if (!isValidArray(selectedTags, false)) return true;
+      if (!item.tags) return false;
+      var hasTags = false;
+
+      for (var i = 0; i < item.tags.length; i++) {
+        if (selectedTags.indexOf(item.tags[i].name || '') !== -1) {
+          hasTags = true;
+          break;
+        }
+      }
+
+      return hasTags;
+    };
+
+    var filtered = isValidArray(news) ? __spreadArray([], news, true) : []; // adding filter
+
+    filtered = filtered === null || filtered === void 0 ? void 0 : filtered.filter(tagFilterFn);
+    return filtered;
+  }, [news, selectedTags]);
+  var visibleNews = useMemo(function () {
+    return (filteredNews === null || filteredNews === void 0 ? void 0 : filteredNews.filter(function (_, i) {
+      return i < visibleRows * itemsPerRow;
+    })) || [];
+  }, [filteredNews, itemsPerRow, visibleRows]);
+  useEffect(function () {
+    // cancel if intersection observers are not supported
+    if (!observerSupported) return;
+    var element = targetRef.current;
+    var observer;
+
+    if (element) {
+      var options = {
+        rootMargin: '0px 0px 100px 0px',
+        threshold: 0
+      };
+      observer = new IntersectionObserver(function (entries) {
+        var entry = entries[0];
+
+        if (entry === null || entry === void 0 ? void 0 : entry.isIntersecting) {
+          // on bottom of the wrapper load more news
+          if (visibleRows < Math.ceil(filteredNews.length / itemsPerRow)) {
+            setVisibleRows(function (prev) {
+              return prev + 1;
+            });
+          }
+        }
+      }, options);
+      observer.observe(element);
+    }
+
+    return function () {
+      if (observer) observer.disconnect();
+    };
+  }, [itemsPerRow, newsCount, visibleRows, observerSupported, filteredNews.length]);
+  var filteredTags = useMemo(function () {
+    return tags === null || tags === void 0 ? void 0 : tags.filter(function (tag) {
+      return tag;
+    });
+  }, [tags]);
+  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
+  }, isValidArray(filteredTags, false) && React__default.createElement(TagContainer, null, React__default.createElement(FilterIcon, {
+    size: "small",
+    type: "copy",
+    isInverted: isInverted
+  }, React__default.createElement(Filter, null), React__default.createElement("span", null, "Filter")), filteredTags.map(function (tag, i) {
+    return React__default.createElement(TagWrapper$1, {
+      key: i
+    }, customTag ? customTag({
+      key: i,
+      name: tag,
+      isInverted: isInverted,
+      isActive: selectedTags.indexOf(tag) !== -1,
+      clickHandler: function (ev) {
+        ev === null || ev === void 0 ? void 0 : ev.preventDefault();
+
+        if (!onTagClick) {
+          handleTagClick({
+            name: tag
+          });
+        } else onTagClick({
+          name: tag
+        });
+      }
+    }) : React__default.createElement(Tag, {
+      isInverted: isInverted,
+      onClick: function (ev) {
+        ev === null || ev === void 0 ? void 0 : ev.preventDefault();
+
+        if (!onTagClick) {
+          handleTagClick({
+            name: tag
+          });
+        } else onTagClick({
+          name: tag
+        }, false);
+      },
+      isActive: selectedTags.indexOf(tag) !== -1
+    }, tag));
+  })), React__default.createElement(News$1, null, visibleNews.map(function (item, i) {
+    var _a;
+
+    return React__default.createElement(NewsItem$1, {
+      key: "".concat(i, "_news_").concat(item.title)
+    }, React__default.createElement(NewsCard, __assign({
+      hasBg: hasBg || isInverted,
+      ref: cardRefs[i]
+    }, item, {
+      tags: (_a = item.tags) === null || _a === void 0 ? void 0 : _a.map(function (tag) {
+        return {
+          name: tag.name
+        };
+      }),
+      isInverted: isInverted,
+      onTagClick: function (tag) {
+        // scroll back to top
+        setNewPos(0);
+
+        if (!onTagClick) {
+          // if no callback is defined handle filtering on client side inside the component
+          handleTagClick({
+            name: tag.name
+          }, false);
+        } else {
+          onTagClick({
+            name: tag.name
+          }, true);
+        }
+      },
+      customTag: customTag
+    })));
+  })), React__default.createElement("div", {
+    ref: targetRef
+  }), !observerSupported && React__default.createElement(ListFooter, null, news && news.length > 0 && React__default.createElement(Copy, {
+    type: "copy",
+    size: "medium",
+    isInverted: isInverted
+  }, React__default.createElement(ShowMore, {
+    itemCount: news.length,
+    onClick: function (ev) {
+      ev.preventDefault();
+
+      if (visibleRows < Math.ceil(filteredNews.length / itemsPerRow)) {
+        setVisibleRows(function (prev) {
+          return prev + 1;
+        });
+      }
+    }
+  }, visibleRows < filteredNews.length / itemsPerRow && React__default.createElement(Pointer.View, {
+    as: "button",
+    isInverted: isInverted
+  }, React__default.createElement(Pointer.Label, null, showMoreText || 'mehr anzeigen')))))));
+};
+var NewsOverview$1 = withLibTheme(NewsOverview);
+var templateObject_1$5, templateObject_2$2, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1;
+
+var NewsFooter = function (_a) {
+  var anchorId = _a.anchorId,
+      news = _a.news,
+      bgMode = _a.bgMode,
+      customTag = _a.customTag;
+
+  var _b = useLibTheme(),
+      colors = _b.colors,
+      theme = _b.theme;
+
+  var newsCount = (news === null || news === void 0 ? void 0 : news.length) || 0;
+  var isInverted = bgMode === 'inverted';
+  var hasBg = bgMode === 'full';
+  var mqs = ['small', 'semilarge'];
+  var currentMq = useMediaQuery(mqs);
+
+  var _c = useState(2),
+      itemsPerRow = _c[0],
+      setItemsPerRow = _c[1];
+
+  var _d = useState(1),
+      visibleRows = _d[0],
+      setVisibleRows = _d[1];
+
+  var cardRefs = useEqualSheetHeight({
+    listLength: Math.min(visibleRows * itemsPerRow, newsCount),
+    identifiers: ['[data-sheet="head"]', '[data-sheet="title"]', '[data-sheet="text"]'],
+    responsive: {
+      small: 1,
+      medium: 1,
+      semilarge: 2,
+      large: 2,
+      xlarge: 2
+    }
+  }).sheetRefs;
+  useEffect(function () {
+    switch (currentMq) {
+      case 'semilarge':
+        setItemsPerRow(2);
+        break;
+
+      case 'small':
+        setItemsPerRow(1);
+        if (visibleRows < 3) setVisibleRows(3);
+        break;
+
+      default:
+        setItemsPerRow(1);
+    }
+  }, [currentMq, visibleRows]);
+  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,
+    clampWidth: "small"
+  }, React__default.createElement(Grid.Row, null, news === null || news === void 0 ? void 0 : news.filter(function (_, i) {
+    return i < visibleRows * itemsPerRow;
+  }).map(function (item, i) {
+    var _a;
+
+    return React__default.createElement(Grid.Col, {
+      medium: {
+        span: 6 / 12
+      },
+      key: "".concat(i, "_news_").concat(item.title)
+    }, React__default.createElement(NewsCard, __assign({
+      key: i,
+      ref: cardRefs[i]
+    }, item, {
+      tags: (_a = item.tags) === null || _a === void 0 ? void 0 : _a.map(function (tag) {
+        var _a, _b;
+
+        var tagHref = undefined;
+
+        if (tag.name && ((_a = tag.link) === null || _a === void 0 ? void 0 : _a.href)) {
+          tagHref = getNewsFilterParams(tag.link.href, theme, [tag.name]);
+        }
+
+        return {
+          name: tag.name,
+          link: ((_b = tag.link) === null || _b === void 0 ? void 0 : _b.href) ? __assign(__assign({}, tag.link), {
+            href: tagHref
+          }) : undefined
+        };
+      }),
+      isInverted: isInverted,
+      customTag: customTag
+    })));
+  }))));
+};
+var NewsFooter$1 = withLibTheme(NewsFooter);
+
+var StyledImage = styled(Image).withConfig({
+  displayName: "NewsImages__StyledImage",
+  componentId: "sc-1l72vc0-0"
+})(templateObject_1$4 || (templateObject_1$4 = __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 NewsImages = function (_a) {
+  var _b;
+
+  var anchorId = _a.anchorId,
+      images = _a.images,
+      bgMode = _a.bgMode;
+  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, {
+    clampWidth: "small",
+    addWhitespace: true
+  }, React__default.createElement(Grid.Row, null, (_b = images === null || images === void 0 ? void 0 : images.filter(function (img) {
+    return img.small;
+  })) === null || _b === void 0 ? void 0 : _b.map(function (img, i) {
+    return React__default.createElement(Grid.Col, {
+      key: i,
+      semilarge: {
+        span: img.isFull ? 12 / 12 : 6 / 12
+      }
+    }, React__default.createElement(StyledImage, __assign({}, img, {
+      coverSpace: true,
+      isInverted: isInverted
+    })));
+  }))));
+};
+var NewsImages$1 = withLibTheme(NewsImages);
+var templateObject_1$4;
+
+var Content = styled.div.withConfig({
+  displayName: "NewsIntro__Content",
+  componentId: "sc-zz6rn6-0"
+})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge * 3);
+var IntroHead = styled(Copy).withConfig({
+  displayName: "NewsIntro__IntroHead",
+  componentId: "sc-zz6rn6-1"
+})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n    display: flex;\n\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: space-between;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        flex-direction: row;\n        align-items: center;\n\n        & > * + * {\n            margin-top: 0;\n            margin-left: ", "px;\n        }\n    }\n"], ["\n    display: flex;\n\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: space-between;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        flex-direction: row;\n        align-items: center;\n\n        & > * + * {\n            margin-top: 0;\n            margin-left: ", "px;\n        }\n    }\n"])), spacings.nudge * 2, mq.medium, spacings.nudge * 2);
+var Tags = styled.div.withConfig({
+  displayName: "NewsIntro__Tags",
+  componentId: "sc-zz6rn6-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex: 1 1 80%;\n\n    display: flex;\n    flex-wrap: wrap;\n    margin-top: -", "px;\n    margin-left: -", "px;\n"], ["\n    flex: 1 1 80%;\n\n    display: flex;\n    flex-wrap: wrap;\n    margin-top: -", "px;\n    margin-left: -", "px;\n"])), spacings.nudge, spacings.nudge);
+var TagWrapper = styled.span.withConfig({
+  displayName: "NewsIntro__TagWrapper",
+  componentId: "sc-zz6rn6-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: inline-block;\n    padding-top: ", "px;\n    padding-left: ", "px;\n"], ["\n    display: inline-block;\n    padding-top: ", "px;\n    padding-left: ", "px;\n"])), spacings.nudge, spacings.nudge);
+var MetaBlock = styled.div.withConfig({
+  displayName: "NewsIntro__MetaBlock",
+  componentId: "sc-zz6rn6-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    flex: 1 0 auto;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n    align-items: center;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    flex: 1 0 auto;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n    align-items: center;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge * 3);
+var StyledTitle = styled(Title).withConfig({
+  displayName: "NewsIntro__StyledTitle",
+  componentId: "sc-zz6rn6-5"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    max-width: ", ";\n"], ["\n    max-width: ", ";\n"])), function (_a) {
+  var clampTitle = _a.clampTitle;
+  return clampTitle && 13 / 28 * spacings.wrapperSmall + 'px';
+});
+var ContentBlock$1 = styled(Copy).withConfig({
+  displayName: "NewsIntro__ContentBlock",
+  componentId: "sc-zz6rn6-6"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: block;\n    margin: ", ";\n    max-width: ", ";\n\n    :not(:first-child) {\n        padding-top: ", "px;\n    }\n"], ["\n    display: block;\n    margin: ", ";\n    max-width: ", ";\n\n    :not(:first-child) {\n        padding-top: ", "px;\n    }\n"])), function (_a) {
+  var isCentered = _a.isCentered;
+  return isCentered && '0 auto';
+}, function (_a) {
+  var clampText = _a.clampText;
+  return clampText && 19 / 28 * spacings.wrapper + 'px';
+}, spacings.spacer);
+
+var NewsIntro = function (_a) {
+  var anchorId = _a.anchorId,
+      tags = _a.tags,
+      meta = _a.meta,
+      title = _a.title,
+      text = _a.text,
+      image = _a.image,
+      bgMode = _a.bgMode,
+      customTag = _a.customTag;
+
+  var _b = useLibTheme(),
+      globals = _b.globals,
+      colors = _b.colors,
+      theme = _b.theme;
+
+  var isInverted = bgMode === 'inverted';
+  var hasBg = bgMode === 'full';
+  var publishedAt = '';
+
+  if (meta === null || meta === void 0 ? void 0 : meta.date) {
+    var formatter = new StatusFormatter(meta.date.getTime(), '', globals.sections.newsDateFormat(meta.date), globals.sections.newsTimeFormat(meta.date), globals.sections.newsLocaleKey);
+    publishedAt = formatter.getFormattedDate();
+  }
+
+  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, {
+    clampWidth: "small",
+    addWhitespace: true
+  }, React__default.createElement(Content, null, React__default.createElement(IntroHead, {
+    isInverted: isInverted
+  }, React__default.createElement(Tags, null, tags === null || tags === void 0 ? void 0 : tags.map(function (tag, i) {
+    var _a;
+
+    var tagLink = undefined;
+
+    if (tag.name && ((_a = tag.link) === null || _a === void 0 ? void 0 : _a.href)) {
+      tagLink = __assign(__assign({}, tag.link), {
+        href: getNewsFilterParams(tag.link.href, theme, [tag.name])
+      });
+    }
+
+    return React__default.createElement(TagWrapper, {
+      key: "headtag-".concat(i)
+    }, customTag ? customTag({
+      key: "headtag-".concat(i),
+      name: tag.name || '',
+      isInverted: isInverted,
+      isActive: false,
+      link: tagLink
+    }) : React__default.createElement(Tag, {
+      link: tagLink,
+      isInverted: isInverted
+    }, tag.name));
+  })), (publishedAt || (meta === null || meta === void 0 ? void 0 : meta.author)) && React__default.createElement(MetaBlock, null, (meta === null || meta === void 0 ? void 0 : meta.author) && React__default.createElement("div", null, meta === null || meta === void 0 ? void 0 : meta.author), publishedAt && React__default.createElement("div", null, publishedAt))), React__default.createElement("div", null, React__default.createElement(StyledTitle, {
+    colorMode: isInverted ? 'inverted' : 'default',
+    title: title
+  }), text && React__default.createElement(ContentBlock$1, {
+    isInverted: isInverted,
+    type: "copy-b",
+    innerHTML: text
+  })), (image === null || image === void 0 ? void 0 : image.small) && React__default.createElement(Image, __assign({}, image, {
+    coverSpace: true,
+    allowEdgeRadius: true,
+    isInverted: isInverted
+  })))));
+};
+var NewsIntro$1 = withLibTheme(NewsIntro);
+var templateObject_1$3, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+
+var TableWrapper = styled(Wrapper).withConfig({
+  displayName: "NewsTable__TableWrapper",
+  componentId: "sc-ph099f-0"
+})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.spacer);
+
+var NewsTable = 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, {
+    clampWidth: "small"
+  }, tableItems.map(function (item, i) {
+    return React__default.createElement(TableBlock, __assign({}, item, {
+      key: i,
+      hasBack: hasBg,
+      isInverted: isInverted
+    }));
+  })));
+};
+var NewsTable$1 = withLibTheme(NewsTable);
+var templateObject_1$2;
+
+var ContentBlock = styled(Copy).withConfig({
+  displayName: "NewsText__ContentBlock",
+  componentId: "sc-2vavtq-0"
+})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    display: block;\n    margin: ", ";\n    max-width: ", ";\n\n    :not(:first-child) {\n        padding-top: ", "px;\n    }\n"], ["\n    display: block;\n    margin: ", ";\n    max-width: ", ";\n\n    :not(:first-child) {\n        padding-top: ", "px;\n    }\n"])), function (_a) {
+  var isCentered = _a.isCentered;
+  return isCentered && '0 auto';
+}, function (_a) {
+  var clampText = _a.clampText;
+  return clampText && 19 / 28 * spacings.wrapperSmall + 'px';
+}, spacings.nudge * 5);
+
+var NewsText = function (_a) {
+  var anchorId = _a.anchorId,
+      text = _a.text,
+      bgMode = _a.bgMode;
+  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, {
+    clampWidth: "small",
+    addWhitespace: true
+  }, text && React__default.createElement(ContentBlock, {
+    isInverted: isInverted,
+    type: "copy",
+    innerHTML: text
+  })));
+};
+var NewsText$1 = withLibTheme(NewsText);
+var templateObject_1$1;
+
+var NewsVideo = function (_a) {
+  var anchorId = _a.anchorId,
+      bgImage = _a.bgImage,
+      embedId = _a.embedId,
+      playIcon = _a.playIcon,
+      consentText = _a.consentText,
+      consentAction = _a.consentAction,
+      bgMode = _a.bgMode;
+  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,
+    clampWidth: "small"
+  }, embedId && bgImage && React__default.createElement(VideoCard, {
+    bgImage: bgImage,
+    embedId: embedId,
+    playIcon: playIcon,
+    consentText: consentText,
+    consentAction: consentAction
+  })));
+};
+var NewsVideo$1 = withLibTheme(NewsVideo);
+
+var News = styled.ul.withConfig({
+  displayName: "NewsList__News",
+  componentId: "sc-sew5jz-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    list-style: none;\n    margin: 0;\n    margin-top: -", "px;\n    margin-left: -", "px;\n    padding: 0;\n\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n\n    flex-wrap: wrap;\n"], ["\n    list-style: none;\n    margin: 0;\n    margin-top: -", "px;\n    margin-left: -", "px;\n    padding: 0;\n\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n\n    flex-wrap: wrap;\n"])), spacings.nudge * 6, spacings.spacer);
+var NewsItem = styled.li.withConfig({
+  displayName: "NewsList__NewsItem",
+  componentId: "sc-sew5jz-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-top: ", "px;\n    padding-left: ", "px;\n    flex: 1 0 100%;\n    max-width: 100%;\n\n    @media ", " {\n        flex: 1 0 50%;\n        max-width: 50%;\n    }\n\n    @media ", " {\n        flex: 1 0 33.33%;\n        max-width: 33.33%;\n    }\n"], ["\n    padding-top: ", "px;\n    padding-left: ", "px;\n    flex: 1 0 100%;\n    max-width: 100%;\n\n    @media ", " {\n        flex: 1 0 50%;\n        max-width: 50%;\n    }\n\n    @media ", " {\n        flex: 1 0 33.33%;\n        max-width: 33.33%;\n    }\n"])), spacings.nudge * 6, spacings.spacer, mq.medium, mq.large);
+
+var NewsList = function (_a) {
+  var anchorId = _a.anchorId,
+      _b = _a.mode,
+      mode = _b === void 0 ? 'short' : _b,
+      news = _a.news,
+      bgMode = _a.bgMode,
+      customTag = _a.customTag;
+
+  var _c = useLibTheme(),
+      colors = _c.colors,
+      theme = _c.theme;
+
+  var items = useMemo(function () {
+    if (!news) return [];
+    if (mode === 'expanded') return news.slice(0, 6);else return news.slice(0, 3);
+  }, [news, mode]);
+  var isInverted = bgMode === 'inverted';
+  var hasBg = bgMode === 'full';
+  var cardRefs = useEqualSheetHeight({
+    listLength: items.length,
+    identifiers: ['[data-sheet="head"]', '[data-sheet="title"]', '[data-sheet="text"]'],
+    responsive: {
+      small: 1,
+      medium: 2,
+      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, true)
+  }, React__default.createElement(Wrapper, {
+    addWhitespace: true
+  }, React__default.createElement(News, null, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
+    var _a;
+
+    return React__default.createElement(NewsItem, {
+      key: i
+    }, React__default.createElement(NewsCard, __assign({
+      key: i,
+      ref: cardRefs[i]
+    }, item, {
+      isInverted: isInverted,
+      tags: (_a = item.tags) === null || _a === void 0 ? void 0 : _a.map(function (tag) {
+        var _a, _b;
+
+        var tagHref = undefined;
+
+        if (tag.name && ((_a = tag.link) === null || _a === void 0 ? void 0 : _a.href)) {
+          tagHref = getNewsFilterParams(tag.link.href, theme, [tag.name]);
+        }
+
+        return {
+          name: tag.name,
+          link: ((_b = tag.link) === null || _b === void 0 ? void 0 : _b.href) ? __assign(__assign({}, tag.link), {
+            href: tagHref
+          }) : undefined
+        };
+      }),
+      customTag: customTag
+    })));
+  }))));
+};
+var NewsList$1 = withLibTheme(NewsList);
+var templateObject_1, templateObject_2;
+
+export { NewsAuthorCard$1 as NewsAuthorCard, NewsFooter$1 as NewsFooter, NewsImages$1 as NewsImages, NewsIntro$1 as NewsIntro, NewsList$1 as NewsList, NewsOverview$1 as NewsOverview, NewsTable$1 as NewsTable, NewsText$1 as NewsText, NewsVideo$1 as NewsVideo };
+//# sourceMappingURL=sections_news.js.map