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

package/dist/esm/AuthPage/Information.js

@@ -1,40 +1,16 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
 import styled from 'styled-components';
 import AuthPageSection from './_AuthPageSection';
 import { BREAKPOINTS, COLORS, ParagraphTextStyle } from '../styles';
 import { HeadlineXLStyling, ParagraphLStyling } from '../styles/typography';
-export const InformationContainer = styled(AuthPageSection)`
-  display: none;
-  background: ${props => props.$color};
-
-  ${BREAKPOINTS.MEDIUM} {
-    display: flex;
-    padding-top: 56px;
-  }
-`;
-export const InformationContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-self: center;
-  align-items: center;
-  text-align: center;
-  max-width: 100%;
-
-  ${BREAKPOINTS.LARGE} {
-    align-self: flex-end;
-    margin-right: 48px;
-  }
-`;
-export const InformationHeader = styled.h2`
-  ${HeadlineXLStyling(COLORS.black)}
-  font-weight: 300;
-  margin-bottom: 0;
-`;
-export const InformationText = styled.p`
-  ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}
-  margin: 8px 0;
-`;
-export const InformationImage = styled.img`
-  height: 275px;
-  max-width: 100%;
-`;
+export var InformationContainer = styled(AuthPageSection)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n  background: ", ";\n\n  ", " {\n    display: flex;\n    padding-top: 56px;\n  }\n"])), function (props) {
+  return props.$color;
+}, BREAKPOINTS.MEDIUM);
+export var InformationContent = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-self: center;\n  align-items: center;\n  text-align: center;\n  max-width: 100%;\n\n  ", " {\n    align-self: flex-end;\n    margin-right: 48px;\n  }\n"])), BREAKPOINTS.LARGE);
+export var InformationHeader = styled.h2(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  font-weight: 300;\n  margin-bottom: 0;\n"])), HeadlineXLStyling(COLORS.black));
+export var InformationText = styled.p(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  margin: 8px 0;\n"])), ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.neutral_600));
+export var InformationImage = styled.img(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  height: 275px;\n  max-width: 100%;\n"])));
 //# sourceMappingURL=Information.js.map

package/dist/esm/AuthPage/Information.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/AuthPage/Information.tsx"],"names":["styled","AuthPageSection","BREAKPOINTS","COLORS","ParagraphTextStyle","HeadlineXLStyling","ParagraphLStyling","InformationContainer","props","$color","MEDIUM","InformationContent","div","LARGE","InformationHeader","h2","black","InformationText","p","Regular","neutral_600","InformationImage","img"],"mappings":"AACA,OAAOA,MAAP,MAAmB,mBAAnB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,SAASC,WAAT,EAAsBC,MAAtB,EAA8DC,kBAA9D,QAAwF,WAAxF;AACA,SAA4BC,iBAA5B,EAA+CC,iBAA/C,QAAwE,sBAAxE;AAEA,OAAO,MAAMC,oBAAoB,GAAGP,MAAM,CAACC,eAAD,CAAsC;AAChF;AACA,gBAAiBO,KAAD,IAAWA,KAAK,CAACC,MAAO;AACxC;AACA,IAAIP,WAAW,CAACQ,MAAO;AACvB;AACA;AACA;AACA,CARO;AAUP,OAAO,MAAMC,kBAAkB,GAAGX,MAAM,CAACY,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIV,WAAW,CAACW,KAAM;AACtB;AACA;AACA;AACA,CAZO;AAcP,OAAO,MAAMC,iBAAiB,GAAGd,MAAM,CAACe,EAAG;AAC3C,IAAIV,iBAAiB,CAACF,MAAM,CAACa,KAAR,CAAe;AACpC;AACA;AACA,CAJO;AAMP,OAAO,MAAMC,eAAe,GAAGjB,MAAM,CAACkB,CAAE;AACxC,IAAIZ,iBAAiB,CAACF,kBAAkB,CAACe,OAApB,EAA6BhB,MAAM,CAACiB,WAApC,CAAiD;AACtE;AACA,CAHO;AAKP,OAAO,MAAMC,gBAAgB,GAAGrB,MAAM,CAACsB,GAAI;AAC3C;AACA;AACA,CAHO","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, HeadlineXL, ParagraphTextStyle } from '../styles';\nimport { ComponentLStyling, HeadlineXLStyling, ParagraphLStyling } from '../styles/typography';\n\nexport const InformationContainer = styled(AuthPageSection)<{ $color: string }>`\n  display: none;\n  background: ${(props) => props.$color};\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n    padding-top: 56px;\n  }\n`;\n\nexport const InformationContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-self: center;\n  align-items: center;\n  text-align: center;\n  max-width: 100%;\n\n  ${BREAKPOINTS.LARGE} {\n    align-self: flex-end;\n    margin-right: 48px;\n  }\n`;\n\nexport const InformationHeader = styled.h2`\n  ${HeadlineXLStyling(COLORS.black)}\n  font-weight: 300;\n  margin-bottom: 0;\n`;\n\nexport const InformationText = styled.p`\n  ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  margin: 8px 0;\n`;\n\nexport const InformationImage = styled.img`\n  height: 275px;\n  max-width: 100%;\n`;\n"],"file":"Information.js"}
+{"version":3,"sources":["../../../src/AuthPage/Information.tsx"],"names":["styled","AuthPageSection","BREAKPOINTS","COLORS","ParagraphTextStyle","HeadlineXLStyling","ParagraphLStyling","InformationContainer","props","$color","MEDIUM","InformationContent","div","LARGE","InformationHeader","h2","black","InformationText","p","Regular","neutral_600","InformationImage","img"],"mappings":";;;;AACA,OAAOA,MAAP,MAAmB,mBAAnB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,SAASC,WAAT,EAAsBC,MAAtB,EAA8DC,kBAA9D,QAAwF,WAAxF;AACA,SAA4BC,iBAA5B,EAA+CC,iBAA/C,QAAwE,sBAAxE;AAEA,OAAO,IAAMC,oBAAoB,GAAGP,MAAM,CAACC,eAAD,CAAT,4KAEjB,UAACO,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAjB;AAAA,CAFiB,EAI7BP,WAAW,CAACQ,MAJiB,CAA1B;AAUP,OAAO,IAAMC,kBAAkB,GAAGX,MAAM,CAACY,GAAV,sRAQ3BV,WAAW,CAACW,KARe,CAAxB;AAcP,OAAO,IAAMC,iBAAiB,GAAGd,MAAM,CAACe,EAAV,4HAC1BV,iBAAiB,CAACF,MAAM,CAACa,KAAR,CADS,CAAvB;AAMP,OAAO,IAAMC,eAAe,GAAGjB,MAAM,CAACkB,CAAV,oGACxBZ,iBAAiB,CAACF,kBAAkB,CAACe,OAApB,EAA6BhB,MAAM,CAACiB,WAApC,CADO,CAArB;AAKP,OAAO,IAAMC,gBAAgB,GAAGrB,MAAM,CAACsB,GAAV,+GAAtB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, HeadlineXL, ParagraphTextStyle } from '../styles';\nimport { ComponentLStyling, HeadlineXLStyling, ParagraphLStyling } from '../styles/typography';\n\nexport const InformationContainer = styled(AuthPageSection)<{ $color: string }>`\n  display: none;\n  background: ${(props) => props.$color};\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n    padding-top: 56px;\n  }\n`;\n\nexport const InformationContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-self: center;\n  align-items: center;\n  text-align: center;\n  max-width: 100%;\n\n  ${BREAKPOINTS.LARGE} {\n    align-self: flex-end;\n    margin-right: 48px;\n  }\n`;\n\nexport const InformationHeader = styled.h2`\n  ${HeadlineXLStyling(COLORS.black)}\n  font-weight: 300;\n  margin-bottom: 0;\n`;\n\nexport const InformationText = styled.p`\n  ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  margin: 8px 0;\n`;\n\nexport const InformationImage = styled.img`\n  height: 275px;\n  max-width: 100%;\n`;\n"],"file":"Information.js"}

