@laerdal/life-react-components 3.4.2 → 3.5.0

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

@@ -0,0 +1,79 @@
+import _pt from "prop-types";
+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';
+const NavSection = styled.section`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  flex-flow: flex-start;
+  color: white;
+  margin-bottom: 12px;
+`;
+const LinkBlock = styled.div`
+  display: ${props => props.width <= 768 ? 'none' : 'flex'};
+  flex-direction: column;
+  font-weight: normal;
+  width: 100%;
+
+  ${BREAKPOINTS.MEDIUM} {
+    padding: 0 24px 24px 0;
+    width: calc(50% - 24px);
+  }
+
+  ${BREAKPOINTS.LARGE} {
+    width: calc(33% - 24px);
+  }
+  ${BREAKPOINTS.XLARGE} {
+    padding: 0 32px 32px 0;
+    width: calc(33% - 32px);
+  }
+
+  h3 {
+    ${ComponentLStyling(ComponentTextStyle.Regular, 'inherit')}
+  }
+
+  a {
+    padding: 8px 0px;
+    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}
+  }
+`;
+
+const FooterNavSection = ({
+  navOptions
+}) => {
+  const [width, setWidth] = React.useState(window.innerWidth);
+  React.useEffect(() => {
+    function handleResize() {
+      setWidth(window.innerWidth);
+    }
+
+    window.addEventListener('resize', handleResize);
+  });
+  return /*#__PURE__*/React.createElement(NavSection, null, navOptions.sections?.map((no, index) => {
+    return width > 768 ? /*#__PURE__*/React.createElement(LinkBlock, {
+      key: `LinkBlock_${index}`,
+      width: width
+    }, /*#__PURE__*/React.createElement("h3", null, no.header), no.links.map((link, index) => /*#__PURE__*/React.createElement(HyperLink, {
+      key: index,
+      id: `dropdownlink_${Math.floor(Math.random() * 999999999999)}`,
+      variant: 'inverted',
+      href: link.to,
+      target: link.target || '_blank',
+      rel: "noreferrer noopener"
+    }, link.label))) : /*#__PURE__*/React.createElement(FooterDropdownLinks, {
+      key: `LinkBlockDropdown_${index}`,
+      navSection: no,
+      width: width
+    });
+  }));
+};
+
+FooterNavSection.propTypes = {
+  mainId: _pt.string.isRequired
+};
+export default FooterNavSection;
+//# sourceMappingURL=FooterNavSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Footer/Components/FooterNavSection.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","FooterDropdownLinks","ComponentLStyling","ComponentSStyling","HyperLink","NavSection","section","LinkBlock","div","props","width","MEDIUM","LARGE","XLARGE","Regular","Bold","white","FooterNavSection","navOptions","setWidth","useState","window","innerWidth","useEffect","handleResize","addEventListener","sections","map","no","index","header","links","link","Math","floor","random","to","target","label","mainId"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,kBAA7B,QAAsD,cAAtD;AACA,OAAOC,mBAAP,MAAgC,uBAAhC;AAEA,SAAQC,iBAAR,EAA2BC,iBAA3B,QAAmD,yBAAnD;AACA,SAAQC,SAAR,QAAwB,iBAAxB;AAEA,MAAMC,UAAU,GAAGR,MAAM,CAACS,OAAQ;AAClC;AACA;AACA;AACA;AACA;AACA;AACA,CAPA;AASA,MAAMC,SAAS,GAAGV,MAAM,CAACW,GAAuB;AAChD,aAAcC,KAAD,IAAYA,KAAK,CAACC,KAAN,IAAe,GAAf,GAAqB,MAArB,GAA8B,MAAQ;AAC/D;AACA;AACA;AACA;AACA,IAAIZ,WAAW,CAACa,MAAO;AACvB;AACA;AACA;AACA;AACA,IAAIb,WAAW,CAACc,KAAM;AACtB;AACA;AACA,IAAId,WAAW,CAACe,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA,MAAMX,iBAAiB,CAACF,kBAAkB,CAACc,OAApB,EAA6B,SAA7B,CAAwC;AAC/D;AACA;AACA;AACA;AACA,MAAMX,iBAAiB,CAACH,kBAAkB,CAACe,IAApB,EAA0BhB,MAAM,CAACiB,KAAjC,CAAwC;AAC/D;AACA,CA3BA;;AAkCA,MAAMC,gBAAgB,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAA2C;AAClE,QAAM,CAACR,KAAD,EAAQS,QAAR,IAAoBvB,KAAK,CAACwB,QAAN,CAAuBC,MAAM,CAACC,UAA9B,CAA1B;AACA1B,EAAAA,KAAK,CAAC2B,SAAN,CAAgB,MAAM;AACpB,aAASC,YAAT,GAAwB;AACtBL,MAAAA,QAAQ,CAACE,MAAM,CAACC,UAAR,CAAR;AACD;;AACDD,IAAAA,MAAM,CAACI,gBAAP,CAAwB,QAAxB,EAAkCD,YAAlC;AACD,GALD;AAOA,sBACE,oBAAC,UAAD,QACGN,UAAU,CAACQ,QAAX,EAAqBC,GAArB,CAAyB,CAACC,EAAD,EAAKC,KAAL,KAAe;AACvC,WAAOnB,KAAK,GAAG,GAAR,gBACL,oBAAC,SAAD;AAAW,MAAA,GAAG,EAAG,aAAYmB,KAAM,EAAnC;AAAsC,MAAA,KAAK,EAAEnB;AAA7C,oBACE,gCAAKkB,EAAE,CAACE,MAAR,CADF,EAEGF,EAAE,CAACG,KAAH,CAASJ,GAAT,CAAa,CAACK,IAAD,EAAOH,KAAP,kBACZ,oBAAC,SAAD;AAAW,MAAA,GAAG,EAAEA,KAAhB;AACW,MAAA,EAAE,EAAG,gBAAeI,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAyC,EADxE;AAEW,MAAA,OAAO,EAAE,UAFpB;AAGW,MAAA,IAAI,EAAEH,IAAI,CAACI,EAHtB;AAIW,MAAA,MAAM,EAAEJ,IAAI,CAACK,MAAL,IAAe,QAJlC;AAKW,MAAA,GAAG,EAAC;AALf,OAMGL,IAAI,CAACM,KANR,CADD,CAFH,CADK,gBAeL,oBAAC,mBAAD;AAAqB,MAAA,GAAG,EAAG,qBAAoBT,KAAM,EAArD;AAAwD,MAAA,UAAU,EAAED,EAApE;AAAwE,MAAA,KAAK,EAAElB;AAA/E,MAfF;AAiBD,GAlBA,CADH,CADF;AAuBD,CAhCD;;;AAHE6B,EAAAA,M;;AAqCF,eAAetB,gBAAf","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles';\r\nimport FooterDropdownLinks from './FooterDropdownLinks';\r\nimport {NavOptions} from '../../types';\r\nimport {ComponentLStyling, ComponentSStyling} from '../../styles/typography';\r\nimport {HyperLink} from '../../HyperLink';\r\n\r\nconst NavSection = styled.section`\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex-wrap: wrap;\r\n  flex-flow: flex-start;\r\n  color: white;\r\n  margin-bottom: 12px;\r\n`;\r\n\r\nconst LinkBlock = styled.div<{ width: number }>`\r\n  display: ${(props) => (props.width <= 768 ? 'none' : 'flex')};\r\n  flex-direction: column;\r\n  font-weight: normal;\r\n  width: 100%;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    padding: 0 24px 24px 0;\r\n    width: calc(50% - 24px);\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    width: calc(33% - 24px);\r\n  }\r\n  ${BREAKPOINTS.XLARGE} {\r\n    padding: 0 32px 32px 0;\r\n    width: calc(33% - 32px);\r\n  }\r\n\r\n  h3 {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, 'inherit')}\r\n  }\r\n\r\n  a {\r\n    padding: 8px 0px;\r\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\r\n  }\r\n`;\r\n\r\ninterface FooterNavSectionProps {\r\n  navOptions: NavOptions;\r\n  mainId: string;\r\n}\r\n\r\nconst FooterNavSection = ({ navOptions }: FooterNavSectionProps) => {\r\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\r\n  React.useEffect(() => {\r\n    function handleResize() {\r\n      setWidth(window.innerWidth);\r\n    }\r\n    window.addEventListener('resize', handleResize);\r\n  });\r\n\r\n  return (\r\n    <NavSection>\r\n      {navOptions.sections?.map((no, index) => {\r\n        return width > 768 ? (\r\n          <LinkBlock key={`LinkBlock_${index}`} width={width}>\r\n            <h3>{no.header}</h3>\r\n            {no.links.map((link, index) => (\r\n              <HyperLink key={index}\r\n                         id={`dropdownlink_${Math.floor(Math.random() * 999999999999)}`}\r\n                         variant={'inverted'}\r\n                         href={link.to}\r\n                         target={link.target || '_blank'}\r\n                         rel=\"noreferrer noopener\">\r\n                {link.label}\r\n              </HyperLink>\r\n            ))}\r\n          </LinkBlock>\r\n        ) : (\r\n          <FooterDropdownLinks key={`LinkBlockDropdown_${index}`} navSection={no} width={width} />\r\n        );\r\n      })}\r\n    </NavSection>\r\n  );\r\n};\r\n\r\nexport default FooterNavSection;\r\n"],"file":"FooterNavSection.js"}

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

