@laerdal/life-react-components 1.4.1-dev.10 → 1.4.1-dev.11

package/dist/cjs/AuthPage/Information.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/AuthPage/Information.tsx"],"names":["InformationContainer","AuthPageSection","props","$color","BREAKPOINTS","MEDIUM","InformationContent","styled","div","LARGE","InformationHeader","h2","COLORS","black","InformationText","p","ParagraphTextStyle","Regular","neutral_600","InformationImage","img"],"mappings":";;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;;;AAEO,IAAMA,oBAAoB,GAAG,+BAAOC,wBAAP,CAAH,0LAEjB,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAjB;AAAA,CAFiB,EAI7BC,oBAAYC,MAJiB,CAA1B;;;AAUA,IAAMC,kBAAkB,GAAGC,0BAAOC,GAAV,oSAQ3BJ,oBAAYK,KARe,CAAxB;;;;AAcA,IAAMC,iBAAiB,GAAGH,0BAAOI,EAAV,0IAC1B,mCAAkBC,eAAOC,KAAzB,CAD0B,CAAvB;;;;AAMA,IAAMC,eAAe,GAAGP,0BAAOQ,CAAV,kHACxB,mCAAkBC,2BAAmBC,OAArC,EAA8CL,eAAOM,WAArD,CADwB,CAArB;;;;AAKA,IAAMC,gBAAgB,GAAGZ,0BAAOa,GAAV,6HAAtB","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/cjs/AuthPage/ScreenSetsContainer.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/AuthPage/ScreenSetsContainer.tsx"],"names":["ScreenSetsContainer","AuthPageSection","props","centerContents","BREAKPOINTS","MEDIUM","XLARGE"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAEA,IAAMA,mBAAmB,GAAG,+BAAOC,wBAAP,CAAH,8bAGR,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,QAAvB,GAAkC,OAAvC;AAAA,CAHG,EAcrBC,oBAAYC,MAdS,EAqBrBD,oBAAYE,MArBS,CAAzB;eA4BeN,mB","sourcesContent":["import styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport { BREAKPOINTS } from '../styles';\n\nconst ScreenSetsContainer = styled(AuthPageSection)<{ centerContents: boolean }>`\n  padding: 8px;\n  width: calc(100% - 16px);\n  align-items: ${props => (props.centerContents ? 'center' : 'unset')};\n\n  .gigya-screen-caption {\n    display: none;\n  }\n\n  .gigya-screen {\n    max-width: 100%;\n    margin: auto;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    .gigya-screen {\n      max-width: 500px;\n    }\n  }\n`;\n\nexport default ScreenSetsContainer;\n"],"file":"ScreenSetsContainer.js"}

package/dist/cjs/AuthPage/_AuthPageSection.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/AuthPage/_AuthPageSection.tsx"],"names":["AuthPageSection","styled","section","BREAKPOINTS","MEDIUM"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAEA,IAAMA,eAAe,GAAGC,0BAAOC,OAAV,kNAKjBC,oBAAYC,MALK,CAArB;;eAWeJ,e","sourcesContent":["import styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\n\nconst AuthPageSection = styled.section`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  ${BREAKPOINTS.MEDIUM} {\n    padding: 24px;\n    width: calc(50% - 48px);\n  }\n`;\n\nexport default AuthPageSection;\n"],"file":"_AuthPageSection.js"}

package/dist/cjs/AuthPage/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AuthPage", {
+  enumerable: true,
+  get: function get() {
+    return _AuthPage.default;
+  }
+});
+Object.defineProperty(exports, "InformationContainer", {
+  enumerable: true,
+  get: function get() {
+    return _Information.InformationContainer;
+  }
+});
+Object.defineProperty(exports, "InformationContent", {
+  enumerable: true,
+  get: function get() {
+    return _Information.InformationContent;
+  }
+});
+Object.defineProperty(exports, "InformationHeader", {
+  enumerable: true,
+  get: function get() {
+    return _Information.InformationHeader;
+  }
+});
+Object.defineProperty(exports, "InformationImage", {
+  enumerable: true,
+  get: function get() {
+    return _Information.InformationImage;
+  }
+});
+Object.defineProperty(exports, "InformationText", {
+  enumerable: true,
+  get: function get() {
+    return _Information.InformationText;
+  }
+});
+Object.defineProperty(exports, "ScreenSetsContainer", {
+  enumerable: true,
+  get: function get() {
+    return _ScreenSetsContainer.default;
+  }
+});
+Object.defineProperty(exports, "screenSetsErrorMessages_EN", {
+  enumerable: true,
+  get: function get() {
+    return _screenSetsErrorMessages.screenSetsErrorMessages_EN;
+  }
+});
+
+var _ScreenSetsContainer = _interopRequireDefault(require("./ScreenSetsContainer"));
+
+var _Information = require("./Information");
+
+var _AuthPage = _interopRequireDefault(require("./AuthPage"));
+
+var _screenSetsErrorMessages = require("./screenSetsErrorMessages");
+//# sourceMappingURL=index.js.map

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

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

