@laerdal/life-react-components 0.0.280-dev.3 → 0.0.280-dev.7

package/dist/js/Banners/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Banners/styles.tsx"],"names":["getButtonStyle","type","css","COLORS","warning_500","warning_200","warning_700","warning_300","warning_800","critical_600","critical_200","critical_700","critical_300","critical_800","correct_500","correct_200","correct_700","correct_300","correct_800","primary_500","primary_200","primary_700","primary_300","primary_800"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAEO,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,IAAD,EAAkB;AAC9C,UAAQA,IAAR;AACE,SAAK,SAAL;AACE,iBAAOC,qBAAP,kmBAMYC,eAAOC,WANnB,EAU0BD,eAAOE,WAVjC,EAccF,eAAOG,WAdrB,EAmBoBH,eAAOI,WAnB3B,EAuBcJ,eAAOK,WAvBrB;;AA2BF,SAAK,UAAL;AACE,iBAAON,qBAAP,omBAMYC,eAAOM,YANnB,EAU0BN,eAAOO,YAVjC,EAccP,eAAOQ,YAdrB,EAmBoBR,eAAOS,YAnB3B,EAuBcT,eAAOU,YAvBrB;;AA2BF,SAAK,UAAL;AACE,iBAAOX,qBAAP,omBAMYC,eAAOW,WANnB,EAU0BX,eAAOY,WAVjC,EAccZ,eAAOa,WAdrB,EAmBoBb,eAAOc,WAnB3B,EAuBcd,eAAOe,WAvBrB;;AA2BF;AACE,iBAAOhB,qBAAP,omBAMYC,eAAOgB,WANnB,EAU0BhB,eAAOiB,WAVjC,EAccjB,eAAOkB,WAdrB,EAmBoBlB,eAAOmB,WAnB3B,EAuBcnB,eAAOoB,WAvBrB;AAtFJ;AAkHD,CAnHM","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '../styles';\n\nexport const getButtonStyle = (type: string) => {\n  switch (type) {\n    case 'warning':\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.warning_500};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.warning_200};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.warning_700};\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ${COLORS.warning_300};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.warning_800};\n          }\n        }\n      `;\n    case 'critical':\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.critical_600};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.critical_200};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.critical_700};\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ${COLORS.critical_300};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.critical_800};\n          }\n        }\n      `;\n    case 'positive':\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.correct_500};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.correct_200};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.correct_700};\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ${COLORS.correct_300};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.correct_800};\n          }\n        }\n      `;\n    default:\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.primary_500};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.primary_200};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.primary_700};\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ${COLORS.primary_300};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.primary_800};\n          }\n        }\n      `;\n  }\n};\n"],"file":"styles.js"}

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

@@ -19,6 +19,8 @@ var _InputFields = require("../../InputFields");
 
 var _SystemIcons = require("../../icons/systemicons/SystemIcons");
 
+var _Button = require("../../Button");
+
 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); }
@@ -51,7 +53,7 @@ var NewsletterButton = _styledComponents.default.button(_templateObject4 || (_te
 
 var SocialMedia = _styledComponents.default.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    font-weight: normal;\n    font-size: 16px;\n  }\n\n  ", " {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n"])), _styles.COLORS.white, _styles.BREAKPOINTS.MEDIUM);
 
-var SocialMediaButtons = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n\n  a {\n    display: flex;\n    width: 32px;\n    height: 32px;\n    background-color: transparent;\n    color: ", ";\n    margin: 0 0 0 20px;\n    border-radius: 4px;\n\n    &:first-child {\n      margin: 0;\n    }\n    svg {\n      margin: auto;\n    }\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n    &:focus {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline: none;\n    }\n  }\n\n  ", " {\n    justify-content: flex-end;\n  }\n"])), _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.neutral_600, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _styles.COLORS.white, _styles.COLORS.neutral_600, _styles.BREAKPOINTS.MEDIUM);
+var SocialMediaButtons = _styledComponents.default.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      outline: none;\n      div {\n        background-color: ", ";\n        color: ", ";\n        outline: none;\n        box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n      }\n      div svg path,\n      div svg {\n        fill: ", ";\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.COLORS.white, _styles.COLORS.neutral_600, _styles.COLORS.primary_500, _styles.COLORS.neutral_600, _styles.BREAKPOINTS.MEDIUM);
 
 var FooterNewsletterAndSocialSection = function FooterNewsletterAndSocialSection(_ref) {
   var actionOnNewsletterSignup = _ref.actionOnNewsletterSignup,
@@ -80,17 +82,29 @@ var FooterNewsletterAndSocialSection = function FooterNewsletterAndSocialSection
     href: "https://www.facebook.com/LaerdalMedical/",
     target: "_blank",
     rel: "noreferrer noopener"
-  }, /*#__PURE__*/React.createElement(_SystemIcons.Facebook, null)), /*#__PURE__*/React.createElement("a", {
+  }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+    variant: "secondary",
+    action: function action() {},
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(_SystemIcons.Facebook, null))), /*#__PURE__*/React.createElement("a", {
     key: "socialmedia_".concat(Math.floor(Math.random() * 999999999999)),
     href: "https://twitter.com/laerdalmedical",
     target: "_blank",
     rel: "noreferrer noopener"
-  }, /*#__PURE__*/React.createElement(_SystemIcons.Twitter, null)), /*#__PURE__*/React.createElement("a", {
+  }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+    variant: "secondary",
+    action: function action() {},
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(_SystemIcons.Twitter, null))), /*#__PURE__*/React.createElement("a", {
     key: "socialmedia_".concat(Math.floor(Math.random() * 999999999999)),
     href: "https://www.youtube.com/user/LaerdalMedical",
     target: "_blank",
     rel: "noreferrer noopener"
-  }, /*#__PURE__*/React.createElement(_SystemIcons.Youtube, null)))));
+  }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+    variant: "secondary",
+    action: function action() {},
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(_SystemIcons.Youtube, null))))));
 };
 
 FooterNewsletterAndSocialSection.propTypes = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"names":["NewsletterAndSocial","styled","section","BREAKPOINTS","MEDIUM","NewsletterEmailSection","div","COLORS","white","NewsletterEmail","NewsletterButton","button","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","React","useState","emailInput","setEmailInput","value","e","target","Math","floor","random"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { TextField } from '../../InputFields';\nimport { Facebook, Twitter, Youtube } from '../../icons/systemicons/SystemIcons';\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    color: ${COLORS.white};\n    font-family: Lato;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 16px;\n    line-height: 120%;\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-top: 2px;\n  margin: 2px auto 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n`;\n\nconst NewsletterButton = styled.button`\n  background: transparent;\n  color: ${COLORS.white};\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  font-family: Lato;\n  font-style: normal;\n  font-weight: bold;\n  font-size: 19px;\n  line-height: 23px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\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    font-weight: normal;\n    font-size: 16px;\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  a {\n    display: flex;\n    width: 32px;\n    height: 32px;\n    background-color: transparent;\n    color: ${COLORS.white};\n    margin: 0 0 0 20px;\n    border-radius: 4px;\n\n    &:first-child {\n      margin: 0;\n    }\n    svg {\n      margin: auto;\n    }\n    &:hover {\n      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_600};\n      cursor: pointer;\n    }\n    &:active {\n      background-color: ${COLORS.primary_800};\n      color: ${COLORS.primary_100};\n      cursor: pointer;\n    }\n    &:focus {\n      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_600};\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline: none;\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 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 key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <Facebook />\n          </a>\n          <a key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <Twitter />\n          </a>\n          <a key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <Youtube />\n          </a>\n        </SocialMediaButtons>\n      </SocialMedia>\n    </NewsletterAndSocial>\n  );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"file":"FooterNewsletterAndSocialSection.js"}
