@laerdal/life-react-components 1.4.1-dev.2 → 1.4.1-dev.4.full

package/dist/umd/Banners/Banner.js

@@ -0,0 +1,336 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "../styles", "../icons/systemicons/SystemIcons", "../Button", "./styles", "../styles/typography", "../HyperLink"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("../Button"), require("./styles"), require("../styles/typography"), require("../HyperLink"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.SystemIcons, global.Button, global.styles, global.typography, global.HyperLink);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _SystemIcons, _Button, _styles2, _typography, _HyperLink) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (nodeInterop) {
+      return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+  }
+
+  function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+      return obj;
+    }
+
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+      return {
+        default: obj
+      };
+    }
+
+    var cache = _getRequireWildcardCache(nodeInterop);
+
+    if (cache && cache.has(obj)) {
+      return cache.get(obj);
+    }
+
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+
+    for (var key in obj) {
+      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+        var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+
+        if (desc && (desc.get || desc.set)) {
+          Object.defineProperty(newObj, key, desc);
+        } else {
+          newObj[key] = obj[key];
+        }
+      }
+    }
+
+    newObj.default = obj;
+
+    if (cache) {
+      cache.set(obj, newObj);
+    }
+
+    return newObj;
+  }
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  /**
+   * Styles for <Banner />
+   */
+  const BannerContainer = _styledComponents2.default.div`
+  background: ${props => props.$type ? props.$type : _styles.COLORS.correct_100};
+  min-height: 48px;
+  display: flex;
+  color: ${_styles.COLORS.black};
+  margin-top: ${props => props.bottom ? 'auto' : '0'};
+
+  button:last-child {
+    line-height: 0;
+    margin: 0 0 0 8px;
+    ${_styles.BREAKPOINTS.MEDIUM} {
+      margin: 0 0 0 16px;
+    }
+    ${_styles.BREAKPOINTS.LARGE} {
+      margin: 0 0 0 32px;
+    }
+    &.small {
+      margin: 0 0 0 8px;
+    }
+    &.medium {
+      margin: 0 0 0 16px;
+    }
+    &.large {
+      margin: 0 0 0 32px;
+    }
+  }
+
+  a {
+    color: ${props => props.link} !important;
+  }
+`;
+  const BannerCenter = _styledComponents2.default.div`
+  ${props => (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color)}
+
+  display: flex;
+  width: 100%;
+  margin: 0 0 0 16px;
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    margin: 0 16px 0 32px;
+  }
+  ${_styles.BREAKPOINTS.LARGE} {
+    margin: 0 40px 0 56px;
+  }
+  &.small {
+    margin: 0 0 0 16px;
+  }
+  &.medium {
+    margin: 0 16px 0 32px;
+  }
+  &.large {
+    margin: 0 40px 0 56px;
+  }
+
+  > svg {
+    flex-shrink: 0;
+    margin: 12px 0;
+  }
+`;
+  const ButtonWrapper = _styledComponents2.default.div`
+  margin: 0 0 0 auto;
+`;
+  const ButtonContainer = _styledComponents2.default.div`
+  display: contents;
+  ${props => props.$type ? (0, _styles2.getButtonStyle)(props.$type) : null};
+`;
+  const BannerContentWrapper = _styledComponents2.default.div`
+  display: flex;
+  align-items: center;
+  margin: 12px 0;
+  &:not(:first-child) {
+    margin-left: 8px;
+  }
+`;
+
+  const Banner = ({
+    size,
+    type,
+    children,
+    bottom,
+    testId,
+    linkText,
+    link,
+    onClose,
+    icon,
+    noIcon
+  }) => {
+    const [width, setWidth] = React.useState(window.innerWidth);
+    React.useEffect(() => {
+      function handleResize() {
+        setWidth(window.innerWidth);
+      }
+
+      window.addEventListener('resize', handleResize);
+    });
+    const formatTypeToLowerCase = type?.toLowerCase();
+
+    switch (formatTypeToLowerCase) {
+      case 'warning':
+        return /*#__PURE__*/React.createElement(BannerContainer, {
+          "data-testid": testId,
+          $type: _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,
+          className: size
+        }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.Help, {
+          color: _styles.COLORS.warning_700,
+          size: "24px"
+        }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, /*#__PURE__*/React.createElement(_typography.ComponentResponsive, {
+          size: size,
+          width: width,
+          color: _styles.COLORS.warning_700
+        }, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement(_HyperLink.HyperLink, {
+          id: `${Math.floor(Math.random() * 999999999999)}_BannerLink`,
+          href: link,
+          variant: "default"
+        }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
+          $type: formatTypeToLowerCase
+        }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          useTransparentBackground: true,
+          tabbedHereBackgroundColor: _styles.COLORS.white,
+          action: () => onClose()
+        }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
+          color: _styles.COLORS.warning_500,
+          size: "24px"
+        }))))));
+
+      case 'critical':
+        return /*#__PURE__*/React.createElement(BannerContainer, {
+          "data-testid": testId,
+          $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,
+          className: size
+        }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
+          color: _styles.COLORS.critical_700,
+          size: "24px"
+        }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, /*#__PURE__*/React.createElement(_typography.ComponentResponsive, {
+          size: size,
+          width: width,
+          color: _styles.COLORS.critical_700
+        }, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement(_HyperLink.HyperLink, {
+          id: `${Math.floor(Math.random() * 999999999999)}_BannerLink`,
+          href: link,
+          variant: "default"
+        }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
+          $type: formatTypeToLowerCase
+        }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          useTransparentBackground: true,
+          tabbedHereBackgroundColor: _styles.COLORS.white,
+          action: () => onClose()
+        }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
+          color: _styles.COLORS.critical_500,
+          size: "24px"
+        }))))));
+
+      case 'positive':
+        return /*#__PURE__*/React.createElement(BannerContainer, {
+          "data-testid": testId,
+          $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,
+          className: size
+        }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.ThumbsUp, {
+          color: _styles.COLORS.correct_700,
+          size: "24px"
+        }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, /*#__PURE__*/React.createElement(_typography.ComponentResponsive, {
+          size: size,
+          width: width,
+          color: _styles.COLORS.correct_700
+        }, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement(_HyperLink.HyperLink, {
+          id: `${Math.floor(Math.random() * 999999999999)}_BannerLink`,
+          href: link,
+          variant: "default"
+        }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
+          $type: formatTypeToLowerCase
+        }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          useTransparentBackground: true,
+          tabbedHereBackgroundColor: _styles.COLORS.white,
+          action: () => onClose()
+        }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
+          color: _styles.COLORS.correct_500,
+          size: "24px"
+        }))))));
+
+      default:
+        return /*#__PURE__*/React.createElement(BannerContainer, {
+          "data-testid": testId,
+          $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,
+          className: size
+        }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.Tip, {
+          color: _styles.COLORS.primary_700,
+          size: "24px"
+        }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, /*#__PURE__*/React.createElement(_typography.ComponentResponsive, {
+          size: size,
+          width: width,
+          color: _styles.COLORS.primary_700
+        }, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement(_HyperLink.HyperLink, {
+          id: `${Math.floor(Math.random() * 999999999999)}_BannerLink`,
+          href: link,
+          variant: "default"
+        }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
+          $type: "neutral"
+        }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          useTransparentBackground: true,
+          tabbedHereBackgroundColor: _styles.COLORS.white,
+          action: () => onClose()
+        }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
+          color: _styles.COLORS.primary_500,
+          size: "24px"
+        }))))));
+    }
+  };
+
+  Banner.propTypes = {
+    type: _propTypes2.default.string,
+    link: _propTypes2.default.string,
+    linkText: _propTypes2.default.string,
+    hover: _propTypes2.default.string,
+    bottom: _propTypes2.default.bool,
+    testId: _propTypes2.default.string,
+    icon: _propTypes2.default.node,
+    onClose: _propTypes2.default.func,
+    noIcon: _propTypes2.default.bool
+  };
+  exports.default = Banner;
+});
+//# sourceMappingURL=Banner.js.map

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

