@laerdal/life-react-components 2.0.1-dev.9 → 2.1.0

package/dist/Footer/Components/FooterDropdownLinks.cjs

@@ -1,59 +1,37 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _styles = require("../../styles");
-
 var _SystemIcons = require("../../icons/systemicons/SystemIcons");
-
 var _typography = require("../../styles/typography");
-
 var _HyperLink = require("../../HyperLink");
-
 var _common = require("../../common");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _templateObject, _templateObject2, _templateObject3;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
-
 var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  border-top: 1px solid ", ";\n\n  &:last-child {\n    border-bottom: 1px solid ", ";\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_100);
-
 var DropdownLinkBlock = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  display: ", ";\n  justify-content: space-between;\n  width: 100%;\n  height: 48px;\n  background-color: transparent;\n  border: none;\n  padding: 0 16px;\n\n  &:hover,\n  .open {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  h3 {\n    margin: auto 0;\n    ", "\n  }\n\n  .open {\n    h3 {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  svg {\n    margin: auto 0;\n  }\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.white), function (props) {
   return props.width > 768 ? 'none' : 'flex';
 }, _styles.COLORS.neutral_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.invertedFocusStyles, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), _styles.COLORS.neutral_20, _styles.COLORS.neutral_800);
-
 var LinkBlock = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  &.show {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n\n    ", "\n    \n    display: flex;\n    align-items: center;\n    \n    padding: 0 16px;\n    height: 48px;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.white), _styles.COLORS.neutral_20, _styles.COLORS.primary_700, _styles.invertedFocusStyles, _styles.COLORS.primary_100, _styles.COLORS.primary_800);
-
 var FooterDropdownLinks = function FooterDropdownLinks(_ref) {
   var navSection = _ref.navSection,
-      width = _ref.width;
-
+    width = _ref.width;
   var _React$useState = React.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      dropdownActive = _React$useState2[0],
-      setDropdownActive = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    dropdownActive = _React$useState2[0],
+    setDropdownActive = _React$useState2[1];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(DropdownLinkBlock, {
       width: width,
@@ -85,7 +63,6 @@ var FooterDropdownLinks = function FooterDropdownLinks(_ref) {
     })]
   });
 };
-
 FooterDropdownLinks.propTypes = {
   width: _propTypes.default.number.isRequired
 };

