@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/esm/Accordion/styles.js

@@ -0,0 +1,75 @@
+import styled, { css } from 'styled-components';
+import { COLORS } from '../styles';
+import { Z_INDEXES } from '../styles/z-indexes';
+export const AccordionMenuWrapper = styled.div`
+  min-width: 320px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+`;
+export const AccordionItemContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  border-bottom: ${props => props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : ''};
+`;
+const disabledState = css`
+  background: ${COLORS.white}!important;
+  color: ${COLORS.neutral_300};
+  pointer-events: none;
+  svg {
+    color: ${COLORS.neutral_300}!important;
+  }
+`;
+export const ItemHeaderContainer = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px 11px 16px;
+  cursor: pointer;
+  background: ${COLORS.neutral_20};
+  cursor: ${props => props.isDisabled ? 'not-allowed' : 'pointer'};
+  svg:last-child {
+    margin-left: auto;
+  }
+  outline: none;
+  ${props => props.tabbedHere ? css`
+    z-index: ${Z_INDEXES.focus};
+    box-shadow: 0px 4px 12px ${COLORS.primary_500}, 0px 0px 8px ${COLORS.primary_500};` : ''}
+
+  ${props => props.isDisabled ? disabledState : ''}
+  :hover {
+    background: ${COLORS.primary_20};
+  }
+
+  :hover .headerLabel {
+    color: ${COLORS.primary_700};
+  }
+
+  :active .headerLabel {
+    color: ${COLORS.primary_800};
+  }
+
+  :hover svg {
+    color: ${COLORS.primary_700};
+  }
+
+  :active svg {
+    color: ${COLORS.primary_800};
+  }
+
+  :active {
+    background: ${COLORS.primary_100};
+  }
+`;
+export const HeaderIconContainer = styled.div`
+  margin-left: auto;
+`;
+export const ItemBodyContainer = styled.div`
+  padding: 0px 16px;
+  margin: 12px 0;
+  background: ${COLORS.white};
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/Accordion/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Accordion/styles.ts"],"names":["styled","css","COLORS","Z_INDEXES","AccordionMenuWrapper","div","AccordionItemContainer","props","displaySeparator","neutral_100","disabledState","white","neutral_300","ItemHeaderContainer","neutral_20","isDisabled","tabbedHere","focus","primary_500","primary_20","primary_700","primary_800","primary_100","HeaderIconContainer","ItemBodyContainer"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,SAAT,QAA0B,qBAA1B;AAEA,OAAO,MAAMC,oBAAoB,GAAGJ,MAAM,CAACK,GAAI;AAC/C;AACA;AACA;AACA;AACA,CALO;AAOP,OAAO,MAAMC,sBAAsB,GAAGN,MAAM,CAACK,GAAoC;AACjF;AACA;AACA;AACA;AACA,mBAAoBE,KAAD,IAAYA,KAAK,CAACC,gBAAN,GAA0B,aAAYN,MAAM,CAACO,WAAY,EAAzD,GAA6D,EAAI;AAChG,CANO;AAQP,MAAMC,aAAa,GAAGT,GAAI;AAC1B,gBAAgBC,MAAM,CAACS,KAAM;AAC7B,WAAWT,MAAM,CAACU,WAAY;AAC9B;AACA;AACA,aAAaV,MAAM,CAACU,WAAY;AAChC;AACA,CAPA;AASA,OAAO,MAAMC,mBAAmB,GAAGb,MAAM,CAACK,GAAqE;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgBH,MAAM,CAACY,UAAW;AAClC,YAAaP,KAAD,IAAYA,KAAK,CAACQ,UAAN,GAAmB,aAAnB,GAAmC,SAAW;AACtE;AACA;AACA;AACA;AACA,IAAIR,KAAK,IAAIA,KAAK,CAACS,UAAN,GAAmBf,GAAI;AACpC,eAAeE,SAAS,CAACc,KAAM;AAC/B,+BAA+Bf,MAAM,CAACgB,WAAY,iBAAgBhB,MAAM,CAACgB,WAAY,GAFxE,GAE6E,EAAG;AAC7F;AACA,IAAKX,KAAD,IAAYA,KAAK,CAACQ,UAAN,GAAmBL,aAAnB,GAAmC,EAAI;AACvD;AACA,kBAAkBR,MAAM,CAACiB,UAAW;AACpC;AACA;AACA;AACA,aAAajB,MAAM,CAACkB,WAAY;AAChC;AACA;AACA;AACA,aAAalB,MAAM,CAACmB,WAAY;AAChC;AACA;AACA;AACA,aAAanB,MAAM,CAACkB,WAAY;AAChC;AACA;AACA;AACA,aAAalB,MAAM,CAACmB,WAAY;AAChC;AACA;AACA;AACA,kBAAkBnB,MAAM,CAACoB,WAAY;AACrC;AACA,CAzCO;AA2CP,OAAO,MAAMC,mBAAmB,GAAGvB,MAAM,CAACK,GAAI;AAC9C;AACA,CAFO;AAIP,OAAO,MAAMmB,iBAAiB,GAAGxB,MAAM,CAACK,GAAI;AAC5C;AACA;AACA,gBAAgBH,MAAM,CAACS,KAAM;AAC7B,CAJO","sourcesContent":["import styled, { css } from 'styled-components';\r\nimport { COLORS } from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\n\r\nexport const AccordionMenuWrapper = styled.div`\r\n  min-width: 320px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n`;\r\n\r\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean; }>`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\r\n`;\r\n\r\nconst disabledState = css`\r\n  background: ${COLORS.white}!important;\r\n  color: ${COLORS.neutral_300};\r\n  pointer-events: none;\r\n  svg {\r\n    color: ${COLORS.neutral_300}!important;\r\n  }\r\n`;\r\n\r\nexport const ItemHeaderContainer = styled.div<{ isDisabled: boolean, isActive: boolean, tabbedHere: boolean }>`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 16px 11px 16px;\r\n  cursor: pointer;\r\n  background: ${COLORS.neutral_20};\r\n  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};\r\n  svg:last-child {\r\n    margin-left: auto;\r\n  }\r\n  outline: none;\r\n  ${props => props.tabbedHere ? css`\r\n    z-index: ${Z_INDEXES.focus};\r\n    box-shadow: 0px 4px 12px ${COLORS.primary_500}, 0px 0px 8px ${COLORS.primary_500};` : ''}\r\n\r\n  ${(props) => (props.isDisabled ? disabledState : '')}\r\n  :hover {\r\n    background: ${COLORS.primary_20};\r\n  }\r\n\r\n  :hover .headerLabel {\r\n    color: ${COLORS.primary_700};\r\n  }\r\n\r\n  :active .headerLabel {\r\n    color: ${COLORS.primary_800};\r\n  }\r\n\r\n  :hover svg {\r\n    color: ${COLORS.primary_700};\r\n  }\r\n\r\n  :active svg {\r\n    color: ${COLORS.primary_800};\r\n  }\r\n\r\n  :active {\r\n    background: ${COLORS.primary_100};\r\n  }\r\n`;\r\n\r\nexport const HeaderIconContainer = styled.div`\r\n  margin-left: auto;\r\n`;\r\n\r\nexport const ItemBodyContainer = styled.div`\r\n  padding: 0px 16px;\r\n  margin: 12px 0;\r\n  background: ${COLORS.white};\r\n`;\r\n"],"file":"styles.js"}

package/dist/esm/AuthPage/AuthPage.js

@@ -0,0 +1,50 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import { COLORS } from '../styles';
+import ScreenSetsContainer from './ScreenSetsContainer';
+import { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';
+
+/**
+ * The 'AuthPage' component consist of two containers: an 'Information' container on the left, and a 'ScreenSetsContainer' on the right.
+ * The 'Information' container is optional and its contents depend on the context (sign-up or sign-in).
+ * The 'ScreenSetsContainer' will contain the SAP CDC screen-sets.
+ */
+const AuthPage = ({
+  showInformationSection,
+  signUp,
+  signUpPlaceholderImage,
+  signInPlaceholderImage,
+  signUpPlaceholderImageAlt,
+  signInPlaceholderImageAlt,
+  signUpInformationHeader,
+  signInInformationHeader,
+  signUpInformationText,
+  signInInformationText,
+  screenSetsContainerId
+}) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showInformationSection && /*#__PURE__*/React.createElement(InformationContainer, {
+    color: signUp ? COLORS.accent1_20 : COLORS.primary_20
+  }, /*#__PURE__*/React.createElement(InformationContent, null, (signUpPlaceholderImage || signInPlaceholderImage) && /*#__PURE__*/React.createElement(InformationImage, {
+    src: signUp ? signUpPlaceholderImage : signInPlaceholderImage,
+    alt: signUp ? signUpPlaceholderImageAlt : signInPlaceholderImageAlt
+  }), (signUpInformationHeader || signInInformationHeader) && /*#__PURE__*/React.createElement(InformationHeader, null, signUp ? signUpInformationHeader : signInInformationHeader), (signUpInformationText || signInInformationText) && /*#__PURE__*/React.createElement(InformationText, null, signUp ? signUpInformationText : signInInformationText))), /*#__PURE__*/React.createElement(ScreenSetsContainer, {
+    id: screenSetsContainerId,
+    centerContents: !showInformationSection
+  }));
+};
+
+AuthPage.propTypes = {
+  showInformationSection: _pt.bool.isRequired,
+  signUp: _pt.bool.isRequired,
+  signUpPlaceholderImage: _pt.string,
+  signInPlaceholderImage: _pt.string,
+  signUpPlaceholderImageAlt: _pt.string,
+  signInPlaceholderImageAlt: _pt.string,
+  signUpInformationHeader: _pt.string,
+  signInInformationHeader: _pt.string,
+  signUpInformationText: _pt.string,
+  signInInformationText: _pt.string,
+  screenSetsContainerId: _pt.string.isRequired
+};
+export default AuthPage;
+//# sourceMappingURL=AuthPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/AuthPage/AuthPage.tsx"],"names":["React","COLORS","ScreenSetsContainer","InformationContainer","InformationContent","InformationHeader","InformationText","InformationImage","AuthPage","showInformationSection","signUp","signUpPlaceholderImage","signInPlaceholderImage","signUpPlaceholderImageAlt","signInPlaceholderImageAlt","signUpInformationHeader","signInInformationHeader","signUpInformationText","signInInformationText","screenSetsContainerId","accent1_20","primary_20"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,OAAOC,mBAAP,MAAgC,uBAAhC;AACA,SAASC,oBAAT,EAA+BC,kBAA/B,EAAmDC,iBAAnD,EAAsEC,eAAtE,EAAuFC,gBAAvF,QAA+G,eAA/G;;AA4BA;AACA;AACA;AACA;AACA;AACA,MAAMC,QAAQ,GAAG,CAAC;AAChBC,EAAAA,sBADgB;AAEhBC,EAAAA,MAFgB;AAGhBC,EAAAA,sBAHgB;AAIhBC,EAAAA,sBAJgB;AAKhBC,EAAAA,yBALgB;AAMhBC,EAAAA,yBANgB;AAOhBC,EAAAA,uBAPgB;AAQhBC,EAAAA,uBARgB;AAShBC,EAAAA,qBATgB;AAUhBC,EAAAA,qBAVgB;AAWhBC,EAAAA;AAXgB,CAAD,KAYI;AACnB,sBACE,0CACGV,sBAAsB,iBACrB,oBAAC,oBAAD;AAAsB,IAAA,KAAK,EAAEC,MAAM,GAAGT,MAAM,CAACmB,UAAV,GAAuBnB,MAAM,CAACoB;AAAjE,kBACE,oBAAC,kBAAD,QACG,CAACV,sBAAsB,IAAIC,sBAA3B,kBACC,oBAAC,gBAAD;AAAkB,IAAA,GAAG,EAAEF,MAAM,GAAGC,sBAAH,GAA4BC,sBAAzD;AAAiF,IAAA,GAAG,EAAEF,MAAM,GAAGG,yBAAH,GAA+BC;AAA3H,IAFJ,EAIG,CAACC,uBAAuB,IAAIC,uBAA5B,kBAAwD,oBAAC,iBAAD,QAAoBN,MAAM,GAAGK,uBAAH,GAA6BC,uBAAvD,CAJ3D,EAKG,CAACC,qBAAqB,IAAIC,qBAA1B,kBAAoD,oBAAC,eAAD,QAAkBR,MAAM,GAAGO,qBAAH,GAA2BC,qBAAnD,CALvD,CADF,CAFJ,eAYE,oBAAC,mBAAD;AAAqB,IAAA,EAAE,EAAEC,qBAAzB;AAAgD,IAAA,cAAc,EAAE,CAACV;AAAjE,IAZF,CADF;AAgBD,CA7BD;;;AA7BEA,EAAAA,sB;AAGAC,EAAAA,M;AAEAC,EAAAA,sB;AAEAC,EAAAA,sB;AAEAC,EAAAA,yB;AAEAC,EAAAA,yB;AAEAC,EAAAA,uB;AAEAC,EAAAA,uB;AAEAC,EAAAA,qB;AAEAC,EAAAA,qB;AAEAC,EAAAA,qB;;AAuCF,eAAeX,QAAf","sourcesContent":["import * as React from 'react';\r\nimport { COLORS } from '../styles';\r\nimport ScreenSetsContainer from './ScreenSetsContainer';\r\nimport { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';\r\n\r\ntype AuthPageProps = {\r\n  /** set this to 'false' to hide the left side illustration/information section */\r\n  showInformationSection: boolean;\r\n  /** true if 'sign-up' screen-set is showing, otherwise false.\r\n   * The value can be set using 'onBeforeScreenLoad' in 'gigya.accounts.showScreenSet(...)' and checking the loaded screen-set */\r\n  signUp: boolean;\r\n  /** img src string for 'sign-up' placeholder image */\r\n  signUpPlaceholderImage?: string;\r\n  /** img src string for 'sign-in' placeholder image */\r\n  signInPlaceholderImage?: string;\r\n  /** img alt text string for 'sign-up' placeholder image */\r\n  signUpPlaceholderImageAlt?: string;\r\n  /** img alt text string for 'sign-in' placeholder image */\r\n  signInPlaceholderImageAlt?: string;\r\n  /** information header text string below 'sign-up' placeholder image */\r\n  signUpInformationHeader?: string;\r\n  /** information header text string below 'sign-in' placeholder image */\r\n  signInInformationHeader?: string;\r\n  /** information text string below 'sign-up' header text */\r\n  signUpInformationText?: string;\r\n  /** information text string below 'sign-in' header text */\r\n  signInInformationText?: string;\r\n  /** ID that will be given to the SAP CDC screen-sets container (must match 'containerID' in 'gigya.accounts.showScreenSet(...)'!) */\r\n  screenSetsContainerId: string;\r\n};\r\n\r\n/**\r\n * The 'AuthPage' component consist of two containers: an 'Information' container on the left, and a 'ScreenSetsContainer' on the right.\r\n * The 'Information' container is optional and its contents depend on the context (sign-up or sign-in).\r\n * The 'ScreenSetsContainer' will contain the SAP CDC screen-sets.\r\n */\r\nconst AuthPage = ({\r\n  showInformationSection,\r\n  signUp,\r\n  signUpPlaceholderImage,\r\n  signInPlaceholderImage,\r\n  signUpPlaceholderImageAlt,\r\n  signInPlaceholderImageAlt,\r\n  signUpInformationHeader,\r\n  signInInformationHeader,\r\n  signUpInformationText,\r\n  signInInformationText,\r\n  screenSetsContainerId,\r\n}: AuthPageProps) => {\r\n  return (\r\n    <>\r\n      {showInformationSection && (\r\n        <InformationContainer color={signUp ? COLORS.accent1_20 : COLORS.primary_20}>\r\n          <InformationContent>\r\n            {(signUpPlaceholderImage || signInPlaceholderImage) && (\r\n              <InformationImage src={signUp ? signUpPlaceholderImage : signInPlaceholderImage} alt={signUp ? signUpPlaceholderImageAlt : signInPlaceholderImageAlt} />\r\n            )}\r\n            {(signUpInformationHeader || signInInformationHeader) && <InformationHeader>{signUp ? signUpInformationHeader : signInInformationHeader}</InformationHeader>}\r\n            {(signUpInformationText || signInInformationText) && <InformationText>{signUp ? signUpInformationText : signInInformationText}</InformationText>}\r\n          </InformationContent>\r\n        </InformationContainer>\r\n      )}\r\n      <ScreenSetsContainer id={screenSetsContainerId} centerContents={!showInformationSection} />\r\n    </>\r\n  );\r\n};\r\n\r\nexport default AuthPage;\r\n"],"file":"AuthPage.js"}

package/dist/esm/AuthPage/Information.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/AuthPage/Information.tsx"],"names":["styled","AuthPageSection","BREAKPOINTS","COLORS","ParagraphTextStyle","HeadlineXLStyling","ParagraphLStyling","InformationContainer","props","color","MEDIUM","InformationContent","div","LARGE","InformationHeader","h2","black","InformationText","p","Regular","neutral_600","InformationImage","img"],"mappings":"AACA,OAAOA,MAAP,MAAmB,mBAAnB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,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';\r\nimport styled from 'styled-components';\r\nimport AuthPageSection from './_AuthPageSection';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, HeadlineXL, ParagraphTextStyle} from '../styles';\r\nimport {ComponentLStyling, HeadlineXLStyling, ParagraphLStyling} from '../styles/typography';\r\n\r\nexport const InformationContainer = styled(AuthPageSection)<{ color: string }>`\r\n  display: none;\r\n  background: ${props => props.color};\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    display: flex;\r\n    padding-top: 56px;\r\n  }\r\n`;\r\n\r\nexport const InformationContent = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-self: center;\r\n  align-items: center;\r\n  text-align: center;\r\n  max-width: 100%;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    align-self: flex-end;\r\n    margin-right: 48px;\r\n  }\r\n`;\r\n\r\nexport const InformationHeader = styled.h2`\r\n  ${HeadlineXLStyling(COLORS.black)}\r\n  font-weight: 300;\r\n  margin-bottom: 0;\r\n`;\r\n\r\nexport const InformationText = styled.p`\r\n  ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\r\n  margin: 8px 0;\r\n`;\r\n\r\nexport const InformationImage = styled.img`\r\n  height: 275px;\r\n  max-width: 100%;\r\n`;\r\n"],"file":"Information.js"}