package/dist/esm/AuthPage/ScreenSetsContainer.js

@@ -1,32 +1,12 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject;
+
 import styled from 'styled-components';
 import AuthPageSection from './_AuthPageSection';
 import { BREAKPOINTS } from '../styles';
-const ScreenSetsContainer = styled(AuthPageSection)`
-  padding: 8px;
-  width: calc(100% - 16px);
-  align-items: ${props => props.centerContents ? 'center' : 'unset'};
-
-  .gigya-screen-caption {
-    display: none;
-  }
-
-  .gigya-screen {
-    max-width: 100%;
-    margin: auto;
-  }
-
-  ${BREAKPOINTS.MEDIUM} {
-    .gigya-screen {
-      margin: 0;
-      padding: 36px 25px !important;
-    }
-  }
-
-  ${BREAKPOINTS.XLARGE} {
-    .gigya-screen {
-      max-width: 500px;
-    }
-  }
-`;
+var ScreenSetsContainer = styled(AuthPageSection)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 8px;\n  width: calc(100% - 16px);\n  align-items: ", ";\n\n  .gigya-screen-caption {\n    display: none;\n  }\n\n  .gigya-screen {\n    max-width: 100%;\n    margin: auto;\n  }\n\n  ", " {\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ", " {\n    .gigya-screen {\n      max-width: 500px;\n    }\n  }\n"])), function (props) {
+  return props.centerContents ? 'center' : 'unset';
+}, BREAKPOINTS.MEDIUM, BREAKPOINTS.XLARGE);
 export default ScreenSetsContainer;
 //# sourceMappingURL=ScreenSetsContainer.js.map

