@laerdal/life-react-components 1.9.9-dev.7 → 1.10.1-dev.1

package/dist/Banners/Banner.cjs

@@ -9,8 +9,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -27,20 +31,24 @@ var _Button = require("../Button");
 
 var _styles2 = require("./styles");
 
-var _typography = require("../styles/typography");
-
 var _HyperLink = require("../HyperLink");
 
 var _HyperLink2 = require("../HyperLink/HyperLink");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["size", "type", "children", "bottom", "testId", "linkText", "link", "onClose", "icon", "noIcon", "linkAction"];
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 var BannerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link{\n      color: ", ";\n    }\n    &:visited{\n      color: ", ";\n    }\n    &:focus,\n    &:active{\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), function (props) {
   return props.$type ? props.$type : _styles.COLORS.correct_100;
 }, _styles.COLORS.black, function (props) {
@@ -54,7 +62,7 @@ var BannerContainer = _styledComponents.default.div(_templateObject || (_templat
 }, _styles.COLORS.white);
 
 var BannerCenter = _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 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n"])), function (props) {
-  return (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color);
+  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color);
 }, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
 
 var ButtonWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 0 0 auto;\n"])));
@@ -76,7 +84,8 @@ var Banner = function Banner(_ref) {
       onClose = _ref.onClose,
       icon = _ref.icon,
       noIcon = _ref.noIcon,
-      linkAction = _ref.linkAction;
+      linkAction = _ref.linkAction,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _React$useState = React.useState(window.innerWidth),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -135,14 +144,15 @@ var Banner = function Banner(_ref) {
     bannerParams.linkFocused = _styles.COLORS.correct_800;
   }
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContainer, _objectSpread(_objectSpread({
     "data-testid": testId,
     $type: bannerParams.typeColor,
     linkFocused: bannerParams.linkFocused,
     linkVisited: bannerParams.linkVisited,
     link: bannerParams.accentColor,
     hover: bannerParams.hoverColor,
-    bottom: bottom,
+    bottom: bottom
+  }, rest), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(BannerCenter, {
       $color: bannerParams.accentColor,
       className: size,
@@ -150,7 +160,7 @@ var Banner = function Banner(_ref) {
         color: bannerParams.accentColor,
         size: "24px"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContentWrapper, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_typography.ComponentResponsive, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ComponentResponsive, {
           size: size,
           width: width,
           color: bannerParams.accentColor,
@@ -186,7 +196,7 @@ var Banner = function Banner(_ref) {
         })
       })]
     })
-  });
+  }));
 };
 
 Banner.propTypes = {

package/dist/Banners/Banner.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentTextStyle","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","React","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","formatTypeToLowerCase","toLowerCase","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","Math","floor","random","e","preventDefault","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles/typography';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {defaultStyle} from '../HyperLink/styling';\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\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\nconst BannerCenter = styled.div<{ $color: string }>`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\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\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n  display: contents;\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: string;\n  link?: string;\n  linkText?: string;\n  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};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon, linkAction }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  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: 'neutral',\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800\n  };\n  const formatTypeToLowerCase = type?.toLowerCase();\n  if (formatTypeToLowerCase == '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.containerType = formatTypeToLowerCase;\n    bannerParams.linkVisited = COLORS.warning_800;\n    bannerParams.linkFocused = COLORS.warning_800;\n  } else if (formatTypeToLowerCase == '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.containerType = formatTypeToLowerCase;\n    bannerParams.linkVisited = COLORS.critical_800;\n    bannerParams.linkFocused = COLORS.critical_800;\n  } else if (formatTypeToLowerCase == '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.containerType = formatTypeToLowerCase;\n    bannerParams.linkVisited = COLORS.correct_800;\n    bannerParams.linkFocused = COLORS.correct_800;\n  }\n\n  return (\n    <BannerContainer data-testid={testId} $type={bannerParams.typeColor} linkFocused={bannerParams.linkFocused} linkVisited={bannerParams.linkVisited} link={bannerParams.accentColor} hover={bannerParams.hoverColor} bottom={bottom}>\n      <BannerCenter $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"],"file":"Banner.cjs"}
+{"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentTextStyle","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","rest","React","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","formatTypeToLowerCase","toLowerCase","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","Math","floor","random","e","preventDefault","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\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\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\nconst BannerCenter = styled.div<{ $color: string }>`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\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\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?: string;\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};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n                                                        size,\n                                                        type,\n                                                        children,\n                                                        bottom,\n                                                        testId,\n                                                        linkText,\n                                                        link,\n                                                        onClose,\n                                                        icon,\n                                                        noIcon,\n                                                        linkAction,\n                                                        ...rest\n                                                      }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  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: 'neutral',\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800\n  };\n  const formatTypeToLowerCase = type?.toLowerCase();\n  if (formatTypeToLowerCase == '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.containerType = formatTypeToLowerCase;\n    bannerParams.linkVisited = COLORS.warning_800;\n    bannerParams.linkFocused = COLORS.warning_800;\n  } else if (formatTypeToLowerCase == '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.containerType = formatTypeToLowerCase;\n    bannerParams.linkVisited = COLORS.critical_800;\n    bannerParams.linkFocused = COLORS.critical_800;\n  } else if (formatTypeToLowerCase == '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.containerType = formatTypeToLowerCase;\n    bannerParams.linkVisited = COLORS.correct_800;\n    bannerParams.linkFocused = COLORS.correct_800;\n  }\n\n  return (\n    <BannerContainer 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                     {...rest}>\n      <BannerCenter $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"],"file":"Banner.cjs"}

