@sok-brand-sites/common-frontend-components 0.0.1-security → 1.643.1

package/dist/components/Header/Header.js

@@ -0,0 +1,290 @@
+import { __read, __assign } from '../../_virtual/_tslib.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { forwardRef, useState, useEffect } from 'react';
+import { HeaderContainer, FlexContainer, MainContainer, LogoContainer, Logo, LogoContainerLink, PrimaryContainer, FirstLevelLinksContainer, FirstLevelLink, SecondaryContainer, HamburgerButton, HamburgerAnimation, HeaderBottomBar, SecondLevelLinksContainer, SecondLevelLink, MobileNavigation, MobileLinksContainer, FirstLevelLinkButton, ArrowButton, CollapsingMobileLinksContainer, SecondLevelLinkButton } from './Header.styles.js';
+import LanguageSelector from '../LanguageSelector/LanguageSelector.js';
+import { ArrowDown } from '../../assets/icons/Icons.js';
+import { SLogo } from '../../assets/logos/logos.js';
+import { locales } from '../../locales/constants.js';
+import { useWindowSize } from '../../hooks/windowsize.js';
+import { getTheme, isExternalURL, getCurrentThemeName } from '../utils.js';
+/**
+ * @param links links and their sublinks for the Header
+ * @param translations translations and paths for the differnt language versions of the page
+ * @param logo a React node to render instead of the default logo
+ * @param logoUrl logo image url
+ * @param disableLogoLink should be true, if the logo should not be a link directing to the site's root url
+ * @param children children will be rendered to the right side of the desktop header and to
+ * the bottom of the mobile header
+ *
+ * Logo use cases:
+ *
+ * Logo directs to site's root url
+ *    * provide either prop logoUrl or logo (\<svg\> or \<img\>)
+ *    * prop disableLogoLink should be false
+ *
+ * Logo is not a link
+ *    * provide either prop logoUrl or logo (\<svg\> or \<img\>)
+ *    * prop disableLogoLink should be true
+ *
+ * Logo directs to another url than the site's root url
+ *    * provide prop logo (\<a\>)
+ *    * prop disableLogoLink should be true
+ *  */
+
+var Header = forwardRef(function (_a, ref) {
+  var _b, _c;
+
+  var links = _a.links,
+      translations = _a.translations,
+      logo = _a.logo,
+      logoUrl = _a.logoUrl,
+      children = _a.children,
+      disableLogoLink = _a.disableLogoLink,
+      _d = _a.forcedFakeCurrentUrl,
+      forcedFakeCurrentUrl = _d === void 0 ? '' : _d;
+
+  var _e = __read(useState(false), 2),
+      showHeaderContent = _e[0],
+      setShowHeaderContent = _e[1];
+
+  var windowSize = useWindowSize();
+  var theme = getTheme(getCurrentThemeName());
+
+  var _f = __read(useState(false), 2),
+      mobileMenuOpen = _f[0],
+      setMobileMenuOpen = _f[1];
+
+  var _g = __read(useState(windowSize.width < parseFloat(theme.breakpoints.tablet)), 2),
+      mobile = _g[0],
+      setMobile = _g[1];
+
+  var _h = __read(useState(), 2),
+      activeFirstLevelLink = _h[0],
+      setActiveFirstLevelLink = _h[1];
+
+  var _j = __read(useState(), 2),
+      activeSecondLevelLink = _j[0],
+      setActiveSecondLevelLink = _j[1];
+
+  var _k = __read(useState(), 2),
+      expandedMobileNavigationLink = _k[0],
+      setExpandedMobileNavigationLink = _k[1];
+
+  var hasLinks = links && links.length > 0;
+
+  var handleHamburgerClick = function handleHamburgerClick() {
+    if (mobileMenuOpen) {
+      setMobileMenuOpen(false);
+    } else {
+      setExpandedMobileNavigationLink(activeFirstLevelLink);
+      setMobileMenuOpen(true);
+    }
+  };
+
+  var handleMobileNavigationExpand = function handleMobileNavigationExpand(link) {
+    if ((link === null || link === void 0 ? void 0 : link.path) === (expandedMobileNavigationLink === null || expandedMobileNavigationLink === void 0 ? void 0 : expandedMobileNavigationLink.path)) {
+      setExpandedMobileNavigationLink(undefined);
+    } else {
+      setExpandedMobileNavigationLink(link);
+    }
+  };
+
+  var getRootUrl = function getRootUrl() {
+    if ((translations === null || translations === void 0 ? void 0 : translations.currentLanguage) && translations.currentLanguage !== locales.FI) {
+      return "/" + translations.currentLanguage.toLowerCase();
+    }
+
+    return '/';
+  };
+
+  var hasChildLinks = function hasChildLinks(link) {
+    var _a, _b;
+
+    return !!((_b = (_a = link === null || link === void 0 ? void 0 : link.childItems) === null || _a === void 0 ? void 0 : _a.nodes) === null || _b === void 0 ? void 0 : _b.length);
+  };
+
+  var hasMultipleTranslations = function hasMultipleTranslations() {
+    return (translations === null || translations === void 0 ? void 0 : translations.paths) && Object.values(translations === null || translations === void 0 ? void 0 : translations.paths).length > 1;
+  };
+
+  var hasContent = hasLinks || hasMultipleTranslations() || children;
+  useEffect(function () {
+    if (windowSize.width >= parseFloat(theme.breakpoints.tablet)) {
+      setMobile(false);
+    } else setMobile(true);
+  }, [windowSize]);
+  useEffect(function () {
+    var _a;
+    /*
+      url is defined conditionally due to Storybook.
+      If Header is rendered in Storybook using iframe,
+      url should be document.referrer instead of document.location.href
+    */
+
+
+    var url = window.location !== window.parent.location ? document.referrer : document.location.href;
+    /*
+      To open the second level navigation by default in docs page
+    */
+
+    if (forcedFakeCurrentUrl) {
+      url = forcedFakeCurrentUrl;
+    }
+
+    var urlWithTrailingSlash = url + "/";
+    var currentFirstLevelLink = links === null || links === void 0 ? void 0 : links.find(function (link) {
+      return urlWithTrailingSlash.includes(link.path);
+    }); // Bug: If the first link is the root, then it will be always set as active, since all paths include /
+
+    var currentSecondLevelLink = (_a = currentFirstLevelLink === null || currentFirstLevelLink === void 0 ? void 0 : currentFirstLevelLink.childItems) === null || _a === void 0 ? void 0 : _a.nodes.find(function (link) {
+      return urlWithTrailingSlash.includes(link.path);
+    });
+    setActiveFirstLevelLink(currentFirstLevelLink);
+    setActiveSecondLevelLink(currentSecondLevelLink);
+  }, []);
+  useEffect(function () {
+    setShowHeaderContent(true);
+  }, []);
+  useEffect(function () {
+    if (mobileMenuOpen) {
+      /* Disable scroll in body behind the menu */
+      document.body.style.overflow = 'hidden';
+    } else {
+      /* Enable scroll in body */
+      document.body.style.overflow = 'unset';
+    }
+  }, [mobileMenuOpen]); // TODO: Separate parts of the Header into own components, for example MobileNavigation etc
+
+  return jsx(HeaderContainer, __assign({
+    ref: ref,
+    mobileMenuOpen: mobileMenuOpen
+  }, {
+    children: showHeaderContent && jsxs(Fragment, {
+      children: [jsx(FlexContainer, {
+        children: jsxs(MainContainer, {
+          children: [disableLogoLink ? jsx(LogoContainer, {
+            children: logo ? logo : logoUrl ? jsx(Logo, {
+              src: logoUrl
+            }, void 0) : jsx(SLogo, {
+              color: "#00aa46"
+            }, void 0)
+          }, void 0) : jsx(LogoContainerLink, __assign({
+            href: getRootUrl()
+          }, {
+            children: logo ? logo : logoUrl ? jsx(Logo, {
+              src: logoUrl
+            }, void 0) : jsx(SLogo, {
+              color: "#00aa46"
+            }, void 0)
+          }), void 0), !mobile && jsxs(Fragment, {
+            children: [jsx(PrimaryContainer, {
+              children: jsx(FirstLevelLinksContainer, {
+                children: links === null || links === void 0 ? void 0 : links.map(function (link, i) {
+                  return jsx(FirstLevelLink, __assign({
+                    active: (activeFirstLevelLink === null || activeFirstLevelLink === void 0 ? void 0 : activeFirstLevelLink.path) === link.path,
+                    href: link.path,
+                    target: isExternalURL(link.path) ? '__blank' : '_self'
+                  }, {
+                    children: link.label
+                  }), "first-level-link-" + i);
+                })
+              }, void 0)
+            }, void 0), jsxs(SecondaryContainer, {
+              children: [translations && hasMultipleTranslations() && jsx(LanguageSelector, {
+                translations: translations,
+                simple: false
+              }, void 0), children]
+            }, void 0)]
+          }, void 0), mobile && hasContent && jsx(HamburgerButton, __assign({
+            onClick: function onClick() {
+              return handleHamburgerClick();
+            }
+          }, {
+            children: jsx(HamburgerAnimation, {
+              mobileMenuOpen: mobileMenuOpen
+            }, void 0)
+          }), void 0)]
+        }, void 0)
+      }, void 0), !mobile && hasChildLinks(activeFirstLevelLink) && jsx(HeaderBottomBar, {
+        children: jsx(SecondLevelLinksContainer, {
+          children: (_c = (_b = activeFirstLevelLink === null || activeFirstLevelLink === void 0 ? void 0 : activeFirstLevelLink.childItems) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c.map(function (item, i) {
+            return jsx(SecondLevelLink, __assign({
+              active: (activeSecondLevelLink === null || activeSecondLevelLink === void 0 ? void 0 : activeSecondLevelLink.path) === item.path,
+              id: item.path,
+              href: item.path,
+              target: isExternalURL(item.path) ? '__blank' : '_self'
+            }, {
+              children: item.label
+            }), "second-level-link-" + i);
+          })
+        }, void 0)
+      }, void 0), mobile && mobileMenuOpen && hasContent && jsxs(MobileNavigation, {
+        children: [jsx(FirstLevelLinksContainer, {
+          children: links === null || links === void 0 ? void 0 : links.map(function (firstLevelLink, i) {
+            var _a, _b;
+
+            return jsxs(React.Fragment, {
+              children: [jsxs(MobileLinksContainer, {
+                children: [(activeFirstLevelLink === null || activeFirstLevelLink === void 0 ? void 0 : activeFirstLevelLink.path) === firstLevelLink.path && activeSecondLevelLink === undefined ? jsx(FirstLevelLinkButton, __assign({
+                  active: (activeFirstLevelLink === null || activeFirstLevelLink === void 0 ? void 0 : activeFirstLevelLink.path) === firstLevelLink.path,
+                  onClick: function onClick() {
+                    return setMobileMenuOpen(false);
+                  }
+                }, {
+                  children: firstLevelLink.label
+                }), "first-level-mobile-link-button-" + i) : jsx(FirstLevelLink, __assign({
+                  active: (activeFirstLevelLink === null || activeFirstLevelLink === void 0 ? void 0 : activeFirstLevelLink.path) === firstLevelLink.path,
+                  href: firstLevelLink.path,
+                  target: isExternalURL(firstLevelLink.path) ? '__blank' : '_self'
+                }, {
+                  children: firstLevelLink.label
+                }), "first-level-mobile-link-" + i), hasChildLinks(firstLevelLink) && jsx(ArrowButton, __assign({
+                  onClick: function onClick() {
+                    return handleMobileNavigationExpand(firstLevelLink);
+                  },
+                  open: (expandedMobileNavigationLink === null || expandedMobileNavigationLink === void 0 ? void 0 : expandedMobileNavigationLink.path) === firstLevelLink.path
+                }, {
+                  children: jsx(ArrowDown, {}, void 0)
+                }), void 0)]
+              }, void 0), hasChildLinks(firstLevelLink) && jsx(CollapsingMobileLinksContainer, __assign({
+                expanded: (expandedMobileNavigationLink === null || expandedMobileNavigationLink === void 0 ? void 0 : expandedMobileNavigationLink.path) === firstLevelLink.path,
+                length: (_a = firstLevelLink === null || firstLevelLink === void 0 ? void 0 : firstLevelLink.childItems) === null || _a === void 0 ? void 0 : _a.nodes.length
+              }, {
+                children: jsx(SecondLevelLinksContainer, {
+                  children: (_b = firstLevelLink === null || firstLevelLink === void 0 ? void 0 : firstLevelLink.childItems) === null || _b === void 0 ? void 0 : _b.nodes.map(function (secondLevelLink, i) {
+                    return jsx(React.Fragment, {
+                      children: (activeSecondLevelLink === null || activeSecondLevelLink === void 0 ? void 0 : activeSecondLevelLink.path) === secondLevelLink.path ? jsx(SecondLevelLinkButton, __assign({
+                        active: (activeSecondLevelLink === null || activeSecondLevelLink === void 0 ? void 0 : activeSecondLevelLink.path) === secondLevelLink.path,
+                        onClick: function onClick() {
+                          return setMobileMenuOpen(false);
+                        }
+                      }, {
+                        children: secondLevelLink.label
+                      }), "second-level-mobile-link-button-" + i) : jsx(SecondLevelLink, __assign({
+                        active: (activeSecondLevelLink === null || activeSecondLevelLink === void 0 ? void 0 : activeSecondLevelLink.path) === secondLevelLink.path,
+                        href: secondLevelLink.path,
+                        target: isExternalURL(secondLevelLink.path) ? '__blank' : '_self'
+                      }, {
+                        children: secondLevelLink.label
+                      }), "second-level-mobile-link-" + i)
+                    }, "second-level-mobile-link-container-" + i);
+                  })
+                }, void 0)
+              }), void 0)]
+            }, "mobile-links-" + i);
+          })
+        }, void 0), (hasMultipleTranslations() || children) && jsxs(SecondaryContainer, {
+          children: [translations && hasMultipleTranslations() && jsx(LanguageSelector, {
+            translations: translations,
+            simple: true,
+            onClickActive: function onClickActive() {
+              return setMobileMenuOpen(false);
+            }
+          }, void 0), children]
+        }, void 0)]
+      }, void 0)]
+    }, void 0)
+  }), void 0);
+});
+export { Header, Header as default };

package/dist/components/Header/Header.styles.js

@@ -0,0 +1,314 @@
+import { __makeTemplateObject } from '../../_virtual/_tslib.js';
+import styled, { css } from 'styled-components';
+import media from '../../styles/media.js';
+var HeaderContainer = styled.header.withConfig({
+  displayName: "Headerstyles__HeaderContainer",
+  componentId: "sc-1mqz0r6-0"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: sticky;\n  top: 0;\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 0;\n  box-shadow: ", ";\n  background-color: ", ";\n  width: 100%;\n  border-top: ", ";\n\n  /* Properties that change depending on the screen width (default mobile values) */\n  height: ", ";\n  overflow-y: auto;\n\n  /* Properties that change depending on the screen width (desktop values) */\n  ", "\n"], ["\n  position: sticky;\n  top: 0;\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 0;\n  box-shadow: ", ";\n  background-color: ", ";\n  width: 100%;\n  border-top: ", ";\n\n  /* Properties that change depending on the screen width (default mobile values) */\n  height: ", ";\n  overflow-y: auto;\n\n  /* Properties that change depending on the screen width (desktop values) */\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.boxShadow;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.mainContent.backgroundColor;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.mainContent.borderTop;
+}, function (_a) {
+  var mobileMenuOpen = _a.mobileMenuOpen;
+  return mobileMenuOpen ? '100vh' : 'auto';
+}, media.desktop(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    height: auto;\n    overflow-y: unset;\n  "], ["\n    height: auto;\n    overflow-y: unset;\n  "]))));
+var FlexContainer = styled.div.withConfig({
+  displayName: "Headerstyles__FlexContainer",
+  componentId: "sc-1mqz0r6-1"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n"], ["\n  width: 100%;\n  display: flex;\n"])));
+var MainContainer = styled.div.withConfig({
+  displayName: "Headerstyles__MainContainer",
+  componentId: "sc-1mqz0r6-2"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: 100% !important;\n  justify-content: flex-start;\n  align-items: center;\n  column-gap: ", ";\n  border-bottom: ", ";\n  padding: ", ";\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: 100% !important;\n  justify-content: flex-start;\n  align-items: center;\n  column-gap: ", ";\n  border-bottom: ", ";\n  padding: ", ";\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.mainContent.borderBottom;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing8 + " " + theme.spacings.spacing20;
+}, media.desktop(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t  padding: ", ";\n  "], ["\n\t  padding: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing20;
+}));
+var PrimaryContainer = styled.div.withConfig({
+  displayName: "Headerstyles__PrimaryContainer",
+  componentId: "sc-1mqz0r6-3"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: start;\n  column-gap: ", ";\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: start;\n  column-gap: ", ";\n  align-items: center;\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+});
+var SecondaryContainer = styled.div.withConfig({
+  displayName: "Headerstyles__SecondaryContainer",
+  componentId: "sc-1mqz0r6-4"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  row-gap: ", ";\n\n  /* Properties that change depending on screen width */\n  margin: ", ";\n  flex-direction: column-reverse;\n  justify-content: center;\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  row-gap: ", ";\n\n  /* Properties that change depending on screen width */\n  margin: ", ";\n  flex-direction: column-reverse;\n  justify-content: center;\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing24;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing24 + " " + theme.spacings.spacing16;
+}, media.desktop(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    column-gap: ", ";\n    flex-direction: row;\n    justify-content: end;\n    margin:0;\n    margin-left: auto;\n  "], ["\n    column-gap: ", ";\n    flex-direction: row;\n    justify-content: end;\n    margin:0;\n    margin-left: auto;\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+}));
+var LogoContainer = styled.div.withConfig({
+  displayName: "Headerstyles__LogoContainer",
+  componentId: "sc-1mqz0r6-5"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var LogoContainerLink = styled.a.withConfig({
+  displayName: "Headerstyles__LogoContainerLink",
+  componentId: "sc-1mqz0r6-6"
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var Logo = styled.img.withConfig({
+  displayName: "Headerstyles__Logo",
+  componentId: "sc-1mqz0r6-7"
+})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  height: ", ";\n"], ["\n  height: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing48;
+});
+var FirstLevelLinksContainer = styled.div.withConfig({
+  displayName: "Headerstyles__FirstLevelLinksContainer",
+  componentId: "sc-1mqz0r6-8"
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  align-items: left;\n  justify-content: flex-start;\n  flex-direction: column;\n  margin: 0;\n  column-gap: ", ";\n  padding: ", ";\n\n  ", "\n"], ["\n  display: flex;\n  align-items: left;\n  justify-content: flex-start;\n  flex-direction: column;\n  margin: 0;\n  column-gap: ", ";\n  padding: ", ";\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing20;
+}, media.desktop(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    padding: 0;\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    padding: 0;\n  "]))));
+var firstLevelLinkStyles = css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: block;\n  width: fit-content;\n  padding: ", ";\n  padding-left: 0;\n  margin-right: ", ";\n  text-decoration: none;\n\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n\n  /* Properties that change depending on the link being active/inactive or hovered  */\n  color: ", ";\n\n  :hover {\n    filter: brightness(1);\n    color: ", ";\n  }\n\n  :after {\n    display: block;\n    width: 100%;\n    content: '';\n    border-bottom: solid 1px ", ";\n    transform: scaleX(0);\n    transition: transform 0.1s ease-in;\n  }\n\n  :hover:after {\n    transform: scaleX(1);\n  }\n\n  ", "\n\n  ", "\n"], ["\n  display: block;\n  width: fit-content;\n  padding: ", ";\n  padding-left: 0;\n  margin-right: ", ";\n  text-decoration: none;\n\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n\n  /* Properties that change depending on the link being active/inactive or hovered  */\n  color: ", ";\n\n  :hover {\n    filter: brightness(1);\n    color: ", ";\n  }\n\n  :after {\n    display: block;\n    width: 100%;\n    content: '';\n    border-bottom: solid 1px ", ";\n    transform: scaleX(0);\n    transition: transform 0.1s ease-in;\n  }\n\n  :hover:after {\n    transform: scaleX(1);\n  }\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.firstLevelLink.font.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.firstLevelLink.font.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.firstLevelLink.font.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.firstLevelLink.font.fontSizes.mobile.lineHeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.firstLevelLink.color.default;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.firstLevelLink.color.hover;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.firstLevelLink.color.hover;
+}, function (_a) {
+  var active = _a.active;
+  return active && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      color: ", ";\n\n      :hover {\n        filter: brightness(1);\n        color: ", ";\n      }\n\n      :after {\n        display: block;\n        width: 100%;\n        content: '';\n        border-bottom: solid 1px ", ";\n        transform: ", ";\n        transition: transform 0.1s ease-in;\n      }\n      :hover:after {\n        transform: scaleX(1);\n      }\n    "], ["\n      color: ", ";\n\n      :hover {\n        filter: brightness(1);\n        color: ", ";\n      }\n\n      :after {\n        display: block;\n        width: 100%;\n        content: '';\n        border-bottom: solid 1px ", ";\n        transform: ", ";\n        transition: transform 0.1s ease-in;\n      }\n      :hover:after {\n        transform: scaleX(1);\n      }\n    "])), function (_a) {
+    var theme = _a.theme;
+    return theme.components.header.firstLevelLink.color.active;
+  }, function (_a) {
+    var theme = _a.theme;
+    return theme.components.header.firstLevelLink.color.hoverActive;
+  }, function (_a) {
+    var theme = _a.theme;
+    return theme.components.header.firstLevelLink.color.hoverActive;
+  }, function (_a) {
+    var theme = _a.theme;
+    return theme.components.header.activeLinkUnderline ? 'scaleX(1)' : 'scaleX(0)';
+  });
+}, media.desktop(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  padding: ", " 0;\n  margin:0;\n  "], ["\n  padding: ", " 0;\n  margin:0;\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing8;
+}));
+var FirstLevelLink = styled.a.withConfig({
+  displayName: "Headerstyles__FirstLevelLink",
+  componentId: "sc-1mqz0r6-9"
+})(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), firstLevelLinkStyles);
+var FirstLevelLinkButton = styled.button.withConfig({
+  displayName: "Headerstyles__FirstLevelLinkButton",
+  componentId: "sc-1mqz0r6-10"
+})(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n\n  ", "\n"], ["\n  background: transparent;\n  border: none;\n\n  ", "\n"])), firstLevelLinkStyles);
+var HeaderBottomBar = styled.div.withConfig({
+  displayName: "Headerstyles__HeaderBottomBar",
+  componentId: "sc-1mqz0r6-11"
+})(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  box-shadow: ", ";\n  border-bottom: ", ";\n  background-color: ", ";\n"], ["\n  display: flex;\n  width: 100%;\n  box-shadow: ", ";\n  border-bottom: ", ";\n  background-color: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.boxShadow;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.bottomBar.borderBottom;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.bottomBar.backgroundColor;
+});
+var SecondLevelLinksContainer = styled.div.withConfig({
+  displayName: "Headerstyles__SecondLevelLinksContainer",
+  componentId: "sc-1mqz0r6-12"
+})(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  width: auto;\n  z-index: 100;\n  padding: ", ";\n\n  flex-direction: column;\n  row-gap: ", ";\n\n  ", "\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  width: auto;\n  z-index: 100;\n  padding: ", ";\n\n  flex-direction: column;\n  row-gap: ", ";\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing12 + " " + theme.spacings.spacing24;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing8;
+}, media.desktop(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    flex-direction: row;\n    column-gap: ", ";\n    padding: ", ";\n  "], ["\n    flex-direction: row;\n    column-gap: ", ";\n    padding: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing12 + " " + theme.spacings.spacing20;
+}));
+var secondLevelLinkStyles = css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  display: block;\n  width: fit-content;\n  padding: ", " 0;\n  text-decoration: none;\n\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n\n  /*\n   Properties that change depending on the link being\n      - mobile/desktop (default mobile values below)\n      - inactive/active (default: inactive)\n      - hovered\n\n  */\n  color: ", ";\n\n  :hover {\n    filter: brightness(1);\n    color: ", ";\n  }\n\n  :after {\n    display: block;\n    width: 100%;\n    content: '';\n    border-bottom: solid 1px ", ";\n    transform: scaleX(0);\n    transition: transform 0.1s ease-in;\n  }\n\n  :hover:after {\n    transform: scaleX(1);\n  }\n\n  ", "\n\n  /*\n   Properties that change depending on the link being\n      - mobile/desktop (desktop values below)\n      - inactive/active (default: inactive)\n      - hovered\n  */\n  ", "\n"], ["\n  display: block;\n  width: fit-content;\n  padding: ", " 0;\n  text-decoration: none;\n\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n\n  /*\n   Properties that change depending on the link being\n      - mobile/desktop (default mobile values below)\n      - inactive/active (default: inactive)\n      - hovered\n\n  */\n  color: ", ";\n\n  :hover {\n    filter: brightness(1);\n    color: ", ";\n  }\n\n  :after {\n    display: block;\n    width: 100%;\n    content: '';\n    border-bottom: solid 1px ", ";\n    transform: scaleX(0);\n    transition: transform 0.1s ease-in;\n  }\n\n  :hover:after {\n    transform: scaleX(1);\n  }\n\n  ", "\n\n  /*\n   Properties that change depending on the link being\n      - mobile/desktop (desktop values below)\n      - inactive/active (default: inactive)\n      - hovered\n  */\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing8;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.secondLevelLink.font.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.secondLevelLink.font.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.secondLevelLink.font.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.secondLevelLink.font.fontSizes.mobile.lineHeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.secondLevelLink.color.mobile.default;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.secondLevelLink.color.mobile.hover;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.secondLevelLink.color.mobile.hover;
+}, function (_a) {
+  var active = _a.active;
+  return active && css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n      color: ", ";\n\n      :hover {\n        filter: brightness(1);\n        color: ", ";\n      }\n\n      :after {\n        display: block;\n        width: 100%;\n        content: '';\n        border-bottom: solid 1px ", ";\n        transform: ", ";\n        transition: transform 0.1s ease-in;\n      }\n      :hover:after {\n        transform: scaleX(1);\n      }\n    "], ["\n      color: ", ";\n\n      :hover {\n        filter: brightness(1);\n        color: ", ";\n      }\n\n      :after {\n        display: block;\n        width: 100%;\n        content: '';\n        border-bottom: solid 1px ", ";\n        transform: ", ";\n        transition: transform 0.1s ease-in;\n      }\n      :hover:after {\n        transform: scaleX(1);\n      }\n    "])), function (_a) {
+    var theme = _a.theme;
+    return theme.components.header.secondLevelLink.color.mobile.active;
+  }, function (_a) {
+    var theme = _a.theme;
+    return theme.components.header.secondLevelLink.color.mobile.hoverActive;
+  }, function (_a) {
+    var theme = _a.theme;
+    return theme.components.header.secondLevelLink.color.mobile.hoverActive;
+  }, function (_a) {
+    var theme = _a.theme;
+    return theme.components.header.activeLinkUnderline ? 'scaleX(1)' : 'scaleX(0)';
+  });
+}, media.desktop(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n    color: ", ";\n\n    :hover {\n      filter: brightness(1);\n      color: ", ";\n    }\n\n    :after {\n      display: block;\n      width: 100%;\n      content: '';\n      border-bottom: solid 1px\n        ", ";\n      transform: scaleX(0);\n      transition: transform 0.1s ease-in;\n    }\n\n    :hover:after {\n      transform: scaleX(1);\n    }\n\n    ", "\n  "], ["\n    color: ", ";\n\n    :hover {\n      filter: brightness(1);\n      color: ", ";\n    }\n\n    :after {\n      display: block;\n      width: 100%;\n      content: '';\n      border-bottom: solid 1px\n        ", ";\n      transform: scaleX(0);\n      transition: transform 0.1s ease-in;\n    }\n\n    :hover:after {\n      transform: scaleX(1);\n    }\n\n    ", "\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.secondLevelLink.color.desktop.default;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.secondLevelLink.color.desktop.hover;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.secondLevelLink.color.desktop.hover;
+}, function (_a) {
+  var active = _a.active;
+  return active && css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n        color: ", ";\n\n        :hover {\n          filter: brightness(1);\n          color: ", ";\n        }\n\n        :after {\n          display: block;\n          width: 100%;\n          content: '';\n          border-bottom: solid 1px ", ";\n          transform: ", ";\n          transition: transform 0.1s ease-in;\n        }\n        :hover:after {\n          transform: scaleX(1);\n        }\n      "], ["\n        color: ", ";\n\n        :hover {\n          filter: brightness(1);\n          color: ", ";\n        }\n\n        :after {\n          display: block;\n          width: 100%;\n          content: '';\n          border-bottom: solid 1px ", ";\n          transform: ", ";\n          transition: transform 0.1s ease-in;\n        }\n        :hover:after {\n          transform: scaleX(1);\n        }\n      "])), function (_a) {
+    var theme = _a.theme;
+    return theme.components.header.secondLevelLink.color.desktop.active;
+  }, function (_a) {
+    var theme = _a.theme;
+    return theme.components.header.secondLevelLink.color.desktop.hoverActive;
+  }, function (_a) {
+    var theme = _a.theme;
+    return theme.components.header.secondLevelLink.color.desktop.hoverActive;
+  }, function (_a) {
+    var theme = _a.theme;
+    return theme.components.header.activeLinkUnderline ? 'scaleX(1)' : 'scaleX(0)';
+  });
+}));
+var SecondLevelLink = styled.a.withConfig({
+  displayName: "Headerstyles__SecondLevelLink",
+  componentId: "sc-1mqz0r6-13"
+})(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), secondLevelLinkStyles);
+var SecondLevelLinkButton = styled.button.withConfig({
+  displayName: "Headerstyles__SecondLevelLinkButton",
+  componentId: "sc-1mqz0r6-14"
+})(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n\n  ", "\n"], ["\n  background: transparent;\n  border: none;\n\n  ", "\n"])), secondLevelLinkStyles);
+var HamburgerButton = styled.button.withConfig({
+  displayName: "Headerstyles__HamburgerButton",
+  componentId: "sc-1mqz0r6-15"
+})(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  display: flex;\n  border: none;\n  background: transparent;\n  height: 50px;\n  cursor: pointer;\n  margin-left: auto;\n"], ["\n  display: flex;\n  border: none;\n  background: transparent;\n  height: 50px;\n  cursor: pointer;\n  margin-left: auto;\n"])));
+var HamburgerAnimation = styled.div.withConfig({
+  displayName: "Headerstyles__HamburgerAnimation",
+  componentId: "sc-1mqz0r6-16"
+})(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  width: 30px;\n  height: 2px;\n  position: relative;\n  transform: translateY(25px);\n  background: ", ";\n  transition: all 0ms 300ms;\n\n  :after,\n  :before {\n    width: 30px;\n    height: 2px;\n  }\n\n  :before {\n    content: '';\n    position: absolute;\n    left: 0;\n    bottom: ", ";\n    background: ", ";\n    transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);\n  }\n\n  :after {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: ", ";\n    background: ", ";\n    transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);\n  }\n\n  ", "\n"], ["\n  width: 30px;\n  height: 2px;\n  position: relative;\n  transform: translateY(25px);\n  background: ", ";\n  transition: all 0ms 300ms;\n\n  :after,\n  :before {\n    width: 30px;\n    height: 2px;\n  }\n\n  :before {\n    content: '';\n    position: absolute;\n    left: 0;\n    bottom: ", ";\n    background: ", ";\n    transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);\n  }\n\n  :after {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: ", ";\n    background: ", ";\n    transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);\n  }\n\n  ", "\n"])), function (_a) {
+  var mobileMenuOpen = _a.mobileMenuOpen,
+      theme = _a.theme;
+  return mobileMenuOpen ? 'rgba(0, 0, 0, 0)' : theme.components.header.hamburger.color;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing12;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.hamburger.color;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing12;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.hamburger.color;
+}, function (_a) {
+  var mobileMenuOpen = _a.mobileMenuOpen;
+  return mobileMenuOpen && css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n      :after {\n        top: 0;\n        transform: rotate(45deg);\n        transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);\n      }\n      :before {\n        bottom: 0;\n        transform: rotate(-45deg);\n        transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);\n      }\n    "], ["\n      :after {\n        top: 0;\n        transform: rotate(45deg);\n        transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);\n      }\n      :before {\n        bottom: 0;\n        transform: rotate(-45deg);\n        transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);\n      }\n    "])));
+});
+var MobileNavigation = styled.div.withConfig({
+  displayName: "Headerstyles__MobileNavigation",
+  componentId: "sc-1mqz0r6-17"
+})(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding-bottom: 160px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding-bottom: 160px;\n"])));
+var MobileLinksContainer = styled.div.withConfig({
+  displayName: "Headerstyles__MobileLinksContainer",
+  componentId: "sc-1mqz0r6-18"
+})(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: solid 1px ", ";\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: solid 1px ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.mobileLinksContainer.color.bottomBorder;
+});
+var CollapsingMobileLinksContainer = styled.div.withConfig({
+  displayName: "Headerstyles__CollapsingMobileLinksContainer",
+  componentId: "sc-1mqz0r6-19"
+})(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  /* constant 3 added to balance the animation speed when there are only a couple of items */\n  --transition-time: ", ";\n\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  /* Properties for transition */\n  max-height: 0;\n  border-bottom: solid 1px transparent;\n  -webkit-transition: all var(--transition-time) ease;\n  -moz-transition: all var(--transition-time) ease;\n  transition: all var(--transition-time) ease-in-out;\n\n  ", "\n"], ["\n  /* constant 3 added to balance the animation speed when there are only a couple of items */\n  --transition-time: ", ";\n\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  /* Properties for transition */\n  max-height: 0;\n  border-bottom: solid 1px transparent;\n  -webkit-transition: all var(--transition-time) ease;\n  -moz-transition: all var(--transition-time) ease;\n  transition: all var(--transition-time) ease-in-out;\n\n  ", "\n"])), function (_a) {
+  var length = _a.length;
+  return length && (length + 3) * 0.025 + "s";
+}, function (_a) {
+  var expanded = _a.expanded;
+  return expanded && css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n      /* 4 rem is approximately the height of one link element */\n      max-height: ", ";\n      border-bottom: solid 1px ", ";\n    "], ["\n      /* 4 rem is approximately the height of one link element */\n      max-height: ", ";\n      border-bottom: solid 1px ", ";\n    "])), function (_a) {
+    var length = _a.length;
+    return length && length * 4 + "rem";
+  }, function (_a) {
+    var theme = _a.theme;
+    return theme.components.header.mobileLinksContainer.color.bottomBorder;
+  });
+});
+var ArrowButton = styled.button.withConfig({
+  displayName: "Headerstyles__ArrowButton",
+  componentId: "sc-1mqz0r6-20"
+})(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  height: ", ";\n  width: ", ";\n  padding: ", ";\n  background: transparent;\n  border: none;\n\n  flex: 1;\n  justify-content: flex-end;\n\n  svg {\n    transform: ", ";\n    transition: all 0.4s ease-in-out;\n\n    path {\n      fill: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  height: ", ";\n  width: ", ";\n  padding: ", ";\n  background: transparent;\n  border: none;\n\n  flex: 1;\n  justify-content: flex-end;\n\n  svg {\n    transform: ", ";\n    transition: all 0.4s ease-in-out;\n\n    path {\n      fill: ", ";\n    }\n  }\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing48;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing8;
+}, function (_a) {
+  var open = _a.open;
+  return open ? 'rotate(180deg)' : 'rotate(0deg)';
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.header.mobileArrowButton.color;
+});
+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, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35;
+export { ArrowButton, CollapsingMobileLinksContainer, FirstLevelLink, FirstLevelLinkButton, FirstLevelLinksContainer, FlexContainer, HamburgerAnimation, HamburgerButton, HeaderBottomBar, HeaderContainer, Logo, LogoContainer, LogoContainerLink, MainContainer, MobileLinksContainer, MobileNavigation, PrimaryContainer, SecondLevelLink, SecondLevelLinkButton, SecondLevelLinksContainer, SecondaryContainer };

package/dist/components/Heading/Heading.js

@@ -0,0 +1,29 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { StyledHeading } from './Heading.styles.js';
+import { parseHtmlContent } from '../utils.js';
+var Heading = forwardRef(function (_a, ref) {
+  var textAlign = _a.textAlign,
+      textColor = _a.textColor,
+      content = _a.content,
+      level = _a.level,
+      anchor = _a.anchor,
+      rest = __rest(_a, ["textAlign", "textColor", "content", "level", "anchor"]);
+
+  return jsx(Fragment, {
+    children: jsx(StyledHeading, __assign({
+      id: anchor,
+      // @ts-ignore
+      as: "h" + level,
+      textAlign: textAlign,
+      textColor: textColor,
+      dangerouslySetInnerHTML: {
+        __html: parseHtmlContent(content)
+      }
+    }, rest, {
+      ref: ref
+    }), void 0)
+  }, void 0);
+});
+export { Heading, Heading as default };