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

package/dist/AuthPage/AuthPage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AuthPage.cjs","names":["AuthPage","showInformationSection","signUp","signUpPlaceholderImage","signInPlaceholderImage","signUpPlaceholderImageAlt","signInPlaceholderImageAlt","signUpInformationHeader","signInInformationHeader","signUpInformationText","signInInformationText","screenSetsContainerId","COLORS","accent1_20","primary_20"],"sources":["../../src/AuthPage/AuthPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';\n\ntype AuthPageProps = {\n  /** set this to 'false' to hide the left side illustration/information section */\n  showInformationSection: boolean;\n  /** true if 'sign-up' screen-set is showing, otherwise false.\n   * The value can be set using 'onBeforeScreenLoad' in 'gigya.accounts.showScreenSet(...)' and checking the loaded screen-set */\n  signUp: boolean;\n  /** img src string for 'sign-up' placeholder image */\n  signUpPlaceholderImage?: string;\n  /** img src string for 'sign-in' placeholder image */\n  signInPlaceholderImage?: string;\n  /** img alt text string for 'sign-up' placeholder image */\n  signUpPlaceholderImageAlt?: string;\n  /** img alt text string for 'sign-in' placeholder image */\n  signInPlaceholderImageAlt?: string;\n  /** information header text string below 'sign-up' placeholder image */\n  signUpInformationHeader?: string;\n  /** information header text string below 'sign-in' placeholder image */\n  signInInformationHeader?: string;\n  /** information text string below 'sign-up' header text */\n  signUpInformationText?: string;\n  /** information text string below 'sign-in' header text */\n  signInInformationText?: string;\n  /** ID that will be given to the SAP CDC screen-sets container (must match 'containerID' in 'gigya.accounts.showScreenSet(...)'!) */\n  screenSetsContainerId: string;\n};\n\n/**\n * The 'AuthPage' component consist of two containers: an 'Information' container on the left, and a 'ScreenSetsContainer' on the right.\n * The 'Information' container is optional and its contents depend on the context (sign-up or sign-in).\n * The 'ScreenSetsContainer' will contain the SAP CDC screen-sets.\n */\nconst AuthPage = ({\n  showInformationSection,\n  signUp,\n  signUpPlaceholderImage,\n  signInPlaceholderImage,\n  signUpPlaceholderImageAlt,\n  signInPlaceholderImageAlt,\n  signUpInformationHeader,\n  signInInformationHeader,\n  signUpInformationText,\n  signInInformationText,\n  screenSetsContainerId,\n}: AuthPageProps) => {\n  return (\n    <>\n      {showInformationSection && (\n        <InformationContainer $color={signUp ? COLORS.accent1_20 : COLORS.primary_20}>\n          <InformationContent>\n            {(signUpPlaceholderImage || signInPlaceholderImage) && (\n              <InformationImage src={signUp ? signUpPlaceholderImage : signInPlaceholderImage} alt={signUp ? signUpPlaceholderImageAlt : signInPlaceholderImageAlt} />\n            )}\n            {(signUpInformationHeader || signInInformationHeader) && <InformationHeader>{signUp ? signUpInformationHeader : signInInformationHeader}</InformationHeader>}\n            {(signUpInformationText || signInInformationText) && <InformationText>{signUp ? signUpInformationText : signInInformationText}</InformationText>}\n          </InformationContent>\n        </InformationContainer>\n      )}\n      <ScreenSetsContainer id={screenSetsContainerId} centerContents={!showInformationSection} />\n    </>\n  );\n};\n\nexport default AuthPage;\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AA4BA;AACA;AACA;AACA;AACA;AACA,IAAMA,QAAQ,GAAG,SAAXA,QAAW,OAYI;EAAA,IAXnBC,sBAWmB,QAXnBA,sBAWmB;EAAA,IAVnBC,MAUmB,QAVnBA,MAUmB;EAAA,IATnBC,sBASmB,QATnBA,sBASmB;EAAA,IARnBC,sBAQmB,QARnBA,sBAQmB;EAAA,IAPnBC,yBAOmB,QAPnBA,yBAOmB;EAAA,IANnBC,yBAMmB,QANnBA,yBAMmB;EAAA,IALnBC,uBAKmB,QALnBA,uBAKmB;EAAA,IAJnBC,uBAImB,QAJnBA,uBAImB;EAAA,IAHnBC,qBAGmB,QAHnBA,qBAGmB;EAAA,IAFnBC,qBAEmB,QAFnBA,qBAEmB;EAAA,IADnBC,qBACmB,QADnBA,qBACmB;EACnB,oBACE;IAAA,WACGV,sBAAsB,iBACrB,qBAAC,iCAAD;MAAsB,MAAM,EAAEC,MAAM,GAAGU,cAAA,CAAOC,UAAV,GAAuBD,cAAA,CAAOE,UAAlE;MAAA,uBACE,sBAAC,+BAAD;QAAA,WACG,CAACX,sBAAsB,IAAIC,sBAA3B,kBACC,qBAAC,6BAAD;UAAkB,GAAG,EAAEF,MAAM,GAAGC,sBAAH,GAA4BC,sBAAzD;UAAiF,GAAG,EAAEF,MAAM,GAAGG,yBAAH,GAA+BC;QAA3H,EAFJ,EAIG,CAACC,uBAAuB,IAAIC,uBAA5B,kBAAwD,qBAAC,8BAAD;UAAA,UAAoBN,MAAM,GAAGK,uBAAH,GAA6BC;QAAvD,EAJ3D,EAKG,CAACC,qBAAqB,IAAIC,qBAA1B,kBAAoD,qBAAC,4BAAD;UAAA,UAAkBR,MAAM,GAAGO,qBAAH,GAA2BC;QAAnD,EALvD;MAAA;IADF,EAFJ,eAYE,qBAAC,4BAAD;MAAqB,EAAE,EAAEC,qBAAzB;MAAgD,cAAc,EAAE,CAACV;IAAjE,EAZF;EAAA,EADF;AAgBD,CA7BD;;;EA7BEA,sB;EAGAC,M;EAEAC,sB;EAEAC,sB;EAEAC,yB;EAEAC,yB;EAEAC,uB;EAEAC,uB;EAEAC,qB;EAEAC,qB;EAEAC,qB;;eAuCaX,Q"}
+{"version":3,"file":"AuthPage.cjs","names":["AuthPage","showInformationSection","signUp","signUpPlaceholderImage","signInPlaceholderImage","signUpPlaceholderImageAlt","signInPlaceholderImageAlt","signUpInformationHeader","signInInformationHeader","signUpInformationText","signInInformationText","screenSetsContainerId","COLORS","accent1_20","primary_20"],"sources":["../../src/AuthPage/AuthPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';\n\ntype AuthPageProps = {\n  /** set this to 'false' to hide the left side illustration/information section */\n  showInformationSection: boolean;\n  /** true if 'sign-up' screen-set is showing, otherwise false.\n   * The value can be set using 'onBeforeScreenLoad' in 'gigya.accounts.showScreenSet(...)' and checking the loaded screen-set */\n  signUp: boolean;\n  /** img src string for 'sign-up' placeholder image */\n  signUpPlaceholderImage?: string;\n  /** img src string for 'sign-in' placeholder image */\n  signInPlaceholderImage?: string;\n  /** img alt text string for 'sign-up' placeholder image */\n  signUpPlaceholderImageAlt?: string;\n  /** img alt text string for 'sign-in' placeholder image */\n  signInPlaceholderImageAlt?: string;\n  /** information header text string below 'sign-up' placeholder image */\n  signUpInformationHeader?: string;\n  /** information header text string below 'sign-in' placeholder image */\n  signInInformationHeader?: string;\n  /** information text string below 'sign-up' header text */\n  signUpInformationText?: string;\n  /** information text string below 'sign-in' header text */\n  signInInformationText?: string;\n  /** ID that will be given to the SAP CDC screen-sets container (must match 'containerID' in 'gigya.accounts.showScreenSet(...)'!) */\n  screenSetsContainerId: string;\n};\n\n/**\n * The 'AuthPage' component consist of two containers: an 'Information' container on the left, and a 'ScreenSetsContainer' on the right.\n * The 'Information' container is optional and its contents depend on the context (sign-up or sign-in).\n * The 'ScreenSetsContainer' will contain the SAP CDC screen-sets.\n */\nconst AuthPage = ({\n  showInformationSection,\n  signUp,\n  signUpPlaceholderImage,\n  signInPlaceholderImage,\n  signUpPlaceholderImageAlt,\n  signInPlaceholderImageAlt,\n  signUpInformationHeader,\n  signInInformationHeader,\n  signUpInformationText,\n  signInInformationText,\n  screenSetsContainerId,\n}: AuthPageProps) => {\n  return (\n    <>\n      {showInformationSection && (\n        <InformationContainer $color={signUp ? COLORS.accent1_20 : COLORS.primary_20}>\n          <InformationContent>\n            {(signUpPlaceholderImage || signInPlaceholderImage) && (\n              <InformationImage src={signUp ? signUpPlaceholderImage : signInPlaceholderImage} alt={signUp ? signUpPlaceholderImageAlt : signInPlaceholderImageAlt} />\n            )}\n            {(signUpInformationHeader || signInInformationHeader) && <InformationHeader>{signUp ? signUpInformationHeader : signInInformationHeader}</InformationHeader>}\n            {(signUpInformationText || signInInformationText) && <InformationText>{signUp ? signUpInformationText : signInInformationText}</InformationText>}\n          </InformationContent>\n        </InformationContainer>\n      )}\n      <ScreenSetsContainer id={screenSetsContainerId} centerContents={!showInformationSection} />\n    </>\n  );\n};\n\nexport default AuthPage;\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AAA+H;AAAA;AAAA;AA4B/H;AACA;AACA;AACA;AACA;AACA,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,OAYO;EAAA,IAXnBC,sBAAsB,QAAtBA,sBAAsB;IACtBC,MAAM,QAANA,MAAM;IACNC,sBAAsB,QAAtBA,sBAAsB;IACtBC,sBAAsB,QAAtBA,sBAAsB;IACtBC,yBAAyB,QAAzBA,yBAAyB;IACzBC,yBAAyB,QAAzBA,yBAAyB;IACzBC,uBAAuB,QAAvBA,uBAAuB;IACvBC,uBAAuB,QAAvBA,uBAAuB;IACvBC,qBAAqB,QAArBA,qBAAqB;IACrBC,qBAAqB,QAArBA,qBAAqB;IACrBC,qBAAqB,QAArBA,qBAAqB;EAErB,oBACE;IAAA,WACGV,sBAAsB,iBACrB,qBAAC,iCAAoB;MAAC,MAAM,EAAEC,MAAM,GAAGU,cAAM,CAACC,UAAU,GAAGD,cAAM,CAACE,UAAW;MAAA,uBAC3E,sBAAC,+BAAkB;QAAA,WAChB,CAACX,sBAAsB,IAAIC,sBAAsB,kBAChD,qBAAC,6BAAgB;UAAC,GAAG,EAAEF,MAAM,GAAGC,sBAAsB,GAAGC,sBAAuB;UAAC,GAAG,EAAEF,MAAM,GAAGG,yBAAyB,GAAGC;QAA0B,EACtJ,EACA,CAACC,uBAAuB,IAAIC,uBAAuB,kBAAK,qBAAC,8BAAiB;UAAA,UAAEN,MAAM,GAAGK,uBAAuB,GAAGC;QAAuB,EAAqB,EAC3J,CAACC,qBAAqB,IAAIC,qBAAqB,kBAAK,qBAAC,4BAAe;UAAA,UAAER,MAAM,GAAGO,qBAAqB,GAAGC;QAAqB,EAAmB;MAAA;IAC7H,EAExB,eACD,qBAAC,4BAAmB;MAAC,EAAE,EAAEC,qBAAsB;MAAC,cAAc,EAAE,CAACV;IAAuB,EAAG;EAAA,EAC1F;AAEP,CAAC;AAAC;EA1DAA,sBAAsB;EAGtBC,MAAM;EAENC,sBAAsB;EAEtBC,sBAAsB;EAEtBC,yBAAyB;EAEzBC,yBAAyB;EAEzBC,uBAAuB;EAEvBC,uBAAuB;EAEvBC,qBAAqB;EAErBC,qBAAqB;EAErBC,qBAAqB;AAAA;AAAA,eAuCRX,QAAQ;AAAA"}

package/dist/AuthPage/AuthPage.js

@@ -6,7 +6,6 @@ import { InformationContainer, InformationContent, InformationHeader, Informatio
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-
 /**
  * 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).
@@ -14,16 +13,16 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
  */
 var AuthPage = function AuthPage(_ref) {
   var showInformationSection = _ref.showInformationSection,
-      signUp = _ref.signUp,
-      signUpPlaceholderImage = _ref.signUpPlaceholderImage,
-      signInPlaceholderImage = _ref.signInPlaceholderImage,
-      signUpPlaceholderImageAlt = _ref.signUpPlaceholderImageAlt,
-      signInPlaceholderImageAlt = _ref.signInPlaceholderImageAlt,
-      signUpInformationHeader = _ref.signUpInformationHeader,
-      signInInformationHeader = _ref.signInInformationHeader,
-      signUpInformationText = _ref.signUpInformationText,
-      signInInformationText = _ref.signInInformationText,
-      screenSetsContainerId = _ref.screenSetsContainerId;
+    signUp = _ref.signUp,
+    signUpPlaceholderImage = _ref.signUpPlaceholderImage,
+    signInPlaceholderImage = _ref.signInPlaceholderImage,
+    signUpPlaceholderImageAlt = _ref.signUpPlaceholderImageAlt,
+    signInPlaceholderImageAlt = _ref.signInPlaceholderImageAlt,
+    signUpInformationHeader = _ref.signUpInformationHeader,
+    signInInformationHeader = _ref.signInInformationHeader,
+    signUpInformationText = _ref.signUpInformationText,
+    signInInformationText = _ref.signInInformationText,
+    screenSetsContainerId = _ref.screenSetsContainerId;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [showInformationSection && /*#__PURE__*/_jsx(InformationContainer, {
       $color: signUp ? COLORS.accent1_20 : COLORS.primary_20,
@@ -43,7 +42,6 @@ var AuthPage = function AuthPage(_ref) {
     })]
   });
 };
-
 AuthPage.propTypes = {
   showInformationSection: _pt.bool.isRequired,
   signUp: _pt.bool.isRequired,

package/dist/AuthPage/AuthPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthPage.js","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"],"sources":["../../src/AuthPage/AuthPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';\n\ntype AuthPageProps = {\n  /** set this to 'false' to hide the left side illustration/information section */\n  showInformationSection: boolean;\n  /** true if 'sign-up' screen-set is showing, otherwise false.\n   * The value can be set using 'onBeforeScreenLoad' in 'gigya.accounts.showScreenSet(...)' and checking the loaded screen-set */\n  signUp: boolean;\n  /** img src string for 'sign-up' placeholder image */\n  signUpPlaceholderImage?: string;\n  /** img src string for 'sign-in' placeholder image */\n  signInPlaceholderImage?: string;\n  /** img alt text string for 'sign-up' placeholder image */\n  signUpPlaceholderImageAlt?: string;\n  /** img alt text string for 'sign-in' placeholder image */\n  signInPlaceholderImageAlt?: string;\n  /** information header text string below 'sign-up' placeholder image */\n  signUpInformationHeader?: string;\n  /** information header text string below 'sign-in' placeholder image */\n  signInInformationHeader?: string;\n  /** information text string below 'sign-up' header text */\n  signUpInformationText?: string;\n  /** information text string below 'sign-in' header text */\n  signInInformationText?: string;\n  /** ID that will be given to the SAP CDC screen-sets container (must match 'containerID' in 'gigya.accounts.showScreenSet(...)'!) */\n  screenSetsContainerId: string;\n};\n\n/**\n * The 'AuthPage' component consist of two containers: an 'Information' container on the left, and a 'ScreenSetsContainer' on the right.\n * The 'Information' container is optional and its contents depend on the context (sign-up or sign-in).\n * The 'ScreenSetsContainer' will contain the SAP CDC screen-sets.\n */\nconst AuthPage = ({\n  showInformationSection,\n  signUp,\n  signUpPlaceholderImage,\n  signInPlaceholderImage,\n  signUpPlaceholderImageAlt,\n  signInPlaceholderImageAlt,\n  signUpInformationHeader,\n  signInInformationHeader,\n  signUpInformationText,\n  signInInformationText,\n  screenSetsContainerId,\n}: AuthPageProps) => {\n  return (\n    <>\n      {showInformationSection && (\n        <InformationContainer $color={signUp ? COLORS.accent1_20 : COLORS.primary_20}>\n          <InformationContent>\n            {(signUpPlaceholderImage || signInPlaceholderImage) && (\n              <InformationImage src={signUp ? signUpPlaceholderImage : signInPlaceholderImage} alt={signUp ? signUpPlaceholderImageAlt : signInPlaceholderImageAlt} />\n            )}\n            {(signUpInformationHeader || signInInformationHeader) && <InformationHeader>{signUp ? signUpInformationHeader : signInInformationHeader}</InformationHeader>}\n            {(signUpInformationText || signInInformationText) && <InformationText>{signUp ? signUpInformationText : signInInformationText}</InformationText>}\n          </InformationContent>\n        </InformationContainer>\n      )}\n      <ScreenSetsContainer id={screenSetsContainerId} centerContents={!showInformationSection} />\n    </>\n  );\n};\n\nexport default AuthPage;\n"],"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,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAYI;EAAA,IAXnBC,sBAWmB,QAXnBA,sBAWmB;EAAA,IAVnBC,MAUmB,QAVnBA,MAUmB;EAAA,IATnBC,sBASmB,QATnBA,sBASmB;EAAA,IARnBC,sBAQmB,QARnBA,sBAQmB;EAAA,IAPnBC,yBAOmB,QAPnBA,yBAOmB;EAAA,IANnBC,yBAMmB,QANnBA,yBAMmB;EAAA,IALnBC,uBAKmB,QALnBA,uBAKmB;EAAA,IAJnBC,uBAImB,QAJnBA,uBAImB;EAAA,IAHnBC,qBAGmB,QAHnBA,qBAGmB;EAAA,IAFnBC,qBAEmB,QAFnBA,qBAEmB;EAAA,IADnBC,qBACmB,QADnBA,qBACmB;EACnB,oBACE;IAAA,WACGV,sBAAsB,iBACrB,KAAC,oBAAD;MAAsB,MAAM,EAAEC,MAAM,GAAGT,MAAM,CAACmB,UAAV,GAAuBnB,MAAM,CAACoB,UAAlE;MAAA,uBACE,MAAC,kBAAD;QAAA,WACG,CAACV,sBAAsB,IAAIC,sBAA3B,kBACC,KAAC,gBAAD;UAAkB,GAAG,EAAEF,MAAM,GAAGC,sBAAH,GAA4BC,sBAAzD;UAAiF,GAAG,EAAEF,MAAM,GAAGG,yBAAH,GAA+BC;QAA3H,EAFJ,EAIG,CAACC,uBAAuB,IAAIC,uBAA5B,kBAAwD,KAAC,iBAAD;UAAA,UAAoBN,MAAM,GAAGK,uBAAH,GAA6BC;QAAvD,EAJ3D,EAKG,CAACC,qBAAqB,IAAIC,qBAA1B,kBAAoD,KAAC,eAAD;UAAA,UAAkBR,MAAM,GAAGO,qBAAH,GAA2BC;QAAnD,EALvD;MAAA;IADF,EAFJ,eAYE,KAAC,mBAAD;MAAqB,EAAE,EAAEC,qBAAzB;MAAgD,cAAc,EAAE,CAACV;IAAjE,EAZF;EAAA,EADF;AAgBD,CA7BD;;;EA7BEA,sB;EAGAC,M;EAEAC,sB;EAEAC,sB;EAEAC,yB;EAEAC,yB;EAEAC,uB;EAEAC,uB;EAEAC,qB;EAEAC,qB;EAEAC,qB;;AAuCF,eAAeX,QAAf"}
+{"version":3,"file":"AuthPage.js","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"],"sources":["../../src/AuthPage/AuthPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';\n\ntype AuthPageProps = {\n  /** set this to 'false' to hide the left side illustration/information section */\n  showInformationSection: boolean;\n  /** true if 'sign-up' screen-set is showing, otherwise false.\n   * The value can be set using 'onBeforeScreenLoad' in 'gigya.accounts.showScreenSet(...)' and checking the loaded screen-set */\n  signUp: boolean;\n  /** img src string for 'sign-up' placeholder image */\n  signUpPlaceholderImage?: string;\n  /** img src string for 'sign-in' placeholder image */\n  signInPlaceholderImage?: string;\n  /** img alt text string for 'sign-up' placeholder image */\n  signUpPlaceholderImageAlt?: string;\n  /** img alt text string for 'sign-in' placeholder image */\n  signInPlaceholderImageAlt?: string;\n  /** information header text string below 'sign-up' placeholder image */\n  signUpInformationHeader?: string;\n  /** information header text string below 'sign-in' placeholder image */\n  signInInformationHeader?: string;\n  /** information text string below 'sign-up' header text */\n  signUpInformationText?: string;\n  /** information text string below 'sign-in' header text */\n  signInInformationText?: string;\n  /** ID that will be given to the SAP CDC screen-sets container (must match 'containerID' in 'gigya.accounts.showScreenSet(...)'!) */\n  screenSetsContainerId: string;\n};\n\n/**\n * The 'AuthPage' component consist of two containers: an 'Information' container on the left, and a 'ScreenSetsContainer' on the right.\n * The 'Information' container is optional and its contents depend on the context (sign-up or sign-in).\n * The 'ScreenSetsContainer' will contain the SAP CDC screen-sets.\n */\nconst AuthPage = ({\n  showInformationSection,\n  signUp,\n  signUpPlaceholderImage,\n  signInPlaceholderImage,\n  signUpPlaceholderImageAlt,\n  signInPlaceholderImageAlt,\n  signUpInformationHeader,\n  signInInformationHeader,\n  signUpInformationText,\n  signInInformationText,\n  screenSetsContainerId,\n}: AuthPageProps) => {\n  return (\n    <>\n      {showInformationSection && (\n        <InformationContainer $color={signUp ? COLORS.accent1_20 : COLORS.primary_20}>\n          <InformationContent>\n            {(signUpPlaceholderImage || signInPlaceholderImage) && (\n              <InformationImage src={signUp ? signUpPlaceholderImage : signInPlaceholderImage} alt={signUp ? signUpPlaceholderImageAlt : signInPlaceholderImageAlt} />\n            )}\n            {(signUpInformationHeader || signInInformationHeader) && <InformationHeader>{signUp ? signUpInformationHeader : signInInformationHeader}</InformationHeader>}\n            {(signUpInformationText || signInInformationText) && <InformationText>{signUp ? signUpInformationText : signInInformationText}</InformationText>}\n          </InformationContent>\n        </InformationContainer>\n      )}\n      <ScreenSetsContainer id={screenSetsContainerId} centerContents={!showInformationSection} />\n    </>\n  );\n};\n\nexport default AuthPage;\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,QAAQ,WAAW;AAClC,OAAOC,mBAAmB,MAAM,uBAAuB;AACvD,SAASC,oBAAoB,EAAEC,kBAAkB,EAAEC,iBAAiB,EAAEC,eAAe,EAAEC,gBAAgB,QAAQ,eAAe;AAAC;AAAA;AAAA;AA4B/H;AACA;AACA;AACA;AACA;AACA,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAYO;EAAA,IAXnBC,sBAAsB,QAAtBA,sBAAsB;IACtBC,MAAM,QAANA,MAAM;IACNC,sBAAsB,QAAtBA,sBAAsB;IACtBC,sBAAsB,QAAtBA,sBAAsB;IACtBC,yBAAyB,QAAzBA,yBAAyB;IACzBC,yBAAyB,QAAzBA,yBAAyB;IACzBC,uBAAuB,QAAvBA,uBAAuB;IACvBC,uBAAuB,QAAvBA,uBAAuB;IACvBC,qBAAqB,QAArBA,qBAAqB;IACrBC,qBAAqB,QAArBA,qBAAqB;IACrBC,qBAAqB,QAArBA,qBAAqB;EAErB,oBACE;IAAA,WACGV,sBAAsB,iBACrB,KAAC,oBAAoB;MAAC,MAAM,EAAEC,MAAM,GAAGT,MAAM,CAACmB,UAAU,GAAGnB,MAAM,CAACoB,UAAW;MAAA,uBAC3E,MAAC,kBAAkB;QAAA,WAChB,CAACV,sBAAsB,IAAIC,sBAAsB,kBAChD,KAAC,gBAAgB;UAAC,GAAG,EAAEF,MAAM,GAAGC,sBAAsB,GAAGC,sBAAuB;UAAC,GAAG,EAAEF,MAAM,GAAGG,yBAAyB,GAAGC;QAA0B,EACtJ,EACA,CAACC,uBAAuB,IAAIC,uBAAuB,kBAAK,KAAC,iBAAiB;UAAA,UAAEN,MAAM,GAAGK,uBAAuB,GAAGC;QAAuB,EAAqB,EAC3J,CAACC,qBAAqB,IAAIC,qBAAqB,kBAAK,KAAC,eAAe;UAAA,UAAER,MAAM,GAAGO,qBAAqB,GAAGC;QAAqB,EAAmB;MAAA;IAC7H,EAExB,eACD,KAAC,mBAAmB;MAAC,EAAE,EAAEC,qBAAsB;MAAC,cAAc,EAAE,CAACV;IAAuB,EAAG;EAAA,EAC1F;AAEP,CAAC;AAAC;EA1DAA,sBAAsB;EAGtBC,MAAM;EAENC,sBAAsB;EAEtBC,sBAAsB;EAEtBC,yBAAyB;EAEzBC,yBAAyB;EAEzBC,uBAAuB;EAEvBC,uBAAuB;EAEvBC,qBAAqB;EAErBC,qBAAqB;EAErBC,qBAAqB;AAAA;AAuCvB,eAAeX,QAAQ"}

package/dist/AuthPage/Information.cjs

@@ -1,42 +1,26 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InformationText = exports.InformationImage = exports.InformationHeader = exports.InformationContent = exports.InformationContainer = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _AuthPageSection = _interopRequireDefault(require("./_AuthPageSection"));
-
 var _styles = require("../styles");
-
 var _typography = require("../styles/typography");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 var InformationContainer = (0, _styledComponents.default)(_AuthPageSection.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  background: ", ";\n\n  ", " {\n    display: flex;\n    padding-top: 56px;\n  }\n"])), function (props) {
   return props.$color;
 }, _styles.BREAKPOINTS.MEDIUM);
 exports.InformationContainer = InformationContainer;
-
 var InformationContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  align-self: center;\n  align-items: center;\n  text-align: center;\n  max-width: 100%;\n\n  ", " {\n    align-self: flex-end;\n    margin-right: 48px;\n  }\n"])), _styles.BREAKPOINTS.LARGE);
-
 exports.InformationContent = InformationContent;
-
 var InformationHeader = _styledComponents.default.h2(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  font-weight: 300;\n  margin-bottom: 0;\n"])), (0, _typography.HeadlineXLStyling)(_styles.COLORS.black));
-
 exports.InformationHeader = InformationHeader;
-
 var InformationText = _styledComponents.default.p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  margin: 8px 0;\n"])), (0, _typography.ParagraphLStyling)(_styles.ParagraphTextStyle.Regular, _styles.COLORS.neutral_600));
-
 exports.InformationText = InformationText;
-
 var InformationImage = _styledComponents.default.img(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  height: 275px;\n  max-width: 100%;\n"])));
-
 exports.InformationImage = InformationImage;
 //# sourceMappingURL=Information.cjs.map

package/dist/AuthPage/Information.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Information.cjs","names":["InformationContainer","styled","AuthPageSection","props","$color","BREAKPOINTS","MEDIUM","InformationContent","div","LARGE","InformationHeader","h2","HeadlineXLStyling","COLORS","black","InformationText","p","ParagraphLStyling","ParagraphTextStyle","Regular","neutral_600","InformationImage","img"],"sources":["../../src/AuthPage/Information.tsx"],"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"],"mappings":";;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;;;AAEO,IAAMA,oBAAoB,GAAG,IAAAC,yBAAA,EAAOC,wBAAP,CAAH,0LAEjB,UAACC,KAAD;EAAA,OAAWA,KAAK,CAACC,MAAjB;AAAA,CAFiB,EAI7BC,mBAAA,CAAYC,MAJiB,CAA1B;;;AAUA,IAAMC,kBAAkB,GAAGN,yBAAA,CAAOO,GAAV,oSAQ3BH,mBAAA,CAAYI,KARe,CAAxB;;;;AAcA,IAAMC,iBAAiB,GAAGT,yBAAA,CAAOU,EAAV,0IAC1B,IAAAC,6BAAA,EAAkBC,cAAA,CAAOC,KAAzB,CAD0B,CAAvB;;;;AAMA,IAAMC,eAAe,GAAGd,yBAAA,CAAOe,CAAV,kHACxB,IAAAC,6BAAA,EAAkBC,0BAAA,CAAmBC,OAArC,EAA8CN,cAAA,CAAOO,WAArD,CADwB,CAArB;;;;AAKA,IAAMC,gBAAgB,GAAGpB,yBAAA,CAAOqB,GAAV,6HAAtB"}
+{"version":3,"file":"Information.cjs","names":["InformationContainer","styled","AuthPageSection","props","$color","BREAKPOINTS","MEDIUM","InformationContent","div","LARGE","InformationHeader","h2","HeadlineXLStyling","COLORS","black","InformationText","p","ParagraphLStyling","ParagraphTextStyle","Regular","neutral_600","InformationImage","img"],"sources":["../../src/AuthPage/Information.tsx"],"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"],"mappings":";;;;;;;;AACA;AACA;AACA;AACA;AAA+F;AAExF,IAAMA,oBAAoB,GAAG,IAAAC,yBAAM,EAACC,wBAAe,CAAC,0LAE3C,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM;AAAA,GAEnCC,mBAAW,CAACC,MAAM,CAIrB;AAAC;AAEK,IAAMC,kBAAkB,GAAGN,yBAAM,CAACO,GAAG,oSAQxCH,mBAAW,CAACI,KAAK,CAIpB;AAAC;AAEK,IAAMC,iBAAiB,GAAGT,yBAAM,CAACU,EAAE,0IACtC,IAAAC,6BAAiB,EAACC,cAAM,CAACC,KAAK,CAAC,CAGlC;AAAC;AAEK,IAAMC,eAAe,GAAGd,yBAAM,CAACe,CAAC,kHACnC,IAAAC,6BAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEN,cAAM,CAACO,WAAW,CAAC,CAEpE;AAAC;AAEK,IAAMC,gBAAgB,GAAGpB,yBAAM,CAACqB,GAAG,6HAGzC;AAAC"}

package/dist/AuthPage/Information.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 import styled from 'styled-components';
 import AuthPageSection from './_AuthPageSection';
 import { BREAKPOINTS, COLORS, ParagraphTextStyle } from '../styles';

package/dist/AuthPage/Information.js.map

@@ -1 +1 @@
-{"version":3,"file":"Information.js","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"],"sources":["../../src/AuthPage/Information.tsx"],"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"],"mappings":";;;;AACA,OAAOA,MAAP,MAAmB,mBAAnB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,SAASC,WAAT,EAAsBC,MAAtB,EAA8DC,kBAA9D,QAAwF,WAAxF;AACA,SAA4BC,iBAA5B,EAA+CC,iBAA/C,QAAwE,sBAAxE;AAEA,OAAO,IAAMC,oBAAoB,GAAGP,MAAM,CAACC,eAAD,CAAT,4KAEjB,UAACO,KAAD;EAAA,OAAWA,KAAK,CAACC,MAAjB;AAAA,CAFiB,EAI7BP,WAAW,CAACQ,MAJiB,CAA1B;AAUP,OAAO,IAAMC,kBAAkB,GAAGX,MAAM,CAACY,GAAV,sRAQ3BV,WAAW,CAACW,KARe,CAAxB;AAcP,OAAO,IAAMC,iBAAiB,GAAGd,MAAM,CAACe,EAAV,4HAC1BV,iBAAiB,CAACF,MAAM,CAACa,KAAR,CADS,CAAvB;AAMP,OAAO,IAAMC,eAAe,GAAGjB,MAAM,CAACkB,CAAV,oGACxBZ,iBAAiB,CAACF,kBAAkB,CAACe,OAApB,EAA6BhB,MAAM,CAACiB,WAApC,CADO,CAArB;AAKP,OAAO,IAAMC,gBAAgB,GAAGrB,MAAM,CAACsB,GAAV,+GAAtB"}
+{"version":3,"file":"Information.js","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"],"sources":["../../src/AuthPage/Information.tsx"],"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"],"mappings":";;AACA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,OAAOC,eAAe,MAAM,oBAAoB;AAChD,SAASC,WAAW,EAAEC,MAAM,EAAkCC,kBAAkB,QAAQ,WAAW;AACnG,SAA4BC,iBAAiB,EAAEC,iBAAiB,QAAQ,sBAAsB;AAE9F,OAAO,IAAMC,oBAAoB,GAAGP,MAAM,CAACC,eAAe,CAAC,4KAE3C,UAACO,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM;AAAA,GAEnCP,WAAW,CAACQ,MAAM,CAIrB;AAED,OAAO,IAAMC,kBAAkB,GAAGX,MAAM,CAACY,GAAG,sRAQxCV,WAAW,CAACW,KAAK,CAIpB;AAED,OAAO,IAAMC,iBAAiB,GAAGd,MAAM,CAACe,EAAE,4HACtCV,iBAAiB,CAACF,MAAM,CAACa,KAAK,CAAC,CAGlC;AAED,OAAO,IAAMC,eAAe,GAAGjB,MAAM,CAACkB,CAAC,oGACnCZ,iBAAiB,CAACF,kBAAkB,CAACe,OAAO,EAAEhB,MAAM,CAACiB,WAAW,CAAC,CAEpE;AAED,OAAO,IAAMC,gBAAgB,GAAGrB,MAAM,CAACsB,GAAG,+GAGzC"}