package/dist/esm/AuthPage/ScreenSetsContainer.js

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+import AuthPageSection from './_AuthPageSection';
+import { BREAKPOINTS } from '../styles';
+const ScreenSetsContainer = styled(AuthPageSection)`
+  padding: 8px;
+  width: calc(100% - 16px);
+  align-items: ${props => props.centerContents ? 'center' : 'unset'};
+
+  .gigya-screen-caption {
+    display: none;
+  }
+
+  .gigya-screen {
+    max-width: 100%;
+    margin: auto;
+  }
+
+  ${BREAKPOINTS.MEDIUM} {
+    .gigya-screen {
+      margin: 0;
+      padding: 36px 25px !important;
+    }
+  }
+
+  ${BREAKPOINTS.XLARGE} {
+    .gigya-screen {
+      max-width: 500px;
+    }
+  }
+`;
+export default ScreenSetsContainer;
+//# sourceMappingURL=ScreenSetsContainer.js.map

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

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

package/dist/esm/AuthPage/_AuthPageSection.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { BREAKPOINTS } from '../styles';
+const AuthPageSection = styled.section`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
+  ${BREAKPOINTS.MEDIUM} {
+    padding: 24px;
+    width: calc(50% - 48px);
+  }
+`;
+export default AuthPageSection;
+//# sourceMappingURL=_AuthPageSection.js.map

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

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

