@laerdal/life-react-components 1.4.1-dev.1.full → 1.4.1-dev.13

package/dist/Banners/Banner.js

@@ -0,0 +1,265 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
+import { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';
+import { IconButton } from '../Button';
+import { getButtonStyle } from './styles';
+import { ComponentMStyling, ComponentResponsive } from '../styles/typography';
+import { HyperLink } from '../HyperLink';
+/**
+ * Styles for <Banner />
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 : COLORS.correct_100;
+}, COLORS.black, function (props) {
+  return props.bottom ? 'auto' : '0';
+}, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, function (props) {
+  return props.link;
+});
+var BannerCenter = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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 ComponentMStyling(ComponentTextStyle.Regular, props.$color);
+}, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
+var ButtonWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0 0 0 auto;\n"])));
+var ButtonContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: contents;\n  ", ";\n"])), function (props) {
+  return props.$type ? getButtonStyle(props.$type) : null;
+});
+var BannerContentWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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 = _slicedToArray(_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__*/_jsx(BannerContainer, {
+        "data-testid": testId,
+        $type: COLORS.warning_100,
+        link: COLORS.warning_700,
+        hover: COLORS.warning_20,
+        bottom: bottom,
+        children: /*#__PURE__*/_jsxs(BannerCenter, {
+          $color: COLORS.warning_700,
+          className: size,
+          children: [icon ? icon : noIcon ? null : /*#__PURE__*/_jsx(Help, {
+            color: COLORS.warning_700,
+            size: "24px"
+          }), /*#__PURE__*/_jsx(BannerContentWrapper, {
+            children: /*#__PURE__*/_jsxs(ComponentResponsive, {
+              size: size,
+              width: width,
+              color: COLORS.warning_700,
+              children: [children, "\xA0\xA0", link && linkText && /*#__PURE__*/_jsx(HyperLink, {
+                id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
+                href: link,
+                variant: "default",
+                children: linkText
+              })]
+            })
+          }), onClose && /*#__PURE__*/_jsx(ButtonWrapper, {
+            children: /*#__PURE__*/_jsx(ButtonContainer, {
+              $type: formatTypeToLowerCase,
+              children: /*#__PURE__*/_jsx(IconButton, {
+                variant: "secondary",
+                shape: "circular",
+                useTransparentBackground: true,
+                focusBackgroundColor: COLORS.white,
+                action: function action() {
+                  return onClose();
+                },
+                children: /*#__PURE__*/_jsx(Close, {
+                  color: COLORS.warning_500,
+                  size: "24px"
+                })
+              })
+            })
+          })]
+        })
+      });
+
+    case 'critical':
+      return /*#__PURE__*/_jsx(BannerContainer, {
+        "data-testid": testId,
+        $type: COLORS.critical_100,
+        link: COLORS.critical_700,
+        hover: COLORS.critical_20,
+        bottom: bottom,
+        className: size,
+        children: /*#__PURE__*/_jsxs(BannerCenter, {
+          $color: COLORS.critical_700,
+          className: size,
+          children: [icon ? icon : noIcon ? null : /*#__PURE__*/_jsx(TechnicalWarning, {
+            color: COLORS.critical_700,
+            size: "24px"
+          }), /*#__PURE__*/_jsx(BannerContentWrapper, {
+            children: /*#__PURE__*/_jsxs(ComponentResponsive, {
+              size: size,
+              width: width,
+              color: COLORS.critical_700,
+              children: [children, "\xA0\xA0", link && linkText && /*#__PURE__*/_jsx(HyperLink, {
+                id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
+                href: link,
+                variant: "default",
+                children: linkText
+              })]
+            })
+          }), onClose && /*#__PURE__*/_jsx(ButtonWrapper, {
+            children: /*#__PURE__*/_jsx(ButtonContainer, {
+              $type: formatTypeToLowerCase,
+              children: /*#__PURE__*/_jsx(IconButton, {
+                variant: "secondary",
+                shape: "circular",
+                useTransparentBackground: true,
+                focusBackgroundColor: COLORS.white,
+                action: function action() {
+                  return onClose();
+                },
+                children: /*#__PURE__*/_jsx(Close, {
+                  color: COLORS.critical_500,
+                  size: "24px"
+                })
+              })
+            })
+          })]
+        })
+      });
+
+    case 'positive':
+      return /*#__PURE__*/_jsx(BannerContainer, {
+        "data-testid": testId,
+        $type: COLORS.correct_100,
+        link: COLORS.correct_700,
+        hover: COLORS.correct_20,
+        bottom: bottom,
+        className: size,
+        children: /*#__PURE__*/_jsxs(BannerCenter, {
+          $color: COLORS.correct_700,
+          className: size,
+          children: [icon ? icon : noIcon ? null : /*#__PURE__*/_jsx(ThumbsUp, {
+            color: COLORS.correct_700,
+            size: "24px"
+          }), /*#__PURE__*/_jsx(BannerContentWrapper, {
+            children: /*#__PURE__*/_jsxs(ComponentResponsive, {
+              size: size,
+              width: width,
+              color: COLORS.correct_700,
+              children: [children, "\xA0\xA0", link && linkText && /*#__PURE__*/_jsx(HyperLink, {
+                id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
+                href: link,
+                variant: "default",
+                children: linkText
+              })]
+            })
+          }), onClose && /*#__PURE__*/_jsx(ButtonWrapper, {
+            children: /*#__PURE__*/_jsx(ButtonContainer, {
+              $type: formatTypeToLowerCase,
+              children: /*#__PURE__*/_jsx(IconButton, {
+                variant: "secondary",
+                shape: "circular",
+                useTransparentBackground: true,
+                focusBackgroundColor: COLORS.white,
+                action: function action() {
+                  return onClose();
+                },
+                children: /*#__PURE__*/_jsx(Close, {
+                  color: COLORS.correct_500,
+                  size: "24px"
+                })
+              })
+            })
+          })]
+        })
+      });
+
+    default:
+      return /*#__PURE__*/_jsx(BannerContainer, {
+        "data-testid": testId,
+        $type: COLORS.primary_100,
+        link: COLORS.primary_700,
+        hover: COLORS.primary_20,
+        bottom: bottom,
+        className: size,
+        children: /*#__PURE__*/_jsxs(BannerCenter, {
+          $color: COLORS.primary_700,
+          className: size,
+          children: [icon ? icon : noIcon ? null : /*#__PURE__*/_jsx(Tip, {
+            color: COLORS.primary_700,
+            size: "24px"
+          }), /*#__PURE__*/_jsx(BannerContentWrapper, {
+            children: /*#__PURE__*/_jsxs(ComponentResponsive, {
+              size: size,
+              width: width,
+              color: COLORS.primary_700,
+              children: [children, "\xA0\xA0", link && linkText && /*#__PURE__*/_jsx(HyperLink, {
+                id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
+                href: link,
+                variant: "default",
+                children: linkText
+              })]
+            })
+          }), onClose && /*#__PURE__*/_jsx(ButtonWrapper, {
+            children: /*#__PURE__*/_jsx(ButtonContainer, {
+              $type: "neutral",
+              children: /*#__PURE__*/_jsx(IconButton, {
+                variant: "secondary",
+                shape: "circular",
+                useTransparentBackground: true,
+                focusBackgroundColor: COLORS.white,
+                action: function action() {
+                  return onClose();
+                },
+                children: /*#__PURE__*/_jsx(Close, {
+                  color: COLORS.primary_500,
+                  size: "24px"
+                })
+              })
+            })
+          })]
+        })
+      });
+  }
+};
+
+Banner.propTypes = {
+  type: _pt.string,
+  link: _pt.string,
+  linkText: _pt.string,
+  hover: _pt.string,
+  bottom: _pt.bool,
+  testId: _pt.string,
+  icon: _pt.node,
+  onClose: _pt.func,
+  noIcon: _pt.bool
+};
+export default Banner;
+//# sourceMappingURL=Banner.js.map