package/dist/esm/AuthPage/ScreenSetsContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/AuthPage/ScreenSetsContainer.tsx"],"names":["styled","AuthPageSection","BREAKPOINTS","ScreenSetsContainer","props","centerContents","MEDIUM","XLARGE"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,SAASC,WAAT,QAA4B,WAA5B;AAEA,MAAMC,mBAAmB,GAAGH,MAAM,CAACC,eAAD,CAA+C;AACjF;AACA;AACA,iBAAiBG,KAAK,IAAKA,KAAK,CAACC,cAAN,GAAuB,QAAvB,GAAkC,OAAS;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIH,WAAW,CAACI,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA,IAAIJ,WAAW,CAACK,MAAO;AACvB;AACA;AACA;AACA;AACA,CA1BA;AA4BA,eAAeJ,mBAAf","sourcesContent":["import styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport { BREAKPOINTS } from '../styles';\n\nconst ScreenSetsContainer = styled(AuthPageSection)<{ centerContents: boolean }>`\n  padding: 8px;\n  width: calc(100% - 16px);\n  align-items: ${props => (props.centerContents ? 'center' : 'unset')};\n\n  .gigya-screen-caption {\n    display: none;\n  }\n\n  .gigya-screen {\n    max-width: 100%;\n    margin: auto;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    .gigya-screen {\n      max-width: 500px;\n    }\n  }\n`;\n\nexport default ScreenSetsContainer;\n"],"file":"ScreenSetsContainer.js"}
+{"version":3,"sources":["../../../src/AuthPage/ScreenSetsContainer.tsx"],"names":["styled","AuthPageSection","BREAKPOINTS","ScreenSetsContainer","props","centerContents","MEDIUM","XLARGE"],"mappings":";;;;AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,SAASC,WAAT,QAA4B,WAA5B;AAEA,IAAMC,mBAAmB,GAAGH,MAAM,CAACC,eAAD,CAAT,gbAGR,UAAAG,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,QAAvB,GAAkC,OAAvC;AAAA,CAHG,EAcrBH,WAAW,CAACI,MAdS,EAqBrBJ,WAAW,CAACK,MArBS,CAAzB;AA4BA,eAAeJ,mBAAf","sourcesContent":["import styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport { BREAKPOINTS } from '../styles';\n\nconst ScreenSetsContainer = styled(AuthPageSection)<{ centerContents: boolean }>`\n  padding: 8px;\n  width: calc(100% - 16px);\n  align-items: ${props => (props.centerContents ? 'center' : 'unset')};\n\n  .gigya-screen-caption {\n    display: none;\n  }\n\n  .gigya-screen {\n    max-width: 100%;\n    margin: auto;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    .gigya-screen {\n      max-width: 500px;\n    }\n  }\n`;\n\nexport default ScreenSetsContainer;\n"],"file":"ScreenSetsContainer.js"}

