@laerdal/life-react-components 1.4.1-dev.2 → 1.4.1-dev.3

package/dist/umd/Footer/Components/FooterBottomLinks.js

@@ -0,0 +1,143 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "../../HyperLink", "../../styles", "../../styles/typography"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../../HyperLink"), require("../../styles"), require("../../styles/typography"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.HyperLink, global.styles, global.typography);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _HyperLink, _styles, _typography) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (nodeInterop) {
+      return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+  }
+
+  function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+      return obj;
+    }
+
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+      return {
+        default: obj
+      };
+    }
+
+    var cache = _getRequireWildcardCache(nodeInterop);
+
+    if (cache && cache.has(obj)) {
+      return cache.get(obj);
+    }
+
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+
+    for (var key in obj) {
+      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+        var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+
+        if (desc && (desc.get || desc.set)) {
+          Object.defineProperty(newObj, key, desc);
+        } else {
+          newObj[key] = obj[key];
+        }
+      }
+    }
+
+    newObj.default = obj;
+
+    if (cache) {
+      cache.set(obj, newObj);
+    }
+
+    return newObj;
+  }
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const FooterLinkSection = _styledComponents2.default.section`
+  min-height: 64px;
+  color: white;
+  display: flex;
+  flex-direction: column;
+
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    flex-direction: row;
+  }
+`;
+  const FooterLinks = _styledComponents2.default.div`
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    flex-direction: row;
+    margin: auto auto auto 0;
+  }
+
+  a {
+    ${(0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Bold, null)}
+    &:not(:first-child) {
+      margin: 16px 0 0 0;
+      ${_styles.BREAKPOINTS.MEDIUM} {
+        margin: 0 0 0 16px;
+      }
+    }
+  }
+`;
+  const Copyright = _styledComponents2.default.div`
+  ${(0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.white)}
+  margin: 16px auto 0 auto;
+
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    margin: auto 0 auto auto;
+  }
+`;
+
+  const FooterBottomLinks = ({
+    bottomLinks,
+    copyrightText
+  }) => {
+    return /*#__PURE__*/React.createElement(FooterLinkSection, null, /*#__PURE__*/React.createElement(FooterLinks, null, bottomLinks?.map((bl, i) => /*#__PURE__*/React.createElement(_HyperLink.HyperLink, {
+      id: `FooterLink_${Math.floor(Math.random() * 999999999999)}`,
+      key: i,
+      href: bl.to,
+      variant: "inverted"
+    }, bl.label))), /*#__PURE__*/React.createElement(Copyright, null, copyrightText));
+  };
+
+  FooterBottomLinks.propTypes = {
+    bottomLinks: _propTypes2.default.arrayOf(_propTypes2.default.shape({
+      label: _propTypes2.default.string.isRequired,
+      to: _propTypes2.default.string.isRequired,
+      target: _propTypes2.default.string
+    })),
+    copyrightText: _propTypes2.default.string
+  };
+  exports.default = FooterBottomLinks;
+});
+//# sourceMappingURL=FooterBottomLinks.js.map