package/dist/esm/AuthPage/index.js

@@ -0,0 +1,6 @@
+import ScreenSetsContainer from './ScreenSetsContainer';
+import { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';
+import AuthPage from './AuthPage';
+import { screenSetsErrorMessages_EN } from './screenSetsErrorMessages';
+export { ScreenSetsContainer, InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage, AuthPage, screenSetsErrorMessages_EN };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/AuthPage/index.ts"],"names":["ScreenSetsContainer","InformationContainer","InformationContent","InformationHeader","InformationText","InformationImage","AuthPage","screenSetsErrorMessages_EN"],"mappings":"AAAA,OAAOA,mBAAP,MAAgC,uBAAhC;AACA,SAASC,oBAAT,EAA+BC,kBAA/B,EAAmDC,iBAAnD,EAAsEC,eAAtE,EAAuFC,gBAAvF,QAA+G,eAA/G;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,SAASC,0BAAT,QAA2C,2BAA3C;AAEA,SAASP,mBAAT,EAA8BC,oBAA9B,EAAoDC,kBAApD,EAAwEC,iBAAxE,EAA2FC,eAA3F,EAA4GC,gBAA5G,EAA8HC,QAA9H,EAAwIC,0BAAxI","sourcesContent":["import ScreenSetsContainer from './ScreenSetsContainer';\r\nimport { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';\r\nimport AuthPage from './AuthPage';\r\nimport { screenSetsErrorMessages_EN } from './screenSetsErrorMessages';\r\n\r\nexport { ScreenSetsContainer, InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage, AuthPage, screenSetsErrorMessages_EN };\r\n"],"file":"index.js"}

package/dist/esm/AuthPage/screenSetsErrorMessages.js

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

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

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

package/dist/esm/Banners/Banner.js

@@ -0,0 +1,264 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import styled from 'styled-components';
+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 { ComponentMStyling, ComponentResponsive } from '../styles/typography';
+import { HyperLink } from '../HyperLink';
+/**
+ * Styles for <Banner />
+ */
+
+const BannerContainer = styled.div`
+  background: ${props => props.type ? props.type : COLORS.correct_100};
+  min-height: 48px;
+  display: flex;
+  color: ${COLORS.black};
+  margin-top: ${props => props.bottom ? 'auto' : '0'};
+
+  button:last-child {
+    line-height: 0;
+    margin: 0 0 0 8px;
+    ${BREAKPOINTS.MEDIUM} {
+      margin: 0 0 0 16px;
+    }
+    ${BREAKPOINTS.LARGE} {
+      margin: 0 0 0 32px;
+    }
+    &.small {
+      margin: 0 0 0 8px;
+    }
+    &.medium {
+      margin: 0 0 0 16px;
+    }
+    &.large {
+      margin: 0 0 0 32px;
+    }
+  }
+
+  a {
+    color: ${props => props.link} !important;
+  }
+`;
+const BannerCenter = styled.div`
+  ${props => ComponentMStyling(ComponentTextStyle.Regular, props.color)}
+  
+  display: flex;
+  width: 100%;
+  margin: 0 0 0 16px;
+  ${BREAKPOINTS.MEDIUM} {
+    margin: 0 16px 0 32px;
+  }
+  ${BREAKPOINTS.LARGE} {
+    margin: 0 40px 0 56px;
+  }
+  &.small {
+    margin: 0 0 0 16px;
+  }
+  &.medium {
+    margin: 0 16px 0 32px;
+  }
+  &.large {
+    margin: 0 40px 0 56px;
+  }
+
+  > svg {
+    flex-shrink: 0;
+    margin: 12px 0;
+  }
+`;
+const ButtonWrapper = styled.div`
+  margin: 0 0 0 auto;
+`;
+const ButtonContainer = styled.div`
+  display: contents;
+  ${props => props.type ? getButtonStyle(props.type) : null};
+`;
+const BannerContentWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin: 12px 0;
+  &:not(:first-child) {
+    margin-left: 8px;
+  }
+`;
+
+const Banner = ({
+  size,
+  type,
+  children,
+  bottom,
+  testId,
+  linkText,
+  link,
+  onClose,
+  icon,
+  noIcon
+}) => {
+  const [width, setWidth] = React.useState(window.innerWidth);
+  React.useEffect(() => {
+    function handleResize() {
+      setWidth(window.innerWidth);
+    }
+
+    window.addEventListener('resize', handleResize);
+  });
+  const formatTypeToLowerCase = type?.toLowerCase();
+
+  switch (formatTypeToLowerCase) {
+    case 'warning':
+      return /*#__PURE__*/React.createElement(BannerContainer, {
+        "data-testid": testId,
+        type: COLORS.warning_100,
+        link: COLORS.warning_700,
+        hover: COLORS.warning_20,
+        bottom: bottom
+      }, /*#__PURE__*/React.createElement(BannerCenter, {
+        color: COLORS.warning_700,
+        className: size
+      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(Help, {
+        color: COLORS.warning_700,
+        size: "24px"
+      }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, /*#__PURE__*/React.createElement(ComponentResponsive, {
+        size: size,
+        width: width,
+        color: COLORS.warning_700
+      }, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement(HyperLink, {
+        id: `${Math.floor(Math.random() * 999999999999)}_BannerLink`,
+        href: link,
+        variant: "default"
+      }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
+        type: formatTypeToLowerCase
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        useTransparentBackground: true,
+        tabbedHereBackgroundColor: COLORS.white,
+        action: () => onClose()
+      }, /*#__PURE__*/React.createElement(Close, {
+        color: COLORS.warning_500,
+        size: "24px"
+      }))))));
+
+    case 'critical':
+      return /*#__PURE__*/React.createElement(BannerContainer, {
+        "data-testid": testId,
+        type: COLORS.critical_100,
+        link: COLORS.critical_700,
+        hover: COLORS.critical_20,
+        bottom: bottom,
+        className: size
+      }, /*#__PURE__*/React.createElement(BannerCenter, {
+        color: COLORS.critical_700,
+        className: size
+      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(TechnicalWarning, {
+        color: COLORS.critical_700,
+        size: "24px"
+      }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, /*#__PURE__*/React.createElement(ComponentResponsive, {
+        size: size,
+        width: width,
+        color: COLORS.critical_700
+      }, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement(HyperLink, {
+        id: `${Math.floor(Math.random() * 999999999999)}_BannerLink`,
+        href: link,
+        variant: "default"
+      }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
+        type: formatTypeToLowerCase
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        useTransparentBackground: true,
+        tabbedHereBackgroundColor: COLORS.white,
+        action: () => onClose()
+      }, /*#__PURE__*/React.createElement(Close, {
+        color: COLORS.critical_500,
+        size: "24px"
+      }))))));
+
+    case 'positive':
+      return /*#__PURE__*/React.createElement(BannerContainer, {
+        "data-testid": testId,
+        type: COLORS.correct_100,
+        link: COLORS.correct_700,
+        hover: COLORS.correct_20,
+        bottom: bottom,
+        className: size
+      }, /*#__PURE__*/React.createElement(BannerCenter, {
+        color: COLORS.correct_700,
+        className: size
+      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(ThumbsUp, {
+        color: COLORS.correct_700,
+        size: "24px"
+      }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, /*#__PURE__*/React.createElement(ComponentResponsive, {
+        size: size,
+        width: width,
+        color: COLORS.correct_700
+      }, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement(HyperLink, {
+        id: `${Math.floor(Math.random() * 999999999999)}_BannerLink`,
+        href: link,
+        variant: "default"
+      }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
+        type: formatTypeToLowerCase
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        useTransparentBackground: true,
+        tabbedHereBackgroundColor: COLORS.white,
+        action: () => onClose()
+      }, /*#__PURE__*/React.createElement(Close, {
+        color: COLORS.correct_500,
+        size: "24px"
+      }))))));
+
+    default:
+      return /*#__PURE__*/React.createElement(BannerContainer, {
+        "data-testid": testId,
+        type: COLORS.primary_100,
+        link: COLORS.primary_700,
+        hover: COLORS.primary_20,
+        bottom: bottom,
+        className: size
+      }, /*#__PURE__*/React.createElement(BannerCenter, {
+        color: COLORS.primary_700,
+        className: size
+      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(Tip, {
+        color: COLORS.primary_700,
+        size: "24px"
+      }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, /*#__PURE__*/React.createElement(ComponentResponsive, {
+        size: size,
+        width: width,
+        color: COLORS.primary_700
+      }, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement(HyperLink, {
+        id: `${Math.floor(Math.random() * 999999999999)}_BannerLink`,
+        href: link,
+        variant: "default"
+      }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
+        type: "neutral"
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        useTransparentBackground: true,
+        tabbedHereBackgroundColor: COLORS.white,
+        action: () => onClose()
+      }, /*#__PURE__*/React.createElement(Close, {
+        color: COLORS.primary_500,
+        size: "24px"
+      }))))));
+  }
+};
+
+Banner.propTypes = {
+  type: _pt.string,
+  link: _pt.string,
+  linkText: _pt.string,
+  hover: _pt.string,
+  bottom: _pt.bool,
+  testId: _pt.string,
+  icon: _pt.node,
+  onClose: _pt.func,
+  noIcon: _pt.bool
+};
+export default Banner;
+//# sourceMappingURL=Banner.js.map

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

@@ -0,0 +1 @@
+{"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","ButtonContainer","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';\r\nimport styled from 'styled-components';\r\n\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\r\nimport {Close, Help, TechnicalWarning, ThumbsUp, Tip} from '../icons/systemicons/SystemIcons';\r\nimport {IconButton} from '../Button';\r\nimport {getButtonStyle} from './styles';\r\nimport {Size} from '../types';\r\nimport {ComponentMStyling, ComponentResponsive} from '../styles/typography';\r\nimport {HyperLink} from '../HyperLink';\r\n\r\n/**\r\n * Styles for <Banner />\r\n */\r\nconst BannerContainer = styled.div<BannerProps>`\r\n  background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\r\n  min-height: 48px;\r\n  display: flex;\r\n  color: ${COLORS.black};\r\n  margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\r\n\r\n  button:last-child {\r\n    line-height: 0;\r\n    margin: 0 0 0 8px;\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      margin: 0 0 0 16px;\r\n    }\r\n    ${BREAKPOINTS.LARGE} {\r\n      margin: 0 0 0 32px;\r\n    }\r\n    &.small {\r\n      margin: 0 0 0 8px;\r\n    }\r\n    &.medium {\r\n      margin: 0 0 0 16px;\r\n    }\r\n    &.large {\r\n      margin: 0 0 0 32px;\r\n    }\r\n  }\r\n\r\n  a {\r\n    color: ${(props: BannerProps) => props.link} !important;\r\n  }\r\n`;\r\n\r\nconst BannerCenter = styled.div`\r\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color)}\r\n  \r\n  display: flex;\r\n  width: 100%;\r\n  margin: 0 0 0 16px;\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: 0 16px 0 32px;\r\n  }\r\n  ${BREAKPOINTS.LARGE} {\r\n    margin: 0 40px 0 56px;\r\n  }\r\n  &.small {\r\n    margin: 0 0 0 16px;\r\n  }\r\n  &.medium {\r\n    margin: 0 16px 0 32px;\r\n  }\r\n  &.large {\r\n    margin: 0 40px 0 56px;\r\n  }\r\n\r\n  > svg {\r\n    flex-shrink: 0;\r\n    margin: 12px 0;\r\n  }\r\n`;\r\n\r\nconst ButtonWrapper = styled.div`\r\n  margin: 0 0 0 auto;\r\n`;\r\n\r\nconst ButtonContainer = styled.div<{ type?: string }>`\r\n  display: contents;\r\n  ${(props) => (props.type ? getButtonStyle(props.type) : null)};\r\n`;\r\n\r\nconst BannerContentWrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin: 12px 0;\r\n  &:not(:first-child) {\r\n    margin-left: 8px;\r\n  }\r\n`;\r\n\r\ntype BannerProps = {\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  type?: string;\r\n  link?: string;\r\n  linkText?: string;\r\n  hover?: string;\r\n  bottom?: boolean;\r\n  testId?: string;\r\n  icon?: React.ReactNode;\r\n  onClose?: () => void;\r\n  noIcon?: boolean;\r\n};\r\n\r\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\r\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\r\n  React.useEffect(() => {\r\n    function handleResize() {\r\n      setWidth(window.innerWidth);\r\n    }\r\n    window.addEventListener('resize', handleResize);\r\n  });\r\n\r\n  const formatTypeToLowerCase = type?.toLowerCase();\r\n  switch (formatTypeToLowerCase) {\r\n    case 'warning':\r\n      return (\r\n        <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\r\n          <BannerCenter color={COLORS.warning_700} className={size}>\r\n            {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\r\n            <BannerContentWrapper>\r\n              <ComponentResponsive size={size} width={width} color={COLORS.warning_700}>\r\n                {children}&nbsp;&nbsp;\r\n                {link && linkText && (\r\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\r\n                    {linkText}\r\n                  </HyperLink>\r\n                )}\r\n              </ComponentResponsive>\r\n            </BannerContentWrapper>\r\n            {onClose && (\r\n              <ButtonWrapper>\r\n                <ButtonContainer type={formatTypeToLowerCase}>\r\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\r\n                    <Close color={COLORS.warning_500} size=\"24px\" />\r\n                  </IconButton>\r\n                </ButtonContainer>\r\n              </ButtonWrapper>\r\n            )}\r\n          </BannerCenter>\r\n        </BannerContainer>\r\n      );\r\n    case 'critical':\r\n      return (\r\n        <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\r\n          <BannerCenter color={COLORS.critical_700} className={size}>\r\n            {icon ? icon : noIcon ? null : <TechnicalWarning color={COLORS.critical_700} size=\"24px\" />}\r\n            <BannerContentWrapper>\r\n              <ComponentResponsive size={size} width={width} color={COLORS.critical_700}>\r\n                {children}&nbsp;&nbsp;\r\n                {link && linkText && (\r\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\r\n                    {linkText}\r\n                  </HyperLink>\r\n                )}\r\n              </ComponentResponsive>\r\n            </BannerContentWrapper>\r\n            {onClose && (\r\n              <ButtonWrapper>\r\n                <ButtonContainer type={formatTypeToLowerCase}>\r\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\r\n                    <Close color={COLORS.critical_500} size=\"24px\" />\r\n                  </IconButton>\r\n                </ButtonContainer>\r\n              </ButtonWrapper>\r\n            )}\r\n          </BannerCenter>\r\n        </BannerContainer>\r\n      );\r\n    case 'positive':\r\n      return (\r\n        <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\r\n          <BannerCenter color={COLORS.correct_700} className={size}>\r\n            {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\r\n            <BannerContentWrapper>\r\n              <ComponentResponsive size={size} width={width} color={COLORS.correct_700}>\r\n                {children}&nbsp;&nbsp;\r\n                {link && linkText && (\r\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\r\n                    {linkText}\r\n                  </HyperLink>\r\n                )}\r\n              </ComponentResponsive>\r\n            </BannerContentWrapper>\r\n            {onClose && (\r\n              <ButtonWrapper>\r\n                <ButtonContainer type={formatTypeToLowerCase}>\r\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\r\n                    <Close color={COLORS.correct_500} size=\"24px\" />\r\n                  </IconButton>\r\n                </ButtonContainer>\r\n              </ButtonWrapper>\r\n            )}\r\n          </BannerCenter>\r\n        </BannerContainer>\r\n      );\r\n    default:\r\n      return (\r\n        <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\r\n          <BannerCenter color={COLORS.primary_700} className={size}>\r\n            {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\r\n            <BannerContentWrapper>\r\n              <ComponentResponsive size={size} width={width} color={COLORS.primary_700}>\r\n                {children}&nbsp;&nbsp;\r\n                {link && linkText && (\r\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\r\n                    {linkText}\r\n                  </HyperLink>\r\n                )}\r\n              </ComponentResponsive>\r\n            </BannerContentWrapper>\r\n            {onClose && (\r\n              <ButtonWrapper>\r\n                <ButtonContainer type=\"neutral\">\r\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\r\n                    <Close color={COLORS.primary_500} size=\"24px\" />\r\n                  </IconButton>\r\n                </ButtonContainer>\r\n              </ButtonWrapper>\r\n            )}\r\n          </BannerCenter>\r\n        </BannerContainer>\r\n      );\r\n  }\r\n};\r\n\r\nexport default Banner;\r\n"],"file":"Banner.js"}

package/dist/esm/Banners/OverviewBanner.js

@@ -0,0 +1,71 @@
+import _pt from "prop-types";
+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};
+`;
+const BannerContent = styled(PageWidth)`
+  background-color: ${COLORS.primary_20};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  ${BREAKPOINTS.MEDIUM} {
+    flex-direction: row;
+    padding: 48px 12px;
+  }
+
+  & > *:first-child {
+    padding-top: 12px;
+    width: 320px;
+    height: 180px;
+    ${BREAKPOINTS.MEDIUM} {
+      padding-top: 0;
+      margin-right: 20px;
+      width: 384px;
+      height: 216px;
+    }
+  }
+  & h2 {
+    ${HeadlineXSStyling(COLORS.black)}
+    margin: 16px 0 24px 0;
+  }
+  & p {
+    margin: 0;
+    padding: 0 0 28px 0;
+    max-width: 310px;
+  }
+  & div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    margin-bottom: 18px;
+    ${BREAKPOINTS.MEDIUM} {
+      margin-left: 20px;
+      align-items: start;
+      justify-content: start;
+      width: 384px;
+    }
+  }
+`;
+
+const OverviewBanner = ({
+  children,
+  testId
+}) => {
+  return /*#__PURE__*/React.createElement(BannersWrapper, null, /*#__PURE__*/React.createElement(BannerContent, {
+    "data-testid": testId
+  }, children));
+};
+
+OverviewBanner.propTypes = {
+  children: _pt.any.isRequired,
+  testId: _pt.string
+};
+export default OverviewBanner;
+//# sourceMappingURL=OverviewBanner.js.map