package/dist/esm/AuthPage/_AuthPageSection.js

@@ -1,14 +1,9 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject;
+
 import styled from 'styled-components';
 import { BREAKPOINTS } from '../styles';
-const AuthPageSection = styled.section`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-
-  ${BREAKPOINTS.MEDIUM} {
-    padding: 24px;
-    width: calc(50% - 48px);
-  }
-`;
+var AuthPageSection = styled.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  ", " {\n    padding: 24px;\n    width: calc(50% - 48px);\n  }\n"])), BREAKPOINTS.MEDIUM);
 export default AuthPageSection;
 //# sourceMappingURL=_AuthPageSection.js.map

package/dist/esm/AuthPage/_AuthPageSection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/AuthPage/_AuthPageSection.tsx"],"names":["styled","BREAKPOINTS","AuthPageSection","section","MEDIUM"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AACA,SAASC,WAAT,QAA4B,WAA5B;AAEA,MAAMC,eAAe,GAAGF,MAAM,CAACG,OAAQ;AACvC;AACA;AACA;AACA;AACA,IAAIF,WAAW,CAACG,MAAO;AACvB;AACA;AACA;AACA,CATA;AAWA,eAAeF,eAAf","sourcesContent":["import styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\n\nconst AuthPageSection = styled.section`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  ${BREAKPOINTS.MEDIUM} {\n    padding: 24px;\n    width: calc(50% - 48px);\n  }\n`;\n\nexport default AuthPageSection;\n"],"file":"_AuthPageSection.js"}
+{"version":3,"sources":["../../../src/AuthPage/_AuthPageSection.tsx"],"names":["styled","BREAKPOINTS","AuthPageSection","section","MEDIUM"],"mappings":";;;;AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AACA,SAASC,WAAT,QAA4B,WAA5B;AAEA,IAAMC,eAAe,GAAGF,MAAM,CAACG,OAAV,oMAKjBF,WAAW,CAACG,MALK,CAArB;AAWA,eAAeF,eAAf","sourcesContent":["import styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\n\nconst AuthPageSection = styled.section`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  ${BREAKPOINTS.MEDIUM} {\n    padding: 24px;\n    width: calc(50% - 48px);\n  }\n`;\n\nexport default AuthPageSection;\n"],"file":"_AuthPageSection.js"}

package/dist/esm/AuthPage/screenSetsErrorMessages.js