package/dist/Banners/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","BannerCenter","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","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":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAASC,WAAT,EAAsBC,MAAtB,EAA8BC,kBAA9B,QAAwD,WAAxD;AACA,SAASC,KAAT,EAAgBC,IAAhB,EAAsBC,gBAAtB,EAAwCC,QAAxC,EAAkDC,GAAlD,QAA6D,kCAA7D;AACA,SAASC,UAAT,QAA2B,WAA3B;AACA,SAASC,cAAT,QAA+B,UAA/B;AAEA,SAASC,iBAAT,EAA4BC,mBAA5B,QAAuD,sBAAvD;AACA,SAASC,SAAT,QAA0B,cAA1B;AAEA;AACA;AACA;;;;AAGA,IAAMC,eAAe,GAAGd,MAAM,CAACe,GAAV,8gBACL,UAACC,KAAD;AAAA,SAA8BA,KAAK,CAACC,KAAN,GAAcD,KAAK,CAACC,KAApB,GAA4Bf,MAAM,CAACgB,WAAjE;AAAA,CADK,EAIVhB,MAAM,CAACiB,KAJG,EAKL,UAACH,KAAD;AAAA,SAA8BA,KAAK,CAACI,MAAN,GAAe,MAAf,GAAwB,GAAtD;AAAA,CALK,EAUfnB,WAAW,CAACoB,MAVG,EAafpB,WAAW,CAACqB,KAbG,EA4BR,UAACN,KAAD;AAAA,SAAwBA,KAAK,CAACO,IAA9B;AAAA,CA5BQ,CAArB;AAgCA,IAAMC,YAAY,GAAGxB,MAAM,CAACe,GAAV,uaACd,UAACC,KAAD;AAAA,SAAWL,iBAAiB,CAACR,kBAAkB,CAACsB,OAApB,EAA6BT,KAAK,CAACU,MAAnC,CAA5B;AAAA,CADc,EAMdzB,WAAW,CAACoB,MANE,EASdpB,WAAW,CAACqB,KATE,CAAlB;AA4BA,IAAMK,aAAa,GAAG3B,MAAM,CAACe,GAAV,gGAAnB;AAIA,IAAMa,eAAe,GAAG5B,MAAM,CAACe,GAAV,yGAEjB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,KAAN,GAAcP,cAAc,CAACM,KAAK,CAACC,KAAP,CAA5B,GAA4C,IAAxD;AAAA,CAFiB,CAArB;AAKA,IAAMY,oBAAoB,GAAG7B,MAAM,CAACe,GAAV,2LAA1B;;AAsBA,IAAMe,MAA4C,GAAG,SAA/CA,MAA+C,OAAqF;AAAA,MAAlFC,IAAkF,QAAlFA,IAAkF;AAAA,MAA5EC,IAA4E,QAA5EA,IAA4E;AAAA,MAAtEC,QAAsE,QAAtEA,QAAsE;AAAA,MAA5Db,MAA4D,QAA5DA,MAA4D;AAAA,MAApDc,MAAoD,QAApDA,MAAoD;AAAA,MAA5CC,QAA4C,QAA5CA,QAA4C;AAAA,MAAlCZ,IAAkC,QAAlCA,IAAkC;AAAA,MAA5Ba,OAA4B,QAA5BA,OAA4B;AAAA,MAAnBC,IAAmB,QAAnBA,IAAmB;AAAA,MAAbC,MAAa,QAAbA,MAAa;;AACxI,wBAA0BvC,KAAK,CAACwC,QAAN,CAAuBC,MAAM,CAACC,UAA9B,CAA1B;AAAA;AAAA,MAAOC,KAAP;AAAA,MAAcC,QAAd;;AACA5C,EAAAA,KAAK,CAAC6C,SAAN,CAAgB,YAAM;AACpB,aAASC,YAAT,GAAwB;AACtBF,MAAAA,QAAQ,CAACH,MAAM,CAACC,UAAR,CAAR;AACD;;AACDD,IAAAA,MAAM,CAACM,gBAAP,CAAwB,QAAxB,EAAkCD,YAAlC;AACD,GALD;AAOA,MAAME,qBAAqB,GAAGf,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEgB,WAAN,EAA9B;;AACA,UAAQD,qBAAR;AACE,SAAK,SAAL;AACE,0BACE,KAAC,eAAD;AAAiB,uBAAab,MAA9B;AAAsC,QAAA,KAAK,EAAEhC,MAAM,CAAC+C,WAApD;AAAiE,QAAA,IAAI,EAAE/C,MAAM,CAACgD,WAA9E;AAA2F,QAAA,KAAK,EAAEhD,MAAM,CAACiD,UAAzG;AAAqH,QAAA,MAAM,EAAE/B,MAA7H;AAAA,+BACE,MAAC,YAAD;AAAc,UAAA,MAAM,EAAElB,MAAM,CAACgD,WAA7B;AAA0C,UAAA,SAAS,EAAEnB,IAArD;AAAA,qBACGM,IAAI,GAAGA,IAAH,GAAUC,MAAM,GAAG,IAAH,gBAAU,KAAC,IAAD;AAAM,YAAA,KAAK,EAAEpC,MAAM,CAACgD,WAApB;AAAiC,YAAA,IAAI,EAAC;AAAtC,YADjC,eAEE,KAAC,oBAAD;AAAA,mCACE,MAAC,mBAAD;AAAqB,cAAA,IAAI,EAAEnB,IAA3B;AAAiC,cAAA,KAAK,EAAEW,KAAxC;AAA+C,cAAA,KAAK,EAAExC,MAAM,CAACgD,WAA7D;AAAA,yBACGjB,QADH,cAEGV,IAAI,IAAIY,QAAR,iBACC,KAAC,SAAD;AAAW,gBAAA,EAAE,YAAKiB,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAL,gBAAb;AAAyE,gBAAA,IAAI,EAAE/B,IAA/E;AAAqF,gBAAA,OAAO,EAAC,SAA7F;AAAA,0BACGY;AADH,gBAHJ;AAAA;AADF,YAFF,EAYGC,OAAO,iBACN,KAAC,aAAD;AAAA,mCACE,KAAC,eAAD;AAAiB,cAAA,KAAK,EAAEW,qBAAxB;AAAA,qCACE,KAAC,UAAD;AAAY,gBAAA,OAAO,EAAC,WAApB;AAAgC,gBAAA,KAAK,EAAC,UAAtC;AAAiD,gBAAA,wBAAwB,MAAzE;AAA0E,gBAAA,oBAAoB,EAAE7C,MAAM,CAACqD,KAAvG;AAA8G,gBAAA,MAAM,EAAE;AAAA,yBAAMnB,OAAO,EAAb;AAAA,iBAAtH;AAAA,uCACE,KAAC,KAAD;AAAO,kBAAA,KAAK,EAAElC,MAAM,CAACsD,WAArB;AAAkC,kBAAA,IAAI,EAAC;AAAvC;AADF;AADF;AADF,YAbJ;AAAA;AADF,QADF;;AA0BF,SAAK,UAAL;AACE,0BACE,KAAC,eAAD;AAAiB,uBAAatB,MAA9B;AAAsC,QAAA,KAAK,EAAEhC,MAAM,CAACuD,YAApD;AAAkE,QAAA,IAAI,EAAEvD,MAAM,CAACwD,YAA/E;AAA6F,QAAA,KAAK,EAAExD,MAAM,CAACyD,WAA3G;AAAwH,QAAA,MAAM,EAAEvC,MAAhI;AAAwI,QAAA,SAAS,EAAEW,IAAnJ;AAAA,+BACE,MAAC,YAAD;AAAc,UAAA,MAAM,EAAE7B,MAAM,CAACwD,YAA7B;AAA2C,UAAA,SAAS,EAAE3B,IAAtD;AAAA,qBACGM,IAAI,GAAGA,IAAH,GAAUC,MAAM,GAAG,IAAH,gBAAU,KAAC,gBAAD;AAAkB,YAAA,KAAK,EAAEpC,MAAM,CAACwD,YAAhC;AAA8C,YAAA,IAAI,EAAC;AAAnD,YADjC,eAEE,KAAC,oBAAD;AAAA,mCACE,MAAC,mBAAD;AAAqB,cAAA,IAAI,EAAE3B,IAA3B;AAAiC,cAAA,KAAK,EAAEW,KAAxC;AAA+C,cAAA,KAAK,EAAExC,MAAM,CAACwD,YAA7D;AAAA,yBACGzB,QADH,cAEGV,IAAI,IAAIY,QAAR,iBACC,KAAC,SAAD;AAAW,gBAAA,EAAE,YAAKiB,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAL,gBAAb;AAAyE,gBAAA,IAAI,EAAE/B,IAA/E;AAAqF,gBAAA,OAAO,EAAC,SAA7F;AAAA,0BACGY;AADH,gBAHJ;AAAA;AADF,YAFF,EAYGC,OAAO,iBACN,KAAC,aAAD;AAAA,mCACE,KAAC,eAAD;AAAiB,cAAA,KAAK,EAAEW,qBAAxB;AAAA,qCACE,KAAC,UAAD;AAAY,gBAAA,OAAO,EAAC,WAApB;AAAgC,gBAAA,KAAK,EAAC,UAAtC;AAAiD,gBAAA,wBAAwB,MAAzE;AAA0E,gBAAA,oBAAoB,EAAE7C,MAAM,CAACqD,KAAvG;AAA8G,gBAAA,MAAM,EAAE;AAAA,yBAAMnB,OAAO,EAAb;AAAA,iBAAtH;AAAA,uCACE,KAAC,KAAD;AAAO,kBAAA,KAAK,EAAElC,MAAM,CAAC0D,YAArB;AAAmC,kBAAA,IAAI,EAAC;AAAxC;AADF;AADF;AADF,YAbJ;AAAA;AADF,QADF;;AA0BF,SAAK,UAAL;AACE,0BACE,KAAC,eAAD;AAAiB,uBAAa1B,MAA9B;AAAsC,QAAA,KAAK,EAAEhC,MAAM,CAACgB,WAApD;AAAiE,QAAA,IAAI,EAAEhB,MAAM,CAAC2D,WAA9E;AAA2F,QAAA,KAAK,EAAE3D,MAAM,CAAC4D,UAAzG;AAAqH,QAAA,MAAM,EAAE1C,MAA7H;AAAqI,QAAA,SAAS,EAAEW,IAAhJ;AAAA,+BACE,MAAC,YAAD;AAAc,UAAA,MAAM,EAAE7B,MAAM,CAAC2D,WAA7B;AAA0C,UAAA,SAAS,EAAE9B,IAArD;AAAA,qBACGM,IAAI,GAAGA,IAAH,GAAUC,MAAM,GAAG,IAAH,gBAAU,KAAC,QAAD;AAAU,YAAA,KAAK,EAAEpC,MAAM,CAAC2D,WAAxB;AAAqC,YAAA,IAAI,EAAC;AAA1C,YADjC,eAEE,KAAC,oBAAD;AAAA,mCACE,MAAC,mBAAD;AAAqB,cAAA,IAAI,EAAE9B,IAA3B;AAAiC,cAAA,KAAK,EAAEW,KAAxC;AAA+C,cAAA,KAAK,EAAExC,MAAM,CAAC2D,WAA7D;AAAA,yBACG5B,QADH,cAEGV,IAAI,IAAIY,QAAR,iBACC,KAAC,SAAD;AAAW,gBAAA,EAAE,YAAKiB,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAL,gBAAb;AAAyE,gBAAA,IAAI,EAAE/B,IAA/E;AAAqF,gBAAA,OAAO,EAAC,SAA7F;AAAA,0BACGY;AADH,gBAHJ;AAAA;AADF,YAFF,EAYGC,OAAO,iBACN,KAAC,aAAD;AAAA,mCACE,KAAC,eAAD;AAAiB,cAAA,KAAK,EAAEW,qBAAxB;AAAA,qCACE,KAAC,UAAD;AAAY,gBAAA,OAAO,EAAC,WAApB;AAAgC,gBAAA,KAAK,EAAC,UAAtC;AAAiD,gBAAA,wBAAwB,MAAzE;AAA0E,gBAAA,oBAAoB,EAAE7C,MAAM,CAACqD,KAAvG;AAA8G,gBAAA,MAAM,EAAE;AAAA,yBAAMnB,OAAO,EAAb;AAAA,iBAAtH;AAAA,uCACE,KAAC,KAAD;AAAO,kBAAA,KAAK,EAAElC,MAAM,CAAC6D,WAArB;AAAkC,kBAAA,IAAI,EAAC;AAAvC;AADF;AADF;AADF,YAbJ;AAAA;AADF,QADF;;AA0BF;AACE,0BACE,KAAC,eAAD;AAAiB,uBAAa7B,MAA9B;AAAsC,QAAA,KAAK,EAAEhC,MAAM,CAAC8D,WAApD;AAAiE,QAAA,IAAI,EAAE9D,MAAM,CAAC+D,WAA9E;AAA2F,QAAA,KAAK,EAAE/D,MAAM,CAACgE,UAAzG;AAAqH,QAAA,MAAM,EAAE9C,MAA7H;AAAqI,QAAA,SAAS,EAAEW,IAAhJ;AAAA,+BACE,MAAC,YAAD;AAAc,UAAA,MAAM,EAAE7B,MAAM,CAAC+D,WAA7B;AAA0C,UAAA,SAAS,EAAElC,IAArD;AAAA,qBACGM,IAAI,GAAGA,IAAH,GAAUC,MAAM,GAAG,IAAH,gBAAU,KAAC,GAAD;AAAK,YAAA,KAAK,EAAEpC,MAAM,CAAC+D,WAAnB;AAAgC,YAAA,IAAI,EAAC;AAArC,YADjC,eAEE,KAAC,oBAAD;AAAA,mCACE,MAAC,mBAAD;AAAqB,cAAA,IAAI,EAAElC,IAA3B;AAAiC,cAAA,KAAK,EAAEW,KAAxC;AAA+C,cAAA,KAAK,EAAExC,MAAM,CAAC+D,WAA7D;AAAA,yBACGhC,QADH,cAEGV,IAAI,IAAIY,QAAR,iBACC,KAAC,SAAD;AAAW,gBAAA,EAAE,YAAKiB,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAL,gBAAb;AAAyE,gBAAA,IAAI,EAAE/B,IAA/E;AAAqF,gBAAA,OAAO,EAAC,SAA7F;AAAA,0BACGY;AADH,gBAHJ;AAAA;AADF,YAFF,EAYGC,OAAO,iBACN,KAAC,aAAD;AAAA,mCACE,KAAC,eAAD;AAAiB,cAAA,KAAK,EAAC,SAAvB;AAAA,qCACE,KAAC,UAAD;AAAY,gBAAA,OAAO,EAAC,WAApB;AAAgC,gBAAA,KAAK,EAAC,UAAtC;AAAiD,gBAAA,wBAAwB,MAAzE;AAA0E,gBAAA,oBAAoB,EAAElC,MAAM,CAACqD,KAAvG;AAA8G,gBAAA,MAAM,EAAE;AAAA,yBAAMnB,OAAO,EAAb;AAAA,iBAAtH;AAAA,uCACE,KAAC,KAAD;AAAO,kBAAA,KAAK,EAAElC,MAAM,CAACiE,WAArB;AAAkC,kBAAA,IAAI,EAAC;AAAvC;AADF;AADF;AADF,YAbJ;AAAA;AADF,QADF;AAnFJ;AA8GD,CAxHD;;;AAXEnC,EAAAA,I;AACAT,EAAAA,I;AACAY,EAAAA,Q;AACAiC,EAAAA,K;AACAhD,EAAAA,M;AACAc,EAAAA,M;AACAG,EAAAA,I;AACAD,EAAAA,O;AACAE,EAAAA,M;;AA6HF,eAAeR,MAAf","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/Banners/OverviewBanner.cjs

