@laerdal/life-react-components 1.3.1-dev.3.full → 1.3.2-dev.11

package/dist/umd/Accordion/index.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "./AccordionMenu", "./styles"], factory);
+    define(["exports", "./AccordionMenu", "./ContentAccordion", "./styles"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("./AccordionMenu"), require("./styles"));
+    factory(exports, require("./AccordionMenu"), require("./ContentAccordion"), require("./styles"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.AccordionMenu, global.styles);
+    factory(mod.exports, global.AccordionMenu, global.ContentAccordion, global.styles);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _AccordionMenu, _styles) {
+})(this, function (exports, _AccordionMenu, _ContentAccordion, _styles) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -28,6 +28,12 @@
       return _interopRequireDefault(_AccordionMenu).default;
     }
   });
+  Object.defineProperty(exports, "ContentAccordion", {
+    enumerable: true,
+    get: function () {
+      return _ContentAccordion.ContentAccordion;
+    }
+  });
   Object.defineProperty(exports, "AccordionMenuWrapper", {
     enumerable: true,
     get: function () {

package/dist/umd/Accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Accordion/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;oDAAA,O;;;;;;oDACA,O;;;;;;qBACA,oB","sourcesContent":["export { default as AccordionMenu } from './AccordionMenu';\nexport { default as AccordionMenuItem } from './AccordionMenu';\nexport { AccordionMenuWrapper } from './styles';\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Accordion/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;oDAAA,O;;;;;;oDACA,O;;;;;;+BACA,gB;;;;;;qBACA,oB","sourcesContent":["export {default as AccordionMenu} from './AccordionMenu';\nexport {default as AccordionMenuItem} from './AccordionMenu';\nexport {ContentAccordion} from './ContentAccordion';\nexport {AccordionMenuWrapper} from './styles';\n"],"file":"index.js"}

package/dist/umd/AuthPage/AuthPage.js

@@ -98,7 +98,7 @@
     screenSetsContainerId
   }) => {
     return /*#__PURE__*/React.createElement(React.Fragment, null, showInformationSection && /*#__PURE__*/React.createElement(_Information.InformationContainer, {
-      color: signUp ? _styles.COLORS.accent1_20 : _styles.COLORS.primary_20
+      $color: signUp ? _styles.COLORS.accent1_20 : _styles.COLORS.primary_20
     }, /*#__PURE__*/React.createElement(_Information.InformationContent, null, (signUpPlaceholderImage || signInPlaceholderImage) && /*#__PURE__*/React.createElement(_Information.InformationImage, {
       src: signUp ? signUpPlaceholderImage : signInPlaceholderImage,
       alt: signUp ? signUpPlaceholderImageAlt : signInPlaceholderImageAlt

package/dist/umd/AuthPage/AuthPage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/AuthPage/AuthPage.tsx"],"names":["showInformationSection","signUp","signUpPlaceholderImage","signInPlaceholderImage","signUpPlaceholderImageAlt","signInPlaceholderImageAlt","signUpInformationHeader","signInInformationHeader","signUpInformationText","signInInformationText","screenSetsContainerId","AuthPage","COLORS","primary_20"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA;AACA;AACA;AACA;AACA;AACA,QAAMW,QAAQ,GAAG,CAAC;AAAA,IAAA,sBAAA;AAAA,IAAA,MAAA;AAAA,IAAA,sBAAA;AAAA,IAAA,sBAAA;AAAA,IAAA,yBAAA;AAAA,IAAA,yBAAA;AAAA,IAAA,uBAAA;AAAA,IAAA,uBAAA;AAAA,IAAA,qBAAA;AAAA,IAAA,qBAAA;AAWhBD,IAAAA;AAXgB,GAAD,KAYI;AACnB,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACGV,sBAAsB,IAAA,aACrB,KAAA,CAAA,aAAA,CAAA,iCAAA,EAAA;AAAsB,MAAA,KAAK,EAAEC,MAAM,GAAGW,eAAH,UAAA,GAAuBA,eAAOC;AAAjE,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,+BAAA,EAAA,IAAA,EACG,CAACX,sBAAsB,IAAvB,sBAAA,KAAA,aACC,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,MAAA,GAAG,EAAED,MAAM,GAAA,sBAAA,GAA7B,sBAAA;AAAiF,MAAA,GAAG,EAAEA,MAAM,GAAA,yBAAA,GAA+BI;AAA3H,KAAA,CAFJ,EAIG,CAACC,uBAAuB,IAAxB,uBAAA,KAAA,aAAwD,KAAA,CAAA,aAAA,CAAA,8BAAA,EAAA,IAAA,EAAoBL,MAAM,GAAA,uBAAA,GAJrF,uBAI2D,CAJ3D,EAKG,CAACO,qBAAqB,IAAtB,qBAAA,KAAA,aAAoD,KAAA,CAAA,aAAA,CAAA,4BAAA,EAAA,IAAA,EAAkBP,MAAM,GAAA,qBAAA,GARrF,qBAQ6D,CALvD,CADF,CAFJ,EAAA,aAYE,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAqB,MAAA,EAAE,EAAvB,qBAAA;AAAgD,MAAA,cAAc,EAAE,CAACD;AAAjE,KAAA,CAZF,CADF;AAbF,GAAA;;;AA7BEA,IAAAA,sB;AAGAC,IAAAA,M;AAEAC,IAAAA,sB;AAEAC,IAAAA,sB;AAEAC,IAAAA,yB;AAEAC,IAAAA,yB;AAEAC,IAAAA,uB;AAEAC,IAAAA,uB;AAEAC,IAAAA,qB;AAEAC,IAAAA,qB;AAEAC,IAAAA,qB;;oBAuCF,Q","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"],"file":"AuthPage.js"}
+{"version":3,"sources":["../../../src/AuthPage/AuthPage.tsx"],"names":["showInformationSection","signUp","signUpPlaceholderImage","signInPlaceholderImage","signUpPlaceholderImageAlt","signInPlaceholderImageAlt","signUpInformationHeader","signInInformationHeader","signUpInformationText","signInInformationText","screenSetsContainerId","AuthPage","COLORS","primary_20"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA;AACA;AACA;AACA;AACA;AACA,QAAMW,QAAQ,GAAG,CAAC;AAAA,IAAA,sBAAA;AAAA,IAAA,MAAA;AAAA,IAAA,sBAAA;AAAA,IAAA,sBAAA;AAAA,IAAA,yBAAA;AAAA,IAAA,yBAAA;AAAA,IAAA,uBAAA;AAAA,IAAA,uBAAA;AAAA,IAAA,qBAAA;AAAA,IAAA,qBAAA;AAWhBD,IAAAA;AAXgB,GAAD,KAYI;AACnB,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACGV,sBAAsB,IAAA,aACrB,KAAA,CAAA,aAAA,CAAA,iCAAA,EAAA;AAAsB,MAAA,MAAM,EAAEC,MAAM,GAAGW,eAAH,UAAA,GAAuBA,eAAOC;AAAlE,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,+BAAA,EAAA,IAAA,EACG,CAACX,sBAAsB,IAAvB,sBAAA,KAAA,aACC,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,MAAA,GAAG,EAAED,MAAM,GAAA,sBAAA,GAA7B,sBAAA;AAAiF,MAAA,GAAG,EAAEA,MAAM,GAAA,yBAAA,GAA+BI;AAA3H,KAAA,CAFJ,EAIG,CAACC,uBAAuB,IAAxB,uBAAA,KAAA,aAAwD,KAAA,CAAA,aAAA,CAAA,8BAAA,EAAA,IAAA,EAAoBL,MAAM,GAAA,uBAAA,GAJrF,uBAI2D,CAJ3D,EAKG,CAACO,qBAAqB,IAAtB,qBAAA,KAAA,aAAoD,KAAA,CAAA,aAAA,CAAA,4BAAA,EAAA,IAAA,EAAkBP,MAAM,GAAA,qBAAA,GARrF,qBAQ6D,CALvD,CADF,CAFJ,EAAA,aAYE,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAqB,MAAA,EAAE,EAAvB,qBAAA;AAAgD,MAAA,cAAc,EAAE,CAACD;AAAjE,KAAA,CAZF,CADF;AAbF,GAAA;;;AA7BEA,IAAAA,sB;AAGAC,IAAAA,M;AAEAC,IAAAA,sB;AAEAC,IAAAA,sB;AAEAC,IAAAA,yB;AAEAC,IAAAA,yB;AAEAC,IAAAA,uB;AAEAC,IAAAA,uB;AAEAC,IAAAA,qB;AAEAC,IAAAA,qB;AAEAC,IAAAA,qB;;oBAuCF,Q","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"],"file":"AuthPage.js"}

package/dist/umd/AuthPage/Information.js

@@ -30,7 +30,7 @@
 
   const InformationContainer = exports.InformationContainer = (0, _styledComponents2.default)(_AuthPageSection2.default)`
   display: none;
-  background: ${props => props.color};
+  background: ${props => props.$color};
 
   ${_styles.BREAKPOINTS.MEDIUM} {
     display: flex;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/AuthPage/Information.tsx"],"names":["InformationContainer","styled","props","color","BREAKPOINTS","MEDIUM","InformationContent","div","LARGE","InformationHeader","h2","HeadlineXLStyling","COLORS","InformationText","p","ParagraphLStyling","ParagraphTextStyle","InformationImage","img"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,QAAMA,oBAAoB,WAApBA,oBAAoB,GAAGC,gCAAM,yBAANA,CAA2C;AAC/E;AACA,gBAAgBC,KAAK,IAAIA,KAAK,CAACC,KAAM;AACrC;AACA,IAAIC,oBAAYC,MAAO;AACvB;AACA;AACA;AAPO,CAAA;AAUA,QAAMC,kBAAkB,WAAlBA,kBAAkB,GAAGL,2BAAOM,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIH,oBAAYI,KAAM;AACtB;AACA;AACA;AAXO,CAAA;AAcA,QAAMC,iBAAiB,WAAjBA,iBAAiB,GAAGR,2BAAOS,EAAG;AAC3C,IAAIC,mCAAkBC,eAAD,KAAjBD,CAAgC;AACpC;AACA;AAHO,CAAA;AAMA,QAAME,eAAe,WAAfA,eAAe,GAAGZ,2BAAOa,CAAE;AACxC,IAAIC,mCAAkBC,2BAAD,OAAjBD,EAA8CH,eAA7B,WAAjBG,CAAkE;AACtE;AAFO,CAAA;AAKA,QAAME,gBAAgB,WAAhBA,gBAAgB,GAAGhB,2BAAOiB,GAAI;AAC3C;AACA;AAFO,CAAA","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, HeadlineXL, ParagraphTextStyle} from '../styles';\nimport {ComponentLStyling, HeadlineXLStyling, ParagraphLStyling} from '../styles/typography';\n\nexport const InformationContainer = styled(AuthPageSection)<{ color: string }>`\n  display: none;\n  background: ${props => props.color};\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n    padding-top: 56px;\n  }\n`;\n\nexport const InformationContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-self: center;\n  align-items: center;\n  text-align: center;\n  max-width: 100%;\n\n  ${BREAKPOINTS.LARGE} {\n    align-self: flex-end;\n    margin-right: 48px;\n  }\n`;\n\nexport const InformationHeader = styled.h2`\n  ${HeadlineXLStyling(COLORS.black)}\n  font-weight: 300;\n  margin-bottom: 0;\n`;\n\nexport const InformationText = styled.p`\n  ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  margin: 8px 0;\n`;\n\nexport const InformationImage = styled.img`\n  height: 275px;\n  max-width: 100%;\n`;\n"],"file":"Information.js"}
+{"version":3,"sources":["../../../src/AuthPage/Information.tsx"],"names":["InformationContainer","styled","props","$color","BREAKPOINTS","MEDIUM","InformationContent","div","LARGE","InformationHeader","h2","HeadlineXLStyling","COLORS","InformationText","p","ParagraphLStyling","ParagraphTextStyle","InformationImage","img"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,QAAMA,oBAAoB,WAApBA,oBAAoB,GAAGC,gCAAM,yBAANA,CAA4C;AAChF;AACA,gBAAiBC,KAAD,IAAWA,KAAK,CAACC,MAAO;AACxC;AACA,IAAIC,oBAAYC,MAAO;AACvB;AACA;AACA;AAPO,CAAA;AAUA,QAAMC,kBAAkB,WAAlBA,kBAAkB,GAAGL,2BAAOM,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIH,oBAAYI,KAAM;AACtB;AACA;AACA;AAXO,CAAA;AAcA,QAAMC,iBAAiB,WAAjBA,iBAAiB,GAAGR,2BAAOS,EAAG;AAC3C,IAAIC,mCAAkBC,eAAD,KAAjBD,CAAgC;AACpC;AACA;AAHO,CAAA;AAMA,QAAME,eAAe,WAAfA,eAAe,GAAGZ,2BAAOa,CAAE;AACxC,IAAIC,mCAAkBC,2BAAD,OAAjBD,EAA8CH,eAA7B,WAAjBG,CAAkE;AACtE;AAFO,CAAA;AAKA,QAAME,gBAAgB,WAAhBA,gBAAgB,GAAGhB,2BAAOiB,GAAI;AAC3C;AACA;AAFO,CAAA","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, HeadlineXL, ParagraphTextStyle } from '../styles';\nimport { ComponentLStyling, HeadlineXLStyling, ParagraphLStyling } from '../styles/typography';\n\nexport const InformationContainer = styled(AuthPageSection)<{ $color: string }>`\n  display: none;\n  background: ${(props) => props.$color};\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n    padding-top: 56px;\n  }\n`;\n\nexport const InformationContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-self: center;\n  align-items: center;\n  text-align: center;\n  max-width: 100%;\n\n  ${BREAKPOINTS.LARGE} {\n    align-self: flex-end;\n    margin-right: 48px;\n  }\n`;\n\nexport const InformationHeader = styled.h2`\n  ${HeadlineXLStyling(COLORS.black)}\n  font-weight: 300;\n  margin-bottom: 0;\n`;\n\nexport const InformationText = styled.p`\n  ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  margin: 8px 0;\n`;\n\nexport const InformationImage = styled.img`\n  height: 275px;\n  max-width: 100%;\n`;\n"],"file":"Information.js"}

package/dist/umd/Banners/Banner.js

@@ -83,7 +83,7 @@
    * Styles for <Banner />
    */
   const BannerContainer = _styledComponents2.default.div`
-  background: ${props => props.type ? props.type : _styles.COLORS.correct_100};
+  background: ${props => props.$type ? props.$type : _styles.COLORS.correct_100};
   min-height: 48px;
   display: flex;
   color: ${_styles.COLORS.black};
@@ -114,8 +114,8 @@
   }
 `;
   const BannerCenter = _styledComponents2.default.div`
-  ${props => (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color)}
-  
+  ${props => (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color)}
+
   display: flex;
   width: 100%;
   margin: 0 0 0 16px;
@@ -145,7 +145,7 @@
 `;
   const ButtonContainer = _styledComponents2.default.div`
   display: contents;
-  ${props => props.type ? (0, _styles2.getButtonStyle)(props.type) : null};
+  ${props => props.$type ? (0, _styles2.getButtonStyle)(props.$type) : null};
 `;
   const BannerContentWrapper = _styledComponents2.default.div`
   display: flex;
@@ -182,12 +182,12 @@
       case 'warning':
         return /*#__PURE__*/React.createElement(BannerContainer, {
           "data-testid": testId,
-          type: _styles.COLORS.warning_100,
+          $type: _styles.COLORS.warning_100,
           link: _styles.COLORS.warning_700,
           hover: _styles.COLORS.warning_20,
           bottom: bottom
         }, /*#__PURE__*/React.createElement(BannerCenter, {
-          color: _styles.COLORS.warning_700,
+          $color: _styles.COLORS.warning_700,
           className: size
         }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.Help, {
           color: _styles.COLORS.warning_700,
@@ -201,7 +201,7 @@
           href: link,
           variant: "default"
         }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
-          type: formatTypeToLowerCase
+          $type: formatTypeToLowerCase
         }, /*#__PURE__*/React.createElement(_Button.IconButton, {
           variant: "secondary",
           shape: "circular",
@@ -216,13 +216,13 @@
       case 'critical':
         return /*#__PURE__*/React.createElement(BannerContainer, {
           "data-testid": testId,
-          type: _styles.COLORS.critical_100,
+          $type: _styles.COLORS.critical_100,
           link: _styles.COLORS.critical_700,
           hover: _styles.COLORS.critical_20,
           bottom: bottom,
           className: size
         }, /*#__PURE__*/React.createElement(BannerCenter, {
-          color: _styles.COLORS.critical_700,
+          $color: _styles.COLORS.critical_700,
           className: size
         }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
           color: _styles.COLORS.critical_700,
@@ -236,7 +236,7 @@
           href: link,
           variant: "default"
         }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
-          type: formatTypeToLowerCase
+          $type: formatTypeToLowerCase
         }, /*#__PURE__*/React.createElement(_Button.IconButton, {
           variant: "secondary",
           shape: "circular",
@@ -251,13 +251,13 @@
       case 'positive':
         return /*#__PURE__*/React.createElement(BannerContainer, {
           "data-testid": testId,
-          type: _styles.COLORS.correct_100,
+          $type: _styles.COLORS.correct_100,
           link: _styles.COLORS.correct_700,
           hover: _styles.COLORS.correct_20,
           bottom: bottom,
           className: size
         }, /*#__PURE__*/React.createElement(BannerCenter, {
-          color: _styles.COLORS.correct_700,
+          $color: _styles.COLORS.correct_700,
           className: size
         }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.ThumbsUp, {
           color: _styles.COLORS.correct_700,
@@ -271,7 +271,7 @@
           href: link,
           variant: "default"
         }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
-          type: formatTypeToLowerCase
+          $type: formatTypeToLowerCase
         }, /*#__PURE__*/React.createElement(_Button.IconButton, {
           variant: "secondary",
           shape: "circular",
@@ -286,13 +286,13 @@
       default:
         return /*#__PURE__*/React.createElement(BannerContainer, {
           "data-testid": testId,
-          type: _styles.COLORS.primary_100,
+          $type: _styles.COLORS.primary_100,
           link: _styles.COLORS.primary_700,
           hover: _styles.COLORS.primary_20,
           bottom: bottom,
           className: size
         }, /*#__PURE__*/React.createElement(BannerCenter, {
-          color: _styles.COLORS.primary_700,
+          $color: _styles.COLORS.primary_700,
           className: size
         }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.Tip, {
           color: _styles.COLORS.primary_700,
@@ -306,7 +306,7 @@
           href: link,
           variant: "default"
         }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
-          type: "neutral"
+          $type: "neutral"
         }, /*#__PURE__*/React.createElement(_Button.IconButton, {
           variant: "secondary",
           shape: "circular",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","COLORS","correct_100","black","BREAKPOINTS","MEDIUM","LARGE","link","BannerCenter","ComponentMStyling","ComponentTextStyle","ButtonWrapper","ButtonContainer","getButtonStyle","BannerContentWrapper","type","linkText","hover","bottom","testId","icon","onClose","noIcon","Banner","React","window","setWidth","formatTypeToLowerCase","size","warning_700","Math","critical_700","correct_700","primary_700"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA;AACA;AACA;AACA,QAAMA,eAAe,GAAGC,2BAAOC,GAAiB;AAChD,gBAAiBC,KAAD,IAAyBA,KAAK,CAALA,IAAAA,GAAaA,KAAK,CAAlBA,IAAAA,GAA0BC,eAAOC,WAAa;AACvF;AACA;AACA,WAAWD,eAAOE,KAAM;AACxB,gBAAiBH,KAAD,IAAyBA,KAAK,CAALA,MAAAA,GAAAA,MAAAA,GAAwB,GAAK;AACtE;AACA;AACA;AACA;AACA,MAAMI,oBAAYC,MAAO;AACzB;AACA;AACA,MAAMD,oBAAYE,KAAM;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAcN,KAAD,IAAwBA,KAAK,CAACO,IAAK;AAChD;AA7BA,CAAA;AAgCA,QAAMC,YAAY,GAAGV,2BAAOC,GAAI;AAChC,IAAKC,KAAD,IAAWS,mCAAkBC,2BAAD,OAAjBD,EAA8CT,KAAK,CAAlC,KAAjBS,CAA2D;AAC1E;AACA;AACA;AACA;AACA,IAAIL,oBAAYC,MAAO;AACvB;AACA;AACA,IAAID,oBAAYE,KAAM;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAzBA,CAAA;AA4BA,QAAMK,aAAa,GAAGb,2BAAOC,GAAI;AACjC;AADA,CAAA;AAIA,QAAMa,eAAe,GAAGd,2BAAOC,GAAuB;AACtD;AACA,IAAKC,KAAD,IAAYA,KAAK,CAALA,IAAAA,GAAaa,6BAAeb,KAAK,CAAjCA,IAAaa,CAAbb,GAA0C,IAAM;AAFhE,CAAA;AAKA,QAAMc,oBAAoB,GAAGhB,2BAAOC,GAAI;AACxC;AACA;AACA;AACA;AACA;AACA;AANA,CAAA;;AAsBA,QAAMwB,MAA4C,GAAG,CAAC;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAA,IAAA,QAAA;AAAA,IAAA,MAAA;AAAA,IAAA,MAAA;AAAA,IAAA,QAAA;AAAA,IAAA,IAAA;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAuED,IAAAA;AAAvE,GAAD,KAAqF;AACxI,UAAM,CAAA,KAAA,EAAA,QAAA,IAAoBE,KAAK,CAALA,QAAAA,CAAuBC,MAAM,CAAvD,UAA0BD,CAA1B;AACAA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,eAAA,YAAA,GAAwB;AACtBE,QAAAA,QAAQ,CAACD,MAAM,CAAfC,UAAQ,CAARA;AACD;;AACDD,MAAAA,MAAM,CAANA,gBAAAA,CAAAA,QAAAA,EAAAA,YAAAA;AAJFD,KAAAA;AAOA,UAAMG,qBAAqB,GAAGZ,IAAI,EAAlC,WAA8BA,EAA9B;;AACA,YAAA,qBAAA;AACE,WAAA,SAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAiB,yBAAjB,MAAA;AAAsC,UAAA,IAAI,EAAEd,eAA5C,WAAA;AAAgE,UAAA,IAAI,EAAEA,eAAtE,WAAA;AAA0F,UAAA,KAAK,EAAEA,eAAjG,UAAA;AAAoH,UAAA,MAAM,EAAEiB;AAA5H,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAc,UAAA,KAAK,EAAEjB,eAArB,WAAA;AAAyC,UAAA,SAAS,EAAE2B;AAApD,SAAA,EACGR,IAAI,GAAA,IAAA,GAAUE,MAAM,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AAAM,UAAA,KAAK,EAAErB,eAAb,WAAA;AAAiC,UAAA,IAAI,EAAC;AAAtC,SAAA,CADjC,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,+BAAA,EAAA;AAAqB,UAAA,IAAI,EAAzB,IAAA;AAAiC,UAAA,KAAK,EAAtC,KAAA;AAA+C,UAAA,KAAK,EAAEA,eAAO4B;AAA7D,SAAA,EAAA,QAAA,EAAA,UAAA,EAEGtB,IAAI,IAAJA,QAAAA,IAAAA,aACC,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA;AAAW,UAAA,EAAE,EAAG,GAAEuB,IAAI,CAAJA,KAAAA,CAAWA,IAAI,CAAJA,MAAAA,KAAXA,YAAAA,CAAlB,aAAA;AAAyE,UAAA,IAAI,EAA7E,IAAA;AAAqF,UAAA,OAAO,EAAC;AAA7F,SAAA,EANR,QAMQ,CAHJ,CADF,CAFF,EAYGT,OAAO,IAAA,aACN,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAiB,UAAA,IAAI,EAAEM;AAAvB,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,UAAA,OAAO,EAAnB,WAAA;AAAgC,UAAA,KAAK,EAArC,UAAA;AAAiD,UAAA,wBAAwB,EAAzE,IAAA;AAA0E,UAAA,yBAAyB,EAAE1B,eAArG,KAAA;AAAmH,UAAA,MAAM,EAAE,MAAMoB,OAAO;AAAxI,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAO,UAAA,KAAK,EAAEpB,eAAd,WAAA;AAAkC,UAAA,IAAI,EAAC;AAAvC,SAAA,CADF,CADF,CADF,CAbJ,CADF,CADF;;AA0BF,WAAA,UAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAiB,yBAAjB,MAAA;AAAsC,UAAA,IAAI,EAAEA,eAA5C,YAAA;AAAiE,UAAA,IAAI,EAAEA,eAAvE,YAAA;AAA4F,UAAA,KAAK,EAAEA,eAAnG,WAAA;AAAuH,UAAA,MAAM,EAA7H,MAAA;AAAuI,UAAA,SAAS,EAAE2B;AAAlJ,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAc,UAAA,KAAK,EAAE3B,eAArB,YAAA;AAA0C,UAAA,SAAS,EAAE2B;AAArD,SAAA,EACGR,IAAI,GAAA,IAAA,GAAUE,MAAM,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,UAAA,KAAK,EAAErB,eAAzB,YAAA;AAA8C,UAAA,IAAI,EAAC;AAAnD,SAAA,CADjC,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,+BAAA,EAAA;AAAqB,UAAA,IAAI,EAAzB,IAAA;AAAiC,UAAA,KAAK,EAAtC,KAAA;AAA+C,UAAA,KAAK,EAAEA,eAAO8B;AAA7D,SAAA,EAAA,QAAA,EAAA,UAAA,EAEGxB,IAAI,IAAJA,QAAAA,IAAAA,aACC,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA;AAAW,UAAA,EAAE,EAAG,GAAEuB,IAAI,CAAJA,KAAAA,CAAWA,IAAI,CAAJA,MAAAA,KAAXA,YAAAA,CAAlB,aAAA;AAAyE,UAAA,IAAI,EAA7E,IAAA;AAAqF,UAAA,OAAO,EAAC;AAA7F,SAAA,EANR,QAMQ,CAHJ,CADF,CAFF,EAYGT,OAAO,IAAA,aACN,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAiB,UAAA,IAAI,EAAEM;AAAvB,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,UAAA,OAAO,EAAnB,WAAA;AAAgC,UAAA,KAAK,EAArC,UAAA;AAAiD,UAAA,wBAAwB,EAAzE,IAAA;AAA0E,UAAA,yBAAyB,EAAE1B,eAArG,KAAA;AAAmH,UAAA,MAAM,EAAE,MAAMoB,OAAO;AAAxI,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAO,UAAA,KAAK,EAAEpB,eAAd,YAAA;AAAmC,UAAA,IAAI,EAAC;AAAxC,SAAA,CADF,CADF,CADF,CAbJ,CADF,CADF;;AA0BF,WAAA,UAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAiB,yBAAjB,MAAA;AAAsC,UAAA,IAAI,EAAEA,eAA5C,WAAA;AAAgE,UAAA,IAAI,EAAEA,eAAtE,WAAA;AAA0F,UAAA,KAAK,EAAEA,eAAjG,UAAA;AAAoH,UAAA,MAAM,EAA1H,MAAA;AAAoI,UAAA,SAAS,EAAE2B;AAA/I,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAc,UAAA,KAAK,EAAE3B,eAArB,WAAA;AAAyC,UAAA,SAAS,EAAE2B;AAApD,SAAA,EACGR,IAAI,GAAA,IAAA,GAAUE,MAAM,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA;AAAU,UAAA,KAAK,EAAErB,eAAjB,WAAA;AAAqC,UAAA,IAAI,EAAC;AAA1C,SAAA,CADjC,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,+BAAA,EAAA;AAAqB,UAAA,IAAI,EAAzB,IAAA;AAAiC,UAAA,KAAK,EAAtC,KAAA;AAA+C,UAAA,KAAK,EAAEA,eAAO+B;AAA7D,SAAA,EAAA,QAAA,EAAA,UAAA,EAEGzB,IAAI,IAAJA,QAAAA,IAAAA,aACC,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA;AAAW,UAAA,EAAE,EAAG,GAAEuB,IAAI,CAAJA,KAAAA,CAAWA,IAAI,CAAJA,MAAAA,KAAXA,YAAAA,CAAlB,aAAA;AAAyE,UAAA,IAAI,EAA7E,IAAA;AAAqF,UAAA,OAAO,EAAC;AAA7F,SAAA,EANR,QAMQ,CAHJ,CADF,CAFF,EAYGT,OAAO,IAAA,aACN,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAiB,UAAA,IAAI,EAAEM;AAAvB,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,UAAA,OAAO,EAAnB,WAAA;AAAgC,UAAA,KAAK,EAArC,UAAA;AAAiD,UAAA,wBAAwB,EAAzE,IAAA;AAA0E,UAAA,yBAAyB,EAAE1B,eAArG,KAAA;AAAmH,UAAA,MAAM,EAAE,MAAMoB,OAAO;AAAxI,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAO,UAAA,KAAK,EAAEpB,eAAd,WAAA;AAAkC,UAAA,IAAI,EAAC;AAAvC,SAAA,CADF,CADF,CADF,CAbJ,CADF,CADF;;AA0BF;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAiB,yBAAjB,MAAA;AAAsC,UAAA,IAAI,EAAEA,eAA5C,WAAA;AAAgE,UAAA,IAAI,EAAEA,eAAtE,WAAA;AAA0F,UAAA,KAAK,EAAEA,eAAjG,UAAA;AAAoH,UAAA,MAAM,EAA1H,MAAA;AAAoI,UAAA,SAAS,EAAE2B;AAA/I,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAc,UAAA,KAAK,EAAE3B,eAArB,WAAA;AAAyC,UAAA,SAAS,EAAE2B;AAApD,SAAA,EACGR,IAAI,GAAA,IAAA,GAAUE,MAAM,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AAAK,UAAA,KAAK,EAAErB,eAAZ,WAAA;AAAgC,UAAA,IAAI,EAAC;AAArC,SAAA,CADjC,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,+BAAA,EAAA;AAAqB,UAAA,IAAI,EAAzB,IAAA;AAAiC,UAAA,KAAK,EAAtC,KAAA;AAA+C,UAAA,KAAK,EAAEA,eAAOgC;AAA7D,SAAA,EAAA,QAAA,EAAA,UAAA,EAEG1B,IAAI,IAAJA,QAAAA,IAAAA,aACC,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA;AAAW,UAAA,EAAE,EAAG,GAAEuB,IAAI,CAAJA,KAAAA,CAAWA,IAAI,CAAJA,MAAAA,KAAXA,YAAAA,CAAlB,aAAA;AAAyE,UAAA,IAAI,EAA7E,IAAA;AAAqF,UAAA,OAAO,EAAC;AAA7F,SAAA,EANR,QAMQ,CAHJ,CADF,CAFF,EAYGT,OAAO,IAAA,aACN,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAiB,UAAA,IAAI,EAAC;AAAtB,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,UAAA,OAAO,EAAnB,WAAA;AAAgC,UAAA,KAAK,EAArC,UAAA;AAAiD,UAAA,wBAAwB,EAAzE,IAAA;AAA0E,UAAA,yBAAyB,EAAEpB,eAArG,KAAA;AAAmH,UAAA,MAAM,EAAE,MAAMoB,OAAO;AAAxI,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAO,UAAA,KAAK,EAAEpB,eAAd,WAAA;AAAkC,UAAA,IAAI,EAAC;AAAvC,SAAA,CADF,CADF,CADF,CAbJ,CADF,CADF;AAnFJ;AAVF,GAAA;;;AAXEc,IAAAA,I;AACAR,IAAAA,I;AACAS,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,M;AACAC,IAAAA,M;AACAC,IAAAA,I;AACAC,IAAAA,O;AACAC,IAAAA,M;;oBA6HF,M","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/typography';\nimport {HyperLink} from '../HyperLink';\n\n/**\n * Styles for <Banner />\n */\nconst BannerContainer = styled.div<BannerProps>`\n  background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  a {\n    color: ${(props: BannerProps) => props.link} !important;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color)}\n  \n  display: flex;\n  width: 100%;\n  margin: 0 0 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 16px 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 40px 0 56px;\n  }\n  &.small {\n    margin: 0 0 0 16px;\n  }\n  &.medium {\n    margin: 0 16px 0 32px;\n  }\n  &.large {\n    margin: 0 40px 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n`;\n\nconst ButtonWrapper = styled.div`\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 = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: string;\n  link?: string;\n  linkText?: string;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  const formatTypeToLowerCase = type?.toLowerCase();\n  switch (formatTypeToLowerCase) {\n    case 'warning':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n          <BannerCenter color={COLORS.warning_700} className={size}>\n            {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.warning_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.warning_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'critical':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.critical_700} className={size}>\n            {icon ? icon : noIcon ? null : <TechnicalWarning color={COLORS.critical_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.critical_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.critical_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'positive':\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.correct_700} className={size}>\n            {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.correct_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.correct_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    default:\n      return (\n        <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\n          <BannerCenter color={COLORS.primary_700} className={size}>\n            {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.primary_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer type=\"neutral\">\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.primary_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n  }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
+{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","COLORS","correct_100","black","BREAKPOINTS","MEDIUM","LARGE","link","BannerCenter","ComponentMStyling","ComponentTextStyle","ButtonWrapper","ButtonContainer","getButtonStyle","BannerContentWrapper","type","linkText","hover","bottom","testId","icon","onClose","noIcon","Banner","React","window","setWidth","formatTypeToLowerCase","size","warning_700","Math","critical_700","correct_700","primary_700"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles/typography';\nimport { HyperLink } from '../HyperLink';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: 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\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  a {\n    color: ${(props: BannerProps) => props.link} !important;\n  }\n`;\n\nconst BannerCenter = styled.div<{ $color: string }>`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 0 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 16px 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 40px 0 56px;\n  }\n  &.small {\n    margin: 0 0 0 16px;\n  }\n  &.medium {\n    margin: 0 16px 0 32px;\n  }\n  &.large {\n    margin: 0 40px 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n`;\n\nconst ButtonWrapper = styled.div`\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 = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: string;\n  link?: string;\n  linkText?: string;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  const formatTypeToLowerCase = type?.toLowerCase();\n  switch (formatTypeToLowerCase) {\n    case 'warning':\n      return (\n        <BannerContainer data-testid={testId} $type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n          <BannerCenter $color={COLORS.warning_700} className={size}>\n            {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.warning_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer $type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.warning_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'critical':\n      return (\n        <BannerContainer data-testid={testId} $type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\n          <BannerCenter $color={COLORS.critical_700} className={size}>\n            {icon ? icon : noIcon ? null : <TechnicalWarning color={COLORS.critical_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.critical_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer $type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.critical_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'positive':\n      return (\n        <BannerContainer data-testid={testId} $type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\n          <BannerCenter $color={COLORS.correct_700} className={size}>\n            {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.correct_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer $type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.correct_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    default:\n      return (\n        <BannerContainer data-testid={testId} $type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\n          <BannerCenter $color={COLORS.primary_700} className={size}>\n            {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.primary_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer $type=\"neutral\">\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n                    <Close color={COLORS.primary_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n  }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}

package/dist/umd/Button/Iconbutton.js

@@ -206,7 +206,6 @@
 
   ${props => props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : ''};
 `;
-  ;
 
   const IconButton = /*#__PURE__*/_react2.default.forwardRef(({
     id,

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

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

package/dist/umd/Dropdown/ChipDropdownInput.js

@@ -333,10 +333,10 @@
     };
 
     React.useEffect(() => {
-      var options = [...givenList];
+      let options = [...givenList];
 
       if (!restartFilter && value !== '') {
-        options = options.filter(option => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1);
+        options = options.filter(option => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 || option.secondaryLabel && option.secondaryLabel?.toUpperCase().indexOf(value.toUpperCase()) !== -1);
       }
 
       if (!disableSorting) {

package/dist/umd/Dropdown/ChipDropdownInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/ChipDropdownInput.tsx"],"names":["Wrapper","styled","div","StyledChipInputContainer","COLORS","neutral_400","primary_100","critical_400","warning_400","primary_600","primary_800","primary_700","white","neutral_500","neutral_700","ChipInput","input","ComponentMStyling","ComponentTextStyle","black","StyledDropdownButton","Loading","label","secondaryLabel","value","list","onInputChange","disableSorting","messageOnNoResults","isButton","autofilledMessage","suggestion","excludeIcon","loading","maxSelectedItems","ChipDropdownInput","React","chipInput","styledFieldRef","setChips","newList","e","setGivenList","addChip","newChip","onValueChange","setValue","onAddChip","event","givenList","onRemoveChip","chips","newChips","onEditChip","options","option","o","setCurrentSearchResult","handleValueUpdate","values","setRestartFilter","handleKeyPress","matches","currentSearchResult","c","setDropdownIsOpen","handleClickOutside","document","dropdownItems","x","displayLabel","noteLabel","l","Size","variants","index","placeholder","neutral_600","action","pinTopItem","itemsType","scrollable","actionLabel","multiSelect","onValueUpdate","items","inputId","validationMessage","validationType","critical_500"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom components.\n */\nimport { InputChip } from '../Chips/index';\nimport { Search, TechnicalWarning, User } from '../icons/systemicons/SystemIcons';\nimport { WarningMessage, ErrorMessage } from '../InputFields/styling';\nimport { COLORS } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { ChipInputContainer } from '../Chips/ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { Size } from '../types';\nimport { ChipInputProps } from '../Chips/ChipTypes';\nimport { DropdownButton } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentMStyling, ComponentXXSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  min-width: 344px;\n`;\n\nconst StyledChipInputContainer = styled(ChipInputContainer)`\n  padding: 2px 2px 2px 48px !important;\n  min-height: 56px;\n  max-height: 176px;\n  overflow-y: auto;\n  box-shadow: 0px 0px 0px 1px ${COLORS.neutral_400};\n\n  .medium {\n    margin-right: 8px !important;\n  }\n  .SearchIcon {\n    position: absolute;\n    left: 18px;\n    top: 18px;\n  }\n\n  &:active {\n    background-color: ${COLORS.primary_100};\n  }\n\n  &.invalid {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  }\n  &.alreadyInOrganization {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  }\n\n  &.empty:hover {\n    -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};\n    -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};\n    box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};\n  }\n\n  &.inputHasFocus {\n    -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n  &:hover {\n    -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};\n    -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};\n    box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.white};\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_500};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_700};\n    cursor: pointer;\n  }\n`;\n\nconst ChipInput = styled.input`\n  height: 40px;\n  width: auto;\n  display: inline-flex;\n  border: none;\n  outline: none;\n  margin: 4px;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  color: ${COLORS.black} !important;\n  background-color: inherit;\n`;\n\nconst StyledDropdownButton = styled(DropdownButton)`\n  display: flex;\n  width: 98%;\n  margin-left: 3px;\n  svg {\n    margin: auto 0 auto 0;\n  }\n`;\n\nconst Loading = styled.div`\n  margin: auto 16px auto auto !important;\n  height: 20px;\n  div {\n    height: 20px;\n  }\n`;\n\ninterface List {\n  label: string;\n  secondaryLabel?: string;\n  value: string;\n}\n\ninterface ChipDropdownInputProps extends ChipInputProps {\n  list: List[] | string[];\n  onInputChange?: (input: string) => void;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  isButton?: boolean;\n  autofilledMessage?: string;\n  suggestion?: List;\n  excludeIcon?: boolean;\n  loading?: boolean;\n  maxSelectedItems?: number;\n}\n\nconst ChipDropdownInput: React.FunctionComponent<ChipDropdownInputProps> = ({\n  list,\n  onInputChange,\n  disableSorting,\n  messageOnNoResults,\n  values,\n  inputId,\n  variants,\n  placeholder,\n  validationType,\n  validationMessage,\n  onValueChange,\n  suggestion,\n  excludeIcon,\n  loading,\n  maxSelectedItems,\n}: ChipDropdownInputProps) => {\n  // Initiate states\n  const [givenList, setGivenList] = React.useState<List[]>([]);\n  const [chips, setChips] = React.useState<string[]>([]);\n  const [value, setValue] = React.useState<string>('');\n  const [dropdownIsOpen, setDropdownIsOpen] = React.useState<boolean>(false);\n  const [currentSearchResult, setCurrentSearchResult] = React.useState<List[]>();\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  // Initiate refs\n  const chipInput = React.useRef<any>();\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n    // Let's add initial chip values\n    setChips(values);\n  }, [values]);\n\n  /**\n   * Convert string[] to List[] if necessary\n   */\n  React.useEffect(() => {\n    if (typeof list[0] === 'string') {\n      const newList: List[] = (list as string[]).map((e: string) => ({ label: e, value: e }));\n      setGivenList(newList);\n    } else {\n      setGivenList(list as List[]);\n    }\n  }, [list]);\n\n  const addChip = (newChip: string) => {\n    // Let's add the chip\n    setChips([...chips, newChip]);\n    onValueChange([...chips, newChip]);\n\n    // Let's clear the old value\n    chipInput.current.value = '';\n    setValue('');\n  };\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const onAddChip = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    // Let's trigger only on enter, comma and space key press\n    if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {\n      if (!givenList.find((e) => e.value === value)) {\n        setValue('');\n        return;\n      }\n      // Let's prevent default action - adding new key to the value\n      event.preventDefault();\n\n      addChip(value);\n    }\n    if (event.keyCode === 8 && value === '') {\n      onRemoveChip(chips.length - 1);\n    }\n  };\n\n  /**\n   * Removes a specific chip from the chip list.\n   * @param index - Index of the chip that needs to be removed.\n   * @param elementToAdd - Element which needs to be added in the deleted element place.\n   */\n  const onRemoveChip = (index: number, elementToAdd?: string): void => {\n    // Let's copy the chips\n    const newChips = [...chips];\n\n    // Let's delete the chip\n    // If necessary, let's replace it with a different chip\n    if (elementToAdd) {\n      newChips.splice(index, 1, elementToAdd);\n    } else {\n      newChips.splice(index, 1);\n    }\n\n    // Let's update the chip list\n    setChips([...newChips]);\n    onValueChange([...newChips]);\n  };\n\n  /**\n   * Changes a status of the chip to edit.\n   * @param text - Text of the chip that is being edited.\n   * @param index - Index of the chip in the array.\n   */\n  const onEditChip = (text: string, index: number): void => {\n    // Let's check if we have to add value as a chip (in case we have entered something in the input field)\n    if (chipInput.current.value !== '') {\n      // Let's replace the chip\n      onRemoveChip(index, chipInput.current.value);\n    } else {\n      // Let's just remove the chip\n      onRemoveChip(index);\n    }\n\n    // Let's update the text value of input field\n    chipInput.current.value = text;\n    setValue(text);\n  };\n\n  React.useEffect(() => {\n    var options = [...givenList];\n    if (!restartFilter && value !== '') {\n      options = options.filter((option) => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1);\n    }\n    if (!disableSorting) {\n      options = options.sort();\n    }\n    options = options.filter((o) => !chips.includes(o.value));\n    setCurrentSearchResult(options);\n  }, [value, givenList, chips]);\n\n  const handleValueUpdate = (values: string[]) => {\n    setRestartFilter(true);\n    addChip(values[0]);\n    chipInput?.current?.focus();\n  }\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        const matches = currentSearchResult?.filter((c) => c.value.toLowerCase() === value.toLowerCase());\n        if (matches?.length === 1 /*&& onSelect*/) {\n          addChip(matches[0].value);\n          //onSelect(chips);\n        } else if (e.target.value === suggestion?.label) {\n          addChip(e.target.value);\n        }\n\n        setDropdownIsOpen(!dropdownIsOpen);\n        if (matches?.length === 0) {\n          setValue('');\n        }\n      } else if (e.keyCode === 40) {\n        setDropdownIsOpen(!dropdownIsOpen);\n      }\n    }\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (styledFieldRef?.current && !styledFieldRef.current.contains(e.target)) {\n      if (dropdownIsOpen) {\n        setDropdownIsOpen(false);\n        if (!givenList.find((e) => e.value === value)) {\n          setValue('');\n        }\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  /**\n   * Return Chip Input component.\n   */\n\n  let dropdownItems: DropdownItem[] = [];\n  if(currentSearchResult)\n    dropdownItems = currentSearchResult.map(x => ({ value: x.value, displayLabel: x.label, noteLabel: x.secondaryLabel }));\n  \n  if(suggestion && !chips.includes(suggestion.value))\n    dropdownItems = [{ value: suggestion.value, displayLabel: suggestion.label, noteLabel: suggestion.secondaryLabel, suggestion: true }, ...dropdownItems];\n\n  return (\n    <Wrapper>\n      <StyledChipInputContainer\n        id={inputId}\n        onClick={(e: any) => {\n          e.stopPropagation();\n          setDropdownIsOpen(true);\n          chipInput.current.focus();\n        }}\n        className={validationType}\n        ref={styledFieldRef}>\n        <Search size=\"24px\" className=\"SearchIcon\" />\n        {chips?.map((chip: string, index: number) => (\n          <InputChip\n            icon={givenList.find((l: List) => l.value === chip) ? 'User' : undefined}\n            size={Size.Medium}\n            variant={variants && variants?.length && variants[index] ? variants[index] : 'normal'}\n            text={chip}\n            onRemove={() => onRemoveChip(index)}\n            onClick={() => onEditChip(chip, index)}\n            key={`chip_${index}`}></InputChip>\n        ))}\n\n        <ChipInput\n          type=\"text\"\n          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n            setValue(event.target.value);\n            setRestartFilter(false);\n            setDropdownIsOpen(true);\n            if (onInputChange) {\n              onInputChange(event.target.value || '');\n            }\n          }}\n          onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {\n            onAddChip(event);\n          }}\n          placeholder={placeholder && chips?.length === 0 ? placeholder : ''}\n          onClick={(e: any) => {\n            e.stopPropagation();\n            setDropdownIsOpen(true);\n          }}\n          onFocus={() => {\n            setDropdownIsOpen(true);\n          }}\n          ref={chipInput}\n        />\n        {loading ? (\n          <Loading>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </Loading>\n        ) : null}\n      </StyledChipInputContainer>\n      {(!maxSelectedItems || (maxSelectedItems && chips.length < maxSelectedItems)) && (\n        <DropdownContent \n          customizationProps={{\n            action: () => {},\n            pinTopItem: true,\n            \n            itemsType: 'normal',\n            scrollable: true,\n            actionLabel: '',\n            multiSelect: false,\n            onValueUpdate: handleValueUpdate,\n            items: dropdownItems\n          }}\n          focused={focused}\n          setFocused={setFocused}\n          hideOnClickOutside={false}\n          selectedValues={[]}\n          messageOnNoResults={messageOnNoResults ?? ''}\n          setSelectedValues={() => {}}\n          isOpen={dropdownIsOpen}\n          setIsOpen={setDropdownIsOpen}\n          filter={''}\n          isButton={false} \n          id={`${inputId}_dropdowncontent`} />\n      )}\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && validationType === 'warning' ? (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_500} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      ) : (\n        validationType === 'error' && (\n          <ErrorMessage>\n            <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )\n      )}\n    </Wrapper>\n  );\n};\n\nexport default ChipDropdownInput;\n"],"file":"ChipDropdownInput.js"}
+{"version":3,"sources":["../../../src/Dropdown/ChipDropdownInput.tsx"],"names":["Wrapper","styled","div","StyledChipInputContainer","COLORS","neutral_400","primary_100","critical_400","warning_400","primary_600","primary_800","primary_700","white","neutral_500","neutral_700","ChipInput","input","ComponentMStyling","ComponentTextStyle","black","StyledDropdownButton","Loading","label","secondaryLabel","value","list","onInputChange","disableSorting","messageOnNoResults","isButton","autofilledMessage","suggestion","excludeIcon","loading","maxSelectedItems","ChipDropdownInput","React","chipInput","styledFieldRef","setChips","newList","e","setGivenList","addChip","newChip","onValueChange","setValue","onAddChip","event","givenList","onRemoveChip","chips","newChips","onEditChip","options","option","o","setCurrentSearchResult","handleValueUpdate","values","setRestartFilter","handleKeyPress","matches","currentSearchResult","c","setDropdownIsOpen","handleClickOutside","document","dropdownItems","x","displayLabel","noteLabel","l","Size","variants","index","placeholder","neutral_600","action","pinTopItem","itemsType","scrollable","actionLabel","multiSelect","onValueUpdate","items","inputId","validationMessage","validationType","critical_500"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom components.\n */\nimport { InputChip } from '../Chips/index';\nimport { Search, TechnicalWarning, User } from '../icons/systemicons/SystemIcons';\nimport { WarningMessage, ErrorMessage } from '../InputFields/styling';\nimport { COLORS } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { ChipInputContainer } from '../Chips/ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { Size } from '../types';\nimport { ChipInputProps } from '../Chips/ChipTypes';\nimport { DropdownButton } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentMStyling, ComponentXXSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  min-width: 344px;\n`;\n\nconst StyledChipInputContainer = styled(ChipInputContainer)`\n  padding: 2px 2px 2px 48px !important;\n  min-height: 56px;\n  max-height: 176px;\n  overflow-y: auto;\n  box-shadow: 0px 0px 0px 1px ${COLORS.neutral_400};\n\n  .medium {\n    margin-right: 8px !important;\n  }\n  .SearchIcon {\n    position: absolute;\n    left: 18px;\n    top: 18px;\n  }\n\n  &:active {\n    background-color: ${COLORS.primary_100};\n  }\n\n  &.invalid {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  }\n  &.alreadyInOrganization {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  }\n\n  &.empty:hover {\n    -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};\n    -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};\n    box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};\n  }\n\n  &.inputHasFocus {\n    -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n  &:hover {\n    -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};\n    -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};\n    box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.white};\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_500};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_700};\n    cursor: pointer;\n  }\n`;\n\nconst ChipInput = styled.input`\n  height: 40px;\n  width: auto;\n  display: inline-flex;\n  border: none;\n  outline: none;\n  margin: 4px;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  color: ${COLORS.black} !important;\n  background-color: inherit;\n`;\n\nconst StyledDropdownButton = styled(DropdownButton)`\n  display: flex;\n  width: 98%;\n  margin-left: 3px;\n  svg {\n    margin: auto 0 auto 0;\n  }\n`;\n\nconst Loading = styled.div`\n  margin: auto 16px auto auto !important;\n  height: 20px;\n  div {\n    height: 20px;\n  }\n`;\n\ninterface List {\n  label: string;\n  secondaryLabel?: string;\n  value: string;\n}\n\ninterface ChipDropdownInputProps extends ChipInputProps {\n  list: List[] | string[];\n  onInputChange?: (input: string) => void;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  isButton?: boolean;\n  autofilledMessage?: string;\n  suggestion?: List;\n  excludeIcon?: boolean;\n  loading?: boolean;\n  maxSelectedItems?: number;\n}\n\nconst ChipDropdownInput: React.FunctionComponent<ChipDropdownInputProps> = ({\n  list,\n  onInputChange,\n  disableSorting,\n  messageOnNoResults,\n  values,\n  inputId,\n  variants,\n  placeholder,\n  validationType,\n  validationMessage,\n  onValueChange,\n  suggestion,\n  excludeIcon,\n  loading,\n  maxSelectedItems,\n}: ChipDropdownInputProps) => {\n  // Initiate states\n  const [givenList, setGivenList] = React.useState<List[]>([]);\n  const [chips, setChips] = React.useState<string[]>([]);\n  const [value, setValue] = React.useState<string>('');\n  const [dropdownIsOpen, setDropdownIsOpen] = React.useState<boolean>(false);\n  const [currentSearchResult, setCurrentSearchResult] = React.useState<List[]>();\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  // Initiate refs\n  const chipInput = React.useRef<any>();\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n    // Let's add initial chip values\n    setChips(values);\n  }, [values]);\n\n  /**\n   * Convert string[] to List[] if necessary\n   */\n  React.useEffect(() => {\n    if (typeof list[0] === 'string') {\n      const newList: List[] = (list as string[]).map((e: string) => ({ label: e, value: e }));\n      setGivenList(newList);\n    } else {\n      setGivenList(list as List[]);\n    }\n  }, [list]);\n\n  const addChip = (newChip: string) => {\n    // Let's add the chip\n    setChips([...chips, newChip]);\n    onValueChange([...chips, newChip]);\n\n    // Let's clear the old value\n    chipInput.current.value = '';\n    setValue('');\n  };\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const onAddChip = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    // Let's trigger only on enter, comma and space key press\n    if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {\n      if (!givenList.find((e) => e.value === value)) {\n        setValue('');\n        return;\n      }\n      // Let's prevent default action - adding new key to the value\n      event.preventDefault();\n\n      addChip(value);\n    }\n    if (event.keyCode === 8 && value === '') {\n      onRemoveChip(chips.length - 1);\n    }\n  };\n\n  /**\n   * Removes a specific chip from the chip list.\n   * @param index - Index of the chip that needs to be removed.\n   * @param elementToAdd - Element which needs to be added in the deleted element place.\n   */\n  const onRemoveChip = (index: number, elementToAdd?: string): void => {\n    // Let's copy the chips\n    const newChips = [...chips];\n\n    // Let's delete the chip\n    // If necessary, let's replace it with a different chip\n    if (elementToAdd) {\n      newChips.splice(index, 1, elementToAdd);\n    } else {\n      newChips.splice(index, 1);\n    }\n\n    // Let's update the chip list\n    setChips([...newChips]);\n    onValueChange([...newChips]);\n  };\n\n  /**\n   * Changes a status of the chip to edit.\n   * @param text - Text of the chip that is being edited.\n   * @param index - Index of the chip in the array.\n   */\n  const onEditChip = (text: string, index: number): void => {\n    // Let's check if we have to add value as a chip (in case we have entered something in the input field)\n    if (chipInput.current.value !== '') {\n      // Let's replace the chip\n      onRemoveChip(index, chipInput.current.value);\n    } else {\n      // Let's just remove the chip\n      onRemoveChip(index);\n    }\n\n    // Let's update the text value of input field\n    chipInput.current.value = text;\n    setValue(text);\n  };\n\n  React.useEffect(() => {\n    let options = [...givenList];\n    if (!restartFilter && value !== '') {\n      options = options.filter((option) => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 ||\n        (option.secondaryLabel && option.secondaryLabel?.toUpperCase().indexOf(value.toUpperCase()) !== -1));\n    }\n    if (!disableSorting) {\n      options = options.sort();\n    }\n    options = options.filter((o) => !chips.includes(o.value));\n    setCurrentSearchResult(options);\n  }, [value, givenList, chips]);\n\n  const handleValueUpdate = (values: string[]) => {\n    setRestartFilter(true);\n    addChip(values[0]);\n    chipInput?.current?.focus();\n  }\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        const matches = currentSearchResult?.filter((c) => c.value.toLowerCase() === value.toLowerCase());\n        if (matches?.length === 1 /*&& onSelect*/) {\n          addChip(matches[0].value);\n          //onSelect(chips);\n        } else if (e.target.value === suggestion?.label) {\n          addChip(e.target.value);\n        }\n\n        setDropdownIsOpen(!dropdownIsOpen);\n        if (matches?.length === 0) {\n          setValue('');\n        }\n      } else if (e.keyCode === 40) {\n        setDropdownIsOpen(!dropdownIsOpen);\n      }\n    }\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (styledFieldRef?.current && !styledFieldRef.current.contains(e.target)) {\n      if (dropdownIsOpen) {\n        setDropdownIsOpen(false);\n        if (!givenList.find((e) => e.value === value)) {\n          setValue('');\n        }\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  /**\n   * Return Chip Input component.\n   */\n\n  let dropdownItems: DropdownItem[] = [];\n  if(currentSearchResult)\n    dropdownItems = currentSearchResult.map(x => ({ value: x.value, displayLabel: x.label, noteLabel: x.secondaryLabel }));\n  \n  if(suggestion && !chips.includes(suggestion.value))\n    dropdownItems = [{ value: suggestion.value, displayLabel: suggestion.label, noteLabel: suggestion.secondaryLabel, suggestion: true }, ...dropdownItems];\n\n  return (\n    <Wrapper>\n      <StyledChipInputContainer\n        id={inputId}\n        onClick={(e: any) => {\n          e.stopPropagation();\n          setDropdownIsOpen(true);\n          chipInput.current.focus();\n        }}\n        className={validationType}\n        ref={styledFieldRef}>\n        <Search size=\"24px\" className=\"SearchIcon\" />\n        {chips?.map((chip: string, index: number) => (\n          <InputChip\n            icon={givenList.find((l: List) => l.value === chip) ? 'User' : undefined}\n            size={Size.Medium}\n            variant={variants && variants?.length && variants[index] ? variants[index] : 'normal'}\n            text={chip}\n            onRemove={() => onRemoveChip(index)}\n            onClick={() => onEditChip(chip, index)}\n            key={`chip_${index}`}></InputChip>\n        ))}\n\n        <ChipInput\n          type=\"text\"\n          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n            setValue(event.target.value);\n            setRestartFilter(false);\n            setDropdownIsOpen(true);\n            if (onInputChange) {\n              onInputChange(event.target.value || '');\n            }\n          }}\n          onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {\n            onAddChip(event);\n          }}\n          placeholder={placeholder && chips?.length === 0 ? placeholder : ''}\n          onClick={(e: any) => {\n            e.stopPropagation();\n            setDropdownIsOpen(true);\n          }}\n          onFocus={() => {\n            setDropdownIsOpen(true);\n          }}\n          ref={chipInput}\n        />\n        {loading ? (\n          <Loading>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </Loading>\n        ) : null}\n      </StyledChipInputContainer>\n      {(!maxSelectedItems || (maxSelectedItems && chips.length < maxSelectedItems)) && (\n        <DropdownContent \n          customizationProps={{\n            action: () => {},\n            pinTopItem: true,\n            \n            itemsType: 'normal',\n            scrollable: true,\n            actionLabel: '',\n            multiSelect: false,\n            onValueUpdate: handleValueUpdate,\n            items: dropdownItems\n          }}\n          focused={focused}\n          setFocused={setFocused}\n          hideOnClickOutside={false}\n          selectedValues={[]}\n          messageOnNoResults={messageOnNoResults ?? ''}\n          setSelectedValues={() => {}}\n          isOpen={dropdownIsOpen}\n          setIsOpen={setDropdownIsOpen}\n          filter={''}\n          isButton={false} \n          id={`${inputId}_dropdowncontent`} />\n      )}\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && validationType === 'warning' ? (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_500} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      ) : (\n        validationType === 'error' && (\n          <ErrorMessage>\n            <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )\n      )}\n    </Wrapper>\n  );\n};\n\nexport default ChipDropdownInput;\n"],"file":"ChipDropdownInput.js"}

package/dist/umd/Dropdown/CommonStyling.js

@@ -309,6 +309,10 @@
 
       div.item-icon {
         margin-right: 6px;
+        svg {
+          display: block;
+          margin: auto;
+        }
       }
       div.item-icon-old {
         flex: 1 0 40px;