package/dist/Footer/Components/FooterDropdownLinks.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FooterDropdownLinks.cjs","names":["Wrapper","styled","div","COLORS","neutral_100","DropdownLinkBlock","button","ComponentSStyling","ComponentTextStyle","Bold","white","props","width","neutral_20","primary_700","primary_100","primary_800","invertedFocusStyles","ComponentMStyling","Regular","neutral_800","LinkBlock","FooterDropdownLinks","navSection","React","useState","dropdownActive","setDropdownActive","defaultOnMouseDownHandler","header","links","map","item","index","Math","floor","random","to","target","label"],"sources":["../../../src/Footer/Components/FooterDropdownLinks.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../../styles';\nimport {ChevronDown, ChevronUp} from '../../icons/systemicons/SystemIcons';\nimport {NavSection} from '../../types';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles/typography';\nimport {HyperLink} from '../../HyperLink';\nimport {defaultOnMouseDownHandler} from '../../common';\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    ${invertedFocusStyles}\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      ${invertedFocusStyles}\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}\n                         className={dropdownActive ? 'open' : ''}\n                         onMouseDown={defaultOnMouseDownHandler}\n                         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"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,yBAAA,CAAOC,GAAV,kMAEaC,cAAA,CAAOC,WAFpB,EAKkBD,cAAA,CAAOC,WALzB,CAAb;;AASA,IAAMC,iBAAiB,GAAGJ,yBAAA,CAAOK,MAAV,ioBACnB,IAAAC,6BAAA,EAAkBC,0BAAA,CAAmBC,IAArC,EAA2CN,cAAA,CAAOO,KAAlD,CADmB,EAGV,UAACC,KAAD;EAAA,OAAYA,KAAK,CAACC,KAAN,GAAc,GAAd,GAAoB,MAApB,GAA6B,MAAzC;AAAA,CAHU,EAaCT,cAAA,CAAOU,UAbR,EAcVV,cAAA,CAAOW,WAdG,EAsBCX,cAAA,CAAOY,WAtBR,EAuBVZ,cAAA,CAAOa,WAvBG,EA2BjBC,2BA3BiB,EAgCjB,IAAAC,6BAAA,EAAkBV,0BAAA,CAAmBW,OAArC,EAA8C,SAA9C,CAhCiB,EAqCGhB,cAAA,CAAOU,UArCV,EAsCRV,cAAA,CAAOiB,WAtCC,CAAvB;;AA+CA,IAAMC,SAAS,GAAGpB,yBAAA,CAAOC,GAAV,gkBAaT,IAAAK,6BAAA,EAAkBC,0BAAA,CAAmBC,IAArC,EAA2CN,cAAA,CAAOO,KAAlD,CAbS,EAsBWP,cAAA,CAAOU,UAtBlB,EAuBAV,cAAA,CAAOW,WAvBP,EA4BPG,2BA5BO,EAgCWd,cAAA,CAAOY,WAhClB,EAiCAZ,cAAA,CAAOa,WAjCP,CAAf;;AA2CA,IAAMM,mBAAmB,GAAG,SAAtBA,mBAAsB,OAAkD;EAAA,IAA/CC,UAA+C,QAA/CA,UAA+C;EAAA,IAAnCX,KAAmC,QAAnCA,KAAmC;;EAC5E,sBAA4CY,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAA5C;EAAA;EAAA,IAAOC,cAAP;EAAA,IAAuBC,iBAAvB;;EACA,oBACE,sBAAC,OAAD;IAAA,wBACE,sBAAC,iBAAD;MAAmB,KAAK,EAAEf,KAA1B;MACmB,SAAS,EAAEc,cAAc,GAAG,MAAH,GAAY,EADxD;MAEmB,WAAW,EAAEE,iCAFhC;MAGmB,OAAO,EAAE;QAAA,OAAMD,iBAAiB,CAAC,CAACD,cAAF,CAAvB;MAAA,CAH5B;MAAA,wBAIE;QAAA,UAAKH,UAAU,CAACM;MAAhB,EAJF,EAKGH,cAAc,gBAAG,qBAAC,sBAAD;QAAW,IAAI,EAAC;MAAhB,EAAH,gBAA+B,qBAAC,wBAAD;QAAa,IAAI,EAAC;MAAlB,EALhD;IAAA,EADF,eAQE,qBAAC,SAAD;MAAW,KAAK,EAAEd,KAAlB;MAAyB,SAAS,EAAEc,cAAc,GAAG,MAAH,GAAY,EAA9D;MAAA,UACGH,UAAU,CAACO,KAAX,CAAiBC,GAAjB,CAAqB,UAACC,IAAD,EAAOC,KAAP;QAAA,oBACpB,qBAAC,oBAAD;UACW,EAAE,yBAAkBC,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAlB,CADb;UAEW,OAAO,EAAE,UAFpB;UAGW,IAAI,EAAEJ,IAAI,CAACK,EAHtB;UAIW,MAAM,EAAEL,IAAI,CAACM,MAAL,IAAe,QAJlC;UAKW,GAAG,EAAC,qBALf;UAAA,UAMGN,IAAI,CAACO;QANR,GAAgBN,KAAhB,CADoB;MAAA,CAArB;IADH,EARF;EAAA,EADF;AAuBD,CAzBD;;;EAHErB,K;;eA8BaU,mB"}
+{"version":3,"file":"FooterDropdownLinks.cjs","names":["Wrapper","styled","div","COLORS","neutral_100","DropdownLinkBlock","button","ComponentSStyling","ComponentTextStyle","Bold","white","props","width","neutral_20","primary_700","primary_100","primary_800","invertedFocusStyles","ComponentMStyling","Regular","neutral_800","LinkBlock","FooterDropdownLinks","navSection","React","useState","dropdownActive","setDropdownActive","defaultOnMouseDownHandler","header","links","map","item","index","Math","floor","random","to","target","label"],"sources":["../../../src/Footer/Components/FooterDropdownLinks.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../../styles';\nimport {ChevronDown, ChevronUp} from '../../icons/systemicons/SystemIcons';\nimport {NavSection} from '../../types';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles/typography';\nimport {HyperLink} from '../../HyperLink';\nimport {defaultOnMouseDownHandler} from '../../common';\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    ${invertedFocusStyles}\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      ${invertedFocusStyles}\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}\n                         className={dropdownActive ? 'open' : ''}\n                         onMouseDown={defaultOnMouseDownHandler}\n                         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"],"mappings":";;;;;;;;;;;AAAA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAAuD;AAAA;AAAA;AAAA;AAEvD,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,kMAEAC,cAAM,CAACC,WAAW,EAGbD,cAAM,CAACC,WAAW,CAEhD;AAED,IAAMC,iBAAiB,GAAGJ,yBAAM,CAACK,MAAM,ioBACnC,IAAAC,6BAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAEN,cAAM,CAACO,KAAK,CAAC,EAE/C,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,KAAK,GAAG,GAAG,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC,EAUrCT,cAAM,CAACU,UAAU,EAC5BV,cAAM,CAACW,WAAW,EAQPX,cAAM,CAACY,WAAW,EAC7BZ,cAAM,CAACa,WAAW,EAIzBC,2BAAmB,EAKnB,IAAAC,6BAAiB,EAACV,0BAAkB,CAACW,OAAO,EAAE,SAAS,CAAC,EAKpChB,cAAM,CAACU,UAAU,EAC5BV,cAAM,CAACiB,WAAW,CAOhC;AAED,IAAMC,SAAS,GAAGpB,yBAAM,CAACC,GAAG,gkBAatB,IAAAK,6BAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAEN,cAAM,CAACO,KAAK,CAAC,EASpCP,cAAM,CAACU,UAAU,EAC5BV,cAAM,CAACW,WAAW,EAKzBG,2BAAmB,EAIDd,cAAM,CAACY,WAAW,EAC7BZ,cAAM,CAACa,WAAW,CAGhC;AAOD,IAAMM,mBAAmB,GAAG,SAAtBA,mBAAmB,OAAqD;EAAA,IAA/CC,UAAU,QAAVA,UAAU;IAAEX,KAAK,QAALA,KAAK;EAC9C,sBAA4CY,KAAK,CAACC,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAnEC,cAAc;IAAEC,iBAAiB;EACxC,oBACE,sBAAC,OAAO;IAAA,wBACN,sBAAC,iBAAiB;MAAC,KAAK,EAAEf,KAAM;MACb,SAAS,EAAEc,cAAc,GAAG,MAAM,GAAG,EAAG;MACxC,WAAW,EAAEE,iCAA0B;MACvC,OAAO,EAAE;QAAA,OAAMD,iBAAiB,CAAC,CAACD,cAAc,CAAC;MAAA,CAAC;MAAA,wBACnE;QAAA,UAAKH,UAAU,CAACM;MAAM,EAAM,EAC3BH,cAAc,gBAAG,qBAAC,sBAAS;QAAC,IAAI,EAAC;MAAM,EAAG,gBAAG,qBAAC,wBAAW;QAAC,IAAI,EAAC;MAAM,EAAG;IAAA,EACvD,eACpB,qBAAC,SAAS;MAAC,KAAK,EAAEd,KAAM;MAAC,SAAS,EAAEc,cAAc,GAAG,MAAM,GAAG,EAAG;MAAA,UAC9DH,UAAU,CAACO,KAAK,CAACC,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;QAAA,oBAChC,qBAAC,oBAAS;UACC,EAAE,yBAAkBC,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,EAAE,GAAG,YAAY,CAAC,CAAG;UAC/D,OAAO,EAAE,UAAW;UACpB,IAAI,EAAEJ,IAAI,CAACK,EAAG;UACd,MAAM,EAAEL,IAAI,CAACM,MAAM,IAAI,QAAS;UAChC,GAAG,EAAC,qBAAqB;UAAA,UACjCN,IAAI,CAACO;QAAK,GANGN,KAAK,CAOT;MAAA,CACb;IAAC,EACQ;EAAA,EACJ;AAEd,CAAC;AAAC;EA5BArB,KAAK;AAAA;AAAA,eA8BQU,mBAAmB;AAAA"}