@@ -1,4 +1,4 @@
-export const screenSetsErrorMessages_EN = {
+export var screenSetsErrorMessages_EN = {
   email_already_exists: 'An account with that email already exists - try <a href class="sign-in-link" style="font-size: inherit;" data-switch-screen="gigya-login-screen">signing in</a>',
   email_address_is_invalid: 'Invalid email address',
   please_enter_fieldname: 'Enter your %fieldname'

package/dist/esm/AuthPage/screenSetsErrorMessages.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/AuthPage/screenSetsErrorMessages.ts"],"names":["screenSetsErrorMessages_EN","email_already_exists","email_address_is_invalid","please_enter_fieldname"],"mappings":"AAAA,OAAO,MAAMA,0BAA0B,GAAG;AACxCC,EAAAA,oBAAoB,EAClB,iKAFsC;AAGxCC,EAAAA,wBAAwB,EAAE,uBAHc;AAIxCC,EAAAA,sBAAsB,EAAE;AAJgB,CAAnC","sourcesContent":["export const screenSetsErrorMessages_EN = {\n  email_already_exists:\n    'An account with that email already exists - try <a href class=\"sign-in-link\" style=\"font-size: inherit;\" data-switch-screen=\"gigya-login-screen\">signing in</a>',\n  email_address_is_invalid: 'Invalid email address',\n  please_enter_fieldname: 'Enter your %fieldname',\n};\n"],"file":"screenSetsErrorMessages.js"}
+{"version":3,"sources":["../../../src/AuthPage/screenSetsErrorMessages.ts"],"names":["screenSetsErrorMessages_EN","email_already_exists","email_address_is_invalid","please_enter_fieldname"],"mappings":"AAAA,OAAO,IAAMA,0BAA0B,GAAG;AACxCC,EAAAA,oBAAoB,EAClB,iKAFsC;AAGxCC,EAAAA,wBAAwB,EAAE,uBAHc;AAIxCC,EAAAA,sBAAsB,EAAE;AAJgB,CAAnC","sourcesContent":["export const screenSetsErrorMessages_EN = {\n  email_already_exists:\n    'An account with that email already exists - try <a href class=\"sign-in-link\" style=\"font-size: inherit;\" data-switch-screen=\"gigya-login-screen\">signing in</a>',\n  email_address_is_invalid: 'Invalid email address',\n  please_enter_fieldname: 'Enter your %fieldname',\n};\n"],"file":"screenSetsErrorMessages.js"}

package/dist/esm/Banners/Banner.js

@@ -1,4 +1,9 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
 import * as React from 'react';
 import styled from 'styled-components';
 import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
@@ -11,241 +16,237 @@ import { HyperLink } from '../HyperLink';
  * Styles for <Banner />
  */
 
-const BannerContainer = styled.div`
-  background: ${props => props.$type ? props.$type : COLORS.correct_100};
-  min-height: 48px;
-  display: flex;
-  color: ${COLORS.black};
-  margin-top: ${props => props.bottom ? 'auto' : '0'};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  a {\n    color: ", " !important;\n  }\n"])), function (props) {
+  return props.$type ? props.$type : COLORS.correct_100;
+}, COLORS.black, function (props) {
+  return props.bottom ? 'auto' : '0';
+}, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, function (props) {
+  return props.link;
+});
+var BannerCenter = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 0 0 16px;\n  ", " {\n    margin: 0 16px 0 32px;\n  }\n  ", " {\n    margin: 0 40px 0 56px;\n  }\n  &.small {\n    margin: 0 0 0 16px;\n  }\n  &.medium {\n    margin: 0 16px 0 32px;\n  }\n  &.large {\n    margin: 0 40px 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n"])), function (props) {
+  return ComponentMStyling(ComponentTextStyle.Regular, props.$color);
+}, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
+var ButtonWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0 0 0 auto;\n"])));
+var ButtonContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: contents;\n  ", ";\n"])), function (props) {
+  return props.$type ? getButtonStyle(props.$type) : null;
+});
+var BannerContentWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n"])));
 
-  button:last-child {
-    line-height: 0;
-    margin: 0 0 0 8px;
-    ${BREAKPOINTS.MEDIUM} {
-      margin: 0 0 0 16px;
-    }
-    ${BREAKPOINTS.LARGE} {
-      margin: 0 0 0 32px;
-    }
-    &.small {
-      margin: 0 0 0 8px;
-    }
-    &.medium {
-      margin: 0 0 0 16px;
-    }
-    &.large {
-      margin: 0 0 0 32px;
-    }
-  }
+var Banner = function Banner(_ref) {
+  var size = _ref.size,
+      type = _ref.type,
+      children = _ref.children,
+      bottom = _ref.bottom,
+      testId = _ref.testId,
+      linkText = _ref.linkText,
+      link = _ref.link,
+      onClose = _ref.onClose,
+      icon = _ref.icon,
+      noIcon = _ref.noIcon;
 
-  a {
-    color: ${props => props.link} !important;
-  }
-`;
-const BannerCenter = styled.div`
-  ${props => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}
+  var _React$useState = React.useState(window.innerWidth),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      width = _React$useState2[0],
+      setWidth = _React$useState2[1];
 
-  display: flex;
-  width: 100%;
-  margin: 0 0 0 16px;
-  ${BREAKPOINTS.MEDIUM} {
-    margin: 0 16px 0 32px;
-  }
-  ${BREAKPOINTS.LARGE} {
-    margin: 0 40px 0 56px;
-  }
-  &.small {
-    margin: 0 0 0 16px;
-  }
-  &.medium {
-    margin: 0 16px 0 32px;
-  }
-  &.large {
-    margin: 0 40px 0 56px;
-  }
-
-  > svg {
-    flex-shrink: 0;
-    margin: 12px 0;
-  }
-`;
-const ButtonWrapper = styled.div`
-  margin: 0 0 0 auto;
-`;
-const ButtonContainer = styled.div`
-  display: contents;
-  ${props => props.$type ? getButtonStyle(props.$type) : null};
-`;
-const BannerContentWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  margin: 12px 0;
-  &:not(:first-child) {
-    margin-left: 8px;
-  }
-`;
-
-const Banner = ({
-  size,
-  type,
-  children,
-  bottom,
-  testId,
-  linkText,
-  link,
-  onClose,
-  icon,
-  noIcon
-}) => {
-  const [width, setWidth] = React.useState(window.innerWidth);
-  React.useEffect(() => {
+  React.useEffect(function () {
     function handleResize() {
       setWidth(window.innerWidth);
     }
 
     window.addEventListener('resize', handleResize);
   });
-  const formatTypeToLowerCase = type?.toLowerCase();
+  var formatTypeToLowerCase = type === null || type === void 0 ? void 0 : type.toLowerCase();
 
   switch (formatTypeToLowerCase) {
     case 'warning':
-      return /*#__PURE__*/React.createElement(BannerContainer, {
+      return /*#__PURE__*/_jsx(BannerContainer, {
         "data-testid": testId,
         $type: COLORS.warning_100,
         link: COLORS.warning_700,
         hover: COLORS.warning_20,
-        bottom: bottom
-      }, /*#__PURE__*/React.createElement(BannerCenter, {
-        $color: COLORS.warning_700,
-        className: size
-      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(Help, {
-        color: COLORS.warning_700,
-        size: "24px"
-      }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, /*#__PURE__*/React.createElement(ComponentResponsive, {
-        size: size,
-        width: width,
-        color: COLORS.warning_700
-      }, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement(HyperLink, {
-        id: `${Math.floor(Math.random() * 999999999999)}_BannerLink`,
-        href: link,
-        variant: "default"
-      }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
-        $type: formatTypeToLowerCase
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        useTransparentBackground: true,
-        tabbedHereBackgroundColor: COLORS.white,
-        action: () => onClose()
-      }, /*#__PURE__*/React.createElement(Close, {
-        color: COLORS.warning_500,
-        size: "24px"
-      }))))));
+        bottom: bottom,
+        children: /*#__PURE__*/_jsxs(BannerCenter, {
+          $color: COLORS.warning_700,
+          className: size,
+          children: [icon ? icon : noIcon ? null : /*#__PURE__*/_jsx(Help, {
+            color: COLORS.warning_700,
+            size: "24px"
+          }), /*#__PURE__*/_jsx(BannerContentWrapper, {
+            children: /*#__PURE__*/_jsxs(ComponentResponsive, {
+              size: size,
+              width: width,
+              color: COLORS.warning_700,
+              children: [children, "\xA0\xA0", link && linkText && /*#__PURE__*/_jsx(HyperLink, {
+                id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
+                href: link,
+                variant: "default",
+                children: linkText
+              })]
+            })
+          }), onClose && /*#__PURE__*/_jsx(ButtonWrapper, {
+            children: /*#__PURE__*/_jsx(ButtonContainer, {
+              $type: formatTypeToLowerCase,
+              children: /*#__PURE__*/_jsx(IconButton, {
+                variant: "secondary",
+                shape: "circular",
+                useTransparentBackground: true,
+                focusBackgroundColor: COLORS.white,
+                action: function action() {
+                  return onClose();
+                },
+                children: /*#__PURE__*/_jsx(Close, {
+                  color: COLORS.warning_500,
+                  size: "24px"
+                })
+              })
+            })
+          })]
+        })
+      });
 
     case 'critical':
-      return /*#__PURE__*/React.createElement(BannerContainer, {
+      return /*#__PURE__*/_jsx(BannerContainer, {
         "data-testid": testId,
         $type: COLORS.critical_100,
         link: COLORS.critical_700,
         hover: COLORS.critical_20,
         bottom: bottom,
-        className: size
-      }, /*#__PURE__*/React.createElement(BannerCenter, {
-        $color: COLORS.critical_700,
-        className: size
-      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(TechnicalWarning, {
-        color: COLORS.critical_700,
-        size: "24px"
-      }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, /*#__PURE__*/React.createElement(ComponentResponsive, {
-        size: size,
-        width: width,
-        color: COLORS.critical_700
-      }, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement(HyperLink, {
-        id: `${Math.floor(Math.random() * 999999999999)}_BannerLink`,
-        href: link,
-        variant: "default"
-      }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
-        $type: formatTypeToLowerCase
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        useTransparentBackground: true,
-        tabbedHereBackgroundColor: COLORS.white,
-        action: () => onClose()
-      }, /*#__PURE__*/React.createElement(Close, {
-        color: COLORS.critical_500,
-        size: "24px"
-      }))))));
+        className: size,
+        children: /*#__PURE__*/_jsxs(BannerCenter, {
+          $color: COLORS.critical_700,
+          className: size,
+          children: [icon ? icon : noIcon ? null : /*#__PURE__*/_jsx(TechnicalWarning, {
+            color: COLORS.critical_700,
+            size: "24px"
+          }), /*#__PURE__*/_jsx(BannerContentWrapper, {
+            children: /*#__PURE__*/_jsxs(ComponentResponsive, {
+              size: size,
+              width: width,
+              color: COLORS.critical_700,
+              children: [children, "\xA0\xA0", link && linkText && /*#__PURE__*/_jsx(HyperLink, {
+                id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
+                href: link,
+                variant: "default",
+                children: linkText
+              })]
+            })
+          }), onClose && /*#__PURE__*/_jsx(ButtonWrapper, {
+            children: /*#__PURE__*/_jsx(ButtonContainer, {
+              $type: formatTypeToLowerCase,
+              children: /*#__PURE__*/_jsx(IconButton, {
+                variant: "secondary",
+                shape: "circular",
+                useTransparentBackground: true,
+                focusBackgroundColor: COLORS.white,
+                action: function action() {
+                  return onClose();
+                },
+                children: /*#__PURE__*/_jsx(Close, {
+                  color: COLORS.critical_500,
+                  size: "24px"
+                })
+              })
+            })
+          })]
+        })
+      });
 
     case 'positive':
-      return /*#__PURE__*/React.createElement(BannerContainer, {
+      return /*#__PURE__*/_jsx(BannerContainer, {
         "data-testid": testId,
         $type: COLORS.correct_100,
         link: COLORS.correct_700,
         hover: COLORS.correct_20,
         bottom: bottom,
-        className: size
-      }, /*#__PURE__*/React.createElement(BannerCenter, {
-        $color: COLORS.correct_700,
-        className: size
-      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(ThumbsUp, {
-        color: COLORS.correct_700,
-        size: "24px"
-      }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, /*#__PURE__*/React.createElement(ComponentResponsive, {
-        size: size,
-        width: width,
-        color: COLORS.correct_700
-      }, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement(HyperLink, {
-        id: `${Math.floor(Math.random() * 999999999999)}_BannerLink`,
-        href: link,
-        variant: "default"
-      }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
-        $type: formatTypeToLowerCase
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        useTransparentBackground: true,
-        tabbedHereBackgroundColor: COLORS.white,
-        action: () => onClose()
-      }, /*#__PURE__*/React.createElement(Close, {
-        color: COLORS.correct_500,
-        size: "24px"
-      }))))));
+        className: size,
+        children: /*#__PURE__*/_jsxs(BannerCenter, {
+          $color: COLORS.correct_700,
+          className: size,
+          children: [icon ? icon : noIcon ? null : /*#__PURE__*/_jsx(ThumbsUp, {
+            color: COLORS.correct_700,
+            size: "24px"
+          }), /*#__PURE__*/_jsx(BannerContentWrapper, {
+            children: /*#__PURE__*/_jsxs(ComponentResponsive, {
+              size: size,
+              width: width,
+              color: COLORS.correct_700,
+              children: [children, "\xA0\xA0", link && linkText && /*#__PURE__*/_jsx(HyperLink, {
+                id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
+                href: link,
+                variant: "default",
+                children: linkText
+              })]
+            })
+          }), onClose && /*#__PURE__*/_jsx(ButtonWrapper, {
+            children: /*#__PURE__*/_jsx(ButtonContainer, {
+              $type: formatTypeToLowerCase,
+              children: /*#__PURE__*/_jsx(IconButton, {
+                variant: "secondary",
+                shape: "circular",
+                useTransparentBackground: true,
+                focusBackgroundColor: COLORS.white,
+                action: function action() {
+                  return onClose();
+                },
+                children: /*#__PURE__*/_jsx(Close, {
+                  color: COLORS.correct_500,
+                  size: "24px"
+                })
+              })
+            })
+          })]
+        })
+      });
 
     default:
-      return /*#__PURE__*/React.createElement(BannerContainer, {
+      return /*#__PURE__*/_jsx(BannerContainer, {
         "data-testid": testId,
         $type: COLORS.primary_100,
         link: COLORS.primary_700,
         hover: COLORS.primary_20,
         bottom: bottom,
-        className: size
-      }, /*#__PURE__*/React.createElement(BannerCenter, {
-        $color: COLORS.primary_700,
-        className: size
-      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(Tip, {
-        color: COLORS.primary_700,
-        size: "24px"
-      }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, /*#__PURE__*/React.createElement(ComponentResponsive, {
-        size: size,
-        width: width,
-        color: COLORS.primary_700
-      }, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement(HyperLink, {
-        id: `${Math.floor(Math.random() * 999999999999)}_BannerLink`,
-        href: link,
-        variant: "default"
-      }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
-        $type: "neutral"
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        useTransparentBackground: true,
-        tabbedHereBackgroundColor: COLORS.white,
-        action: () => onClose()
-      }, /*#__PURE__*/React.createElement(Close, {
-        color: COLORS.primary_500,
-        size: "24px"
-      }))))));
+        className: size,
+        children: /*#__PURE__*/_jsxs(BannerCenter, {
+          $color: COLORS.primary_700,
+          className: size,
+          children: [icon ? icon : noIcon ? null : /*#__PURE__*/_jsx(Tip, {
+            color: COLORS.primary_700,
+            size: "24px"
+          }), /*#__PURE__*/_jsx(BannerContentWrapper, {
+            children: /*#__PURE__*/_jsxs(ComponentResponsive, {
+              size: size,
+              width: width,
+              color: COLORS.primary_700,
+              children: [children, "\xA0\xA0", link && linkText && /*#__PURE__*/_jsx(HyperLink, {
+                id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
+                href: link,
+                variant: "default",
+                children: linkText
+              })]
+            })
+          }), onClose && /*#__PURE__*/_jsx(ButtonWrapper, {
+            children: /*#__PURE__*/_jsx(ButtonContainer, {
+              $type: "neutral",
+              children: /*#__PURE__*/_jsx(IconButton, {
+                variant: "secondary",
+                shape: "circular",
+                useTransparentBackground: true,
+                focusBackgroundColor: COLORS.white,
+                action: function action() {
+                  return onClose();
+                },
+                children: /*#__PURE__*/_jsx(Close, {
+                  color: COLORS.primary_500,
+                  size: "24px"
+                })
+              })
+            })
+          })]
+        })
+      });
   }
 };