@laerdal/life-react-components 1.0.1-dev.19.full → 1.0.1-dev.22.full

package/dist/esm/AuthPage/Information.js

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import AuthPageSection from './_AuthPageSection';
-import { COLORS, BREAKPOINTS } from '../styles';
+import { BREAKPOINTS, COLORS, ParagraphTextStyle } from '../styles';
+import { HeadlineXLStyling, ParagraphLStyling } from '../styles/typography';
 export const InformationContainer = styled(AuthPageSection)`
   display: none;
   background: ${props => props.color};
@@ -24,16 +25,12 @@ export const InformationContent = styled.div`
   }
 `;
 export const InformationHeader = styled.h2`
-  font-style: normal;
+  ${HeadlineXLStyling(COLORS.black)}
   font-weight: 300;
-  font-size: 48px;
-  line-height: 140%;
   margin-bottom: 0;
 `;
 export const InformationText = styled.p`
-  font-size: 20px;
-  line-height: 140%;
-  color: ${COLORS.neutral_600};
+  ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}
   margin: 8px 0;
 `;
 export const InformationImage = styled.img`

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/AuthPage/Information.tsx"],"names":["styled","AuthPageSection","COLORS","BREAKPOINTS","InformationContainer","props","color","MEDIUM","InformationContent","div","LARGE","InformationHeader","h2","InformationText","p","neutral_600","InformationImage","img"],"mappings":"AACA,OAAOA,MAAP,MAAmB,mBAAnB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,SAASC,MAAT,EAAiBC,WAAjB,QAAoC,WAApC;AAEA,OAAO,MAAMC,oBAAoB,GAAGJ,MAAM,CAACC,eAAD,CAAqC;AAC/E;AACA,gBAAgBI,KAAK,IAAIA,KAAK,CAACC,KAAM;AACrC;AACA,IAAIH,WAAW,CAACI,MAAO;AACvB;AACA;AACA;AACA,CARO;AAUP,OAAO,MAAMC,kBAAkB,GAAGR,MAAM,CAACS,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIN,WAAW,CAACO,KAAM;AACtB;AACA;AACA;AACA,CAZO;AAcP,OAAO,MAAMC,iBAAiB,GAAGX,MAAM,CAACY,EAAG;AAC3C;AACA;AACA;AACA;AACA;AACA,CANO;AAQP,OAAO,MAAMC,eAAe,GAAGb,MAAM,CAACc,CAAE;AACxC;AACA;AACA,WAAWZ,MAAM,CAACa,WAAY;AAC9B;AACA,CALO;AAOP,OAAO,MAAMC,gBAAgB,GAAGhB,MAAM,CAACiB,GAAI;AAC3C;AACA;AACA,CAHO","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport { COLORS, BREAKPOINTS } from '../styles';\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  font-style: normal;\n  font-weight: 300;\n  font-size: 48px;\n  line-height: 140%;\n  margin-bottom: 0;\n`;\n\nexport const InformationText = styled.p`\n  font-size: 20px;\n  line-height: 140%;\n  color: ${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,SAAQC,WAAR,EAAqBC,MAArB,EAA6DC,kBAA7D,QAAsF,WAAtF;AACA,SAA2BC,iBAA3B,EAA8CC,iBAA9C,QAAsE,sBAAtE;AAEA,OAAO,MAAMC,oBAAoB,GAAGP,MAAM,CAACC,eAAD,CAAqC;AAC/E;AACA,gBAAgBO,KAAK,IAAIA,KAAK,CAACC,KAAM;AACrC;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"}

package/dist/esm/Banners/Banner.js

@@ -1,11 +1,11 @@
 import _pt from "prop-types";
 import * as React from 'react';
 import styled from 'styled-components';
-import { BREAKPOINTS, COLORS } from '../styles';
-import { Tip, ThumbsUp, Help, Close, TechnicalWarning } from '../icons/systemicons/SystemIcons';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
+import { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';
 import { IconButton } from '../Button';
 import { getButtonStyle } from './styles';
-import { ComponentResponsive } from '../styles/typography';
+import { ComponentMStyling, ComponentResponsive } from '../styles/typography';
 import { HyperLink } from '../HyperLink';
 /**
  * Styles for <Banner />
@@ -43,8 +43,8 @@ const BannerContainer = styled.div`
   }
 `;
 const BannerCenter = styled.div`
-  color: ${props => props.color};
-  font-size: 18px;
+  ${props => ComponentMStyling(ComponentTextStyle.Regular, props.color)}
+  
   display: flex;
   width: 100%;
   margin: 0 0 0 16px;

package/dist/esm/Banners/Banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","Tip","ThumbsUp","Help","Close","TechnicalWarning","IconButton","getButtonStyle","ComponentResponsive","HyperLink","BannerContainer","div","props","type","correct_100","black","bottom","MEDIUM","LARGE","link","BannerCenter","color","ButtonWrapper","BannerContentWrapper","Banner","size","children","testId","linkText","onClose","icon","noIcon","width","setWidth","useState","window","innerWidth","useEffect","handleResize","addEventListener","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_20","Math","floor","random","white","warning_500","critical_100","critical_700","critical_20","critical_500","correct_700","correct_20","correct_500","primary_100","primary_700","primary_20","primary_500","hover"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,WAApC;AACA,SAASC,GAAT,EAAcC,QAAd,EAAwBC,IAAxB,EAA8BC,KAA9B,EAAqCC,gBAArC,QAA6D,kCAA7D;AACA,SAASC,UAAT,QAA2B,WAA3B;AACA,SAASC,cAAT,QAA+B,UAA/B;AACA,SAASC,mBAAT,QAAoC,sBAApC;AACA,SAASC,SAAT,QAA0B,cAA1B;AAEA;AACA;AACA;;AACA,MAAMC,eAAe,GAAGZ,MAAM,CAACa,GAAiB;AAChD,gBAAiBC,KAAD,IAAyBA,KAAK,CAACC,IAAN,GAAaD,KAAK,CAACC,IAAnB,GAA0Bb,MAAM,CAACc,WAAa;AACvF;AACA;AACA,WAAWd,MAAM,CAACe,KAAM;AACxB,gBAAiBH,KAAD,IAAyBA,KAAK,CAACI,MAAN,GAAe,MAAf,GAAwB,GAAK;AACtE;AACA;AACA;AACA;AACA,MAAMjB,WAAW,CAACkB,MAAO;AACzB;AACA;AACA,MAAMlB,WAAW,CAACmB,KAAM;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAcN,KAAD,IAAwBA,KAAK,CAACO,IAAK;AAChD;AACA,CA9BA;AAgCA,MAAMC,YAAY,GAAGtB,MAAM,CAACa,GAAI;AAChC,WAAYC,KAAD,IAAWA,KAAK,CAACS,KAAM;AAClC;AACA;AACA;AACA;AACA,IAAItB,WAAW,CAACkB,MAAO;AACvB;AACA;AACA,IAAIlB,WAAW,CAACmB,KAAM;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CA1BA;AA4BA,MAAMI,aAAa,GAAGxB,MAAM,CAACa,GAAuB;AACpD;AACA,IAAKC,KAAD,IAAYA,KAAK,CAACC,IAAN,GAAaN,cAAc,CAACK,KAAK,CAACC,IAAP,CAA3B,GAA0C,IAAM;AAChE,CAHA;AAKA,MAAMU,oBAAoB,GAAGzB,MAAM,CAACa,GAAI;AACxC;AACA;AACA;AACA;AACA;AACA;AACA,CAPA;;AAsBA,MAAMa,MAA4C,GAAG,CAAC;AAAEC,EAAAA,IAAF;AAAQZ,EAAAA,IAAR;AAAca,EAAAA,QAAd;AAAwBV,EAAAA,MAAxB;AAAgCW,EAAAA,MAAhC;AAAwCC,EAAAA,QAAxC;AAAkDT,EAAAA,IAAlD;AAAwDU,EAAAA,OAAxD;AAAiEC,EAAAA,IAAjE;AAAuEC,EAAAA;AAAvE,CAAD,KAAqF;AACxI,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBpC,KAAK,CAACqC,QAAN,CAAuBC,MAAM,CAACC,UAA9B,CAA1B;AACAvC,EAAAA,KAAK,CAACwC,SAAN,CAAgB,MAAM;AACpB,aAASC,YAAT,GAAwB;AACtBL,MAAAA,QAAQ,CAACE,MAAM,CAACC,UAAR,CAAR;AACD;;AACDD,IAAAA,MAAM,CAACI,gBAAP,CAAwB,QAAxB,EAAkCD,YAAlC;AACD,GALD;AAOA,QAAME,qBAAqB,GAAG3B,IAAI,EAAE4B,WAAN,EAA9B;;AACA,UAAQD,qBAAR;AACE,SAAK,SAAL;AACE,0BACE,oBAAC,eAAD;AAAiB,uBAAab,MAA9B;AAAsC,QAAA,IAAI,EAAE3B,MAAM,CAAC0C,WAAnD;AAAgE,QAAA,IAAI,EAAE1C,MAAM,CAAC2C,WAA7E;AAA0F,QAAA,KAAK,EAAE3C,MAAM,CAAC4C,UAAxG;AAAoH,QAAA,MAAM,EAAE5B;AAA5H,sBACE,oBAAC,YAAD;AAAc,QAAA,KAAK,EAAEhB,MAAM,CAAC2C,WAA5B;AAAyC,QAAA,SAAS,EAAElB;AAApD,SACGK,IAAI,GAAGA,IAAH,GAAUC,MAAM,GAAG,IAAH,gBAAU,oBAAC,IAAD;AAAM,QAAA,KAAK,EAAE/B,MAAM,CAAC2C,WAApB;AAAiC,QAAA,IAAI,EAAC;AAAtC,QADjC,eAEE,oBAAC,oBAAD,qBACE,oBAAC,mBAAD;AAAqB,QAAA,IAAI,EAAElB,IAA3B;AAAiC,QAAA,KAAK,EAAEO,KAAxC;AAA+C,QAAA,KAAK,EAAEhC,MAAM,CAAC2C;AAA7D,SACGjB,QADH,cAEGP,IAAI,IAAIS,QAAR,iBACC,oBAAC,SAAD;AAAW,QAAA,EAAE,EAAG,GAAEiB,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAyC,aAA3D;AAAyE,QAAA,IAAI,EAAE5B,IAA/E;AAAqF,QAAA,OAAO,EAAC;AAA7F,SACGS,QADH,CAHJ,CADF,CAFF,EAYGC,OAAO,iBACN,oBAAC,aAAD;AAAe,QAAA,IAAI,EAAEW;AAArB,sBACE,oBAAC,UAAD;AAAY,QAAA,OAAO,EAAC,WAApB;AAAgC,QAAA,KAAK,EAAC,UAAtC;AAAiD,QAAA,wBAAwB,MAAzE;AAA0E,QAAA,yBAAyB,EAAExC,MAAM,CAACgD,KAA5G;AAAmH,QAAA,MAAM,EAAE,MAAMnB,OAAO;AAAxI,sBACE,oBAAC,KAAD;AAAO,QAAA,KAAK,EAAE7B,MAAM,CAACiD,WAArB;AAAkC,QAAA,IAAI,EAAC;AAAvC,QADF,CADF,CAbJ,CADF,CADF;;AAwBF,SAAK,UAAL;AACE,0BACE,oBAAC,eAAD;AAAiB,uBAAatB,MAA9B;AAAsC,QAAA,IAAI,EAAE3B,MAAM,CAACkD,YAAnD;AAAiE,QAAA,IAAI,EAAElD,MAAM,CAACmD,YAA9E;AAA4F,QAAA,KAAK,EAAEnD,MAAM,CAACoD,WAA1G;AAAuH,QAAA,MAAM,EAAEpC,MAA/H;AAAuI,QAAA,SAAS,EAAES;AAAlJ,sBACE,oBAAC,YAAD;AAAc,QAAA,KAAK,EAAEzB,MAAM,CAACmD,YAA5B;AAA0C,QAAA,SAAS,EAAE1B;AAArD,SACGK,IAAI,GAAGA,IAAH,GAAUC,MAAM,GAAG,IAAH,gBAAU,oBAAC,gBAAD;AAAkB,QAAA,KAAK,EAAE/B,MAAM,CAACmD,YAAhC;AAA8C,QAAA,IAAI,EAAC;AAAnD,QADjC,eAEE,oBAAC,oBAAD,qBACE,oBAAC,mBAAD;AAAqB,QAAA,IAAI,EAAE1B,IAA3B;AAAiC,QAAA,KAAK,EAAEO,KAAxC;AAA+C,QAAA,KAAK,EAAEhC,MAAM,CAACmD;AAA7D,SACGzB,QADH,cAEGP,IAAI,IAAIS,QAAR,iBACC,oBAAC,SAAD;AAAW,QAAA,EAAE,EAAG,GAAEiB,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAyC,aAA3D;AAAyE,QAAA,IAAI,EAAE5B,IAA/E;AAAqF,QAAA,OAAO,EAAC;AAA7F,SACGS,QADH,CAHJ,CADF,CAFF,EAYGC,OAAO,iBACN,oBAAC,aAAD;AAAe,QAAA,IAAI,EAAEW;AAArB,sBACE,oBAAC,UAAD;AAAY,QAAA,OAAO,EAAC,WAApB;AAAgC,QAAA,KAAK,EAAC,UAAtC;AAAiD,QAAA,wBAAwB,MAAzE;AAA0E,QAAA,yBAAyB,EAAExC,MAAM,CAACgD,KAA5G;AAAmH,QAAA,MAAM,EAAE,MAAMnB,OAAO;AAAxI,sBACE,oBAAC,KAAD;AAAO,QAAA,KAAK,EAAE7B,MAAM,CAACqD,YAArB;AAAmC,QAAA,IAAI,EAAC;AAAxC,QADF,CADF,CAbJ,CADF,CADF;;AAwBF,SAAK,UAAL;AACE,0BACE,oBAAC,eAAD;AAAiB,uBAAa1B,MAA9B;AAAsC,QAAA,IAAI,EAAE3B,MAAM,CAACc,WAAnD;AAAgE,QAAA,IAAI,EAAEd,MAAM,CAACsD,WAA7E;AAA0F,QAAA,KAAK,EAAEtD,MAAM,CAACuD,UAAxG;AAAoH,QAAA,MAAM,EAAEvC,MAA5H;AAAoI,QAAA,SAAS,EAAES;AAA/I,sBACE,oBAAC,YAAD;AAAc,QAAA,KAAK,EAAEzB,MAAM,CAACsD,WAA5B;AAAyC,QAAA,SAAS,EAAE7B;AAApD,SACGK,IAAI,GAAGA,IAAH,GAAUC,MAAM,GAAG,IAAH,gBAAU,oBAAC,QAAD;AAAU,QAAA,KAAK,EAAE/B,MAAM,CAACsD,WAAxB;AAAqC,QAAA,IAAI,EAAC;AAA1C,QADjC,eAEE,oBAAC,oBAAD,qBACE,oBAAC,mBAAD;AAAqB,QAAA,IAAI,EAAE7B,IAA3B;AAAiC,QAAA,KAAK,EAAEO,KAAxC;AAA+C,QAAA,KAAK,EAAEhC,MAAM,CAACsD;AAA7D,SACG5B,QADH,cAEGP,IAAI,IAAIS,QAAR,iBACC,oBAAC,SAAD;AAAW,QAAA,EAAE,EAAG,GAAEiB,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAyC,aAA3D;AAAyE,QAAA,IAAI,EAAE5B,IAA/E;AAAqF,QAAA,OAAO,EAAC;AAA7F,SACGS,QADH,CAHJ,CADF,CAFF,EAYGC,OAAO,iBACN,oBAAC,aAAD;AAAe,QAAA,IAAI,EAAEW;AAArB,sBACE,oBAAC,UAAD;AAAY,QAAA,OAAO,EAAC,WAApB;AAAgC,QAAA,KAAK,EAAC,UAAtC;AAAiD,QAAA,wBAAwB,MAAzE;AAA0E,QAAA,yBAAyB,EAAExC,MAAM,CAACgD,KAA5G;AAAmH,QAAA,MAAM,EAAE,MAAMnB,OAAO;AAAxI,sBACE,oBAAC,KAAD;AAAO,QAAA,KAAK,EAAE7B,MAAM,CAACwD,WAArB;AAAkC,QAAA,IAAI,EAAC;AAAvC,QADF,CADF,CAbJ,CADF,CADF;;AAwBF;AACE,0BACE,oBAAC,eAAD;AAAiB,uBAAa7B,MAA9B;AAAsC,QAAA,IAAI,EAAE3B,MAAM,CAACyD,WAAnD;AAAgE,QAAA,IAAI,EAAEzD,MAAM,CAAC0D,WAA7E;AAA0F,QAAA,KAAK,EAAE1D,MAAM,CAAC2D,UAAxG;AAAoH,QAAA,MAAM,EAAE3C,MAA5H;AAAoI,QAAA,SAAS,EAAES;AAA/I,sBACE,oBAAC,YAAD;AAAc,QAAA,KAAK,EAAEzB,MAAM,CAAC0D,WAA5B;AAAyC,QAAA,SAAS,EAAEjC;AAApD,SACGK,IAAI,GAAGA,IAAH,GAAUC,MAAM,GAAG,IAAH,gBAAU,oBAAC,GAAD;AAAK,QAAA,KAAK,EAAE/B,MAAM,CAAC0D,WAAnB;AAAgC,QAAA,IAAI,EAAC;AAArC,QADjC,eAEE,oBAAC,oBAAD,qBACE,oBAAC,mBAAD;AAAqB,QAAA,IAAI,EAAEjC,IAA3B;AAAiC,QAAA,KAAK,EAAEO,KAAxC;AAA+C,QAAA,KAAK,EAAEhC,MAAM,CAAC0D;AAA7D,SACGhC,QADH,cAEGP,IAAI,IAAIS,QAAR,iBACC,oBAAC,SAAD;AAAW,QAAA,EAAE,EAAG,GAAEiB,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAyC,aAA3D;AAAyE,QAAA,IAAI,EAAE5B,IAA/E;AAAqF,QAAA,OAAO,EAAC;AAA7F,SACGS,QADH,CAHJ,CADF,CAFF,EAYGC,OAAO,iBACN,oBAAC,aAAD;AAAe,QAAA,IAAI,EAAC;AAApB,sBACE,oBAAC,UAAD;AAAY,QAAA,OAAO,EAAC,WAApB;AAAgC,QAAA,KAAK,EAAC,UAAtC;AAAiD,QAAA,wBAAwB,MAAzE;AAA0E,QAAA,yBAAyB,EAAE7B,MAAM,CAACgD,KAA5G;AAAmH,QAAA,MAAM,EAAE,MAAMnB,OAAO;AAAxI,sBACE,oBAAC,KAAD;AAAO,QAAA,KAAK,EAAE7B,MAAM,CAAC4D,WAArB;AAAkC,QAAA,IAAI,EAAC;AAAvC,QADF,CADF,CAbJ,CADF,CADF;AA7EJ;AAsGD,CAhHD;;;AAZEnC,EAAAA,I,aAAO,O,EAAU,Q,EAAW,O;AAC5BZ,EAAAA,I;AACAM,EAAAA,I;AACAS,EAAAA,Q;AACAiC,EAAAA,K;AACA7C,EAAAA,M;AACAW,EAAAA,M;AACAG,EAAAA,I;AACAD,EAAAA,O;AACAE,EAAAA,M;;AAqHF,eAAeP,MAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Tip, ThumbsUp, Help, Close, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { ComponentResponsive } from '../styles/typography';\nimport { HyperLink } from '../HyperLink';\n\n/**\n * Styles for <Banner />\n */\nconst BannerContainer = styled.div<BannerProps>`\n  background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\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: ${(props: BannerProps) => props.link} !important;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  color: ${(props) => props.color};\n  font-size: 18px;\n  display: flex;\n  width: 100%;\n  margin: 0 0 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 16px 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\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`;\n\nconst ButtonWrapper = styled.div<{ type?: string }>`\n  margin: 0 0 0 auto;\n  ${(props) => (props.type ? getButtonStyle(props.type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = {\n  size?: 'small' | 'medium' | 'large';\n  type?: string;\n  link?: string;\n  linkText?: string;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  const formatTypeToLowerCase = type?.toLowerCase();\n  switch (formatTypeToLowerCase) {\n    case 'warning':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n          <BannerCenter color={COLORS.warning_700} className={size}>\n            {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.warning_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper type={formatTypeToLowerCase}>\n                <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                  <Close color={COLORS.warning_500} size=\"24px\" />\n                </IconButton>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'critical':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.critical_700} className={size}>\n            {icon ? icon : noIcon ? null : <TechnicalWarning color={COLORS.critical_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.critical_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper type={formatTypeToLowerCase}>\n                <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                  <Close color={COLORS.critical_500} size=\"24px\" />\n                </IconButton>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'positive':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.correct_700} className={size}>\n            {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.correct_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper type={formatTypeToLowerCase}>\n                <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                  <Close color={COLORS.correct_500} size=\"24px\" />\n                </IconButton>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    default:\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.primary_700} className={size}>\n            {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.primary_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper type=\"neutral\">\n                <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                  <Close color={COLORS.primary_500} size=\"24px\" />\n                </IconButton>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n  }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
+{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","BannerContainer","div","props","type","correct_100","black","bottom","MEDIUM","LARGE","link","BannerCenter","Regular","color","ButtonWrapper","BannerContentWrapper","Banner","size","children","testId","linkText","onClose","icon","noIcon","width","setWidth","useState","window","innerWidth","useEffect","handleResize","addEventListener","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_20","Math","floor","random","white","warning_500","critical_100","critical_700","critical_20","critical_500","correct_700","correct_20","correct_500","primary_100","primary_700","primary_20","primary_500","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {Close, Help, TechnicalWarning, ThumbsUp, Tip} from '../icons/systemicons/SystemIcons';\nimport {IconButton} from '../Button';\nimport {getButtonStyle} from './styles';\nimport {ComponentMStyling, ComponentResponsive} from '../styles/typography';\nimport {HyperLink} from '../HyperLink';\n\n/**\n * Styles for <Banner />\n */\nconst BannerContainer = styled.div<BannerProps>`\n  background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\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: ${(props: BannerProps) => props.link} !important;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color)}\n  \n  display: flex;\n  width: 100%;\n  margin: 0 0 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 16px 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\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`;\n\nconst ButtonWrapper = styled.div<{ type?: string }>`\n  margin: 0 0 0 auto;\n  ${(props) => (props.type ? getButtonStyle(props.type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = {\n  size?: 'small' | 'medium' | 'large';\n  type?: string;\n  link?: string;\n  linkText?: string;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  const formatTypeToLowerCase = type?.toLowerCase();\n  switch (formatTypeToLowerCase) {\n    case 'warning':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n          <BannerCenter color={COLORS.warning_700} className={size}>\n            {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.warning_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper type={formatTypeToLowerCase}>\n                <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                  <Close color={COLORS.warning_500} size=\"24px\" />\n                </IconButton>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'critical':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.critical_700} className={size}>\n            {icon ? icon : noIcon ? null : <TechnicalWarning color={COLORS.critical_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.critical_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper type={formatTypeToLowerCase}>\n                <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                  <Close color={COLORS.critical_500} size=\"24px\" />\n                </IconButton>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'positive':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.correct_700} className={size}>\n            {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.correct_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper type={formatTypeToLowerCase}>\n                <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                  <Close color={COLORS.correct_500} size=\"24px\" />\n                </IconButton>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    default:\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.primary_700} className={size}>\n            {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.primary_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper type=\"neutral\">\n                <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                  <Close color={COLORS.primary_500} size=\"24px\" />\n                </IconButton>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n  }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}

package/dist/esm/Banners/OverviewBanner.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { BREAKPOINTS, COLORS } from '../styles';
 import { PageWidth } from '../Layouts';
+import { HeadlineXSStyling } from '../styles/typography';
 const BannersWrapper = styled.div`
   background-color: ${COLORS.primary_20};
 `;
@@ -30,8 +31,7 @@ const BannerContent = styled(PageWidth)`
     }
   }
   & h2 {
-    font-weight: bold;
-    font-size: 24px;
+    ${HeadlineXSStyling(COLORS.black)}
     margin: 16px 0 24px 0;
   }
   & p {

package/dist/esm/Banners/OverviewBanner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Banners/OverviewBanner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","PageWidth","BannersWrapper","div","primary_20","BannerContent","MEDIUM","OverviewBanner","children","testId"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,WAApC;AACA,SAASC,SAAT,QAA0B,YAA1B;AAEA,MAAMC,cAAc,GAAGJ,MAAM,CAACK,GAAI;AAClC,sBAAsBH,MAAM,CAACI,UAAW;AACxC,CAFA;AAIA,MAAMC,aAAa,GAAGP,MAAM,CAACG,SAAD,CAAY;AACxC,sBAAsBD,MAAM,CAACI,UAAW;AACxC;AACA;AACA;AACA;AACA;AACA,IAAIL,WAAW,CAACO,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMP,WAAW,CAACO,MAAO;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMP,WAAW,CAACO,MAAO;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,CA9CA;;AAkDA,MAAMC,cAAc,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAAD,KAAiC;AACtD,sBACE,oBAAC,cAAD,qBACE,oBAAC,aAAD;AAAe,mBAAaA;AAA5B,KAAqCD,QAArC,CADF,CADF;AAKD,CAND;;;AAFeA,EAAAA,Q;AAAeC,EAAAA,M;;AAU9B,eAAeF,cAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { PageWidth } from '../Layouts';\n\nconst BannersWrapper = styled.div`\n  background-color: ${COLORS.primary_20};\n`;\n\nconst BannerContent = styled(PageWidth)`\n  background-color: ${COLORS.primary_20};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n    padding: 48px 12px;\n  }\n\n  & > *:first-child {\n    padding-top: 12px;\n    width: 320px;\n    height: 180px;\n    ${BREAKPOINTS.MEDIUM} {\n      padding-top: 0;\n      margin-right: 20px;\n      width: 384px;\n      height: 216px;\n    }\n  }\n  & h2 {\n    font-weight: bold;\n    font-size: 24px;\n    margin: 16px 0 24px 0;\n  }\n  & p {\n    margin: 0;\n    padding: 0 0 28px 0;\n    max-width: 310px;\n  }\n  & div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    margin-bottom: 18px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin-left: 20px;\n      align-items: start;\n      justify-content: start;\n      width: 384px;\n    }\n  }\n`;\n\ntype Props = { children: any; testId?: string };\n\nconst OverviewBanner = ({ children, testId }: Props) => {\n  return (\n    <BannersWrapper>\n      <BannerContent data-testid={testId}>{children}</BannerContent>\n    </BannersWrapper>\n  );\n};\n\nexport default OverviewBanner;\n"],"file":"OverviewBanner.js"}
+{"version":3,"sources":["../../../src/Banners/OverviewBanner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","PageWidth","HeadlineXSStyling","BannersWrapper","div","primary_20","BannerContent","MEDIUM","black","OverviewBanner","children","testId"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,WAAR,EAAqBC,MAArB,QAAkC,WAAlC;AACA,SAAQC,SAAR,QAAwB,YAAxB;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;AAEA,MAAMC,cAAc,GAAGL,MAAM,CAACM,GAAI;AAClC,sBAAsBJ,MAAM,CAACK,UAAW;AACxC,CAFA;AAIA,MAAMC,aAAa,GAAGR,MAAM,CAACG,SAAD,CAAY;AACxC,sBAAsBD,MAAM,CAACK,UAAW;AACxC;AACA;AACA;AACA;AACA;AACA,IAAIN,WAAW,CAACQ,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMR,WAAW,CAACQ,MAAO;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAML,iBAAiB,CAACF,MAAM,CAACQ,KAAR,CAAe;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMT,WAAW,CAACQ,MAAO;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,CA7CA;;AAiDA,MAAME,cAAc,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAAD,KAAiC;AACtD,sBACE,oBAAC,cAAD,qBACE,oBAAC,aAAD;AAAe,mBAAaA;AAA5B,KAAqCD,QAArC,CADF,CADF;AAKD,CAND;;;AAFeA,EAAAA,Q;AAAeC,EAAAA,M;;AAU9B,eAAeF,cAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS} from '../styles';\nimport {PageWidth} from '../Layouts';\nimport {HeadlineXSStyling} from '../styles/typography';\n\nconst BannersWrapper = styled.div`\n  background-color: ${COLORS.primary_20};\n`;\n\nconst BannerContent = styled(PageWidth)`\n  background-color: ${COLORS.primary_20};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n    padding: 48px 12px;\n  }\n\n  & > *:first-child {\n    padding-top: 12px;\n    width: 320px;\n    height: 180px;\n    ${BREAKPOINTS.MEDIUM} {\n      padding-top: 0;\n      margin-right: 20px;\n      width: 384px;\n      height: 216px;\n    }\n  }\n  & h2 {\n    ${HeadlineXSStyling(COLORS.black)}\n    margin: 16px 0 24px 0;\n  }\n  & p {\n    margin: 0;\n    padding: 0 0 28px 0;\n    max-width: 310px;\n  }\n  & div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    margin-bottom: 18px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin-left: 20px;\n      align-items: start;\n      justify-content: start;\n      width: 384px;\n    }\n  }\n`;\n\ntype Props = { children: any; testId?: string };\n\nconst OverviewBanner = ({ children, testId }: Props) => {\n  return (\n    <BannersWrapper>\n      <BannerContent data-testid={testId}>{children}</BannerContent>\n    </BannersWrapper>\n  );\n};\n\nexport default OverviewBanner;\n"],"file":"OverviewBanner.js"}

package/dist/esm/Breadcrumb/Breadcrumb.js

@@ -2,29 +2,39 @@ import _pt from "prop-types";
 import * as React from 'react';
 import styled from 'styled-components';
 import { COLORS } from '../styles';
-import { SystemIcons } from '..';
-import { useHistory } from 'react-router';
+import { ComponentTextStyle, SystemIcons } from '..';
 import { Link } from 'react-router-dom';
-const fontSize = "16px";
+import { ComponentMStyling, ComponentSStyling, ComponentXXSStyling } from '../styles/typography';
 const BreadcrumbContainer = styled.div`
   display:flex;
   align-items: center;