package/dist/Footer/Components/FooterDropdownLinks.js

@@ -1,9 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-
 var _templateObject, _templateObject2, _templateObject3;
-
 import * as React from 'react';
 import styled from 'styled-components';
 import { COLORS, ComponentTextStyle, invertedFocusStyles } from '../../styles';
@@ -18,16 +16,13 @@ var DropdownLinkBlock = styled.button(_templateObject2 || (_templateObject2 = _t
   return props.width > 768 ? 'none' : 'flex';
 }, COLORS.neutral_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, invertedFocusStyles, ComponentMStyling(ComponentTextStyle.Regular, 'inherit'), COLORS.neutral_20, COLORS.neutral_800);
 var LinkBlock = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: none;\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  &.show {\n    display: flex;\n  }\n\n  a {\n    text-decoration: none;\n\n    ", "\n    \n    display: flex;\n    align-items: center;\n    \n    padding: 0 16px;\n    height: 48px;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white), COLORS.neutral_20, COLORS.primary_700, invertedFocusStyles, COLORS.primary_100, COLORS.primary_800);
-
 var FooterDropdownLinks = function FooterDropdownLinks(_ref) {
   var navSection = _ref.navSection,
-      width = _ref.width;
-
+    width = _ref.width;
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      dropdownActive = _React$useState2[0],
-      setDropdownActive = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    dropdownActive = _React$useState2[0],
+    setDropdownActive = _React$useState2[1];
   return /*#__PURE__*/_jsxs(Wrapper, {
     children: [/*#__PURE__*/_jsxs(DropdownLinkBlock, {
       width: width,
@@ -59,7 +54,6 @@ var FooterDropdownLinks = function FooterDropdownLinks(_ref) {
     })]
   });
 };
-
 FooterDropdownLinks.propTypes = {
   width: _pt.number.isRequired
 };

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

@@ -1 +1 @@
-{"version":3,"file":"FooterDropdownLinks.js","names":["React","styled","COLORS","ComponentTextStyle","invertedFocusStyles","ChevronDown","ChevronUp","ComponentMStyling","ComponentSStyling","HyperLink","defaultOnMouseDownHandler","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"],"sources":["../../../src/Footer/Components/FooterDropdownLinks.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../../styles';\nimport {ChevronDown, ChevronUp} from '../../icons/systemicons/SystemIcons';\nimport {NavSection} from '../../types';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles/typography';\nimport {HyperLink} from '../../HyperLink';\nimport {defaultOnMouseDownHandler} from '../../common';\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    ${invertedFocusStyles}\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      ${invertedFocusStyles}\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}\n                         className={dropdownActive ? 'open' : ''}\n                         onMouseDown={defaultOnMouseDownHandler}\n                         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"],"mappings":"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"}
+{"version":3,"file":"FooterDropdownLinks.js","names":["React","styled","COLORS","ComponentTextStyle","invertedFocusStyles","ChevronDown","ChevronUp","ComponentMStyling","ComponentSStyling","HyperLink","defaultOnMouseDownHandler","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"],"sources":["../../../src/Footer/Components/FooterDropdownLinks.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../../styles';\nimport {ChevronDown, ChevronUp} from '../../icons/systemicons/SystemIcons';\nimport {NavSection} from '../../types';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles/typography';\nimport {HyperLink} from '../../HyperLink';\nimport {defaultOnMouseDownHandler} from '../../common';\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    ${invertedFocusStyles}\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      ${invertedFocusStyles}\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}\n                         className={dropdownActive ? 'open' : ''}\n                         onMouseDown={defaultOnMouseDownHandler}\n                         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"],"mappings":"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"}

package/dist/Footer/Components/FooterNavSection.cjs

@@ -1,63 +1,40 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _styles = require("../../styles");
-
 var _FooterDropdownLinks = _interopRequireDefault(require("./FooterDropdownLinks"));
-
 var _typography = require("../../styles/typography");
-
 var _HyperLink = require("../../HyperLink");
-
 var _utils = require("../../utils/utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _templateObject, _templateObject2;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
-
 var NavSection = _styledComponents.default.section(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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';
 }, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, _styles.BREAKPOINTS.XLARGE, (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.white));
-
 var FooterNavSection = function FooterNavSection(_ref) {
   var _navOptions$sections;
-
   var navOptions = _ref.navOptions;
-
   var _React$useState = React.useState((0, _utils.hasWindow)() ? window.innerWidth : -1),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      width = _React$useState2[0],
-      setWidth = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    width = _React$useState2[0],
+    setWidth = _React$useState2[1];
   React.useEffect(function () {
     function handleResize() {
       setWidth(window.innerWidth);
     }
-
     window.addEventListener('resize', handleResize);
     return function () {
       return window.removeEventListener('resize', handleResize);
@@ -87,7 +64,6 @@ var FooterNavSection = function FooterNavSection(_ref) {
     })
   });
 };
-
 FooterNavSection.propTypes = {
   mainId: _propTypes.default.string.isRequired
 };

package/dist/Footer/Components/FooterNavSection.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FooterNavSection.cjs","names":["NavSection","styled","section","LinkBlock","div","props","width","BREAKPOINTS","MEDIUM","LARGE","XLARGE","ComponentLStyling","ComponentTextStyle","Regular","ComponentSStyling","Bold","COLORS","white","FooterNavSection","navOptions","React","useState","hasWindow","window","innerWidth","setWidth","useEffect","handleResize","addEventListener","removeEventListener","sections","map","no","index","header","links","link","Math","floor","random","to","target","label","mainId"],"sources":["../../../src/Footer/Components/FooterNavSection.tsx"],"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';\nimport { hasWindow } from '../../utils/utils';\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>(hasWindow() ? window.innerWidth : -1);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('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 data-testid={'footerDropLinks'} key={`LinkBlockDropdown_${index}`} navSection={no} width={width} />\n        );\n      })}\n    </NavSection>\n  );\n};\n\nexport default FooterNavSection;\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,UAAU,GAAGC,yBAAA,CAAOC,OAAV,sNAAhB;;AASA,IAAMC,SAAS,GAAGF,yBAAA,CAAOG,GAAV,0bACF,UAACC,KAAD;EAAA,OAAYA,KAAK,CAACC,KAAN,IAAe,GAAf,GAAqB,MAArB,GAA8B,MAA1C;AAAA,CADE,EAMXC,mBAAA,CAAYC,MAND,EAWXD,mBAAA,CAAYE,KAXD,EAcXF,mBAAA,CAAYG,MAdD,EAoBT,IAAAC,6BAAA,EAAkBC,0BAAA,CAAmBC,OAArC,EAA8C,SAA9C,CApBS,EAyBT,IAAAC,6BAAA,EAAkBF,0BAAA,CAAmBG,IAArC,EAA2CC,cAAA,CAAOC,KAAlD,CAzBS,CAAf;;AAkCA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAA2C;EAAA;;EAAA,IAAxCC,UAAwC,QAAxCA,UAAwC;;EAClE,sBAA0BC,KAAK,CAACC,QAAN,CAAuB,IAAAC,gBAAA,MAAcC,MAAM,CAACC,UAArB,GAAkC,CAAC,CAA1D,CAA1B;EAAA;EAAA,IAAOlB,KAAP;EAAA,IAAcmB,QAAd;;EACAL,KAAK,CAACM,SAAN,CAAgB,YAAM;IACpB,SAASC,YAAT,GAAwB;MACtBF,QAAQ,CAACF,MAAM,CAACC,UAAR,CAAR;IACD;;IACDD,MAAM,CAACK,gBAAP,CAAwB,QAAxB,EAAkCD,YAAlC;IACA,OAAO;MAAA,OAAMJ,MAAM,CAACM,mBAAP,CAA2B,QAA3B,EAAqCF,YAArC,CAAN;IAAA,CAAP;EACD,CAND,EAMG,EANH;EAQA,oBACE,qBAAC,UAAD;IAAA,kCACGR,UAAU,CAACW,QADd,yDACG,qBAAqBC,GAArB,CAAyB,UAACC,EAAD,EAAKC,KAAL,EAAe;MACvC,OAAO3B,KAAK,GAAG,GAAR,gBACL,sBAAC,SAAD;QAAsC,KAAK,EAAEA,KAA7C;QAAA,wBACE;UAAA,UAAK0B,EAAE,CAACE;QAAR,EADF,EAEGF,EAAE,CAACG,KAAH,CAASJ,GAAT,CAAa,UAACK,IAAD,EAAOH,KAAP;UAAA,oBACZ,qBAAC,oBAAD;YACW,EAAE,yBAAkBI,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAlB,CADb;YAEW,OAAO,EAAE,UAFpB;YAGW,IAAI,EAAEH,IAAI,CAACI,EAHtB;YAIW,MAAM,EAAEJ,IAAI,CAACK,MAAL,IAAe,QAJlC;YAKW,GAAG,EAAC,qBALf;YAAA,UAMGL,IAAI,CAACM;UANR,GAAgBT,KAAhB,CADY;QAAA,CAAb,CAFH;MAAA,uBAA6BA,KAA7B,EADK,gBAeL,qBAAC,4BAAD;QAAqB,eAAa,iBAAlC;QAAwF,UAAU,EAAED,EAApG;QAAwG,KAAK,EAAE1B;MAA/G,+BAA+E2B,KAA/E,EAfF;IAiBD,CAlBA;EADH,EADF;AAuBD,CAjCD;;;EAHEU,M;;eAsCazB,gB"}
+{"version":3,"file":"FooterNavSection.cjs","names":["NavSection","styled","section","LinkBlock","div","props","width","BREAKPOINTS","MEDIUM","LARGE","XLARGE","ComponentLStyling","ComponentTextStyle","Regular","ComponentSStyling","Bold","COLORS","white","FooterNavSection","navOptions","React","useState","hasWindow","window","innerWidth","setWidth","useEffect","handleResize","addEventListener","removeEventListener","sections","map","no","index","header","links","link","Math","floor","random","to","target","label","mainId"],"sources":["../../../src/Footer/Components/FooterNavSection.tsx"],"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';\nimport { hasWindow } from '../../utils/utils';\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>(hasWindow() ? window.innerWidth : -1);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('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 data-testid={'footerDropLinks'} key={`LinkBlockDropdown_${index}`} navSection={no} width={width} />\n        );\n      })}\n    </NavSection>\n  );\n};\n\nexport default FooterNavSection;\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAA8C;AAAA;AAAA;AAAA;AAE9C,IAAMA,UAAU,GAAGC,yBAAM,CAACC,OAAO,sNAOhC;AAED,IAAMC,SAAS,GAAGF,yBAAM,CAACG,GAAG,0bACf,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,KAAK,IAAI,GAAG,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC,EAK1DC,mBAAW,CAACC,MAAM,EAKlBD,mBAAW,CAACE,KAAK,EAGjBF,mBAAW,CAACG,MAAM,EAMhB,IAAAC,6BAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAE,SAAS,CAAC,EAKxD,IAAAC,6BAAiB,EAACF,0BAAkB,CAACG,IAAI,EAAEC,cAAM,CAACC,KAAK,CAAC,CAE7D;AAOD,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAA8C;EAAA;EAAA,IAAxCC,UAAU,QAAVA,UAAU;EACpC,sBAA0BC,KAAK,CAACC,QAAQ,CAAS,IAAAC,gBAAS,GAAE,GAAGC,MAAM,CAACC,UAAU,GAAG,CAAC,CAAC,CAAC;IAAA;IAA/ElB,KAAK;IAAEmB,QAAQ;EACtBL,KAAK,CAACM,SAAS,CAAC,YAAM;IACpB,SAASC,YAAY,GAAG;MACtBF,QAAQ,CAACF,MAAM,CAACC,UAAU,CAAC;IAC7B;IACAD,MAAM,CAACK,gBAAgB,CAAC,QAAQ,EAAED,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAMJ,MAAM,CAACM,mBAAmB,CAAC,QAAQ,EAAEF,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE,qBAAC,UAAU;IAAA,kCACRR,UAAU,CAACW,QAAQ,yDAAnB,qBAAqBC,GAAG,CAAC,UAACC,EAAE,EAAEC,KAAK,EAAK;MACvC,OAAO3B,KAAK,GAAG,GAAG,gBAChB,sBAAC,SAAS;QAA4B,KAAK,EAAEA,KAAM;QAAA,wBACjD;UAAA,UAAK0B,EAAE,CAACE;QAAM,EAAM,EACnBF,EAAE,CAACG,KAAK,CAACJ,GAAG,CAAC,UAACK,IAAI,EAAEH,KAAK;UAAA,oBACxB,qBAAC,oBAAS;YACC,EAAE,yBAAkBI,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,EAAE,GAAG,YAAY,CAAC,CAAG;YAC/D,OAAO,EAAE,UAAW;YACpB,IAAI,EAAEH,IAAI,CAACI,EAAG;YACd,MAAM,EAAEJ,IAAI,CAACK,MAAM,IAAI,QAAS;YAChC,GAAG,EAAC,qBAAqB;YAAA,UACjCL,IAAI,CAACM;UAAK,GANGT,KAAK,CAOT;QAAA,CACb,CAAC;MAAA,uBAXyBA,KAAK,EAYtB,gBAEZ,qBAAC,4BAAmB;QAAC,eAAa,iBAAkB;QAAoC,UAAU,EAAED,EAAG;QAAC,KAAK,EAAE1B;MAAM,+BAAtC2B,KAAK,EACrF;IACH,CAAC;EAAC,EACS;AAEjB,CAAC;AAAC;EApCAU,MAAM;AAAA;AAAA,eAsCOzB,gBAAgB;AAAA"}