@@ -0,0 +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;AAGA,QAAMA,eAAe,GAAGC,2BAAOC,GAAsB;AACrD,gBAAiBC,KAAD,IAA8BA,KAAK,CAALA,KAAAA,GAAcA,KAAK,CAAnBA,KAAAA,GAA4BC,eAAOC,WAAa;AAC9F;AACA;AACA,WAAWD,eAAOE,KAAM;AACxB,gBAAiBH,KAAD,IAA8BA,KAAK,CAALA,MAAAA,GAAAA,MAAAA,GAAwB,GAAK;AAC3E;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,GAAwB;AACpD,IAAKC,KAAD,IAAWS,mCAAkBC,2BAAD,OAAjBD,EAA8CT,KAAK,CAAlC,MAAjBS,CAA4D;AAC3E;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,GAAwB;AACvD;AACA,IAAKC,KAAD,IAAYA,KAAK,CAALA,KAAAA,GAAca,6BAAeb,KAAK,CAAlCA,KAAca,CAAdb,GAA4C,IAAM;AAFlE,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,KAAK,EAAEd,eAA7C,WAAA;AAAiE,UAAA,IAAI,EAAEA,eAAvE,WAAA;AAA2F,UAAA,KAAK,EAAEA,eAAlG,UAAA;AAAqH,UAAA,MAAM,EAAEiB;AAA7H,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAc,UAAA,MAAM,EAAEjB,eAAtB,WAAA;AAA0C,UAAA,SAAS,EAAE2B;AAArD,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,KAAK,EAAEM;AAAxB,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,KAAK,EAAEA,eAA7C,YAAA;AAAkE,UAAA,IAAI,EAAEA,eAAxE,YAAA;AAA6F,UAAA,KAAK,EAAEA,eAApG,WAAA;AAAwH,UAAA,MAAM,EAA9H,MAAA;AAAwI,UAAA,SAAS,EAAE2B;AAAnJ,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAc,UAAA,MAAM,EAAE3B,eAAtB,YAAA;AAA2C,UAAA,SAAS,EAAE2B;AAAtD,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,KAAK,EAAEM;AAAxB,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,KAAK,EAAEA,eAA7C,WAAA;AAAiE,UAAA,IAAI,EAAEA,eAAvE,WAAA;AAA2F,UAAA,KAAK,EAAEA,eAAlG,UAAA;AAAqH,UAAA,MAAM,EAA3H,MAAA;AAAqI,UAAA,SAAS,EAAE2B;AAAhJ,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAc,UAAA,MAAM,EAAE3B,eAAtB,WAAA;AAA0C,UAAA,SAAS,EAAE2B;AAArD,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,KAAK,EAAEM;AAAxB,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,KAAK,EAAEA,eAA7C,WAAA;AAAiE,UAAA,IAAI,EAAEA,eAAvE,WAAA;AAA2F,UAAA,KAAK,EAAEA,eAAlG,UAAA;AAAqH,UAAA,MAAM,EAA3H,MAAA;AAAqI,UAAA,SAAS,EAAE2B;AAAhJ,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAc,UAAA,MAAM,EAAE3B,eAAtB,WAAA;AAA0C,UAAA,SAAS,EAAE2B;AAArD,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,KAAK,EAAC;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,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 */\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/Banners/OverviewBanner.js