@@ -0,0 +1,193 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS } from '../../styles';
+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))))));
+};
+
+FooterNewsletterAndSocialSection.propTypes = {
+  actionOnNewsletterSignup: _pt.func,
+  newsletterLabel: _pt.string.isRequired,
+  placeholderEmail: _pt.string
+};
+export default FooterNewsletterAndSocialSection;
+//# sourceMappingURL=FooterNewsletterAndSocialSection.js.map

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

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

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

@@ -0,0 +1,107 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import styled from 'styled-components';
+import animateScrollTo from 'animated-scroll-to';
+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);
+  }
+
+  &:active:not(:disabled) {
+    background: ${COLORS.primary_100};
+    box-shadow: none;
+    svg path,
+    svg {
+      fill: ${COLORS.primary_800};
+    }
+    span {
+      color: ${COLORS.primary_800};
+    }
+  }
+`;
+
+const FooterTop = ({
+  sitename,
+  showBetaTag,
+  toTopText
+}) => {
+  const isPressingEnter = e => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
+      return true;
+    }
+
+    return false;
+  };
+
+  const 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)));
+};
+
+FooterTop.propTypes = {
+  sitename: _pt.string,
+  showBetaTag: _pt.bool,
+  toTopText: _pt.string.isRequired
+};
+export default FooterTop;
+//# sourceMappingURL=FooterTop.js.map

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

@@ -0,0 +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';\r\nimport styled from 'styled-components';\r\nimport animateScrollTo from 'animated-scroll-to';\r\n\r\nimport {COLORS} from '../../styles';\r\nimport Logo from '../../GlobalNavigationBar/Logo';\r\nimport {ArrowLineUp} from '../../icons/systemicons/SystemIcons';\r\nimport {ComponentTextStyle, ComponentXSStyling} from '../../styles/typography';\r\n\r\nconst FooterTopSection = styled.section`\r\n  min-height: 8px;\r\n  color: white;\r\n  display: flex;\r\n  flex-direction: row;\r\n  margin-bottom: 16px;\r\n`;\r\n\r\nconst ToTop = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: auto 0 auto auto;\r\n  border-radius: 4px;\r\n  height: 48px;\r\n  width: 48px;\r\n  padding: 8px;\r\n\r\n  svg {\r\n    margin: 0 auto;\r\n  }\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n  span {\r\n    margin: 14px auto 0 auto;\r\n    ${ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit')}\r\n  }\r\n\r\n  &:hover:not(:disabled) {\r\n    background-color: ${COLORS.primary_20};\r\n    svg path,\r\n    svg {\r\n      fill: ${COLORS.primary_700};\r\n    }\r\n    span {\r\n      color: ${COLORS.primary_700};\r\n    }\r\n  }\r\n\r\n  &:focus:not(:disabled) {\r\n    outline: none;\r\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\r\n  }\r\n\r\n  &:active:not(:disabled) {\r\n    background: ${COLORS.primary_100};\r\n    box-shadow: none;\r\n    svg path,\r\n    svg {\r\n      fill: ${COLORS.primary_800};\r\n    }\r\n    span {\r\n      color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n`;\r\n\r\ninterface FooterTopProps {\r\n  sitename?: string;\r\n  showBetaTag?: boolean;\r\n  toTopText: string;\r\n}\r\n\r\nconst FooterTop = ({ sitename, showBetaTag, toTopText }: FooterTopProps) => {\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n  const action = () => {\r\n    animateScrollTo(0);\r\n  };\r\n  return (\r\n    <FooterTopSection>\r\n      <Logo\r\n        name={sitename || ''}\r\n        showBetaTag={showBetaTag}\r\n        color={COLORS.white}\r\n        betaTagBackgroundColor={COLORS.white}\r\n        betaTagColor={COLORS.neutral_800}\r\n      />\r\n      <ToTop tabIndex={0} onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)} onClick={action}>\r\n        <ArrowLineUp size=\"24px\" color={COLORS.white} />\r\n        <span>{toTopText}</span>\r\n      </ToTop>\r\n    </FooterTopSection>\r\n  );\r\n};\r\n\r\nexport default FooterTop;\r\n"],"file":"FooterTop.js"}

