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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Footer/Components/FooterBottomLinks.tsx"],"names":["React","styled","HyperLink","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentXSStyling","FooterLinkSection","section","MEDIUM","FooterLinks","div","Bold","Copyright","Regular","white","FooterBottomLinks","bottomLinks","copyrightText","map","bl","i","Math","floor","random","to","label","target"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,SAAR,QAAwB,iBAAxB;AAEA,SAAQC,WAAR,EAAqBC,MAArB,QAAkC,cAAlC;AACA,SAAQC,kBAAR,EAA4BC,kBAA5B,QAAqD,yBAArD;AAEA,MAAMC,iBAAiB,GAAGN,MAAM,CAACO,OAAQ;AACzC;AACA;AACA;AACA;AACA;AACA,IAAIL,WAAW,CAACM,MAAO;AACvB;AACA;AACA,CATA;AAWA,MAAMC,WAAW,GAAGT,MAAM,CAACU,GAAI;AAC/B;AACA;AACA;AACA;AACA,IAAIR,WAAW,CAACM,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA,MAAMH,kBAAkB,CAACD,kBAAkB,CAACO,IAApB,EAA0B,IAA1B,CAAgC;AACxD;AACA;AACA,QAAQT,WAAW,CAACM,MAAO;AAC3B;AACA;AACA;AACA;AACA,CAnBA;AAqBA,MAAMI,SAAS,GAAGZ,MAAM,CAACU,GAAI;AAC7B,IAAIL,kBAAkB,CAACD,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAA2C;AACjE;AACA;AACA,IAAIZ,WAAW,CAACM,MAAO;AACvB;AACA;AACA,CAPA;;AAoBA,MAAMO,iBAAiB,GAAG,CAAC;AAAEC,EAAAA,WAAF;AAAeC,EAAAA;AAAf,CAAD,KAAqD;AAC7E,sBACE,oBAAC,iBAAD,qBACE,oBAAC,WAAD,QACGD,WAAW,EAAEE,GAAb,CAAiB,CAACC,EAAD,EAAKC,CAAL,kBAChB,oBAAC,SAAD;AAAW,IAAA,EAAE,EAAG,cAAaC,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAyC,EAAtE;AACW,IAAA,GAAG,EAAEH,CADhB;AAEW,IAAA,IAAI,EAAED,EAAE,CAACK,EAFpB;AAEwB,IAAA,OAAO,EAAC;AAFhC,KAGGL,EAAE,CAACM,KAHN,CADD,CADH,CADF,eAUE,oBAAC,SAAD,QAAYR,aAAZ,CAVF,CADF;AAcD,CAfD;;;AAJED,EAAAA,W;AANAS,IAAAA,K;AACAD,IAAAA,E;AACAE,IAAAA,M;;AAKAT,EAAAA,a;;AAoBF,eAAeF,iBAAf","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"}
+{"version":3,"sources":["../../../../src/Footer/Components/FooterBottomLinks.tsx"],"names":["React","styled","HyperLink","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentXSStyling","FooterLinkSection","section","MEDIUM","FooterLinks","div","Bold","Copyright","Regular","white","FooterBottomLinks","bottomLinks","copyrightText","map","bl","i","Math","floor","random","to","label","target"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,SAAR,QAAwB,iBAAxB;AAEA,SAAQC,WAAR,EAAqBC,MAArB,QAAkC,cAAlC;AACA,SAAQC,kBAAR,EAA4BC,kBAA5B,QAAqD,yBAArD;;;AAEA,IAAMC,iBAAiB,GAAGN,MAAM,CAACO,OAAV,sMAMnBL,WAAW,CAACM,MANO,CAAvB;AAWA,IAAMC,WAAW,GAAGT,MAAM,CAACU,GAAV,6VAKbR,WAAW,CAACM,MALC,EAWXH,kBAAkB,CAACD,kBAAkB,CAACO,IAApB,EAA0B,IAA1B,CAXP,EAcTT,WAAW,CAACM,MAdH,CAAjB;AAqBA,IAAMI,SAAS,GAAGZ,MAAM,CAACU,GAAV,+JACXL,kBAAkB,CAACD,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CADP,EAIXZ,WAAW,CAACM,MAJD,CAAf;;AAoBA,IAAMO,iBAAiB,GAAG,SAApBA,iBAAoB,OAAqD;AAAA,MAAlDC,WAAkD,QAAlDA,WAAkD;AAAA,MAArCC,aAAqC,QAArCA,aAAqC;AAC7E,sBACE,MAAC,iBAAD;AAAA,4BACE,KAAC,WAAD;AAAA,gBACGD,WADH,aACGA,WADH,uBACGA,WAAW,CAAEE,GAAb,CAAiB,UAACC,EAAD,EAAKC,CAAL;AAAA,4BAChB,KAAC,SAAD;AAAW,UAAA,EAAE,uBAAgBC,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAhB,CAAb;AAEW,UAAA,IAAI,EAAEJ,EAAE,CAACK,EAFpB;AAEwB,UAAA,OAAO,EAAC,UAFhC;AAAA,oBAGGL,EAAE,CAACM;AAHN,WACgBL,CADhB,CADgB;AAAA,OAAjB;AADH,MADF,eAUE,KAAC,SAAD;AAAA,gBAAYH;AAAZ,MAVF;AAAA,IADF;AAcD,CAfD;;;AAJED,EAAAA,W;AANAS,IAAAA,K;AACAD,IAAAA,E;AACAE,IAAAA,M;;AAKAT,EAAAA,a;;AAoBF,eAAeF,iBAAf","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/esm/Footer/Components/FooterDropdownLinks.js

@@ -1,129 +1,61 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3;
+
 import * as React from 'react';
 import styled from 'styled-components';
 import { COLORS, ComponentTextStyle } from '../../styles';
 import { ChevronDown, ChevronUp } from '../../icons/systemicons/SystemIcons';
 import { ComponentMStyling, ComponentSStyling } from '../../styles/typography';
 import { HyperLink } from '../../HyperLink';
-const Wrapper = styled.div`
-  width: 100%;
-  border-top: 1px solid ${COLORS.neutral_100};
-
-  &:last-child {
-    border-bottom: 1px solid ${COLORS.neutral_100};
-  }
-`;
-const DropdownLinkBlock = styled.button`
-  ${ComponentSStyling(ComponentTextStyle.Bold, 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: ${COLORS.neutral_20};
-    color: ${COLORS.primary_700};
-  }
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &:active {
-    background-color: ${COLORS.primary_100};
-    color: ${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;
-    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}
-  }
-
-  .open {
-    h3 {
-      background-color: ${COLORS.neutral_20};
-      color: ${COLORS.neutral_800};
-    }
-  }
-
-  svg {
-    margin: auto 0;
-  }
-`;
-const LinkBlock = styled.div`
-  display: none;
-  flex-direction: column;
-  font-weight: normal;
-  width: 100%;
-
-  &.show {
-    display: flex;
-  }
-
-  a {
-    text-decoration: none;
-
-    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}
-    
-    display: flex;
-    align-items: center;
-    
-    padding: 0 16px;
-    height: 48px;
-
-    &:hover {
-      background-color: ${COLORS.neutral_20};
-      color: ${COLORS.primary_700};
-      cursor: pointer;
-    }
-
-    &:focus {
-      background-color: ${COLORS.neutral_20};
-      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;
-      outline: none;
-    }
-
-    &:active {
-      background-color: ${COLORS.primary_100};
-      color: ${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(ChevronUp, {
-    size: "24px"
-  }) : /*#__PURE__*/React.createElement(ChevronDown, {
-    size: "24px"
-  })), /*#__PURE__*/React.createElement(LinkBlock, {
-    width: width,
-    className: dropdownActive ? 'show' : ''
-  }, navSection.links.map((item, index) => /*#__PURE__*/React.createElement(HyperLink, {
-    key: index,
-    id: `dropdownlink_${Math.floor(Math.random() * 999999999999)}`,
-    variant: 'inverted',
-    href: item.to,
-    target: item.target || '_blank',
-    rel: "noreferrer noopener"
-  }, item.label))));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  border-top: 1px solid ", ";\n\n  &:last-child {\n    border-bottom: 1px solid ", ";\n  }\n"])), COLORS.neutral_100, COLORS.neutral_100);
+var DropdownLinkBlock = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n\n  display: ", ";\n  justify-content: space-between;\n  width: 100%;\n  height: 48px;\n  background-color: transparent;\n  border: none;\n  padding: 0 16px;\n\n  &:hover,\n  .open {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    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    ", "\n  }\n\n  .open {\n    h3 {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  svg {\n    margin: auto 0;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white), function (props) {
+  return props.width > 768 ? 'none' : 'flex';
+}, COLORS.neutral_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, ComponentMStyling(ComponentTextStyle.Regular, 'inherit'), COLORS.neutral_20, COLORS.neutral_800);
+var LinkBlock = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: none;\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  &.show {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n\n    ", "\n    \n    display: flex;\n    align-items: center;\n    \n    padding: 0 16px;\n    height: 48px;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n\n    &:focus {\n      background-color: ", ";\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: ", ";\n      color: ", ";\n    }\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white), COLORS.neutral_20, COLORS.primary_700, COLORS.neutral_20, COLORS.primary_100, COLORS.primary_800);
+
+var FooterDropdownLinks = function FooterDropdownLinks(_ref) {
+  var navSection = _ref.navSection,
+      width = _ref.width;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      dropdownActive = _React$useState2[0],
+      setDropdownActive = _React$useState2[1];
+
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    children: [/*#__PURE__*/_jsxs(DropdownLinkBlock, {
+      width: width,
+      className: dropdownActive ? 'open' : '',
+      onClick: function onClick() {
+        return setDropdownActive(!dropdownActive);
+      },
+      children: [/*#__PURE__*/_jsx("h3", {
+        children: navSection.header
+      }), dropdownActive ? /*#__PURE__*/_jsx(ChevronUp, {
+        size: "24px"
+      }) : /*#__PURE__*/_jsx(ChevronDown, {
+        size: "24px"
+      })]
+    }), /*#__PURE__*/_jsx(LinkBlock, {
+      width: width,
+      className: dropdownActive ? 'show' : '',
+      children: navSection.links.map(function (item, index) {
+        return /*#__PURE__*/_jsx(HyperLink, {
+          id: "dropdownlink_".concat(Math.floor(Math.random() * 999999999999)),
+          variant: 'inverted',
+          href: item.to,
+          target: item.target || '_blank',
+          rel: "noreferrer noopener",
+          children: item.label
+        }, index);
+      })
+    })]
+  });
 };
 
 FooterDropdownLinks.propTypes = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Footer/Components/FooterDropdownLinks.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ChevronDown","ChevronUp","ComponentMStyling","ComponentSStyling","HyperLink","Wrapper","div","neutral_100","DropdownLinkBlock","button","Bold","white","props","width","neutral_20","primary_700","primary_100","primary_800","Regular","neutral_800","LinkBlock","FooterDropdownLinks","navSection","dropdownActive","setDropdownActive","useState","header","links","map","item","index","Math","floor","random","to","target","label"],"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"}
+{"version":3,"sources":["../../../../src/Footer/Components/FooterDropdownLinks.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ChevronDown","ChevronUp","ComponentMStyling","ComponentSStyling","HyperLink","Wrapper","div","neutral_100","DropdownLinkBlock","button","Bold","white","props","width","neutral_20","primary_700","primary_100","primary_800","Regular","neutral_800","LinkBlock","FooterDropdownLinks","navSection","useState","dropdownActive","setDropdownActive","header","links","map","item","index","Math","floor","random","to","target","label"],"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/esm/Footer/Components/FooterNavSection.js

@@ -1,75 +1,61 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+
+var _templateObject, _templateObject2;
+
 import * as React from 'react';
 import styled from 'styled-components';
 import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles';
 import FooterDropdownLinks from './FooterDropdownLinks';
 import { ComponentLStyling, ComponentSStyling } from '../../styles/typography';
 import { HyperLink } from '../../HyperLink';
-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%;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var NavSection = styled.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  flex-flow: flex-start;\n  color: white;\n  margin-bottom: 12px;\n"])));
+var LinkBlock = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: ", ";\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  ", " {\n    padding: 0 24px 24px 0;\n    width: calc(50% - 24px);\n  }\n\n  ", " {\n    width: calc(33% - 24px);\n  }\n  ", " {\n    padding: 0 32px 32px 0;\n    width: calc(33% - 32px);\n  }\n\n  h3 {\n    ", "\n  }\n\n  a {\n    padding: 8px 0px;\n    ", "\n  }\n"])), function (props) {
+  return props.width <= 768 ? 'none' : 'flex';
+}, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, BREAKPOINTS.XLARGE, ComponentLStyling(ComponentTextStyle.Regular, 'inherit'), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white));
 
-  ${BREAKPOINTS.MEDIUM} {
-    padding: 0 24px 24px 0;
-    width: calc(50% - 24px);
-  }
+var FooterNavSection = function FooterNavSection(_ref) {
+  var _navOptions$sections;
 
-  ${BREAKPOINTS.LARGE} {
-    width: calc(33% - 24px);
-  }
-  ${BREAKPOINTS.XLARGE} {
-    padding: 0 32px 32px 0;
-    width: calc(33% - 32px);
-  }
+  var navOptions = _ref.navOptions;
 
-  h3 {
-    ${ComponentLStyling(ComponentTextStyle.Regular, 'inherit')}
-  }
+  var _React$useState = React.useState(window.innerWidth),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      width = _React$useState2[0],
+      setWidth = _React$useState2[1];
 
-  a {
-    padding: 8px 0px;
-    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}
-  }
-`;
-
-const FooterNavSection = ({
-  navOptions
-}) => {
-  const [width, setWidth] = React.useState(window.innerWidth);
-  React.useEffect(() => {
+  React.useEffect(function () {
     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
-    });
-  }));
+  return /*#__PURE__*/_jsx(NavSection, {
+    children: (_navOptions$sections = navOptions.sections) === null || _navOptions$sections === void 0 ? void 0 : _navOptions$sections.map(function (no, index) {
+      return width > 768 ? /*#__PURE__*/_jsxs(LinkBlock, {
+        width: width,
+        children: [/*#__PURE__*/_jsx("h3", {
+          children: no.header
+        }), no.links.map(function (link, index) {
+          return /*#__PURE__*/_jsx(HyperLink, {
+            id: "dropdownlink_".concat(Math.floor(Math.random() * 999999999999)),
+            variant: 'inverted',
+            href: link.to,
+            target: link.target || '_blank',
+            rel: "noreferrer noopener",
+            children: link.label
+          }, index);
+        })]
+      }, "LinkBlock_".concat(index)) : /*#__PURE__*/_jsx(FooterDropdownLinks, {
+        navSection: no,
+        width: width
+      }, "LinkBlockDropdown_".concat(index));
+    })
+  });
 };
 
 FooterNavSection.propTypes = {

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

@@ -1 +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';\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"}
+{"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","useState","window","innerWidth","setWidth","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,IAAMC,UAAU,GAAGR,MAAM,CAACS,OAAV,wMAAhB;AASA,IAAMC,SAAS,GAAGV,MAAM,CAACW,GAAV,4aACF,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,KAAN,IAAe,GAAf,GAAqB,MAArB,GAA8B,MAA1C;AAAA,CADE,EAMXZ,WAAW,CAACa,MAND,EAWXb,WAAW,CAACc,KAXD,EAcXd,WAAW,CAACe,MAdD,EAoBTX,iBAAiB,CAACF,kBAAkB,CAACc,OAApB,EAA6B,SAA7B,CApBR,EAyBTX,iBAAiB,CAACH,kBAAkB,CAACe,IAApB,EAA0BhB,MAAM,CAACiB,KAAjC,CAzBR,CAAf;;AAkCA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAA2C;AAAA;;AAAA,MAAxCC,UAAwC,QAAxCA,UAAwC;;AAClE,wBAA0BtB,KAAK,CAACuB,QAAN,CAAuBC,MAAM,CAACC,UAA9B,CAA1B;AAAA;AAAA,MAAOX,KAAP;AAAA,MAAcY,QAAd;;AACA1B,EAAAA,KAAK,CAAC2B,SAAN,CAAgB,YAAM;AACpB,aAASC,YAAT,GAAwB;AACtBF,MAAAA,QAAQ,CAACF,MAAM,CAACC,UAAR,CAAR;AACD;;AACDD,IAAAA,MAAM,CAACK,gBAAP,CAAwB,QAAxB,EAAkCD,YAAlC;AACD,GALD;AAOA,sBACE,KAAC,UAAD;AAAA,sCACGN,UAAU,CAACQ,QADd,yDACG,qBAAqBC,GAArB,CAAyB,UAACC,EAAD,EAAKC,KAAL,EAAe;AACvC,aAAOnB,KAAK,GAAG,GAAR,gBACL,MAAC,SAAD;AAAsC,QAAA,KAAK,EAAEA,KAA7C;AAAA,gCACE;AAAA,oBAAKkB,EAAE,CAACE;AAAR,UADF,EAEGF,EAAE,CAACG,KAAH,CAASJ,GAAT,CAAa,UAACK,IAAD,EAAOH,KAAP;AAAA,8BACZ,KAAC,SAAD;AACW,YAAA,EAAE,yBAAkBI,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAlB,CADb;AAEW,YAAA,OAAO,EAAE,UAFpB;AAGW,YAAA,IAAI,EAAEH,IAAI,CAACI,EAHtB;AAIW,YAAA,MAAM,EAAEJ,IAAI,CAACK,MAAL,IAAe,QAJlC;AAKW,YAAA,GAAG,EAAC,qBALf;AAAA,sBAMGL,IAAI,CAACM;AANR,aAAgBT,KAAhB,CADY;AAAA,SAAb,CAFH;AAAA,6BAA6BA,KAA7B,EADK,gBAeL,KAAC,mBAAD;AAAwD,QAAA,UAAU,EAAED,EAApE;AAAwE,QAAA,KAAK,EAAElB;AAA/E,qCAA+CmB,KAA/C,EAfF;AAiBD,KAlBA;AADH,IADF;AAuBD,CAhCD;;;AAHEU,EAAAA,M;;AAqCF,eAAetB,gBAAf","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"}