+{"version":3,"sources":["../../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"names":["NewsletterAndSocial","styled","section","BREAKPOINTS","MEDIUM","NewsletterEmailSection","div","COLORS","white","NewsletterEmail","NewsletterButton","button","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","primary_500","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","React","useState","emailInput","setEmailInput","value","e","target","Math","floor","random"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,mBAAmB,GAAGC,0BAAOC,OAAV,wLAKrBC,oBAAYC,MALS,CAAzB;;AAUA,IAAMC,sBAAsB,GAAGJ,0BAAOK,GAAV,wfAIxBH,oBAAYC,MAJY,EAUfG,eAAOC,KAVQ,EAoBtBL,oBAAYC,MApBU,CAA5B;;AA8BA,IAAMK,eAAe,GAAGR,0BAAOK,GAAV,0OAMjBH,oBAAYC,MANK,CAArB;;AAYA,IAAMM,gBAAgB,GAAGT,0BAAOU,MAAV,mdAEXJ,eAAOC,KAFI,EAKAD,eAAOC,KALP,EAelBL,oBAAYC,MAfM,CAAtB;;AAyBA,IAAMQ,WAAW,GAAGX,0BAAOK,GAAV,mYACNC,eAAOC,KADD,EAgBbL,oBAAYC,MAhBC,CAAjB;;AAwBA,IAAMS,kBAAkB,GAAGZ,0BAAOK,GAAV,w2BAOXC,eAAOC,KAPI,EAWVD,eAAOC,KAXG,EAaRD,eAAOC,KAbC,EAqBED,eAAOC,KArBT,EAsBTD,eAAOO,WAtBE,EAyBEP,eAAOQ,WAzBT,EA0BTR,eAAOS,WA1BE,EAiCIT,eAAOC,KAjCX,EAkCPD,eAAOO,WAlCA,EAoCUP,eAAOU,WApCjB,EAwCRV,eAAOO,WAxCC,EA6CpBX,oBAAYC,MA7CQ,CAAxB;;AAwDA,IAAMc,gCAAgC,GAAG,SAAnCA,gCAAmC,OAAuG;AAAA,MAApGC,wBAAoG,QAApGA,wBAAoG;AAAA,MAA1EC,eAA0E,QAA1EA,eAA0E;AAAA,MAAzDC,gBAAyD,QAAzDA,gBAAyD;;AAC9I,wBAAoCC,KAAK,CAACC,QAAN,CAAuB,EAAvB,CAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AACA,sBACE,oBAAC,mBAAD,qBACE,oBAAC,sBAAD,qBACE,mCAAQL,eAAR,CADF,eAEE,oBAAC,eAAD,qBACE,oBAAC,sBAAD;AAAW,IAAA,EAAE,EAAC,iBAAd;AAAgC,IAAA,aAAa,EAAE,IAA/C;AAAqD,IAAA,WAAW,EAAEC,gBAAlE;AAAoF,IAAA,KAAK,EAAEG,UAA3F;AAAuG,IAAA,QAAQ,EAAE,kBAACE,KAAD;AAAA,aAAmBD,aAAa,CAACC,KAAD,CAAhC;AAAA;AAAjH,IADF,eAEE,oBAAC,gBAAD;AAAkB,IAAA,OAAO,EAAE,iBAACC,CAAD;AAAA,aAAYR,wBAAwB,IAAIA,wBAAwB,CAACQ,CAAC,CAACC,MAAF,CAASF,KAAV,CAAhE;AAAA;AAA3B,eAFF,CAFF,CADF,eAQE,oBAAC,WAAD,qBACE,4DADF,eAEE,oBAAC,kBAAD,qBACE;AAAG,IAAA,GAAG,wBAAiBG,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAjB,CAAN;AAAmE,IAAA,IAAI,EAAC,0CAAxE;AAAmH,IAAA,MAAM,EAAC,QAA1H;AAAmI,IAAA,GAAG,EAAC;AAAvI,kBACE,oBAAC,kBAAD;AAAY,IAAA,OAAO,EAAC,WAApB;AAAgC,IAAA,MAAM,EAAE,kBAAM,CAAE,CAAhD;AAAkD,IAAA,QAAQ,EAAE,CAAC;AAA7D,kBACE,oBAAC,qBAAD,OADF,CADF,CADF,eAME;AAAG,IAAA,GAAG,wBAAiBF,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAjB,CAAN;AAAmE,IAAA,IAAI,EAAC,oCAAxE;AAA6G,IAAA,MAAM,EAAC,QAApH;AAA6H,IAAA,GAAG,EAAC;AAAjI,kBACE,oBAAC,kBAAD;AAAY,IAAA,OAAO,EAAC,WAApB;AAAgC,IAAA,MAAM,EAAE,kBAAM,CAAE,CAAhD;AAAkD,IAAA,QAAQ,EAAE,CAAC;AAA7D,kBACE,oBAAC,oBAAD,OADF,CADF,CANF,eAWE;AAAG,IAAA,GAAG,wBAAiBF,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAjB,CAAN;AAAmE,IAAA,IAAI,EAAC,6CAAxE;AAAsH,IAAA,MAAM,EAAC,QAA7H;AAAsI,IAAA,GAAG,EAAC;AAA1I,kBACE,oBAAC,kBAAD;AAAY,IAAA,OAAO,EAAC,WAApB;AAAgC,IAAA,MAAM,EAAE,kBAAM,CAAE,CAAhD;AAAkD,IAAA,QAAQ,EAAE,CAAC;AAA7D,kBACE,oBAAC,oBAAD,OADF,CADF,CAXF,CAFF,CARF,CADF;AA+BD,CAjCD;;;AALEZ,EAAAA,wB;AACAC,EAAAA,e;AACAC,EAAAA,gB;;eAsCaH,gC","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { TextField } from '../../InputFields';\nimport { Facebook, Twitter, Youtube } from '../../icons/systemicons/SystemIcons';\nimport { IconButton } from '../../Button';\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    color: ${COLORS.white};\n    font-family: Lato;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 16px;\n    line-height: 120%;\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-top: 2px;\n  margin: 2px auto 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n`;\n\nconst NewsletterButton = styled.button`\n  background: transparent;\n  color: ${COLORS.white};\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  font-family: Lato;\n  font-style: normal;\n  font-weight: bold;\n  font-size: 19px;\n  line-height: 23px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\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    font-weight: normal;\n    font-size: 16px;\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      outline: none;\n      div {\n        background-color: ${COLORS.white};\n        color: ${COLORS.neutral_600};\n        outline: none;\n        box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n      }\n      div svg path,\n      div svg {\n        fill: ${COLORS.neutral_600};\n      }\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 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 key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} 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 key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} 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 key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} 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"],"file":"FooterNewsletterAndSocialSection.js"}

package/dist/js/InputFields/styling.js