package/dist/umd/Footer/Components/FooterBottomLinks.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Footer/Components/FooterBottomLinks.tsx"],"names":["FooterLinkSection","styled","section","BREAKPOINTS","MEDIUM","FooterLinks","div","ComponentXSStyling","ComponentTextStyle","Copyright","COLORS","label","to","target","bottomLinks","copyrightText","FooterBottomLinks","Math","bl"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,QAAMA,iBAAiB,GAAGC,2BAAOC,OAAQ;AACzC;AACA;AACA;AACA;AACA;AACA,IAAIC,oBAAYC,MAAO;AACvB;AACA;AARA,CAAA;AAWA,QAAMC,WAAW,GAAGJ,2BAAOK,GAAI;AAC/B;AACA;AACA;AACA;AACA,IAAIH,oBAAYC,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA,MAAMG,oCAAmBC,+BAAD,IAAlBD,EAAkB,IAAlBA,CAAkD;AACxD;AACA;AACA,QAAQJ,oBAAYC,MAAO;AAC3B;AACA;AACA;AACA;AAlBA,CAAA;AAqBA,QAAMK,SAAS,GAAGR,2BAAOK,GAAI;AAC7B,IAAIC,oCAAmBC,+BAAD,OAAlBD,EAA+CG,eAA7B,KAAlBH,CAA6D;AACjE;AACA;AACA,IAAIJ,oBAAYC,MAAO;AACvB;AACA;AANA,CAAA;;AAoBA,QAAMY,iBAAiB,GAAG,CAAC;AAAA,IAAA,WAAA;AAAeD,IAAAA;AAAf,GAAD,KAAqD;AAC7E,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,EACG,WAAW,EAAX,GAAA,CAAiB,CAAA,EAAA,EAAA,CAAA,KAAA,aAChB,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA;AAAW,MAAA,EAAE,EAAG,cAAaE,IAAI,CAAJA,KAAAA,CAAWA,IAAI,CAAJA,MAAAA,KAAXA,YAAAA,CAA7B,EAAA;AACW,MAAA,GAAG,EADd,CAAA;AAEW,MAAA,IAAI,EAAEC,EAAE,CAFnB,EAAA;AAEwB,MAAA,OAAO,EAAC;AAFhC,KAAA,EAGGA,EAAE,CANX,KAGM,CADD,CADH,CADF,EAAA,aAUE,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAA,EAXJ,aAWI,CAVF,CADF;AADF,GAAA;;;AAJEJ,IAAAA,W;AANAH,MAAAA,K;AACAC,MAAAA,E;AACAC,MAAAA,M;;AAKAE,IAAAA,a;;oBAoBF,iB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {HyperLink} from '../../HyperLink';\n\nimport {BREAKPOINTS, COLORS} from '../../styles';\nimport {ComponentTextStyle, ComponentXSStyling} from '../../styles/typography';\n\nconst FooterLinkSection = styled.section`\n  min-height: 64px;\n  color: white;\n  display: flex;\n  flex-direction: column;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n  }\n`;\n\nconst FooterLinks = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n    margin: auto auto auto 0;\n  }\n\n  a {\n    ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n    &:not(:first-child) {\n      margin: 16px 0 0 0;\n      ${BREAKPOINTS.MEDIUM} {\n        margin: 0 0 0 16px;\n      }\n    }\n  }\n`;\n\nconst Copyright = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white)}\n  margin: 16px auto 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: auto 0 auto auto;\n  }\n`;\n\ninterface Link {\n  label: string;\n  to: string;\n  target?: string;\n}\n\ninterface FooterLinkProps {\n  bottomLinks?: Link[];\n  copyrightText?: string;\n}\n\nconst FooterBottomLinks = ({ bottomLinks, copyrightText }: FooterLinkProps) => {\n  return (\n    <FooterLinkSection>\n      <FooterLinks>\n        {bottomLinks?.map((bl, i) => (\n          <HyperLink id={`FooterLink_${Math.floor(Math.random() * 999999999999)}`}\n                     key={i}\n                     href={bl.to} variant=\"inverted\">\n            {bl.label}\n          </HyperLink>\n        ))}\n      </FooterLinks>\n      <Copyright>{copyrightText}</Copyright>\n    </FooterLinkSection>\n  );\n};\n\nexport default FooterBottomLinks;\n"],"file":"FooterBottomLinks.js"}

package/dist/umd/Footer/Components/FooterDropdownLinks.js