package/dist/esm/Footer/Footer.js

@@ -0,0 +1,20 @@
+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;
+`;
+
+const Footer = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(FooterContainer, null, children, /*#__PURE__*/React.createElement(FooterGlobalContent, null));
+};
+
+export default Footer;
+//# sourceMappingURL=Footer.js.map

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

@@ -0,0 +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';\r\nimport styled from 'styled-components';\r\n\r\nimport { COLORS } from '../styles';\r\n\r\nconst FooterContainer = styled.footer`\r\n  margin-top: auto;\r\n`;\r\n\r\nconst FooterGlobalContent = styled.section`\r\n  min-height: 8px;\r\n  background-color: ${COLORS.primary_700};\r\n  color: white;\r\n`;\r\n\r\nconst Footer = ({ children }: any) => {\r\n  return (\r\n    <FooterContainer>\r\n      {children}\r\n      <FooterGlobalContent />\r\n    </FooterContainer>\r\n  );\r\n};\r\n\r\nexport default Footer;\r\n"],"file":"Footer.js"}

package/dist/esm/Footer/SiteFooter.js

@@ -0,0 +1,96 @@
+import _pt from "prop-types";
+
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+/**
+ * Import third-party libraries.
+ */
+
+import styled from 'styled-components';
+/**
+ * Import custom components.
+ */
+
+import FooterBottomLinks from './Components/FooterBottomLinks';
+import FooterTop from './Components/FooterTop';
+import FooterNewsletterAndSocialSection from './Components/FooterNewsletterAndSocialSection';
+import FooterNavSection from './Components/FooterNavSection';
+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;
+  }
+`;
+
+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
+  }));
+};
+
+SiteFooter.propTypes = {
+  id: _pt.string.isRequired,
+  sitename: _pt.string,
+  showBetaTag: _pt.bool,
+  bottomLinks: _pt.array,
+  copyrightText: _pt.string,
+  includeNewsletterAndSocialSection: _pt.bool,
+  actionOnNewsletterSignup: _pt.func,
+  newsletterLabel: _pt.string,
+  toTopText: _pt.string.isRequired,
+  placeholderEmailField: _pt.string,
+  onNewsletterSignup: _pt.func
+};
+export default SiteFooter;
+//# sourceMappingURL=SiteFooter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Footer/SiteFooter.tsx"],"names":["React","styled","FooterBottomLinks","FooterTop","FooterNewsletterAndSocialSection","FooterNavSection","BREAKPOINTS","COLORS","FooterContainer","footer","neutral_800","neutral_200","MEDIUM","LARGE","XLARGE","FooterLine","div","white","SiteFooter","id","sitename","bottomLinks","showBetaTag","copyrightText","toTopText","placeholderEmailField","includeNewsletterAndSocialSection","newsletterLabel","navOptions","onNewsletterSignup","actionOnNewsletterSignup"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,iBAAP,MAA8B,gCAA9B;AACA,OAAOC,SAAP,MAAsB,wBAAtB;AACA,OAAOC,gCAAP,MAA6C,+CAA7C;AACA,OAAOC,gBAAP,MAA6B,+BAA7B;AACA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,WAApC;AAEA;AACA;AACA;;AAGA,MAAMC,eAAe,GAAGP,MAAM,CAACQ,MAAO;AACtC;AACA,sBAAsBF,MAAM,CAACG,WAAY;AACzC,0BAA0BH,MAAM,CAACI,WAAY;AAC7C;AACA;AACA;AACA,IAAIL,WAAW,CAACM,MAAO;AACvB;AACA;AACA,IAAIN,WAAW,CAACO,KAAM;AACtB;AACA;AACA,IAAIP,WAAW,CAACQ,MAAO;AACvB;AACA;AACA,CAhBA;AAiBA,MAAMC,UAAU,GAAGd,MAAM,CAACe,GAAI;AAC9B,0BAA0BT,MAAM,CAACU,KAAM;AACvC;AACA,IAAIX,WAAW,CAACM,MAAO;AACvB;AACA;AACA,CANA;;AAuBA,MAAMM,UAAU,GAAG,CAAC;AAClBC,EAAAA,EADkB;AAElBC,EAAAA,QAFkB;AAGlBC,EAAAA,WAHkB;AAIlBC,EAAAA,WAJkB;AAKlBC,EAAAA,aALkB;AAMlBC,EAAAA,SANkB;AAOlBC,EAAAA,qBAPkB;AAQlBC,EAAAA,iCARkB;AASlBC,EAAAA,eATkB;AAUlBC,EAAAA,UAVkB;AAWlBC,EAAAA;AAXkB,CAAD,KAYG;AACpB,sBACE,oBAAC,eAAD;AAAiB,IAAA,EAAE,EAAEV;AAArB,kBACE,oBAAC,SAAD;AAAW,IAAA,QAAQ,EAAEC,QAArB;AAA+B,IAAA,WAAW,EAAEE,WAA5C;AAAyD,IAAA,SAAS,EAAEE;AAApE,IADF,EAEGI,UAAU,iBAAI,oBAAC,gBAAD;AAAkB,IAAA,MAAM,EAAET,EAA1B;AAA8B,IAAA,UAAU,EAAES;AAA1C,IAFjB,eAGE,oBAAC,UAAD,OAHF,EAIGF,iCAAiC,iBAChC,oBAAC,gCAAD;AAAkC,IAAA,gBAAgB,EAAED,qBAApD;AAA2E,IAAA,wBAAwB,EAAEI,kBAArG;AAAyH,IAAA,eAAe,EAAEF,eAAe,IAAI;AAA7J,IALJ,eAOE,oBAAC,iBAAD;AAAmB,IAAA,WAAW,EAAEN,WAAhC;AAA6C,IAAA,aAAa,EAAEE;AAA5D,IAPF,CADF;AAWD,CAxBD;;;AAdEJ,EAAAA,E;AACAC,EAAAA,Q;AACAE,EAAAA,W;AACAD,EAAAA,W;AACAE,EAAAA,a;AACAG,EAAAA,iC;AACAI,EAAAA,wB;AACAH,EAAAA,e;AACAH,EAAAA,S;AAEAC,EAAAA,qB;AACAI,EAAAA,kB;;AA6BF,eAAeX,UAAf","sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport FooterBottomLinks from './Components/FooterBottomLinks';\r\nimport FooterTop from './Components/FooterTop';\r\nimport FooterNewsletterAndSocialSection from './Components/FooterNewsletterAndSocialSection';\r\nimport FooterNavSection from './Components/FooterNavSection';\r\nimport { BREAKPOINTS, COLORS } from '../styles';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { NavLink, NavOptions } from '../types';\r\n\r\nconst FooterContainer = styled.footer`\r\n  margin-top: auto;\r\n  background-color: ${COLORS.neutral_800};\r\n  border-top: 8px solid ${COLORS.neutral_200};\r\n\r\n  padding: 16px 16px;\r\n  \r\n  ${BREAKPOINTS.MEDIUM}{\r\n    padding: 24px 32px;\r\n  }\r\n  ${BREAKPOINTS.LARGE}{\r\n    padding: 24px 56px;\r\n  }\r\n  ${BREAKPOINTS.XLARGE}{\r\n    padding: 32px 56px;\r\n  }\r\n`;\r\nconst FooterLine = styled.div`\r\n  border-top: 1px solid ${COLORS.white};\r\n  display: none;\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    display: block;\r\n  }\r\n`;\r\n\r\ninterface NewFooterProps {\r\n  id: string;\r\n  sitename?: string;\r\n  showBetaTag?: boolean;\r\n  bottomLinks?: NavLink[];\r\n  copyrightText?: string;\r\n  includeNewsletterAndSocialSection?: boolean;\r\n  actionOnNewsletterSignup?: (email: string) => void;\r\n  newsletterLabel?: string;\r\n  toTopText: string;\r\n  navOptions?: NavOptions;\r\n  placeholderEmailField?: string;\r\n  onNewsletterSignup?: (email: string) => void;\r\n}\r\n\r\nconst SiteFooter = ({\r\n  id,\r\n  sitename,\r\n  bottomLinks,\r\n  showBetaTag,\r\n  copyrightText,\r\n  toTopText,\r\n  placeholderEmailField,\r\n  includeNewsletterAndSocialSection,\r\n  newsletterLabel,\r\n  navOptions,\r\n  onNewsletterSignup,\r\n}: NewFooterProps) => {\r\n  return (\r\n    <FooterContainer id={id}>\r\n      <FooterTop sitename={sitename} showBetaTag={showBetaTag} toTopText={toTopText} />\r\n      {navOptions && <FooterNavSection mainId={id} navOptions={navOptions} />}\r\n      <FooterLine />\r\n      {includeNewsletterAndSocialSection && (\r\n        <FooterNewsletterAndSocialSection placeholderEmail={placeholderEmailField} actionOnNewsletterSignup={onNewsletterSignup} newsletterLabel={newsletterLabel || ''} />\r\n      )}\r\n      <FooterBottomLinks bottomLinks={bottomLinks} copyrightText={copyrightText} />\r\n    </FooterContainer>\r\n  );\r\n};\r\n\r\nexport default SiteFooter;\r\n"],"file":"SiteFooter.js"}

package/dist/esm/Footer/index.js

@@ -0,0 +1,3 @@
+export { default as Footer } from './Footer';
+export { default as SiteFooter } from './SiteFooter';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Footer/index.ts"],"names":["default","Footer","SiteFooter"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAApB,QAAkC,UAAlC;AACA,SAASD,OAAO,IAAIE,UAApB,QAAsC,cAAtC","sourcesContent":["export { default as Footer } from './Footer';\r\nexport { default as SiteFooter } from './SiteFooter';\r\n"],"file":"index.js"}