@@ -0,0 +1,147 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "../styles", "../Layouts", "../styles/typography"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../Layouts"), require("../styles/typography"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.Layouts, global.typography);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _Layouts, _typography) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (nodeInterop) {
+      return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+  }
+
+  function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+      return obj;
+    }
+
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+      return {
+        default: obj
+      };
+    }
+
+    var cache = _getRequireWildcardCache(nodeInterop);
+
+    if (cache && cache.has(obj)) {
+      return cache.get(obj);
+    }
+
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+
+    for (var key in obj) {
+      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+        var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+
+        if (desc && (desc.get || desc.set)) {
+          Object.defineProperty(newObj, key, desc);
+        } else {
+          newObj[key] = obj[key];
+        }
+      }
+    }
+
+    newObj.default = obj;
+
+    if (cache) {
+      cache.set(obj, newObj);
+    }
+
+    return newObj;
+  }
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const BannersWrapper = _styledComponents2.default.div`
+  background-color: ${_styles.COLORS.primary_20};
+`;
+  const BannerContent = (0, _styledComponents2.default)(_Layouts.PageWidth)`
+  background-color: ${_styles.COLORS.primary_20};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    flex-direction: row;
+    padding: 48px 12px;
+  }
+
+  & > *:first-child {
+    padding-top: 12px;
+    width: 320px;
+    height: 180px;
+    ${_styles.BREAKPOINTS.MEDIUM} {
+      padding-top: 0;
+      margin-right: 20px;
+      width: 384px;
+      height: 216px;
+    }
+  }
+  & h2 {
+    ${(0, _typography.HeadlineXSStyling)(_styles.COLORS.black)}
+    margin: 16px 0 24px 0;
+  }
+  & p {
+    margin: 0;
+    padding: 0 0 28px 0;
+    max-width: 310px;
+  }
+  & div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    margin-bottom: 18px;
+    ${_styles.BREAKPOINTS.MEDIUM} {
+      margin-left: 20px;
+      align-items: start;
+      justify-content: start;
+      width: 384px;
+    }
+  }
+`;
+
+  const OverviewBanner = ({
+    children,
+    testId
+  }) => {
+    return /*#__PURE__*/React.createElement(BannersWrapper, null, /*#__PURE__*/React.createElement(BannerContent, {
+      "data-testid": testId
+    }, children));
+  };
+
+  OverviewBanner.propTypes = {
+    children: _propTypes2.default.any.isRequired,
+    testId: _propTypes2.default.string
+  };
+  exports.default = OverviewBanner;
+});
+//# sourceMappingURL=OverviewBanner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Banners/OverviewBanner.tsx"],"names":["BannersWrapper","styled","div","COLORS","primary_20","BannerContent","BREAKPOINTS","MEDIUM","HeadlineXSStyling","children","testId","OverviewBanner"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,QAAMA,cAAc,GAAGC,2BAAOC,GAAI;AAClC,sBAAsBC,eAAOC,UAAW;AADxC,CAAA;AAIA,QAAMC,aAAa,GAAGJ,gCAAM,kBAANA,CAAkB;AACxC,sBAAsBE,eAAOC,UAAW;AACxC;AACA;AACA;AACA;AACA;AACA,IAAIE,oBAAYC,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMD,oBAAYC,MAAO;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,mCAAkBL,eAAD,KAAjBK,CAAgC;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMF,oBAAYC,MAAO;AACzB;AACA;AACA;AACA;AACA;AACA;AA5CA,CAAA;;AAiDA,QAAMI,cAAc,GAAG,CAAC;AAAA,IAAA,QAAA;AAAYD,IAAAA;AAAZ,GAAD,KAAiC;AACtD,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAe,qBAAaA;AAA5B,KAAA,EAFJ,QAEI,CADF,CADF;AADF,GAAA;;;AAFeD,IAAAA,Q;AAAeC,IAAAA,M;;oBAU9B,c","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS} from '../styles';\nimport {PageWidth} from '../Layouts';\nimport {HeadlineXSStyling} from '../styles/typography';\n\nconst BannersWrapper = styled.div`\n  background-color: ${COLORS.primary_20};\n`;\n\nconst BannerContent = styled(PageWidth)`\n  background-color: ${COLORS.primary_20};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n    padding: 48px 12px;\n  }\n\n  & > *:first-child {\n    padding-top: 12px;\n    width: 320px;\n    height: 180px;\n    ${BREAKPOINTS.MEDIUM} {\n      padding-top: 0;\n      margin-right: 20px;\n      width: 384px;\n      height: 216px;\n    }\n  }\n  & h2 {\n    ${HeadlineXSStyling(COLORS.black)}\n    margin: 16px 0 24px 0;\n  }\n  & p {\n    margin: 0;\n    padding: 0 0 28px 0;\n    max-width: 310px;\n  }\n  & div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    margin-bottom: 18px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin-left: 20px;\n      align-items: start;\n      justify-content: start;\n      width: 384px;\n    }\n  }\n`;\n\ntype Props = { children: any; testId?: string };\n\nconst OverviewBanner = ({ children, testId }: Props) => {\n  return (\n    <BannersWrapper>\n      <BannerContent data-testid={testId}>{children}</BannerContent>\n    </BannersWrapper>\n  );\n};\n\nexport default OverviewBanner;\n"],"file":"OverviewBanner.js"}

