@laerdal/life-react-components 3.0.1-dev.9.full → 3.1.0-dev.1

package/dist/Banners/Banner.js

@@ -18,12 +18,12 @@ import { HyperLink } from '../HyperLink';
 import { StyledLink } from '../HyperLink';
 import { hasWindow } from '../utils/utils';
 
-/**
- * Styles for <Banner />
+/**
+ * Styles for <Banner />
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link {\n      color: ", ";\n    }\n    &:visited {\n      color: ", ";\n    }\n    &:focus,\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n"])), function (props) {
+export var BannerContainerStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link {\n      color: ", ";\n    }\n    &:visited {\n      color: ", ";\n    }\n    &:focus,\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n"])), function (props) {
   return props.$type ? props.$type : COLORS.correct_100;
 }, COLORS.black, function (props) {
   return props.bottom ? 'auto' : '0';
@@ -34,12 +34,12 @@ var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTe
 }, function (props) {
   return props.linkFocused;
 }, COLORS.white);
-var BannerCenter = 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);
-var ButtonWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0 0 0 auto;\n"])));
-var ButtonContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: contents;\n  ", ";\n"])), function (props) {
+export var BannerCenterStyles = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ", " {\n    margin: 0 32px;\n  }\n  ", " {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 64px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n\n  .full-width-banner & {\n    margin: 0 16px;\n\n    ", " {\n      margin: 0 32px;\n    }\n    ", " {\n      margin: 0 64px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 32px;\n    }\n\n    &.large {\n      margin: 0 64px;\n    }\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, null), BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
+export var BannerCloseButtonWrapperStyles = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0 0 0 auto;\n"])));
+export var BannerCloseButtonContainerStyles = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: contents;\n  ", ";\n"])), function (props) {
   return props.$type ? getButtonStyle(props.$type) : null;
 });
-var BannerContentWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n"])));
+export var BannerContentWrapperStyles = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n"])));
 var Banner = function Banner(_ref) {
   var size = _ref.size,
     _ref$type = _ref.type,
@@ -113,7 +113,7 @@ var Banner = function Banner(_ref) {
       break;
   }
   var cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(fullWidth ? 'full-width-banner' : '');
-  return /*#__PURE__*/_jsx(BannerContainer, _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsx(BannerContainerStyles, _objectSpread(_objectSpread({
     "data-testid": testId,
     $type: bannerParams.typeColor,
     linkFocused: bannerParams.linkFocused,
@@ -124,7 +124,7 @@ var Banner = function Banner(_ref) {
     className: cls,
     role: "note"
   }, rest), {}, {
-    children: /*#__PURE__*/_jsxs(BannerCenter, {
+    children: /*#__PURE__*/_jsxs(BannerCenterStyles, {
       style: {
         color: bannerParams.accentColor
       },
@@ -132,7 +132,7 @@ var Banner = function Banner(_ref) {
       children: [icon ? icon : noIcon ? null : /*#__PURE__*/_jsx(bannerParams.icon, {
         color: bannerParams.accentColor,
         size: "24px"
-      }), /*#__PURE__*/_jsx(BannerContentWrapper, {
+      }), /*#__PURE__*/_jsx(BannerContentWrapperStyles, {
         children: /*#__PURE__*/_jsxs(ComponentResponsive, {
           size: size,
           width: width,
@@ -150,8 +150,8 @@ var Banner = function Banner(_ref) {
             children: linkText
           })]
         })
-      }), onClose && /*#__PURE__*/_jsx(ButtonWrapper, {
-        children: /*#__PURE__*/_jsx(ButtonContainer, {
+      }), onClose && /*#__PURE__*/_jsx(BannerCloseButtonWrapperStyles, {
+        children: /*#__PURE__*/_jsx(BannerCloseButtonContainerStyles, {
           $type: bannerParams.containerType,
           children: /*#__PURE__*/_jsx(IconButton, {
             variant: "secondary",

package/dist/Banners/Banner.js.map

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

package/dist/Banners/OverviewBanner.cjs

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.OverviewBannerWrapperStyles = exports.OverviewBannerContentStyles = 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"));
@@ -21,14 +21,16 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var BannersWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), _styles.COLORS.primary_20);
-var BannerContent = (0, _styledComponents.default)(_Layouts.PageWidth)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  ", " {\n    flex-direction: row;\n    padding: 48px 12px;\n  }\n\n  & > *:first-child {\n    padding-top: 12px;\n    width: 320px;\n    height: 180px;\n\n    ", " {\n      padding-top: 0;\n      margin-right: 20px;\n      width: 384px;\n      height: 216px;\n    }\n  }\n\n  & h2, h3, h4, h5, h6 {\n    margin: 16px 0 24px 0;\n  }\n\n  & p {\n    margin: 0;\n    padding: 0 0 28px 0;\n    max-width: 310px;\n  }\n\n  & div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    margin-bottom: 18px;\n\n    ", " {\n      margin-left: 20px;\n      align-items: start;\n      justify-content: start;\n      width: 384px;\n    }\n  }\n"])), _styles.COLORS.primary_20, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.MEDIUM);
+var OverviewBannerWrapperStyles = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), _styles.COLORS.primary_20);
+exports.OverviewBannerWrapperStyles = OverviewBannerWrapperStyles;
+var OverviewBannerContentStyles = (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    ", " {\n      padding-top: 0;\n      margin-right: 20px;\n      width: 384px;\n      height: 216px;\n    }\n  }\n\n  & h2, h3, h4, h5, h6 {\n    margin: 16px 0 24px 0;\n  }\n\n  & p {\n    margin: 0;\n    padding: 0 0 28px 0;\n    max-width: 310px;\n  }\n\n  & div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    margin-bottom: 18px;\n\n    ", " {\n      margin-left: 20px;\n      align-items: start;\n      justify-content: start;\n      width: 384px;\n    }\n  }\n"])), _styles.COLORS.primary_20, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.MEDIUM);
+exports.OverviewBannerContentStyles = OverviewBannerContentStyles;
 var OverviewBanner = function OverviewBanner(_ref) {
   var children = _ref.children,
     testId = _ref.testId,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannersWrapper, _objectSpread(_objectSpread({}, rest), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContent, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(OverviewBannerWrapperStyles, _objectSpread(_objectSpread({}, rest), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OverviewBannerContentStyles, {
       "data-testid": testId,
       children: children
     })

package/dist/Banners/OverviewBanner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"OverviewBanner.cjs","names":["BannersWrapper","styled","div","COLORS","primary_20","BannerContent","PageWidth","BREAKPOINTS","MEDIUM","OverviewBanner","children","testId","rest"],"sources":["../../src/Banners/OverviewBanner.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {BREAKPOINTS, COLORS} from '../styles';\r\nimport {PageWidth} from '../Layouts';\r\n\r\nconst BannersWrapper = styled.div`\r\n  background-color: ${COLORS.primary_20};\r\n`;\r\n\r\nconst BannerContent = styled(PageWidth)`\r\n  background-color: ${COLORS.primary_20};\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-direction: column;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    flex-direction: row;\r\n    padding: 48px 12px;\r\n  }\r\n\r\n  & > *:first-child {\r\n    padding-top: 12px;\r\n    width: 320px;\r\n    height: 180px;\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      padding-top: 0;\r\n      margin-right: 20px;\r\n      width: 384px;\r\n      height: 216px;\r\n    }\r\n  }\r\n\r\n  & h2, h3, h4, h5, h6 {\r\n    margin: 16px 0 24px 0;\r\n  }\r\n\r\n  & p {\r\n    margin: 0;\r\n    padding: 0 0 28px 0;\r\n    max-width: 310px;\r\n  }\r\n\r\n  & div {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-direction: column;\r\n    margin-bottom: 18px;\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      margin-left: 20px;\r\n      align-items: start;\r\n      justify-content: start;\r\n      width: 384px;\r\n    }\r\n  }\r\n`;\r\n\r\ntype Props = { children: any; testId?: string } & React.HTMLAttributes<HTMLDivElement>;\r\n\r\nconst OverviewBanner = ({ children, testId, ...rest }: Props) => {\r\n  return (\r\n    <BannersWrapper {...rest}>\r\n      <BannerContent data-testid={testId}>{children}</BannerContent>\r\n    </BannersWrapper>\r\n  );\r\n};\r\n\r\nexport default OverviewBanner;\r\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAErC,IAAMA,cAAc,GAAGC,yBAAM,CAACC,GAAG,iHACXC,cAAM,CAACC,UAAU,CACtC;AAED,IAAMC,aAAa,GAAG,IAAAJ,yBAAM,EAACK,kBAAS,CAAC,w4BACjBH,cAAM,CAACC,UAAU,EAMnCG,mBAAW,CAACC,MAAM,EAUhBD,mBAAW,CAACC,MAAM,EAyBlBD,mBAAW,CAACC,MAAM,CAOvB;AAID,IAAMC,cAAc,GAAG,SAAjBA,cAAc,OAA6C;EAAA,IAAvCC,QAAQ,QAARA,QAAQ;IAAEC,MAAM,QAANA,MAAM;IAAKC,IAAI;EACjD,oBACE,qBAAC,cAAc,kCAAKA,IAAI;IAAA,uBACtB,qBAAC,aAAa;MAAC,eAAaD,MAAO;MAAA,UAAED;IAAQ;EAAiB,GAC/C;AAErB,CAAC;AAAC;EARaA,QAAQ;EAAOC,MAAM;AAAA;AAAA,eAUrBF,cAAc;AAAA"}
+{"version":3,"file":"OverviewBanner.cjs","names":["OverviewBannerWrapperStyles","styled","div","COLORS","primary_20","OverviewBannerContentStyles","PageWidth","BREAKPOINTS","MEDIUM","OverviewBanner","children","testId","rest"],"sources":["../../src/Banners/OverviewBanner.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS} from '../styles';\nimport {PageWidth} from '../Layouts';\n\nexport const OverviewBannerWrapperStyles = styled.div`\n  background-color: ${COLORS.primary_20};\n`;\n\nexport const OverviewBannerContentStyles = 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\n    ${BREAKPOINTS.MEDIUM} {\n      padding-top: 0;\n      margin-right: 20px;\n      width: 384px;\n      height: 216px;\n    }\n  }\n\n  & h2, h3, h4, h5, h6 {\n    margin: 16px 0 24px 0;\n  }\n\n  & p {\n    margin: 0;\n    padding: 0 0 28px 0;\n    max-width: 310px;\n  }\n\n  & div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    margin-bottom: 18px;\n\n    ${BREAKPOINTS.MEDIUM} {\n      margin-left: 20px;\n      align-items: start;\n      justify-content: start;\n      width: 384px;\n    }\n  }\n`;\n\nexport type OverviewBannerProps = { children: any; testId?: string } & React.HTMLAttributes<HTMLDivElement>;\n\nconst OverviewBanner = ({ children, testId, ...rest }: OverviewBannerProps) => {\n  return (\n    <OverviewBannerWrapperStyles {...rest}>\n      <OverviewBannerContentStyles data-testid={testId}>{children}</OverviewBannerContentStyles>\n    </OverviewBannerWrapperStyles>\n  );\n};\n\nexport default OverviewBanner;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE9B,IAAMA,2BAA2B,GAAGC,yBAAM,CAACC,GAAG,iHAC/BC,cAAM,CAACC,UAAU,CACtC;AAAC;AAEK,IAAMC,2BAA2B,GAAG,IAAAJ,yBAAM,EAACK,kBAAS,CAAC,w4BACtCH,cAAM,CAACC,UAAU,EAMnCG,mBAAW,CAACC,MAAM,EAUhBD,mBAAW,CAACC,MAAM,EAyBlBD,mBAAW,CAACC,MAAM,CAOvB;AAAC;AAIF,IAAMC,cAAc,GAAG,SAAjBA,cAAc,OAA2D;EAAA,IAArDC,QAAQ,QAARA,QAAQ;IAAEC,MAAM,QAANA,MAAM;IAAKC,IAAI;EACjD,oBACE,qBAAC,2BAA2B,kCAAKA,IAAI;IAAA,uBACnC,qBAAC,2BAA2B;MAAC,eAAaD,MAAO;MAAA,UAAED;IAAQ;EAA+B,GAC9D;AAElC,CAAC;AAAC;EARkCA,QAAQ;EAAOC,MAAM;AAAA;AAAA,eAU1CF,cAAc;AAAA"}

package/dist/Banners/OverviewBanner.d.ts

@@ -1,7 +1,13 @@
-import * as React from 'react';
-type Props = {
-    children: any;
-    testId?: string;
-} & React.HTMLAttributes<HTMLDivElement>;
-declare const OverviewBanner: ({ children, testId, ...rest }: Props) => JSX.Element;
-export default OverviewBanner;
+import * as React from 'react';
+export declare const OverviewBannerWrapperStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const OverviewBannerContentStyles: import("styled-components").StyledComponent<"div", any, {
+    useMaxWidth?: boolean | undefined;
+    maxWidth?: number | undefined;
+    unsetMargin?: boolean | undefined;
+}, never>;
+export type OverviewBannerProps = {
+    children: any;
+    testId?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare const OverviewBanner: ({ children, testId, ...rest }: OverviewBannerProps) => JSX.Element;
+export default OverviewBanner;

package/dist/Banners/OverviewBanner.js

@@ -11,14 +11,14 @@ import styled from 'styled-components';
 import { BREAKPOINTS, COLORS } from '../styles';
 import { PageWidth } from '../Layouts';
 import { jsx as _jsx } from "react/jsx-runtime";
-var BannersWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), COLORS.primary_20);
-var BannerContent = styled(PageWidth)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  ", " {\n    flex-direction: row;\n    padding: 48px 12px;\n  }\n\n  & > *:first-child {\n    padding-top: 12px;\n    width: 320px;\n    height: 180px;\n\n    ", " {\n      padding-top: 0;\n      margin-right: 20px;\n      width: 384px;\n      height: 216px;\n    }\n  }\n\n  & h2, h3, h4, h5, h6 {\n    margin: 16px 0 24px 0;\n  }\n\n  & p {\n    margin: 0;\n    padding: 0 0 28px 0;\n    max-width: 310px;\n  }\n\n  & div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    margin-bottom: 18px;\n\n    ", " {\n      margin-left: 20px;\n      align-items: start;\n      justify-content: start;\n      width: 384px;\n    }\n  }\n"])), COLORS.primary_20, BREAKPOINTS.MEDIUM, BREAKPOINTS.MEDIUM, BREAKPOINTS.MEDIUM);
+export var OverviewBannerWrapperStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), COLORS.primary_20);
+export var OverviewBannerContentStyles = styled(PageWidth)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  ", " {\n    flex-direction: row;\n    padding: 48px 12px;\n  }\n\n  & > *:first-child {\n    padding-top: 12px;\n    width: 320px;\n    height: 180px;\n\n    ", " {\n      padding-top: 0;\n      margin-right: 20px;\n      width: 384px;\n      height: 216px;\n    }\n  }\n\n  & h2, h3, h4, h5, h6 {\n    margin: 16px 0 24px 0;\n  }\n\n  & p {\n    margin: 0;\n    padding: 0 0 28px 0;\n    max-width: 310px;\n  }\n\n  & div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    margin-bottom: 18px;\n\n    ", " {\n      margin-left: 20px;\n      align-items: start;\n      justify-content: start;\n      width: 384px;\n    }\n  }\n"])), COLORS.primary_20, BREAKPOINTS.MEDIUM, BREAKPOINTS.MEDIUM, BREAKPOINTS.MEDIUM);
 var OverviewBanner = function OverviewBanner(_ref) {
   var children = _ref.children,
     testId = _ref.testId,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsx(BannersWrapper, _objectSpread(_objectSpread({}, rest), {}, {
-    children: /*#__PURE__*/_jsx(BannerContent, {
+  return /*#__PURE__*/_jsx(OverviewBannerWrapperStyles, _objectSpread(_objectSpread({}, rest), {}, {
+    children: /*#__PURE__*/_jsx(OverviewBannerContentStyles, {
       "data-testid": testId,
       children: children
     })

package/dist/Banners/OverviewBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverviewBanner.js","names":["React","styled","BREAKPOINTS","COLORS","PageWidth","BannersWrapper","div","primary_20","BannerContent","MEDIUM","OverviewBanner","children","testId","rest"],"sources":["../../src/Banners/OverviewBanner.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {BREAKPOINTS, COLORS} from '../styles';\r\nimport {PageWidth} from '../Layouts';\r\n\r\nconst BannersWrapper = styled.div`\r\n  background-color: ${COLORS.primary_20};\r\n`;\r\n\r\nconst BannerContent = styled(PageWidth)`\r\n  background-color: ${COLORS.primary_20};\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-direction: column;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    flex-direction: row;\r\n    padding: 48px 12px;\r\n  }\r\n\r\n  & > *:first-child {\r\n    padding-top: 12px;\r\n    width: 320px;\r\n    height: 180px;\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      padding-top: 0;\r\n      margin-right: 20px;\r\n      width: 384px;\r\n      height: 216px;\r\n    }\r\n  }\r\n\r\n  & h2, h3, h4, h5, h6 {\r\n    margin: 16px 0 24px 0;\r\n  }\r\n\r\n  & p {\r\n    margin: 0;\r\n    padding: 0 0 28px 0;\r\n    max-width: 310px;\r\n  }\r\n\r\n  & div {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-direction: column;\r\n    margin-bottom: 18px;\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      margin-left: 20px;\r\n      align-items: start;\r\n      justify-content: start;\r\n      width: 384px;\r\n    }\r\n  }\r\n`;\r\n\r\ntype Props = { children: any; testId?: string } & React.HTMLAttributes<HTMLDivElement>;\r\n\r\nconst OverviewBanner = ({ children, testId, ...rest }: Props) => {\r\n  return (\r\n    <BannersWrapper {...rest}>\r\n      <BannerContent data-testid={testId}>{children}</BannerContent>\r\n    </BannersWrapper>\r\n  );\r\n};\r\n\r\nexport default OverviewBanner;\r\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,WAAW,EAAEC,MAAM,QAAO,WAAW;AAC7C,SAAQC,SAAS,QAAO,YAAY;AAAC;AAErC,IAAMC,cAAc,GAAGJ,MAAM,CAACK,GAAG,mGACXH,MAAM,CAACI,UAAU,CACtC;AAED,IAAMC,aAAa,GAAGP,MAAM,CAACG,SAAS,CAAC,03BACjBD,MAAM,CAACI,UAAU,EAMnCL,WAAW,CAACO,MAAM,EAUhBP,WAAW,CAACO,MAAM,EAyBlBP,WAAW,CAACO,MAAM,CAOvB;AAID,IAAMC,cAAc,GAAG,SAAjBA,cAAc,OAA6C;EAAA,IAAvCC,QAAQ,QAARA,QAAQ;IAAEC,MAAM,QAANA,MAAM;IAAKC,IAAI;EACjD,oBACE,KAAC,cAAc,kCAAKA,IAAI;IAAA,uBACtB,KAAC,aAAa;MAAC,eAAaD,MAAO;MAAA,UAAED;IAAQ;EAAiB,GAC/C;AAErB,CAAC;AAAC;EARaA,QAAQ;EAAOC,MAAM;AAAA;AAUpC,eAAeF,cAAc"}
+{"version":3,"file":"OverviewBanner.js","names":["React","styled","BREAKPOINTS","COLORS","PageWidth","OverviewBannerWrapperStyles","div","primary_20","OverviewBannerContentStyles","MEDIUM","OverviewBanner","children","testId","rest"],"sources":["../../src/Banners/OverviewBanner.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS} from '../styles';\nimport {PageWidth} from '../Layouts';\n\nexport const OverviewBannerWrapperStyles = styled.div`\n  background-color: ${COLORS.primary_20};\n`;\n\nexport const OverviewBannerContentStyles = 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\n    ${BREAKPOINTS.MEDIUM} {\n      padding-top: 0;\n      margin-right: 20px;\n      width: 384px;\n      height: 216px;\n    }\n  }\n\n  & h2, h3, h4, h5, h6 {\n    margin: 16px 0 24px 0;\n  }\n\n  & p {\n    margin: 0;\n    padding: 0 0 28px 0;\n    max-width: 310px;\n  }\n\n  & div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    margin-bottom: 18px;\n\n    ${BREAKPOINTS.MEDIUM} {\n      margin-left: 20px;\n      align-items: start;\n      justify-content: start;\n      width: 384px;\n    }\n  }\n`;\n\nexport type OverviewBannerProps = { children: any; testId?: string } & React.HTMLAttributes<HTMLDivElement>;\n\nconst OverviewBanner = ({ children, testId, ...rest }: OverviewBannerProps) => {\n  return (\n    <OverviewBannerWrapperStyles {...rest}>\n      <OverviewBannerContentStyles data-testid={testId}>{children}</OverviewBannerContentStyles>\n    </OverviewBannerWrapperStyles>\n  );\n};\n\nexport default OverviewBanner;\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,WAAW,EAAEC,MAAM,QAAO,WAAW;AAC7C,SAAQC,SAAS,QAAO,YAAY;AAAC;AAErC,OAAO,IAAMC,2BAA2B,GAAGJ,MAAM,CAACK,GAAG,mGAC/BH,MAAM,CAACI,UAAU,CACtC;AAED,OAAO,IAAMC,2BAA2B,GAAGP,MAAM,CAACG,SAAS,CAAC,03BACtCD,MAAM,CAACI,UAAU,EAMnCL,WAAW,CAACO,MAAM,EAUhBP,WAAW,CAACO,MAAM,EAyBlBP,WAAW,CAACO,MAAM,CAOvB;AAID,IAAMC,cAAc,GAAG,SAAjBA,cAAc,OAA2D;EAAA,IAArDC,QAAQ,QAARA,QAAQ;IAAEC,MAAM,QAANA,MAAM;IAAKC,IAAI;EACjD,oBACE,KAAC,2BAA2B,kCAAKA,IAAI;IAAA,uBACnC,KAAC,2BAA2B;MAAC,eAAaD,MAAO;MAAA,UAAED;IAAQ;EAA+B,GAC9D;AAElC,CAAC;AAAC;EARkCA,QAAQ;EAAOC,MAAM;AAAA;AAUzD,eAAeF,cAAc"}

package/dist/Banners/index.cjs

@@ -1,9 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  Banner: true,
+  OverviewBanner: true
+};
 Object.defineProperty(exports, "Banner", {
   enumerable: true,
   get: function get() {
@@ -16,6 +20,30 @@ Object.defineProperty(exports, "OverviewBanner", {
     return _OverviewBanner.default;
   }
 });
-var _Banner = _interopRequireDefault(require("./Banner"));
-var _OverviewBanner = _interopRequireDefault(require("./OverviewBanner"));
+var _Banner = _interopRequireWildcard(require("./Banner"));
+Object.keys(_Banner).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Banner[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Banner[key];
+    }
+  });
+});
+var _OverviewBanner = _interopRequireWildcard(require("./OverviewBanner"));
+Object.keys(_OverviewBanner).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _OverviewBanner[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _OverviewBanner[key];
+    }
+  });
+});
+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; }
 //# sourceMappingURL=index.cjs.map

package/dist/Banners/index.cjs.map

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

package/dist/Banners/index.d.ts

@@ -1,3 +1,4 @@
-import Banner from './Banner';
-import OverviewBanner from './OverviewBanner';
-export { Banner, OverviewBanner };
+export { default as Banner } from './Banner';
+export { default as OverviewBanner } from './OverviewBanner';
+export * from './Banner';
+export * from './OverviewBanner';

package/dist/Banners/index.js

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

package/dist/Banners/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Banner","OverviewBanner"],"sources":["../../src/Banners/index.ts"],"sourcesContent":["import Banner from './Banner';\r\nimport OverviewBanner from './OverviewBanner';\r\n\r\n// eslint-disable-next-line import/prefer-default-export\r\nexport { Banner, OverviewBanner };\r\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,UAAU;AAC7B,OAAOC,cAAc,MAAM,kBAAkB;;AAE7C;AACA,SAASD,MAAM,EAAEC,cAAc"}
+{"version":3,"file":"index.js","names":["default","Banner","OverviewBanner"],"sources":["../../src/Banners/index.ts"],"sourcesContent":["export { default as Banner } from './Banner';\nexport { default as OverviewBanner } from './OverviewBanner';\nexport * from './Banner';\nexport * from './OverviewBanner';"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAAM,QAAQ,UAAU;AAC5C,SAASD,OAAO,IAAIE,cAAc,QAAQ,kBAAkB;AAC5D,cAAc,UAAU;AACxB,cAAc,kBAAkB"}

package/dist/Banners/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","names":["getButtonStyle","type","style","svgFill","COLORS","primary_500","hoverBgColor","primary_200","hoverSvgFill","primary_700","activeBgColor","primary_300","activeSvgFill","primary_800","focusBgColor","focusSvgFill","warning_500","warning_200","warning_700","warning_300","warning_800","critical_600","critical_200","critical_700","critical_300","critical_800","correct_500","correct_200","correct_700","correct_300","correct_800","css","StyledSecondaryIconButton"],"sources":["../../src/Banners/styles.tsx"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { StyledSecondaryIconButton } from '../Button/Iconbutton';\r\nimport { COLORS } from '../styles';\r\n\r\nexport const getButtonStyle = (type: string) => {\r\n  let style = {\r\n    svgFill: COLORS.primary_500,\r\n    hoverBgColor: COLORS.primary_200,\r\n    hoverSvgFill: COLORS.primary_700,\r\n    activeBgColor: COLORS.primary_300,\r\n    activeSvgFill: COLORS.primary_800,\r\n    focusBgColor: COLORS.primary_200,\r\n    focusSvgFill: COLORS.primary_700\r\n  };\r\n\r\n  switch(type)\r\n  {\r\n    case 'warning':\r\n      style = {\r\n        svgFill: COLORS.warning_500,\r\n        hoverBgColor: COLORS.warning_200,\r\n        hoverSvgFill: COLORS.warning_700,\r\n        activeBgColor: COLORS.warning_300,\r\n        activeSvgFill: COLORS.warning_800,\r\n        focusBgColor: COLORS.warning_200,\r\n        focusSvgFill: COLORS.warning_700\r\n      };\r\n      break;\r\n    \r\n    case 'critical':\r\n      style = {\r\n        svgFill: COLORS.critical_600,\r\n        hoverBgColor: COLORS.critical_200,\r\n        hoverSvgFill: COLORS.critical_700,\r\n        activeBgColor: COLORS.critical_300,\r\n        activeSvgFill: COLORS.critical_800,\r\n        focusBgColor: COLORS.critical_200,\r\n        focusSvgFill: COLORS.critical_700\r\n      };\r\n      break;\r\n\r\n    case 'positive':\r\n      style = {\r\n        svgFill: COLORS.correct_500,\r\n        hoverBgColor: COLORS.correct_200,\r\n        hoverSvgFill: COLORS.correct_700,\r\n        activeBgColor: COLORS.correct_300,\r\n        activeSvgFill: COLORS.correct_800,\r\n        focusBgColor: COLORS.correct_200,\r\n        focusSvgFill: COLORS.correct_700\r\n      };\r\n      break;\r\n  }\r\n\r\n  return css`\r\n    ${StyledSecondaryIconButton} {\r\n    div {\r\n      background-color: transparent;\r\n    }\r\n    div svg path,\r\n    div svg {\r\n      fill: ${style.svgFill};\r\n    }\r\n    &:hover:not(:disabled) {\r\n      div {\r\n        background-color: ${style.hoverBgColor};\r\n      }\r\n      div svg path,\r\n      div svg {\r\n        fill: ${style.hoverSvgFill};\r\n      }\r\n    }\r\n    &:active:not(:disabled) {\r\n      div {\r\n        background: ${style.activeBgColor};\r\n      }\r\n      div svg path,\r\n      div svg {\r\n        fill: ${style.activeSvgFill};\r\n      }\r\n    }\r\n  }`;\r\n};\r\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AAAmC;AAE5B,IAAMA,cAAc,GAAG,SAAjBA,cAAc,CAAIC,IAAY,EAAK;EAC9C,IAAIC,KAAK,GAAG;IACVC,OAAO,EAAEC,cAAM,CAACC,WAAW;IAC3BC,YAAY,EAAEF,cAAM,CAACG,WAAW;IAChCC,YAAY,EAAEJ,cAAM,CAACK,WAAW;IAChCC,aAAa,EAAEN,cAAM,CAACO,WAAW;IACjCC,aAAa,EAAER,cAAM,CAACS,WAAW;IACjCC,YAAY,EAAEV,cAAM,CAACG,WAAW;IAChCQ,YAAY,EAAEX,cAAM,CAACK;EACvB,CAAC;EAED,QAAOR,IAAI;IAET,KAAK,SAAS;MACZC,KAAK,GAAG;QACNC,OAAO,EAAEC,cAAM,CAACY,WAAW;QAC3BV,YAAY,EAAEF,cAAM,CAACa,WAAW;QAChCT,YAAY,EAAEJ,cAAM,CAACc,WAAW;QAChCR,aAAa,EAAEN,cAAM,CAACe,WAAW;QACjCP,aAAa,EAAER,cAAM,CAACgB,WAAW;QACjCN,YAAY,EAAEV,cAAM,CAACa,WAAW;QAChCF,YAAY,EAAEX,cAAM,CAACc;MACvB,CAAC;MACD;IAEF,KAAK,UAAU;MACbhB,KAAK,GAAG;QACNC,OAAO,EAAEC,cAAM,CAACiB,YAAY;QAC5Bf,YAAY,EAAEF,cAAM,CAACkB,YAAY;QACjCd,YAAY,EAAEJ,cAAM,CAACmB,YAAY;QACjCb,aAAa,EAAEN,cAAM,CAACoB,YAAY;QAClCZ,aAAa,EAAER,cAAM,CAACqB,YAAY;QAClCX,YAAY,EAAEV,cAAM,CAACkB,YAAY;QACjCP,YAAY,EAAEX,cAAM,CAACmB;MACvB,CAAC;MACD;IAEF,KAAK,UAAU;MACbrB,KAAK,GAAG;QACNC,OAAO,EAAEC,cAAM,CAACsB,WAAW;QAC3BpB,YAAY,EAAEF,cAAM,CAACuB,WAAW;QAChCnB,YAAY,EAAEJ,cAAM,CAACwB,WAAW;QAChClB,aAAa,EAAEN,cAAM,CAACyB,WAAW;QACjCjB,aAAa,EAAER,cAAM,CAAC0B,WAAW;QACjChB,YAAY,EAAEV,cAAM,CAACuB,WAAW;QAChCZ,YAAY,EAAEX,cAAM,CAACwB;MACvB,CAAC;MACD;EAAM;EAGV,WAAOG,qBAAG,qhBACNC,qCAAyB,EAMjB9B,KAAK,CAACC,OAAO,EAICD,KAAK,CAACI,YAAY,EAI9BJ,KAAK,CAACM,YAAY,EAKZN,KAAK,CAACQ,aAAa,EAIzBR,KAAK,CAACU,aAAa;AAInC,CAAC;AAAC"}
+{"version":3,"file":"styles.cjs","names":["getButtonStyle","type","style","svgFill","COLORS","primary_500","hoverBgColor","primary_200","hoverSvgFill","primary_700","activeBgColor","primary_300","activeSvgFill","primary_800","focusBgColor","focusSvgFill","warning_500","warning_200","warning_700","warning_300","warning_800","critical_600","critical_200","critical_700","critical_300","critical_800","correct_500","correct_200","correct_700","correct_300","correct_800","css","StyledSecondaryIconButton"],"sources":["../../src/Banners/styles.tsx"],"sourcesContent":["import { css } from 'styled-components';\nimport { StyledSecondaryIconButton } from '../Button/Iconbutton';\nimport { COLORS } from '../styles';\n\nexport const getButtonStyle = (type: string) => {\n  let style = {\n    svgFill: COLORS.primary_500,\n    hoverBgColor: COLORS.primary_200,\n    hoverSvgFill: COLORS.primary_700,\n    activeBgColor: COLORS.primary_300,\n    activeSvgFill: COLORS.primary_800,\n    focusBgColor: COLORS.primary_200,\n    focusSvgFill: COLORS.primary_700\n  };\n\n  switch(type)\n  {\n    case 'warning':\n      style = {\n        svgFill: COLORS.warning_500,\n        hoverBgColor: COLORS.warning_200,\n        hoverSvgFill: COLORS.warning_700,\n        activeBgColor: COLORS.warning_300,\n        activeSvgFill: COLORS.warning_800,\n        focusBgColor: COLORS.warning_200,\n        focusSvgFill: COLORS.warning_700\n      };\n      break;\n    \n    case 'critical':\n      style = {\n        svgFill: COLORS.critical_600,\n        hoverBgColor: COLORS.critical_200,\n        hoverSvgFill: COLORS.critical_700,\n        activeBgColor: COLORS.critical_300,\n        activeSvgFill: COLORS.critical_800,\n        focusBgColor: COLORS.critical_200,\n        focusSvgFill: COLORS.critical_700\n      };\n      break;\n\n    case 'positive':\n      style = {\n        svgFill: COLORS.correct_500,\n        hoverBgColor: COLORS.correct_200,\n        hoverSvgFill: COLORS.correct_700,\n        activeBgColor: COLORS.correct_300,\n        activeSvgFill: COLORS.correct_800,\n        focusBgColor: COLORS.correct_200,\n        focusSvgFill: COLORS.correct_700\n      };\n      break;\n  }\n\n  return css`\n    ${StyledSecondaryIconButton} {\n    div {\n      background-color: transparent;\n    }\n    div svg path,\n    div svg {\n      fill: ${style.svgFill};\n    }\n    &:hover:not(:disabled) {\n      div {\n        background-color: ${style.hoverBgColor};\n      }\n      div svg path,\n      div svg {\n        fill: ${style.hoverSvgFill};\n      }\n    }\n    &:active:not(:disabled) {\n      div {\n        background: ${style.activeBgColor};\n      }\n      div svg path,\n      div svg {\n        fill: ${style.activeSvgFill};\n      }\n    }\n  }`;\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AAAmC;AAE5B,IAAMA,cAAc,GAAG,SAAjBA,cAAc,CAAIC,IAAY,EAAK;EAC9C,IAAIC,KAAK,GAAG;IACVC,OAAO,EAAEC,cAAM,CAACC,WAAW;IAC3BC,YAAY,EAAEF,cAAM,CAACG,WAAW;IAChCC,YAAY,EAAEJ,cAAM,CAACK,WAAW;IAChCC,aAAa,EAAEN,cAAM,CAACO,WAAW;IACjCC,aAAa,EAAER,cAAM,CAACS,WAAW;IACjCC,YAAY,EAAEV,cAAM,CAACG,WAAW;IAChCQ,YAAY,EAAEX,cAAM,CAACK;EACvB,CAAC;EAED,QAAOR,IAAI;IAET,KAAK,SAAS;MACZC,KAAK,GAAG;QACNC,OAAO,EAAEC,cAAM,CAACY,WAAW;QAC3BV,YAAY,EAAEF,cAAM,CAACa,WAAW;QAChCT,YAAY,EAAEJ,cAAM,CAACc,WAAW;QAChCR,aAAa,EAAEN,cAAM,CAACe,WAAW;QACjCP,aAAa,EAAER,cAAM,CAACgB,WAAW;QACjCN,YAAY,EAAEV,cAAM,CAACa,WAAW;QAChCF,YAAY,EAAEX,cAAM,CAACc;MACvB,CAAC;MACD;IAEF,KAAK,UAAU;MACbhB,KAAK,GAAG;QACNC,OAAO,EAAEC,cAAM,CAACiB,YAAY;QAC5Bf,YAAY,EAAEF,cAAM,CAACkB,YAAY;QACjCd,YAAY,EAAEJ,cAAM,CAACmB,YAAY;QACjCb,aAAa,EAAEN,cAAM,CAACoB,YAAY;QAClCZ,aAAa,EAAER,cAAM,CAACqB,YAAY;QAClCX,YAAY,EAAEV,cAAM,CAACkB,YAAY;QACjCP,YAAY,EAAEX,cAAM,CAACmB;MACvB,CAAC;MACD;IAEF,KAAK,UAAU;MACbrB,KAAK,GAAG;QACNC,OAAO,EAAEC,cAAM,CAACsB,WAAW;QAC3BpB,YAAY,EAAEF,cAAM,CAACuB,WAAW;QAChCnB,YAAY,EAAEJ,cAAM,CAACwB,WAAW;QAChClB,aAAa,EAAEN,cAAM,CAACyB,WAAW;QACjCjB,aAAa,EAAER,cAAM,CAAC0B,WAAW;QACjChB,YAAY,EAAEV,cAAM,CAACuB,WAAW;QAChCZ,YAAY,EAAEX,cAAM,CAACwB;MACvB,CAAC;MACD;EAAM;EAGV,WAAOG,qBAAG,qhBACNC,qCAAyB,EAMjB9B,KAAK,CAACC,OAAO,EAICD,KAAK,CAACI,YAAY,EAI9BJ,KAAK,CAACM,YAAY,EAKZN,KAAK,CAACQ,aAAa,EAIzBR,KAAK,CAACU,aAAa;AAInC,CAAC;AAAC"}

package/dist/Banners/styles.d.ts

@@ -1 +1 @@
-export declare const getButtonStyle: (type: string) => import("styled-components").FlattenSimpleInterpolation;
+export declare const getButtonStyle: (type: string) => import("styled-components").FlattenSimpleInterpolation;

package/dist/Banners/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["css","StyledSecondaryIconButton","COLORS","getButtonStyle","type","style","svgFill","primary_500","hoverBgColor","primary_200","hoverSvgFill","primary_700","activeBgColor","primary_300","activeSvgFill","primary_800","focusBgColor","focusSvgFill","warning_500","warning_200","warning_700","warning_300","warning_800","critical_600","critical_200","critical_700","critical_300","critical_800","correct_500","correct_200","correct_700","correct_300","correct_800"],"sources":["../../src/Banners/styles.tsx"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { StyledSecondaryIconButton } from '../Button/Iconbutton';\r\nimport { COLORS } from '../styles';\r\n\r\nexport const getButtonStyle = (type: string) => {\r\n  let style = {\r\n    svgFill: COLORS.primary_500,\r\n    hoverBgColor: COLORS.primary_200,\r\n    hoverSvgFill: COLORS.primary_700,\r\n    activeBgColor: COLORS.primary_300,\r\n    activeSvgFill: COLORS.primary_800,\r\n    focusBgColor: COLORS.primary_200,\r\n    focusSvgFill: COLORS.primary_700\r\n  };\r\n\r\n  switch(type)\r\n  {\r\n    case 'warning':\r\n      style = {\r\n        svgFill: COLORS.warning_500,\r\n        hoverBgColor: COLORS.warning_200,\r\n        hoverSvgFill: COLORS.warning_700,\r\n        activeBgColor: COLORS.warning_300,\r\n        activeSvgFill: COLORS.warning_800,\r\n        focusBgColor: COLORS.warning_200,\r\n        focusSvgFill: COLORS.warning_700\r\n      };\r\n      break;\r\n    \r\n    case 'critical':\r\n      style = {\r\n        svgFill: COLORS.critical_600,\r\n        hoverBgColor: COLORS.critical_200,\r\n        hoverSvgFill: COLORS.critical_700,\r\n        activeBgColor: COLORS.critical_300,\r\n        activeSvgFill: COLORS.critical_800,\r\n        focusBgColor: COLORS.critical_200,\r\n        focusSvgFill: COLORS.critical_700\r\n      };\r\n      break;\r\n\r\n    case 'positive':\r\n      style = {\r\n        svgFill: COLORS.correct_500,\r\n        hoverBgColor: COLORS.correct_200,\r\n        hoverSvgFill: COLORS.correct_700,\r\n        activeBgColor: COLORS.correct_300,\r\n        activeSvgFill: COLORS.correct_800,\r\n        focusBgColor: COLORS.correct_200,\r\n        focusSvgFill: COLORS.correct_700\r\n      };\r\n      break;\r\n  }\r\n\r\n  return css`\r\n    ${StyledSecondaryIconButton} {\r\n    div {\r\n      background-color: transparent;\r\n    }\r\n    div svg path,\r\n    div svg {\r\n      fill: ${style.svgFill};\r\n    }\r\n    &:hover:not(:disabled) {\r\n      div {\r\n        background-color: ${style.hoverBgColor};\r\n      }\r\n      div svg path,\r\n      div svg {\r\n        fill: ${style.hoverSvgFill};\r\n      }\r\n    }\r\n    &:active:not(:disabled) {\r\n      div {\r\n        background: ${style.activeBgColor};\r\n      }\r\n      div svg path,\r\n      div svg {\r\n        fill: ${style.activeSvgFill};\r\n      }\r\n    }\r\n  }`;\r\n};\r\n"],"mappings":";;AAAA,SAASA,GAAG,QAAQ,mBAAmB;AACvC,SAASC,yBAAyB,QAAQ,sBAAsB;AAChE,SAASC,MAAM,QAAQ,WAAW;AAElC,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAc,CAAIC,IAAY,EAAK;EAC9C,IAAIC,KAAK,GAAG;IACVC,OAAO,EAAEJ,MAAM,CAACK,WAAW;IAC3BC,YAAY,EAAEN,MAAM,CAACO,WAAW;IAChCC,YAAY,EAAER,MAAM,CAACS,WAAW;IAChCC,aAAa,EAAEV,MAAM,CAACW,WAAW;IACjCC,aAAa,EAAEZ,MAAM,CAACa,WAAW;IACjCC,YAAY,EAAEd,MAAM,CAACO,WAAW;IAChCQ,YAAY,EAAEf,MAAM,CAACS;EACvB,CAAC;EAED,QAAOP,IAAI;IAET,KAAK,SAAS;MACZC,KAAK,GAAG;QACNC,OAAO,EAAEJ,MAAM,CAACgB,WAAW;QAC3BV,YAAY,EAAEN,MAAM,CAACiB,WAAW;QAChCT,YAAY,EAAER,MAAM,CAACkB,WAAW;QAChCR,aAAa,EAAEV,MAAM,CAACmB,WAAW;QACjCP,aAAa,EAAEZ,MAAM,CAACoB,WAAW;QACjCN,YAAY,EAAEd,MAAM,CAACiB,WAAW;QAChCF,YAAY,EAAEf,MAAM,CAACkB;MACvB,CAAC;MACD;IAEF,KAAK,UAAU;MACbf,KAAK,GAAG;QACNC,OAAO,EAAEJ,MAAM,CAACqB,YAAY;QAC5Bf,YAAY,EAAEN,MAAM,CAACsB,YAAY;QACjCd,YAAY,EAAER,MAAM,CAACuB,YAAY;QACjCb,aAAa,EAAEV,MAAM,CAACwB,YAAY;QAClCZ,aAAa,EAAEZ,MAAM,CAACyB,YAAY;QAClCX,YAAY,EAAEd,MAAM,CAACsB,YAAY;QACjCP,YAAY,EAAEf,MAAM,CAACuB;MACvB,CAAC;MACD;IAEF,KAAK,UAAU;MACbpB,KAAK,GAAG;QACNC,OAAO,EAAEJ,MAAM,CAAC0B,WAAW;QAC3BpB,YAAY,EAAEN,MAAM,CAAC2B,WAAW;QAChCnB,YAAY,EAAER,MAAM,CAAC4B,WAAW;QAChClB,aAAa,EAAEV,MAAM,CAAC6B,WAAW;QACjCjB,aAAa,EAAEZ,MAAM,CAAC8B,WAAW;QACjChB,YAAY,EAAEd,MAAM,CAAC2B,WAAW;QAChCZ,YAAY,EAAEf,MAAM,CAAC4B;MACvB,CAAC;MACD;EAAM;EAGV,OAAO9B,GAAG,sgBACNC,yBAAyB,EAMjBI,KAAK,CAACC,OAAO,EAICD,KAAK,CAACG,YAAY,EAI9BH,KAAK,CAACK,YAAY,EAKZL,KAAK,CAACO,aAAa,EAIzBP,KAAK,CAACS,aAAa;AAInC,CAAC"}
+{"version":3,"file":"styles.js","names":["css","StyledSecondaryIconButton","COLORS","getButtonStyle","type","style","svgFill","primary_500","hoverBgColor","primary_200","hoverSvgFill","primary_700","activeBgColor","primary_300","activeSvgFill","primary_800","focusBgColor","focusSvgFill","warning_500","warning_200","warning_700","warning_300","warning_800","critical_600","critical_200","critical_700","critical_300","critical_800","correct_500","correct_200","correct_700","correct_300","correct_800"],"sources":["../../src/Banners/styles.tsx"],"sourcesContent":["import { css } from 'styled-components';\nimport { StyledSecondaryIconButton } from '../Button/Iconbutton';\nimport { COLORS } from '../styles';\n\nexport const getButtonStyle = (type: string) => {\n  let style = {\n    svgFill: COLORS.primary_500,\n    hoverBgColor: COLORS.primary_200,\n    hoverSvgFill: COLORS.primary_700,\n    activeBgColor: COLORS.primary_300,\n    activeSvgFill: COLORS.primary_800,\n    focusBgColor: COLORS.primary_200,\n    focusSvgFill: COLORS.primary_700\n  };\n\n  switch(type)\n  {\n    case 'warning':\n      style = {\n        svgFill: COLORS.warning_500,\n        hoverBgColor: COLORS.warning_200,\n        hoverSvgFill: COLORS.warning_700,\n        activeBgColor: COLORS.warning_300,\n        activeSvgFill: COLORS.warning_800,\n        focusBgColor: COLORS.warning_200,\n        focusSvgFill: COLORS.warning_700\n      };\n      break;\n    \n    case 'critical':\n      style = {\n        svgFill: COLORS.critical_600,\n        hoverBgColor: COLORS.critical_200,\n        hoverSvgFill: COLORS.critical_700,\n        activeBgColor: COLORS.critical_300,\n        activeSvgFill: COLORS.critical_800,\n        focusBgColor: COLORS.critical_200,\n        focusSvgFill: COLORS.critical_700\n      };\n      break;\n\n    case 'positive':\n      style = {\n        svgFill: COLORS.correct_500,\n        hoverBgColor: COLORS.correct_200,\n        hoverSvgFill: COLORS.correct_700,\n        activeBgColor: COLORS.correct_300,\n        activeSvgFill: COLORS.correct_800,\n        focusBgColor: COLORS.correct_200,\n        focusSvgFill: COLORS.correct_700\n      };\n      break;\n  }\n\n  return css`\n    ${StyledSecondaryIconButton} {\n    div {\n      background-color: transparent;\n    }\n    div svg path,\n    div svg {\n      fill: ${style.svgFill};\n    }\n    &:hover:not(:disabled) {\n      div {\n        background-color: ${style.hoverBgColor};\n      }\n      div svg path,\n      div svg {\n        fill: ${style.hoverSvgFill};\n      }\n    }\n    &:active:not(:disabled) {\n      div {\n        background: ${style.activeBgColor};\n      }\n      div svg path,\n      div svg {\n        fill: ${style.activeSvgFill};\n      }\n    }\n  }`;\n};\n"],"mappings":";;AAAA,SAASA,GAAG,QAAQ,mBAAmB;AACvC,SAASC,yBAAyB,QAAQ,sBAAsB;AAChE,SAASC,MAAM,QAAQ,WAAW;AAElC,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAc,CAAIC,IAAY,EAAK;EAC9C,IAAIC,KAAK,GAAG;IACVC,OAAO,EAAEJ,MAAM,CAACK,WAAW;IAC3BC,YAAY,EAAEN,MAAM,CAACO,WAAW;IAChCC,YAAY,EAAER,MAAM,CAACS,WAAW;IAChCC,aAAa,EAAEV,MAAM,CAACW,WAAW;IACjCC,aAAa,EAAEZ,MAAM,CAACa,WAAW;IACjCC,YAAY,EAAEd,MAAM,CAACO,WAAW;IAChCQ,YAAY,EAAEf,MAAM,CAACS;EACvB,CAAC;EAED,QAAOP,IAAI;IAET,KAAK,SAAS;MACZC,KAAK,GAAG;QACNC,OAAO,EAAEJ,MAAM,CAACgB,WAAW;QAC3BV,YAAY,EAAEN,MAAM,CAACiB,WAAW;QAChCT,YAAY,EAAER,MAAM,CAACkB,WAAW;QAChCR,aAAa,EAAEV,MAAM,CAACmB,WAAW;QACjCP,aAAa,EAAEZ,MAAM,CAACoB,WAAW;QACjCN,YAAY,EAAEd,MAAM,CAACiB,WAAW;QAChCF,YAAY,EAAEf,MAAM,CAACkB;MACvB,CAAC;MACD;IAEF,KAAK,UAAU;MACbf,KAAK,GAAG;QACNC,OAAO,EAAEJ,MAAM,CAACqB,YAAY;QAC5Bf,YAAY,EAAEN,MAAM,CAACsB,YAAY;QACjCd,YAAY,EAAER,MAAM,CAACuB,YAAY;QACjCb,aAAa,EAAEV,MAAM,CAACwB,YAAY;QAClCZ,aAAa,EAAEZ,MAAM,CAACyB,YAAY;QAClCX,YAAY,EAAEd,MAAM,CAACsB,YAAY;QACjCP,YAAY,EAAEf,MAAM,CAACuB;MACvB,CAAC;MACD;IAEF,KAAK,UAAU;MACbpB,KAAK,GAAG;QACNC,OAAO,EAAEJ,MAAM,CAAC0B,WAAW;QAC3BpB,YAAY,EAAEN,MAAM,CAAC2B,WAAW;QAChCnB,YAAY,EAAER,MAAM,CAAC4B,WAAW;QAChClB,aAAa,EAAEV,MAAM,CAAC6B,WAAW;QACjCjB,aAAa,EAAEZ,MAAM,CAAC8B,WAAW;QACjChB,YAAY,EAAEd,MAAM,CAAC2B,WAAW;QAChCZ,YAAY,EAAEf,MAAM,CAAC4B;MACvB,CAAC;MACD;EAAM;EAGV,OAAO9B,GAAG,sgBACNC,yBAAyB,EAMjBI,KAAK,CAACC,OAAO,EAICD,KAAK,CAACG,YAAY,EAI9BH,KAAK,CAACK,YAAY,EAKZL,KAAK,CAACO,aAAa,EAIzBP,KAAK,CAACS,aAAa;AAInC,CAAC"}

package/dist/Breadcrumb/Breadcrumb.cjs

@@ -70,7 +70,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
       })]
     });
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.BreadcrumbContainer, _objectSpread(_objectSpread({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.BreadcrumbContainerStyles, _objectSpread(_objectSpread({
     size: size,
     "data-testid": 'breacrumbContainer'
   }, rest), {}, {
@@ -111,7 +111,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
       children: renderBreadcrumbLinkItem(items.length - 2, items[items.length - 2])
     }), !!items && items.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
       children: lastItemAsLabel ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [renderChevron(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles2.LastBreadcrumbItem, {
+        children: [renderChevron(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles2.BreadcrumbItemLastStyles, {
           size: size,
           children: items[items.length - 1].label
         })]

package/dist/Breadcrumb/Breadcrumb.cjs.map

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

package/dist/Breadcrumb/Breadcrumb.d.ts

@@ -1,13 +1,13 @@
-import * as React from 'react';
-import { Size } from '..';
-import { BreadcrumbItem } from './BreadcrumbItem';
-type BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {
-    homeIcon?: boolean;
-    homeLabel?: string;
-    homeUrl?: string;
-    items?: BreadcrumbItem[];
-    size?: Size;
-    lastItemAsLabel?: boolean;
-};
-declare const Breadcrumb: React.FunctionComponent<BreadcrumbProps>;
-export default Breadcrumb;
+import * as React from 'react';
+import { Size } from '..';
+import { BreadcrumbItem } from './BreadcrumbItem';
+export type BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {
+    homeIcon?: boolean;
+    homeLabel?: string;
+    homeUrl?: string;
+    items?: BreadcrumbItem[];
+    size?: Size;
+    lastItemAsLabel?: boolean;
+};
+declare const Breadcrumb: React.FunctionComponent<BreadcrumbProps>;
+export default Breadcrumb;

package/dist/Breadcrumb/Breadcrumb.js

@@ -10,7 +10,7 @@ import { Size, SystemIcons } from '..';
 import { useNavigate } from 'react-router';
 import { HyperLink, IconButton } from '..';
 import DropdownButton from '../Dropdown/DropdownButton';
-import { BreadcrumbContainer, LastBreadcrumbItem } from './styles';
+import { BreadcrumbContainerStyles, BreadcrumbItemLastStyles } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -63,7 +63,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
       })]
     });
   };
-  return /*#__PURE__*/_jsxs(BreadcrumbContainer, _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsxs(BreadcrumbContainerStyles, _objectSpread(_objectSpread({
     size: size,
     "data-testid": 'breacrumbContainer'
   }, rest), {}, {
@@ -104,7 +104,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
       children: renderBreadcrumbLinkItem(items.length - 2, items[items.length - 2])
     }), !!items && items.length > 0 && /*#__PURE__*/_jsx(_Fragment, {
       children: lastItemAsLabel ? /*#__PURE__*/_jsxs(_Fragment, {
-        children: [renderChevron(), /*#__PURE__*/_jsx(LastBreadcrumbItem, {
+        children: [renderChevron(), /*#__PURE__*/_jsx(BreadcrumbItemLastStyles, {
           size: size,
           children: items[items.length - 1].label
         })]

package/dist/Breadcrumb/Breadcrumb.js.map

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

package/dist/Breadcrumb/BreadcrumbItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.cjs","names":[],"sources":["../../src/Breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["export interface BreadcrumbItem {\r\n    label: string;\r\n    url: string;\r\n}\r\n  "],"mappings":""}
+{"version":3,"file":"BreadcrumbItem.cjs","names":[],"sources":["../../src/Breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["export interface BreadcrumbItem {\n    label: string;\n    url: string;\n}\n  "],"mappings":""}