package/dist/Banners/Banner.d.ts

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

package/dist/Banners/Banner.js

@@ -1,18 +1,29 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+var _excluded = ["size", "type", "children", "bottom", "testId", "linkText", "link", "onClose", "icon", "noIcon", "linkAction"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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';
 import { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';
 import { IconButton } from '../Button';
 import { getButtonStyle } from './styles';
-import { ComponentMStyling, ComponentResponsive } from '../styles/typography';
+import { ComponentMStyling, ComponentResponsive } from '../styles';
 import { HyperLink } from '../HyperLink';
 import { StyledLink } from '../HyperLink/HyperLink';
+/**
+ * Styles for <Banner />
+ */
+
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link{\n      color: ", ";\n    }\n    &:visited{\n      color: ", ";\n    }\n    &:focus,\n    &:active{\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), function (props) {
@@ -46,7 +57,8 @@ var Banner = function Banner(_ref) {
       onClose = _ref.onClose,
       icon = _ref.icon,
       noIcon = _ref.noIcon,
-      linkAction = _ref.linkAction;
+      linkAction = _ref.linkAction,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var _React$useState = React.useState(window.innerWidth),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -105,14 +117,15 @@ var Banner = function Banner(_ref) {
     bannerParams.linkFocused = COLORS.correct_800;
   }
 
-  return /*#__PURE__*/_jsx(BannerContainer, {
+  return /*#__PURE__*/_jsx(BannerContainer, _objectSpread(_objectSpread({
     "data-testid": testId,
     $type: bannerParams.typeColor,
     linkFocused: bannerParams.linkFocused,
     linkVisited: bannerParams.linkVisited,
     link: bannerParams.accentColor,
     hover: bannerParams.hoverColor,
-    bottom: bottom,
+    bottom: bottom
+  }, rest), {}, {
     children: /*#__PURE__*/_jsxs(BannerCenter, {
       $color: bannerParams.accentColor,
       className: size,
@@ -156,7 +169,7 @@ var Banner = function Banner(_ref) {
         })
       })]
     })
-  });
+  }));
 };
 
 Banner.propTypes = {

package/dist/Banners/Banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","StyledLink","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","linkVisited","linkFocused","white","BannerCenter","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","containerType","focusBgColor","primary_200","primary_600","primary_800","formatTypeToLowerCase","toLowerCase","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","Math","floor","random","e","preventDefault","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles/typography';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {defaultStyle} from '../HyperLink/styling';\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\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\nconst BannerCenter = styled.div<{ $color: string }>`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\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\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n  display: contents;\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: string;\n  link?: string;\n  linkText?: string;\n  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};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon, linkAction }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  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: 'neutral',\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800\n  };\n  const formatTypeToLowerCase = type?.toLowerCase();\n  if (formatTypeToLowerCase == '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.containerType = formatTypeToLowerCase;\n    bannerParams.linkVisited = COLORS.warning_800;\n    bannerParams.linkFocused = COLORS.warning_800;\n  } else if (formatTypeToLowerCase == '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.containerType = formatTypeToLowerCase;\n    bannerParams.linkVisited = COLORS.critical_800;\n    bannerParams.linkFocused = COLORS.critical_800;\n  } else if (formatTypeToLowerCase == '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.containerType = formatTypeToLowerCase;\n    bannerParams.linkVisited = COLORS.correct_800;\n    bannerParams.linkFocused = COLORS.correct_800;\n  }\n\n  return (\n    <BannerContainer data-testid={testId} $type={bannerParams.typeColor} linkFocused={bannerParams.linkFocused} linkVisited={bannerParams.linkVisited} link={bannerParams.accentColor} hover={bannerParams.hoverColor} bottom={bottom}>\n      <BannerCenter $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"],"file":"Banner.js"}
+{"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","StyledLink","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","linkVisited","linkFocused","white","BannerCenter","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","rest","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","containerType","focusBgColor","primary_200","primary_600","primary_800","formatTypeToLowerCase","toLowerCase","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","Math","floor","random","e","preventDefault","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\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\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\nconst BannerCenter = styled.div<{ $color: string }>`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\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\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?: string;\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};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n                                                        size,\n                                                        type,\n                                                        children,\n                                                        bottom,\n                                                        testId,\n                                                        linkText,\n                                                        link,\n                                                        onClose,\n                                                        icon,\n                                                        noIcon,\n                                                        linkAction,\n                                                        ...rest\n                                                      }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  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: 'neutral',\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800\n  };\n  const formatTypeToLowerCase = type?.toLowerCase();\n  if (formatTypeToLowerCase == '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.containerType = formatTypeToLowerCase;\n    bannerParams.linkVisited = COLORS.warning_800;\n    bannerParams.linkFocused = COLORS.warning_800;\n  } else if (formatTypeToLowerCase == '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.containerType = formatTypeToLowerCase;\n    bannerParams.linkVisited = COLORS.critical_800;\n    bannerParams.linkFocused = COLORS.critical_800;\n  } else if (formatTypeToLowerCase == '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.containerType = formatTypeToLowerCase;\n    bannerParams.linkVisited = COLORS.correct_800;\n    bannerParams.linkFocused = COLORS.correct_800;\n  }\n\n  return (\n    <BannerContainer 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                     {...rest}>\n      <BannerCenter $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"],"file":"Banner.js"}