package/dist/umd/Banners/__tests__/Banner.test.js

@@ -0,0 +1,70 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["react", "@testing-library/react", "../index", "../../styles", "jest-styled-components"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("react"), require("@testing-library/react"), require("../index"), require("../../styles"), require("jest-styled-components"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global.react, global.react, global.index, global.styles, global.jestStyledComponents);
+    global.undefined = mod.exports;
+  }
+})(this, function (_react, _react3, _index, _styles) {
+  "use strict";
+
+  var _react2 = _interopRequireDefault(_react);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  describe('<Banner />', () => {
+    it('Renders warning banner', async () => {
+      const {
+        queryByText,
+        getByTestId
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.Banner, {
+        type: "warning",
+        testId: "TestBanner"
+      }, /*#__PURE__*/_react2.default.createElement("h2", null, "TestBanner")));
+      expect(queryByText('TestHeader')).toBeDefined();
+      expect(getByTestId('TestBanner')).toHaveStyleRule('background', _styles.COLORS.warning_100);
+    });
+    it('Renders critial banner', async () => {
+      const {
+        queryByText,
+        getByTestId
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.Banner, {
+        type: "critical",
+        testId: "TestBanner"
+      }, /*#__PURE__*/_react2.default.createElement("h2", null, "TestBanner")));
+      expect(queryByText('TestHeader')).toBeDefined();
+      expect(getByTestId('TestBanner')).toHaveStyleRule('background', _styles.COLORS.critical_100);
+    });
+    it('Renders positive banner', async () => {
+      const {
+        queryByText,
+        getByTestId
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.Banner, {
+        type: "positive",
+        testId: "TestBanner"
+      }, /*#__PURE__*/_react2.default.createElement("h2", null, "TestBanner")));
+      expect(queryByText('TestHeader')).toBeDefined();
+      expect(getByTestId('TestBanner')).toHaveStyleRule('background', _styles.COLORS.correct_100);
+    });
+    it('Renders default banner', async () => {
+      const {
+        queryByText,
+        getByTestId
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.Banner, {
+        testId: "TestBanner"
+      }, /*#__PURE__*/_react2.default.createElement("h2", null, "TestBanner")));
+      expect(queryByText('TestHeader')).toBeDefined();
+      expect(getByTestId('TestBanner')).toHaveStyleRule('background', _styles.COLORS.primary_100);
+    });
+  });
+});
+//# sourceMappingURL=Banner.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Banners/__tests__/Banner.test.tsx"],"names":["describe","it","getByTestId","render","expect","queryByText","COLORS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAMAA,EAAAA,QAAQ,CAAA,YAAA,EAAe,MAAM;AAC3BC,IAAAA,EAAE,CAAA,wBAAA,EAA2B,YAAY;AACvC,YAAM;AAAA,QAAA,WAAA;AAAeC,QAAAA;AAAf,UAA+BC,qBAAM,aACzC,gBAAA,aAAA,CAAA,aAAA,EAAA;AAAQ,QAAA,IAAI,EAAZ,SAAA;AAAuB,QAAA,MAAM,EAAC;AAA9B,OAAA,EAAA,aACE,gBAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAFJ,YAEI,CADF,CADmCA,CAArC;AAKAC,MAAAA,MAAM,CAACC,WAAW,CAAlBD,YAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACF,WAAW,CAAlBE,YAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,YAAAA,EAAgEE,eAAhEF,WAAAA;AAPFH,KAAE,CAAFA;AASAA,IAAAA,EAAE,CAAA,wBAAA,EAA2B,YAAY;AACvC,YAAM;AAAA,QAAA,WAAA;AAAeC,QAAAA;AAAf,UAA+BC,qBAAM,aACzC,gBAAA,aAAA,CAAA,aAAA,EAAA;AAAQ,QAAA,IAAI,EAAZ,UAAA;AAAwB,QAAA,MAAM,EAAC;AAA/B,OAAA,EAAA,aACE,gBAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAFJ,YAEI,CADF,CADmCA,CAArC;AAKAC,MAAAA,MAAM,CAACC,WAAW,CAAlBD,YAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACF,WAAW,CAAlBE,YAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,YAAAA,EAAgEE,eAAhEF,YAAAA;AAPFH,KAAE,CAAFA;AASAA,IAAAA,EAAE,CAAA,yBAAA,EAA4B,YAAY;AACxC,YAAM;AAAA,QAAA,WAAA;AAAeC,QAAAA;AAAf,UAA+BC,qBAAM,aACzC,gBAAA,aAAA,CAAA,aAAA,EAAA;AAAQ,QAAA,IAAI,EAAZ,UAAA;AAAwB,QAAA,MAAM,EAAC;AAA/B,OAAA,EAAA,aACE,gBAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAFJ,YAEI,CADF,CADmCA,CAArC;AAKAC,MAAAA,MAAM,CAACC,WAAW,CAAlBD,YAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACF,WAAW,CAAlBE,YAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,YAAAA,EAAgEE,eAAhEF,WAAAA;AAPFH,KAAE,CAAFA;AASAA,IAAAA,EAAE,CAAA,wBAAA,EAA2B,YAAY;AACvC,YAAM;AAAA,QAAA,WAAA;AAAeC,QAAAA;AAAf,UAA+BC,qBAAM,aACzC,gBAAA,aAAA,CAAA,aAAA,EAAA;AAAQ,QAAA,MAAM,EAAC;AAAf,OAAA,EAAA,aACE,gBAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAFJ,YAEI,CADF,CADmCA,CAArC;AAKAC,MAAAA,MAAM,CAACC,WAAW,CAAlBD,YAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACF,WAAW,CAAlBE,YAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,YAAAA,EAAgEE,eAAhEF,WAAAA;AAPFH,KAAE,CAAFA;AA5BFD,GAAQ,CAARA","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport { Banner } from '../index';\nimport 'jest-styled-components';\nimport { COLORS } from '../../styles';\n\ndescribe('<Banner />', () => {\n  it('Renders warning banner', async () => {\n    const { queryByText, getByTestId } = render(\n      <Banner type=\"warning\" testId=\"TestBanner\">\n        <h2>TestBanner</h2>\n      </Banner>,\n    );\n    expect(queryByText('TestHeader')).toBeDefined();\n    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.warning_100);\n  });\n  it('Renders critial banner', async () => {\n    const { queryByText, getByTestId } = render(\n      <Banner type=\"critical\" testId=\"TestBanner\">\n        <h2>TestBanner</h2>\n      </Banner>,\n    );\n    expect(queryByText('TestHeader')).toBeDefined();\n    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.critical_100);\n  });\n  it('Renders positive banner', async () => {\n    const { queryByText, getByTestId } = render(\n      <Banner type=\"positive\" testId=\"TestBanner\">\n        <h2>TestBanner</h2>\n      </Banner>,\n    );\n    expect(queryByText('TestHeader')).toBeDefined();\n    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.correct_100);\n  });\n  it('Renders default banner', async () => {\n    const { queryByText, getByTestId } = render(\n      <Banner testId=\"TestBanner\">\n        <h2>TestBanner</h2>\n      </Banner>,\n    );\n    expect(queryByText('TestHeader')).toBeDefined();\n    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.primary_100);\n  });\n});\n"],"file":"Banner.test.js"}

