@laerdal/life-react-components 3.5.1-dev.10 → 3.5.1-dev.12

package/dist/Footer/Components/FooterBottomLinks.js

@@ -1,41 +1,20 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _templateObject, _templateObject2, _templateObject3;
-import * as React from 'react';
-import styled from 'styled-components';
-import { HyperLink } from '../../HyperLink';
-import { BREAKPOINTS, COLORS } from '../../styles';
-import { ComponentTextStyle, ComponentXSStyling } from '../../styles/typography';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var FooterLinkSection = styled.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: 64px;\n  color: white;\n  display: flex;\n  flex-direction: column;\n\n  ", " {\n    flex-direction: row;\n  }\n"])), BREAKPOINTS.MEDIUM);
-var FooterLinks = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n\n  ", " {\n    flex-direction: row;\n    margin: auto auto auto 0;\n  }\n\n  a {\n    ", "\n    &:not(:first-child) {\n      margin: 16px 0 0 0;\n      ", " {\n        margin: 0 0 0 16px;\n      }\n    }\n  }\n"])), BREAKPOINTS.MEDIUM, ComponentXSStyling(ComponentTextStyle.Bold, null), BREAKPOINTS.MEDIUM);
-var Copyright = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  margin: 16px auto 0 auto;\n\n  ", " {\n    margin: auto 0 auto auto;\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white), BREAKPOINTS.MEDIUM);
-var FooterBottomLinks = function FooterBottomLinks(_ref) {
-  var bottomLinks = _ref.bottomLinks,
-    copyrightText = _ref.copyrightText;
-  return /*#__PURE__*/_jsxs(FooterLinkSection, {
-    children: [/*#__PURE__*/_jsx(FooterLinks, {
-      children: bottomLinks === null || bottomLinks === void 0 ? void 0 : bottomLinks.map(function (bl, i) {
-        return /*#__PURE__*/_jsx(HyperLink, {
-          id: "FooterLink_".concat(Math.floor(Math.random() * 999999999999)),
-          href: bl.to,
-          variant: "inverted",
-          children: bl.label
-        }, i);
-      })
-    }), /*#__PURE__*/_jsx(Copyright, {
-      children: copyrightText
-    })]
-  });
-};
-FooterBottomLinks.propTypes = {
-  bottomLinks: _pt.arrayOf(_pt.shape({
-    label: _pt.string.isRequired,
-    to: _pt.string.isRequired,
-    target: _pt.string
-  })),
-  copyrightText: _pt.string
-};
-export default FooterBottomLinks;
-//# sourceMappingURL=FooterBottomLinks.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { HyperLink } from '../../HyperLink';
+import { BREAKPOINTS, COLORS } from '../../styles';
+import { ComponentTextStyle, ComponentXSStyling } from '../../styles/typography';
+var FooterLinkSection = styled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-height: 64px;\n  color: white;\n  display: flex;\n  flex-direction: column;\n\n  ", " {\n    flex-direction: row;\n  }\n"], ["\n  min-height: 64px;\n  color: white;\n  display: flex;\n  flex-direction: column;\n\n  ", " {\n    flex-direction: row;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var FooterLinks = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n\n  ", " {\n    flex-direction: row;\n    margin: auto auto auto 0;\n  }\n\n  a {\n    ", "\n    &:not(:first-child) {\n      margin: 16px 0 0 0;\n      ", " {\n        margin: 0 0 0 16px;\n      }\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n\n  ", " {\n    flex-direction: row;\n    margin: auto auto auto 0;\n  }\n\n  a {\n    ", "\n    &:not(:first-child) {\n      margin: 16px 0 0 0;\n      ", " {\n        margin: 0 0 0 16px;\n      }\n    }\n  }\n"])), BREAKPOINTS.MEDIUM, ComponentXSStyling(ComponentTextStyle.Bold, null), BREAKPOINTS.MEDIUM);
+var Copyright = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  margin: 16px auto 0 auto;\n\n  ", " {\n    margin: auto 0 auto auto;\n  }\n"], ["\n  ", "\n  margin: 16px auto 0 auto;\n\n  ", " {\n    margin: auto 0 auto auto;\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white), BREAKPOINTS.MEDIUM);
+var FooterBottomLinks = function (_a) {
+    var bottomLinks = _a.bottomLinks, copyrightText = _a.copyrightText;
+    return (React.createElement(FooterLinkSection, null,
+        React.createElement(FooterLinks, null, bottomLinks === null || bottomLinks === void 0 ? void 0 : bottomLinks.map(function (bl, i) { return (React.createElement(HyperLink, { id: "FooterLink_".concat(Math.floor(Math.random() * 999999999999)), key: i, href: bl.to, variant: "inverted" }, bl.label)); })),
+        React.createElement(Copyright, null, copyrightText)));
+};
+export default FooterBottomLinks;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/Footer/Components/FooterDropdownLinks.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { NavSection } from '../../types';
 interface FooterNavSectionProps {
     navSection: NavSection;
     width: number;
 }
-declare const FooterDropdownLinks: ({ navSection, width }: FooterNavSectionProps) => JSX.Element;
+declare const FooterDropdownLinks: ({ navSection, width }: FooterNavSectionProps) => React.JSX.Element;
 export default FooterDropdownLinks;

package/dist/Footer/Components/FooterDropdownLinks.js

@@ -1,61 +1,25 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _templateObject, _templateObject2, _templateObject3;
-import * as React from 'react';
-import styled from 'styled-components';
-import { COLORS, ComponentTextStyle, invertedFocusStyles } from '../../styles';
-import { SystemIcons } from '../../icons';
-import { ComponentMStyling, ComponentSStyling } from '../../styles';
-import { HyperLink } from '../../HyperLink';
-import { defaultOnMouseDownHandler } from '../../common';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  border-top: 1px solid ", ";\n\n  &:last-child {\n    border-bottom: 1px solid ", ";\n  }\n"])), COLORS.neutral_100, COLORS.neutral_100);
-var DropdownLinkBlock = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n\n  display: ", ";\n  justify-content: space-between;\n  width: 100%;\n  height: 48px;\n  background-color: transparent;\n  border: none;\n  padding: 0 16px;\n\n  &:hover,\n  .open {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  h3 {\n    margin: auto 0;\n    ", "\n  }\n\n  .open {\n    h3 {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  svg {\n    margin: auto 0;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white), function (props) {
-  return props.width > 768 ? 'none' : 'flex';
-}, COLORS.neutral_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, invertedFocusStyles, ComponentMStyling(ComponentTextStyle.Regular, 'inherit'), COLORS.neutral_20, COLORS.neutral_800);
-var LinkBlock = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: none;\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  &.show {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n\n    ", "\n    \n    display: flex;\n    align-items: center;\n    \n    padding: 0 16px;\n    height: 48px;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white), COLORS.neutral_20, COLORS.primary_700, invertedFocusStyles, COLORS.primary_100, COLORS.primary_800);
-var FooterDropdownLinks = function FooterDropdownLinks(_ref) {
-  var navSection = _ref.navSection,
-    width = _ref.width;
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    dropdownActive = _React$useState2[0],
-    setDropdownActive = _React$useState2[1];
-  return /*#__PURE__*/_jsxs(Wrapper, {
-    children: [/*#__PURE__*/_jsxs(DropdownLinkBlock, {
-      width: width,
-      className: dropdownActive ? 'open' : '',
-      onMouseDown: defaultOnMouseDownHandler,
-      onClick: function onClick() {
-        return setDropdownActive(!dropdownActive);
-      },
-      children: [/*#__PURE__*/_jsx("h3", {
-        children: navSection.header
-      }), dropdownActive ? /*#__PURE__*/_jsx(SystemIcons.ChevronUp, {
-        size: "24px"
-      }) : /*#__PURE__*/_jsx(SystemIcons.ChevronDown, {
-        size: "24px"
-      })]
-    }), /*#__PURE__*/_jsx(LinkBlock, {
-      width: width,
-      className: dropdownActive ? 'show' : '',
-      children: navSection.links.map(function (item, index) {
-        return /*#__PURE__*/_jsx(HyperLink, {
-          id: "dropdownlink_".concat(Math.floor(Math.random() * 999999999999)),
-          variant: 'inverted',
-          href: item.to,
-          target: item.target || '_blank',
-          rel: "noreferrer noopener",
-          children: item.label
-        }, index);
-      })
-    })]
-  });
-};
-FooterDropdownLinks.propTypes = {
-  width: _pt.number.isRequired
-};
-export default FooterDropdownLinks;
-//# sourceMappingURL=FooterDropdownLinks.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentTextStyle, invertedFocusStyles } from '../../styles';
+import { SystemIcons } from '../../icons';
+import { ComponentMStyling, ComponentSStyling } from '../../styles';
+import { HyperLink } from '../../HyperLink';
+import { defaultOnMouseDownHandler } from '../../common';
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  border-top: 1px solid ", ";\n\n  &:last-child {\n    border-bottom: 1px solid ", ";\n  }\n"], ["\n  width: 100%;\n  border-top: 1px solid ", ";\n\n  &:last-child {\n    border-bottom: 1px solid ", ";\n  }\n"])), COLORS.neutral_100, COLORS.neutral_100);
+var DropdownLinkBlock = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n\n  display: ", ";\n  justify-content: space-between;\n  width: 100%;\n  height: 48px;\n  background-color: transparent;\n  border: none;\n  padding: 0 16px;\n\n  &:hover,\n  .open {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  h3 {\n    margin: auto 0;\n    ", "\n  }\n\n  .open {\n    h3 {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  svg {\n    margin: auto 0;\n  }\n"], ["\n  ", "\n\n  display: ", ";\n  justify-content: space-between;\n  width: 100%;\n  height: 48px;\n  background-color: transparent;\n  border: none;\n  padding: 0 16px;\n\n  &:hover,\n  .open {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  h3 {\n    margin: auto 0;\n    ", "\n  }\n\n  .open {\n    h3 {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  svg {\n    margin: auto 0;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white), function (props) { return (props.width > 768 ? 'none' : 'flex'); }, COLORS.neutral_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, invertedFocusStyles, ComponentMStyling(ComponentTextStyle.Regular, 'inherit'), COLORS.neutral_20, COLORS.neutral_800);
+var LinkBlock = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: none;\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  &.show {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n\n    ", "\n    \n    display: flex;\n    align-items: center;\n    \n    padding: 0 16px;\n    height: 48px;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"], ["\n  display: none;\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  &.show {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n\n    ", "\n    \n    display: flex;\n    align-items: center;\n    \n    padding: 0 16px;\n    height: 48px;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white), COLORS.neutral_20, COLORS.primary_700, invertedFocusStyles, COLORS.primary_100, COLORS.primary_800);
+var FooterDropdownLinks = function (_a) {
+    var navSection = _a.navSection, width = _a.width;
+    var _b = React.useState(false), dropdownActive = _b[0], setDropdownActive = _b[1];
+    return (React.createElement(Wrapper, null,
+        React.createElement(DropdownLinkBlock, { width: width, className: dropdownActive ? 'open' : '', onMouseDown: defaultOnMouseDownHandler, onClick: function () { return setDropdownActive(!dropdownActive); } },
+            React.createElement("h3", null, navSection.header),
+            dropdownActive ? React.createElement(SystemIcons.ChevronUp, { size: "24px" }) : React.createElement(SystemIcons.ChevronDown, { size: "24px" })),
+        React.createElement(LinkBlock, { width: width, className: dropdownActive ? 'show' : '' }, navSection.links.map(function (item, index) { return (React.createElement(HyperLink, { key: index, id: "dropdownlink_".concat(Math.floor(Math.random() * 999999999999)), variant: 'inverted', href: item.to, target: item.target || '_blank', rel: "noreferrer noopener" }, item.label)); }))));
+};
+export default FooterDropdownLinks;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/Footer/Components/FooterNavSection.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { NavOptions } from '../../types';
 interface FooterNavSectionProps {
     navOptions: NavOptions;
     mainId: string;
 }
-declare const FooterNavSection: ({ navOptions }: FooterNavSectionProps) => JSX.Element;
+declare const FooterNavSection: ({ navOptions }: FooterNavSectionProps) => React.JSX.Element;
 export default FooterNavSection;

package/dist/Footer/Components/FooterNavSection.js

@@ -1,62 +1,32 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _templateObject, _templateObject2;
-import * as React from 'react';
-import styled from 'styled-components';
-import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles';
-import FooterDropdownLinks from './FooterDropdownLinks';
-import { ComponentLStyling, ComponentSStyling } from '../../styles/typography';
-import { HyperLink } from '../../HyperLink';
-import { hasWindow } from '../../utils/utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var NavSection = styled.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  flex-flow: flex-start;\n  color: white;\n  margin-bottom: 12px;\n"])));
-var LinkBlock = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: ", ";\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  ", " {\n    padding: 0 24px 24px 0;\n    width: calc(50% - 24px);\n  }\n\n  ", " {\n    width: calc(33% - 24px);\n  }\n  ", " {\n    padding: 0 32px 32px 0;\n    width: calc(33% - 32px);\n  }\n\n  h3 {\n    ", "\n  }\n\n  a {\n    padding: 8px 0px;\n    ", "\n  }\n"])), function (props) {
-  return props.width <= 768 ? 'none' : 'flex';
-}, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, BREAKPOINTS.LARGE, ComponentLStyling(ComponentTextStyle.Regular, 'inherit'), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white));
-var FooterNavSection = function FooterNavSection(_ref) {
-  var _navOptions$sections;
-  var navOptions = _ref.navOptions;
-  var _React$useState = React.useState(hasWindow() ? window.innerWidth : -1),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    width = _React$useState2[0],
-    setWidth = _React$useState2[1];
-  React.useEffect(function () {
-    function handleResize() {
-      setWidth(window.innerWidth);
-    }
-    window.addEventListener('resize', handleResize);
-    return function () {
-      return window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-  return /*#__PURE__*/_jsx(NavSection, {
-    children: (_navOptions$sections = navOptions.sections) === null || _navOptions$sections === void 0 ? void 0 : _navOptions$sections.map(function (no, index) {
-      return width > 768 ? /*#__PURE__*/_jsxs(LinkBlock, {
-        width: width,
-        children: [/*#__PURE__*/_jsx("h3", {
-          children: no.header
-        }), no.links.map(function (link, index) {
-          return /*#__PURE__*/_jsx(HyperLink, {
-            id: "dropdownlink_".concat(Math.floor(Math.random() * 999999999999)),
-            variant: 'inverted',
-            href: link.to,
-            target: link.target || '_blank',
-            rel: "noreferrer noopener",
-            children: link.label
-          }, index);
-        })]
-      }, "LinkBlock_".concat(index)) : /*#__PURE__*/_jsx(FooterDropdownLinks, {
-        "data-testid": 'footerDropLinks',
-        navSection: no,
-        width: width
-      }, "LinkBlockDropdown_".concat(index));
-    })
-  });
-};
-FooterNavSection.propTypes = {
-  mainId: _pt.string.isRequired
-};
-export default FooterNavSection;
-//# sourceMappingURL=FooterNavSection.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles';
+import FooterDropdownLinks from './FooterDropdownLinks';
+import { ComponentLStyling, ComponentSStyling } from '../../styles/typography';
+import { HyperLink } from '../../HyperLink';
+import { hasWindow } from '../../utils/utils';
+var NavSection = styled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  flex-flow: flex-start;\n  color: white;\n  margin-bottom: 12px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  flex-flow: flex-start;\n  color: white;\n  margin-bottom: 12px;\n"])));
+var LinkBlock = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: ", ";\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  ", " {\n    padding: 0 24px 24px 0;\n    width: calc(50% - 24px);\n  }\n\n  ", " {\n    width: calc(33% - 24px);\n  }\n  ", " {\n    padding: 0 32px 32px 0;\n    width: calc(33% - 32px);\n  }\n\n  h3 {\n    ", "\n  }\n\n  a {\n    padding: 8px 0px;\n    ", "\n  }\n"], ["\n  display: ", ";\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  ", " {\n    padding: 0 24px 24px 0;\n    width: calc(50% - 24px);\n  }\n\n  ", " {\n    width: calc(33% - 24px);\n  }\n  ", " {\n    padding: 0 32px 32px 0;\n    width: calc(33% - 32px);\n  }\n\n  h3 {\n    ", "\n  }\n\n  a {\n    padding: 8px 0px;\n    ", "\n  }\n"])), function (props) { return (props.width <= 768 ? 'none' : 'flex'); }, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, BREAKPOINTS.LARGE, ComponentLStyling(ComponentTextStyle.Regular, 'inherit'), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white));
+var FooterNavSection = function (_a) {
+    var _b;
+    var navOptions = _a.navOptions;
+    var _c = React.useState(hasWindow() ? window.innerWidth : -1), width = _c[0], setWidth = _c[1];
+    React.useEffect(function () {
+        function handleResize() {
+            setWidth(window.innerWidth);
+        }
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, []);
+    return (React.createElement(NavSection, null, (_b = navOptions.sections) === null || _b === void 0 ? void 0 : _b.map(function (no, index) {
+        return width > 768 ? (React.createElement(LinkBlock, { key: "LinkBlock_".concat(index), width: width },
+            React.createElement("h3", null, no.header),
+            no.links.map(function (link, index) { return (React.createElement(HyperLink, { key: index, id: "dropdownlink_".concat(Math.floor(Math.random() * 999999999999)), variant: 'inverted', href: link.to, target: link.target || '_blank', rel: "noreferrer noopener" }, link.label)); }))) : (React.createElement(FooterDropdownLinks, { "data-testid": 'footerDropLinks', key: "LinkBlockDropdown_".concat(index), navSection: no, width: width }));
+    })));
+};
+export default FooterNavSection;
+var templateObject_1, templateObject_2;

package/dist/Footer/Components/FooterNewsletterAndSocialSection.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 interface FooterNewsletterAndSocialSection {
     actionOnNewsletterSignup?: (email: string) => void;
     newsletterLabel: string;
     placeholderEmail?: string;
 }
-declare const FooterNewsletterAndSocialSection: ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => JSX.Element;
+declare const FooterNewsletterAndSocialSection: ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => React.JSX.Element;
 export default FooterNewsletterAndSocialSection;

package/dist/Footer/Components/FooterNewsletterAndSocialSection.js

@@ -1,95 +1,42 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-import * as React from 'react';
-import styled from 'styled-components';
-import { BREAKPOINTS, COLORS, invertedFocusStyles } from '../../styles';
-import { TextField } from '../../InputFields';
-import { SystemIcons } from '../../icons';
-import { IconButton } from '../../Button';
-import { ComponentLStyling, ComponentTextStyle, ComponentXSStyling, ComponentXXSStyling } from '../../styles';
-import { InputFieldStyling } from '../../InputFields';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var NewsletterAndSocial = styled.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ", " {\n    flex-direction: row;\n  }\n"])), BREAKPOINTS.MEDIUM);
-var NewsletterEmailSection = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ", " {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ", "\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ", " {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n"])), BREAKPOINTS.MEDIUM, ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white), BREAKPOINTS.MEDIUM);
-var NewsletterEmail = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin: 2px auto 0;\n\n  ", " {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n\n  ", " {\n    &.focus-visible {\n      ", "\n    }\n  }\n"])), BREAKPOINTS.MEDIUM, InputFieldStyling, invertedFocusStyles);
-var NewsletterButton = styled.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ", "\n\n  ", " {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  &:focus {\n    ", "\n  }\n"])), COLORS.white, ComponentLStyling(ComponentTextStyle.Bold, COLORS.white), BREAKPOINTS.MEDIUM, invertedFocusStyles);
-var SocialMedia = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ", "\n  }\n\n  ", " {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n"])), COLORS.white, ComponentXSStyling(ComponentTextStyle.Regular, 'inherit'), BREAKPOINTS.MEDIUM);
-var SocialMediaButtons = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ", ";\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  a {\n    &:focus {\n      ", "\n    }\n  }\n\n  ", " {\n    justify-content: flex-end;\n  }\n"])), COLORS.white, COLORS.white, COLORS.white, COLORS.white, COLORS.neutral_600, COLORS.primary_800, COLORS.primary_100, invertedFocusStyles, BREAKPOINTS.MEDIUM);
-var FooterNewsletterAndSocialSection = function FooterNewsletterAndSocialSection(_ref) {
-  var actionOnNewsletterSignup = _ref.actionOnNewsletterSignup,
-    newsletterLabel = _ref.newsletterLabel,
-    placeholderEmail = _ref.placeholderEmail;
-  var _React$useState = React.useState(''),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    emailInput = _React$useState2[0],
-    setEmailInput = _React$useState2[1];
-  return /*#__PURE__*/_jsxs(NewsletterAndSocial, {
-    children: [/*#__PURE__*/_jsxs(NewsletterEmailSection, {
-      children: [/*#__PURE__*/_jsx("label", {
-        children: newsletterLabel
-      }), /*#__PURE__*/_jsxs(NewsletterEmail, {
-        children: [/*#__PURE__*/_jsx(TextField, {
-          id: "NewsletterEmail",
-          withoutBorder: true,
-          placeholder: placeholderEmail,
-          value: emailInput,
-          onChange: function onChange(value) {
-            return setEmailInput(value);
-          }
-        }), /*#__PURE__*/_jsx(NewsletterButton, {
-          "data-testid": 'newsBtn',
-          onClick: function onClick(e) {
-            return actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value);
-          },
-          children: "Sign up"
-        })]
-      })]
-    }), /*#__PURE__*/_jsxs(SocialMedia, {
-      children: [/*#__PURE__*/_jsx("h4", {
-        children: "Follow us on social media"
-      }), /*#__PURE__*/_jsxs(SocialMediaButtons, {
-        children: [/*#__PURE__*/_jsx("a", {
-          href: "https://www.facebook.com/LaerdalMedical/",
-          target: "_blank",
-          rel: "noreferrer noopener",
-          children: /*#__PURE__*/_jsx(IconButton, {
-            variant: "secondary",
-            action: function action() {},
-            tabIndex: -1,
-            children: /*#__PURE__*/_jsx(SystemIcons.Facebook, {})
-          })
-        }), /*#__PURE__*/_jsx("a", {
-          href: "https://twitter.com/laerdalmedical",
-          target: "_blank",
-          rel: "noreferrer noopener",
-          children: /*#__PURE__*/_jsx(IconButton, {
-            variant: "secondary",
-            action: function action() {},
-            tabIndex: -1,
-            children: /*#__PURE__*/_jsx(SystemIcons.Twitter, {})
-          })
-        }), /*#__PURE__*/_jsx("a", {
-          href: "https://www.youtube.com/user/LaerdalMedical",
-          target: "_blank",
-          rel: "noreferrer noopener",
-          children: /*#__PURE__*/_jsx(IconButton, {
-            variant: "secondary",
-            action: function action() {},
-            tabIndex: -1,
-            children: /*#__PURE__*/_jsx(SystemIcons.Youtube, {})
-          })
-        })]
-      })]
-    })]
-  });
-};
-FooterNewsletterAndSocialSection.propTypes = {
-  actionOnNewsletterSignup: _pt.func,
-  newsletterLabel: _pt.string.isRequired,
-  placeholderEmail: _pt.string
-};
-export default FooterNewsletterAndSocialSection;
-//# sourceMappingURL=FooterNewsletterAndSocialSection.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS, invertedFocusStyles } from '../../styles';
+import { TextField } from '../../InputFields';
+import { SystemIcons } from '../../icons';
+import { IconButton } from '../../Button';
+import { ComponentLStyling, ComponentTextStyle, ComponentXSStyling, ComponentXXSStyling } from '../../styles';
+import { InputFieldStyling } from '../../InputFields';
+var NewsletterAndSocial = styled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ", " {\n    flex-direction: row;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ", " {\n    flex-direction: row;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var NewsletterEmailSection = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ", " {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ", "\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ", " {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n"], ["\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ", " {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ", "\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ", " {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n"])), BREAKPOINTS.MEDIUM, ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white), BREAKPOINTS.MEDIUM);
+var NewsletterEmail = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin: 2px auto 0;\n\n  ", " {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n\n  ", " {\n    &.focus-visible {\n      ", "\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin: 2px auto 0;\n\n  ", " {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n\n  ", " {\n    &.focus-visible {\n      ", "\n    }\n  }\n"])), BREAKPOINTS.MEDIUM, InputFieldStyling, invertedFocusStyles);
+var NewsletterButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ", "\n\n  ", " {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  &:focus {\n    ", "\n  }\n"], ["\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ", "\n\n  ", " {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  &:focus {\n    ", "\n  }\n"])), COLORS.white, ComponentLStyling(ComponentTextStyle.Bold, COLORS.white), BREAKPOINTS.MEDIUM, invertedFocusStyles);
+var SocialMedia = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: ", ";\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ", "\n  }\n\n  ", " {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n"], ["\n  color: ", ";\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ", "\n  }\n\n  ", " {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n"])), COLORS.white, ComponentXSStyling(ComponentTextStyle.Regular, 'inherit'), BREAKPOINTS.MEDIUM);
+var SocialMediaButtons = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ", ";\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  a {\n    &:focus {\n      ", "\n    }\n  }\n\n  ", " {\n    justify-content: flex-end;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ", ";\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  a {\n    &:focus {\n      ", "\n    }\n  }\n\n  ", " {\n    justify-content: flex-end;\n  }\n"])), COLORS.white, COLORS.white, COLORS.white, COLORS.white, COLORS.neutral_600, COLORS.primary_800, COLORS.primary_100, invertedFocusStyles, BREAKPOINTS.MEDIUM);
+var FooterNewsletterAndSocialSection = function (_a) {
+    var actionOnNewsletterSignup = _a.actionOnNewsletterSignup, newsletterLabel = _a.newsletterLabel, placeholderEmail = _a.placeholderEmail;
+    var _b = React.useState(''), emailInput = _b[0], setEmailInput = _b[1];
+    return (React.createElement(NewsletterAndSocial, null,
+        React.createElement(NewsletterEmailSection, null,
+            React.createElement("label", null, newsletterLabel),
+            React.createElement(NewsletterEmail, null,
+                React.createElement(TextField, { id: "NewsletterEmail", withoutBorder: true, placeholder: placeholderEmail, value: emailInput, onChange: function (value) { return setEmailInput(value); } }),
+                React.createElement(NewsletterButton, { "data-testid": 'newsBtn', onClick: function (e) { return actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value); } }, "Sign up"))),
+        React.createElement(SocialMedia, null,
+            React.createElement("h4", null, "Follow us on social media"),
+            React.createElement(SocialMediaButtons, null,
+                React.createElement("a", { href: "https://www.facebook.com/LaerdalMedical/", target: "_blank", rel: "noreferrer noopener" },
+                    React.createElement(IconButton, { variant: "secondary", action: function () { }, tabIndex: -1 },
+                        React.createElement(SystemIcons.Facebook, null))),
+                React.createElement("a", { href: "https://twitter.com/laerdalmedical", target: "_blank", rel: "noreferrer noopener" },
+                    React.createElement(IconButton, { variant: "secondary", action: function () { }, tabIndex: -1 },
+                        React.createElement(SystemIcons.Twitter, null))),
+                React.createElement("a", { href: "https://www.youtube.com/user/LaerdalMedical", target: "_blank", rel: "noreferrer noopener" },
+                    React.createElement(IconButton, { variant: "secondary", action: function () { }, tabIndex: -1 },
+                        React.createElement(SystemIcons.Youtube, null)))))));
+};
+export default FooterNewsletterAndSocialSection;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/Footer/Components/FooterTop.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 interface FooterTopProps {
     sitename?: string;
     showBetaTag?: boolean;
     toTopText: string;
 }
-declare const FooterTop: ({ sitename, showBetaTag, toTopText }: FooterTopProps) => JSX.Element;
+declare const FooterTop: ({ sitename, showBetaTag, toTopText }: FooterTopProps) => React.JSX.Element;
 export default FooterTop;

package/dist/Footer/Components/FooterTop.js

@@ -1,60 +1,34 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _templateObject, _templateObject2;
-import * as React from 'react';
-import styled from 'styled-components';
-import animateScrollTo from 'animated-scroll-to';
-import { COLORS, invertedFocusStyles } from '../../styles';
-import Logo from '../../GlobalNavigationBar/Logo';
-import { SystemIcons } from '../../icons';
-import { ComponentTextStyle, ComponentXSStyling } from '../../styles';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var FooterTopSection = styled.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: 8px;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 16px;\n"])));
-var ToTop = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin: auto 0 auto auto;\n  border-radius: 4px;\n  height: 48px;\n  width: 48px;\n  padding: 8px;\n\n  svg {\n    margin: 0 auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  span {\n    margin: 14px auto 0 auto;\n    ", "\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n\n  &:focus:not(:disabled) {\n    ", "\n  }\n\n  &:active:not(:disabled) {\n    background: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n"])), ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit'), COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, invertedFocusStyles, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800);
-var FooterTop = function FooterTop(_ref) {
-  var sitename = _ref.sitename,
-    showBetaTag = _ref.showBetaTag,
-    toTopText = _ref.toTopText;
-  var isPressingEnter = function isPressingEnter(e) {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      e.stopPropagation();
-      return true;
-    }
-    return false;
-  };
-  var action = function action() {
-    animateScrollTo(0);
-  };
-  return /*#__PURE__*/_jsxs(FooterTopSection, {
-    children: [/*#__PURE__*/_jsx(Logo, {
-      name: sitename || '',
-      showBetaTag: showBetaTag,
-      color: COLORS.white,
-      inverted: true,
-      betaTagBackgroundColor: COLORS.white,
-      betaTagColor: COLORS.neutral_800
-    }), /*#__PURE__*/_jsxs(ToTop, {
-      "data-testid": 'toTopNavigation',
-      tabIndex: 0,
-      onKeyDown: function onKeyDown(e) {
-        return isPressingEnter(e) ? action() : null;
-      },
-      onClick: action,
-      children: [/*#__PURE__*/_jsx(SystemIcons.ArrowLineUp, {
-        size: "24px",
-        color: COLORS.white
-      }), /*#__PURE__*/_jsx("span", {
-        children: toTopText
-      })]
-    })]
-  });
-};
-FooterTop.propTypes = {
-  sitename: _pt.string,
-  showBetaTag: _pt.bool,
-  toTopText: _pt.string.isRequired
-};
-export default FooterTop;
-//# sourceMappingURL=FooterTop.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import animateScrollTo from 'animated-scroll-to';
+import { COLORS, invertedFocusStyles } from '../../styles';
+import Logo from '../../GlobalNavigationBar/Logo';
+import { SystemIcons } from '../../icons';
+import { ComponentTextStyle, ComponentXSStyling } from '../../styles';
+var FooterTopSection = styled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-height: 8px;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 16px;\n"], ["\n  min-height: 8px;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 16px;\n"])));
+var ToTop = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin: auto 0 auto auto;\n  border-radius: 4px;\n  height: 48px;\n  width: 48px;\n  padding: 8px;\n\n  svg {\n    margin: 0 auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  span {\n    margin: 14px auto 0 auto;\n    ", "\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n\n  &:focus:not(:disabled) {\n    ", "\n  }\n\n  &:active:not(:disabled) {\n    background: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin: auto 0 auto auto;\n  border-radius: 4px;\n  height: 48px;\n  width: 48px;\n  padding: 8px;\n\n  svg {\n    margin: 0 auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  span {\n    margin: 14px auto 0 auto;\n    ", "\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n\n  &:focus:not(:disabled) {\n    ", "\n  }\n\n  &:active:not(:disabled) {\n    background: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n"])), ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit'), COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, invertedFocusStyles, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800);
+var FooterTop = function (_a) {
+    var sitename = _a.sitename, showBetaTag = _a.showBetaTag, toTopText = _a.toTopText;
+    var isPressingEnter = function (e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            e.stopPropagation();
+            return true;
+        }
+        return false;
+    };
+    var action = function () {
+        animateScrollTo(0);
+    };
+    return (React.createElement(FooterTopSection, null,
+        React.createElement(Logo, { name: sitename || '', showBetaTag: showBetaTag, color: COLORS.white, inverted: true, betaTagBackgroundColor: COLORS.white, betaTagColor: COLORS.neutral_800 }),
+        React.createElement(ToTop, { "data-testid": 'toTopNavigation', tabIndex: 0, onKeyDown: function (e) { return (isPressingEnter(e) ? action() : null); }, onClick: action },
+            React.createElement(SystemIcons.ArrowLineUp, { size: "24px", color: COLORS.white }),
+            React.createElement("span", null, toTopText))));
+};
+export default FooterTop;
+var templateObject_1, templateObject_2;

package/dist/Footer/Footer.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const Footer: ({ children }: any) => JSX.Element;
+import * as React from 'react';
+declare const Footer: ({ children }: any) => React.JSX.Element;
 export default Footer;