-  font-size: ${fontSize};
 `;
+
+const FontStyles = (size, textStyle, color) => {
+  switch (size) {
+    case 'xsmall':
+      return ComponentXXSStyling(textStyle, color);
+
+    case 'medium':
+      return ComponentMStyling(textStyle, color);
+
+    case 'small':
+    default:
+      return ComponentSStyling(textStyle, color);
+  }
+};
+
 const LastBreadcrumbItem = styled.label`
-  color: ${COLORS.neutral_800};
-  font-weight: bold;
+  ${props => FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800)}
   margin: 0 7px;
 `;
 const LinkWrapper = styled.div`
   align-items: center;
-  font-size: ${fontSize};
-  color: ${COLORS.neutral_600};
+  ${props => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}
   
   a {
     text-decoration: none;
-    color: ${COLORS.neutral_600};
-    font-size: ${fontSize};
+    ${props => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}
     margin: 0 7px;
 
     svg{
@@ -32,30 +42,46 @@ const LinkWrapper = styled.div`
     }
   }
   a:hover {
-    color: ${COLORS.neutral_800};
-    font-weight: bold;
+    color: ${COLORS.primary_700};
+  }
+  a:active {
+    color: ${COLORS.primary_800};
   }
 `;
 
 const Breadcrumb = ({
-  items
+  items,
+  size
 }) => {
-  const history = useHistory();
-  return /*#__PURE__*/React.createElement(BreadcrumbContainer, null, /*#__PURE__*/React.createElement(LinkWrapper, null, /*#__PURE__*/React.createElement(Link, {
+  size = size || 'small';
+  const iconSize = size === 'xsmall' ? '16' : size === 'small' ? '20' : '24';
+  return /*#__PURE__*/React.createElement(BreadcrumbContainer, null, /*#__PURE__*/React.createElement(LinkWrapper, {
+    size: size
+  }, /*#__PURE__*/React.createElement(Link, {
     to: '/'
   }, /*#__PURE__*/React.createElement(SystemIcons.Home, {
-    size: fontSize
+    size: iconSize
   }))), !!items && items.length > 2 && items.slice(0, items.length - 2).map((item, i) => {
-    return /*#__PURE__*/React.createElement(LinkWrapper, null, "/", /*#__PURE__*/React.createElement(Link, {
+    return /*#__PURE__*/React.createElement(LinkWrapper, {
+      size: size,
+      key: i
+    }, "/", /*#__PURE__*/React.createElement(Link, {
       to: item.url
     }, "..."));
-  }), !!items && items.length > 1 && /*#__PURE__*/React.createElement(LinkWrapper, null, "/", /*#__PURE__*/React.createElement(Link, {
+  }), !!items && items.length > 1 && /*#__PURE__*/React.createElement(LinkWrapper, {
+    size: size
+  }, "/", /*#__PURE__*/React.createElement(Link, {
     to: items[items.length - 2].url
-  }, items[items.length - 2].label)), !!items && items.length > 0 && /*#__PURE__*/React.createElement(LinkWrapper, null, "/", /*#__PURE__*/React.createElement(LastBreadcrumbItem, null, items[items.length - 1].label)));
+  }, items[items.length - 2].label)), !!items && items.length > 0 && /*#__PURE__*/React.createElement(LinkWrapper, {
+    size: size
+  }, "/", /*#__PURE__*/React.createElement(LastBreadcrumbItem, {
+    size: size
+  }, items[items.length - 1].label)));
 };
 
 Breadcrumb.propTypes = {
-  items: _pt.array
+  items: _pt.array,
+  size: _pt.oneOf(['xsmall', 'small', 'medium'])
 };
 export default Breadcrumb;
 //# sourceMappingURL=Breadcrumb.js.map

package/dist/esm/Breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Breadcrumb/Breadcrumb.tsx"],"names":["React","styled","COLORS","SystemIcons","useHistory","Link","fontSize","BreadcrumbContainer","div","LastBreadcrumbItem","label","neutral_800","LinkWrapper","neutral_600","Breadcrumb","items","history","length","slice","map","item","i","url"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,WAAT,QAA4B,IAA5B;AACA,SAASC,UAAT,QAA2B,cAA3B;AAEA,SAASC,IAAT,QAAqB,kBAArB;AAOA,MAAMC,QAAQ,GAAG,MAAjB;AAEA,MAAMC,mBAAmB,GAAGN,MAAM,CAACO,GAAI;AACvC;AACA;AACA,eAAeF,QAAS;AACxB,CAJA;AAMA,MAAMG,kBAAkB,GAAGR,MAAM,CAACS,KAAM;AACxC,WAAWR,MAAM,CAACS,WAAY;AAC9B;AACA;AACA,CAJA;AAMA,MAAMC,WAAW,GAAGX,MAAM,CAACO,GAAI;AAC/B;AACA,eAAeF,QAAS;AACxB,WAAWJ,MAAM,CAACW,WAAY;AAC9B;AACA;AACA;AACA,aAAaX,MAAM,CAACW,WAAY;AAChC,iBAAiBP,QAAS;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaJ,MAAM,CAACS,WAAY;AAChC;AACA;AACA,CAnBA;;AAsBA,MAAMG,UAAoD,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAe;AAC1E,QAAMC,OAAO,GAAGZ,UAAU,EAA1B;AAEA,sBACE,oBAAC,mBAAD,qBACE,oBAAC,WAAD,qBACE,oBAAC,IAAD;AAAM,IAAA,EAAE,EAAE;AAAV,kBACE,oBAAC,WAAD,CAAa,IAAb;AAAkB,IAAA,IAAI,EAAEE;AAAxB,IADF,CADF,CADF,EAOI,CAAC,CAACS,KAAF,IAAWA,KAAK,CAACE,MAAN,GAAe,CAA1B,IACAF,KAAK,CAACG,KAAN,CAAY,CAAZ,EAAeH,KAAK,CAACE,MAAN,GAAe,CAA9B,EAAiCE,GAAjC,CAAqC,CAACC,IAAD,EAAOC,CAAP,KAAY;AAC/C,wBACA,oBAAC,WAAD,0BAEE,oBAAC,IAAD;AAAM,MAAA,EAAE,EAAED,IAAI,CAACE;AAAf,aAFF,CADA;AAOF,GARA,CARJ,EAkBI,CAAC,CAACP,KAAF,IAAWA,KAAK,CAACE,MAAN,GAAe,CAA1B,iBACA,oBAAC,WAAD,0BAEE,oBAAC,IAAD;AAAM,IAAA,EAAE,EAAEF,KAAK,CAACA,KAAK,CAACE,MAAN,GAAe,CAAhB,CAAL,CAAwBK;AAAlC,KACGP,KAAK,CAACA,KAAK,CAACE,MAAN,GAAe,CAAhB,CAAL,CAAwBP,KAD3B,CAFF,CAnBJ,EA2BI,CAAC,CAACK,KAAF,IAAWA,KAAK,CAACE,MAAN,GAAe,CAA1B,iBACA,oBAAC,WAAD,0BAEE,oBAAC,kBAAD,QACGF,KAAK,CAACA,KAAK,CAACE,MAAN,GAAe,CAAhB,CAAL,CAAwBP,KAD3B,CAFF,CA5BJ,CADF;AAsCD,CAzCD;;;AAvCEK,EAAAA,K;;AAkFF,eAAeD,UAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { COLORS } from '../styles';\nimport { SystemIcons } from '..';\nimport { useHistory } from 'react-router';\nimport { BreadcrumbItem } from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\nimport { Link } from 'react-router-dom';\n\n\ntype BreadcrumbProps = {\n  items?: BreadcrumbItem[]\n};\n\nconst fontSize = \"16px\"\n\nconst BreadcrumbContainer = styled.div`\n  display:flex;\n  align-items: center;\n  font-size: ${fontSize};\n`;\n\nconst LastBreadcrumbItem = styled.label`\n  color: ${COLORS.neutral_800};\n  font-weight: bold;\n  margin: 0 7px;\n`;\n\nconst LinkWrapper = styled.div`\n  align-items: center;\n  font-size: ${fontSize};\n  color: ${COLORS.neutral_600};\n  \n  a {\n    text-decoration: none;\n    color: ${COLORS.neutral_600};\n    font-size: ${fontSize};\n    margin: 0 7px;\n\n    svg{\n      padding:4px 0 0 0;\n    }\n  }\n  a:hover {\n    color: ${COLORS.neutral_800};\n    font-weight: bold;\n  }\n`;\n\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ items }) => {\n  const history = useHistory();\n  \n  return (\n    <BreadcrumbContainer>\n      <LinkWrapper>\n        <Link to={'/'}>\n          <SystemIcons.Home size={fontSize} />\n        </Link>\n      </LinkWrapper>\n\n      { !!items && items.length > 2 && \n        items.slice(0, items.length - 2).map((item, i)=> {\n          return (\n          <LinkWrapper>\n            /\n            <Link to={item.url}>\n              ...\n            </Link>\n          </LinkWrapper>\n      )})}\n\n      { !!items && items.length > 1 && \n        <LinkWrapper>\n          /\n          <Link to={items[items.length - 2].url}>\n            {items[items.length - 2].label}\n          </Link>\n        </LinkWrapper>\n      }\n\n      { !!items && items.length > 0 && \n        <LinkWrapper>\n          /\n          <LastBreadcrumbItem>\n            {items[items.length - 1].label}\n          </LastBreadcrumbItem>\n        </LinkWrapper>\n      }\n\n    </BreadcrumbContainer>);\n};\n\nexport default Breadcrumb;\n"],"file":"Breadcrumb.js"}
+{"version":3,"sources":["../../../src/Breadcrumb/Breadcrumb.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","SystemIcons","Link","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","BreadcrumbContainer","div","FontStyles","size","textStyle","color","LastBreadcrumbItem","label","props","Bold","neutral_800","LinkWrapper","Regular","neutral_600","primary_700","primary_800","Breadcrumb","items","iconSize","length","slice","map","item","i","url"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS} from '../styles';\nimport {ComponentTextStyle, SystemIcons} from '..';\nimport {useHistory} from 'react-router';\nimport {BreadcrumbItem} from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\nimport {Link} from 'react-router-dom';\nimport {ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\n\n\ntype availableSizes = 'xsmall' | 'small' | 'medium';\n\ntype BreadcrumbProps = {\n  items?: BreadcrumbItem[];\n  size?: availableSizes;\n};\n\nconst BreadcrumbContainer = styled.div`\n  display:flex;\n  align-items: center;\n`;\n\nconst FontStyles = (size: availableSizes | undefined, textStyle: ComponentTextStyle, color: string) => {\n  switch (size) {\n    case 'xsmall':\n      return ComponentXXSStyling(textStyle, color);\n    case 'medium':\n      return ComponentMStyling(textStyle, color);\n    case 'small':\n    default:\n      return ComponentSStyling(textStyle, color);\n  }\n}\n\nconst LastBreadcrumbItem = styled.label<{size: availableSizes}>`\n  ${(props) => FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800)}\n  margin: 0 7px;\n`;\n\nconst LinkWrapper = styled.div<{size: availableSizes | undefined}>`\n  align-items: center;\n  ${(props) => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}\n  \n  a {\n    text-decoration: none;\n    ${(props) => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}\n    margin: 0 7px;\n\n    svg{\n      padding:4px 0 0 0;\n    }\n  }\n  a:hover {\n    color: ${COLORS.primary_700};\n  }\n  a:active {\n    color: ${COLORS.primary_800};\n  }\n`;\n\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ items, size }) => {\n\n  size = size || 'small';\n\n  const iconSize = size === 'xsmall' ? '16' : size === 'small' ? '20' : '24';\n\n  return (\n    <BreadcrumbContainer>\n      <LinkWrapper size={size}>\n        <Link to={'/'}>\n          <SystemIcons.Home size={iconSize} />\n        </Link>\n      </LinkWrapper>\n\n      { !!items && items.length > 2 && \n        items.slice(0, items.length - 2).map((item, i)=> {\n          return (\n          <LinkWrapper size={size} key={i}>\n            /\n            <Link to={item.url}>\n              ...\n            </Link>\n          </LinkWrapper>\n      )})}\n\n      { !!items && items.length > 1 && \n        <LinkWrapper size={size}>\n          /\n          <Link to={items[items.length - 2].url}>\n            {items[items.length - 2].label}\n          </Link>\n        </LinkWrapper>\n      }\n\n      { !!items && items.length > 0 && \n        <LinkWrapper size={size}>\n          /\n          <LastBreadcrumbItem size={size}>\n            {items[items.length - 1].label}\n          </LastBreadcrumbItem>\n        </LinkWrapper>\n      }\n\n    </BreadcrumbContainer>);\n};\n\nexport default Breadcrumb;\n"],"file":"Breadcrumb.js"}

package/dist/esm/Button/Iconbutton.js

@@ -178,7 +178,8 @@ const IconButton = ({
   tabIndex,
   borderRadius,
   onKeyPress,
-  tabbedHereBackgroundColor
+  tabbedHereBackgroundColor,
+  type
 }) => {
   const supressFocusRef = React.useRef(null);
   const [tabbedHere, setTabbedHere] = React.useState(false);
@@ -198,6 +199,7 @@ const IconButton = ({
     case 'secondary':
       return /*#__PURE__*/React.createElement(StyledSecondaryIconButton, {
         id: id,
+        type: type ?? 'button',
         "data-testid": id,
         onClick: event => action(event),
         onKeyDown: e => isPressingEnter(e) ? action() : null,
@@ -227,6 +229,7 @@ const IconButton = ({
     default:
       return /*#__PURE__*/React.createElement(StyledPrimaryIconButton, {
         id: id,
+        type: type ?? 'button',
         "data-testid": id,
         onClick: event => action(event),
         onKeyDown: e => isPressingEnter(e) ? action() : null,

package/dist/esm/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["React","styled","css","BREAKPOINTS","COLORS","tabbedHereStyle","variant","tabbedHereBackgroundColor","primary_500","neutral_600","primary_700","white","StyledIconButton","button","props","hideOnLowWidth","MEDIUM","borderRadius","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","id","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","supressFocusRef","useRef","setTabbedHere","useState","isPressingEnter","e","key","preventDefault","stopPropagation","event","current"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {BREAKPOINTS, COLORS} from '../styles';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  tabbedHere?: boolean;\n  tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n  switch (variant) {\n    case 'secondary':\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\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    case 'primary':\n    default:\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n          box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.white};\n        }\n      `;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none;\n    }\n  }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\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_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\ntype Props = {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  tabbedHereBackgroundColor?: string;\n};\n\nconst IconButton: React.FunctionComponent<Props> = ({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n}): React.ReactElement<Props> => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          data-testid={id}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          data-testid={id}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n};\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
+{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["React","styled","css","BREAKPOINTS","COLORS","tabbedHereStyle","variant","tabbedHereBackgroundColor","primary_500","neutral_600","primary_700","white","StyledIconButton","button","props","hideOnLowWidth","MEDIUM","borderRadius","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","id","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","supressFocusRef","useRef","setTabbedHere","useState","isPressingEnter","e","key","preventDefault","stopPropagation","event","current"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  tabbedHere?: boolean;\n  tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n  switch (variant) {\n    case 'secondary':\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\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    case 'primary':\n    default:\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n          box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.white};\n        }\n      `;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none;\n    }\n  }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\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_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\ntype Props = {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  tabbedHereBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n};\n\nconst IconButton: React.FunctionComponent<Props> = ({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n  type,\n}): React.ReactElement<Props> => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n};\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}

package/dist/esm/Dropdown/CommonStyling.js

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 import { CommonInteractionStyling } from '../common';
-import { BREAKPOINTS, COLORS } from '../styles';
-import { ComponentMStyling, ComponentTextStyle, ComponentXXSStyling } from '../styles/typography';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
+import { ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';
 export const Dropdown = styled.div`
   position: relative;
   display: inline-block;
@@ -68,8 +68,7 @@ const placeholderStyling = css`
   ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
 `;
 export const StyledField = styled.div`
-  font-weight: normal;
-  font-size: 16px;
+  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}
 
   padding: 12px 16px;
   height: 48px;
@@ -81,42 +80,44 @@ export const StyledField = styled.div`
   box-sizing: border-box;
   border-radius: 4px;
   cursor: pointer;
-  line-height: 16px;
 
   display: flex;
   align-items: center;
   gap: 4px;
+  
+  input{
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+  }
 
   &::placeholder {
     ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
   }
 
   ${BREAKPOINTS.MEDIUM} {
-    font-size: 18px;
-    line-height: 16px;
+    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}
     padding: 16px;
     height: 56px;
     &::placeholder {
-      font-size: 14px;
+      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
     }
   }
 
   &.small {
-    font-size: 16px;
-    line-height: 16px;
+    ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}
     padding: 12px 16px;
     height: 48px;
     &::placeholder {
-      font-size: 12px;
+      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
     }
   }
   &.medium {
-    font-size: 18px;
-    line-height: 18px;
+    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}
     height: 56px;
     padding: 16px;
     &::placeholder {
-      font-size: 14px;
+      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
     }
   }
 
@@ -147,8 +148,8 @@ export const StyledField = styled.div`
   }
 
   &.button {
-    font-size: 16px !important;
-    line-height: 20px !important;
+    ${props => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}
+
     box-sizing: border-box;
     height: 32px;
     padding: 0 8px;
@@ -156,9 +157,7 @@ export const StyledField = styled.div`
     min-width: initial;
     border: none !important;
     box-shadow: none;
-    font-weight: bold;
     border-radius: 4px;
-    color: ${props => props.disabled ? COLORS.neutral_300 : COLORS.neutral_600};
 
     &.expanded {
       color: ${COLORS.neutral_800};
@@ -228,16 +227,11 @@ export const DropdownContent = styled.div`
   }
 `;
 export const DropdownButton = styled.button`
-  color: ${COLORS.neutral_600};
+  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
 
   position: relative;
   text-decoration: none;
   display: block;
-  font-family: Lato;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 16px;
-  line-height: 120%;
   height: 48px;
   background-color: ${COLORS.white};
   border: none;
@@ -252,18 +246,22 @@ export const DropdownButton = styled.button`
     width: calc(100% - 32px);
     border-top: 1px solid #e5e5e5;
   }
+
   span {
     margin: auto 0 auto 16px;
     line-height: 48px;
   }
+
   div.item-content {
     margin: auto 0 auto 16px;
     line-height: 48px;
     display: flex;
     align-items: center;
+
     div.item-label {
       flex: 1 0 calc(100% - 40px);
     }
+
     div.item-icon {
       flex: 1 0 40px;
       display: flex;
@@ -275,6 +273,7 @@ export const DropdownButton = styled.button`
 
   &.active {
     background: ${COLORS.neutral_20};
+
     &::after {
       position: absolute;
       content: ' ';
@@ -284,24 +283,25 @@ export const DropdownButton = styled.button`
       left: 2px;
       background-color: ${COLORS.primary_500};
 
-      border-top-left-radius: 2px;
-      border-top-right-radius: 2px;
-      border-bottom-left-radius: 2px;
-      border-bottom-right-radius: 2px;
+      border-radius: 2px;
     }
   }
 
   &.active:hover {
     background-color: ${COLORS.primary_20};
+
     svg {
       color: ${COLORS.primary_600};
     }
+
     &::after {
       background-color: ${COLORS.primary_500};
     }
   }
+
   &.active:active {
     background-color: ${COLORS.primary_100};
+
     svg {
       color: ${COLORS.primary_800};
     }