@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1

package/dist/AuthPage/ScreenSetsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenSetsContainer.js","names":["styled","BREAKPOINTS","ScreenSetsContainer","section","_templateObject","_taggedTemplateLiteral","props","$centerContents","MEDIUM","LARGE"],"sources":["../../src/AuthPage/ScreenSetsContainer.tsx"],"sourcesContent":["import styled from 'styled-components';\r\nimport {BREAKPOINTS} from '../styles';\r\n\r\nconst ScreenSetsContainer = styled.section<{ $centerContents: boolean }>`\r\n  display: flex;\r\n  flex-direction: column;\r\n  flex: 1;\r\n  box-sizing: border-box;\r\n\r\n  padding: 8px;\r\n  width: 100%;\r\n  align-items: ${props => (props.$centerContents ? 'center' : 'unset')};\r\n\r\n  .gigya-screen-caption {\r\n    display: none;\r\n  }\r\n\r\n  .gigya-screen {\r\n    max-width: 100%;\r\n    margin: auto;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    padding: 24px;\r\n    width: 50%;\r\n\r\n    .gigya-screen {\r\n      margin: 0;\r\n      padding: 36px 25px !important;\r\n    }\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    .gigya-screen {\r\n      max-width: 550px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport default ScreenSetsContainer;\r\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAAQC,WAAW,QAAO,WAAW;AAErC,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,OAAO,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,meAQzBC,KAAK,IAAKA,KAAK,CAACC,eAAe,GAAG,QAAQ,GAAG,OAAQ,EAWlEN,WAAW,CAACO,MAAM,EAUlBP,WAAW,CAACQ,KAAK,CAKpB;AAED,eAAeP,mBAAmB","ignoreList":[]}
+{"version":3,"file":"ScreenSetsContainer.js","names":["styled","BREAKPOINTS","ScreenSetsContainer","section","props","$centerContents","MEDIUM","LARGE"],"sources":["../../src/AuthPage/ScreenSetsContainer.tsx"],"sourcesContent":["import styled from 'styled-components';\r\nimport {BREAKPOINTS} from '../styles';\r\n\r\nconst ScreenSetsContainer = styled.section<{ $centerContents: boolean }>`\r\n  display: flex;\r\n  flex-direction: column;\r\n  flex: 1;\r\n  box-sizing: border-box;\r\n\r\n  padding: 8px;\r\n  width: 100%;\r\n  align-items: ${props => (props.$centerContents ? 'center' : 'unset')};\r\n\r\n  .gigya-screen-caption {\r\n    display: none;\r\n  }\r\n\r\n  .gigya-screen {\r\n    max-width: 100%;\r\n    margin: auto;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    padding: 24px;\r\n    width: 50%;\r\n\r\n    .gigya-screen {\r\n      margin: 0;\r\n      padding: 36px 25px !important;\r\n    }\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    .gigya-screen {\r\n      max-width: 550px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport default ScreenSetsContainer;\r\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAAQC,WAAW,QAAO,WAAW;AAErC,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,OAAqC;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBC,KAAK,IAAKA,KAAK,CAACC,eAAe,GAAG,QAAQ,GAAG,OAAQ;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIJ,WAAW,CAACK,MAAM;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIL,WAAW,CAACM,KAAK;AACrB;AACA;AACA;AACA;AACA,CAAC;AAED,eAAeL,mBAAmB","ignoreList":[]}

package/dist/AuthPage/index.d.ts

@@ -1,4 +1,4 @@
-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';

package/dist/Banners/Banner.cjs

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.BannerContentWrapperStyles = exports.BannerContainerStyles = exports.BannerCloseButtonWrapperStyles = exports.BannerCloseButtonContainerStyles = exports.BannerCenterStyles = 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 = _interopRequireWildcard(require("styled-components"));
@@ -15,11 +14,10 @@ var _styles = require("../styles");
 var _icons = require("../icons");
 var _Button = require("../Button");
 var _styles2 = require("./styles");
-var _HyperLink = require("../HyperLink");
+var _HyperLink = _interopRequireWildcard(require("../HyperLink/HyperLink"));
 var _utils = require("../utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["size", "type", "children", "bottom", "testId", "linkText", "link", "onClose", "icon", "noIcon", "linkAction", "fullWidth", "className"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 /**
  * Styles for <Banner />
  */
@@ -27,11 +25,117 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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) { (0, _defineProperty2.default)(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; }
-const BannerContainerStyles = exports.BannerContainerStyles = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), props => props.$type ? props.$type : _styles.COLORS.getColor('correct_100', props.theme), props => _styles.COLORS.getColor('black', props.theme), props => props.$bottom ? 'auto' : '0', _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, _HyperLink.StyledLink, props => props.$link, props => props.$linkVisited, props => props.$linkFocused, props => _styles.COLORS.getColor('white', props.theme));
-const BannerCenterStyles = exports.BannerCenterStyles = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
-const BannerCloseButtonWrapperStyles = exports.BannerCloseButtonWrapperStyles = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 0 0 auto;\n"])));
-const BannerCloseButtonContainerStyles = exports.BannerCloseButtonContainerStyles = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: contents;\n  ", ";\n"])), props => props.$type ? (0, _styles2.getButtonStyle)(props.$type, props.theme) : null);
-const BannerContentWrapperStyles = exports.BannerContentWrapperStyles = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n"])));
+const BannerContainerStyles = exports.BannerContainerStyles = _styledComponents.default.div`
+  background: ${props => props.$type ? props.$type : _styles.COLORS.getColor('correct_100', props.theme)};
+  min-height: 48px;
+  display: flex;
+  color: ${props => _styles.COLORS.getColor('black', props.theme)};
+  margin-top: ${props => props.$bottom ? 'auto' : '0'};
+  border-radius: 4px;
+
+  button:last-child {
+    line-height: 0;
+    margin: 0 0 0 8px;
+    ${_styles.BREAKPOINTS.MEDIUM} {
+      margin: 0 0 0 16px;
+    }
+    ${_styles.BREAKPOINTS.LARGE} {
+      margin: 0 0 0 32px;
+    }
+    &.small {
+      margin: 0 0 0 8px;
+    }
+    &.medium {
+      margin: 0 0 0 16px;
+    }
+    &.large {
+      margin: 0 0 0 32px;
+    }
+  }
+
+  ${_HyperLink.StyledLink} {
+    &:link {
+      color: ${props => props.$link};
+    }
+    &:visited {
+      color: ${props => props.$linkVisited};
+    }
+    &:focus,
+    &:active {
+      background-color: ${props => props.$linkFocused};
+      color: ${props => _styles.COLORS.getColor('white', props.theme)};
+    }
+  }
+
+  &.full-width-banner {
+    margin: 8px;
+  }
+`;
+const BannerCenterStyles = exports.BannerCenterStyles = _styledComponents.default.div`
+  ${(0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null)}
+
+  display: flex;
+  width: 100%;
+  margin: 0 16px;
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    margin: 0 32px;
+  }
+  ${_styles.BREAKPOINTS.LARGE} {
+    margin: 0 56px;
+  }
+  &.small {
+    margin: 0 16px;
+  }
+  &.medium {
+    margin: 0 32px;
+  }
+  &.large {
+    margin: 0 64px;
+  }
+
+  > svg {
+    flex-shrink: 0;
+    margin: 12px 0;
+  }
+
+  .full-width-banner & {
+    margin: 0 16px;
+
+    ${_styles.BREAKPOINTS.MEDIUM} {
+      margin: 0 32px;
+    }
+    ${_styles.BREAKPOINTS.LARGE} {
+      margin: 0 64px;
+    }
+
+    &.small {
+      margin: 0 16px;
+    }
+
+    &.medium {
+      margin: 0 32px;
+    }
+
+    &.large {
+      margin: 0 64px;
+    }
+  }
+`;
+const BannerCloseButtonWrapperStyles = exports.BannerCloseButtonWrapperStyles = _styledComponents.default.div`
+  margin: 0 0 0 auto;
+`;
+const BannerCloseButtonContainerStyles = exports.BannerCloseButtonContainerStyles = _styledComponents.default.div`
+  display: contents;
+  ${props => props.$type ? (0, _styles2.getButtonStyle)(props.$type, props.theme) : null};
+`;
+const BannerContentWrapperStyles = exports.BannerContentWrapperStyles = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  margin: 12px 0;
+  &:not(:first-child) {
+    margin-left: 8px;
+  }
+`;
 /** Banner component is used as a middle-interrupting message to the user with zero to one actions. */
 const Banner = _ref => {
   let {
@@ -98,7 +202,7 @@ const Banner = _ref => {
       bannerParams.linkFocused = _styles.COLORS.getColor('correct_800', theme);
       break;
   }
-  const cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(fullWidth ? 'full-width-banner' : '');
+  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContainerStyles, _objectSpread(_objectSpread({
     "data-testid": testId,
     $type: bannerParams.typeColor,
@@ -122,8 +226,8 @@ const Banner = _ref => {
           size: size,
           width: width,
           color: bannerParams.accentColor,
-          children: [children, "\xA0", link && linkText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HyperLink.HyperLink, {
-            id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
+          children: [children, "\xA0", link && linkText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HyperLink.default, {
+            id: `${Math.floor(Math.random() * 999999999999)}_BannerLink`,
             onClick: e => {
               if (linkAction) {
                 e.preventDefault();

package/dist/Banners/Banner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_styles","_icons","_Button","_styles2","_HyperLink","_utils","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","BannerContainerStyles","exports","styled","div","_taggedTemplateLiteral2","props","$type","COLORS","getColor","theme","$bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","$link","$linkVisited","$linkFocused","BannerCenterStyles","ComponentMStyling","ComponentTextStyle","Regular","BannerCloseButtonWrapperStyles","BannerCloseButtonContainerStyles","getButtonStyle","BannerContentWrapperStyles","Banner","_ref","size","type","children","bottom","testId","linkText","link","onClose","icon","noIcon","linkAction","fullWidth","className","rest","_objectWithoutProperties2","useTheme","width","setWidth","useState","hasWindow","window","innerWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","accentColor","closeIconColor","SystemIcons","Tip","containerType","focusBgColor","linkVisited","linkFocused","Help","TechnicalWarning","ThumbsUp","cls","concat","jsx","role","jsxs","style","color","ComponentResponsive","HyperLink","id","Math","floor","random","onClick","preventDefault","href","variant","IconButton","shape","useTransparentBackground","action","Close","propTypes","_propTypes","oneOf","string","func","bool","node","_default"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\r\nimport { SystemIcons } from '../icons';\r\nimport { IconButton } from '../Button';\r\nimport { getButtonStyle } from './styles';\r\nimport { Size } from '../types';\r\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\r\nimport { HyperLink } from '../HyperLink';\r\nimport { StyledLink } from '../HyperLink';\r\nimport { hasWindow } from '../utils/utils';\r\n\r\n/**\r\n * Styles for <Banner />\r\n */\r\nexport type StyleBannerProps = BannerProps & { type: string; linkVisited: string; linkFocused: string };\r\n\r\nexport const BannerContainerStyles = styled.div<{ $link?: string, $bottom?: boolean, $type: string; $linkVisited: string; $linkFocused: string }>`\r\n  background: ${props => (props.$type ? props.$type : COLORS.getColor('correct_100', props.theme))};\r\n  min-height: 48px;\r\n  display: flex;\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n  margin-top: ${props => (props.$bottom ? 'auto' : '0')};\r\n  border-radius: 4px;\r\n\r\n  button:last-child {\r\n    line-height: 0;\r\n    margin: 0 0 0 8px;\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      margin: 0 0 0 16px;\r\n    }\r\n    ${BREAKPOINTS.LARGE} {\r\n      margin: 0 0 0 32px;\r\n    }\r\n    &.small {\r\n      margin: 0 0 0 8px;\r\n    }\r\n    &.medium {\r\n      margin: 0 0 0 16px;\r\n    }\r\n    &.large {\r\n      margin: 0 0 0 32px;\r\n    }\r\n  }\r\n\r\n  ${StyledLink} {\r\n    &:link {\r\n      color: ${(props) => props.$link};\r\n    }\r\n    &:visited {\r\n      color: ${(props) => props.$linkVisited};\r\n    }\r\n    &:focus,\r\n    &:active {\r\n      background-color: ${(props) => props.$linkFocused};\r\n      color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.full-width-banner {\r\n    margin: 8px;\r\n  }\r\n`;\r\n\r\nexport const BannerCenterStyles = styled.div`\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  display: flex;\r\n  width: 100%;\r\n  margin: 0 16px;\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: 0 32px;\r\n  }\r\n  ${BREAKPOINTS.LARGE} {\r\n    margin: 0 56px;\r\n  }\r\n  &.small {\r\n    margin: 0 16px;\r\n  }\r\n  &.medium {\r\n    margin: 0 32px;\r\n  }\r\n  &.large {\r\n    margin: 0 64px;\r\n  }\r\n\r\n  > svg {\r\n    flex-shrink: 0;\r\n    margin: 12px 0;\r\n  }\r\n\r\n  .full-width-banner & {\r\n    margin: 0 16px;\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      margin: 0 32px;\r\n    }\r\n    ${BREAKPOINTS.LARGE} {\r\n      margin: 0 64px;\r\n    }\r\n\r\n    &.small {\r\n      margin: 0 16px;\r\n    }\r\n\r\n    &.medium {\r\n      margin: 0 32px;\r\n    }\r\n\r\n    &.large {\r\n      margin: 0 64px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const BannerCloseButtonWrapperStyles = styled.div`\r\n  margin: 0 0 0 auto;\r\n`;\r\n\r\nexport const BannerCloseButtonContainerStyles = styled.div<{ $type?: string }>`\r\n  display: contents;\r\n  ${(props) => (props.$type ? getButtonStyle(props.$type, props.theme) : null)};\r\n`;\r\n\r\nexport const BannerContentWrapperStyles = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin: 12px 0;\r\n  &:not(:first-child) {\r\n    margin-left: 8px;\r\n  }\r\n`;\r\n\r\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /** Size of the banner. */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Type of the banner. Different types have different color schemes. */\r\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\r\n  /** Link that will be shown after the children of the component. */\r\n  link?: string;\r\n  /** Text of the link */\r\n  linkText?: string;\r\n  /** If provided, then after user clicks on the link instead of following the link this method will be executed. */\r\n  linkAction?: (ev: React.MouseEvent) => void;\r\n  /** If set to true, then Banner will have 'margin-top' set to auto, and will render it at the bottom of the parent. */\r\n  bottom?: boolean;\r\n  /** For testing purposes. Will be set on top level container. */\r\n  testId?: string;\r\n  /** Icon to be shown instead of default icon on the left side of the Banner. */\r\n  icon?: React.ReactNode;\r\n  /** Callback event to be executed when user clicks on Close button. */\r\n  onClose?: () => void;\r\n  /** By default different banner types have different icons shown. If this flag is set, then no icon will be shown */\r\n  noIcon?: boolean;\r\n  /** Modifies margin of the banner for the cases when Banner stretches to full page width. */\r\n  fullWidth?: boolean;\r\n};\r\n\r\n/** Banner component is used as a middle-interrupting message to the user with zero to one actions. */\r\nconst Banner: React.FunctionComponent<BannerProps> = ({\r\n  size,\r\n  type = 'neutral',\r\n  children,\r\n  bottom,\r\n  testId,\r\n  linkText,\r\n  link,\r\n  onClose,\r\n  icon,\r\n  noIcon,\r\n  linkAction,\r\n  fullWidth,\r\n  className,\r\n  ...rest\r\n}) => {\r\n  const theme = useTheme();\r\n  const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\r\n  React.useEffect(() => {\r\n    function handleResize() {\r\n      setWidth(window.innerWidth);\r\n    }\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, []);\r\n\r\n  let bannerParams = {\r\n    typeColor: COLORS.getColor('primary_100', theme),\r\n    accentColor: COLORS.getColor('primary_700', theme),\r\n    closeIconColor: COLORS.getColor('primary_500', theme),\r\n    icon: SystemIcons.Tip,\r\n    containerType: type,\r\n    focusBgColor: COLORS.getColor('primary_200', theme),\r\n    linkVisited: COLORS.getColor('primary_600', theme),\r\n    linkFocused: COLORS.getColor('primary_800', theme),\r\n  };\r\n  switch (type) {\r\n    case 'warning':\r\n      bannerParams.typeColor = COLORS.getColor('warning_100', theme);\r\n      bannerParams.accentColor = COLORS.getColor('warning_700', theme);\r\n      bannerParams.focusBgColor = COLORS.getColor('warning_200', theme);\r\n      bannerParams.icon = SystemIcons.Help;\r\n      bannerParams.closeIconColor = COLORS.getColor('warning_500', theme);\r\n      bannerParams.linkVisited = COLORS.getColor('warning_800', theme);\r\n      bannerParams.linkFocused = COLORS.getColor('warning_800', theme);\r\n      break;\r\n    case 'critical':\r\n      bannerParams.typeColor = COLORS.getColor('critical_100', theme);\r\n      bannerParams.accentColor = COLORS.getColor('critical_700', theme);\r\n      bannerParams.focusBgColor = COLORS.getColor('critical_200', theme);\r\n      bannerParams.icon = SystemIcons.TechnicalWarning;\r\n      bannerParams.closeIconColor = COLORS.getColor('critical_500', theme);\r\n      bannerParams.linkVisited = COLORS.getColor('critical_800', theme);\r\n      bannerParams.linkFocused = COLORS.getColor('critical_800', theme);\r\n      break;\r\n    case 'positive':\r\n      bannerParams.typeColor = COLORS.getColor('correct_100', theme);\r\n      bannerParams.accentColor = COLORS.getColor('correct_700', theme);\r\n      bannerParams.focusBgColor = COLORS.getColor('correct_200', theme);\r\n      bannerParams.icon = SystemIcons.ThumbsUp;\r\n      bannerParams.closeIconColor = COLORS.getColor('correct_500', theme);\r\n      bannerParams.linkVisited = COLORS.getColor('correct_800', theme);\r\n      bannerParams.linkFocused = COLORS.getColor('correct_800', theme);\r\n      break;\r\n  }\r\n\r\n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\r\n\r\n  return (\r\n    <BannerContainerStyles\r\n      data-testid={testId}\r\n      $type={bannerParams.typeColor}\r\n      $linkFocused={bannerParams.linkFocused}\r\n      $linkVisited={bannerParams.linkVisited}\r\n      $link={bannerParams.accentColor}\r\n      $bottom={bottom}\r\n      className={cls}\r\n      role=\"note\"\r\n      {...rest}>\r\n      <BannerCenterStyles style={{ color: bannerParams.accentColor }} className={size}>\r\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\r\n        <BannerContentWrapperStyles>\r\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\r\n            {children}&nbsp;\r\n            {link && linkText && (\r\n              <HyperLink\r\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\r\n                onClick={(e) => {\r\n                  if (linkAction) {\r\n                    e.preventDefault();\r\n                    linkAction(e);\r\n                  }\r\n                }}\r\n                href={link}\r\n                variant=\"default\">\r\n                {linkText}\r\n              </HyperLink>\r\n            )}\r\n          </ComponentResponsive>\r\n        </BannerContentWrapperStyles>\r\n        {onClose && (\r\n          <BannerCloseButtonWrapperStyles>\r\n            <BannerCloseButtonContainerStyles $type={bannerParams.containerType}>\r\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={() => onClose()}>\r\n                <SystemIcons.Close color={bannerParams.closeIconColor} size=\"24px\" />\r\n              </IconButton>\r\n            </BannerCloseButtonContainerStyles>\r\n          </BannerCloseButtonWrapperStyles>\r\n        )}\r\n      </BannerCenterStyles>\r\n    </BannerContainerStyles>\r\n  );\r\n};\r\n\r\nexport default Banner;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Banner.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_styles","_icons","_Button","_styles2","_HyperLink","_utils","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","BannerContainerStyles","exports","styled","div","props","$type","COLORS","getColor","theme","$bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","$link","$linkVisited","$linkFocused","BannerCenterStyles","ComponentMStyling","ComponentTextStyle","Regular","BannerCloseButtonWrapperStyles","BannerCloseButtonContainerStyles","getButtonStyle","BannerContentWrapperStyles","Banner","_ref","size","type","children","bottom","testId","linkText","link","onClose","icon","noIcon","linkAction","fullWidth","className","rest","_objectWithoutProperties2","useTheme","width","setWidth","useState","hasWindow","window","innerWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","accentColor","closeIconColor","SystemIcons","Tip","containerType","focusBgColor","linkVisited","linkFocused","Help","TechnicalWarning","ThumbsUp","cls","jsx","role","jsxs","style","color","ComponentResponsive","id","Math","floor","random","onClick","preventDefault","href","variant","IconButton","shape","useTransparentBackground","action","Close","propTypes","_propTypes","oneOf","string","func","bool","node","_default"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\r\nimport { SystemIcons } from '../icons';\r\nimport { IconButton } from '../Button';\r\nimport { getButtonStyle } from './styles';\r\nimport { Size } from '../types';\r\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\r\nimport HyperLink from '../HyperLink/HyperLink';\r\nimport { StyledLink } from '../HyperLink/HyperLink';\r\nimport { hasWindow } from '../utils/utils';\r\n\r\n/**\r\n * Styles for <Banner />\r\n */\r\nexport type StyleBannerProps = BannerProps & { type: string; linkVisited: string; linkFocused: string };\r\n\r\nexport const BannerContainerStyles = styled.div<{ $link?: string, $bottom?: boolean, $type: string; $linkVisited: string; $linkFocused: string }>`\r\n  background: ${props => (props.$type ? props.$type : COLORS.getColor('correct_100', props.theme))};\r\n  min-height: 48px;\r\n  display: flex;\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n  margin-top: ${props => (props.$bottom ? 'auto' : '0')};\r\n  border-radius: 4px;\r\n\r\n  button:last-child {\r\n    line-height: 0;\r\n    margin: 0 0 0 8px;\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      margin: 0 0 0 16px;\r\n    }\r\n    ${BREAKPOINTS.LARGE} {\r\n      margin: 0 0 0 32px;\r\n    }\r\n    &.small {\r\n      margin: 0 0 0 8px;\r\n    }\r\n    &.medium {\r\n      margin: 0 0 0 16px;\r\n    }\r\n    &.large {\r\n      margin: 0 0 0 32px;\r\n    }\r\n  }\r\n\r\n  ${StyledLink} {\r\n    &:link {\r\n      color: ${(props) => props.$link};\r\n    }\r\n    &:visited {\r\n      color: ${(props) => props.$linkVisited};\r\n    }\r\n    &:focus,\r\n    &:active {\r\n      background-color: ${(props) => props.$linkFocused};\r\n      color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.full-width-banner {\r\n    margin: 8px;\r\n  }\r\n`;\r\n\r\nexport const BannerCenterStyles = styled.div`\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  display: flex;\r\n  width: 100%;\r\n  margin: 0 16px;\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: 0 32px;\r\n  }\r\n  ${BREAKPOINTS.LARGE} {\r\n    margin: 0 56px;\r\n  }\r\n  &.small {\r\n    margin: 0 16px;\r\n  }\r\n  &.medium {\r\n    margin: 0 32px;\r\n  }\r\n  &.large {\r\n    margin: 0 64px;\r\n  }\r\n\r\n  > svg {\r\n    flex-shrink: 0;\r\n    margin: 12px 0;\r\n  }\r\n\r\n  .full-width-banner & {\r\n    margin: 0 16px;\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      margin: 0 32px;\r\n    }\r\n    ${BREAKPOINTS.LARGE} {\r\n      margin: 0 64px;\r\n    }\r\n\r\n    &.small {\r\n      margin: 0 16px;\r\n    }\r\n\r\n    &.medium {\r\n      margin: 0 32px;\r\n    }\r\n\r\n    &.large {\r\n      margin: 0 64px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const BannerCloseButtonWrapperStyles = styled.div`\r\n  margin: 0 0 0 auto;\r\n`;\r\n\r\nexport const BannerCloseButtonContainerStyles = styled.div<{ $type?: string }>`\r\n  display: contents;\r\n  ${(props) => (props.$type ? getButtonStyle(props.$type, props.theme) : null)};\r\n`;\r\n\r\nexport const BannerContentWrapperStyles = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin: 12px 0;\r\n  &:not(:first-child) {\r\n    margin-left: 8px;\r\n  }\r\n`;\r\n\r\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /** Size of the banner. */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Type of the banner. Different types have different color schemes. */\r\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\r\n  /** Link that will be shown after the children of the component. */\r\n  link?: string;\r\n  /** Text of the link */\r\n  linkText?: string;\r\n  /** If provided, then after user clicks on the link instead of following the link this method will be executed. */\r\n  linkAction?: (ev: React.MouseEvent) => void;\r\n  /** If set to true, then Banner will have 'margin-top' set to auto, and will render it at the bottom of the parent. */\r\n  bottom?: boolean;\r\n  /** For testing purposes. Will be set on top level container. */\r\n  testId?: string;\r\n  /** Icon to be shown instead of default icon on the left side of the Banner. */\r\n  icon?: React.ReactNode;\r\n  /** Callback event to be executed when user clicks on Close button. */\r\n  onClose?: () => void;\r\n  /** By default different banner types have different icons shown. If this flag is set, then no icon will be shown */\r\n  noIcon?: boolean;\r\n  /** Modifies margin of the banner for the cases when Banner stretches to full page width. */\r\n  fullWidth?: boolean;\r\n};\r\n\r\n/** Banner component is used as a middle-interrupting message to the user with zero to one actions. */\r\nconst Banner: React.FunctionComponent<BannerProps> = ({\r\n  size,\r\n  type = 'neutral',\r\n  children,\r\n  bottom,\r\n  testId,\r\n  linkText,\r\n  link,\r\n  onClose,\r\n  icon,\r\n  noIcon,\r\n  linkAction,\r\n  fullWidth,\r\n  className,\r\n  ...rest\r\n}) => {\r\n  const theme = useTheme();\r\n  const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\r\n  React.useEffect(() => {\r\n    function handleResize() {\r\n      setWidth(window.innerWidth);\r\n    }\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, []);\r\n\r\n  let bannerParams = {\r\n    typeColor: COLORS.getColor('primary_100', theme),\r\n    accentColor: COLORS.getColor('primary_700', theme),\r\n    closeIconColor: COLORS.getColor('primary_500', theme),\r\n    icon: SystemIcons.Tip,\r\n    containerType: type,\r\n    focusBgColor: COLORS.getColor('primary_200', theme),\r\n    linkVisited: COLORS.getColor('primary_600', theme),\r\n    linkFocused: COLORS.getColor('primary_800', theme),\r\n  };\r\n  switch (type) {\r\n    case 'warning':\r\n      bannerParams.typeColor = COLORS.getColor('warning_100', theme);\r\n      bannerParams.accentColor = COLORS.getColor('warning_700', theme);\r\n      bannerParams.focusBgColor = COLORS.getColor('warning_200', theme);\r\n      bannerParams.icon = SystemIcons.Help;\r\n      bannerParams.closeIconColor = COLORS.getColor('warning_500', theme);\r\n      bannerParams.linkVisited = COLORS.getColor('warning_800', theme);\r\n      bannerParams.linkFocused = COLORS.getColor('warning_800', theme);\r\n      break;\r\n    case 'critical':\r\n      bannerParams.typeColor = COLORS.getColor('critical_100', theme);\r\n      bannerParams.accentColor = COLORS.getColor('critical_700', theme);\r\n      bannerParams.focusBgColor = COLORS.getColor('critical_200', theme);\r\n      bannerParams.icon = SystemIcons.TechnicalWarning;\r\n      bannerParams.closeIconColor = COLORS.getColor('critical_500', theme);\r\n      bannerParams.linkVisited = COLORS.getColor('critical_800', theme);\r\n      bannerParams.linkFocused = COLORS.getColor('critical_800', theme);\r\n      break;\r\n    case 'positive':\r\n      bannerParams.typeColor = COLORS.getColor('correct_100', theme);\r\n      bannerParams.accentColor = COLORS.getColor('correct_700', theme);\r\n      bannerParams.focusBgColor = COLORS.getColor('correct_200', theme);\r\n      bannerParams.icon = SystemIcons.ThumbsUp;\r\n      bannerParams.closeIconColor = COLORS.getColor('correct_500', theme);\r\n      bannerParams.linkVisited = COLORS.getColor('correct_800', theme);\r\n      bannerParams.linkFocused = COLORS.getColor('correct_800', theme);\r\n      break;\r\n  }\r\n\r\n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\r\n\r\n  return (\r\n    <BannerContainerStyles\r\n      data-testid={testId}\r\n      $type={bannerParams.typeColor}\r\n      $linkFocused={bannerParams.linkFocused}\r\n      $linkVisited={bannerParams.linkVisited}\r\n      $link={bannerParams.accentColor}\r\n      $bottom={bottom}\r\n      className={cls}\r\n      role=\"note\"\r\n      {...rest}>\r\n      <BannerCenterStyles style={{ color: bannerParams.accentColor }} className={size}>\r\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\r\n        <BannerContentWrapperStyles>\r\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\r\n            {children}&nbsp;\r\n            {link && linkText && (\r\n              <HyperLink\r\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\r\n                onClick={(e) => {\r\n                  if (linkAction) {\r\n                    e.preventDefault();\r\n                    linkAction(e);\r\n                  }\r\n                }}\r\n                href={link}\r\n                variant=\"default\">\r\n                {linkText}\r\n              </HyperLink>\r\n            )}\r\n          </ComponentResponsive>\r\n        </BannerContentWrapperStyles>\r\n        {onClose && (\r\n          <BannerCloseButtonWrapperStyles>\r\n            <BannerCloseButtonContainerStyles $type={bannerParams.containerType}>\r\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={() => onClose()}>\r\n                <SystemIcons.Close color={bannerParams.closeIconColor} size=\"24px\" />\r\n              </IconButton>\r\n            </BannerCloseButtonContainerStyles>\r\n          </BannerCloseButtonWrapperStyles>\r\n        )}\r\n      </BannerCenterStyles>\r\n    </BannerContainerStyles>\r\n  );\r\n};\r\n\r\nexport default Banner;\r\n"],"mappings":"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AM,GAAG,GAAI;AACvD;AACA;AACA;AACA;AACA;AACA,MAAMC,mBAAW,CAACC,MAAM;AACxB;AACA;AACA,MAAMD,mBAAW,CAACE,KAAK;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,qBAAU;AACd;AACA,eAAgBT,KAAK,IAAKA,KAAK,CAACU,KAAK;AACrC;AACA;AACA,eAAgBV,KAAK,IAAKA,KAAK,CAACW,YAAY;AAC5C;AACA;AACA;AACA,0BAA2BX,KAAK,IAAKA,KAAK,CAACY,YAAY;AACvD,eAAeZ,KAAK,IAAIE,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEH,KAAK,CAACI,KAAK,CAAC;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMS,kBAAkB,GAAAhB,OAAA,CAAAgB,kBAAA,GAAGf,yBAAM,CAACC,GAAG;AAC5C,IAAI,IAAAe,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC;AACvD;AACA;AACA;AACA;AACA,IAAIV,mBAAW,CAACC,MAAM;AACtB;AACA;AACA,IAAID,mBAAW,CAACE,KAAK;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMF,mBAAW,CAACC,MAAM;AACxB;AACA;AACA,MAAMD,mBAAW,CAACE,KAAK;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMS,8BAA8B,GAAApB,OAAA,CAAAoB,8BAAA,GAAGnB,yBAAM,CAACC,GAAG;AACxD;AACA,CAAC;AAEM,MAAMmB,gCAAgC,GAAArB,OAAA,CAAAqB,gCAAA,GAAGpB,yBAAM,CAACC,GAAuB;AAC9E;AACA,IAAKC,KAAK,IAAMA,KAAK,CAACC,KAAK,GAAG,IAAAkB,uBAAc,EAACnB,KAAK,CAACC,KAAK,EAAED,KAAK,CAACI,KAAK,CAAC,GAAG,IAAK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","ignoreList":[]}

package/dist/Banners/Banner.d.ts

@@ -1,50 +1,50 @@
-import * as React from 'react';
-import { Size } from '../types';
-/**
- * Styles for <Banner />
- */
-export type StyleBannerProps = BannerProps & {
-    type: string;
-    linkVisited: string;
-    linkFocused: string;
-};
-export declare const BannerContainerStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $link?: string | undefined;
-    $bottom?: boolean | undefined;
-    $type: string;
-    $linkVisited: string;
-    $linkFocused: string;
-}>> & string;
-export declare const BannerCenterStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const BannerCloseButtonWrapperStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const BannerCloseButtonContainerStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $type?: string | undefined;
-}>> & string;
-export declare const BannerContentWrapperStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-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. */
-    type?: 'warning' | 'critical' | 'positive' | 'neutral';
-    /** Link that will be shown after the children of the component. */
-    link?: string;
-    /** Text of the link */
-    linkText?: string;
-    /** If provided, then after user clicks on the link instead of following the link this method will be executed. */
-    linkAction?: (ev: React.MouseEvent) => void;
-    /** If set to true, then Banner will have 'margin-top' set to auto, and will render it at the bottom of the parent. */
-    bottom?: boolean;
-    /** For testing purposes. Will be set on top level container. */
-    testId?: string;
-    /** Icon to be shown instead of default icon on the left side of the Banner. */
-    icon?: React.ReactNode;
-    /** Callback event to be executed when user clicks on Close button. */
-    onClose?: () => void;
-    /** By default different banner types have different icons shown. If this flag is set, then no icon will be shown */
-    noIcon?: boolean;
-    /** Modifies margin of the banner for the cases when Banner stretches to full page width. */
-    fullWidth?: boolean;
-};
-/** Banner component is used as a middle-interrupting message to the user with zero to one actions. */
-declare const Banner: React.FunctionComponent<BannerProps>;
-export default Banner;
+import * as React from 'react';
+import { Size } from '../types';
+/**
+ * Styles for <Banner />
+ */
+export type StyleBannerProps = BannerProps & {
+    type: string;
+    linkVisited: string;
+    linkFocused: string;
+};
+export declare const BannerContainerStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $link?: string;
+    $bottom?: boolean;
+    $type: string;
+    $linkVisited: string;
+    $linkFocused: string;
+}>> & string;
+export declare const BannerCenterStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BannerCloseButtonWrapperStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BannerCloseButtonContainerStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $type?: string;
+}>> & string;
+export declare const BannerContentWrapperStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+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. */
+    type?: 'warning' | 'critical' | 'positive' | 'neutral';
+    /** Link that will be shown after the children of the component. */
+    link?: string;
+    /** Text of the link */
+    linkText?: string;
+    /** If provided, then after user clicks on the link instead of following the link this method will be executed. */
+    linkAction?: (ev: React.MouseEvent) => void;
+    /** If set to true, then Banner will have 'margin-top' set to auto, and will render it at the bottom of the parent. */
+    bottom?: boolean;
+    /** For testing purposes. Will be set on top level container. */
+    testId?: string;
+    /** Icon to be shown instead of default icon on the left side of the Banner. */
+    icon?: React.ReactNode;
+    /** Callback event to be executed when user clicks on Close button. */
+    onClose?: () => void;
+    /** By default different banner types have different icons shown. If this flag is set, then no icon will be shown */
+    noIcon?: boolean;
+    /** Modifies margin of the banner for the cases when Banner stretches to full page width. */
+    fullWidth?: boolean;
+};
+/** Banner component is used as a middle-interrupting message to the user with zero to one actions. */
+declare const Banner: React.FunctionComponent<BannerProps>;
+export default Banner;

package/dist/Banners/Banner.js

@@ -1,9 +1,7 @@
 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";
 const _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';
@@ -13,19 +11,125 @@ 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 HyperLink from '../HyperLink/HyperLink';
+import { StyledLink } from '../HyperLink/HyperLink';
 import { hasWindow } from '../utils/utils';
 
 /**
  * Styles for <Banner />
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const 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"])), props => props.$type ? props.$type : COLORS.getColor('correct_100', props.theme), props => COLORS.getColor('black', props.theme), props => props.$bottom ? 'auto' : '0', BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, StyledLink, props => props.$link, props => props.$linkVisited, props => props.$linkFocused, props => COLORS.getColor('white', props.theme));
-export const 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 const BannerCloseButtonWrapperStyles = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0 0 0 auto;\n"])));
-export const BannerCloseButtonContainerStyles = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: contents;\n  ", ";\n"])), props => props.$type ? getButtonStyle(props.$type, props.theme) : null);
-export const 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"])));
+export const BannerContainerStyles = styled.div`
+  background: ${props => props.$type ? props.$type : COLORS.getColor('correct_100', props.theme)};
+  min-height: 48px;
+  display: flex;
+  color: ${props => COLORS.getColor('black', props.theme)};
+  margin-top: ${props => props.$bottom ? 'auto' : '0'};
+  border-radius: 4px;
+
+  button:last-child {
+    line-height: 0;
+    margin: 0 0 0 8px;
+    ${BREAKPOINTS.MEDIUM} {
+      margin: 0 0 0 16px;
+    }
+    ${BREAKPOINTS.LARGE} {
+      margin: 0 0 0 32px;
+    }
+    &.small {
+      margin: 0 0 0 8px;
+    }
+    &.medium {
+      margin: 0 0 0 16px;
+    }
+    &.large {
+      margin: 0 0 0 32px;
+    }
+  }
+
+  ${StyledLink} {
+    &:link {
+      color: ${props => props.$link};
+    }
+    &:visited {
+      color: ${props => props.$linkVisited};
+    }
+    &:focus,
+    &:active {
+      background-color: ${props => props.$linkFocused};
+      color: ${props => COLORS.getColor('white', props.theme)};
+    }
+  }
+
+  &.full-width-banner {
+    margin: 8px;
+  }
+`;
+export const BannerCenterStyles = styled.div`
+  ${ComponentMStyling(ComponentTextStyle.Regular, null)}
+
+  display: flex;
+  width: 100%;
+  margin: 0 16px;
+  ${BREAKPOINTS.MEDIUM} {
+    margin: 0 32px;
+  }
+  ${BREAKPOINTS.LARGE} {
+    margin: 0 56px;
+  }
+  &.small {
+    margin: 0 16px;
+  }
+  &.medium {
+    margin: 0 32px;
+  }
+  &.large {
+    margin: 0 64px;
+  }
+
+  > svg {
+    flex-shrink: 0;
+    margin: 12px 0;
+  }
+
+  .full-width-banner & {
+    margin: 0 16px;
+
+    ${BREAKPOINTS.MEDIUM} {
+      margin: 0 32px;
+    }
+    ${BREAKPOINTS.LARGE} {
+      margin: 0 64px;
+    }
+
+    &.small {
+      margin: 0 16px;
+    }
+
+    &.medium {
+      margin: 0 32px;
+    }
+
+    &.large {
+      margin: 0 64px;
+    }
+  }
+`;
+export const BannerCloseButtonWrapperStyles = styled.div`
+  margin: 0 0 0 auto;
+`;
+export const BannerCloseButtonContainerStyles = styled.div`
+  display: contents;
+  ${props => props.$type ? getButtonStyle(props.$type, props.theme) : null};
+`;
+export const BannerContentWrapperStyles = styled.div`
+  display: flex;
+  align-items: center;
+  margin: 12px 0;
+  &:not(:first-child) {
+    margin-left: 8px;
+  }
+`;
 /** Banner component is used as a middle-interrupting message to the user with zero to one actions. */
 const Banner = _ref => {
   let {
@@ -92,7 +196,7 @@ const Banner = _ref => {
       bannerParams.linkFocused = COLORS.getColor('correct_800', theme);
       break;
   }
-  const cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(fullWidth ? 'full-width-banner' : '');
+  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;
   return /*#__PURE__*/_jsx(BannerContainerStyles, _objectSpread(_objectSpread({
     "data-testid": testId,
     $type: bannerParams.typeColor,
@@ -117,7 +221,7 @@ const Banner = _ref => {
           width: width,
           color: bannerParams.accentColor,
           children: [children, "\xA0", link && linkText && /*#__PURE__*/_jsx(HyperLink, {
-            id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
+            id: `${Math.floor(Math.random() * 999999999999)}_BannerLink`,
             onClick: e => {
               if (linkAction) {
                 e.preventDefault();