@laerdal/life-react-components 2.0.1-dev.2 → 2.0.1-dev.20

package/dist/Banners/Banner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.cjs","names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentMStyling","ComponentTextStyle","Regular","ButtonWrapper","ButtonContainer","getButtonStyle","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","React","useState","hasWindow","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"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';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink/HyperLink';\nimport { hasWindow } from '../utils/utils';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: 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  border-radius: 4px;\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  ${StyledLink} {\n    &:link {\n      color: ${(props) => props.link};\n    }\n    &:visited {\n      color: ${(props) => props.linkVisited};\n    }\n    &:focus,\n    &:active {\n      background-color: ${(props) => props.linkFocused};\n      color: ${COLORS.white};\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n\n  .full-width-banner & {\n    margin: 0 16px;\n\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 24px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 24px;\n    }\n\n    &.large {\n      margin: 0 48px;\n    }\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 = React.HTMLAttributes<HTMLDivElement> & {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\n  link?: string;\n  linkText?: string;\n  linkAction?: (ev: React.MouseEvent) => void;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n  fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n  size,\n  type = 'neutral',\n  children,\n  bottom,\n  testId,\n  linkText,\n  link,\n  onClose,\n  icon,\n  noIcon,\n  linkAction,\n  fullWidth,\n  className,\n  ...rest\n}) => {\n  const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  let bannerParams = {\n    typeColor: COLORS.primary_100,\n    accentColor: COLORS.primary_700,\n    hoverColor: COLORS.primary_20,\n    closeIconColor: COLORS.primary_500,\n    icon: Tip,\n    containerType: type,\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800,\n  };\n  switch (type) {\n    case 'warning':\n      bannerParams.typeColor = COLORS.warning_100;\n      bannerParams.accentColor = COLORS.warning_700;\n      bannerParams.focusBgColor = COLORS.warning_200;\n      bannerParams.hoverColor = COLORS.warning_20;\n      bannerParams.icon = Help;\n      bannerParams.closeIconColor = COLORS.warning_500;\n      bannerParams.linkVisited = COLORS.warning_800;\n      bannerParams.linkFocused = COLORS.warning_800;\n      break;\n    case 'critical':\n      bannerParams.typeColor = COLORS.critical_100;\n      bannerParams.accentColor = COLORS.critical_700;\n      bannerParams.focusBgColor = COLORS.critical_200;\n      bannerParams.hoverColor = COLORS.critical_20;\n      bannerParams.icon = TechnicalWarning;\n      bannerParams.closeIconColor = COLORS.critical_500;\n      bannerParams.linkVisited = COLORS.critical_800;\n      bannerParams.linkFocused = COLORS.critical_800;\n      break;\n    case 'positive':\n      bannerParams.typeColor = COLORS.correct_100;\n      bannerParams.accentColor = COLORS.correct_700;\n      bannerParams.focusBgColor = COLORS.correct_200;\n      bannerParams.hoverColor = COLORS.correct_20;\n      bannerParams.icon = ThumbsUp;\n      bannerParams.closeIconColor = COLORS.correct_500;\n      bannerParams.linkVisited = COLORS.correct_800;\n      bannerParams.linkFocused = COLORS.correct_800;\n      break;\n  }\n\n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n  return (\n    <BannerContainer\n      data-testid={testId}\n      $type={bannerParams.typeColor}\n      linkFocused={bannerParams.linkFocused}\n      linkVisited={bannerParams.linkVisited}\n      link={bannerParams.accentColor}\n      hover={bannerParams.hoverColor}\n      bottom={bottom}\n      className={cls}\n      {...rest}>\n      <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n        <BannerContentWrapper>\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n            {children}&nbsp;\n            {link && linkText && (\n              <HyperLink\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n                onClick={(e) => {\n                  if (linkAction) {\n                    e.preventDefault();\n                    linkAction(e);\n                  }\n                }}\n                href={link}\n                variant=\"default\">\n                {linkText}\n              </HyperLink>\n            )}\n          </ComponentResponsive>\n        </BannerContentWrapper>\n        {onClose && (\n          <ButtonWrapper>\n            <ButtonContainer $type={bannerParams.containerType}>\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n                <Close color={bannerParams.closeIconColor} size=\"24px\" />\n              </IconButton>\n            </ButtonContainer>\n          </ButtonWrapper>\n        )}\n      </BannerCenter>\n    </BannerContainer>\n  );\n};\n\nexport default Banner;\n"],"mappings":"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"}
+{"version":3,"file":"Banner.cjs","names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentMStyling","ComponentTextStyle","Regular","ButtonWrapper","ButtonContainer","getButtonStyle","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","React","useState","hasWindow","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"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';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink/HyperLink';\nimport { hasWindow } from '../utils/utils';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: 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  border-radius: 4px;\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  ${StyledLink} {\n    &:link {\n      color: ${(props) => props.link};\n    }\n    &:visited {\n      color: ${(props) => props.linkVisited};\n    }\n    &:focus,\n    &:active {\n      background-color: ${(props) => props.linkFocused};\n      color: ${COLORS.white};\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n\n  .full-width-banner & {\n    margin: 0 16px;\n\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 24px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 24px;\n    }\n\n    &.large {\n      margin: 0 48px;\n    }\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 = React.HTMLAttributes<HTMLDivElement> & {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\n  link?: string;\n  linkText?: string;\n  linkAction?: (ev: React.MouseEvent) => void;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n  fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n  size,\n  type = 'neutral',\n  children,\n  bottom,\n  testId,\n  linkText,\n  link,\n  onClose,\n  icon,\n  noIcon,\n  linkAction,\n  fullWidth,\n  className,\n  ...rest\n}) => {\n  const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  let bannerParams = {\n    typeColor: COLORS.primary_100,\n    accentColor: COLORS.primary_700,\n    hoverColor: COLORS.primary_20,\n    closeIconColor: COLORS.primary_500,\n    icon: Tip,\n    containerType: type,\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800,\n  };\n  switch (type) {\n    case 'warning':\n      bannerParams.typeColor = COLORS.warning_100;\n      bannerParams.accentColor = COLORS.warning_700;\n      bannerParams.focusBgColor = COLORS.warning_200;\n      bannerParams.hoverColor = COLORS.warning_20;\n      bannerParams.icon = Help;\n      bannerParams.closeIconColor = COLORS.warning_500;\n      bannerParams.linkVisited = COLORS.warning_800;\n      bannerParams.linkFocused = COLORS.warning_800;\n      break;\n    case 'critical':\n      bannerParams.typeColor = COLORS.critical_100;\n      bannerParams.accentColor = COLORS.critical_700;\n      bannerParams.focusBgColor = COLORS.critical_200;\n      bannerParams.hoverColor = COLORS.critical_20;\n      bannerParams.icon = TechnicalWarning;\n      bannerParams.closeIconColor = COLORS.critical_500;\n      bannerParams.linkVisited = COLORS.critical_800;\n      bannerParams.linkFocused = COLORS.critical_800;\n      break;\n    case 'positive':\n      bannerParams.typeColor = COLORS.correct_100;\n      bannerParams.accentColor = COLORS.correct_700;\n      bannerParams.focusBgColor = COLORS.correct_200;\n      bannerParams.hoverColor = COLORS.correct_20;\n      bannerParams.icon = ThumbsUp;\n      bannerParams.closeIconColor = COLORS.correct_500;\n      bannerParams.linkVisited = COLORS.correct_800;\n      bannerParams.linkFocused = COLORS.correct_800;\n      break;\n  }\n\n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n  return (\n    <BannerContainer\n      data-testid={testId}\n      $type={bannerParams.typeColor}\n      linkFocused={bannerParams.linkFocused}\n      linkVisited={bannerParams.linkVisited}\n      link={bannerParams.accentColor}\n      hover={bannerParams.hoverColor}\n      bottom={bottom}\n      className={cls}\n      role=\"note\"\n      {...rest}>\n      <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n        <BannerContentWrapper>\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n            {children}&nbsp;\n            {link && linkText && (\n              <HyperLink\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n                onClick={(e) => {\n                  if (linkAction) {\n                    e.preventDefault();\n                    linkAction(e);\n                  }\n                }}\n                href={link}\n                variant=\"default\">\n                {linkText}\n              </HyperLink>\n            )}\n          </ComponentResponsive>\n        </BannerContentWrapper>\n        {onClose && (\n          <ButtonWrapper>\n            <ButtonContainer $type={bannerParams.containerType}>\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n                <Close color={bannerParams.closeIconColor} size=\"24px\" />\n              </IconButton>\n            </ButtonContainer>\n          </ButtonWrapper>\n        )}\n      </BannerCenter>\n    </BannerContainer>\n  );\n};\n\nexport default Banner;\n"],"mappings":"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"}

package/dist/Banners/Banner.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Size } from '../types';
-declare type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
+type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
     size?: Size.Small | Size.Medium | Size.Large;
     type?: 'warning' | 'critical' | 'positive' | 'neutral';
     link?: string;

package/dist/Banners/Banner.js

@@ -4,13 +4,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import * as React from 'react';
 import styled from 'styled-components';
 import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
@@ -21,10 +17,10 @@ import { ComponentMStyling, ComponentResponsive } from '../styles';
 import { HyperLink } from '../HyperLink';
 import { StyledLink } from '../HyperLink/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";
 var BannerContainer = 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) {
@@ -44,34 +40,30 @@ var ButtonContainer = styled.div(_templateObject4 || (_templateObject4 = _tagged
   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,
-      _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);
-
+    _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$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);
@@ -88,7 +80,6 @@ var Banner = function Banner(_ref) {
     linkVisited: COLORS.primary_600,
     linkFocused: COLORS.primary_800
   };
-
   switch (type) {
     case 'warning':
       bannerParams.typeColor = COLORS.warning_100;
@@ -100,7 +91,6 @@ var Banner = function Banner(_ref) {
       bannerParams.linkVisited = COLORS.warning_800;
       bannerParams.linkFocused = COLORS.warning_800;
       break;
-
     case 'critical':
       bannerParams.typeColor = COLORS.critical_100;
       bannerParams.accentColor = COLORS.critical_700;
@@ -111,7 +101,6 @@ var Banner = function Banner(_ref) {
       bannerParams.linkVisited = COLORS.critical_800;
       bannerParams.linkFocused = COLORS.critical_800;
       break;
-
     case 'positive':
       bannerParams.typeColor = COLORS.correct_100;
       bannerParams.accentColor = COLORS.correct_700;
@@ -123,7 +112,6 @@ var Banner = function Banner(_ref) {
       bannerParams.linkFocused = COLORS.correct_800;
       break;
   }
-
   var cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(fullWidth ? 'full-width-banner' : '');
   return /*#__PURE__*/_jsx(BannerContainer, _objectSpread(_objectSpread({
     "data-testid": testId,
@@ -133,7 +121,8 @@ var Banner = function Banner(_ref) {
     link: bannerParams.accentColor,
     hover: bannerParams.hoverColor,
     bottom: bottom,
-    className: cls
+    className: cls,
+    role: "note"
   }, rest), {}, {
     children: /*#__PURE__*/_jsxs(BannerCenter, {
       style: {
@@ -182,7 +171,6 @@ var Banner = function Banner(_ref) {
     })
   }));
 };
-
 Banner.propTypes = {
   type: _pt.oneOf(['warning', 'critical', 'positive', 'neutral']),
   link: _pt.string,

package/dist/Banners/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","StyledLink","hasWindow","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","linkVisited","linkFocused","white","BannerCenter","Regular","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","critical_500","critical_800","correct_700","correct_200","correct_20","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"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';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink/HyperLink';\nimport { hasWindow } from '../utils/utils';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: 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  border-radius: 4px;\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  ${StyledLink} {\n    &:link {\n      color: ${(props) => props.link};\n    }\n    &:visited {\n      color: ${(props) => props.linkVisited};\n    }\n    &:focus,\n    &:active {\n      background-color: ${(props) => props.linkFocused};\n      color: ${COLORS.white};\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n\n  .full-width-banner & {\n    margin: 0 16px;\n\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 24px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 24px;\n    }\n\n    &.large {\n      margin: 0 48px;\n    }\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 = React.HTMLAttributes<HTMLDivElement> & {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\n  link?: string;\n  linkText?: string;\n  linkAction?: (ev: React.MouseEvent) => void;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n  fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n  size,\n  type = 'neutral',\n  children,\n  bottom,\n  testId,\n  linkText,\n  link,\n  onClose,\n  icon,\n  noIcon,\n  linkAction,\n  fullWidth,\n  className,\n  ...rest\n}) => {\n  const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  let bannerParams = {\n    typeColor: COLORS.primary_100,\n    accentColor: COLORS.primary_700,\n    hoverColor: COLORS.primary_20,\n    closeIconColor: COLORS.primary_500,\n    icon: Tip,\n    containerType: type,\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800,\n  };\n  switch (type) {\n    case 'warning':\n      bannerParams.typeColor = COLORS.warning_100;\n      bannerParams.accentColor = COLORS.warning_700;\n      bannerParams.focusBgColor = COLORS.warning_200;\n      bannerParams.hoverColor = COLORS.warning_20;\n      bannerParams.icon = Help;\n      bannerParams.closeIconColor = COLORS.warning_500;\n      bannerParams.linkVisited = COLORS.warning_800;\n      bannerParams.linkFocused = COLORS.warning_800;\n      break;\n    case 'critical':\n      bannerParams.typeColor = COLORS.critical_100;\n      bannerParams.accentColor = COLORS.critical_700;\n      bannerParams.focusBgColor = COLORS.critical_200;\n      bannerParams.hoverColor = COLORS.critical_20;\n      bannerParams.icon = TechnicalWarning;\n      bannerParams.closeIconColor = COLORS.critical_500;\n      bannerParams.linkVisited = COLORS.critical_800;\n      bannerParams.linkFocused = COLORS.critical_800;\n      break;\n    case 'positive':\n      bannerParams.typeColor = COLORS.correct_100;\n      bannerParams.accentColor = COLORS.correct_700;\n      bannerParams.focusBgColor = COLORS.correct_200;\n      bannerParams.hoverColor = COLORS.correct_20;\n      bannerParams.icon = ThumbsUp;\n      bannerParams.closeIconColor = COLORS.correct_500;\n      bannerParams.linkVisited = COLORS.correct_800;\n      bannerParams.linkFocused = COLORS.correct_800;\n      break;\n  }\n\n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n  return (\n    <BannerContainer\n      data-testid={testId}\n      $type={bannerParams.typeColor}\n      linkFocused={bannerParams.linkFocused}\n      linkVisited={bannerParams.linkVisited}\n      link={bannerParams.accentColor}\n      hover={bannerParams.hoverColor}\n      bottom={bottom}\n      className={cls}\n      {...rest}>\n      <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n        <BannerContentWrapper>\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n            {children}&nbsp;\n            {link && linkText && (\n              <HyperLink\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n                onClick={(e) => {\n                  if (linkAction) {\n                    e.preventDefault();\n                    linkAction(e);\n                  }\n                }}\n                href={link}\n                variant=\"default\">\n                {linkText}\n              </HyperLink>\n            )}\n          </ComponentResponsive>\n        </BannerContentWrapper>\n        {onClose && (\n          <ButtonWrapper>\n            <ButtonContainer $type={bannerParams.containerType}>\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n                <Close color={bannerParams.closeIconColor} size=\"24px\" />\n              </IconButton>\n            </ButtonContainer>\n          </ButtonWrapper>\n        )}\n      </BannerCenter>\n    </BannerContainer>\n  );\n};\n\nexport default Banner;\n"],"mappings":"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"}
+{"version":3,"file":"Banner.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","StyledLink","hasWindow","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","linkVisited","linkFocused","white","BannerCenter","Regular","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","critical_500","critical_800","correct_700","correct_200","correct_20","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"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';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink/HyperLink';\nimport { hasWindow } from '../utils/utils';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: 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  border-radius: 4px;\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  ${StyledLink} {\n    &:link {\n      color: ${(props) => props.link};\n    }\n    &:visited {\n      color: ${(props) => props.linkVisited};\n    }\n    &:focus,\n    &:active {\n      background-color: ${(props) => props.linkFocused};\n      color: ${COLORS.white};\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n\n  .full-width-banner & {\n    margin: 0 16px;\n\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 24px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 24px;\n    }\n\n    &.large {\n      margin: 0 48px;\n    }\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 = React.HTMLAttributes<HTMLDivElement> & {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\n  link?: string;\n  linkText?: string;\n  linkAction?: (ev: React.MouseEvent) => void;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n  fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n  size,\n  type = 'neutral',\n  children,\n  bottom,\n  testId,\n  linkText,\n  link,\n  onClose,\n  icon,\n  noIcon,\n  linkAction,\n  fullWidth,\n  className,\n  ...rest\n}) => {\n  const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  let bannerParams = {\n    typeColor: COLORS.primary_100,\n    accentColor: COLORS.primary_700,\n    hoverColor: COLORS.primary_20,\n    closeIconColor: COLORS.primary_500,\n    icon: Tip,\n    containerType: type,\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800,\n  };\n  switch (type) {\n    case 'warning':\n      bannerParams.typeColor = COLORS.warning_100;\n      bannerParams.accentColor = COLORS.warning_700;\n      bannerParams.focusBgColor = COLORS.warning_200;\n      bannerParams.hoverColor = COLORS.warning_20;\n      bannerParams.icon = Help;\n      bannerParams.closeIconColor = COLORS.warning_500;\n      bannerParams.linkVisited = COLORS.warning_800;\n      bannerParams.linkFocused = COLORS.warning_800;\n      break;\n    case 'critical':\n      bannerParams.typeColor = COLORS.critical_100;\n      bannerParams.accentColor = COLORS.critical_700;\n      bannerParams.focusBgColor = COLORS.critical_200;\n      bannerParams.hoverColor = COLORS.critical_20;\n      bannerParams.icon = TechnicalWarning;\n      bannerParams.closeIconColor = COLORS.critical_500;\n      bannerParams.linkVisited = COLORS.critical_800;\n      bannerParams.linkFocused = COLORS.critical_800;\n      break;\n    case 'positive':\n      bannerParams.typeColor = COLORS.correct_100;\n      bannerParams.accentColor = COLORS.correct_700;\n      bannerParams.focusBgColor = COLORS.correct_200;\n      bannerParams.hoverColor = COLORS.correct_20;\n      bannerParams.icon = ThumbsUp;\n      bannerParams.closeIconColor = COLORS.correct_500;\n      bannerParams.linkVisited = COLORS.correct_800;\n      bannerParams.linkFocused = COLORS.correct_800;\n      break;\n  }\n\n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n  return (\n    <BannerContainer\n      data-testid={testId}\n      $type={bannerParams.typeColor}\n      linkFocused={bannerParams.linkFocused}\n      linkVisited={bannerParams.linkVisited}\n      link={bannerParams.accentColor}\n      hover={bannerParams.hoverColor}\n      bottom={bottom}\n      className={cls}\n      role=\"note\"\n      {...rest}>\n      <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n        <BannerContentWrapper>\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n            {children}&nbsp;\n            {link && linkText && (\n              <HyperLink\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n                onClick={(e) => {\n                  if (linkAction) {\n                    e.preventDefault();\n                    linkAction(e);\n                  }\n                }}\n                href={link}\n                variant=\"default\">\n                {linkText}\n              </HyperLink>\n            )}\n          </ComponentResponsive>\n        </BannerContentWrapper>\n        {onClose && (\n          <ButtonWrapper>\n            <ButtonContainer $type={bannerParams.containerType}>\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n                <Close color={bannerParams.closeIconColor} size=\"24px\" />\n              </IconButton>\n            </ButtonContainer>\n          </ButtonWrapper>\n        )}\n      </BannerCenter>\n    </BannerContainer>\n  );\n};\n\nexport default Banner;\n"],"mappings":"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"}

package/dist/Banners/OverviewBanner.cjs

@@ -1,54 +1,33 @@
 "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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 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 _excluded = ["children", "testId"];
-
 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; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 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,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    testId = _ref.testId,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannersWrapper, _objectSpread(_objectSpread({}, rest), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContent, {
       "data-testid": testId,
@@ -56,7 +35,6 @@ var OverviewBanner = function OverviewBanner(_ref) {
     })
   }));
 };
-
 OverviewBanner.propTypes = {
   children: _propTypes.default.any.isRequired,
   testId: _propTypes.default.string

package/dist/Banners/OverviewBanner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"OverviewBanner.cjs","names":["BannersWrapper","styled","div","COLORS","primary_20","BannerContent","PageWidth","BREAKPOINTS","MEDIUM","HeadlineXSStyling","black","OverviewBanner","children","testId","rest"],"sources":["../../src/Banners/OverviewBanner.tsx"],"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 } & React.HTMLAttributes<HTMLDivElement>;\n\nconst OverviewBanner = ({ children, testId, ...rest }: Props) => {\n  return (\n    <BannersWrapper {...rest}>\n      <BannerContent data-testid={testId}>{children}</BannerContent>\n    </BannersWrapper>\n  );\n};\n\nexport default OverviewBanner;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,cAAc,GAAGC,yBAAA,CAAOC,GAAV,iHACEC,cAAA,CAAOC,UADT,CAApB;;AAIA,IAAMC,aAAa,GAAG,IAAAJ,yBAAA,EAAOK,kBAAP,CAAH,w3BACGH,cAAA,CAAOC,UADV,EAOfG,mBAAA,CAAYC,MAPG,EAgBbD,mBAAA,CAAYC,MAhBC,EAwBb,IAAAC,6BAAA,EAAkBN,cAAA,CAAOO,KAAzB,CAxBa,EAsCbH,mBAAA,CAAYC,MAtCC,CAAnB;;AAiDA,IAAMG,cAAc,GAAG,SAAjBA,cAAiB,OAA0C;EAAA,IAAvCC,QAAuC,QAAvCA,QAAuC;EAAA,IAA7BC,MAA6B,QAA7BA,MAA6B;EAAA,IAAlBC,IAAkB;EAC/D,oBACE,qBAAC,cAAD,kCAAoBA,IAApB;IAAA,uBACE,qBAAC,aAAD;MAAe,eAAaD,MAA5B;MAAA,UAAqCD;IAArC;EADF,GADF;AAKD,CAND;;;EAFeA,Q;EAAeC,M;;eAUfF,c"}
+{"version":3,"file":"OverviewBanner.cjs","names":["BannersWrapper","styled","div","COLORS","primary_20","BannerContent","PageWidth","BREAKPOINTS","MEDIUM","HeadlineXSStyling","black","OverviewBanner","children","testId","rest"],"sources":["../../src/Banners/OverviewBanner.tsx"],"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 } & React.HTMLAttributes<HTMLDivElement>;\n\nconst OverviewBanner = ({ children, testId, ...rest }: Props) => {\n  return (\n    <BannersWrapper {...rest}>\n      <BannerContent data-testid={testId}>{children}</BannerContent>\n    </BannersWrapper>\n  );\n};\n\nexport default OverviewBanner;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAuD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEvD,IAAMA,cAAc,GAAGC,yBAAM,CAACC,GAAG,iHACXC,cAAM,CAACC,UAAU,CACtC;AAED,IAAMC,aAAa,GAAG,IAAAJ,yBAAM,EAACK,kBAAS,CAAC,w3BACjBH,cAAM,CAACC,UAAU,EAMnCG,mBAAW,CAACC,MAAM,EAShBD,mBAAW,CAACC,MAAM,EAQlB,IAAAC,6BAAiB,EAACN,cAAM,CAACO,KAAK,CAAC,EAc/BH,mBAAW,CAACC,MAAM,CAOvB;AAID,IAAMG,cAAc,GAAG,SAAjBA,cAAc,OAA6C;EAAA,IAAvCC,QAAQ,QAARA,QAAQ;IAAEC,MAAM,QAANA,MAAM;IAAKC,IAAI;EACjD,oBACE,qBAAC,cAAc,kCAAKA,IAAI;IAAA,uBACtB,qBAAC,aAAa;MAAC,eAAaD,MAAO;MAAA,UAAED;IAAQ;EAAiB,GAC/C;AAErB,CAAC;AAAC;EARaA,QAAQ;EAAOC,MAAM;AAAA;AAAA,eAUrBF,cAAc;AAAA"}

package/dist/Banners/OverviewBanner.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type Props = {
+type Props = {
     children: any;
     testId?: string;
 } & React.HTMLAttributes<HTMLDivElement>;

package/dist/Banners/OverviewBanner.js

@@ -3,13 +3,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 var _excluded = ["children", "testId"];
-
 var _templateObject, _templateObject2;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import * as React from 'react';
 import styled from 'styled-components';
 import { BREAKPOINTS, COLORS } from '../styles';
@@ -18,12 +14,10 @@ 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,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    testId = _ref.testId,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_jsx(BannersWrapper, _objectSpread(_objectSpread({}, rest), {}, {
     children: /*#__PURE__*/_jsx(BannerContent, {
       "data-testid": testId,
@@ -31,7 +25,6 @@ var OverviewBanner = function OverviewBanner(_ref) {
     })
   }));
 };
-
 OverviewBanner.propTypes = {
   children: _pt.any.isRequired,
   testId: _pt.string

package/dist/Banners/OverviewBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverviewBanner.js","names":["React","styled","BREAKPOINTS","COLORS","PageWidth","HeadlineXSStyling","BannersWrapper","div","primary_20","BannerContent","MEDIUM","black","OverviewBanner","children","testId","rest"],"sources":["../../src/Banners/OverviewBanner.tsx"],"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 } & React.HTMLAttributes<HTMLDivElement>;\n\nconst OverviewBanner = ({ children, testId, ...rest }: Props) => {\n  return (\n    <BannersWrapper {...rest}>\n      <BannerContent data-testid={testId}>{children}</BannerContent>\n    </BannersWrapper>\n  );\n};\n\nexport default OverviewBanner;\n"],"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,OAA0C;EAAA,IAAvCC,QAAuC,QAAvCA,QAAuC;EAAA,IAA7BC,MAA6B,QAA7BA,MAA6B;EAAA,IAAlBC,IAAkB;;EAC/D,oBACE,KAAC,cAAD,kCAAoBA,IAApB;IAAA,uBACE,KAAC,aAAD;MAAe,eAAaD,MAA5B;MAAA,UAAqCD;IAArC;EADF,GADF;AAKD,CAND;;;EAFeA,Q;EAAeC,M;;AAU9B,eAAeF,cAAf"}
+{"version":3,"file":"OverviewBanner.js","names":["React","styled","BREAKPOINTS","COLORS","PageWidth","HeadlineXSStyling","BannersWrapper","div","primary_20","BannerContent","MEDIUM","black","OverviewBanner","children","testId","rest"],"sources":["../../src/Banners/OverviewBanner.tsx"],"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 } & React.HTMLAttributes<HTMLDivElement>;\n\nconst OverviewBanner = ({ children, testId, ...rest }: Props) => {\n  return (\n    <BannersWrapper {...rest}>\n      <BannerContent data-testid={testId}>{children}</BannerContent>\n    </BannersWrapper>\n  );\n};\n\nexport default OverviewBanner;\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,WAAW,EAAEC,MAAM,QAAO,WAAW;AAC7C,SAAQC,SAAS,QAAO,YAAY;AACpC,SAAQC,iBAAiB,QAAO,sBAAsB;AAAC;AAEvD,IAAMC,cAAc,GAAGL,MAAM,CAACM,GAAG,mGACXJ,MAAM,CAACK,UAAU,CACtC;AAED,IAAMC,aAAa,GAAGR,MAAM,CAACG,SAAS,CAAC,02BACjBD,MAAM,CAACK,UAAU,EAMnCN,WAAW,CAACQ,MAAM,EAShBR,WAAW,CAACQ,MAAM,EAQlBL,iBAAiB,CAACF,MAAM,CAACQ,KAAK,CAAC,EAc/BT,WAAW,CAACQ,MAAM,CAOvB;AAID,IAAME,cAAc,GAAG,SAAjBA,cAAc,OAA6C;EAAA,IAAvCC,QAAQ,QAARA,QAAQ;IAAEC,MAAM,QAANA,MAAM;IAAKC,IAAI;EACjD,oBACE,KAAC,cAAc,kCAAKA,IAAI;IAAA,uBACtB,KAAC,aAAa;MAAC,eAAaD,MAAO;MAAA,UAAED;IAAQ;EAAiB,GAC/C;AAErB,CAAC;AAAC;EARaA,QAAQ;EAAOC,MAAM;AAAA;AAUpC,eAAeF,cAAc"}

package/dist/Banners/index.cjs

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,8 +16,6 @@ Object.defineProperty(exports, "OverviewBanner", {
     return _OverviewBanner.default;
   }
 });
-
 var _Banner = _interopRequireDefault(require("./Banner"));
-
 var _OverviewBanner = _interopRequireDefault(require("./OverviewBanner"));
 //# sourceMappingURL=index.cjs.map

package/dist/Banners/index.cjs.map

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

package/dist/Banners/index.js

@@ -1,5 +1,6 @@
 import Banner from './Banner';
-import OverviewBanner from './OverviewBanner'; // eslint-disable-next-line import/prefer-default-export
+import OverviewBanner from './OverviewBanner';
 
+// eslint-disable-next-line import/prefer-default-export
 export { Banner, OverviewBanner };
 //# sourceMappingURL=index.js.map

package/dist/Banners/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Banner","OverviewBanner"],"sources":["../../src/Banners/index.ts"],"sourcesContent":["import Banner from './Banner';\nimport OverviewBanner from './OverviewBanner';\n\n// eslint-disable-next-line import/prefer-default-export\nexport { Banner, OverviewBanner };\n"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,UAAnB;AACA,OAAOC,cAAP,MAA2B,kBAA3B,C,CAEA;;AACA,SAASD,MAAT,EAAiBC,cAAjB"}
+{"version":3,"file":"index.js","names":["Banner","OverviewBanner"],"sources":["../../src/Banners/index.ts"],"sourcesContent":["import Banner from './Banner';\nimport OverviewBanner from './OverviewBanner';\n\n// eslint-disable-next-line import/prefer-default-export\nexport { Banner, OverviewBanner };\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,UAAU;AAC7B,OAAOC,cAAc,MAAM,kBAAkB;;AAE7C;AACA,SAASD,MAAM,EAAEC,cAAc"}

package/dist/Banners/styles.cjs

@@ -1,22 +1,15 @@
 "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 _Iconbutton = require("../Button/Iconbutton");
-
 var _styles = require("../styles");
-
 var _templateObject;
-
 var getButtonStyle = function getButtonStyle(type) {
   var style = {
     svgFill: _styles.COLORS.primary_500,
@@ -27,7 +20,6 @@ var getButtonStyle = function getButtonStyle(type) {
     focusBgColor: _styles.COLORS.primary_200,
     focusSvgFill: _styles.COLORS.primary_700
   };
-
   switch (type) {
     case 'warning':
       style = {
@@ -40,7 +32,6 @@ var getButtonStyle = function getButtonStyle(type) {
         focusSvgFill: _styles.COLORS.warning_700
       };
       break;
-
     case 'critical':
       style = {
         svgFill: _styles.COLORS.critical_600,
@@ -52,7 +43,6 @@ var getButtonStyle = function getButtonStyle(type) {
         focusSvgFill: _styles.COLORS.critical_700
       };
       break;
-
     case 'positive':
       style = {
         svgFill: _styles.COLORS.correct_500,
@@ -65,9 +55,7 @@ var getButtonStyle = function getButtonStyle(type) {
       };
       break;
   }
-
   return (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    ", " {\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  }"])), _Iconbutton.StyledSecondaryIconButton, style.svgFill, style.hoverBgColor, style.hoverSvgFill, style.activeBgColor, style.activeSvgFill);
 };
-
 exports.getButtonStyle = getButtonStyle;
 //# sourceMappingURL=styles.cjs.map

package/dist/Banners/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","names":["getButtonStyle","type","style","svgFill","COLORS","primary_500","hoverBgColor","primary_200","hoverSvgFill","primary_700","activeBgColor","primary_300","activeSvgFill","primary_800","focusBgColor","focusSvgFill","warning_500","warning_200","warning_700","warning_300","warning_800","critical_600","critical_200","critical_700","critical_300","critical_800","correct_500","correct_200","correct_700","correct_300","correct_800","css","StyledSecondaryIconButton"],"sources":["../../src/Banners/styles.tsx"],"sourcesContent":["import { css } from 'styled-components';\nimport { StyledSecondaryIconButton } from '../Button/Iconbutton';\nimport { COLORS } from '../styles';\n\nexport const getButtonStyle = (type: string) => {\n  let style = {\n    svgFill: COLORS.primary_500,\n    hoverBgColor: COLORS.primary_200,\n    hoverSvgFill: COLORS.primary_700,\n    activeBgColor: COLORS.primary_300,\n    activeSvgFill: COLORS.primary_800,\n    focusBgColor: COLORS.primary_200,\n    focusSvgFill: COLORS.primary_700\n  };\n\n  switch(type)\n  {\n    case 'warning':\n      style = {\n        svgFill: COLORS.warning_500,\n        hoverBgColor: COLORS.warning_200,\n        hoverSvgFill: COLORS.warning_700,\n        activeBgColor: COLORS.warning_300,\n        activeSvgFill: COLORS.warning_800,\n        focusBgColor: COLORS.warning_200,\n        focusSvgFill: COLORS.warning_700\n      };\n      break;\n    \n    case 'critical':\n      style = {\n        svgFill: COLORS.critical_600,\n        hoverBgColor: COLORS.critical_200,\n        hoverSvgFill: COLORS.critical_700,\n        activeBgColor: COLORS.critical_300,\n        activeSvgFill: COLORS.critical_800,\n        focusBgColor: COLORS.critical_200,\n        focusSvgFill: COLORS.critical_700\n      };\n      break;\n\n    case 'positive':\n      style = {\n        svgFill: COLORS.correct_500,\n        hoverBgColor: COLORS.correct_200,\n        hoverSvgFill: COLORS.correct_700,\n        activeBgColor: COLORS.correct_300,\n        activeSvgFill: COLORS.correct_800,\n        focusBgColor: COLORS.correct_200,\n        focusSvgFill: COLORS.correct_700\n      };\n      break;\n  }\n\n  return css`\n    ${StyledSecondaryIconButton} {\n    div {\n      background-color: transparent;\n    }\n    div svg path,\n    div svg {\n      fill: ${style.svgFill};\n    }\n    &:hover:not(:disabled) {\n      div {\n        background-color: ${style.hoverBgColor};\n      }\n      div svg path,\n      div svg {\n        fill: ${style.hoverSvgFill};\n      }\n    }\n    &:active:not(:disabled) {\n      div {\n        background: ${style.activeBgColor};\n      }\n      div svg path,\n      div svg {\n        fill: ${style.activeSvgFill};\n      }\n    }\n  }`;\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAEO,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,IAAD,EAAkB;EAC9C,IAAIC,KAAK,GAAG;IACVC,OAAO,EAAEC,cAAA,CAAOC,WADN;IAEVC,YAAY,EAAEF,cAAA,CAAOG,WAFX;IAGVC,YAAY,EAAEJ,cAAA,CAAOK,WAHX;IAIVC,aAAa,EAAEN,cAAA,CAAOO,WAJZ;IAKVC,aAAa,EAAER,cAAA,CAAOS,WALZ;IAMVC,YAAY,EAAEV,cAAA,CAAOG,WANX;IAOVQ,YAAY,EAAEX,cAAA,CAAOK;EAPX,CAAZ;;EAUA,QAAOR,IAAP;IAEE,KAAK,SAAL;MACEC,KAAK,GAAG;QACNC,OAAO,EAAEC,cAAA,CAAOY,WADV;QAENV,YAAY,EAAEF,cAAA,CAAOa,WAFf;QAGNT,YAAY,EAAEJ,cAAA,CAAOc,WAHf;QAINR,aAAa,EAAEN,cAAA,CAAOe,WAJhB;QAKNP,aAAa,EAAER,cAAA,CAAOgB,WALhB;QAMNN,YAAY,EAAEV,cAAA,CAAOa,WANf;QAONF,YAAY,EAAEX,cAAA,CAAOc;MAPf,CAAR;MASA;;IAEF,KAAK,UAAL;MACEhB,KAAK,GAAG;QACNC,OAAO,EAAEC,cAAA,CAAOiB,YADV;QAENf,YAAY,EAAEF,cAAA,CAAOkB,YAFf;QAGNd,YAAY,EAAEJ,cAAA,CAAOmB,YAHf;QAINb,aAAa,EAAEN,cAAA,CAAOoB,YAJhB;QAKNZ,aAAa,EAAER,cAAA,CAAOqB,YALhB;QAMNX,YAAY,EAAEV,cAAA,CAAOkB,YANf;QAONP,YAAY,EAAEX,cAAA,CAAOmB;MAPf,CAAR;MASA;;IAEF,KAAK,UAAL;MACErB,KAAK,GAAG;QACNC,OAAO,EAAEC,cAAA,CAAOsB,WADV;QAENpB,YAAY,EAAEF,cAAA,CAAOuB,WAFf;QAGNnB,YAAY,EAAEJ,cAAA,CAAOwB,WAHf;QAINlB,aAAa,EAAEN,cAAA,CAAOyB,WAJhB;QAKNjB,aAAa,EAAER,cAAA,CAAO0B,WALhB;QAMNhB,YAAY,EAAEV,cAAA,CAAOuB,WANf;QAONZ,YAAY,EAAEX,cAAA,CAAOwB;MAPf,CAAR;MASA;EApCJ;;EAuCA,WAAOG,qBAAP,qhBACIC,qCADJ,EAOY9B,KAAK,CAACC,OAPlB,EAW0BD,KAAK,CAACI,YAXhC,EAecJ,KAAK,CAACM,YAfpB,EAoBoBN,KAAK,CAACQ,aApB1B,EAwBcR,KAAK,CAACU,aAxBpB;AA4BD,CA9EM"}
+{"version":3,"file":"styles.cjs","names":["getButtonStyle","type","style","svgFill","COLORS","primary_500","hoverBgColor","primary_200","hoverSvgFill","primary_700","activeBgColor","primary_300","activeSvgFill","primary_800","focusBgColor","focusSvgFill","warning_500","warning_200","warning_700","warning_300","warning_800","critical_600","critical_200","critical_700","critical_300","critical_800","correct_500","correct_200","correct_700","correct_300","correct_800","css","StyledSecondaryIconButton"],"sources":["../../src/Banners/styles.tsx"],"sourcesContent":["import { css } from 'styled-components';\nimport { StyledSecondaryIconButton } from '../Button/Iconbutton';\nimport { COLORS } from '../styles';\n\nexport const getButtonStyle = (type: string) => {\n  let style = {\n    svgFill: COLORS.primary_500,\n    hoverBgColor: COLORS.primary_200,\n    hoverSvgFill: COLORS.primary_700,\n    activeBgColor: COLORS.primary_300,\n    activeSvgFill: COLORS.primary_800,\n    focusBgColor: COLORS.primary_200,\n    focusSvgFill: COLORS.primary_700\n  };\n\n  switch(type)\n  {\n    case 'warning':\n      style = {\n        svgFill: COLORS.warning_500,\n        hoverBgColor: COLORS.warning_200,\n        hoverSvgFill: COLORS.warning_700,\n        activeBgColor: COLORS.warning_300,\n        activeSvgFill: COLORS.warning_800,\n        focusBgColor: COLORS.warning_200,\n        focusSvgFill: COLORS.warning_700\n      };\n      break;\n    \n    case 'critical':\n      style = {\n        svgFill: COLORS.critical_600,\n        hoverBgColor: COLORS.critical_200,\n        hoverSvgFill: COLORS.critical_700,\n        activeBgColor: COLORS.critical_300,\n        activeSvgFill: COLORS.critical_800,\n        focusBgColor: COLORS.critical_200,\n        focusSvgFill: COLORS.critical_700\n      };\n      break;\n\n    case 'positive':\n      style = {\n        svgFill: COLORS.correct_500,\n        hoverBgColor: COLORS.correct_200,\n        hoverSvgFill: COLORS.correct_700,\n        activeBgColor: COLORS.correct_300,\n        activeSvgFill: COLORS.correct_800,\n        focusBgColor: COLORS.correct_200,\n        focusSvgFill: COLORS.correct_700\n      };\n      break;\n  }\n\n  return css`\n    ${StyledSecondaryIconButton} {\n    div {\n      background-color: transparent;\n    }\n    div svg path,\n    div svg {\n      fill: ${style.svgFill};\n    }\n    &:hover:not(:disabled) {\n      div {\n        background-color: ${style.hoverBgColor};\n      }\n      div svg path,\n      div svg {\n        fill: ${style.hoverSvgFill};\n      }\n    }\n    &:active:not(:disabled) {\n      div {\n        background: ${style.activeBgColor};\n      }\n      div svg path,\n      div svg {\n        fill: ${style.activeSvgFill};\n      }\n    }\n  }`;\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AAAmC;AAE5B,IAAMA,cAAc,GAAG,SAAjBA,cAAc,CAAIC,IAAY,EAAK;EAC9C,IAAIC,KAAK,GAAG;IACVC,OAAO,EAAEC,cAAM,CAACC,WAAW;IAC3BC,YAAY,EAAEF,cAAM,CAACG,WAAW;IAChCC,YAAY,EAAEJ,cAAM,CAACK,WAAW;IAChCC,aAAa,EAAEN,cAAM,CAACO,WAAW;IACjCC,aAAa,EAAER,cAAM,CAACS,WAAW;IACjCC,YAAY,EAAEV,cAAM,CAACG,WAAW;IAChCQ,YAAY,EAAEX,cAAM,CAACK;EACvB,CAAC;EAED,QAAOR,IAAI;IAET,KAAK,SAAS;MACZC,KAAK,GAAG;QACNC,OAAO,EAAEC,cAAM,CAACY,WAAW;QAC3BV,YAAY,EAAEF,cAAM,CAACa,WAAW;QAChCT,YAAY,EAAEJ,cAAM,CAACc,WAAW;QAChCR,aAAa,EAAEN,cAAM,CAACe,WAAW;QACjCP,aAAa,EAAER,cAAM,CAACgB,WAAW;QACjCN,YAAY,EAAEV,cAAM,CAACa,WAAW;QAChCF,YAAY,EAAEX,cAAM,CAACc;MACvB,CAAC;MACD;IAEF,KAAK,UAAU;MACbhB,KAAK,GAAG;QACNC,OAAO,EAAEC,cAAM,CAACiB,YAAY;QAC5Bf,YAAY,EAAEF,cAAM,CAACkB,YAAY;QACjCd,YAAY,EAAEJ,cAAM,CAACmB,YAAY;QACjCb,aAAa,EAAEN,cAAM,CAACoB,YAAY;QAClCZ,aAAa,EAAER,cAAM,CAACqB,YAAY;QAClCX,YAAY,EAAEV,cAAM,CAACkB,YAAY;QACjCP,YAAY,EAAEX,cAAM,CAACmB;MACvB,CAAC;MACD;IAEF,KAAK,UAAU;MACbrB,KAAK,GAAG;QACNC,OAAO,EAAEC,cAAM,CAACsB,WAAW;QAC3BpB,YAAY,EAAEF,cAAM,CAACuB,WAAW;QAChCnB,YAAY,EAAEJ,cAAM,CAACwB,WAAW;QAChClB,aAAa,EAAEN,cAAM,CAACyB,WAAW;QACjCjB,aAAa,EAAER,cAAM,CAAC0B,WAAW;QACjChB,YAAY,EAAEV,cAAM,CAACuB,WAAW;QAChCZ,YAAY,EAAEX,cAAM,CAACwB;MACvB,CAAC;MACD;EAAM;EAGV,WAAOG,qBAAG,qhBACNC,qCAAyB,EAMjB9B,KAAK,CAACC,OAAO,EAICD,KAAK,CAACI,YAAY,EAI9BJ,KAAK,CAACM,YAAY,EAKZN,KAAK,CAACQ,aAAa,EAIzBR,KAAK,CAACU,aAAa;AAInC,CAAC;AAAC"}

package/dist/Banners/styles.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-
 var _templateObject;
-
 import { css } from 'styled-components';
 import { StyledSecondaryIconButton } from '../Button/Iconbutton';
 import { COLORS } from '../styles';
@@ -15,7 +13,6 @@ export var getButtonStyle = function getButtonStyle(type) {
     focusBgColor: COLORS.primary_200,
     focusSvgFill: COLORS.primary_700
   };
-
   switch (type) {
     case 'warning':
       style = {
@@ -28,7 +25,6 @@ export var getButtonStyle = function getButtonStyle(type) {
         focusSvgFill: COLORS.warning_700
       };
       break;
-
     case 'critical':
       style = {
         svgFill: COLORS.critical_600,
@@ -40,7 +36,6 @@ export var getButtonStyle = function getButtonStyle(type) {
         focusSvgFill: COLORS.critical_700
       };
       break;
-
     case 'positive':
       style = {
         svgFill: COLORS.correct_500,
@@ -53,7 +48,6 @@ export var getButtonStyle = function getButtonStyle(type) {
       };
       break;
   }
-
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", " {\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  }"])), StyledSecondaryIconButton, style.svgFill, style.hoverBgColor, style.hoverSvgFill, style.activeBgColor, style.activeSvgFill);
 };
 //# sourceMappingURL=styles.js.map