@@ -0,0 +1,208 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "../../styles", "../../icons/systemicons/SystemIcons", "../../styles/typography", "../../HyperLink"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../../styles"), require("../../icons/systemicons/SystemIcons"), require("../../styles/typography"), require("../../HyperLink"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.SystemIcons, global.typography, global.HyperLink);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _SystemIcons, _typography, _HyperLink) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (nodeInterop) {
+      return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+  }
+
+  function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+      return obj;
+    }
+
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+      return {
+        default: obj
+      };
+    }
+
+    var cache = _getRequireWildcardCache(nodeInterop);
+
+    if (cache && cache.has(obj)) {
+      return cache.get(obj);
+    }
+
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+
+    for (var key in obj) {
+      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+        var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+
+        if (desc && (desc.get || desc.set)) {
+          Object.defineProperty(newObj, key, desc);
+        } else {
+          newObj[key] = obj[key];
+        }
+      }
+    }
+
+    newObj.default = obj;
+
+    if (cache) {
+      cache.set(obj, newObj);
+    }
+
+    return newObj;
+  }
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const Wrapper = _styledComponents2.default.div`
+  width: 100%;
+  border-top: 1px solid ${_styles.COLORS.neutral_100};
+
+  &:last-child {
+    border-bottom: 1px solid ${_styles.COLORS.neutral_100};
+  }
+`;
+  const DropdownLinkBlock = _styledComponents2.default.button`
+  ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.white)}
+
+  display: ${props => props.width > 768 ? 'none' : 'flex'};
+  justify-content: space-between;
+  width: 100%;
+  height: 48px;
+  background-color: transparent;
+  border: none;
+  padding: 0 16px;
+
+  &:hover,
+  .open {
+    background-color: ${_styles.COLORS.neutral_20};
+    color: ${_styles.COLORS.primary_700};
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:active {
+    background-color: ${_styles.COLORS.primary_100};
+    color: ${_styles.COLORS.primary_800};
+  }
+
+  &:focus {
+    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;
+    outline: none;
+  }
+
+  h3 {
+    margin: auto 0;
+    ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit')}
+  }
+
+  .open {
+    h3 {
+      background-color: ${_styles.COLORS.neutral_20};
+      color: ${_styles.COLORS.neutral_800};
+    }
+  }
+
+  svg {
+    margin: auto 0;
+  }
+`;
+  const LinkBlock = _styledComponents2.default.div`
+  display: none;
+  flex-direction: column;
+  font-weight: normal;
+  width: 100%;
+
+  &.show {
+    display: flex;
+  }
+
+  a {
+    text-decoration: none;
+
+    ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.white)}
+    
+    display: flex;
+    align-items: center;
+    
+    padding: 0 16px;
+    height: 48px;
+
+    &:hover {
+      background-color: ${_styles.COLORS.neutral_20};
+      color: ${_styles.COLORS.primary_700};
+      cursor: pointer;
+    }
+
+    &:focus {
+      background-color: ${_styles.COLORS.neutral_20};
+      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;
+      outline: none;
+    }
+
+    &:active {
+      background-color: ${_styles.COLORS.primary_100};
+      color: ${_styles.COLORS.primary_800};
+    }
+  }
+`;
+
+  const FooterDropdownLinks = ({
+    navSection,
+    width
+  }) => {
+    const [dropdownActive, setDropdownActive] = React.useState(false);
+    return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(DropdownLinkBlock, {
+      width: width,
+      className: dropdownActive ? 'open' : '',
+      onClick: () => setDropdownActive(!dropdownActive)
+    }, /*#__PURE__*/React.createElement("h3", null, navSection.header), dropdownActive ? /*#__PURE__*/React.createElement(_SystemIcons.ChevronUp, {
+      size: "24px"
+    }) : /*#__PURE__*/React.createElement(_SystemIcons.ChevronDown, {
+      size: "24px"
+    })), /*#__PURE__*/React.createElement(LinkBlock, {
+      width: width,
+      className: dropdownActive ? 'show' : ''
+    }, navSection.links.map((item, index) => /*#__PURE__*/React.createElement(_HyperLink.HyperLink, {
+      key: index,
+      id: `dropdownlink_${Math.floor(Math.random() * 999999999999)}`,
+      variant: 'inverted',
+      href: item.to,
+      target: item.target || '_blank',
+      rel: "noreferrer noopener"
+    }, item.label))));
+  };
+
+  FooterDropdownLinks.propTypes = {
+    width: _propTypes2.default.number.isRequired
+  };
+  exports.default = FooterDropdownLinks;
+});
+//# sourceMappingURL=FooterDropdownLinks.js.map