package/dist/Footer/Components/FooterNavSection.js

@@ -1,9 +1,7 @@
 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';
@@ -17,22 +15,17 @@ var NavSection = styled.section(_templateObject || (_templateObject = _taggedTem
 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));
-
 var FooterNavSection = function FooterNavSection(_ref) {
   var _navOptions$sections;
-
   var navOptions = _ref.navOptions;
-
   var _React$useState = React.useState(hasWindow() ? window.innerWidth : -1),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      width = _React$useState2[0],
-      setWidth = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    width = _React$useState2[0],
+    setWidth = _React$useState2[1];
   React.useEffect(function () {
     function handleResize() {
       setWidth(window.innerWidth);
     }
-
     window.addEventListener('resize', handleResize);
     return function () {
       return window.removeEventListener('resize', handleResize);
@@ -62,7 +55,6 @@ var FooterNavSection = function FooterNavSection(_ref) {
     })
   });
 };
-
 FooterNavSection.propTypes = {
   mainId: _pt.string.isRequired
 };

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

@@ -1 +1 @@
-{"version":3,"file":"FooterNavSection.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","FooterDropdownLinks","ComponentLStyling","ComponentSStyling","HyperLink","hasWindow","NavSection","section","LinkBlock","div","props","width","MEDIUM","LARGE","XLARGE","Regular","Bold","white","FooterNavSection","navOptions","useState","window","innerWidth","setWidth","useEffect","handleResize","addEventListener","removeEventListener","sections","map","no","index","header","links","link","Math","floor","random","to","target","label","mainId"],"sources":["../../../src/Footer/Components/FooterNavSection.tsx"],"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';\nimport { hasWindow } from '../../utils/utils';\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>(hasWindow() ? window.innerWidth : -1);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('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 data-testid={'footerDropLinks'} key={`LinkBlockDropdown_${index}`} navSection={no} width={width} />\n        );\n      })}\n    </NavSection>\n  );\n};\n\nexport default FooterNavSection;\n"],"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;AACA,SAASC,SAAT,QAA0B,mBAA1B;;;AAEA,IAAMC,UAAU,GAAGT,MAAM,CAACU,OAAV,wMAAhB;AASA,IAAMC,SAAS,GAAGX,MAAM,CAACY,GAAV,4aACF,UAACC,KAAD;EAAA,OAAYA,KAAK,CAACC,KAAN,IAAe,GAAf,GAAqB,MAArB,GAA8B,MAA1C;AAAA,CADE,EAMXb,WAAW,CAACc,MAND,EAWXd,WAAW,CAACe,KAXD,EAcXf,WAAW,CAACgB,MAdD,EAoBTZ,iBAAiB,CAACF,kBAAkB,CAACe,OAApB,EAA6B,SAA7B,CApBR,EAyBTZ,iBAAiB,CAACH,kBAAkB,CAACgB,IAApB,EAA0BjB,MAAM,CAACkB,KAAjC,CAzBR,CAAf;;AAkCA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAA2C;EAAA;;EAAA,IAAxCC,UAAwC,QAAxCA,UAAwC;;EAClE,sBAA0BvB,KAAK,CAACwB,QAAN,CAAuBf,SAAS,KAAKgB,MAAM,CAACC,UAAZ,GAAyB,CAAC,CAA1D,CAA1B;EAAA;EAAA,IAAOX,KAAP;EAAA,IAAcY,QAAd;;EACA3B,KAAK,CAAC4B,SAAN,CAAgB,YAAM;IACpB,SAASC,YAAT,GAAwB;MACtBF,QAAQ,CAACF,MAAM,CAACC,UAAR,CAAR;IACD;;IACDD,MAAM,CAACK,gBAAP,CAAwB,QAAxB,EAAkCD,YAAlC;IACA,OAAO;MAAA,OAAMJ,MAAM,CAACM,mBAAP,CAA2B,QAA3B,EAAqCF,YAArC,CAAN;IAAA,CAAP;EACD,CAND,EAMG,EANH;EAQA,oBACE,KAAC,UAAD;IAAA,kCACGN,UAAU,CAACS,QADd,yDACG,qBAAqBC,GAArB,CAAyB,UAACC,EAAD,EAAKC,KAAL,EAAe;MACvC,OAAOpB,KAAK,GAAG,GAAR,gBACL,MAAC,SAAD;QAAsC,KAAK,EAAEA,KAA7C;QAAA,wBACE;UAAA,UAAKmB,EAAE,CAACE;QAAR,EADF,EAEGF,EAAE,CAACG,KAAH,CAASJ,GAAT,CAAa,UAACK,IAAD,EAAOH,KAAP;UAAA,oBACZ,KAAC,SAAD;YACW,EAAE,yBAAkBI,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAlB,CADb;YAEW,OAAO,EAAE,UAFpB;YAGW,IAAI,EAAEH,IAAI,CAACI,EAHtB;YAIW,MAAM,EAAEJ,IAAI,CAACK,MAAL,IAAe,QAJlC;YAKW,GAAG,EAAC,qBALf;YAAA,UAMGL,IAAI,CAACM;UANR,GAAgBT,KAAhB,CADY;QAAA,CAAb,CAFH;MAAA,uBAA6BA,KAA7B,EADK,gBAeL,KAAC,mBAAD;QAAqB,eAAa,iBAAlC;QAAwF,UAAU,EAAED,EAApG;QAAwG,KAAK,EAAEnB;MAA/G,+BAA+EoB,KAA/E,EAfF;IAiBD,CAlBA;EADH,EADF;AAuBD,CAjCD;;;EAHEU,M;;AAsCF,eAAevB,gBAAf"}
+{"version":3,"file":"FooterNavSection.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","FooterDropdownLinks","ComponentLStyling","ComponentSStyling","HyperLink","hasWindow","NavSection","section","LinkBlock","div","props","width","MEDIUM","LARGE","XLARGE","Regular","Bold","white","FooterNavSection","navOptions","useState","window","innerWidth","setWidth","useEffect","handleResize","addEventListener","removeEventListener","sections","map","no","index","header","links","link","Math","floor","random","to","target","label","mainId"],"sources":["../../../src/Footer/Components/FooterNavSection.tsx"],"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';\nimport { hasWindow } from '../../utils/utils';\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>(hasWindow() ? window.innerWidth : -1);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('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 data-testid={'footerDropLinks'} key={`LinkBlockDropdown_${index}`} navSection={no} width={width} />\n        );\n      })}\n    </NavSection>\n  );\n};\n\nexport default FooterNavSection;\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,SAAQC,WAAW,EAAEC,MAAM,EAAEC,kBAAkB,QAAO,cAAc;AACpE,OAAOC,mBAAmB,MAAM,uBAAuB;AAEvD,SAAQC,iBAAiB,EAAEC,iBAAiB,QAAO,yBAAyB;AAC5E,SAAQC,SAAS,QAAO,iBAAiB;AACzC,SAASC,SAAS,QAAQ,mBAAmB;AAAC;AAAA;AAE9C,IAAMC,UAAU,GAAGT,MAAM,CAACU,OAAO,wMAOhC;AAED,IAAMC,SAAS,GAAGX,MAAM,CAACY,GAAG,4aACf,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,KAAK,IAAI,GAAG,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC,EAK1Db,WAAW,CAACc,MAAM,EAKlBd,WAAW,CAACe,KAAK,EAGjBf,WAAW,CAACgB,MAAM,EAMhBZ,iBAAiB,CAACF,kBAAkB,CAACe,OAAO,EAAE,SAAS,CAAC,EAKxDZ,iBAAiB,CAACH,kBAAkB,CAACgB,IAAI,EAAEjB,MAAM,CAACkB,KAAK,CAAC,CAE7D;AAOD,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAA8C;EAAA;EAAA,IAAxCC,UAAU,QAAVA,UAAU;EACpC,sBAA0BvB,KAAK,CAACwB,QAAQ,CAASf,SAAS,EAAE,GAAGgB,MAAM,CAACC,UAAU,GAAG,CAAC,CAAC,CAAC;IAAA;IAA/EX,KAAK;IAAEY,QAAQ;EACtB3B,KAAK,CAAC4B,SAAS,CAAC,YAAM;IACpB,SAASC,YAAY,GAAG;MACtBF,QAAQ,CAACF,MAAM,CAACC,UAAU,CAAC;IAC7B;IACAD,MAAM,CAACK,gBAAgB,CAAC,QAAQ,EAAED,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAMJ,MAAM,CAACM,mBAAmB,CAAC,QAAQ,EAAEF,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE,KAAC,UAAU;IAAA,kCACRN,UAAU,CAACS,QAAQ,yDAAnB,qBAAqBC,GAAG,CAAC,UAACC,EAAE,EAAEC,KAAK,EAAK;MACvC,OAAOpB,KAAK,GAAG,GAAG,gBAChB,MAAC,SAAS;QAA4B,KAAK,EAAEA,KAAM;QAAA,wBACjD;UAAA,UAAKmB,EAAE,CAACE;QAAM,EAAM,EACnBF,EAAE,CAACG,KAAK,CAACJ,GAAG,CAAC,UAACK,IAAI,EAAEH,KAAK;UAAA,oBACxB,KAAC,SAAS;YACC,EAAE,yBAAkBI,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,EAAE,GAAG,YAAY,CAAC,CAAG;YAC/D,OAAO,EAAE,UAAW;YACpB,IAAI,EAAEH,IAAI,CAACI,EAAG;YACd,MAAM,EAAEJ,IAAI,CAACK,MAAM,IAAI,QAAS;YAChC,GAAG,EAAC,qBAAqB;YAAA,UACjCL,IAAI,CAACM;UAAK,GANGT,KAAK,CAOT;QAAA,CACb,CAAC;MAAA,uBAXyBA,KAAK,EAYtB,gBAEZ,KAAC,mBAAmB;QAAC,eAAa,iBAAkB;QAAoC,UAAU,EAAED,EAAG;QAAC,KAAK,EAAEnB;MAAM,+BAAtCoB,KAAK,EACrF;IACH,CAAC;EAAC,EACS;AAEjB,CAAC;AAAC;EApCAU,MAAM;AAAA;AAsCR,eAAevB,gBAAgB"}