package/dist/cjs/AuthPage/screenSetsErrorMessages.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.screenSetsErrorMessages_EN = void 0;
+var screenSetsErrorMessages_EN = {
+  email_already_exists: 'An account with that email already exists - try <a href class="sign-in-link" style="font-size: inherit;" data-switch-screen="gigya-login-screen">signing in</a>',
+  email_address_is_invalid: 'Invalid email address',
+  please_enter_fieldname: 'Enter your %fieldname'
+};
+exports.screenSetsErrorMessages_EN = screenSetsErrorMessages_EN;
+//# sourceMappingURL=screenSetsErrorMessages.js.map

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

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

package/dist/cjs/Banners/Banner.js

@@ -0,0 +1,291 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _Button = require("../Button");
+
+var _styles2 = require("./styles");
+
+var _typography = require("../styles/typography");
+
+var _HyperLink = require("../HyperLink");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var BannerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  a {\n    color: ", " !important;\n  }\n"])), function (props) {
+  return props.$type ? props.$type : _styles.COLORS.correct_100;
+}, _styles.COLORS.black, function (props) {
+  return props.bottom ? 'auto' : '0';
+}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, function (props) {
+  return props.link;
+});
+
+var BannerCenter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 0 0 16px;\n  ", " {\n    margin: 0 16px 0 32px;\n  }\n  ", " {\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"])), function (props) {
+  return (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color);
+}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
+
+var ButtonWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 0 0 auto;\n"])));
+
+var ButtonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: contents;\n  ", ";\n"])), function (props) {
+  return props.$type ? (0, _styles2.getButtonStyle)(props.$type) : null;
+});
+
+var BannerContentWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n"])));
+
+var Banner = function Banner(_ref) {
+  var size = _ref.size,
+      type = _ref.type,
+      children = _ref.children,
+      bottom = _ref.bottom,
+      testId = _ref.testId,
+      linkText = _ref.linkText,
+      link = _ref.link,
+      onClose = _ref.onClose,
+      icon = _ref.icon,
+      noIcon = _ref.noIcon;
+
+  var _React$useState = React.useState(window.innerWidth),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      width = _React$useState2[0],
+      setWidth = _React$useState2[1];
+
+  React.useEffect(function () {
+    function handleResize() {
+      setWidth(window.innerWidth);
+    }
+
+    window.addEventListener('resize', handleResize);
+  });
+  var formatTypeToLowerCase = type === null || type === void 0 ? void 0 : type.toLowerCase();
+
+  switch (formatTypeToLowerCase) {
+    case 'warning':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContainer, {
+        "data-testid": testId,
+        $type: _styles.COLORS.warning_100,
+        link: _styles.COLORS.warning_700,
+        hover: _styles.COLORS.warning_20,
+        bottom: bottom,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(BannerCenter, {
+          $color: _styles.COLORS.warning_700,
+          className: size,
+          children: [icon ? icon : noIcon ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Help, {
+            color: _styles.COLORS.warning_700,
+            size: "24px"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContentWrapper, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_typography.ComponentResponsive, {
+              size: size,
+              width: width,
+              color: _styles.COLORS.warning_700,
+              children: [children, "\xA0\xA0", link && linkText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HyperLink.HyperLink, {
+                id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
+                href: link,
+                variant: "default",
+                children: linkText
+              })]
+            })
+          }), onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonWrapper, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
+              $type: formatTypeToLowerCase,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+                variant: "secondary",
+                shape: "circular",
+                useTransparentBackground: true,
+                focusBackgroundColor: _styles.COLORS.white,
+                action: function action() {
+                  return onClose();
+                },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
+                  color: _styles.COLORS.warning_500,
+                  size: "24px"
+                })
+              })
+            })
+          })]
+        })
+      });
+
+    case 'critical':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContainer, {
+        "data-testid": testId,
+        $type: _styles.COLORS.critical_100,
+        link: _styles.COLORS.critical_700,
+        hover: _styles.COLORS.critical_20,
+        bottom: bottom,
+        className: size,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(BannerCenter, {
+          $color: _styles.COLORS.critical_700,
+          className: size,
+          children: [icon ? icon : noIcon ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
+            color: _styles.COLORS.critical_700,
+            size: "24px"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContentWrapper, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_typography.ComponentResponsive, {
+              size: size,
+              width: width,
+              color: _styles.COLORS.critical_700,
+              children: [children, "\xA0\xA0", link && linkText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HyperLink.HyperLink, {
+                id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
+                href: link,
+                variant: "default",
+                children: linkText
+              })]
+            })
+          }), onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonWrapper, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
+              $type: formatTypeToLowerCase,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+                variant: "secondary",
+                shape: "circular",
+                useTransparentBackground: true,
+                focusBackgroundColor: _styles.COLORS.white,
+                action: function action() {
+                  return onClose();
+                },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
+                  color: _styles.COLORS.critical_500,
+                  size: "24px"
+                })
+              })
+            })
+          })]
+        })
+      });
+
+    case 'positive':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContainer, {
+        "data-testid": testId,
+        $type: _styles.COLORS.correct_100,
+        link: _styles.COLORS.correct_700,
+        hover: _styles.COLORS.correct_20,
+        bottom: bottom,
+        className: size,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(BannerCenter, {
+          $color: _styles.COLORS.correct_700,
+          className: size,
+          children: [icon ? icon : noIcon ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ThumbsUp, {
+            color: _styles.COLORS.correct_700,
+            size: "24px"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContentWrapper, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_typography.ComponentResponsive, {
+              size: size,
+              width: width,
+              color: _styles.COLORS.correct_700,
+              children: [children, "\xA0\xA0", link && linkText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HyperLink.HyperLink, {
+                id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
+                href: link,
+                variant: "default",
+                children: linkText
+              })]
+            })
+          }), onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonWrapper, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
+              $type: formatTypeToLowerCase,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+                variant: "secondary",
+                shape: "circular",
+                useTransparentBackground: true,
+                focusBackgroundColor: _styles.COLORS.white,
+                action: function action() {
+                  return onClose();
+                },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
+                  color: _styles.COLORS.correct_500,
+                  size: "24px"
+                })
+              })
+            })
+          })]
+        })
+      });
+
+    default:
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContainer, {
+        "data-testid": testId,
+        $type: _styles.COLORS.primary_100,
+        link: _styles.COLORS.primary_700,
+        hover: _styles.COLORS.primary_20,
+        bottom: bottom,
+        className: size,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(BannerCenter, {
+          $color: _styles.COLORS.primary_700,
+          className: size,
+          children: [icon ? icon : noIcon ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Tip, {
+            color: _styles.COLORS.primary_700,
+            size: "24px"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContentWrapper, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_typography.ComponentResponsive, {
+              size: size,
+              width: width,
+              color: _styles.COLORS.primary_700,
+              children: [children, "\xA0\xA0", link && linkText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HyperLink.HyperLink, {
+                id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
+                href: link,
+                variant: "default",
+                children: linkText
+              })]
+            })
+          }), onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonWrapper, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
+              $type: "neutral",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+                variant: "secondary",
+                shape: "circular",
+                useTransparentBackground: true,
+                focusBackgroundColor: _styles.COLORS.white,
+                action: function action() {
+                  return onClose();
+                },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
+                  color: _styles.COLORS.primary_500,
+                  size: "24px"
+                })
+              })
+            })
+          })]
+        })
+      });
+  }
+};
+
+Banner.propTypes = {
+  type: _propTypes.default.string,
+  link: _propTypes.default.string,
+  linkText: _propTypes.default.string,
+  hover: _propTypes.default.string,
+  bottom: _propTypes.default.bool,
+  testId: _propTypes.default.string,
+  icon: _propTypes.default.node,
+  onClose: _propTypes.default.func,
+  noIcon: _propTypes.default.bool
+};
+var _default = Banner;
+exports.default = _default;
+//# sourceMappingURL=Banner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","link","BannerCenter","ComponentTextStyle","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","React","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_20","Math","floor","random","white","warning_500","critical_100","critical_700","critical_20","critical_500","correct_700","correct_20","correct_500","primary_100","primary_700","primary_20","primary_500","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { 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 focusBackgroundColor={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 focusBackgroundColor={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 focusBackgroundColor={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 focusBackgroundColor={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/cjs/Banners/OverviewBanner.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _Layouts = require("../Layouts");
+
+var _typography = require("../styles/typography");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var BannersWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), _styles.COLORS.primary_20);
+
+var BannerContent = (0, _styledComponents.default)(_Layouts.PageWidth)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  ", " {\n    flex-direction: row;\n    padding: 48px 12px;\n  }\n\n  & > *:first-child {\n    padding-top: 12px;\n    width: 320px;\n    height: 180px;\n    ", " {\n      padding-top: 0;\n      margin-right: 20px;\n      width: 384px;\n      height: 216px;\n    }\n  }\n  & h2 {\n    ", "\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    ", " {\n      margin-left: 20px;\n      align-items: start;\n      justify-content: start;\n      width: 384px;\n    }\n  }\n"])), _styles.COLORS.primary_20, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.MEDIUM, (0, _typography.HeadlineXSStyling)(_styles.COLORS.black), _styles.BREAKPOINTS.MEDIUM);
+
+var OverviewBanner = function OverviewBanner(_ref) {
+  var children = _ref.children,
+      testId = _ref.testId;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannersWrapper, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContent, {
+      "data-testid": testId,
+      children: children
+    })
+  });
+};
+
+OverviewBanner.propTypes = {
+  children: _propTypes.default.any.isRequired,
+  testId: _propTypes.default.string
+};
+var _default = OverviewBanner;
+exports.default = _default;
+//# sourceMappingURL=OverviewBanner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Banners/OverviewBanner.tsx"],"names":["BannersWrapper","styled","div","COLORS","primary_20","BannerContent","PageWidth","BREAKPOINTS","MEDIUM","black","OverviewBanner","children","testId"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,cAAc,GAAGC,0BAAOC,GAAV,iHACEC,eAAOC,UADT,CAApB;;AAIA,IAAMC,aAAa,GAAG,+BAAOC,kBAAP,CAAH,w3BACGH,eAAOC,UADV,EAOfG,oBAAYC,MAPG,EAgBbD,oBAAYC,MAhBC,EAwBb,mCAAkBL,eAAOM,KAAzB,CAxBa,EAsCbF,oBAAYC,MAtCC,CAAnB;;AAiDA,IAAME,cAAc,GAAG,SAAjBA,cAAiB,OAAiC;AAAA,MAA9BC,QAA8B,QAA9BA,QAA8B;AAAA,MAApBC,MAAoB,QAApBA,MAAoB;AACtD,sBACE,qBAAC,cAAD;AAAA,2BACE,qBAAC,aAAD;AAAe,qBAAaA,MAA5B;AAAA,gBAAqCD;AAArC;AADF,IADF;AAKD,CAND;;;AAFeA,EAAAA,Q;AAAeC,EAAAA,M;;eAUfF,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/cjs/Banners/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Banner", {
+  enumerable: true,
+  get: function get() {
+    return _Banner.default;
+  }
+});
+Object.defineProperty(exports, "OverviewBanner", {
+  enumerable: true,
+  get: function get() {
+    return _OverviewBanner.default;
+  }
+});
+
+var _Banner = _interopRequireDefault(require("./Banner"));
+
+var _OverviewBanner = _interopRequireDefault(require("./OverviewBanner"));
+//# sourceMappingURL=index.js.map

package/dist/cjs/Banners/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Banners/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["import Banner from './Banner';\nimport OverviewBanner from './OverviewBanner';\n\n// eslint-disable-next-line import/prefer-default-export\nexport { Banner, OverviewBanner };\n"],"file":"index.js"}