@@ -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.cjs.map

package/dist/Banners/OverviewBanner.cjs.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.cjs"}

package/dist/Banners/OverviewBanner.js

@@ -0,0 +1,31 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2;
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS } from '../styles';
+import { PageWidth } from '../Layouts';
+import { HeadlineXSStyling } from '../styles/typography';
+import { jsx as _jsx } from "react/jsx-runtime";
+var BannersWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), COLORS.primary_20);
+var BannerContent = styled(PageWidth)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), COLORS.primary_20, BREAKPOINTS.MEDIUM, BREAKPOINTS.MEDIUM, HeadlineXSStyling(COLORS.black), BREAKPOINTS.MEDIUM);
+
+var OverviewBanner = function OverviewBanner(_ref) {
+  var children = _ref.children,
+      testId = _ref.testId;
+  return /*#__PURE__*/_jsx(BannersWrapper, {
+    children: /*#__PURE__*/_jsx(BannerContent, {
+      "data-testid": testId,
+      children: children
+    })
+  });
+};
+
+OverviewBanner.propTypes = {
+  children: _pt.any.isRequired,
+  testId: _pt.string
+};
+export default OverviewBanner;
+//# sourceMappingURL=OverviewBanner.js.map

package/dist/Banners/OverviewBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Banners/OverviewBanner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","PageWidth","HeadlineXSStyling","BannersWrapper","div","primary_20","BannerContent","MEDIUM","black","OverviewBanner","children","testId"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,WAAR,EAAqBC,MAArB,QAAkC,WAAlC;AACA,SAAQC,SAAR,QAAwB,YAAxB;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;;AAEA,IAAMC,cAAc,GAAGL,MAAM,CAACM,GAAV,mGACEJ,MAAM,CAACK,UADT,CAApB;AAIA,IAAMC,aAAa,GAAGR,MAAM,CAACG,SAAD,CAAT,02BACGD,MAAM,CAACK,UADV,EAOfN,WAAW,CAACQ,MAPG,EAgBbR,WAAW,CAACQ,MAhBC,EAwBbL,iBAAiB,CAACF,MAAM,CAACQ,KAAR,CAxBJ,EAsCbT,WAAW,CAACQ,MAtCC,CAAnB;;AAiDA,IAAME,cAAc,GAAG,SAAjBA,cAAiB,OAAiC;AAAA,MAA9BC,QAA8B,QAA9BA,QAA8B;AAAA,MAApBC,MAAoB,QAApBA,MAAoB;AACtD,sBACE,KAAC,cAAD;AAAA,2BACE,KAAC,aAAD;AAAe,qBAAaA,MAA5B;AAAA,gBAAqCD;AAArC;AADF,IADF;AAKD,CAND;;;AAFeA,EAAAA,Q;AAAeC,EAAAA,M;;AAU9B,eAAeF,cAAf","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/Banners/index.cjs