package/dist/umd/Footer/Components/FooterDropdownLinks.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Footer/Components/FooterDropdownLinks.tsx"],"names":["Wrapper","styled","div","COLORS","neutral_100","DropdownLinkBlock","button","ComponentSStyling","ComponentTextStyle","props","neutral_20","primary_700","primary_100","primary_800","ComponentMStyling","neutral_800","LinkBlock","width","FooterDropdownLinks","React","dropdownActive","setDropdownActive","navSection","Math","item"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport {ChevronDown, ChevronUp} from '../../icons/systemicons/SystemIcons';\nimport {NavSection} from '../../types';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles/typography';\nimport {HyperLink} from '../../HyperLink';\n\nconst Wrapper = styled.div`\n  width: 100%;\n  border-top: 1px solid ${COLORS.neutral_100};\n\n  &:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n`;\n\nconst DropdownLinkBlock = styled.button<{ width: number }>`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n  display: ${(props) => (props.width > 768 ? 'none' : 'flex')};\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: ${COLORS.neutral_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:active {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &:focus {\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n  }\n\n  h3 {\n    margin: auto 0;\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n\n  .open {\n    h3 {\n      background-color: ${COLORS.neutral_20};\n      color: ${COLORS.neutral_800};\n    }\n  }\n\n  svg {\n    margin: auto 0;\n  }\n`;\n\nconst LinkBlock = styled.div<{ width: number }>`\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    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n    \n    display: flex;\n    align-items: center;\n    \n    padding: 0 16px;\n    height: 48px;\n\n    &:hover {\n      background-color: ${COLORS.neutral_20};\n      color: ${COLORS.primary_700};\n      cursor: pointer;\n    }\n\n    &:focus {\n      background-color: ${COLORS.neutral_20};\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline: none;\n    }\n\n    &:active {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  }\n`;\n\ninterface FooterNavSectionProps {\n  navSection: NavSection;\n  width: number;\n}\n\nconst FooterDropdownLinks = ({ navSection, width }: FooterNavSectionProps) => {\n  const [dropdownActive, setDropdownActive] = React.useState<boolean>(false);\n  return (\n    <Wrapper>\n      <DropdownLinkBlock width={width} className={dropdownActive ? 'open' : ''} onClick={() => setDropdownActive(!dropdownActive)}>\n        <h3>{navSection.header}</h3>\n        {dropdownActive ? <ChevronUp size=\"24px\" /> : <ChevronDown size=\"24px\" />}\n      </DropdownLinkBlock>\n      <LinkBlock width={width} className={dropdownActive ? 'show' : ''}>\n        {navSection.links.map((item, index) => (\n          <HyperLink key={index}\n                     id={`dropdownlink_${Math.floor(Math.random() * 999999999999)}`}\n                     variant={'inverted'}\n                     href={item.to}\n                     target={item.target || '_blank'}\n                     rel=\"noreferrer noopener\">\n            {item.label}\n          </HyperLink>\n        ))}\n      </LinkBlock>\n    </Wrapper>\n  );\n};\n\nexport default FooterDropdownLinks;\n"],"file":"FooterDropdownLinks.js"}

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