@@ -34,8 +34,8 @@ var activeCorrectInput = (0, _styledComponents.css)(_templateObject5 || (_templa
 var tabbedHereStyle = (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  outline: none;\n  box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1 !important;\n"])));
 exports.tabbedHereStyle = tabbedHereStyle;
 
-var InputFieldStyling = _styledComponents.default.input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  border: 2px solid transparent;\n  box-shadow: ", ";\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  box-sizing: border-box;\n  width: 100%;\n  outline: none;\n  border-radius: 4.5px;\n\n  font-size: 16px;\n\n  &::placeholder {\n    font-family: 'Lato', sans-serif;\n    font-style: italic;\n    font-weight: normal;\n    font-size: 16px;\n    color: ", ";\n  }\n\n  ", "{ \n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px; \n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px; \n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n\n  color: ", " !important;\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.error {\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 2px;\n    border-color: #e97116;\n    padding: 0 15px !important;\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.error {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n"])), function (props) {
-  return props.withoutBorder ? 'none' : "inset 0px 0px 0px 1px ".concat(_styles.COLORS.neutral_300);
+var InputFieldStyling = _styledComponents.default.input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  border: 2px solid transparent;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  box-sizing: border-box;\n  width: 100%;\n  outline: none;\n  border-radius: 4.5px;\n\n  font-size: 16px;\n\n  &::placeholder {\n    font-family: 'Lato', sans-serif;\n    font-style: italic;\n    font-weight: normal;\n    font-size: 16px;\n    color: ", ";\n  }\n\n  ", "{ \n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px; \n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px; \n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n\n  color: ", " !important;\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.error {\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 2px;\n    border-color: #e97116;\n    padding: 0 15px !important;\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.error {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n"])), function (props) {
+  return props.withoutBorder ? "-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      " : "-webkit-box-shadow: inset 0px 0px 0px 1px ".concat(_styles.COLORS.neutral_300, ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.neutral_300, ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.neutral_300, ";");
 }, _styles.COLORS.neutral_600, _styles.BREAKPOINTS.MEDIUM, _styles.COLORS.black, function (props) {
   return props.locked ? lockedState : '';
 }, function (props) {

package/dist/js/InputFields/styling.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/styling.ts"],"names":["InputWrapper","styled","div","props","locked","disabled","margin","lockedState","css","COLORS","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","tabbedHereStyle","InputFieldStyling","input","withoutBorder","BREAKPOINTS","MEDIUM","black","activeValidationMessage","activeErrorMessage","correctInput","tabbedHere","primary_800","primary_700","ValidationStyling","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;AAEO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,2GAErB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,IAAgBD,KAAK,CAACE,QAAtB,GAAiC,sBAAjC,GAA0D,EAA/D;AAAA,CAFgB,EAGrB,UAAAF,KAAK;AAAA,SAAKA,KAAK,CAACG,MAAN,qBAA0BH,KAAK,CAACG,MAAhC,SAA4C,EAAjD;AAAA,CAHgB,CAAlB;;;AAMP,IAAMC,WAAW,OAAGC,qBAAH,0PACKC,eAAOC,WADZ,EAEqBD,eAAOE,WAF5B,EAGNF,eAAOG,WAHD,CAAjB;AAQO,IAAMC,4BAA4B,OAAGL,qBAAH,yNACKC,eAAOK,WADZ,EAEEL,eAAOK,WAFT,EAGHL,eAAOK,WAHJ,CAAlC;;AAKP,IAAMC,uBAAuB,OAAGP,qBAAH,yNACiBC,eAAOO,YADxB,EAEcP,eAAOO,YAFrB,EAGSP,eAAOO,YAHhB,CAA7B;AAKA,IAAMC,kBAAkB,OAAGT,qBAAH,yNACsBC,eAAOS,WAD7B,EAEmBT,eAAOS,WAF1B,EAGcT,eAAOS,WAHrB,CAAxB;AAKO,IAAMC,eAAe,OAAGX,qBAAH,kLAArB;;;AAKP,IAAMY,iBAAiB,GAAGnB,0BAAOoB,KAAV,+iEAcP,UAAAlB,KAAK;AAAA,SAAKA,KAAK,CAACmB,aAAN,GAAsB,MAAtB,mCAAwDb,eAAOE,WAA/D,CAAL;AAAA,CAdE,EA+BVF,eAAOG,WA/BG,EAkCnBW,oBAAYC,MAlCO,EA6DZf,eAAOgB,KA7DK,EA+DnB,UAAAtB,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,GAAeG,WAAf,GAA6B,EAAlC;AAAA,CA/Dc,EAgEnB,UAAAJ,KAAK;AAAA,SAAKA,KAAK,CAACuB,uBAAN,GAAgCb,4BAAhC,GAA+D,EAApE;AAAA,CAhEc,EAiEnB,UAAAV,KAAK;AAAA,SAAKA,KAAK,CAACwB,kBAAN,GAA2BZ,uBAA3B,GAAqD,EAA1D;AAAA,CAjEc,EAkEnB,UAAAZ,KAAK;AAAA,SAAKA,KAAK,CAACyB,YAAN,GAAqBX,kBAArB,GAA0C,EAA/C;AAAA,CAlEc,EAmEnB,UAAAd,KAAK;AAAA,SAAKA,KAAK,CAAC0B,UAAN,GAAmBV,eAAnB,GAAqC,EAA1C;AAAA,CAnEc,EAsECV,eAAOC,WAtER,EA2EVD,eAAOE,WA3EG,EA8EyBF,eAAOqB,WA9EhC,EA+EsBrB,eAAOqB,WA/E7B,EAgFiBrB,eAAOqB,WAhFxB,EAoGyBrB,eAAOsB,WApGhC,EAqGsBtB,eAAOsB,WArG7B,EAsGiBtB,eAAOsB,WAtGxB,EA0GyBtB,eAAOqB,WA1GhC,EA2GsBrB,eAAOqB,WA3G7B,EA4GiBrB,eAAOqB,WA5GxB,CAAvB;;;AAwHA,IAAME,iBAAiB,OAAGxB,qBAAH,4XAAvB;;;AAmBO,IAAMyB,YAAY,GAAGhC,0BAAOiC,IAAV,8LACdzB,eAAO0B,YADO,CAAlB;;;;AAQA,IAAMC,OAAO,GAAGnC,0BAAOC,GAAV,iWAIhBqB,oBAAYC,MAJI,CAAb;;;AAwBA,IAAMa,cAAc,GAAG,+BAAOD,OAAP,CAAH,4FAChB3B,eAAO6B,WADS,CAApB;;AAGA,IAAMC,YAAY,GAAG,+BAAOH,OAAP,CAAH,4FACd3B,eAAO0B,YADO,CAAlB;;AAGA,IAAMK,iBAAiB,GAAG,+BAAOJ,OAAP,CAAH,4FACnB3B,eAAOG,WADY,CAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\n\nexport const InputWrapper = styled.div<{ locked?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${props => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeValidationMessageState = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\nconst activeErrorMessageState = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\nconst activeCorrectInput = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n`;\nexport const tabbedHereStyle = css`\n  outline: none;\n  box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1 !important;\n`;\n\nconst InputFieldStyling = styled.input<{\n  locked?: boolean;\n  activeValidationMessage?: boolean;\n  activeErrorMessage?: boolean;\n  correctInput?: boolean;\n  active?: boolean;\n  tabbedHere?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  border: 2px solid transparent;\n  box-shadow: ${props => (props.withoutBorder ? 'none' : `inset 0px 0px 0px 1px ${COLORS.neutral_300}`)};\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  box-sizing: border-box;\n  width: 100%;\n  outline: none;\n  border-radius: 4.5px;\n\n  font-size: 16px;\n\n  &::placeholder {\n    font-family: 'Lato', sans-serif;\n    font-style: italic;\n    font-weight: normal;\n    font-size: 16px;\n    color: ${COLORS.neutral_600};\n  }\n\n  ${BREAKPOINTS.MEDIUM}{ \n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px; \n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px; \n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n\n  color: ${COLORS.black} !important;\n\n  ${props => (props.locked ? lockedState : '')}\n  ${props => (props.activeValidationMessage ? activeValidationMessageState : '')}\n  ${props => (props.activeErrorMessage ? activeErrorMessageState : '')}\n  ${props => (props.correctInput ? activeCorrectInput : '')}\n  ${props => (props.tabbedHere ? tabbedHereStyle : '')}\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.error {\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 2px;\n    border-color: #e97116;\n    padding: 0 15px !important;\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.error {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    line-height: 14px;\n    font-size: 13px;\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    color: #e76468;\n    font-weight: 700;\n    font-size: 13px;\n    line-height: 15px;\n  }\n`;\n\nexport const RequiredStar = styled.span`\n  color: ${COLORS.critical_500};\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n`;\nexport const Warning = styled.div`\n  font-size: 12px;\n  line-height: 140%;\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 14px;\n  }\n\n  &.small {\n    font-size: 12px;\n  }\n  &.medium {\n    font-size: 14px;\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 5px;\n  }\n`;\nexport const WarningMessage = styled(Warning)`\n  color: ${COLORS.warning_500};\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n"],"file":"styling.js"}
+{"version":3,"sources":["../../../src/InputFields/styling.ts"],"names":["InputWrapper","styled","div","props","locked","disabled","margin","lockedState","css","COLORS","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","tabbedHereStyle","InputFieldStyling","input","withoutBorder","BREAKPOINTS","MEDIUM","black","activeValidationMessage","activeErrorMessage","correctInput","tabbedHere","primary_800","primary_700","ValidationStyling","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;AAEO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,2GAErB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,IAAgBD,KAAK,CAACE,QAAtB,GAAiC,sBAAjC,GAA0D,EAA/D;AAAA,CAFgB,EAGrB,UAAAF,KAAK;AAAA,SAAKA,KAAK,CAACG,MAAN,qBAA0BH,KAAK,CAACG,MAAhC,SAA4C,EAAjD;AAAA,CAHgB,CAAlB;;;AAMP,IAAMC,WAAW,OAAGC,qBAAH,0PACKC,eAAOC,WADZ,EAEqBD,eAAOE,WAF5B,EAGNF,eAAOG,WAHD,CAAjB;AAQO,IAAMC,4BAA4B,OAAGL,qBAAH,yNACKC,eAAOK,WADZ,EAEEL,eAAOK,WAFT,EAGHL,eAAOK,WAHJ,CAAlC;;AAKP,IAAMC,uBAAuB,OAAGP,qBAAH,yNACiBC,eAAOO,YADxB,EAEcP,eAAOO,YAFrB,EAGSP,eAAOO,YAHhB,CAA7B;AAKA,IAAMC,kBAAkB,OAAGT,qBAAH,yNACsBC,eAAOS,WAD7B,EAEmBT,eAAOS,WAF1B,EAGcT,eAAOS,WAHrB,CAAxB;AAKO,IAAMC,eAAe,OAAGX,qBAAH,kLAArB;;;AAKP,IAAMY,iBAAiB,GAAGnB,0BAAOoB,KAAV,+jEAenB,UAAClB,KAAD;AAAA,SACAA,KAAK,CAACmB,aAAN,oJAKiDb,eAAOE,WALxD,6DAM2CF,eAAOE,WANlD,wDAOsCF,eAAOE,WAP7C,MADA;AAAA,CAfmB,EAwCVF,eAAOG,WAxCG,EA2CnBW,oBAAYC,MA3CO,EAsEZf,eAAOgB,KAtEK,EAwEnB,UAAAtB,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,GAAeG,WAAf,GAA6B,EAAlC;AAAA,CAxEc,EAyEnB,UAAAJ,KAAK;AAAA,SAAKA,KAAK,CAACuB,uBAAN,GAAgCb,4BAAhC,GAA+D,EAApE;AAAA,CAzEc,EA0EnB,UAAAV,KAAK;AAAA,SAAKA,KAAK,CAACwB,kBAAN,GAA2BZ,uBAA3B,GAAqD,EAA1D;AAAA,CA1Ec,EA2EnB,UAAAZ,KAAK;AAAA,SAAKA,KAAK,CAACyB,YAAN,GAAqBX,kBAArB,GAA0C,EAA/C;AAAA,CA3Ec,EA4EnB,UAAAd,KAAK;AAAA,SAAKA,KAAK,CAAC0B,UAAN,GAAmBV,eAAnB,GAAqC,EAA1C;AAAA,CA5Ec,EA+ECV,eAAOC,WA/ER,EAoFVD,eAAOE,WApFG,EAuFyBF,eAAOqB,WAvFhC,EAwFsBrB,eAAOqB,WAxF7B,EAyFiBrB,eAAOqB,WAzFxB,EA6GyBrB,eAAOsB,WA7GhC,EA8GsBtB,eAAOsB,WA9G7B,EA+GiBtB,eAAOsB,WA/GxB,EAmHyBtB,eAAOqB,WAnHhC,EAoHsBrB,eAAOqB,WApH7B,EAqHiBrB,eAAOqB,WArHxB,CAAvB;;;AAiIA,IAAME,iBAAiB,OAAGxB,qBAAH,4XAAvB;;;AAmBO,IAAMyB,YAAY,GAAGhC,0BAAOiC,IAAV,8LACdzB,eAAO0B,YADO,CAAlB;;;;AAQA,IAAMC,OAAO,GAAGnC,0BAAOC,GAAV,iWAIhBqB,oBAAYC,MAJI,CAAb;;;AAwBA,IAAMa,cAAc,GAAG,+BAAOD,OAAP,CAAH,4FAChB3B,eAAO6B,WADS,CAApB;;AAGA,IAAMC,YAAY,GAAG,+BAAOH,OAAP,CAAH,4FACd3B,eAAO0B,YADO,CAAlB;;AAGA,IAAMK,iBAAiB,GAAG,+BAAOJ,OAAP,CAAH,4FACnB3B,eAAOG,WADY,CAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\n\nexport const InputWrapper = styled.div<{ locked?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${props => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeValidationMessageState = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\nconst activeErrorMessageState = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\nconst activeCorrectInput = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n`;\nexport const tabbedHereStyle = css`\n  outline: none;\n  box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1 !important;\n`;\n\nconst InputFieldStyling = styled.input<{\n  locked?: boolean;\n  activeValidationMessage?: boolean;\n  activeErrorMessage?: boolean;\n  correctInput?: boolean;\n  active?: boolean;\n  tabbedHere?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  border: 2px solid transparent;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  box-sizing: border-box;\n  width: 100%;\n  outline: none;\n  border-radius: 4.5px;\n\n  font-size: 16px;\n\n  &::placeholder {\n    font-family: 'Lato', sans-serif;\n    font-style: italic;\n    font-weight: normal;\n    font-size: 16px;\n    color: ${COLORS.neutral_600};\n  }\n\n  ${BREAKPOINTS.MEDIUM}{ \n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px; \n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px; \n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n\n  color: ${COLORS.black} !important;\n\n  ${props => (props.locked ? lockedState : '')}\n  ${props => (props.activeValidationMessage ? activeValidationMessageState : '')}\n  ${props => (props.activeErrorMessage ? activeErrorMessageState : '')}\n  ${props => (props.correctInput ? activeCorrectInput : '')}\n  ${props => (props.tabbedHere ? tabbedHereStyle : '')}\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.error {\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 2px;\n    border-color: #e97116;\n    padding: 0 15px !important;\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.error {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    line-height: 14px;\n    font-size: 13px;\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    color: #e76468;\n    font-weight: 700;\n    font-size: 13px;\n    line-height: 15px;\n  }\n`;\n\nexport const RequiredStar = styled.span`\n  color: ${COLORS.critical_500};\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n`;\nexport const Warning = styled.div`\n  font-size: 12px;\n  line-height: 140%;\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 14px;\n  }\n\n  &.small {\n    font-size: 12px;\n  }\n  &.medium {\n    font-size: 14px;\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 5px;\n  }\n`;\nexport const WarningMessage = styled(Warning)`\n  color: ${COLORS.warning_500};\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n"],"file":"styling.js"}

package/dist/js/styles/typography.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,17 +11,25 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
 var _ = require(".");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+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; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 var TYPOGRAPHY = {
   fontFamily: 'Lato, sans-serif'
 };
 exports.TYPOGRAPHY = TYPOGRAPHY;
-var TypographyBase = (0, _styledComponents.default)("div")(function (_ref) {
+var TypographyBase = (0, _styledComponents.default)('div')(function (_ref) {
   var color = _ref.color,
       lineHeight = _ref.lineHeight,
       fontSize = _ref.fontSize,
@@ -103,17 +113,10 @@ var HeadlineXXS = (0, _styledComponents.default)(HeadlineBase)(function (_ref8)
   };
 });
 exports.HeadlineXXS = HeadlineXXS;
-var ParagraphBase = (0, _styledComponents.default)(TypographyBase)(function (_ref9) {
-  var color = _ref9.color,
-      lineHeight = _ref9.lineHeight,
-      fontSize = _ref9.fontSize;
-  return {
-    fontSize: fontSize,
-    fontWeight: 400,
-    lineHeight: lineHeight,
-    color: color
-  };
-});
+var ParagraphStyling = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  :lang(ja-jp) > h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 30em;\n  }\n  :lang(ko-kr) > h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 30em;\n  }\n  :lang(zh-CN) > h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 30em;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 34em;\n  }\n"])));
+var ParagraphBase = (0, _styledComponents.default)(TypographyBase)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  p {\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n  p:not(:only-of-type) {\n    margin-bottom: ", ";\n  }\n  ", "\n"])), function (props) {
+  return props.marginBetweenParagraphs || '0';
+}, ParagraphStyling);
 var ParagraphTextStyle;
 exports.ParagraphTextStyle = ParagraphTextStyle;
 
@@ -144,20 +147,21 @@ var paragraphTextDecorationLine = function paragraphTextDecorationLine(textStyle
   return textDecoration;
 };
 
-var ParagraphXL = function ParagraphXL(_ref10) {
-  var color = _ref10.color,
-      textStyle = _ref10.textStyle,
-      children = _ref10.children;
+var ParagraphXL = function ParagraphXL(_ref9) {
+  var color = _ref9.color,
+      textStyle = _ref9.textStyle,
+      children = _ref9.children;
   var fontWeight = paragraphFontWeight(textStyle);
   var fontStyle = paragraphFontStyle(textStyle);
   var textDecorationLine = paragraphTextDecorationLine(textStyle);
-  return /*#__PURE__*/_react.default.createElement(TypographyBase, {
+  return /*#__PURE__*/_react.default.createElement(ParagraphBase, {
     color: color,
     lineHeight: 36,
     fontSize: 24,
     fontWeight: fontWeight,
     fontStyle: fontStyle,
-    textDecorationLine: textDecorationLine
+    textDecorationLine: textDecorationLine,
+    marginBetweenParagraphs: "18px"
   }, children);
 };
 
@@ -167,20 +171,21 @@ ParagraphXL.propTypes = {
   textStyle: _propTypes.default.oneOf([1, 2, 3, 4])
 };
 
-var ParagraphL = function ParagraphL(_ref11) {
-  var color = _ref11.color,
-      textStyle = _ref11.textStyle,
-      children = _ref11.children;
+var ParagraphL = function ParagraphL(_ref10) {
+  var color = _ref10.color,
+      textStyle = _ref10.textStyle,
+      children = _ref10.children;
   var fontWeight = paragraphFontWeight(textStyle);
   var fontStyle = paragraphFontStyle(textStyle);
   var textDecorationLine = paragraphTextDecorationLine(textStyle);
-  return /*#__PURE__*/_react.default.createElement(TypographyBase, {
+  return /*#__PURE__*/_react.default.createElement(ParagraphBase, {
     color: color,
     lineHeight: 32,
     fontSize: 20,
     fontWeight: fontWeight,
     fontStyle: fontStyle,
-    textDecorationLine: textDecorationLine
+    textDecorationLine: textDecorationLine,
+    marginBetweenParagraphs: "16px"
   }, children);
 };
 
@@ -190,20 +195,21 @@ ParagraphL.propTypes = {
   textStyle: _propTypes.default.oneOf([1, 2, 3, 4])
 };
 
-var ParagraphM = function ParagraphM(_ref12) {
-  var color = _ref12.color,
-      textStyle = _ref12.textStyle,
-      children = _ref12.children;
+var ParagraphM = function ParagraphM(_ref11) {
+  var color = _ref11.color,
+      textStyle = _ref11.textStyle,
+      children = _ref11.children;
   var fontWeight = paragraphFontWeight(textStyle);
   var fontStyle = paragraphFontStyle(textStyle);
   var textDecorationLine = paragraphTextDecorationLine(textStyle);
-  return /*#__PURE__*/_react.default.createElement(TypographyBase, {
+  return /*#__PURE__*/_react.default.createElement(ParagraphBase, {
     color: color,
     lineHeight: 28,
     fontSize: 18,
     fontWeight: fontWeight,
     fontStyle: fontStyle,
-    textDecorationLine: textDecorationLine
+    textDecorationLine: textDecorationLine,
+    marginBetweenParagraphs: "14px"
   }, children);
 };
 
@@ -213,20 +219,21 @@ ParagraphM.propTypes = {
   textStyle: _propTypes.default.oneOf([1, 2, 3, 4])
 };
 
-var ParagraphS = function ParagraphS(_ref13) {
-  var color = _ref13.color,
-      textStyle = _ref13.textStyle,
-      children = _ref13.children;
+var ParagraphS = function ParagraphS(_ref12) {
+  var color = _ref12.color,
+      textStyle = _ref12.textStyle,
+      children = _ref12.children;
   var fontWeight = paragraphFontWeight(textStyle);
   var fontStyle = paragraphFontStyle(textStyle);
   var textDecorationLine = paragraphTextDecorationLine(textStyle);
-  return /*#__PURE__*/_react.default.createElement(TypographyBase, {
+  return /*#__PURE__*/_react.default.createElement(ParagraphBase, {
     color: color,
     lineHeight: 24,
     fontSize: 16,
     fontWeight: fontWeight,
     fontStyle: fontStyle,
-    textDecorationLine: textDecorationLine
+    textDecorationLine: textDecorationLine,
+    marginBetweenParagraphs: "12px"
   }, children);
 };
 
@@ -236,20 +243,21 @@ ParagraphS.propTypes = {
   textStyle: _propTypes.default.oneOf([1, 2, 3, 4])
 };
 
-var ParagraphXS = function ParagraphXS(_ref14) {
-  var color = _ref14.color,
-      textStyle = _ref14.textStyle,
-      children = _ref14.children;
+var ParagraphXS = function ParagraphXS(_ref13) {
+  var color = _ref13.color,
+      textStyle = _ref13.textStyle,
+      children = _ref13.children;
   var fontWeight = paragraphFontWeight(textStyle);
   var fontStyle = paragraphFontStyle(textStyle);
   var textDecorationLine = paragraphTextDecorationLine(textStyle);
-  return /*#__PURE__*/_react.default.createElement(TypographyBase, {
+  return /*#__PURE__*/_react.default.createElement(ParagraphBase, {
     color: color,
     lineHeight: 20,
     fontSize: 14,
     fontWeight: fontWeight,
     fontStyle: fontStyle,
-    textDecorationLine: textDecorationLine
+    textDecorationLine: textDecorationLine,
+    marginBetweenParagraphs: "10px"
   }, children);
 };
 
@@ -288,10 +296,10 @@ var componentTextTransformation = function componentTextTransformation(textStyle
   return fontStyle;
 };
 
-var ComponentXL = function ComponentXL(_ref15) {
-  var color = _ref15.color,
-      textStyle = _ref15.textStyle,
-      children = _ref15.children;
+var ComponentXL = function ComponentXL(_ref14) {
+  var color = _ref14.color,
+      textStyle = _ref14.textStyle,
+      children = _ref14.children;
   var fontWeight = componentFontWeight(textStyle);
   var fontStyle = componentFontStyle(textStyle);
   return /*#__PURE__*/_react.default.createElement(TypographyBase, {
@@ -309,10 +317,10 @@ ComponentXL.propTypes = {
   textStyle: _propTypes.default.oneOf([1, 2, 3, 4])
 };
 
-var ComponentL = function ComponentL(_ref16) {
-  var color = _ref16.color,
-      textStyle = _ref16.textStyle,
-      children = _ref16.children;
+var ComponentL = function ComponentL(_ref15) {
+  var color = _ref15.color,
+      textStyle = _ref15.textStyle,
+      children = _ref15.children;
   var fontWeight = componentFontWeight(textStyle);
   var fontStyle = componentFontStyle(textStyle);
   return /*#__PURE__*/_react.default.createElement(TypographyBase, {
@@ -330,10 +338,10 @@ ComponentL.propTypes = {
   textStyle: _propTypes.default.oneOf([1, 2, 3, 4])
 };
 
-var ComponentM = function ComponentM(_ref17) {
-  var color = _ref17.color,
-      textStyle = _ref17.textStyle,
-      children = _ref17.children;
+var ComponentM = function ComponentM(_ref16) {
+  var color = _ref16.color,
+      textStyle = _ref16.textStyle,
+      children = _ref16.children;
   var fontWeight = componentFontWeight(textStyle);
   var fontStyle = componentFontStyle(textStyle);
   return /*#__PURE__*/_react.default.createElement(TypographyBase, {
@@ -351,10 +359,10 @@ ComponentM.propTypes = {
   textStyle: _propTypes.default.oneOf([1, 2, 3, 4])
 };
 
-var ComponentS = function ComponentS(_ref18) {
-  var color = _ref18.color,
-      textStyle = _ref18.textStyle,
-      children = _ref18.children;
+var ComponentS = function ComponentS(_ref17) {
+  var color = _ref17.color,
+      textStyle = _ref17.textStyle,
+      children = _ref17.children;
   var fontWeight = componentFontWeight(textStyle);
   var fontStyle = componentFontStyle(textStyle);
   return /*#__PURE__*/_react.default.createElement(TypographyBase, {
@@ -372,10 +380,10 @@ ComponentS.propTypes = {
   textStyle: _propTypes.default.oneOf([1, 2, 3, 4])
 };
 
-var ComponentXS = function ComponentXS(_ref19) {
-  var color = _ref19.color,
-      textStyle = _ref19.textStyle,
-      children = _ref19.children;
+var ComponentXS = function ComponentXS(_ref18) {
+  var color = _ref18.color,
+      textStyle = _ref18.textStyle,
+      children = _ref18.children;
   var fontWeight = componentFontWeight(textStyle);
   var fontStyle = componentFontStyle(textStyle);
   var textTransform = componentTextTransformation(textStyle);
@@ -395,10 +403,10 @@ ComponentXS.propTypes = {
   textStyle: _propTypes.default.oneOf([1, 2, 3, 4])
 };
 
-var ComponentXXS = function ComponentXXS(_ref20) {
-  var color = _ref20.color,
-      textStyle = _ref20.textStyle,
-      children = _ref20.children;
+var ComponentXXS = function ComponentXXS(_ref19) {
+  var color = _ref19.color,
+      textStyle = _ref19.textStyle,
+      children = _ref19.children;
   var fontWeight = componentFontWeight(textStyle);
   var fontStyle = componentFontStyle(textStyle);
   var textTransform = componentTextTransformation(textStyle);

package/dist/js/styles/typography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/styles/typography.tsx"],"names":["TYPOGRAPHY","fontFamily","TypographyBase","color","lineHeight","fontSize","fontWeight","fontStyle","textTransform","textDecorationLine","COLORS","black","HeadlineBase","HeadlineXL","HeadlineL","HeadlineM","HeadlineS","HeadlineXS","HeadlineXXS","ParagraphBase","ParagraphTextStyle","paragraphFontWeight","textStyle","Bold","paragraphFontStyle","Italic","paragraphTextDecorationLine","textDecoration","Underline","ParagraphXL","children","ParagraphL","ParagraphM","ParagraphS","ParagraphXS","ComponentTextStyle","componentFontWeight","UppercaseBold","componentFontStyle","componentTextTransformation","ComponentXL","ComponentL","ComponentM","ComponentS","ComponentXS","ComponentXXS"],"mappings":"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","sourcesContent":["import React, { FunctionComponent } from 'react';\nimport { COLORS } from '.';\nimport styled from 'styled-components';\nimport {Property} from 'csstype'\n\nconst TYPOGRAPHY = {\n  fontFamily: 'Lato, sans-serif',\n};\n\ninterface ITypographyBase {\n  color?: string,\n  lineHeight: number,\n  fontSize: number,\n  fontWeight: number,\n  fontStyle?: string,\n  textTransform?: Property.TextTransform\n  textDecorationLine?: Property.TextDecorationLine\n}\n\nconst TypographyBase = styled(\"div\")<ITypographyBase>(({color, lineHeight, fontSize, fontWeight, fontStyle, textTransform, textDecorationLine}) => ({ \n  fontFamily: TYPOGRAPHY.fontFamily,\n  fontSize: fontSize,\n  fontWeight: fontWeight,\n  lineHeight: lineHeight + 'px',\n  textTransform: (textTransform? textTransform : 'none'),\n  textDecorationLine: (textDecorationLine? textDecorationLine : 'none'),\n  fontStyle: (fontStyle ? fontStyle : 'normal'),\n  color: (color ? color : COLORS.black)\n}));\n\n\ninterface IHeadline {\n  color?: string\n}\n\ninterface IHeadlineBase {\n  color?: string,\n  lineHeight: number,\n  fontSize: number\n}\nconst HeadlineBase = styled(TypographyBase)<IHeadlineBase>(({color, lineHeight, fontSize}) => ({ \n  fontSize: fontSize,\n  fontWeight: 700,\n  lineHeight: lineHeight,\n  color: color\n}));\n\nconst HeadlineXL = styled(HeadlineBase)<IHeadline>(({color}) => ({ \n  fontSize: '48px',\n  lineHeight: '64px',\n  color: color\n}));\n\nconst HeadlineL = styled(HeadlineBase)<IHeadline>(({color}) => ({ \n  fontSize: '40px',\n  lineHeight: '52px',\n  color: color\n}));\n\nconst HeadlineM = styled(HeadlineBase)<IHeadline>(({color}) => ({ \n  fontSize: '32px',\n  lineHeight: '40px',\n  color: color\n}));\n\nconst HeadlineS = styled(HeadlineBase)<IHeadline>(({color}) => ({ \n  fontSize: '28px',\n  lineHeight: '36px',\n  color: color\n}));\n\nconst HeadlineXS = styled(HeadlineBase)<IHeadline>(({color}) => ({ \n  fontSize: '24px',\n  lineHeight: '32px',\n  color: color\n}));\n\nconst HeadlineXXS = styled(HeadlineBase)<IHeadline>(({color}) => ({ \n  fontSize: '20px',\n  lineHeight: '24px',\n  color: color\n}));\n\ninterface IParagraphBase {\n  color?: string,\n  lineHeight: number,\n  fontSize: number\n}\n\nconst ParagraphBase = styled(TypographyBase)<IParagraphBase>(({color, lineHeight, fontSize}) => ({ \n  fontSize: fontSize,\n  fontWeight: 400,\n  lineHeight: lineHeight,\n  color: color\n}));\n\ninterface IParagraph {\n  color?: string\n}\n\nenum ParagraphTextStyle {\n  Regular = 1,\n  Bold,\n  Italic,\n  Underline\n}\n\n\ntype ParagraphProps = {\n  color?: string, \n  textStyle?: ParagraphTextStyle\n};\n\n\nconst paragraphFontWeight = (textStyle?: ParagraphTextStyle) => {\n  let fontWeight = 400;\n  if (textStyle === ParagraphTextStyle.Bold) {\n    fontWeight = 700;\n  }\n  return fontWeight;\n};\n\nconst paragraphFontStyle = (textStyle?: ParagraphTextStyle) => {\n  let fontStyle = (textStyle && textStyle === ParagraphTextStyle.Italic) ? 'italic' : '';\n  return fontStyle;\n};\n\nconst paragraphTextDecorationLine = (textStyle?: ParagraphTextStyle) : Property.TextDecorationLine => {\n  let textDecoration : Property.TextDecorationLine = (textStyle && textStyle === ParagraphTextStyle.Underline) ? 'underline' : 'none';\n  return textDecoration;\n};\n\n\nconst ParagraphXL: FunctionComponent<ParagraphProps> = ({color, textStyle, children}) => {  \n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <TypographyBase color= {color} lineHeight={36} fontSize={24} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine}>\n      {children}\n    </TypographyBase>\n  )\n};\n\nconst ParagraphL: FunctionComponent<ParagraphProps> = ({color, textStyle, children}) => {  \n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <TypographyBase color= {color} lineHeight={32} fontSize={20} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine}>\n      {children}\n    </TypographyBase>\n  )\n};\n\nconst ParagraphM: FunctionComponent<ParagraphProps> = ({color, textStyle, children}) => {  \n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <TypographyBase color= {color} lineHeight={28} fontSize={18} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine}>\n      {children}\n    </TypographyBase>\n  )\n};\n\nconst ParagraphS: FunctionComponent<ParagraphProps> = ({color, textStyle, children}) => {  \n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <TypographyBase color= {color} lineHeight={24} fontSize={16} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine}>\n      {children}\n    </TypographyBase>\n  )\n};\n\nconst ParagraphXS: FunctionComponent<ParagraphProps> = ({color, textStyle, children}) => {  \n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <TypographyBase color= {color} lineHeight={20} fontSize={14} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine}>\n      {children}\n    </TypographyBase>\n  )\n};\n\n\nenum ComponentTextStyle {\n  Regular = 1,\n  Bold,\n  Italic,\n  UppercaseBold\n}\n\ntype ComponentProps = {\n  color?: string, \n  textStyle?: ComponentTextStyle\n};\n\nconst componentFontWeight = (textStyle?: ComponentTextStyle) => {\n  let fontWeight = 400;\n  if (textStyle === ComponentTextStyle.Bold || textStyle === ComponentTextStyle.UppercaseBold) {\n    fontWeight = 700;\n  }\n  return fontWeight;\n};\n\nconst componentFontStyle = (textStyle?: ComponentTextStyle) => {\n  let fontStyle = (textStyle && textStyle === ComponentTextStyle.Italic) ? 'italic' : '';\n  return fontStyle;\n};\n\nconst componentTextTransformation = (textStyle?: ComponentTextStyle) : Property.TextTransform => {\n  let fontStyle : Property.TextTransform = (textStyle && textStyle === ComponentTextStyle.UppercaseBold) ? 'uppercase' : 'none';\n  return fontStyle;\n};\n\nconst ComponentXL: FunctionComponent<ComponentProps> = ({color, textStyle, children}) => {  \n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase color= {color} lineHeight={28} fontSize={24} fontWeight={fontWeight} fontStyle={fontStyle} >\n      {children}\n    </TypographyBase>\n  )\n};\n\nconst ComponentL: FunctionComponent<ComponentProps> = ({color, textStyle, children}) => {  \n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase color= {color} lineHeight={24} fontSize={20} fontWeight={fontWeight} fontStyle={fontStyle} >\n      {children}\n    </TypographyBase>\n  )\n};\n\nconst ComponentM: FunctionComponent<ComponentProps> = ({color, textStyle, children}) => {  \n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase color= {color} lineHeight={24} fontSize={18} fontWeight={fontWeight} fontStyle={fontStyle} >\n      {children}\n    </TypographyBase>\n  )\n};\n\nconst ComponentS: FunctionComponent<ComponentProps> = ({color, textStyle, children}) => {  \n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase color= {color} lineHeight={20} fontSize={16} fontWeight={fontWeight} fontStyle={fontStyle} >\n      {children}\n    </TypographyBase>\n  )\n};\n\nconst ComponentXS: FunctionComponent<ComponentProps> = ({color, textStyle, children}) => {  \n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  let textTransform = componentTextTransformation(textStyle);\n  return (\n    <TypographyBase color= {color} lineHeight={16} fontSize={14} fontWeight={fontWeight} fontStyle={fontStyle} textTransform={textTransform}>\n      {children}\n    </TypographyBase>\n  )\n};\n\nconst ComponentXXS: FunctionComponent<ComponentProps> = ({color, textStyle, children}) => {  \n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  let textTransform = componentTextTransformation(textStyle);\n  return (\n    <TypographyBase color= {color} lineHeight={16} fontSize={12} fontWeight={fontWeight} fontStyle={fontStyle} textTransform={textTransform} >\n      {children}\n    </TypographyBase>\n  )\n};\n\n\nexport {TYPOGRAPHY}\nexport {HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS}\nexport {ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS}\nexport {ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS}"],"file":"typography.js"}
+{"version":3,"sources":["../../../src/styles/typography.tsx"],"names":["TYPOGRAPHY","fontFamily","TypographyBase","color","lineHeight","fontSize","fontWeight","fontStyle","textTransform","textDecorationLine","COLORS","black","HeadlineBase","HeadlineXL","HeadlineL","HeadlineM","HeadlineS","HeadlineXS","HeadlineXXS","ParagraphStyling","css","ParagraphBase","props","marginBetweenParagraphs","ParagraphTextStyle","paragraphFontWeight","textStyle","Bold","paragraphFontStyle","Italic","paragraphTextDecorationLine","textDecoration","Underline","ParagraphXL","children","ParagraphL","ParagraphM","ParagraphS","ParagraphXS","ComponentTextStyle","componentFontWeight","UppercaseBold","componentFontStyle","componentTextTransformation","ComponentXL","ComponentL","ComponentM","ComponentS","ComponentXS","ComponentXXS"],"mappings":"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","sourcesContent":["import React, { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS } from '.';\nimport { Property } from 'csstype';\n\nconst TYPOGRAPHY = {\n  fontFamily: 'Lato, sans-serif',\n};\n\ninterface ITypographyBase {\n  color?: string;\n  lineHeight: number;\n  fontSize: number;\n  fontWeight: number;\n  fontStyle?: string;\n  textTransform?: Property.TextTransform;\n  textDecorationLine?: Property.TextDecorationLine;\n}\n\nconst TypographyBase = styled('div')<ITypographyBase>(({ color, lineHeight, fontSize, fontWeight, fontStyle, textTransform, textDecorationLine }) => ({\n  fontFamily: TYPOGRAPHY.fontFamily,\n  fontSize: fontSize,\n  fontWeight: fontWeight,\n  lineHeight: lineHeight + 'px',\n  textTransform: textTransform ? textTransform : 'none',\n  textDecorationLine: textDecorationLine ? textDecorationLine : 'none',\n  fontStyle: fontStyle ? fontStyle : 'normal',\n  color: color ? color : COLORS.black,\n}));\n\ninterface IHeadline {\n  color?: string;\n}\n\ninterface IHeadlineBase {\n  color?: string;\n  lineHeight: number;\n  fontSize: number;\n}\nconst HeadlineBase = styled(TypographyBase)<IHeadlineBase>(({ color, lineHeight, fontSize }) => ({\n  fontSize: fontSize,\n  fontWeight: 700,\n  lineHeight: lineHeight,\n  color: color,\n}));\n\nconst HeadlineXL = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '48px',\n  lineHeight: '64px',\n  color: color,\n}));\n\nconst HeadlineL = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '40px',\n  lineHeight: '52px',\n  color: color,\n}));\n\nconst HeadlineM = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '32px',\n  lineHeight: '40px',\n  color: color,\n}));\n\nconst HeadlineS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '28px',\n  lineHeight: '36px',\n  color: color,\n}));\n\nconst HeadlineXS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '24px',\n  lineHeight: '32px',\n  color: color,\n}));\n\nconst HeadlineXXS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n  fontSize: '20px',\n  lineHeight: '24px',\n  color: color,\n}));\n\nconst ParagraphStyling = css`\n  :lang(ja-jp) > h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 30em;\n  }\n  :lang(ko-kr) > h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 30em;\n  }\n  :lang(zh-CN) > h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 30em;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  p,\n  span {\n    max-width: 34em;\n  }\n`;\n\ninterface IParagraphBase {\n  color?: string;\n  lineHeight: number;\n  fontSize: number;\n  marginBetweenParagraphs?: string;\n}\n\nconst ParagraphBase = styled(TypographyBase)<IParagraphBase>`\n  p {\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n  p:not(:only-of-type) {\n    margin-bottom: ${(props) => props.marginBetweenParagraphs || '0'};\n  }\n  ${ParagraphStyling}\n`;\n\ninterface IParagraph {\n  color?: string;\n}\n\nenum ParagraphTextStyle {\n  Regular = 1,\n  Bold,\n  Italic,\n  Underline,\n}\n\ntype ParagraphProps = {\n  color?: string;\n  textStyle?: ParagraphTextStyle;\n};\n\nconst paragraphFontWeight = (textStyle?: ParagraphTextStyle) => {\n  let fontWeight = 400;\n  if (textStyle === ParagraphTextStyle.Bold) {\n    fontWeight = 700;\n  }\n  return fontWeight;\n};\n\nconst paragraphFontStyle = (textStyle?: ParagraphTextStyle) => {\n  let fontStyle = textStyle && textStyle === ParagraphTextStyle.Italic ? 'italic' : '';\n  return fontStyle;\n};\n\nconst paragraphTextDecorationLine = (textStyle?: ParagraphTextStyle): Property.TextDecorationLine => {\n  let textDecoration: Property.TextDecorationLine = textStyle && textStyle === ParagraphTextStyle.Underline ? 'underline' : 'none';\n  return textDecoration;\n};\n\nconst ParagraphXL: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={36} fontSize={24} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"18px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphL: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={32} fontSize={20} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"16px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphM: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={28} fontSize={18} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"14px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphS: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={24} fontSize={16} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"12px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nconst ParagraphXS: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n  let fontWeight = paragraphFontWeight(textStyle);\n  let fontStyle = paragraphFontStyle(textStyle);\n  let textDecorationLine = paragraphTextDecorationLine(textStyle);\n  return (\n    <ParagraphBase color={color} lineHeight={20} fontSize={14} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"10px\">\n      {children}\n    </ParagraphBase>\n  );\n};\n\nenum ComponentTextStyle {\n  Regular = 1,\n  Bold,\n  Italic,\n  UppercaseBold,\n}\n\ntype ComponentProps = {\n  color?: string;\n  textStyle?: ComponentTextStyle;\n};\n\nconst componentFontWeight = (textStyle?: ComponentTextStyle) => {\n  let fontWeight = 400;\n  if (textStyle === ComponentTextStyle.Bold || textStyle === ComponentTextStyle.UppercaseBold) {\n    fontWeight = 700;\n  }\n  return fontWeight;\n};\n\nconst componentFontStyle = (textStyle?: ComponentTextStyle) => {\n  let fontStyle = textStyle && textStyle === ComponentTextStyle.Italic ? 'italic' : '';\n  return fontStyle;\n};\n\nconst componentTextTransformation = (textStyle?: ComponentTextStyle): Property.TextTransform => {\n  let fontStyle: Property.TextTransform = textStyle && textStyle === ComponentTextStyle.UppercaseBold ? 'uppercase' : 'none';\n  return fontStyle;\n};\n\nconst ComponentXL: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase color={color} lineHeight={28} fontSize={24} fontWeight={fontWeight} fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentL: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase color={color} lineHeight={24} fontSize={20} fontWeight={fontWeight} fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentM: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase color={color} lineHeight={24} fontSize={18} fontWeight={fontWeight} fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentS: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  return (\n    <TypographyBase color={color} lineHeight={20} fontSize={16} fontWeight={fontWeight} fontStyle={fontStyle}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentXS: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  let textTransform = componentTextTransformation(textStyle);\n  return (\n    <TypographyBase color={color} lineHeight={16} fontSize={14} fontWeight={fontWeight} fontStyle={fontStyle} textTransform={textTransform}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nconst ComponentXXS: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n  let fontWeight = componentFontWeight(textStyle);\n  let fontStyle = componentFontStyle(textStyle);\n  let textTransform = componentTextTransformation(textStyle);\n  return (\n    <TypographyBase color={color} lineHeight={16} fontSize={12} fontWeight={fontWeight} fontStyle={fontStyle} textTransform={textTransform}>\n      {children}\n    </TypographyBase>\n  );\n};\n\nexport { TYPOGRAPHY };\nexport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };\nexport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS };\nexport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS };\n"],"file":"typography.js"}

package/dist/umd/Banners/Banner.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../styles", "../icons/systemicons/SystemIcons", "../Button"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../styles", "../icons/systemicons/SystemIcons", "../Button", "./styles"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("../Button"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("../Button"), require("./styles"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.SystemIcons, global.Button);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.SystemIcons, global.Button, global.styles);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _SystemIcons, _Button) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _SystemIcons, _Button, _styles2) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -90,20 +90,30 @@
   margin-top: ${props => props.bottom ? 'auto' : '0'};
 
   button:last-child {
-    margin: 0 0 0 auto;
     line-height: 0;
-    cursor: pointer;
-  }
-  button:last-child:hover {
-    margin: 0 0 0 auto;
-    background: ${props => props.hover ? props.hover : _styles.COLORS.primary_20};
+    margin: 0 0 0 8px;
+    ${_styles.BREAKPOINTS.MEDIUM} {
+      margin: 0 0 0 16px;
+    }
+    ${_styles.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;
+    }
   }
 
   a {
     color: ${props => props.link};
     font-weight: bold;
     text-decoration: none;
-    
+
     &:hover {
       text-decoration: underline;
     }
@@ -113,32 +123,50 @@
   font-style: normal;
   font-weight: normal;
   font-size: 16px;
-  line-height: 140%;
+  line-height: 20px;
 `;
   const BannerCenter = _styledComponents2.default.div`
   color: ${props => props.color};
   font-size: 18px;
   display: flex;
-  justify-content: flex-start;
-  align-items: center;
   width: 100%;
-  margin: 0 8px;
+  margin: 0 6px 0 16px;
   ${_styles.BREAKPOINTS.MEDIUM} {
-    margin: 0 32px;
+    margin: 0 22px 0 32px;
   }
   ${_styles.BREAKPOINTS.LARGE} {
-    margin: 0 56px;
+    margin: 0 46px 0 56px;
+  }
+  &.small {
+    margin: 0 6px 0 16px;
   }
-  ${_styles.BREAKPOINTS.XLARGE} {
-    width: 1120px;
-    margin: 0 auto;
+  &.medium {
+    margin: 0 22px 0 32px;
   }
-  >svg {
-    margin-right:8px;
+  &.large {
+    margin: 0 46px 0 56px;
+  }
+
+  > svg {
+    flex-shrink: 0;
+    margin: 12px 0;
+  }
+`;
+  const ButtonWrapper = _styledComponents2.default.div`
+  margin: 0 0 0 auto;
+  ${props => props.type ? (0, _styles2.getButtonStyle)(props.type) : null};
+`;
+  const BannerContentWrapper = _styledComponents2.default.div`
+  display: flex;
+  align-items: center;
+  margin: 12px 0;
+  &:not(:first-child) {
+    margin-left: 8px;
   }
 `;
 
   const Banner = ({
+    size,
     type,
     children,
     bottom,
@@ -146,7 +174,8 @@
     linkText,
     link,
     onClose,
-    icon
+    icon,
+    noIcon
   }) => {
     const formatTypeToLowerCase = type?.toLowerCase();
 
@@ -159,20 +188,25 @@
           hover: _styles.COLORS.warning_20,
           bottom: bottom
         }, /*#__PURE__*/React.createElement(BannerCenter, {
-          color: _styles.COLORS.warning_700
-        }, icon ? icon : /*#__PURE__*/React.createElement(_SystemIcons.Help, {
+          color: _styles.COLORS.warning_700,
+          className: size
+        }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.Help, {
           color: _styles.COLORS.warning_700,
           size: "24px"
-        }), children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
+        }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
           href: link,
           target: "_blank"
-        }, linkText), onClose && /*#__PURE__*/React.createElement(_Button.Button, {
-          variant: "text",
-          onClick: () => onClose()
+        }, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+          type: formatTypeToLowerCase
+        }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          useTransparentBackground: true,
+          action: () => onClose()
         }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
           color: _styles.COLORS.warning_500,
           size: "24px"
-        }))));
+        })))));
 
       case 'critical':
         return /*#__PURE__*/React.createElement(BannerContainer, {
@@ -180,22 +214,28 @@
           type: _styles.COLORS.critical_100,
           link: _styles.COLORS.critical_700,
           hover: _styles.COLORS.critical_20,
-          bottom: bottom
+          bottom: bottom,
+          className: size
         }, /*#__PURE__*/React.createElement(BannerCenter, {
-          color: _styles.COLORS.critical_700
-        }, icon ? icon : /*#__PURE__*/React.createElement(_SystemIcons.Attention, {
+          color: _styles.COLORS.critical_700,
+          className: size
+        }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.Attention, {
           color: _styles.COLORS.critical_700,
           size: "24px"
-        }), children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
+        }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
           href: link,
           target: "_blank"
-        }, linkText), onClose && /*#__PURE__*/React.createElement(_Button.Button, {
-          variant: "text",
-          onClick: () => onClose()
+        }, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+          type: formatTypeToLowerCase
+        }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          useTransparentBackground: true,
+          action: () => onClose()
         }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
           color: _styles.COLORS.critical_500,
           size: "24px"
-        }))));
+        })))));
 
       case 'positive':
         return /*#__PURE__*/React.createElement(BannerContainer, {
@@ -203,22 +243,28 @@
           type: _styles.COLORS.correct_100,
           link: _styles.COLORS.correct_700,
           hover: _styles.COLORS.correct_20,
-          bottom: bottom
+          bottom: bottom,
+          className: size
         }, /*#__PURE__*/React.createElement(BannerCenter, {
-          color: _styles.COLORS.correct_700
-        }, icon ? icon : /*#__PURE__*/React.createElement(_SystemIcons.ThumbsUp, {
+          color: _styles.COLORS.correct_700,
+          className: size
+        }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.ThumbsUp, {
           color: _styles.COLORS.correct_700,
           size: "24px"
-        }), children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
+        }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
           href: link,
           target: "_blank"
-        }, linkText), onClose && /*#__PURE__*/React.createElement(_Button.Button, {
-          variant: "text",
-          onClick: () => onClose()
+        }, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+          type: formatTypeToLowerCase
+        }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          useTransparentBackground: true,
+          action: () => onClose()
         }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
           color: _styles.COLORS.correct_500,
           size: "24px"
-        }))));
+        })))));
 
       default:
         return /*#__PURE__*/React.createElement(BannerContainer, {
@@ -226,26 +272,33 @@
           type: _styles.COLORS.primary_100,
           link: _styles.COLORS.primary_700,
           hover: _styles.COLORS.primary_20,
-          bottom: bottom
+          bottom: bottom,
+          className: size
         }, /*#__PURE__*/React.createElement(BannerCenter, {
-          color: _styles.COLORS.primary_700
-        }, icon ? icon : /*#__PURE__*/React.createElement(_SystemIcons.Tip, {
+          color: _styles.COLORS.primary_700,
+          className: size
+        }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.Tip, {
           color: _styles.COLORS.primary_700,
           size: "24px"
-        }), children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
+        }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
           href: link,
           target: "_blank"
-        }, linkText), onClose && /*#__PURE__*/React.createElement(_Button.Button, {
-          variant: "text",
-          onClick: () => onClose()
+        }, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
+          type: "neutral"
+        }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          useTransparentBackground: true,
+          action: () => onClose()
         }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
           color: _styles.COLORS.primary_500,
           size: "24px"
-        }))));
+        })))));
     }
   };
 
   Banner.propTypes = {
+    size: _propTypes2.default.oneOf(['small', 'medium', 'large']),
     type: _propTypes2.default.string,
     link: _propTypes2.default.string,
     linkText: _propTypes2.default.string,
@@ -253,7 +306,8 @@
     bottom: _propTypes2.default.bool,
     testId: _propTypes2.default.string,
     icon: _propTypes2.default.node,
-    onClose: _propTypes2.default.func
+    onClose: _propTypes2.default.func,
+    noIcon: _propTypes2.default.bool
   };
   exports.default = Banner;
 });