@@ -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.cjs.map

package/dist/Banners/index.cjs.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.cjs"}

package/dist/Banners/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Banners/index.ts"],"names":["Banner","OverviewBanner"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,UAAnB;AACA,OAAOC,cAAP,MAA2B,kBAA3B,C,CAEA;;AACA,SAASD,MAAT,EAAiBC,cAAjB","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"}

package/dist/Banners/styles.cjs

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getButtonStyle = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styledComponents = require("styled-components");
+
+var _styles = require("../styles");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var getButtonStyle = function getButtonStyle(type) {
+  switch (type) {
+    case 'warning':
+      return (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ", ";\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n      "])), _styles.COLORS.warning_500, _styles.COLORS.warning_20, _styles.COLORS.warning_700, _styles.COLORS.warning_800, _styles.COLORS.warning_100);
+
+    case 'critical':
+      return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ", ";\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n      "])), _styles.COLORS.critical_600, _styles.COLORS.critical_20, _styles.COLORS.critical_700, _styles.COLORS.critical_800, _styles.COLORS.critical_100);
+
+    case 'positive':
+      return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ", ";\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n      "])), _styles.COLORS.correct_500, _styles.COLORS.correct_20, _styles.COLORS.correct_700, _styles.COLORS.correct_800, _styles.COLORS.correct_100);
+
+    default:
+      return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ", ";\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n      "])), _styles.COLORS.primary_500, _styles.COLORS.neutral_20, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_100);
+  }
+};
+
+exports.getButtonStyle = getButtonStyle;
+//# sourceMappingURL=styles.cjs.map

package/dist/Banners/styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Banners/styles.tsx"],"names":["getButtonStyle","type","css","COLORS","warning_500","warning_20","warning_700","warning_800","warning_100","critical_600","critical_20","critical_700","critical_800","critical_100","correct_500","correct_20","correct_700","correct_800","correct_100","primary_500","neutral_20","primary_700","primary_800","primary_100"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAEO,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,IAAD,EAAkB;AAC9C,UAAQA,IAAR;AACE,SAAK,SAAL;AACE,iBAAOC,qBAAP,gnBAMYC,eAAOC,WANnB,EAU0BD,eAAOE,UAVjC,EAccF,eAAOG,WAdrB,EAmBoBH,eAAOI,WAnB3B,EAuBcJ,eAAOK,WAvBrB;;AA2BF,SAAK,UAAL;AACE,iBAAON,qBAAP,knBAMYC,eAAOM,YANnB,EAU0BN,eAAOO,WAVjC,EAccP,eAAOQ,YAdrB,EAmBoBR,eAAOS,YAnB3B,EAuBcT,eAAOU,YAvBrB;;AA2BF,SAAK,UAAL;AACE,iBAAOX,qBAAP,knBAMYC,eAAOW,WANnB,EAU0BX,eAAOY,UAVjC,EAccZ,eAAOa,WAdrB,EAmBoBb,eAAOc,WAnB3B,EAuBcd,eAAOe,WAvBrB;;AA2BF;AACE,iBAAOhB,qBAAP,knBAMYC,eAAOgB,WANnB,EAU0BhB,eAAOiB,UAVjC,EAccjB,eAAOkB,WAdrB,EAmBoBlB,eAAOmB,WAnB3B,EAuBcnB,eAAOoB,WAvBrB;AAtFJ;AAkHD,CAnHM","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '../styles';\n\nexport const getButtonStyle = (type: string) => {\n  switch (type) {\n    case 'warning':\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.warning_500};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.warning_20};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.warning_700};\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ${COLORS.warning_800};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.warning_100};\n          }\n        }\n      `;\n    case 'critical':\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.critical_600};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.critical_20};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.critical_700};\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ${COLORS.critical_800};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.critical_100};\n          }\n        }\n      `;\n    case 'positive':\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.correct_500};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.correct_20};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.correct_700};\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ${COLORS.correct_800};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.correct_100};\n          }\n        }\n      `;\n    default:\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.primary_500};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.neutral_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_800};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.primary_100};\n          }\n        }\n      `;\n  }\n};\n"],"file":"styles.cjs"}