package/dist/Banners/OverviewBanner.cjs

@@ -9,6 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 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"));
@@ -25,25 +29,32 @@ 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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannersWrapper, {
+      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,
       children: children
     })
-  });
+  }));
 };
 
 OverviewBanner.propTypes = {

package/dist/Banners/OverviewBanner.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Banners/OverviewBanner.tsx"],"names":["BannersWrapper","styled","div","COLORS","primary_20","BannerContent","PageWidth","BREAKPOINTS","MEDIUM","black","OverviewBanner","children","testId"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,cAAc,GAAGC,0BAAOC,GAAV,iHACEC,eAAOC,UADT,CAApB;;AAIA,IAAMC,aAAa,GAAG,+BAAOC,kBAAP,CAAH,w3BACGH,eAAOC,UADV,EAOfG,oBAAYC,MAPG,EAgBbD,oBAAYC,MAhBC,EAwBb,mCAAkBL,eAAOM,KAAzB,CAxBa,EAsCbF,oBAAYC,MAtCC,CAAnB;;AAiDA,IAAME,cAAc,GAAG,SAAjBA,cAAiB,OAAiC;AAAA,MAA9BC,QAA8B,QAA9BA,QAA8B;AAAA,MAApBC,MAAoB,QAApBA,MAAoB;AACtD,sBACE,qBAAC,cAAD;AAAA,2BACE,qBAAC,aAAD;AAAe,qBAAaA,MAA5B;AAAA,gBAAqCD;AAArC;AADF,IADF;AAKD,CAND;;;AAFeA,EAAAA,Q;AAAeC,EAAAA,M;;eAUfF,c","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS} from '../styles';\nimport {PageWidth} from '../Layouts';\nimport {HeadlineXSStyling} from '../styles/typography';\n\nconst BannersWrapper = styled.div`\n  background-color: ${COLORS.primary_20};\n`;\n\nconst BannerContent = styled(PageWidth)`\n  background-color: ${COLORS.primary_20};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n    padding: 48px 12px;\n  }\n\n  & > *:first-child {\n    padding-top: 12px;\n    width: 320px;\n    height: 180px;\n    ${BREAKPOINTS.MEDIUM} {\n      padding-top: 0;\n      margin-right: 20px;\n      width: 384px;\n      height: 216px;\n    }\n  }\n  & h2 {\n    ${HeadlineXSStyling(COLORS.black)}\n    margin: 16px 0 24px 0;\n  }\n  & p {\n    margin: 0;\n    padding: 0 0 28px 0;\n    max-width: 310px;\n  }\n  & div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    margin-bottom: 18px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin-left: 20px;\n      align-items: start;\n      justify-content: start;\n      width: 384px;\n    }\n  }\n`;\n\ntype Props = { children: any; testId?: string };\n\nconst OverviewBanner = ({ children, testId }: Props) => {\n  return (\n    <BannersWrapper>\n      <BannerContent data-testid={testId}>{children}</BannerContent>\n    </BannersWrapper>\n  );\n};\n\nexport default OverviewBanner;\n"],"file":"OverviewBanner.cjs"}
+{"version":3,"sources":["../../src/Banners/OverviewBanner.tsx"],"names":["BannersWrapper","styled","div","COLORS","primary_20","BannerContent","PageWidth","BREAKPOINTS","MEDIUM","black","OverviewBanner","children","testId","rest"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,cAAc,GAAGC,0BAAOC,GAAV,iHACEC,eAAOC,UADT,CAApB;;AAIA,IAAMC,aAAa,GAAG,+BAAOC,kBAAP,CAAH,w3BACGH,eAAOC,UADV,EAOfG,oBAAYC,MAPG,EAgBbD,oBAAYC,MAhBC,EAwBb,mCAAkBL,eAAOM,KAAzB,CAxBa,EAsCbF,oBAAYC,MAtCC,CAAnB;;AAiDA,IAAME,cAAc,GAAG,SAAjBA,cAAiB,OAA0C;AAAA,MAAvCC,QAAuC,QAAvCA,QAAuC;AAAA,MAA7BC,MAA6B,QAA7BA,MAA6B;AAAA,MAAlBC,IAAkB;AAC/D,sBACE,qBAAC,cAAD,kCAAoBA,IAApB;AAAA,2BACE,qBAAC,aAAD;AAAe,qBAAaD,MAA5B;AAAA,gBAAqCD;AAArC;AADF,KADF;AAKD,CAND;;;AAFeA,EAAAA,Q;AAAeC,EAAAA,M;;eAUfF,c","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS} from '../styles';\nimport {PageWidth} from '../Layouts';\nimport {HeadlineXSStyling} from '../styles/typography';\n\nconst BannersWrapper = styled.div`\n  background-color: ${COLORS.primary_20};\n`;\n\nconst BannerContent = styled(PageWidth)`\n  background-color: ${COLORS.primary_20};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n    padding: 48px 12px;\n  }\n\n  & > *:first-child {\n    padding-top: 12px;\n    width: 320px;\n    height: 180px;\n    ${BREAKPOINTS.MEDIUM} {\n      padding-top: 0;\n      margin-right: 20px;\n      width: 384px;\n      height: 216px;\n    }\n  }\n  & h2 {\n    ${HeadlineXSStyling(COLORS.black)}\n    margin: 16px 0 24px 0;\n  }\n  & p {\n    margin: 0;\n    padding: 0 0 28px 0;\n    max-width: 310px;\n  }\n  & div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    margin-bottom: 18px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin-left: 20px;\n      align-items: start;\n      justify-content: start;\n      width: 384px;\n    }\n  }\n`;\n\ntype Props = { children: any; testId?: string } & 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"],"file":"OverviewBanner.cjs"}

package/dist/Banners/OverviewBanner.d.ts

@@ -1,6 +1,7 @@
+import * as React from 'react';
 declare type Props = {
     children: any;
     testId?: string;
-};
-declare const OverviewBanner: ({ children, testId }: Props) => JSX.Element;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare const OverviewBanner: ({ children, testId, ...rest }: Props) => JSX.Element;
 export default OverviewBanner;

package/dist/Banners/OverviewBanner.js

@@ -1,8 +1,15 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+var _excluded = ["children", "testId"];
 
 var _templateObject, _templateObject2;
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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';
@@ -14,13 +21,15 @@ var BannerContent = styled(PageWidth)(_templateObject2 || (_templateObject2 = _t
 
 var OverviewBanner = function OverviewBanner(_ref) {
   var children = _ref.children,
-      testId = _ref.testId;
-  return /*#__PURE__*/_jsx(BannersWrapper, {
+      testId = _ref.testId,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_jsx(BannersWrapper, _objectSpread(_objectSpread({}, rest), {}, {
     children: /*#__PURE__*/_jsx(BannerContent, {
       "data-testid": testId,
       children: children
     })
-  });
+  }));
 };
 
 OverviewBanner.propTypes = {

package/dist/Banners/OverviewBanner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Banners/OverviewBanner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","PageWidth","HeadlineXSStyling","BannersWrapper","div","primary_20","BannerContent","MEDIUM","black","OverviewBanner","children","testId"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,WAAR,EAAqBC,MAArB,QAAkC,WAAlC;AACA,SAAQC,SAAR,QAAwB,YAAxB;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;;AAEA,IAAMC,cAAc,GAAGL,MAAM,CAACM,GAAV,mGACEJ,MAAM,CAACK,UADT,CAApB;AAIA,IAAMC,aAAa,GAAGR,MAAM,CAACG,SAAD,CAAT,02BACGD,MAAM,CAACK,UADV,EAOfN,WAAW,CAACQ,MAPG,EAgBbR,WAAW,CAACQ,MAhBC,EAwBbL,iBAAiB,CAACF,MAAM,CAACQ,KAAR,CAxBJ,EAsCbT,WAAW,CAACQ,MAtCC,CAAnB;;AAiDA,IAAME,cAAc,GAAG,SAAjBA,cAAiB,OAAiC;AAAA,MAA9BC,QAA8B,QAA9BA,QAA8B;AAAA,MAApBC,MAAoB,QAApBA,MAAoB;AACtD,sBACE,KAAC,cAAD;AAAA,2BACE,KAAC,aAAD;AAAe,qBAAaA,MAA5B;AAAA,gBAAqCD;AAArC;AADF,IADF;AAKD,CAND;;;AAFeA,EAAAA,Q;AAAeC,EAAAA,M;;AAU9B,eAAeF,cAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS} from '../styles';\nimport {PageWidth} from '../Layouts';\nimport {HeadlineXSStyling} from '../styles/typography';\n\nconst BannersWrapper = styled.div`\n  background-color: ${COLORS.primary_20};\n`;\n\nconst BannerContent = styled(PageWidth)`\n  background-color: ${COLORS.primary_20};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n    padding: 48px 12px;\n  }\n\n  & > *:first-child {\n    padding-top: 12px;\n    width: 320px;\n    height: 180px;\n    ${BREAKPOINTS.MEDIUM} {\n      padding-top: 0;\n      margin-right: 20px;\n      width: 384px;\n      height: 216px;\n    }\n  }\n  & h2 {\n    ${HeadlineXSStyling(COLORS.black)}\n    margin: 16px 0 24px 0;\n  }\n  & p {\n    margin: 0;\n    padding: 0 0 28px 0;\n    max-width: 310px;\n  }\n  & div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    margin-bottom: 18px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin-left: 20px;\n      align-items: start;\n      justify-content: start;\n      width: 384px;\n    }\n  }\n`;\n\ntype Props = { children: any; testId?: string };\n\nconst OverviewBanner = ({ children, testId }: Props) => {\n  return (\n    <BannersWrapper>\n      <BannerContent data-testid={testId}>{children}</BannerContent>\n    </BannersWrapper>\n  );\n};\n\nexport default OverviewBanner;\n"],"file":"OverviewBanner.js"}
+{"version":3,"sources":["../../src/Banners/OverviewBanner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","PageWidth","HeadlineXSStyling","BannersWrapper","div","primary_20","BannerContent","MEDIUM","black","OverviewBanner","children","testId","rest"],"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;AAAA,MAAvCC,QAAuC,QAAvCA,QAAuC;AAAA,MAA7BC,MAA6B,QAA7BA,MAA6B;AAAA,MAAlBC,IAAkB;;AAC/D,sBACE,KAAC,cAAD,kCAAoBA,IAApB;AAAA,2BACE,KAAC,aAAD;AAAe,qBAAaD,MAA5B;AAAA,gBAAqCD;AAArC;AADF,KADF;AAKD,CAND;;;AAFeA,EAAAA,Q;AAAeC,EAAAA,M;;AAU9B,eAAeF,cAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS} from '../styles';\nimport {PageWidth} from '../Layouts';\nimport {HeadlineXSStyling} from '../styles/typography';\n\nconst BannersWrapper = styled.div`\n  background-color: ${COLORS.primary_20};\n`;\n\nconst BannerContent = styled(PageWidth)`\n  background-color: ${COLORS.primary_20};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n    padding: 48px 12px;\n  }\n\n  & > *:first-child {\n    padding-top: 12px;\n    width: 320px;\n    height: 180px;\n    ${BREAKPOINTS.MEDIUM} {\n      padding-top: 0;\n      margin-right: 20px;\n      width: 384px;\n      height: 216px;\n    }\n  }\n  & h2 {\n    ${HeadlineXSStyling(COLORS.black)}\n    margin: 16px 0 24px 0;\n  }\n  & p {\n    margin: 0;\n    padding: 0 0 28px 0;\n    max-width: 310px;\n  }\n  & div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    margin-bottom: 18px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin-left: 20px;\n      align-items: start;\n      justify-content: start;\n      width: 384px;\n    }\n  }\n`;\n\ntype Props = { children: any; testId?: string } & 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"],"file":"OverviewBanner.js"}

package/dist/Breadcrumb/Breadcrumb.cjs

@@ -9,6 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var React = _interopRequireWildcard(require("react"));
@@ -25,10 +29,16 @@ var _styles2 = require("./styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["items", "size", "homeIcon", "homeLabel", "homeUrl"];
+
 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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 var Breadcrumb = function Breadcrumb(_ref) {
   var items = _ref.items,
       _ref$size = _ref.size,
@@ -38,7 +48,8 @@ var Breadcrumb = function Breadcrumb(_ref) {
       _ref$homeLabel = _ref.homeLabel,
       homeLabel = _ref$homeLabel === void 0 ? 'Home' : _ref$homeLabel,
       _ref$homeUrl = _ref.homeUrl,
-      homeUrl = _ref$homeUrl === void 0 ? '/' : _ref$homeUrl;
+      homeUrl = _ref$homeUrl === void 0 ? '/' : _ref$homeUrl,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var history = (0, _reactRouter.useHistory)();
   var dropdownItems = items ? items.slice(0, items.length - 2).map(function (x) {
     return {
@@ -52,9 +63,10 @@ var Breadcrumb = function Breadcrumb(_ref) {
   };
 
   var chevronSize = size == _.Size.Medium ? '24px' : size == _.Size.Small ? '20px' : '16px';
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.BreadcrumbContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.BreadcrumbContainer, _objectSpread(_objectSpread({
     size: size,
-    "data-testid": 'breacrumbContainer',
+    "data-testid": 'breacrumbContainer'
+  }, rest), {}, {
     children: [homeIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.IconButton, {
       id: "homeIcon",
       variant: "secondary",
@@ -120,7 +132,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
         children: items[items.length - 1].label
       })]
     })]
-  });
+  }));
 };
 
 Breadcrumb.propTypes = {

package/dist/Breadcrumb/Breadcrumb.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"names":["Breadcrumb","items","size","Size","Small","homeIcon","homeLabel","homeUrl","history","dropdownItems","slice","length","map","x","value","url","displayLabel","label","navigate","links","push","chevronSize","Medium","COLORS","neutral_500","neutral_600"],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport { COLORS } from '../styles';\nimport { Size, SystemIcons } from '..';\nimport { useHistory } from 'react-router';\nimport { HyperLink, IconButton } from '..';\nimport { BreadcrumbItem } from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\nimport DropdownButton from '../Dropdown/DropdownButton';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport { BreadcrumbContainer, LastBreadcrumbItem } from './styles';\n\ntype BreadcrumbProps = {\n  homeIcon?: boolean;\n  homeLabel?: string;\n  homeUrl?: string;\n  items?: BreadcrumbItem[];\n  size?: Size;\n};\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ items, size = Size.Small, homeIcon = true, homeLabel = 'Home', homeUrl = '/' }) => {\n  const history = useHistory();\n  const dropdownItems: DropdownItem[] = items ? items.slice(0, items.length - 2).map((x) => ({ value: x.url, displayLabel: x.label })) : [];\n  const navigate = (links: string[]) => {\n    history.push(links[0]);\n  };\n\n  const chevronSize = size == Size.Medium ? '24px' : size == Size.Small ? '20px' : '16px';\n\n  return (\n    <BreadcrumbContainer size={size} data-testid={'breacrumbContainer'}>\n      {homeIcon ? (\n        <IconButton id=\"homeIcon\" variant=\"secondary\" shape=\"circular\" action={() => history.push(homeUrl)}>\n          <SystemIcons.Home size={chevronSize} />\n        </IconButton>\n      ) : (\n        <HyperLink id={'homelink'} variant=\"default\" href={homeUrl}>\n          {homeLabel}\n        </HyperLink>\n      )}\n\n      {!!items &&\n        items.length > 2 &&\n        (items.length > 3 ? (\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <DropdownButton\n              type={'icon'}\n              alignLeft={true}\n              items={dropdownItems}\n              size={size}\n              icon={<SystemIcons.MoreHorizontal color={COLORS.neutral_600} size=\"20px\" />}\n              onClick={navigate}\n            />\n          </>\n        ) : (\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <HyperLink id={'link-item-' + (items.length - 3)} target=\"_self\" variant=\"default\" href={items[items.length - 3].url}>\n              {items[items.length - 3].label}\n            </HyperLink>\n          </>\n        ))}\n\n      {!!items && items.length > 1 && (\n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <HyperLink id={'link-item-' + (items.length - 2)} target=\"_self\" variant=\"default\" href={items[items.length - 2].url}>\n            {items[items.length - 2].label}\n          </HyperLink>\n        </>\n      )}\n\n      {!!items && items.length > 0 && (\n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <LastBreadcrumbItem size={size}>{items[items.length - 1].label}</LastBreadcrumbItem>\n        </>\n      )}\n    </BreadcrumbContainer>\n  );\n};\n\nexport default Breadcrumb;\n"],"file":"Breadcrumb.cjs"}
+{"version":3,"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"names":["Breadcrumb","items","size","Size","Small","homeIcon","homeLabel","homeUrl","rest","history","dropdownItems","slice","length","map","x","value","url","displayLabel","label","navigate","links","push","chevronSize","Medium","COLORS","neutral_500","neutral_600"],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport { COLORS } from '../styles';\nimport { Size, SystemIcons } from '..';\nimport { useHistory } from 'react-router';\nimport { HyperLink, IconButton } from '..';\nimport { BreadcrumbItem } from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\nimport DropdownButton from '../Dropdown/DropdownButton';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport { BreadcrumbContainer, LastBreadcrumbItem } from './styles';\n\ntype BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {\n  homeIcon?: boolean;\n  homeLabel?: string;\n  homeUrl?: string;\n  items?: BreadcrumbItem[];\n  size?: Size;\n};\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ items, size = Size.Small, homeIcon = true, homeLabel = 'Home', homeUrl = '/', ...rest }) => {\n  const history = useHistory();\n  const dropdownItems: DropdownItem[] = items ? items.slice(0, items.length - 2).map((x) => ({ value: x.url, displayLabel: x.label })) : [];\n  const navigate = (links: string[]) => {\n    history.push(links[0]);\n  };\n\n  const chevronSize = size == Size.Medium ? '24px' : size == Size.Small ? '20px' : '16px';\n\n  return (\n    <BreadcrumbContainer size={size} data-testid={'breacrumbContainer'} {...rest}>\n      {homeIcon ? (\n        <IconButton id=\"homeIcon\" variant=\"secondary\" shape=\"circular\" action={() => history.push(homeUrl)}>\n          <SystemIcons.Home size={chevronSize} />\n        </IconButton>\n      ) : (\n        <HyperLink id={'homelink'} variant=\"default\" href={homeUrl}>\n          {homeLabel}\n        </HyperLink>\n      )}\n\n      {!!items &&\n        items.length > 2 &&\n        (items.length > 3 ? (\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <DropdownButton\n              type={'icon'}\n              alignLeft={true}\n              items={dropdownItems}\n              size={size}\n              icon={<SystemIcons.MoreHorizontal color={COLORS.neutral_600} size=\"20px\" />}\n              onClick={navigate}\n            />\n          </>\n        ) : (\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <HyperLink id={'link-item-' + (items.length - 3)} target=\"_self\" variant=\"default\" href={items[items.length - 3].url}>\n              {items[items.length - 3].label}\n            </HyperLink>\n          </>\n        ))}\n\n      {!!items && items.length > 1 && (\n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <HyperLink id={'link-item-' + (items.length - 2)} target=\"_self\" variant=\"default\" href={items[items.length - 2].url}>\n            {items[items.length - 2].label}\n          </HyperLink>\n        </>\n      )}\n\n      {!!items && items.length > 0 && (\n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <LastBreadcrumbItem size={size}>{items[items.length - 1].label}</LastBreadcrumbItem>\n        </>\n      )}\n    </BreadcrumbContainer>\n  );\n};\n\nexport default Breadcrumb;\n"],"file":"Breadcrumb.cjs"}

package/dist/Breadcrumb/Breadcrumb.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Size } from '..';
 import { BreadcrumbItem } from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';