package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs

@@ -1,66 +1,40 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _styles = require("../../styles");
-
 var _InputFields = require("../../InputFields");
-
 var _SystemIcons = require("../../icons/systemicons/SystemIcons");
-
 var _Button = require("../../Button");
-
 var _typography = require("../../styles/typography");
-
 var _styling = require("../../InputFields/styling");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
-
 var NewsletterAndSocial = _styledComponents.default.section(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ", " {\n    flex-direction: row;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
-
 var NewsletterEmailSection = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ", " {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ", "\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ", " {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.white), _styles.BREAKPOINTS.MEDIUM);
-
 var NewsletterEmail = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  margin: 2px auto 0;\n\n  ", " {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n\n  ", " {\n    &.focus-visible {\n      ", "\n    }\n  }\n"])), _styles.BREAKPOINTS.MEDIUM, _styling.InputFieldStyling, _styles.invertedFocusStyles);
-
 var NewsletterButton = _styledComponents.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ", "\n\n  ", " {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  &:focus {\n    ", "\n  }\n"])), _styles.COLORS.white, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.white), _styles.BREAKPOINTS.MEDIUM, _styles.invertedFocusStyles);
-
 var SocialMedia = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ", "\n  }\n\n  ", " {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n"])), _styles.COLORS.white, (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, 'inherit'), _styles.BREAKPOINTS.MEDIUM);
-
 var SocialMediaButtons = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ", ";\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  a {\n    &:focus {\n      ", "\n    }\n  }\n\n  ", " {\n    justify-content: flex-end;\n  }\n"])), _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.neutral_600, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _styles.invertedFocusStyles, _styles.BREAKPOINTS.MEDIUM);
-
 var FooterNewsletterAndSocialSection = function FooterNewsletterAndSocialSection(_ref) {
   var actionOnNewsletterSignup = _ref.actionOnNewsletterSignup,
-      newsletterLabel = _ref.newsletterLabel,
-      placeholderEmail = _ref.placeholderEmail;
-
+    newsletterLabel = _ref.newsletterLabel,
+    placeholderEmail = _ref.placeholderEmail;
   var _React$useState = React.useState(''),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      emailInput = _React$useState2[0],
-      setEmailInput = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    emailInput = _React$useState2[0],
+    setEmailInput = _React$useState2[1];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(NewsletterAndSocial, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(NewsletterEmailSection, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
@@ -121,7 +95,6 @@ var FooterNewsletterAndSocialSection = function FooterNewsletterAndSocialSection
     })]
   });
 };
-
 FooterNewsletterAndSocialSection.propTypes = {
   actionOnNewsletterSignup: _propTypes.default.func,
   newsletterLabel: _propTypes.default.string.isRequired,

package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs.map

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

package/dist/Footer/Components/FooterNewsletterAndSocialSection.js

@@ -1,9 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
 import * as React from 'react';
 import styled from 'styled-components';
 import { BREAKPOINTS, COLORS, invertedFocusStyles } from '../../styles';
@@ -20,17 +18,14 @@ var NewsletterEmail = styled.div(_templateObject3 || (_templateObject3 = _tagged
 var NewsletterButton = styled.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ", "\n\n  ", " {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  &:focus {\n    ", "\n  }\n"])), COLORS.white, ComponentLStyling(ComponentTextStyle.Bold, COLORS.white), BREAKPOINTS.MEDIUM, invertedFocusStyles);
 var SocialMedia = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ", "\n  }\n\n  ", " {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n"])), COLORS.white, ComponentXSStyling(ComponentTextStyle.Regular, 'inherit'), BREAKPOINTS.MEDIUM);
 var SocialMediaButtons = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ", ";\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  a {\n    &:focus {\n      ", "\n    }\n  }\n\n  ", " {\n    justify-content: flex-end;\n  }\n"])), COLORS.white, COLORS.white, COLORS.white, COLORS.white, COLORS.neutral_600, COLORS.primary_800, COLORS.primary_100, invertedFocusStyles, BREAKPOINTS.MEDIUM);
-
 var FooterNewsletterAndSocialSection = function FooterNewsletterAndSocialSection(_ref) {
   var actionOnNewsletterSignup = _ref.actionOnNewsletterSignup,
-      newsletterLabel = _ref.newsletterLabel,
-      placeholderEmail = _ref.placeholderEmail;
-
+    newsletterLabel = _ref.newsletterLabel,
+    placeholderEmail = _ref.placeholderEmail;
   var _React$useState = React.useState(''),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      emailInput = _React$useState2[0],
-      setEmailInput = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    emailInput = _React$useState2[0],
+    setEmailInput = _React$useState2[1];
   return /*#__PURE__*/_jsxs(NewsletterAndSocial, {
     children: [/*#__PURE__*/_jsxs(NewsletterEmailSection, {
       children: [/*#__PURE__*/_jsx("label", {
@@ -91,7 +86,6 @@ var FooterNewsletterAndSocialSection = function FooterNewsletterAndSocialSection
     })]
   });
 };
-
 FooterNewsletterAndSocialSection.propTypes = {
   actionOnNewsletterSignup: _pt.func,
   newsletterLabel: _pt.string.isRequired,