package/dist/Banners/styles.js

@@ -0,0 +1,22 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import { css } from 'styled-components';
+import { COLORS } from '../styles';
+export var getButtonStyle = function getButtonStyle(type) {
+  switch (type) {
+    case 'warning':
+      return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ", ";\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n      "])), COLORS.warning_500, COLORS.warning_20, COLORS.warning_700, COLORS.warning_800, COLORS.warning_100);
+
+    case 'critical':
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ", ";\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n      "])), COLORS.critical_600, COLORS.critical_20, COLORS.critical_700, COLORS.critical_800, COLORS.critical_100);
+
+    case 'positive':
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ", ";\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n      "])), COLORS.correct_500, COLORS.correct_20, COLORS.correct_700, COLORS.correct_800, COLORS.correct_100);
+
+    default:
+      return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ", ";\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ", ";\n          }\n          div svg path,\n          div svg {\n            fill: ", ";\n          }\n        }\n      "])), COLORS.primary_500, COLORS.neutral_20, COLORS.primary_700, COLORS.primary_800, COLORS.primary_100);
+  }
+};
+//# sourceMappingURL=styles.js.map

package/dist/Banners/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Banners/styles.tsx"],"names":["css","COLORS","getButtonStyle","type","warning_500","warning_20","warning_700","warning_800","warning_100","critical_600","critical_20","critical_700","critical_800","critical_100","correct_500","correct_20","correct_700","correct_800","correct_100","primary_500","neutral_20","primary_700","primary_800","primary_100"],"mappings":";;;;AAAA,SAASA,GAAT,QAAoB,mBAApB;AACA,SAASC,MAAT,QAAuB,WAAvB;AAEA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,IAAD,EAAkB;AAC9C,UAAQA,IAAR;AACE,SAAK,SAAL;AACE,aAAOH,GAAP,imBAMYC,MAAM,CAACG,WANnB,EAU0BH,MAAM,CAACI,UAVjC,EAccJ,MAAM,CAACK,WAdrB,EAmBoBL,MAAM,CAACM,WAnB3B,EAuBcN,MAAM,CAACO,WAvBrB;;AA2BF,SAAK,UAAL;AACE,aAAOR,GAAP,mmBAMYC,MAAM,CAACQ,YANnB,EAU0BR,MAAM,CAACS,WAVjC,EAccT,MAAM,CAACU,YAdrB,EAmBoBV,MAAM,CAACW,YAnB3B,EAuBcX,MAAM,CAACY,YAvBrB;;AA2BF,SAAK,UAAL;AACE,aAAOb,GAAP,mmBAMYC,MAAM,CAACa,WANnB,EAU0Bb,MAAM,CAACc,UAVjC,EAccd,MAAM,CAACe,WAdrB,EAmBoBf,MAAM,CAACgB,WAnB3B,EAuBchB,MAAM,CAACiB,WAvBrB;;AA2BF;AACE,aAAOlB,GAAP,mmBAMYC,MAAM,CAACkB,WANnB,EAU0BlB,MAAM,CAACmB,UAVjC,EAccnB,MAAM,CAACoB,WAdrB,EAmBoBpB,MAAM,CAACqB,WAnB3B,EAuBcrB,MAAM,CAACsB,WAvBrB;AAtFJ;AAkHD,CAnHM","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '../styles';\n\nexport const getButtonStyle = (type: string) => {\n  switch (type) {\n    case 'warning':\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.warning_500};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.warning_20};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.warning_700};\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ${COLORS.warning_800};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.warning_100};\n          }\n        }\n      `;\n    case 'critical':\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.critical_600};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.critical_20};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.critical_700};\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ${COLORS.critical_800};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.critical_100};\n          }\n        }\n      `;\n    case 'positive':\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.correct_500};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.correct_20};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.correct_700};\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ${COLORS.correct_800};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.correct_100};\n          }\n        }\n      `;\n    default:\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.primary_500};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.neutral_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_800};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.primary_100};\n          }\n        }\n      `;\n  }\n};\n"],"file":"styles.js"}