package/dist/AuthPage/ScreenSetsContainer.cjs

@@ -1,22 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _AuthPageSection = _interopRequireDefault(require("./_AuthPageSection"));
-
 var _styles = require("../styles");
-
 var _templateObject;
-
 var ScreenSetsContainer = (0, _styledComponents.default)(_AuthPageSection.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px;\n  width: calc(100% - 16px);\n  align-items: ", ";\n\n  .gigya-screen-caption {\n    display: none;\n  }\n\n  .gigya-screen {\n    max-width: 100%;\n    margin: auto;\n  }\n\n  ", " {\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ", " {\n    .gigya-screen {\n      max-width: 500px;\n    }\n  }\n"])), function (props) {
   return props.centerContents ? 'center' : 'unset';
 }, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.XLARGE);

package/dist/AuthPage/ScreenSetsContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenSetsContainer.cjs","names":["ScreenSetsContainer","styled","AuthPageSection","props","centerContents","BREAKPOINTS","MEDIUM","XLARGE"],"sources":["../../src/AuthPage/ScreenSetsContainer.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport { BREAKPOINTS } from '../styles';\n\nconst ScreenSetsContainer = styled(AuthPageSection)<{ centerContents: boolean }>`\n  padding: 8px;\n  width: calc(100% - 16px);\n  align-items: ${props => (props.centerContents ? 'center' : 'unset')};\n\n  .gigya-screen-caption {\n    display: none;\n  }\n\n  .gigya-screen {\n    max-width: 100%;\n    margin: auto;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    .gigya-screen {\n      max-width: 500px;\n    }\n  }\n`;\n\nexport default ScreenSetsContainer;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAEA,IAAMA,mBAAmB,GAAG,IAAAC,yBAAA,EAAOC,wBAAP,CAAH,8bAGR,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,cAAN,GAAuB,QAAvB,GAAkC,OAAvC;AAAA,CAHG,EAcrBC,mBAAA,CAAYC,MAdS,EAqBrBD,mBAAA,CAAYE,MArBS,CAAzB;eA4BeP,mB"}
+{"version":3,"file":"ScreenSetsContainer.cjs","names":["ScreenSetsContainer","styled","AuthPageSection","props","centerContents","BREAKPOINTS","MEDIUM","XLARGE"],"sources":["../../src/AuthPage/ScreenSetsContainer.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport { BREAKPOINTS } from '../styles';\n\nconst ScreenSetsContainer = styled(AuthPageSection)<{ centerContents: boolean }>`\n  padding: 8px;\n  width: calc(100% - 16px);\n  align-items: ${props => (props.centerContents ? 'center' : 'unset')};\n\n  .gigya-screen-caption {\n    display: none;\n  }\n\n  .gigya-screen {\n    max-width: 100%;\n    margin: auto;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    .gigya-screen {\n      max-width: 500px;\n    }\n  }\n`;\n\nexport default ScreenSetsContainer;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AAAwC;AAExC,IAAMA,mBAAmB,GAAG,IAAAC,yBAAM,EAACC,wBAAe,CAAC,8bAGlC,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,cAAc,GAAG,QAAQ,GAAG,OAAO;AAAA,CAAC,EAWjEC,mBAAW,CAACC,MAAM,EAOlBD,mBAAW,CAACE,MAAM,CAKrB;AAAC,eAEaP,mBAAmB;AAAA"}

package/dist/AuthPage/ScreenSetsContainer.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-
 var _templateObject;
-
 import styled from 'styled-components';
 import AuthPageSection from './_AuthPageSection';
 import { BREAKPOINTS } from '../styles';

package/dist/AuthPage/ScreenSetsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenSetsContainer.js","names":["styled","AuthPageSection","BREAKPOINTS","ScreenSetsContainer","props","centerContents","MEDIUM","XLARGE"],"sources":["../../src/AuthPage/ScreenSetsContainer.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport { BREAKPOINTS } from '../styles';\n\nconst ScreenSetsContainer = styled(AuthPageSection)<{ centerContents: boolean }>`\n  padding: 8px;\n  width: calc(100% - 16px);\n  align-items: ${props => (props.centerContents ? 'center' : 'unset')};\n\n  .gigya-screen-caption {\n    display: none;\n  }\n\n  .gigya-screen {\n    max-width: 100%;\n    margin: auto;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    .gigya-screen {\n      max-width: 500px;\n    }\n  }\n`;\n\nexport default ScreenSetsContainer;\n"],"mappings":";;;;AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,SAASC,WAAT,QAA4B,WAA5B;AAEA,IAAMC,mBAAmB,GAAGH,MAAM,CAACC,eAAD,CAAT,gbAGR,UAAAG,KAAK;EAAA,OAAKA,KAAK,CAACC,cAAN,GAAuB,QAAvB,GAAkC,OAAvC;AAAA,CAHG,EAcrBH,WAAW,CAACI,MAdS,EAqBrBJ,WAAW,CAACK,MArBS,CAAzB;AA4BA,eAAeJ,mBAAf"}
+{"version":3,"file":"ScreenSetsContainer.js","names":["styled","AuthPageSection","BREAKPOINTS","ScreenSetsContainer","props","centerContents","MEDIUM","XLARGE"],"sources":["../../src/AuthPage/ScreenSetsContainer.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport { BREAKPOINTS } from '../styles';\n\nconst ScreenSetsContainer = styled(AuthPageSection)<{ centerContents: boolean }>`\n  padding: 8px;\n  width: calc(100% - 16px);\n  align-items: ${props => (props.centerContents ? 'center' : 'unset')};\n\n  .gigya-screen-caption {\n    display: none;\n  }\n\n  .gigya-screen {\n    max-width: 100%;\n    margin: auto;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    .gigya-screen {\n      max-width: 500px;\n    }\n  }\n`;\n\nexport default ScreenSetsContainer;\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,OAAOC,eAAe,MAAM,oBAAoB;AAChD,SAASC,WAAW,QAAQ,WAAW;AAEvC,IAAMC,mBAAmB,GAAGH,MAAM,CAACC,eAAe,CAAC,gbAGlC,UAAAG,KAAK;EAAA,OAAKA,KAAK,CAACC,cAAc,GAAG,QAAQ,GAAG,OAAO;AAAA,CAAC,EAWjEH,WAAW,CAACI,MAAM,EAOlBJ,WAAW,CAACK,MAAM,CAKrB;AAED,eAAeJ,mBAAmB"}

package/dist/AuthPage/_AuthPageSection.cjs

@@ -1,22 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _styles = require("../styles");
-
 var _templateObject;
-
 var AuthPageSection = _styledComponents.default.section(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  ", " {\n    padding: 24px;\n    width: calc(50% - 48px);\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
-
 var _default = AuthPageSection;
 exports.default = _default;
 //# sourceMappingURL=_AuthPageSection.cjs.map

package/dist/AuthPage/_AuthPageSection.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"_AuthPageSection.cjs","names":["AuthPageSection","styled","section","BREAKPOINTS","MEDIUM"],"sources":["../../src/AuthPage/_AuthPageSection.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\n\nconst AuthPageSection = styled.section`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  ${BREAKPOINTS.MEDIUM} {\n    padding: 24px;\n    width: calc(50% - 48px);\n  }\n`;\n\nexport default AuthPageSection;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAEA,IAAMA,eAAe,GAAGC,yBAAA,CAAOC,OAAV,kNAKjBC,mBAAA,CAAYC,MALK,CAArB;;eAWeJ,e"}
+{"version":3,"file":"_AuthPageSection.cjs","names":["AuthPageSection","styled","section","BREAKPOINTS","MEDIUM"],"sources":["../../src/AuthPage/_AuthPageSection.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\n\nconst AuthPageSection = styled.section`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  ${BREAKPOINTS.MEDIUM} {\n    padding: 24px;\n    width: calc(50% - 48px);\n  }\n`;\n\nexport default AuthPageSection;\n"],"mappings":";;;;;;;;AAAA;AACA;AAAwC;AAExC,IAAMA,eAAe,GAAGC,yBAAM,CAACC,OAAO,kNAKlCC,mBAAW,CAACC,MAAM,CAIrB;AAAC,eAEaJ,eAAe;AAAA"}

package/dist/AuthPage/_AuthPageSection.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-
 var _templateObject;
-
 import styled from 'styled-components';
 import { BREAKPOINTS } from '../styles';
 var AuthPageSection = styled.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  ", " {\n    padding: 24px;\n    width: calc(50% - 48px);\n  }\n"])), BREAKPOINTS.MEDIUM);

package/dist/AuthPage/_AuthPageSection.js.map

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

package/dist/AuthPage/index.cjs

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -53,12 +52,8 @@ Object.defineProperty(exports, "screenSetsErrorMessages_EN", {
     return _screenSetsErrorMessages.screenSetsErrorMessages_EN;
   }
 });
-
 var _ScreenSetsContainer = _interopRequireDefault(require("./ScreenSetsContainer"));
-
 var _Information = require("./Information");
-
 var _AuthPage = _interopRequireDefault(require("./AuthPage"));
-
 var _screenSetsErrorMessages = require("./screenSetsErrorMessages");
 //# sourceMappingURL=index.cjs.map

package/dist/AuthPage/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/AuthPage/index.ts"],"sourcesContent":["import ScreenSetsContainer from './ScreenSetsContainer';\nimport { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';\nimport AuthPage from './AuthPage';\nimport { screenSetsErrorMessages_EN } from './screenSetsErrorMessages';\n\nexport { ScreenSetsContainer, InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage, AuthPage, screenSetsErrorMessages_EN };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/AuthPage/index.ts"],"sourcesContent":["import ScreenSetsContainer from './ScreenSetsContainer';\nimport { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';\nimport AuthPage from './AuthPage';\nimport { screenSetsErrorMessages_EN } from './screenSetsErrorMessages';\n\nexport { ScreenSetsContainer, InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage, AuthPage, screenSetsErrorMessages_EN };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA"}

package/dist/AuthPage/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ScreenSetsContainer","InformationContainer","InformationContent","InformationHeader","InformationText","InformationImage","AuthPage","screenSetsErrorMessages_EN"],"sources":["../../src/AuthPage/index.ts"],"sourcesContent":["import ScreenSetsContainer from './ScreenSetsContainer';\nimport { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';\nimport AuthPage from './AuthPage';\nimport { screenSetsErrorMessages_EN } from './screenSetsErrorMessages';\n\nexport { ScreenSetsContainer, InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage, AuthPage, screenSetsErrorMessages_EN };\n"],"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"}
+{"version":3,"file":"index.js","names":["ScreenSetsContainer","InformationContainer","InformationContent","InformationHeader","InformationText","InformationImage","AuthPage","screenSetsErrorMessages_EN"],"sources":["../../src/AuthPage/index.ts"],"sourcesContent":["import ScreenSetsContainer from './ScreenSetsContainer';\nimport { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';\nimport AuthPage from './AuthPage';\nimport { screenSetsErrorMessages_EN } from './screenSetsErrorMessages';\n\nexport { ScreenSetsContainer, InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage, AuthPage, screenSetsErrorMessages_EN };\n"],"mappings":"AAAA,OAAOA,mBAAmB,MAAM,uBAAuB;AACvD,SAASC,oBAAoB,EAAEC,kBAAkB,EAAEC,iBAAiB,EAAEC,eAAe,EAAEC,gBAAgB,QAAQ,eAAe;AAC9H,OAAOC,QAAQ,MAAM,YAAY;AACjC,SAASC,0BAA0B,QAAQ,2BAA2B;AAEtE,SAASP,mBAAmB,EAAEC,oBAAoB,EAAEC,kBAAkB,EAAEC,iBAAiB,EAAEC,eAAe,EAAEC,gBAAgB,EAAEC,QAAQ,EAAEC,0BAA0B"}

package/dist/AuthPage/screenSetsErrorMessages.cjs.map

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

package/dist/AuthPage/screenSetsErrorMessages.js.map

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

package/dist/Banners/Banner.cjs

@@ -1,56 +1,32 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _styles = require("../styles");
-
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
-
 var _Button = require("../Button");
-
 var _styles2 = require("./styles");
-
 var _HyperLink = require("../HyperLink");
-
 var _HyperLink2 = require("../HyperLink/HyperLink");
-
 var _utils = require("../utils/utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _excluded = ["size", "type", "children", "bottom", "testId", "linkText", "link", "onClose", "icon", "noIcon", "linkAction", "fullWidth", "className"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var BannerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link {\n      color: ", ";\n    }\n    &:visited {\n      color: ", ";\n    }\n    &:focus,\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n"])), function (props) {
   return props.$type ? props.$type : _styles.COLORS.correct_100;
 }, _styles.COLORS.black, function (props) {
@@ -62,44 +38,36 @@ var BannerContainer = _styledComponents.default.div(_templateObject || (_templat
 }, function (props) {
   return props.linkFocused;
 }, _styles.COLORS.white);
-
 var BannerCenter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ", " {\n    margin: 0 32px;\n  }\n  ", " {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n\n  .full-width-banner & {\n    margin: 0 16px;\n\n    ", " {\n      margin: 0 24px;\n    }\n    ", " {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 24px;\n    }\n\n    &.large {\n      margin: 0 48px;\n    }\n  }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
-
 var ButtonWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 0 0 auto;\n"])));
-
 var ButtonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: contents;\n  ", ";\n"])), function (props) {
   return props.$type ? (0, _styles2.getButtonStyle)(props.$type) : null;
 });
-
 var BannerContentWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n"])));
-
 var Banner = function Banner(_ref) {
   var size = _ref.size,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'neutral' : _ref$type,
-      children = _ref.children,
-      bottom = _ref.bottom,
-      testId = _ref.testId,
-      linkText = _ref.linkText,
-      link = _ref.link,
-      onClose = _ref.onClose,
-      icon = _ref.icon,
-      noIcon = _ref.noIcon,
-      linkAction = _ref.linkAction,
-      fullWidth = _ref.fullWidth,
-      className = _ref.className,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'neutral' : _ref$type,
+    children = _ref.children,
+    bottom = _ref.bottom,
+    testId = _ref.testId,
+    linkText = _ref.linkText,
+    link = _ref.link,
+    onClose = _ref.onClose,
+    icon = _ref.icon,
+    noIcon = _ref.noIcon,
+    linkAction = _ref.linkAction,
+    fullWidth = _ref.fullWidth,
+    className = _ref.className,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _React$useState = React.useState((0, _utils.hasWindow)() ? window.innerWidth : -1),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      width = _React$useState2[0],
-      setWidth = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    width = _React$useState2[0],
+    setWidth = _React$useState2[1];
   React.useEffect(function () {
     function handleResize() {
       setWidth(window.innerWidth);
     }
-
     window.addEventListener('resize', handleResize);
     return function () {
       return window.removeEventListener('resize', handleResize);
@@ -116,7 +84,6 @@ var Banner = function Banner(_ref) {
     linkVisited: _styles.COLORS.primary_600,
     linkFocused: _styles.COLORS.primary_800
   };
-
   switch (type) {
     case 'warning':
       bannerParams.typeColor = _styles.COLORS.warning_100;
@@ -128,7 +95,6 @@ var Banner = function Banner(_ref) {
       bannerParams.linkVisited = _styles.COLORS.warning_800;
       bannerParams.linkFocused = _styles.COLORS.warning_800;
       break;
-
     case 'critical':
       bannerParams.typeColor = _styles.COLORS.critical_100;
       bannerParams.accentColor = _styles.COLORS.critical_700;
@@ -139,7 +105,6 @@ var Banner = function Banner(_ref) {
       bannerParams.linkVisited = _styles.COLORS.critical_800;
       bannerParams.linkFocused = _styles.COLORS.critical_800;
       break;
-
     case 'positive':
       bannerParams.typeColor = _styles.COLORS.correct_100;
       bannerParams.accentColor = _styles.COLORS.correct_700;
@@ -151,7 +116,6 @@ var Banner = function Banner(_ref) {
       bannerParams.linkFocused = _styles.COLORS.correct_800;
       break;
   }
-
   var cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(fullWidth ? 'full-width-banner' : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContainer, _objectSpread(_objectSpread({
     "data-testid": testId,
@@ -211,7 +175,6 @@ var Banner = function Banner(_ref) {
     })
   }));
 };
-
 Banner.propTypes = {
   type: _propTypes.default.oneOf(['warning', 'critical', 'positive', 'neutral']),
   link: _propTypes.default.string,

package/dist/Banners/Banner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.cjs","names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentMStyling","ComponentTextStyle","Regular","ButtonWrapper","ButtonContainer","getButtonStyle","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","React","useState","hasWindow","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"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 { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink/HyperLink';\nimport { hasWindow } from '../utils/utils';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n  background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n  border-radius: 4px;\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  ${StyledLink} {\n    &:link {\n      color: ${(props) => props.link};\n    }\n    &:visited {\n      color: ${(props) => props.linkVisited};\n    }\n    &:focus,\n    &:active {\n      background-color: ${(props) => props.linkFocused};\n      color: ${COLORS.white};\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n\n  .full-width-banner & {\n    margin: 0 16px;\n\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 24px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 24px;\n    }\n\n    &.large {\n      margin: 0 48px;\n    }\n  }\n`;\n\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n  display: contents;\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 = React.HTMLAttributes<HTMLDivElement> & {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\n  link?: string;\n  linkText?: string;\n  linkAction?: (ev: React.MouseEvent) => void;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n  fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n  size,\n  type = 'neutral',\n  children,\n  bottom,\n  testId,\n  linkText,\n  link,\n  onClose,\n  icon,\n  noIcon,\n  linkAction,\n  fullWidth,\n  className,\n  ...rest\n}) => {\n  const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  let bannerParams = {\n    typeColor: COLORS.primary_100,\n    accentColor: COLORS.primary_700,\n    hoverColor: COLORS.primary_20,\n    closeIconColor: COLORS.primary_500,\n    icon: Tip,\n    containerType: type,\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800,\n  };\n  switch (type) {\n    case 'warning':\n      bannerParams.typeColor = COLORS.warning_100;\n      bannerParams.accentColor = COLORS.warning_700;\n      bannerParams.focusBgColor = COLORS.warning_200;\n      bannerParams.hoverColor = COLORS.warning_20;\n      bannerParams.icon = Help;\n      bannerParams.closeIconColor = COLORS.warning_500;\n      bannerParams.linkVisited = COLORS.warning_800;\n      bannerParams.linkFocused = COLORS.warning_800;\n      break;\n    case 'critical':\n      bannerParams.typeColor = COLORS.critical_100;\n      bannerParams.accentColor = COLORS.critical_700;\n      bannerParams.focusBgColor = COLORS.critical_200;\n      bannerParams.hoverColor = COLORS.critical_20;\n      bannerParams.icon = TechnicalWarning;\n      bannerParams.closeIconColor = COLORS.critical_500;\n      bannerParams.linkVisited = COLORS.critical_800;\n      bannerParams.linkFocused = COLORS.critical_800;\n      break;\n    case 'positive':\n      bannerParams.typeColor = COLORS.correct_100;\n      bannerParams.accentColor = COLORS.correct_700;\n      bannerParams.focusBgColor = COLORS.correct_200;\n      bannerParams.hoverColor = COLORS.correct_20;\n      bannerParams.icon = ThumbsUp;\n      bannerParams.closeIconColor = COLORS.correct_500;\n      bannerParams.linkVisited = COLORS.correct_800;\n      bannerParams.linkFocused = COLORS.correct_800;\n      break;\n  }\n\n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n  return (\n    <BannerContainer\n      data-testid={testId}\n      $type={bannerParams.typeColor}\n      linkFocused={bannerParams.linkFocused}\n      linkVisited={bannerParams.linkVisited}\n      link={bannerParams.accentColor}\n      hover={bannerParams.hoverColor}\n      bottom={bottom}\n      className={cls}\n      role=\"note\"\n      {...rest}>\n      <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n        <BannerContentWrapper>\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n            {children}&nbsp;\n            {link && linkText && (\n              <HyperLink\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n                onClick={(e) => {\n                  if (linkAction) {\n                    e.preventDefault();\n                    linkAction(e);\n                  }\n                }}\n                href={link}\n                variant=\"default\">\n                {linkText}\n              </HyperLink>\n            )}\n          </ComponentResponsive>\n        </BannerContentWrapper>\n        {onClose && (\n          <ButtonWrapper>\n            <ButtonContainer $type={bannerParams.containerType}>\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n                <Close color={bannerParams.closeIconColor} size=\"24px\" />\n              </IconButton>\n            </ButtonContainer>\n          </ButtonWrapper>\n        )}\n      </BannerCenter>\n    </BannerContainer>\n  );\n};\n\nexport default Banner;\n"],"mappings":"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"}
+{"version":3,"file":"Banner.cjs","names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentMStyling","ComponentTextStyle","Regular","ButtonWrapper","ButtonContainer","getButtonStyle","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","React","useState","hasWindow","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"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 { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink/HyperLink';\nimport { hasWindow } from '../utils/utils';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n  background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n  border-radius: 4px;\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  ${StyledLink} {\n    &:link {\n      color: ${(props) => props.link};\n    }\n    &:visited {\n      color: ${(props) => props.linkVisited};\n    }\n    &:focus,\n    &:active {\n      background-color: ${(props) => props.linkFocused};\n      color: ${COLORS.white};\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n\n  .full-width-banner & {\n    margin: 0 16px;\n\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 24px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 24px;\n    }\n\n    &.large {\n      margin: 0 48px;\n    }\n  }\n`;\n\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n  display: contents;\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 = React.HTMLAttributes<HTMLDivElement> & {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\n  link?: string;\n  linkText?: string;\n  linkAction?: (ev: React.MouseEvent) => void;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n  fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n  size,\n  type = 'neutral',\n  children,\n  bottom,\n  testId,\n  linkText,\n  link,\n  onClose,\n  icon,\n  noIcon,\n  linkAction,\n  fullWidth,\n  className,\n  ...rest\n}) => {\n  const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  let bannerParams = {\n    typeColor: COLORS.primary_100,\n    accentColor: COLORS.primary_700,\n    hoverColor: COLORS.primary_20,\n    closeIconColor: COLORS.primary_500,\n    icon: Tip,\n    containerType: type,\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800,\n  };\n  switch (type) {\n    case 'warning':\n      bannerParams.typeColor = COLORS.warning_100;\n      bannerParams.accentColor = COLORS.warning_700;\n      bannerParams.focusBgColor = COLORS.warning_200;\n      bannerParams.hoverColor = COLORS.warning_20;\n      bannerParams.icon = Help;\n      bannerParams.closeIconColor = COLORS.warning_500;\n      bannerParams.linkVisited = COLORS.warning_800;\n      bannerParams.linkFocused = COLORS.warning_800;\n      break;\n    case 'critical':\n      bannerParams.typeColor = COLORS.critical_100;\n      bannerParams.accentColor = COLORS.critical_700;\n      bannerParams.focusBgColor = COLORS.critical_200;\n      bannerParams.hoverColor = COLORS.critical_20;\n      bannerParams.icon = TechnicalWarning;\n      bannerParams.closeIconColor = COLORS.critical_500;\n      bannerParams.linkVisited = COLORS.critical_800;\n      bannerParams.linkFocused = COLORS.critical_800;\n      break;\n    case 'positive':\n      bannerParams.typeColor = COLORS.correct_100;\n      bannerParams.accentColor = COLORS.correct_700;\n      bannerParams.focusBgColor = COLORS.correct_200;\n      bannerParams.hoverColor = COLORS.correct_20;\n      bannerParams.icon = ThumbsUp;\n      bannerParams.closeIconColor = COLORS.correct_500;\n      bannerParams.linkVisited = COLORS.correct_800;\n      bannerParams.linkFocused = COLORS.correct_800;\n      break;\n  }\n\n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n  return (\n    <BannerContainer\n      data-testid={testId}\n      $type={bannerParams.typeColor}\n      linkFocused={bannerParams.linkFocused}\n      linkVisited={bannerParams.linkVisited}\n      link={bannerParams.accentColor}\n      hover={bannerParams.hoverColor}\n      bottom={bottom}\n      className={cls}\n      role=\"note\"\n      {...rest}>\n      <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n        <BannerContentWrapper>\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n            {children}&nbsp;\n            {link && linkText && (\n              <HyperLink\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n                onClick={(e) => {\n                  if (linkAction) {\n                    e.preventDefault();\n                    linkAction(e);\n                  }\n                }}\n                href={link}\n                variant=\"default\">\n                {linkText}\n              </HyperLink>\n            )}\n          </ComponentResponsive>\n        </BannerContentWrapper>\n        {onClose && (\n          <ButtonWrapper>\n            <ButtonContainer $type={bannerParams.containerType}>\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n                <Close color={bannerParams.closeIconColor} size=\"24px\" />\n              </IconButton>\n            </ButtonContainer>\n          </ButtonWrapper>\n        )}\n      </BannerCenter>\n    </BannerContainer>\n  );\n};\n\nexport default Banner;\n"],"mappings":"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"}