@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.13

package/dist/Accordion/styles.js

@@ -1,12 +1,16 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled from 'styled-components';
-import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles } from '../styles';
-import { Z_INDEXES } from '../styles/z-indexes';
-export var AccordionMenuWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"], ["\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
-export var AccordionItemHeaderContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  outline: none;\n  box-sizing: border-box;\n\n  ", "\n\n  div:last-child {\n    margin-left: auto;\n  }\n\n  padding: 0 16px;\n  min-height: 48px;\n  \n  svg {\n    width: 20px;\n    height: 20px;\n  }\n  \n  .medium & {\n    ", "\n    padding: 0 24px;\n    min-height: 56px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .large & {\n    ", "\n    padding: 0 32px;\n    min-height: 64px;\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  :focus:not(:active) {\n    ", "\n  }\n\n  :hover {\n    background: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  :active {\n    color: ", ";\n    background: ", ";\n    z-index: ", ";\n  }\n\n  &.active {\n    color: ", ";\n  }\n\n  &.disabled {\n    background: ", "!important;\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ", "!important;\n    }\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  outline: none;\n  box-sizing: border-box;\n\n  ", "\n\n  div:last-child {\n    margin-left: auto;\n  }\n\n  padding: 0 16px;\n  min-height: 48px;\n  \n  svg {\n    width: 20px;\n    height: 20px;\n  }\n  \n  .medium & {\n    ", "\n    padding: 0 24px;\n    min-height: 56px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .large & {\n    ", "\n    padding: 0 32px;\n    min-height: 64px;\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  :focus:not(:active) {\n    ", "\n  }\n\n  :hover {\n    background: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  :active {\n    color: ", ";\n    background: ", ";\n    z-index: ", ";\n  }\n\n  &.active {\n    color: ", ";\n  }\n\n  &.disabled {\n    background: ", "!important;\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ", "!important;\n    }\n  }\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600), focusStyles, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.active, COLORS.neutral_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300);
-export var AccordionItemContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  \n  &:not(:last-child) ", ":not(.active) {\n    border-bottom: 1px solid ", ";\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  \n  &:not(:last-child) ", ":not(.active) {\n    border-bottom: 1px solid ", ";\n  }\n"])), AccordionItemHeaderContainer, COLORS.neutral_100);
-export var AccordionItemBodyContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: ", ";\n  background: ", ";\n  \n  ", "\n  \n  .medium & {\n    padding: ", ";\n    ", "\n  }\n  \n  .large & {\n    padding: ", ";\n    ", "\n  }\n\n"], ["\n  padding: ", ";\n  background: ", ";\n  \n  ", "\n  \n  .medium & {\n    padding: ", ";\n    ", "\n  }\n  \n  .large & {\n    padding: ", ";\n    ", "\n  }\n\n"])), function (props) { return props.padding || '8px 16px'; }, COLORS.white, ComponentSStyling(ComponentTextStyle.Regular, null), function (props) { return props.padding || '12px 24px'; }, ComponentMStyling(ComponentTextStyle.Regular, null), function (props) { return props.padding || '14px 32px'; }, ComponentLStyling(ComponentTextStyle.Regular, null));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import styled from 'styled-components';
+import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles } from '../styles';
+import { Z_INDEXES } from '../styles/z-indexes';
+export var AccordionMenuWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
+export var AccordionItemHeaderContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  outline: none;\n  box-sizing: border-box;\n\n  ", "\n\n  div:last-child {\n    margin-left: auto;\n  }\n\n  padding: 0 16px;\n  min-height: 48px;\n  \n  svg {\n    width: 20px;\n    height: 20px;\n  }\n  \n  .medium & {\n    ", "\n    padding: 0 24px;\n    min-height: 56px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .large & {\n    ", "\n    padding: 0 32px;\n    min-height: 64px;\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  :focus:not(:active) {\n    ", "\n  }\n\n  :hover {\n    background: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  :active {\n    color: ", ";\n    background: ", ";\n    z-index: ", ";\n  }\n\n  &.active {\n    color: ", ";\n  }\n\n  &.disabled {\n    background: ", "!important;\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ", "!important;\n    }\n  }\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600), focusStyles, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.active, COLORS.neutral_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300);
+export var AccordionItemContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  \n  &:not(:last-child) ", ":not(.active) {\n    border-bottom: 1px solid ", ";\n  }\n"])), AccordionItemHeaderContainer, COLORS.neutral_100);
+export var AccordionItemBodyContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: ", ";\n  background: ", ";\n  \n  ", "\n  \n  .medium & {\n    padding: ", ";\n    ", "\n  }\n  \n  .large & {\n    padding: ", ";\n    ", "\n  }\n\n"])), function (props) {
+  return props.padding || '8px 16px';
+}, COLORS.white, ComponentSStyling(ComponentTextStyle.Regular, null), function (props) {
+  return props.padding || '12px 24px';
+}, ComponentMStyling(ComponentTextStyle.Regular, null), function (props) {
+  return props.padding || '14px 32px';
+}, ComponentLStyling(ComponentTextStyle.Regular, null));
+//# sourceMappingURL=styles.js.map

package/dist/AuthPage/AuthPage.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PanelProps } from "../Panel";
 export declare const AuthPageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare type AuthPageProps = {
+export type AuthPageProps = {
     panel?: PanelProps;
     order?: 'default' | 'reverse';
     screenSetsContainerId: string;

package/dist/AuthPage/AuthPage.js

@@ -1,29 +1,36 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import * as React from 'react';
-import ScreenSetsContainer from './ScreenSetsContainer';
-import styled from "styled-components";
-import { Panel } from "../Panel";
-import { BREAKPOINTS } from "../styles";
-export var AuthPageWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  height: 100%;\n\n  .panel {\n    flex: 1;\n    display: none;\n  }\n\n  ", " {\n    .panel {\n      display: flex;\n    }\n  }\n\n  &.reverse {\n    flex-direction: row-reverse;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  height: 100%;\n\n  .panel {\n    flex: 1;\n    display: none;\n  }\n\n  ", " {\n    .panel {\n      display: flex;\n    }\n  }\n\n  &.reverse {\n    flex-direction: row-reverse;\n  }\n"])), BREAKPOINTS.MEDIUM);
-var AuthPage = function (_a) {
-    var screenSetsContainerId = _a.screenSetsContainerId, panel = _a.panel, _b = _a.order, order = _b === void 0 ? 'default' : _b;
-    return (React.createElement(AuthPageWrapper, { className: order },
-        panel && React.createElement(Panel, __assign({}, panel, { order: order, className: "panel ".concat(panel.className || '') })),
-        React.createElement(ScreenSetsContainer, { id: screenSetsContainerId, centerContents: !panel })));
-};
-export default AuthPage;
-var templateObject_1;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import * as React from 'react';
+import ScreenSetsContainer from './ScreenSetsContainer';
+import styled from "styled-components";
+import { Panel } from "../Panel";
+import { BREAKPOINTS } from "../styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var AuthPageWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 100%;\n\n  .panel {\n    flex: 1;\n    display: none;\n  }\n\n  ", " {\n    .panel {\n      display: flex;\n    }\n  }\n\n  &.reverse {\n    flex-direction: row-reverse;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var AuthPage = function AuthPage(_ref) {
+  var screenSetsContainerId = _ref.screenSetsContainerId,
+    panel = _ref.panel,
+    _ref$order = _ref.order,
+    order = _ref$order === void 0 ? 'default' : _ref$order;
+  return /*#__PURE__*/_jsxs(AuthPageWrapper, {
+    className: order,
+    children: [panel && /*#__PURE__*/_jsx(Panel, _objectSpread(_objectSpread({}, panel), {}, {
+      order: order,
+      className: "panel ".concat(panel.className || '')
+    })), /*#__PURE__*/_jsx(ScreenSetsContainer, {
+      id: screenSetsContainerId,
+      centerContents: !panel
+    })]
+  });
+};
+AuthPage.propTypes = {
+  order: _pt.oneOf(['default', 'reverse']),
+  screenSetsContainerId: _pt.string.isRequired
+};
+export default AuthPage;
+//# sourceMappingURL=AuthPage.js.map

package/dist/AuthPage/ScreenSetsContainer.js

@@ -1,9 +1,9 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled from 'styled-components';
-import { BREAKPOINTS } from '../styles';
-var ScreenSetsContainer = styled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  box-sizing: border-box;\n\n  padding: 8px;\n  width: 100%;\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    padding: 24px;\n    width: 50%;\n\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ", " {\n    .gigya-screen {\n      max-width: 550px;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  box-sizing: border-box;\n\n  padding: 8px;\n  width: 100%;\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    padding: 24px;\n    width: 50%;\n\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ", " {\n    .gigya-screen {\n      max-width: 550px;\n    }\n  }\n"])), function (props) { return (props.centerContents ? 'center' : 'unset'); }, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
-export default ScreenSetsContainer;
-var templateObject_1;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import styled from 'styled-components';
+import { BREAKPOINTS } from '../styles';
+var ScreenSetsContainer = styled.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  box-sizing: border-box;\n\n  padding: 8px;\n  width: 100%;\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    padding: 24px;\n    width: 50%;\n\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ", " {\n    .gigya-screen {\n      max-width: 550px;\n    }\n  }\n"])), function (props) {
+  return props.centerContents ? 'center' : 'unset';
+}, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
+export default ScreenSetsContainer;
+//# sourceMappingURL=ScreenSetsContainer.js.map

package/dist/AuthPage/index.js

@@ -1,4 +1,5 @@
-export * from './ScreenSetsContainer';
-export * from './AuthPage';
-export { default as ScreenSetsContainer } from './ScreenSetsContainer';
-export { default as AuthPage } from './AuthPage';
+export * from './ScreenSetsContainer';
+export * from './AuthPage';
+export { default as ScreenSetsContainer } from './ScreenSetsContainer';
+export { default as AuthPage } from './AuthPage';
+//# sourceMappingURL=index.js.map

package/dist/Banners/Banner.d.ts

@@ -3,7 +3,7 @@ import { Size } from '../types';
 /**
  * Styles for <Banner />
  */
-export declare type StyleBannerProps = BannerProps & {
+export type StyleBannerProps = BannerProps & {
     $type: string;
     linkVisited: string;
     linkFocused: string;
@@ -42,7 +42,7 @@ export declare const BannerCloseButtonContainerStyles: import("styled-components
     $type?: string | undefined;
 }, never>;
 export declare const BannerContentWrapperStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
+export type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
     /** Size of the banner. */
     size?: Size.Small | Size.Medium | Size.Large;
     /** Type of the banner. Different types have different color schemes. */

package/dist/Banners/Banner.js

@@ -1,112 +1,182 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
-import { SystemIcons } from '../icons';
-import { IconButton } from '../Button';
-import { getButtonStyle } from './styles';
-import { ComponentMStyling, ComponentResponsive } from '../styles';
-import { HyperLink } from '../HyperLink';
-import { StyledLink } from '../HyperLink';
-import { hasWindow } from '../utils/utils';
-export var BannerContainerStyles = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link {\n      color: ", ";\n    }\n    &:visited {\n      color: ", ";\n    }\n    &:focus,\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n"], ["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link {\n      color: ", ";\n    }\n    &:visited {\n      color: ", ";\n    }\n    &:focus,\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n"])), function (props) { return (props.$type ? props.$type : COLORS.correct_100); }, COLORS.black, function (props) { return (props.bottom ? 'auto' : '0'); }, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, StyledLink, function (props) { return props.link; }, function (props) { return props.linkVisited; }, function (props) { return props.linkFocused; }, COLORS.white);
-export var BannerCenterStyles = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ", " {\n    margin: 0 32px;\n  }\n  ", " {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 64px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n\n  .full-width-banner & {\n    margin: 0 16px;\n\n    ", " {\n      margin: 0 32px;\n    }\n    ", " {\n      margin: 0 64px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 32px;\n    }\n\n    &.large {\n      margin: 0 64px;\n    }\n  }\n"], ["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ", " {\n    margin: 0 32px;\n  }\n  ", " {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 64px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n\n  .full-width-banner & {\n    margin: 0 16px;\n\n    ", " {\n      margin: 0 32px;\n    }\n    ", " {\n      margin: 0 64px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 32px;\n    }\n\n    &.large {\n      margin: 0 64px;\n    }\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, null), BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
-export var BannerCloseButtonWrapperStyles = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0 0 0 auto;\n"], ["\n  margin: 0 0 0 auto;\n"])));
-export var BannerCloseButtonContainerStyles = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: contents;\n  ", ";\n"], ["\n  display: contents;\n  ", ";\n"])), function (props) { return (props.$type ? getButtonStyle(props.$type) : null); });
-export var BannerContentWrapperStyles = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n"])));
-/** Banner component is used as a middle-interrupting message to the user with zero to one actions. */
-var Banner = function (_a) {
-    var size = _a.size, _b = _a.type, type = _b === void 0 ? 'neutral' : _b, children = _a.children, bottom = _a.bottom, testId = _a.testId, linkText = _a.linkText, link = _a.link, onClose = _a.onClose, icon = _a.icon, noIcon = _a.noIcon, linkAction = _a.linkAction, fullWidth = _a.fullWidth, className = _a.className, rest = __rest(_a, ["size", "type", "children", "bottom", "testId", "linkText", "link", "onClose", "icon", "noIcon", "linkAction", "fullWidth", "className"]);
-    var _c = React.useState(hasWindow() ? window.innerWidth : -1), width = _c[0], setWidth = _c[1];
-    React.useEffect(function () {
-        function handleResize() {
-            setWidth(window.innerWidth);
-        }
-        window.addEventListener('resize', handleResize);
-        return function () { return window.removeEventListener('resize', handleResize); };
-    }, []);
-    var bannerParams = {
-        typeColor: COLORS.primary_100,
-        accentColor: COLORS.primary_700,
-        closeIconColor: COLORS.primary_500,
-        icon: SystemIcons.Tip,
-        containerType: type,
-        focusBgColor: COLORS.primary_200,
-        linkVisited: COLORS.primary_600,
-        linkFocused: COLORS.primary_800,
-    };
-    switch (type) {
-        case 'warning':
-            bannerParams.typeColor = COLORS.warning_100;
-            bannerParams.accentColor = COLORS.warning_700;
-            bannerParams.focusBgColor = COLORS.warning_200;
-            bannerParams.icon = SystemIcons.Help;
-            bannerParams.closeIconColor = COLORS.warning_500;
-            bannerParams.linkVisited = COLORS.warning_800;
-            bannerParams.linkFocused = COLORS.warning_800;
-            break;
-        case 'critical':
-            bannerParams.typeColor = COLORS.critical_100;
-            bannerParams.accentColor = COLORS.critical_700;
-            bannerParams.focusBgColor = COLORS.critical_200;
-            bannerParams.icon = SystemIcons.TechnicalWarning;
-            bannerParams.closeIconColor = COLORS.critical_500;
-            bannerParams.linkVisited = COLORS.critical_800;
-            bannerParams.linkFocused = COLORS.critical_800;
-            break;
-        case 'positive':
-            bannerParams.typeColor = COLORS.correct_100;
-            bannerParams.accentColor = COLORS.correct_700;
-            bannerParams.focusBgColor = COLORS.correct_200;
-            bannerParams.icon = SystemIcons.ThumbsUp;
-            bannerParams.closeIconColor = COLORS.correct_500;
-            bannerParams.linkVisited = COLORS.correct_800;
-            bannerParams.linkFocused = COLORS.correct_800;
-            break;
-    }
-    var cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(fullWidth ? 'full-width-banner' : '');
-    return (React.createElement(BannerContainerStyles, __assign({ "data-testid": testId, "$type": bannerParams.typeColor, linkFocused: bannerParams.linkFocused, linkVisited: bannerParams.linkVisited, link: bannerParams.accentColor, bottom: bottom, className: cls, role: "note" }, rest),
-        React.createElement(BannerCenterStyles, { style: { color: bannerParams.accentColor }, className: size },
-            icon ? icon : noIcon ? null : React.createElement(bannerParams.icon, { color: bannerParams.accentColor, size: "24px" }),
-            React.createElement(BannerContentWrapperStyles, null,
-                React.createElement(ComponentResponsive, { size: size, width: width, color: bannerParams.accentColor },
-                    children,
-                    "\u00A0",
-                    link && linkText && (React.createElement(HyperLink, { id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"), onClick: function (e) {
-                            if (linkAction) {
-                                e.preventDefault();
-                                linkAction(e);
-                            }
-                        }, href: link, variant: "default" }, linkText)))),
-            onClose && (React.createElement(BannerCloseButtonWrapperStyles, null,
-                React.createElement(BannerCloseButtonContainerStyles, { "$type": bannerParams.containerType },
-                    React.createElement(IconButton, { variant: "secondary", shape: "circular", useTransparentBackground: true, action: function () { return onClose(); } },
-                        React.createElement(SystemIcons.Close, { color: bannerParams.closeIconColor, size: "24px" }))))))));
-};
-export default Banner;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _excluded = ["size", "type", "children", "bottom", "testId", "linkText", "link", "onClose", "icon", "noIcon", "linkAction", "fullWidth", "className"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import * as React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
+import { SystemIcons } from '../icons';
+import { IconButton } from '../Button';
+import { getButtonStyle } from './styles';
+import { ComponentMStyling, ComponentResponsive } from '../styles';
+import { HyperLink } from '../HyperLink';
+import { StyledLink } from '../HyperLink';
+import { hasWindow } from '../utils/utils';
+
+/**
+ * Styles for <Banner />
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var BannerContainerStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link {\n      color: ", ";\n    }\n    &:visited {\n      color: ", ";\n    }\n    &:focus,\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n"])), function (props) {
+  return props.$type ? props.$type : COLORS.correct_100;
+}, COLORS.black, function (props) {
+  return props.bottom ? 'auto' : '0';
+}, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, StyledLink, function (props) {
+  return props.link;
+}, function (props) {
+  return props.linkVisited;
+}, function (props) {
+  return props.linkFocused;
+}, COLORS.white);
+export var BannerCenterStyles = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ", " {\n    margin: 0 32px;\n  }\n  ", " {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 64px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n\n  .full-width-banner & {\n    margin: 0 16px;\n\n    ", " {\n      margin: 0 32px;\n    }\n    ", " {\n      margin: 0 64px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 32px;\n    }\n\n    &.large {\n      margin: 0 64px;\n    }\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, null), BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
+export var BannerCloseButtonWrapperStyles = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0 0 0 auto;\n"])));
+export var BannerCloseButtonContainerStyles = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: contents;\n  ", ";\n"])), function (props) {
+  return props.$type ? getButtonStyle(props.$type) : null;
+});
+export var BannerContentWrapperStyles = 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"])));
+/** Banner component is used as a middle-interrupting message to the user with zero to one actions. */
+var Banner = function Banner(_ref) {
+  var size = _ref.size,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'neutral' : _ref$type,
+    children = _ref.children,
+    bottom = _ref.bottom,
+    testId = _ref.testId,
+    linkText = _ref.linkText,
+    link = _ref.link,
+    onClose = _ref.onClose,
+    icon = _ref.icon,
+    noIcon = _ref.noIcon,
+    linkAction = _ref.linkAction,
+    fullWidth = _ref.fullWidth,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _React$useState = React.useState(hasWindow() ? window.innerWidth : -1),
+    _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);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  var bannerParams = {
+    typeColor: COLORS.primary_100,
+    accentColor: COLORS.primary_700,
+    closeIconColor: COLORS.primary_500,
+    icon: SystemIcons.Tip,
+    containerType: type,
+    focusBgColor: COLORS.primary_200,
+    linkVisited: COLORS.primary_600,
+    linkFocused: COLORS.primary_800
+  };
+  switch (type) {
+    case 'warning':
+      bannerParams.typeColor = COLORS.warning_100;
+      bannerParams.accentColor = COLORS.warning_700;
+      bannerParams.focusBgColor = COLORS.warning_200;
+      bannerParams.icon = SystemIcons.Help;
+      bannerParams.closeIconColor = COLORS.warning_500;
+      bannerParams.linkVisited = COLORS.warning_800;
+      bannerParams.linkFocused = COLORS.warning_800;
+      break;
+    case 'critical':
+      bannerParams.typeColor = COLORS.critical_100;
+      bannerParams.accentColor = COLORS.critical_700;
+      bannerParams.focusBgColor = COLORS.critical_200;
+      bannerParams.icon = SystemIcons.TechnicalWarning;
+      bannerParams.closeIconColor = COLORS.critical_500;
+      bannerParams.linkVisited = COLORS.critical_800;
+      bannerParams.linkFocused = COLORS.critical_800;
+      break;
+    case 'positive':
+      bannerParams.typeColor = COLORS.correct_100;
+      bannerParams.accentColor = COLORS.correct_700;
+      bannerParams.focusBgColor = COLORS.correct_200;
+      bannerParams.icon = SystemIcons.ThumbsUp;
+      bannerParams.closeIconColor = COLORS.correct_500;
+      bannerParams.linkVisited = COLORS.correct_800;
+      bannerParams.linkFocused = COLORS.correct_800;
+      break;
+  }
+  var cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(fullWidth ? 'full-width-banner' : '');
+  return /*#__PURE__*/_jsx(BannerContainerStyles, _objectSpread(_objectSpread({
+    "data-testid": testId,
+    $type: bannerParams.typeColor,
+    linkFocused: bannerParams.linkFocused,
+    linkVisited: bannerParams.linkVisited,
+    link: bannerParams.accentColor,
+    bottom: bottom,
+    className: cls,
+    role: "note"
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsxs(BannerCenterStyles, {
+      style: {
+        color: bannerParams.accentColor
+      },
+      className: size,
+      children: [icon ? icon : noIcon ? null : /*#__PURE__*/_jsx(bannerParams.icon, {
+        color: bannerParams.accentColor,
+        size: "24px"
+      }), /*#__PURE__*/_jsx(BannerContentWrapperStyles, {
+        children: /*#__PURE__*/_jsxs(ComponentResponsive, {
+          size: size,
+          width: width,
+          color: bannerParams.accentColor,
+          children: [children, "\xA0", link && linkText && /*#__PURE__*/_jsx(HyperLink, {
+            id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
+            onClick: function onClick(e) {
+              if (linkAction) {
+                e.preventDefault();
+                linkAction(e);
+              }
+            },
+            href: link,
+            variant: "default",
+            children: linkText
+          })]
+        })
+      }), onClose && /*#__PURE__*/_jsx(BannerCloseButtonWrapperStyles, {
+        children: /*#__PURE__*/_jsx(BannerCloseButtonContainerStyles, {
+          $type: bannerParams.containerType,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            variant: "secondary",
+            shape: "circular",
+            useTransparentBackground: true,
+            action: function action() {
+              return onClose();
+            },
+            children: /*#__PURE__*/_jsx(SystemIcons.Close, {
+              color: bannerParams.closeIconColor,
+              size: "24px"
+            })
+          })
+        })
+      })]
+    })
+  }));
+};
+Banner.propTypes = {
+  type: _pt.oneOf(['warning', 'critical', 'positive', 'neutral']),
+  link: _pt.string,
+  linkText: _pt.string,
+  linkAction: _pt.func,
+  bottom: _pt.bool,
+  testId: _pt.string,
+  icon: _pt.node,
+  onClose: _pt.func,
+  noIcon: _pt.bool,
+  fullWidth: _pt.bool
+};
+export default Banner;
+//# sourceMappingURL=Banner.js.map

package/dist/Banners/OverviewBanner.d.ts

@@ -5,7 +5,7 @@ export declare const OverviewBannerContentStyles: import("styled-components").St
     maxWidth?: number | undefined;
     unsetMargin?: boolean | undefined;
 }, never>;
-export declare type OverviewBannerProps = {
+export type OverviewBannerProps = {
     children: any;
     testId?: string;
 } & React.HTMLAttributes<HTMLDivElement>;

package/dist/Banners/OverviewBanner.js

@@ -1,39 +1,32 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { BREAKPOINTS, COLORS } from '../styles';
-import { PageWidth } from '../Layouts';
-export var OverviewBannerWrapperStyles = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), COLORS.primary_20);
-export var OverviewBannerContentStyles = styled(PageWidth)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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    ", " {\n      padding-top: 0;\n      margin-right: 20px;\n      width: 384px;\n      height: 216px;\n    }\n  }\n\n  & h2, h3, h4, h5, h6 {\n    margin: 16px 0 24px 0;\n  }\n\n  & p {\n    margin: 0;\n    padding: 0 0 28px 0;\n    max-width: 310px;\n  }\n\n  & div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    margin-bottom: 18px;\n\n    ", " {\n      margin-left: 20px;\n      align-items: start;\n      justify-content: start;\n      width: 384px;\n    }\n  }\n"], ["\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    ", " {\n      padding-top: 0;\n      margin-right: 20px;\n      width: 384px;\n      height: 216px;\n    }\n  }\n\n  & h2, h3, h4, h5, h6 {\n    margin: 16px 0 24px 0;\n  }\n\n  & p {\n    margin: 0;\n    padding: 0 0 28px 0;\n    max-width: 310px;\n  }\n\n  & div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    margin-bottom: 18px;\n\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, BREAKPOINTS.MEDIUM);
-var OverviewBanner = function (_a) {
-    var children = _a.children, testId = _a.testId, rest = __rest(_a, ["children", "testId"]);
-    return (React.createElement(OverviewBannerWrapperStyles, __assign({}, rest),
-        React.createElement(OverviewBannerContentStyles, { "data-testid": testId }, children)));
-};
-export default OverviewBanner;
-var templateObject_1, templateObject_2;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _excluded = ["children", "testId"];
+var _templateObject, _templateObject2;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import * as React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS } from '../styles';
+import { PageWidth } from '../Layouts';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var OverviewBannerWrapperStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), COLORS.primary_20);
+export var OverviewBannerContentStyles = 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    ", " {\n      padding-top: 0;\n      margin-right: 20px;\n      width: 384px;\n      height: 216px;\n    }\n  }\n\n  & h2, h3, h4, h5, h6 {\n    margin: 16px 0 24px 0;\n  }\n\n  & p {\n    margin: 0;\n    padding: 0 0 28px 0;\n    max-width: 310px;\n  }\n\n  & div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    margin-bottom: 18px;\n\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, BREAKPOINTS.MEDIUM);
+var OverviewBanner = function OverviewBanner(_ref) {
+  var children = _ref.children,
+    testId = _ref.testId,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(OverviewBannerWrapperStyles, _objectSpread(_objectSpread({}, rest), {}, {
+    children: /*#__PURE__*/_jsx(OverviewBannerContentStyles, {
+      "data-testid": testId,
+      children: children
+    })
+  }));
+};
+OverviewBanner.propTypes = {
+  children: _pt.any.isRequired,
+  testId: _pt.string
+};
+export default OverviewBanner;
+//# sourceMappingURL=OverviewBanner.js.map

package/dist/Banners/index.js

@@ -1,4 +1,5 @@
-export { default as Banner } from './Banner';
-export { default as OverviewBanner } from './OverviewBanner';
-export * from './Banner';
-export * from './OverviewBanner';
+export { default as Banner } from './Banner';
+export { default as OverviewBanner } from './OverviewBanner';
+export * from './Banner';
+export * from './OverviewBanner';
+//# sourceMappingURL=index.js.map