@laerdal/life-react-components 1.4.0 → 1.4.1-dev.11

package/dist/esm/Footer/Components/FooterNewsletterAndSocialSection.js

@@ -1,4 +1,9 @@
+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 } from '../../styles';
@@ -6,182 +11,83 @@ import { TextField } from '../../InputFields';
 import { Facebook, Twitter, Youtube } from '../../icons/systemicons/SystemIcons';
 import { IconButton } from '../../Button';
 import { ComponentLStyling, ComponentTextStyle, ComponentXSStyling, ComponentXXSStyling } from '../../styles/typography';
-const NewsletterAndSocial = styled.section`
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 16px;
-
-  ${BREAKPOINTS.MEDIUM} {
-    flex-direction: row;
-  }
-`;
-const NewsletterEmailSection = styled.div`
-  width: 100%;
-  margin: 16px auto 0 auto;
-
-  ${BREAKPOINTS.MEDIUM} {
-    width: 60%;
-    margin: 16px 0 0 0;
-  }
-
-  label {
-    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white)}
-    margin-bottom: 2px;
-  }
-  div div {
-    width: 100%;
-    ${BREAKPOINTS.MEDIUM} {
-      width: calc(100% - 82px);
-      width: 288px;
-    }
-  }
-  input {
-    height: 48px;
-  }
-`;
-const NewsletterEmail = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-top: 2px;
-  margin: 2px auto 0 auto;
-
-  ${BREAKPOINTS.MEDIUM} {
-    margin: 2px 0 0 0;
-    flex-direction: row;
-  }
-`;
-const NewsletterButton = styled.button`
-  background: transparent;
-  width: 100%;
-  height: 40px;
-  border: 2px solid ${COLORS.white};
-  box-sizing: border-box;
-  border-radius: 8px;
-  margin: 8px 0 4px 0;
-
-  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.white)}
-
-  ${BREAKPOINTS.MEDIUM} {
-    width: 94px;
-    margin: auto 0 4px 8px;
-  }
-
-  &:hover {
-    cursor: pointer;
-  }
-`;
-const SocialMedia = styled.div`
-  color: ${COLORS.white};
-  margin: 0 auto;
-
-  button div {
-    box-sizing: border-box;
-    border-radius: 4px;
-  }
-
-  h4 {
-    margin-top: 16px;
-    margin-bottom: 8px;
-    
-    ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}
-  }
-
-  ${BREAKPOINTS.MEDIUM} {
-    margin: 0 0 0 auto;
-    button {
-      margin: 0 0 0 12px;
-    }
-  }
-`;
-const SocialMediaButtons = styled.div`
-  display: flex;
-  justify-content: center;
-
-  button div {
-    display: flex;
-    background-color: transparent;
-    color: ${COLORS.white};
-    margin: 0 0 0 20px;
-
-    svg {
-      fill: ${COLORS.white};
-      path {
-        fill: ${COLORS.white};
-      }
-    }
-
-    &:first-child {
-      margin: 0;
-    }
-    &:hover {
-      background-color: ${COLORS.white};
-      color: ${COLORS.neutral_600};
-    }
-    &:active {
-      background-color: ${COLORS.primary_800};
-      color: ${COLORS.primary_100};
-    }
-  }
-  a {
-    &:focus {
-      outline: none;
-      div {
-        background-color: ${COLORS.white};
-        color: ${COLORS.neutral_600};
-        outline: none;
-        box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
-      }
-      div svg path,
-      div svg {
-        fill: ${COLORS.neutral_600};
-      }
-    }
-  }
-
-  ${BREAKPOINTS.MEDIUM} {
-    justify-content: flex-end;
-  }
-`;
-
-const FooterNewsletterAndSocialSection = ({
-  actionOnNewsletterSignup,
-  newsletterLabel,
-  placeholderEmail
-}) => {
-  const [emailInput, setEmailInput] = React.useState('');
-  return /*#__PURE__*/React.createElement(NewsletterAndSocial, null, /*#__PURE__*/React.createElement(NewsletterEmailSection, null, /*#__PURE__*/React.createElement("label", null, newsletterLabel), /*#__PURE__*/React.createElement(NewsletterEmail, null, /*#__PURE__*/React.createElement(TextField, {
-    id: "NewsletterEmail",
-    withoutBorder: true,
-    placeholder: placeholderEmail,
-    value: emailInput,
-    onChange: value => setEmailInput(value)
-  }), /*#__PURE__*/React.createElement(NewsletterButton, {
-    onClick: e => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)
-  }, "Sign up"))), /*#__PURE__*/React.createElement(SocialMedia, null, /*#__PURE__*/React.createElement("h4", null, "Follow us on social media"), /*#__PURE__*/React.createElement(SocialMediaButtons, null, /*#__PURE__*/React.createElement("a", {
-    href: "https://www.facebook.com/LaerdalMedical/",
-    target: "_blank",
-    rel: "noreferrer noopener"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    variant: "secondary",
-    action: () => {},
-    tabIndex: -1
-  }, /*#__PURE__*/React.createElement(Facebook, null))), /*#__PURE__*/React.createElement("a", {
-    href: "https://twitter.com/laerdalmedical",
-    target: "_blank",
-    rel: "noreferrer noopener"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    variant: "secondary",
-    action: () => {},
-    tabIndex: -1
-  }, /*#__PURE__*/React.createElement(Twitter, null))), /*#__PURE__*/React.createElement("a", {
-    href: "https://www.youtube.com/user/LaerdalMedical",
-    target: "_blank",
-    rel: "noreferrer noopener"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    variant: "secondary",
-    action: () => {},
-    tabIndex: -1
-  }, /*#__PURE__*/React.createElement(Youtube, null))))));
+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-top: 2px;\n  margin: 2px auto 0 auto;\n\n  ", " {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n"])), BREAKPOINTS.MEDIUM);
+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"])), COLORS.white, ComponentLStyling(ComponentTextStyle.Bold, COLORS.white), BREAKPOINTS.MEDIUM);
+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      outline: none;\n      div {\n        background-color: ", ";\n        color: ", ";\n        outline: none;\n        box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n      }\n      div svg path,\n      div svg {\n        fill: ", ";\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, COLORS.white, COLORS.neutral_600, COLORS.primary_500, COLORS.neutral_600, 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, {
+          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(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(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(Youtube, {})
+          })
+        })]
+      })]
+    })]
+  });
 };
 
 FooterNewsletterAndSocialSection.propTypes = {

package/dist/esm/Footer/Components/FooterNewsletterAndSocialSection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","TextField","Facebook","Twitter","Youtube","IconButton","ComponentLStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","NewsletterAndSocial","section","MEDIUM","NewsletterEmailSection","div","Regular","white","NewsletterEmail","NewsletterButton","button","Bold","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","primary_500","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","emailInput","setEmailInput","useState","value","e","target"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS} from '../../styles';\nimport {TextField} from '../../InputFields';\nimport {Facebook, Twitter, Youtube} from '../../icons/systemicons/SystemIcons';\nimport {IconButton} from '../../Button';\nimport {\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../../styles/typography';\n\nconst NewsletterAndSocial = styled.section`\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n  }\n`;\n\nconst NewsletterEmailSection = styled.div`\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white)}\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ${BREAKPOINTS.MEDIUM} {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n`;\n\nconst NewsletterEmail = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin-top: 2px;\n  margin: 2px auto 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n`;\n\nconst NewsletterButton = styled.button`\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ${COLORS.white};\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n`;\n\nconst SocialMedia = styled.div`\n  color: ${COLORS.white};\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    ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n`;\n\nconst SocialMediaButtons = styled.div`\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ${COLORS.white};\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ${COLORS.white};\n      path {\n        fill: ${COLORS.white};\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_600};\n    }\n    &:active {\n      background-color: ${COLORS.primary_800};\n      color: ${COLORS.primary_100};\n    }\n  }\n  a {\n    &:focus {\n      outline: none;\n      div {\n        background-color: ${COLORS.white};\n        color: ${COLORS.neutral_600};\n        outline: none;\n        box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n      }\n      div svg path,\n      div svg {\n        fill: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    justify-content: flex-end;\n  }\n`;\n\ninterface FooterNewsletterAndSocialSection {\n  actionOnNewsletterSignup?: (email: string) => void;\n  newsletterLabel: string;\n  placeholderEmail?: string;\n}\n\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\n  const [emailInput, setEmailInput] = React.useState<string>('');\n  return (\n    <NewsletterAndSocial>\n      <NewsletterEmailSection>\n        <label>{newsletterLabel}</label>\n        <NewsletterEmail>\n          <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\n          <NewsletterButton onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\n        </NewsletterEmail>\n      </NewsletterEmailSection>\n      <SocialMedia>\n        <h4>Follow us on social media</h4>\n        <SocialMediaButtons>\n          <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Facebook />\n            </IconButton>\n          </a>\n          <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Twitter />\n            </IconButton>\n          </a>\n          <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Youtube />\n            </IconButton>\n          </a>\n        </SocialMediaButtons>\n      </SocialMedia>\n    </NewsletterAndSocial>\n  );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"file":"FooterNewsletterAndSocialSection.js"}
+{"version":3,"sources":["../../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","TextField","Facebook","Twitter","Youtube","IconButton","ComponentLStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","NewsletterAndSocial","section","MEDIUM","NewsletterEmailSection","div","Regular","white","NewsletterEmail","NewsletterButton","button","Bold","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","primary_500","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","useState","emailInput","setEmailInput","value","e","target"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS} from '../../styles';\nimport {TextField} from '../../InputFields';\nimport {Facebook, Twitter, Youtube} from '../../icons/systemicons/SystemIcons';\nimport {IconButton} from '../../Button';\nimport {\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../../styles/typography';\n\nconst NewsletterAndSocial = styled.section`\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n  }\n`;\n\nconst NewsletterEmailSection = styled.div`\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white)}\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ${BREAKPOINTS.MEDIUM} {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n`;\n\nconst NewsletterEmail = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin-top: 2px;\n  margin: 2px auto 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n`;\n\nconst NewsletterButton = styled.button`\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ${COLORS.white};\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n`;\n\nconst SocialMedia = styled.div`\n  color: ${COLORS.white};\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    ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n`;\n\nconst SocialMediaButtons = styled.div`\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ${COLORS.white};\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ${COLORS.white};\n      path {\n        fill: ${COLORS.white};\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_600};\n    }\n    &:active {\n      background-color: ${COLORS.primary_800};\n      color: ${COLORS.primary_100};\n    }\n  }\n  a {\n    &:focus {\n      outline: none;\n      div {\n        background-color: ${COLORS.white};\n        color: ${COLORS.neutral_600};\n        outline: none;\n        box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n      }\n      div svg path,\n      div svg {\n        fill: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    justify-content: flex-end;\n  }\n`;\n\ninterface FooterNewsletterAndSocialSection {\n  actionOnNewsletterSignup?: (email: string) => void;\n  newsletterLabel: string;\n  placeholderEmail?: string;\n}\n\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\n  const [emailInput, setEmailInput] = React.useState<string>('');\n  return (\n    <NewsletterAndSocial>\n      <NewsletterEmailSection>\n        <label>{newsletterLabel}</label>\n        <NewsletterEmail>\n          <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\n          <NewsletterButton onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\n        </NewsletterEmail>\n      </NewsletterEmailSection>\n      <SocialMedia>\n        <h4>Follow us on social media</h4>\n        <SocialMediaButtons>\n          <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Facebook />\n            </IconButton>\n          </a>\n          <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Twitter />\n            </IconButton>\n          </a>\n          <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Youtube />\n            </IconButton>\n          </a>\n        </SocialMediaButtons>\n      </SocialMedia>\n    </NewsletterAndSocial>\n  );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"file":"FooterNewsletterAndSocialSection.js"}

package/dist/esm/Footer/Components/FooterTop.js

@@ -1,4 +1,8 @@
+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';
@@ -6,69 +10,17 @@ import { COLORS } from '../../styles';
 import Logo from '../../GlobalNavigationBar/Logo';
 import { ArrowLineUp } from '../../icons/systemicons/SystemIcons';
 import { ComponentTextStyle, ComponentXSStyling } from '../../styles/typography';
-const FooterTopSection = styled.section`
-  min-height: 8px;
-  color: white;
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 16px;
-`;
-const ToTop = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin: auto 0 auto auto;
-  border-radius: 4px;
-  height: 48px;
-  width: 48px;
-  padding: 8px;
-
-  svg {
-    margin: 0 auto;
-  }
-
-  &:hover {
-    cursor: pointer;
-  }
-  span {
-    margin: 14px auto 0 auto;
-    ${ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit')}
-  }
-
-  &:hover:not(:disabled) {
-    background-color: ${COLORS.primary_20};
-    svg path,
-    svg {
-      fill: ${COLORS.primary_700};
-    }
-    span {
-      color: ${COLORS.primary_700};
-    }
-  }
-
-  &:focus:not(:disabled) {
-    outline: none;
-    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
-  }
+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    outline: none;\n    box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n  }\n\n  &:active:not(:disabled) {\n    background: ", ";\n    box-shadow: none;\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, COLORS.primary_500, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800);
 
-  &:active:not(:disabled) {
-    background: ${COLORS.primary_100};
-    box-shadow: none;
-    svg path,
-    svg {
-      fill: ${COLORS.primary_800};
-    }
-    span {
-      color: ${COLORS.primary_800};
-    }
-  }
-`;
+var FooterTop = function FooterTop(_ref) {
+  var sitename = _ref.sitename,
+      showBetaTag = _ref.showBetaTag,
+      toTopText = _ref.toTopText;
 
-const FooterTop = ({
-  sitename,
-  showBetaTag,
-  toTopText
-}) => {
-  const isPressingEnter = e => {
+  var isPressingEnter = function isPressingEnter(e) {
     if (e.key === 'Enter') {
       e.preventDefault();
       e.stopPropagation();
@@ -78,24 +30,31 @@ const FooterTop = ({
     return false;
   };
 
-  const action = () => {
+  var action = function action() {
     animateScrollTo(0);
   };
 
-  return /*#__PURE__*/React.createElement(FooterTopSection, null, /*#__PURE__*/React.createElement(Logo, {
-    name: sitename || '',
-    showBetaTag: showBetaTag,
-    color: COLORS.white,
-    betaTagBackgroundColor: COLORS.white,
-    betaTagColor: COLORS.neutral_800
-  }), /*#__PURE__*/React.createElement(ToTop, {
-    tabIndex: 0,
-    onKeyDown: e => isPressingEnter(e) ? action() : null,
-    onClick: action
-  }, /*#__PURE__*/React.createElement(ArrowLineUp, {
-    size: "24px",
-    color: COLORS.white
-  }), /*#__PURE__*/React.createElement("span", null, toTopText)));
+  return /*#__PURE__*/_jsxs(FooterTopSection, {
+    children: [/*#__PURE__*/_jsx(Logo, {
+      name: sitename || '',
+      showBetaTag: showBetaTag,
+      color: COLORS.white,
+      betaTagBackgroundColor: COLORS.white,
+      betaTagColor: COLORS.neutral_800
+    }), /*#__PURE__*/_jsxs(ToTop, {
+      tabIndex: 0,
+      onKeyDown: function onKeyDown(e) {
+        return isPressingEnter(e) ? action() : null;
+      },
+      onClick: action,
+      children: [/*#__PURE__*/_jsx(ArrowLineUp, {
+        size: "24px",
+        color: COLORS.white
+      }), /*#__PURE__*/_jsx("span", {
+        children: toTopText
+      })]
+    })]
+  });
 };
 
 FooterTop.propTypes = {

package/dist/esm/Footer/Components/FooterTop.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Footer/Components/FooterTop.tsx"],"names":["React","styled","animateScrollTo","COLORS","Logo","ArrowLineUp","ComponentTextStyle","ComponentXSStyling","FooterTopSection","section","ToTop","div","UppercaseBold","primary_20","primary_700","primary_500","primary_100","primary_800","FooterTop","sitename","showBetaTag","toTopText","isPressingEnter","e","key","preventDefault","stopPropagation","action","white","neutral_800"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AAEA,SAAQC,MAAR,QAAqB,cAArB;AACA,OAAOC,IAAP,MAAiB,gCAAjB;AACA,SAAQC,WAAR,QAA0B,qCAA1B;AACA,SAAQC,kBAAR,EAA4BC,kBAA5B,QAAqD,yBAArD;AAEA,MAAMC,gBAAgB,GAAGP,MAAM,CAACQ,OAAQ;AACxC;AACA;AACA;AACA;AACA;AACA,CANA;AAQA,MAAMC,KAAK,GAAGT,MAAM,CAACU,GAAI;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMJ,kBAAkB,CAACD,kBAAkB,CAACM,aAApB,EAAmC,SAAnC,CAA8C;AACtE;AACA;AACA;AACA,wBAAwBT,MAAM,CAACU,UAAW;AAC1C;AACA;AACA,cAAcV,MAAM,CAACW,WAAY;AACjC;AACA;AACA,eAAeX,MAAM,CAACW,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA,8BAA8BX,MAAM,CAACY,WAAY;AACjD;AACA;AACA;AACA,kBAAkBZ,MAAM,CAACa,WAAY;AACrC;AACA;AACA;AACA,cAAcb,MAAM,CAACc,WAAY;AACjC;AACA;AACA,eAAed,MAAM,CAACc,WAAY;AAClC;AACA;AACA,CAhDA;;AAwDA,MAAMC,SAAS,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,WAAZ;AAAyBC,EAAAA;AAAzB,CAAD,KAA0D;AAC1E,QAAMC,eAAe,GAAIC,CAAD,IAAY;AAClC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBD,MAAAA,CAAC,CAACE,cAAF;AACAF,MAAAA,CAAC,CAACG,eAAF;AACA,aAAO,IAAP;AACD;;AACD,WAAO,KAAP;AACD,GAPD;;AAQA,QAAMC,MAAM,GAAG,MAAM;AACnBzB,IAAAA,eAAe,CAAC,CAAD,CAAf;AACD,GAFD;;AAGA,sBACE,oBAAC,gBAAD,qBACE,oBAAC,IAAD;AACE,IAAA,IAAI,EAAEiB,QAAQ,IAAI,EADpB;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,KAAK,EAAEjB,MAAM,CAACyB,KAHhB;AAIE,IAAA,sBAAsB,EAAEzB,MAAM,CAACyB,KAJjC;AAKE,IAAA,YAAY,EAAEzB,MAAM,CAAC0B;AALvB,IADF,eAQE,oBAAC,KAAD;AAAO,IAAA,QAAQ,EAAE,CAAjB;AAAoB,IAAA,SAAS,EAAGN,CAAD,IAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBI,MAAM,EAA3B,GAAgC,IAA5E;AAAmF,IAAA,OAAO,EAAEA;AAA5F,kBACE,oBAAC,WAAD;AAAa,IAAA,IAAI,EAAC,MAAlB;AAAyB,IAAA,KAAK,EAAExB,MAAM,CAACyB;AAAvC,IADF,eAEE,kCAAOP,SAAP,CAFF,CARF,CADF;AAeD,CA3BD;;;AALEF,EAAAA,Q;AACAC,EAAAA,W;AACAC,EAAAA,S;;AAgCF,eAAeH,SAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport animateScrollTo from 'animated-scroll-to';\n\nimport {COLORS} from '../../styles';\nimport Logo from '../../GlobalNavigationBar/Logo';\nimport {ArrowLineUp} from '../../icons/systemicons/SystemIcons';\nimport {ComponentTextStyle, ComponentXSStyling} from '../../styles/typography';\n\nconst FooterTopSection = styled.section`\n  min-height: 8px;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 16px;\n`;\n\nconst ToTop = styled.div`\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    ${ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit')}\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ${COLORS.primary_20};\n    svg path,\n    svg {\n      fill: ${COLORS.primary_700};\n    }\n    span {\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:focus:not(:disabled) {\n    outline: none;\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n  }\n\n  &:active:not(:disabled) {\n    background: ${COLORS.primary_100};\n    box-shadow: none;\n    svg path,\n    svg {\n      fill: ${COLORS.primary_800};\n    }\n    span {\n      color: ${COLORS.primary_800};\n    }\n  }\n`;\n\ninterface FooterTopProps {\n  sitename?: string;\n  showBetaTag?: boolean;\n  toTopText: string;\n}\n\nconst FooterTop = ({ sitename, showBetaTag, toTopText }: FooterTopProps) => {\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n  const action = () => {\n    animateScrollTo(0);\n  };\n  return (\n    <FooterTopSection>\n      <Logo\n        name={sitename || ''}\n        showBetaTag={showBetaTag}\n        color={COLORS.white}\n        betaTagBackgroundColor={COLORS.white}\n        betaTagColor={COLORS.neutral_800}\n      />\n      <ToTop tabIndex={0} onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)} onClick={action}>\n        <ArrowLineUp size=\"24px\" color={COLORS.white} />\n        <span>{toTopText}</span>\n      </ToTop>\n    </FooterTopSection>\n  );\n};\n\nexport default FooterTop;\n"],"file":"FooterTop.js"}
+{"version":3,"sources":["../../../../src/Footer/Components/FooterTop.tsx"],"names":["React","styled","animateScrollTo","COLORS","Logo","ArrowLineUp","ComponentTextStyle","ComponentXSStyling","FooterTopSection","section","ToTop","div","UppercaseBold","primary_20","primary_700","primary_500","primary_100","primary_800","FooterTop","sitename","showBetaTag","toTopText","isPressingEnter","e","key","preventDefault","stopPropagation","action","white","neutral_800"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AAEA,SAAQC,MAAR,QAAqB,cAArB;AACA,OAAOC,IAAP,MAAiB,gCAAjB;AACA,SAAQC,WAAR,QAA0B,qCAA1B;AACA,SAAQC,kBAAR,EAA4BC,kBAA5B,QAAqD,yBAArD;;;AAEA,IAAMC,gBAAgB,GAAGP,MAAM,CAACQ,OAAV,8KAAtB;AAQA,IAAMC,KAAK,GAAGT,MAAM,CAACU,GAAV,6yBAkBLJ,kBAAkB,CAACD,kBAAkB,CAACM,aAApB,EAAmC,SAAnC,CAlBb,EAsBaT,MAAM,CAACU,UAtBpB,EAyBGV,MAAM,CAACW,WAzBV,EA4BIX,MAAM,CAACW,WA5BX,EAkCmBX,MAAM,CAACY,WAlC1B,EAsCOZ,MAAM,CAACa,WAtCd,EA0CGb,MAAM,CAACc,WA1CV,EA6CId,MAAM,CAACc,WA7CX,CAAX;;AAwDA,IAAMC,SAAS,GAAG,SAAZA,SAAY,OAA0D;AAAA,MAAvDC,QAAuD,QAAvDA,QAAuD;AAAA,MAA7CC,WAA6C,QAA7CA,WAA6C;AAAA,MAAhCC,SAAgC,QAAhCA,SAAgC;;AAC1E,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,CAAD,EAAY;AAClC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBD,MAAAA,CAAC,CAACE,cAAF;AACAF,MAAAA,CAAC,CAACG,eAAF;AACA,aAAO,IAAP;AACD;;AACD,WAAO,KAAP;AACD,GAPD;;AAQA,MAAMC,MAAM,GAAG,SAATA,MAAS,GAAM;AACnBzB,IAAAA,eAAe,CAAC,CAAD,CAAf;AACD,GAFD;;AAGA,sBACE,MAAC,gBAAD;AAAA,4BACE,KAAC,IAAD;AACE,MAAA,IAAI,EAAEiB,QAAQ,IAAI,EADpB;AAEE,MAAA,WAAW,EAAEC,WAFf;AAGE,MAAA,KAAK,EAAEjB,MAAM,CAACyB,KAHhB;AAIE,MAAA,sBAAsB,EAAEzB,MAAM,CAACyB,KAJjC;AAKE,MAAA,YAAY,EAAEzB,MAAM,CAAC0B;AALvB,MADF,eAQE,MAAC,KAAD;AAAO,MAAA,QAAQ,EAAE,CAAjB;AAAoB,MAAA,SAAS,EAAE,mBAACN,CAAD;AAAA,eAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBI,MAAM,EAA3B,GAAgC,IAA7C;AAAA,OAA/B;AAAmF,MAAA,OAAO,EAAEA,MAA5F;AAAA,8BACE,KAAC,WAAD;AAAa,QAAA,IAAI,EAAC,MAAlB;AAAyB,QAAA,KAAK,EAAExB,MAAM,CAACyB;AAAvC,QADF,eAEE;AAAA,kBAAOP;AAAP,QAFF;AAAA,MARF;AAAA,IADF;AAeD,CA3BD;;;AALEF,EAAAA,Q;AACAC,EAAAA,W;AACAC,EAAAA,S;;AAgCF,eAAeH,SAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport animateScrollTo from 'animated-scroll-to';\n\nimport {COLORS} from '../../styles';\nimport Logo from '../../GlobalNavigationBar/Logo';\nimport {ArrowLineUp} from '../../icons/systemicons/SystemIcons';\nimport {ComponentTextStyle, ComponentXSStyling} from '../../styles/typography';\n\nconst FooterTopSection = styled.section`\n  min-height: 8px;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 16px;\n`;\n\nconst ToTop = styled.div`\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    ${ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit')}\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ${COLORS.primary_20};\n    svg path,\n    svg {\n      fill: ${COLORS.primary_700};\n    }\n    span {\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:focus:not(:disabled) {\n    outline: none;\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n  }\n\n  &:active:not(:disabled) {\n    background: ${COLORS.primary_100};\n    box-shadow: none;\n    svg path,\n    svg {\n      fill: ${COLORS.primary_800};\n    }\n    span {\n      color: ${COLORS.primary_800};\n    }\n  }\n`;\n\ninterface FooterTopProps {\n  sitename?: string;\n  showBetaTag?: boolean;\n  toTopText: string;\n}\n\nconst FooterTop = ({ sitename, showBetaTag, toTopText }: FooterTopProps) => {\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n  const action = () => {\n    animateScrollTo(0);\n  };\n  return (\n    <FooterTopSection>\n      <Logo\n        name={sitename || ''}\n        showBetaTag={showBetaTag}\n        color={COLORS.white}\n        betaTagBackgroundColor={COLORS.white}\n        betaTagColor={COLORS.neutral_800}\n      />\n      <ToTop tabIndex={0} onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)} onClick={action}>\n        <ArrowLineUp size=\"24px\" color={COLORS.white} />\n        <span>{toTopText}</span>\n      </ToTop>\n    </FooterTopSection>\n  );\n};\n\nexport default FooterTop;\n"],"file":"FooterTop.js"}

package/dist/esm/Footer/Footer.js

@@ -1,19 +1,20 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
 import * as React from 'react';
 import styled from 'styled-components';
 import { COLORS } from '../styles';
-const FooterContainer = styled.footer`
-  margin-top: auto;
-`;
-const FooterGlobalContent = styled.section`
-  min-height: 8px;
-  background-color: ${COLORS.primary_700};
-  color: white;
-`;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var FooterContainer = styled.footer(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: auto;\n"])));
+var FooterGlobalContent = styled.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-height: 8px;\n  background-color: ", ";\n  color: white;\n"])), COLORS.primary_700);
 
-const Footer = ({
-  children
-}) => {
-  return /*#__PURE__*/React.createElement(FooterContainer, null, children, /*#__PURE__*/React.createElement(FooterGlobalContent, null));
+var Footer = function Footer(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_jsxs(FooterContainer, {
+    children: [children, /*#__PURE__*/_jsx(FooterGlobalContent, {})]
+  });
 };
 
 export default Footer;

package/dist/esm/Footer/Footer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Footer/Footer.tsx"],"names":["React","styled","COLORS","FooterContainer","footer","FooterGlobalContent","section","primary_700","Footer","children"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAASC,MAAT,QAAuB,WAAvB;AAEA,MAAMC,eAAe,GAAGF,MAAM,CAACG,MAAO;AACtC;AACA,CAFA;AAIA,MAAMC,mBAAmB,GAAGJ,MAAM,CAACK,OAAQ;AAC3C;AACA,sBAAsBJ,MAAM,CAACK,WAAY;AACzC;AACA,CAJA;;AAMA,MAAMC,MAAM,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAuB;AACpC,sBACE,oBAAC,eAAD,QACGA,QADH,eAEE,oBAAC,mBAAD,OAFF,CADF;AAMD,CAPD;;AASA,eAAeD,MAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { COLORS } from '../styles';\n\nconst FooterContainer = styled.footer`\n  margin-top: auto;\n`;\n\nconst FooterGlobalContent = styled.section`\n  min-height: 8px;\n  background-color: ${COLORS.primary_700};\n  color: white;\n`;\n\nconst Footer = ({ children }: any) => {\n  return (\n    <FooterContainer>\n      {children}\n      <FooterGlobalContent />\n    </FooterContainer>\n  );\n};\n\nexport default Footer;\n"],"file":"Footer.js"}
+{"version":3,"sources":["../../../src/Footer/Footer.tsx"],"names":["React","styled","COLORS","FooterContainer","footer","FooterGlobalContent","section","primary_700","Footer","children"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAASC,MAAT,QAAuB,WAAvB;;;AAEA,IAAMC,eAAe,GAAGF,MAAM,CAACG,MAAV,4FAArB;AAIA,IAAMC,mBAAmB,GAAGJ,MAAM,CAACK,OAAV,0IAEHJ,MAAM,CAACK,WAFJ,CAAzB;;AAMA,IAAMC,MAAM,GAAG,SAATA,MAAS,OAAuB;AAAA,MAApBC,QAAoB,QAApBA,QAAoB;AACpC,sBACE,MAAC,eAAD;AAAA,eACGA,QADH,eAEE,KAAC,mBAAD,KAFF;AAAA,IADF;AAMD,CAPD;;AASA,eAAeD,MAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { COLORS } from '../styles';\n\nconst FooterContainer = styled.footer`\n  margin-top: auto;\n`;\n\nconst FooterGlobalContent = styled.section`\n  min-height: 8px;\n  background-color: ${COLORS.primary_700};\n  color: white;\n`;\n\nconst Footer = ({ children }: any) => {\n  return (\n    <FooterContainer>\n      {children}\n      <FooterGlobalContent />\n    </FooterContainer>\n  );\n};\n\nexport default Footer;\n"],"file":"Footer.js"}

package/dist/esm/Footer/SiteFooter.js

@@ -1,5 +1,8 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 
+var _templateObject, _templateObject2;
+
 /**
  * Import React libraries.
  */
@@ -22,61 +25,41 @@ import { BREAKPOINTS, COLORS } from '../styles';
  * Import custom styles.
  */
 
-const FooterContainer = styled.footer`
-  margin-top: auto;
-  background-color: ${COLORS.neutral_800};
-  border-top: 8px solid ${COLORS.neutral_200};
-
-  padding: 16px 16px;
-  
-  ${BREAKPOINTS.MEDIUM}{
-    padding: 24px 32px;
-  }
-  ${BREAKPOINTS.LARGE}{
-    padding: 24px 56px;
-  }
-  ${BREAKPOINTS.XLARGE}{
-    padding: 32px 56px;
-  }
-`;
-const FooterLine = styled.div`
-  border-top: 1px solid ${COLORS.white};
-  display: none;
-  ${BREAKPOINTS.MEDIUM} {
-    display: block;
-  }
-`;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var FooterContainer = styled.footer(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: auto;\n  background-color: ", ";\n  border-top: 8px solid ", ";\n\n  padding: 16px 16px;\n  \n  ", "{\n    padding: 24px 32px;\n  }\n  ", "{\n    padding: 24px 56px;\n  }\n  ", "{\n    padding: 32px 56px;\n  }\n"])), COLORS.neutral_800, COLORS.neutral_200, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, BREAKPOINTS.XLARGE);
+var FooterLine = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n  display: none;\n  ", " {\n    display: block;\n  }\n"])), COLORS.white, BREAKPOINTS.MEDIUM);
 
-const SiteFooter = ({
-  id,
-  sitename,
-  bottomLinks,
-  showBetaTag,
-  copyrightText,
-  toTopText,
-  placeholderEmailField,
-  includeNewsletterAndSocialSection,
-  newsletterLabel,
-  navOptions,
-  onNewsletterSignup
-}) => {
-  return /*#__PURE__*/React.createElement(FooterContainer, {
-    id: id
-  }, /*#__PURE__*/React.createElement(FooterTop, {
-    sitename: sitename,
-    showBetaTag: showBetaTag,
-    toTopText: toTopText
-  }), navOptions && /*#__PURE__*/React.createElement(FooterNavSection, {
-    mainId: id,
-    navOptions: navOptions
-  }), /*#__PURE__*/React.createElement(FooterLine, null), includeNewsletterAndSocialSection && /*#__PURE__*/React.createElement(FooterNewsletterAndSocialSection, {
-    placeholderEmail: placeholderEmailField,
-    actionOnNewsletterSignup: onNewsletterSignup,
-    newsletterLabel: newsletterLabel || ''
-  }), /*#__PURE__*/React.createElement(FooterBottomLinks, {
-    bottomLinks: bottomLinks,
-    copyrightText: copyrightText
-  }));
+var SiteFooter = function SiteFooter(_ref) {
+  var id = _ref.id,
+      sitename = _ref.sitename,
+      bottomLinks = _ref.bottomLinks,
+      showBetaTag = _ref.showBetaTag,
+      copyrightText = _ref.copyrightText,
+      toTopText = _ref.toTopText,
+      placeholderEmailField = _ref.placeholderEmailField,
+      includeNewsletterAndSocialSection = _ref.includeNewsletterAndSocialSection,
+      newsletterLabel = _ref.newsletterLabel,
+      navOptions = _ref.navOptions,
+      onNewsletterSignup = _ref.onNewsletterSignup;
+  return /*#__PURE__*/_jsxs(FooterContainer, {
+    id: id,
+    children: [/*#__PURE__*/_jsx(FooterTop, {
+      sitename: sitename,
+      showBetaTag: showBetaTag,
+      toTopText: toTopText
+    }), navOptions && /*#__PURE__*/_jsx(FooterNavSection, {
+      mainId: id,
+      navOptions: navOptions
+    }), /*#__PURE__*/_jsx(FooterLine, {}), includeNewsletterAndSocialSection && /*#__PURE__*/_jsx(FooterNewsletterAndSocialSection, {
+      placeholderEmail: placeholderEmailField,
+      actionOnNewsletterSignup: onNewsletterSignup,
+      newsletterLabel: newsletterLabel || ''
+    }), /*#__PURE__*/_jsx(FooterBottomLinks, {
+      bottomLinks: bottomLinks,
+      copyrightText: copyrightText
+    })]
+  });
 };
 
 SiteFooter.propTypes = {