@@ -0,0 +1,156 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "../../styles", "./FooterDropdownLinks", "../../styles/typography", "../../HyperLink"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../../styles"), require("./FooterDropdownLinks"), require("../../styles/typography"), require("../../HyperLink"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.FooterDropdownLinks, global.typography, global.HyperLink);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _FooterDropdownLinks, _typography, _HyperLink) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  var _FooterDropdownLinks2 = _interopRequireDefault(_FooterDropdownLinks);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (nodeInterop) {
+      return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+  }
+
+  function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+      return obj;
+    }
+
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+      return {
+        default: obj
+      };
+    }
+
+    var cache = _getRequireWildcardCache(nodeInterop);
+
+    if (cache && cache.has(obj)) {
+      return cache.get(obj);
+    }
+
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+
+    for (var key in obj) {
+      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+        var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+
+        if (desc && (desc.get || desc.set)) {
+          Object.defineProperty(newObj, key, desc);
+        } else {
+          newObj[key] = obj[key];
+        }
+      }
+    }
+
+    newObj.default = obj;
+
+    if (cache) {
+      cache.set(obj, newObj);
+    }
+
+    return newObj;
+  }
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const NavSection = _styledComponents2.default.section`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  flex-flow: flex-start;
+  color: white;
+  margin-bottom: 12px;
+`;
+  const LinkBlock = _styledComponents2.default.div`
+  display: ${props => props.width <= 768 ? 'none' : 'flex'};
+  flex-direction: column;
+  font-weight: normal;
+  width: 100%;
+
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    padding: 0 24px 24px 0;
+    width: calc(50% - 24px);
+  }
+
+  ${_styles.BREAKPOINTS.LARGE} {
+    width: calc(33% - 24px);
+  }
+  ${_styles.BREAKPOINTS.XLARGE} {
+    padding: 0 32px 32px 0;
+    width: calc(33% - 32px);
+  }
+
+  h3 {
+    ${(0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, 'inherit')}
+  }
+
+  a {
+    padding: 8px 0px;
+    ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.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.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(_FooterDropdownLinks2.default, {
+        key: `LinkBlockDropdown_${index}`,
+        navSection: no,
+        width: width
+      });
+    }));
+  };
+
+  FooterNavSection.propTypes = {
+    mainId: _propTypes2.default.string.isRequired
+  };
+  exports.default = FooterNavSection;
+});
+//# sourceMappingURL=FooterNavSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Footer/Components/FooterNavSection.tsx"],"names":["NavSection","styled","section","LinkBlock","div","props","BREAKPOINTS","MEDIUM","LARGE","XLARGE","ComponentLStyling","ComponentTextStyle","ComponentSStyling","COLORS","mainId","FooterNavSection","navOptions","React","window","setWidth","width","index","no","Math","link"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,QAAMA,UAAU,GAAGC,2BAAOC,OAAQ;AAClC;AACA;AACA;AACA;AACA;AACA;AANA,CAAA;AASA,QAAMC,SAAS,GAAGF,2BAAOG,GAAuB;AAChD,aAAcC,KAAD,IAAYA,KAAK,CAALA,KAAAA,IAAAA,GAAAA,GAAAA,MAAAA,GAA8B,MAAQ;AAC/D;AACA;AACA;AACA;AACA,IAAIC,oBAAYC,MAAO;AACvB;AACA;AACA;AACA;AACA,IAAID,oBAAYE,KAAM;AACtB;AACA;AACA,IAAIF,oBAAYG,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA,MAAMC,mCAAkBC,2BAAD,OAAjBD,EAAiB,SAAjBA,CAAyD;AAC/D;AACA;AACA;AACA;AACA,MAAME,mCAAkBD,2BAAD,IAAjBC,EAA2CC,eAA1B,KAAjBD,CAAyD;AAC/D;AA1BA,CAAA;;AAkCA,QAAMG,gBAAgB,GAAG,CAAC;AAAEC,IAAAA;AAAF,GAAD,KAA2C;AAClE,UAAM,CAAA,KAAA,EAAA,QAAA,IAAoBC,KAAK,CAALA,QAAAA,CAAuBC,MAAM,CAAvD,UAA0BD,CAA1B;AACAA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,eAAA,YAAA,GAAwB;AACtBE,QAAAA,QAAQ,CAACD,MAAM,CAAfC,UAAQ,CAARA;AACD;;AACDD,MAAAA,MAAM,CAANA,gBAAAA,CAAAA,QAAAA,EAAAA,YAAAA;AAJFD,KAAAA;AAOA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA,EACG,UAAU,CAAV,QAAA,EAAA,GAAA,CAAyB,CAAA,EAAA,EAAA,KAAA,KAAe;AACvC,aAAOG,KAAK,GAALA,GAAAA,GAAAA,aACL,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAW,QAAA,GAAG,EAAG,aAAYC,KAA7B,EAAA;AAAsC,QAAA,KAAK,EAAED;AAA7C,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAKE,EAAE,CADT,MACE,CADF,EAEG,EAAE,CAAF,KAAA,CAAA,GAAA,CAAa,CAAA,IAAA,EAAA,KAAA,KAAA,aACZ,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA;AAAW,QAAA,GAAG,EAAd,KAAA;AACW,QAAA,EAAE,EAAG,gBAAeC,IAAI,CAAJA,KAAAA,CAAWA,IAAI,CAAJA,MAAAA,KAAXA,YAAAA,CAD/B,EAAA;AAEW,QAAA,OAAO,EAFlB,UAAA;AAGW,QAAA,IAAI,EAAEC,IAAI,CAHrB,EAAA;AAIW,QAAA,MAAM,EAAEA,IAAI,CAAJA,MAAAA,IAJnB,QAAA;AAKW,QAAA,GAAG,EAAC;AALf,OAAA,EAMGA,IAAI,CAVNJ,KAID,CADD,CAFH,CADKA,GAAAA,aAeL,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAqB,QAAA,GAAG,EAAG,qBAAoBC,KAA/C,EAAA;AAAwD,QAAA,UAAU,EAAlE,EAAA;AAAwE,QAAA,KAAK,EAAED;AAA/E,OAAA,CAfF;AAHN,KAEK,CADH,CADF;AATF,GAAA;;;AAHEN,IAAAA,M;;oBAqCF,gB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles';\nimport FooterDropdownLinks from './FooterDropdownLinks';\nimport {NavOptions} from '../../types';\nimport {ComponentLStyling, ComponentSStyling} from '../../styles/typography';\nimport {HyperLink} from '../../HyperLink';\n\nconst NavSection = styled.section`\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\nconst LinkBlock = styled.div<{ width: number }>`\n  display: ${(props) => (props.width <= 768 ? 'none' : 'flex')};\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  ${BREAKPOINTS.MEDIUM} {\n    padding: 0 24px 24px 0;\n    width: calc(50% - 24px);\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    width: calc(33% - 24px);\n  }\n  ${BREAKPOINTS.XLARGE} {\n    padding: 0 32px 32px 0;\n    width: calc(33% - 32px);\n  }\n\n  h3 {\n    ${ComponentLStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n\n  a {\n    padding: 8px 0px;\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n  }\n`;\n\ninterface FooterNavSectionProps {\n  navOptions: NavOptions;\n  mainId: string;\n}\n\nconst FooterNavSection = ({ navOptions }: FooterNavSectionProps) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  return (\n    <NavSection>\n      {navOptions.sections?.map((no, index) => {\n        return width > 768 ? (\n          <LinkBlock key={`LinkBlock_${index}`} width={width}>\n            <h3>{no.header}</h3>\n            {no.links.map((link, index) => (\n              <HyperLink key={index}\n                         id={`dropdownlink_${Math.floor(Math.random() * 999999999999)}`}\n                         variant={'inverted'}\n                         href={link.to}\n                         target={link.target || '_blank'}\n                         rel=\"noreferrer noopener\">\n                {link.label}\n              </HyperLink>\n            ))}\n          </LinkBlock>\n        ) : (\n          <FooterDropdownLinks key={`LinkBlockDropdown_${index}`} navSection={no} width={width} />\n        );\n      })}\n    </NavSection>\n  );\n};\n\nexport default FooterNavSection;\n"],"file":"FooterNavSection.js"}