-declare type BreadcrumbProps = {
+declare type BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {
     homeIcon?: boolean;
     homeLabel?: string;
     homeUrl?: string;

package/dist/Breadcrumb/Breadcrumb.js

@@ -1,4 +1,12 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _pt from "prop-types";
+var _excluded = ["items", "size", "homeIcon", "homeLabel", "homeUrl"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 import * as React from 'react';
 import { COLORS } from '../styles';
 import { Size, SystemIcons } from '..';
@@ -19,7 +27,9 @@ var Breadcrumb = function Breadcrumb(_ref) {
       _ref$homeLabel = _ref.homeLabel,
       homeLabel = _ref$homeLabel === void 0 ? 'Home' : _ref$homeLabel,
       _ref$homeUrl = _ref.homeUrl,
-      homeUrl = _ref$homeUrl === void 0 ? '/' : _ref$homeUrl;
+      homeUrl = _ref$homeUrl === void 0 ? '/' : _ref$homeUrl,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
   var history = useHistory();
   var dropdownItems = items ? items.slice(0, items.length - 2).map(function (x) {
     return {
@@ -33,9 +43,10 @@ var Breadcrumb = function Breadcrumb(_ref) {
   };
 
   var chevronSize = size == Size.Medium ? '24px' : size == Size.Small ? '20px' : '16px';
-  return /*#__PURE__*/_jsxs(BreadcrumbContainer, {
+  return /*#__PURE__*/_jsxs(BreadcrumbContainer, _objectSpread(_objectSpread({
     size: size,
-    "data-testid": 'breacrumbContainer',
+    "data-testid": 'breacrumbContainer'
+  }, rest), {}, {
     children: [homeIcon ? /*#__PURE__*/_jsx(IconButton, {
       id: "homeIcon",
       variant: "secondary",
@@ -101,7 +112,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
         children: items[items.length - 1].label
       })]
     })]
-  });
+  }));
 };
 
 Breadcrumb.propTypes = {