package/dist/umd/Banners/__tests__/OverviewBanner.test.js

@@ -0,0 +1,37 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["react", "@testing-library/react", "../index", "../../styles", "jest-styled-components"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("react"), require("@testing-library/react"), require("../index"), require("../../styles"), require("jest-styled-components"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global.react, global.react, global.index, global.styles, global.jestStyledComponents);
+    global.undefined = mod.exports;
+  }
+})(this, function (_react, _react3, _index, _styles) {
+  "use strict";
+
+  var _react2 = _interopRequireDefault(_react);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  describe('<OverviewBanner />', () => {
+    it('Renders', async () => {
+      const {
+        queryByText,
+        getByTestId
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.OverviewBanner, {
+        testId: "TestBanner"
+      }, /*#__PURE__*/_react2.default.createElement("h2", null, "TestHeader")));
+      expect(queryByText('TestHeader')).toBeDefined();
+      expect(getByTestId('TestBanner')).toHaveStyleRule('background-color', _styles.COLORS.primary_20);
+    });
+  });
+});
+//# sourceMappingURL=OverviewBanner.test.js.map

package/dist/umd/Banners/__tests__/OverviewBanner.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Banners/__tests__/OverviewBanner.test.tsx"],"names":["describe","it","getByTestId","render","expect","queryByText","COLORS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAMAA,EAAAA,QAAQ,CAAA,oBAAA,EAAuB,MAAM;AACnCC,IAAAA,EAAE,CAAA,SAAA,EAAY,YAAY;AACxB,YAAM;AAAA,QAAA,WAAA;AAAeC,QAAAA;AAAf,UAA+BC,qBAAM,aACzC,gBAAA,aAAA,CAAA,qBAAA,EAAA;AAAgB,QAAA,MAAM,EAAC;AAAvB,OAAA,EAAA,aACE,gBAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAFJ,YAEI,CADF,CADmCA,CAArC;AAKAC,MAAAA,MAAM,CAACC,WAAW,CAAlBD,YAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACF,WAAW,CAAlBE,YAAkB,CAAZ,CAANA,CAAAA,eAAAA,CAAAA,kBAAAA,EAAsEE,eAAtEF,UAAAA;AAPFH,KAAE,CAAFA;AADFD,GAAQ,CAARA","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport { OverviewBanner } from '../index';\nimport 'jest-styled-components';\nimport { COLORS } from '../../styles';\n\ndescribe('<OverviewBanner />', () => {\n  it('Renders', async () => {\n    const { queryByText, getByTestId } = render(\n      <OverviewBanner testId=\"TestBanner\">\n        <h2>TestHeader</h2>\n      </OverviewBanner>,\n    );\n    expect(queryByText('TestHeader')).toBeDefined();\n    expect(getByTestId('TestBanner')).toHaveStyleRule('background-color', COLORS.primary_20);\n  });\n});\n"],"file":"OverviewBanner.test.js"}