@laerdal/life-react-components 3.5.1-dev.16 → 3.5.1-dev.18

package/dist/Banners/Banner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styles","_icons","_Button","_styles2","_HyperLink","_utils","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","BannerContainerStyles","styled","div","_taggedTemplateLiteral2","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","exports","BannerCenterStyles","ComponentMStyling","ComponentTextStyle","Regular","BannerCloseButtonWrapperStyles","BannerCloseButtonContainerStyles","getButtonStyle","BannerContentWrapperStyles","Banner","_ref","size","_ref$type","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","_objectWithoutProperties2","_React$useState","useState","hasWindow","window","innerWidth","_React$useState2","_slicedToArray2","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","closeIconColor","primary_500","SystemIcons","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","Help","warning_500","warning_800","critical_100","critical_700","critical_200","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","ThumbsUp","correct_500","correct_800","cls","concat","jsx","role","jsxs","style","color","ComponentResponsive","HyperLink","id","Math","floor","random","onClick","preventDefault","href","variant","IconButton","shape","useTransparentBackground","action","Close","propTypes","_propTypes","oneOf","string","func","bool","node","_default"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\r\nimport { SystemIcons } from '../icons';\r\nimport { IconButton } from '../Button';\r\nimport { getButtonStyle } from './styles';\r\nimport { Size } from '../types';\r\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\r\nimport { HyperLink } from '../HyperLink';\r\nimport { StyledLink } from '../HyperLink';\r\nimport { hasWindow } from '../utils/utils';\r\n\r\n/**\r\n * Styles for <Banner />\r\n */\r\nexport type StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\r\n\r\nexport const BannerContainerStyles = styled.div<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\nexport const BannerCenterStyles = styled.div`\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  display: flex;\r\n  width: 100%;\r\n  margin: 0 16px;\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: 0 32px;\r\n  }\r\n  ${BREAKPOINTS.LARGE} {\r\n    margin: 0 56px;\r\n  }\r\n  &.small {\r\n    margin: 0 16px;\r\n  }\r\n  &.medium {\r\n    margin: 0 32px;\r\n  }\r\n  &.large {\r\n    margin: 0 64px;\r\n  }\r\n\r\n  > svg {\r\n    flex-shrink: 0;\r\n    margin: 12px 0;\r\n  }\r\n\r\n  .full-width-banner & {\r\n    margin: 0 16px;\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      margin: 0 32px;\r\n    }\r\n    ${BREAKPOINTS.LARGE} {\r\n      margin: 0 64px;\r\n    }\r\n\r\n    &.small {\r\n      margin: 0 16px;\r\n    }\r\n\r\n    &.medium {\r\n      margin: 0 32px;\r\n    }\r\n\r\n    &.large {\r\n      margin: 0 64px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const BannerCloseButtonWrapperStyles = styled.div`\r\n  margin: 0 0 0 auto;\r\n`;\r\n\r\nexport const BannerCloseButtonContainerStyles = styled.div<{ $type?: string }>`\r\n  display: contents;\r\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\r\n`;\r\n\r\nexport const BannerContentWrapperStyles = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin: 12px 0;\r\n  &:not(:first-child) {\r\n    margin-left: 8px;\r\n  }\r\n`;\r\n\r\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /** Size of the banner. */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Type of the banner. Different types have different color schemes. */\r\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\r\n  /** Link that will be shown after the children of the component. */\r\n  link?: string;\r\n  /** Text of the link */\r\n  linkText?: string;\r\n  /** If provided, then after user clicks on the link instead of following the link this method will be executed. */\r\n  linkAction?: (ev: React.MouseEvent) => void;\r\n  /** If set to true, then Banner will have 'margin-top' set to auto, and will render it at the bottom of the parent. */\r\n  bottom?: boolean;\r\n  /** For testing purposes. Will be set on top level container. */\r\n  testId?: string;\r\n  /** Icon to be shown instead of default icon on the left side of the Banner. */\r\n  icon?: React.ReactNode;\r\n  /** Callback event to be executed when user clicks on Close button. */\r\n  onClose?: () => void;\r\n  /** By default different banner types have different icons shown. If this flag is set, then no icon will be shown */\r\n  noIcon?: boolean;\r\n  /** Modifies margin of the banner for the cases when Banner stretches to full page width. */\r\n  fullWidth?: boolean;\r\n};\r\n\r\n/** Banner component is used as a middle-interrupting message to the user with zero to one actions. */\r\nconst Banner: React.FunctionComponent<BannerProps> = ({\r\n  size,\r\n  type = 'neutral',\r\n  children,\r\n  bottom,\r\n  testId,\r\n  linkText,\r\n  link,\r\n  onClose,\r\n  icon,\r\n  noIcon,\r\n  linkAction,\r\n  fullWidth,\r\n  className,\r\n  ...rest\r\n}) => {\r\n  const [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    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.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.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.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    <BannerContainerStyles\r\n      data-testid={testId}\r\n      $type={bannerParams.typeColor}\r\n      linkFocused={bannerParams.linkFocused}\r\n      linkVisited={bannerParams.linkVisited}\r\n      link={bannerParams.accentColor}\r\n      bottom={bottom}\r\n      className={cls}\r\n      role=\"note\"\r\n      {...rest}>\r\n      <BannerCenterStyles style={{ color: bannerParams.accentColor }} className={size}>\r\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\r\n        <BannerContentWrapperStyles>\r\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\r\n            {children}&nbsp;\r\n            {link && linkText && (\r\n              <HyperLink\r\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\r\n                onClick={(e) => {\r\n                  if (linkAction) {\r\n                    e.preventDefault();\r\n                    linkAction(e);\r\n                  }\r\n                }}\r\n                href={link}\r\n                variant=\"default\">\r\n                {linkText}\r\n              </HyperLink>\r\n            )}\r\n          </ComponentResponsive>\r\n        </BannerContentWrapperStyles>\r\n        {onClose && (\r\n          <BannerCloseButtonWrapperStyles>\r\n            <BannerCloseButtonContainerStyles $type={bannerParams.containerType}>\r\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={() => onClose()}>\r\n                <SystemIcons.Close color={bannerParams.closeIconColor} size=\"24px\" />\r\n              </IconButton>\r\n            </BannerCloseButtonContainerStyles>\r\n          </BannerCloseButtonWrapperStyles>\r\n        )}\r\n      </BannerCenterStyles>\r\n    </BannerContainerStyles>\r\n  );\r\n};\r\n\r\nexport default Banner;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Banner.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_styles","_icons","_Button","_styles2","_HyperLink","_utils","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","BannerContainerStyles","styled","div","_taggedTemplateLiteral2","props","$type","COLORS","getColor","theme","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","exports","BannerCenterStyles","ComponentMStyling","ComponentTextStyle","Regular","BannerCloseButtonWrapperStyles","BannerCloseButtonContainerStyles","getButtonStyle","BannerContentWrapperStyles","Banner","_ref","size","_ref$type","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","_objectWithoutProperties2","useTheme","_React$useState","useState","hasWindow","window","innerWidth","_React$useState2","_slicedToArray2","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","accentColor","closeIconColor","SystemIcons","Tip","containerType","focusBgColor","Help","TechnicalWarning","ThumbsUp","cls","concat","jsx","role","jsxs","style","color","ComponentResponsive","HyperLink","id","Math","floor","random","onClick","preventDefault","href","variant","IconButton","shape","useTransparentBackground","action","Close","propTypes","_propTypes","oneOf","string","func","bool","node","_default"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\r\nimport { SystemIcons } from '../icons';\r\nimport { IconButton } from '../Button';\r\nimport { getButtonStyle } from './styles';\r\nimport { Size } from '../types';\r\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\r\nimport { HyperLink } from '../HyperLink';\r\nimport { StyledLink } from '../HyperLink';\r\nimport { hasWindow } from '../utils/utils';\r\n\r\n/**\r\n * Styles for <Banner />\r\n */\r\nexport type StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\r\n\r\nexport const BannerContainerStyles = styled.div<StyleBannerProps>`\r\n  background: ${props => (props.$type ? props.$type : COLORS.getColor('correct_100', props.theme))};\r\n  min-height: 48px;\r\n  display: flex;\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n  margin-top: ${(props: 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: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.full-width-banner {\r\n    margin: 8px;\r\n  }\r\n`;\r\n\r\nexport const BannerCenterStyles = styled.div`\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  display: flex;\r\n  width: 100%;\r\n  margin: 0 16px;\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: 0 32px;\r\n  }\r\n  ${BREAKPOINTS.LARGE} {\r\n    margin: 0 56px;\r\n  }\r\n  &.small {\r\n    margin: 0 16px;\r\n  }\r\n  &.medium {\r\n    margin: 0 32px;\r\n  }\r\n  &.large {\r\n    margin: 0 64px;\r\n  }\r\n\r\n  > svg {\r\n    flex-shrink: 0;\r\n    margin: 12px 0;\r\n  }\r\n\r\n  .full-width-banner & {\r\n    margin: 0 16px;\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      margin: 0 32px;\r\n    }\r\n    ${BREAKPOINTS.LARGE} {\r\n      margin: 0 64px;\r\n    }\r\n\r\n    &.small {\r\n      margin: 0 16px;\r\n    }\r\n\r\n    &.medium {\r\n      margin: 0 32px;\r\n    }\r\n\r\n    &.large {\r\n      margin: 0 64px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const BannerCloseButtonWrapperStyles = styled.div`\r\n  margin: 0 0 0 auto;\r\n`;\r\n\r\nexport const BannerCloseButtonContainerStyles = styled.div<{ $type?: string }>`\r\n  display: contents;\r\n  ${(props) => (props.$type ? getButtonStyle(props.$type, props.theme) : null)};\r\n`;\r\n\r\nexport const BannerContentWrapperStyles = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin: 12px 0;\r\n  &:not(:first-child) {\r\n    margin-left: 8px;\r\n  }\r\n`;\r\n\r\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /** Size of the banner. */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Type of the banner. Different types have different color schemes. */\r\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\r\n  /** Link that will be shown after the children of the component. */\r\n  link?: string;\r\n  /** Text of the link */\r\n  linkText?: string;\r\n  /** If provided, then after user clicks on the link instead of following the link this method will be executed. */\r\n  linkAction?: (ev: React.MouseEvent) => void;\r\n  /** If set to true, then Banner will have 'margin-top' set to auto, and will render it at the bottom of the parent. */\r\n  bottom?: boolean;\r\n  /** For testing purposes. Will be set on top level container. */\r\n  testId?: string;\r\n  /** Icon to be shown instead of default icon on the left side of the Banner. */\r\n  icon?: React.ReactNode;\r\n  /** Callback event to be executed when user clicks on Close button. */\r\n  onClose?: () => void;\r\n  /** By default different banner types have different icons shown. If this flag is set, then no icon will be shown */\r\n  noIcon?: boolean;\r\n  /** Modifies margin of the banner for the cases when Banner stretches to full page width. */\r\n  fullWidth?: boolean;\r\n};\r\n\r\n/** Banner component is used as a middle-interrupting message to the user with zero to one actions. */\r\nconst Banner: React.FunctionComponent<BannerProps> = ({\r\n  size,\r\n  type = 'neutral',\r\n  children,\r\n  bottom,\r\n  testId,\r\n  linkText,\r\n  link,\r\n  onClose,\r\n  icon,\r\n  noIcon,\r\n  linkAction,\r\n  fullWidth,\r\n  className,\r\n  ...rest\r\n}) => {\r\n  const theme = useTheme();\r\n  const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\r\n  React.useEffect(() => {\r\n    function handleResize() {\r\n      setWidth(window.innerWidth);\r\n    }\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, []);\r\n\r\n  let bannerParams = {\r\n    typeColor: COLORS.getColor('primary_100', theme),\r\n    accentColor: COLORS.getColor('primary_700', theme),\r\n    closeIconColor: COLORS.getColor('primary_500', theme),\r\n    icon: SystemIcons.Tip,\r\n    containerType: type,\r\n    focusBgColor: COLORS.getColor('primary_200', theme),\r\n    linkVisited: COLORS.getColor('primary_600', theme),\r\n    linkFocused: COLORS.getColor('primary_800', theme),\r\n  };\r\n  switch (type) {\r\n    case 'warning':\r\n      bannerParams.typeColor = COLORS.getColor('warning_100', theme);\r\n      bannerParams.accentColor = COLORS.getColor('warning_700', theme);\r\n      bannerParams.focusBgColor = COLORS.getColor('warning_200', theme);\r\n      bannerParams.icon = SystemIcons.Help;\r\n      bannerParams.closeIconColor = COLORS.getColor('warning_500', theme);\r\n      bannerParams.linkVisited = COLORS.getColor('warning_800', theme);\r\n      bannerParams.linkFocused = COLORS.getColor('warning_800', theme);\r\n      break;\r\n    case 'critical':\r\n      bannerParams.typeColor = COLORS.getColor('critical_100', theme);\r\n      bannerParams.accentColor = COLORS.getColor('critical_700', theme);\r\n      bannerParams.focusBgColor = COLORS.getColor('critical_200', theme);\r\n      bannerParams.icon = SystemIcons.TechnicalWarning;\r\n      bannerParams.closeIconColor = COLORS.getColor('critical_500', theme);\r\n      bannerParams.linkVisited = COLORS.getColor('critical_800', theme);\r\n      bannerParams.linkFocused = COLORS.getColor('critical_800', theme);\r\n      break;\r\n    case 'positive':\r\n      bannerParams.typeColor = COLORS.getColor('correct_100', theme);\r\n      bannerParams.accentColor = COLORS.getColor('correct_700', theme);\r\n      bannerParams.focusBgColor = COLORS.getColor('correct_200', theme);\r\n      bannerParams.icon = SystemIcons.ThumbsUp;\r\n      bannerParams.closeIconColor = COLORS.getColor('correct_500', theme);\r\n      bannerParams.linkVisited = COLORS.getColor('correct_800', theme);\r\n      bannerParams.linkFocused = COLORS.getColor('correct_800', theme);\r\n      break;\r\n  }\r\n\r\n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\r\n\r\n  return (\r\n    <BannerContainerStyles\r\n      data-testid={testId}\r\n      $type={bannerParams.typeColor}\r\n      linkFocused={bannerParams.linkFocused}\r\n      linkVisited={bannerParams.linkVisited}\r\n      link={bannerParams.accentColor}\r\n      bottom={bottom}\r\n      className={cls}\r\n      role=\"note\"\r\n      {...rest}>\r\n      <BannerCenterStyles style={{ color: bannerParams.accentColor }} className={size}>\r\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\r\n        <BannerContentWrapperStyles>\r\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\r\n            {children}&nbsp;\r\n            {link && linkText && (\r\n              <HyperLink\r\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\r\n                onClick={(e) => {\r\n                  if (linkAction) {\r\n                    e.preventDefault();\r\n                    linkAction(e);\r\n                  }\r\n                }}\r\n                href={link}\r\n                variant=\"default\">\r\n                {linkText}\r\n              </HyperLink>\r\n            )}\r\n          </ComponentResponsive>\r\n        </BannerContentWrapperStyles>\r\n        {onClose && (\r\n          <BannerCloseButtonWrapperStyles>\r\n            <BannerCloseButtonContainerStyles $type={bannerParams.containerType}>\r\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={() => onClose()}>\r\n                <SystemIcons.Close color={bannerParams.closeIconColor} size=\"24px\" />\r\n              </IconButton>\r\n            </BannerCloseButtonContainerStyles>\r\n          </BannerCloseButtonWrapperStyles>\r\n        )}\r\n      </BannerCenterStyles>\r\n    </BannerContainerStyles>\r\n  );\r\n};\r\n\r\nexport default Banner;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Banners/Banner.js

@@ -8,7 +8,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
 import { SystemIcons } from '../icons';
 import { IconButton } from '../Button';
@@ -24,8 +24,10 @@ import { hasWindow } from '../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var BannerContainerStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link {\n      color: ", ";\n    }\n    &:visited {\n      color: ", ";\n    }\n    &:focus,\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n"])), function (props) {
-  return props.$type ? props.$type : COLORS.correct_100;
-}, COLORS.black, function (props) {
+  return props.$type ? props.$type : COLORS.getColor('correct_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('black', props.theme);
+}, function (props) {
   return props.bottom ? 'auto' : '0';
 }, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, StyledLink, function (props) {
   return props.link;
@@ -33,11 +35,13 @@ export var BannerContainerStyles = styled.div(_templateObject || (_templateObjec
   return props.linkVisited;
 }, function (props) {
   return props.linkFocused;
-}, COLORS.white);
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+});
 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;
+  return props.$type ? getButtonStyle(props.$type, props.theme) : null;
 });
 export var BannerContentWrapperStyles = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n"])));
 /** Banner component is used as a middle-interrupting message to the user with zero to one actions. */
@@ -57,6 +61,7 @@ var Banner = function Banner(_ref) {
     fullWidth = _ref.fullWidth,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
   var _React$useState = React.useState(hasWindow() ? window.innerWidth : -1),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     width = _React$useState2[0],
@@ -71,42 +76,42 @@ var Banner = function Banner(_ref) {
     };
   }, []);
   var bannerParams = {
-    typeColor: COLORS.primary_100,
-    accentColor: COLORS.primary_700,
-    closeIconColor: COLORS.primary_500,
+    typeColor: COLORS.getColor('primary_100', theme),
+    accentColor: COLORS.getColor('primary_700', theme),
+    closeIconColor: COLORS.getColor('primary_500', theme),
     icon: SystemIcons.Tip,
     containerType: type,
-    focusBgColor: COLORS.primary_200,
-    linkVisited: COLORS.primary_600,
-    linkFocused: COLORS.primary_800
+    focusBgColor: COLORS.getColor('primary_200', theme),
+    linkVisited: COLORS.getColor('primary_600', theme),
+    linkFocused: COLORS.getColor('primary_800', theme)
   };
   switch (type) {
     case 'warning':
-      bannerParams.typeColor = COLORS.warning_100;
-      bannerParams.accentColor = COLORS.warning_700;
-      bannerParams.focusBgColor = COLORS.warning_200;
+      bannerParams.typeColor = COLORS.getColor('warning_100', theme);
+      bannerParams.accentColor = COLORS.getColor('warning_700', theme);
+      bannerParams.focusBgColor = COLORS.getColor('warning_200', theme);
       bannerParams.icon = SystemIcons.Help;
-      bannerParams.closeIconColor = COLORS.warning_500;
-      bannerParams.linkVisited = COLORS.warning_800;
-      bannerParams.linkFocused = COLORS.warning_800;
+      bannerParams.closeIconColor = COLORS.getColor('warning_500', theme);
+      bannerParams.linkVisited = COLORS.getColor('warning_800', theme);
+      bannerParams.linkFocused = COLORS.getColor('warning_800', theme);
       break;
     case 'critical':
-      bannerParams.typeColor = COLORS.critical_100;
-      bannerParams.accentColor = COLORS.critical_700;
-      bannerParams.focusBgColor = COLORS.critical_200;
+      bannerParams.typeColor = COLORS.getColor('critical_100', theme);
+      bannerParams.accentColor = COLORS.getColor('critical_700', theme);
+      bannerParams.focusBgColor = COLORS.getColor('critical_200', theme);
       bannerParams.icon = SystemIcons.TechnicalWarning;
-      bannerParams.closeIconColor = COLORS.critical_500;
-      bannerParams.linkVisited = COLORS.critical_800;
-      bannerParams.linkFocused = COLORS.critical_800;
+      bannerParams.closeIconColor = COLORS.getColor('critical_500', theme);
+      bannerParams.linkVisited = COLORS.getColor('critical_800', theme);
+      bannerParams.linkFocused = COLORS.getColor('critical_800', theme);
       break;
     case 'positive':
-      bannerParams.typeColor = COLORS.correct_100;
-      bannerParams.accentColor = COLORS.correct_700;
-      bannerParams.focusBgColor = COLORS.correct_200;
+      bannerParams.typeColor = COLORS.getColor('correct_100', theme);
+      bannerParams.accentColor = COLORS.getColor('correct_700', theme);
+      bannerParams.focusBgColor = COLORS.getColor('correct_200', theme);
       bannerParams.icon = SystemIcons.ThumbsUp;
-      bannerParams.closeIconColor = COLORS.correct_500;
-      bannerParams.linkVisited = COLORS.correct_800;
-      bannerParams.linkFocused = COLORS.correct_800;
+      bannerParams.closeIconColor = COLORS.getColor('correct_500', theme);
+      bannerParams.linkVisited = COLORS.getColor('correct_800', theme);
+      bannerParams.linkFocused = COLORS.getColor('correct_800', theme);
       break;
   }
   var cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(fullWidth ? 'full-width-banner' : '');

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","jsx","_jsx","jsxs","_jsxs","BannerContainerStyles","div","_templateObject","_taggedTemplateLiteral","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","linkVisited","linkFocused","white","BannerCenterStyles","_templateObject2","Regular","BannerCloseButtonWrapperStyles","_templateObject3","BannerCloseButtonContainerStyles","_templateObject4","BannerContentWrapperStyles","_templateObject5","Banner","_ref","size","_ref$type","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","_objectWithoutProperties","_excluded","_React$useState","useState","window","innerWidth","_React$useState2","_slicedToArray","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","Help","warning_500","warning_800","critical_100","critical_700","critical_200","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","ThumbsUp","correct_500","correct_800","cls","concat","_objectSpread","role","style","color","id","Math","floor","random","onClick","e","preventDefault","href","variant","shape","useTransparentBackground","action","Close","propTypes","_pt","oneOf","string","func","bool","node"],"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\nexport type StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\r\n\r\nexport const BannerContainerStyles = 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\nexport const BannerCenterStyles = styled.div`\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  display: flex;\r\n  width: 100%;\r\n  margin: 0 16px;\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: 0 32px;\r\n  }\r\n  ${BREAKPOINTS.LARGE} {\r\n    margin: 0 56px;\r\n  }\r\n  &.small {\r\n    margin: 0 16px;\r\n  }\r\n  &.medium {\r\n    margin: 0 32px;\r\n  }\r\n  &.large {\r\n    margin: 0 64px;\r\n  }\r\n\r\n  > svg {\r\n    flex-shrink: 0;\r\n    margin: 12px 0;\r\n  }\r\n\r\n  .full-width-banner & {\r\n    margin: 0 16px;\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      margin: 0 32px;\r\n    }\r\n    ${BREAKPOINTS.LARGE} {\r\n      margin: 0 64px;\r\n    }\r\n\r\n    &.small {\r\n      margin: 0 16px;\r\n    }\r\n\r\n    &.medium {\r\n      margin: 0 32px;\r\n    }\r\n\r\n    &.large {\r\n      margin: 0 64px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const BannerCloseButtonWrapperStyles = styled.div`\r\n  margin: 0 0 0 auto;\r\n`;\r\n\r\nexport const BannerCloseButtonContainerStyles = styled.div<{ $type?: string }>`\r\n  display: contents;\r\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\r\n`;\r\n\r\nexport const BannerContentWrapperStyles = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin: 12px 0;\r\n  &:not(:first-child) {\r\n    margin-left: 8px;\r\n  }\r\n`;\r\n\r\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /** Size of the banner. */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Type of the banner. Different types have different color schemes. */\r\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\r\n  /** Link that will be shown after the children of the component. */\r\n  link?: string;\r\n  /** Text of the link */\r\n  linkText?: string;\r\n  /** If provided, then after user clicks on the link instead of following the link this method will be executed. */\r\n  linkAction?: (ev: React.MouseEvent) => void;\r\n  /** If set to true, then Banner will have 'margin-top' set to auto, and will render it at the bottom of the parent. */\r\n  bottom?: boolean;\r\n  /** For testing purposes. Will be set on top level container. */\r\n  testId?: string;\r\n  /** Icon to be shown instead of default icon on the left side of the Banner. */\r\n  icon?: React.ReactNode;\r\n  /** Callback event to be executed when user clicks on Close button. */\r\n  onClose?: () => void;\r\n  /** By default different banner types have different icons shown. If this flag is set, then no icon will be shown */\r\n  noIcon?: boolean;\r\n  /** Modifies margin of the banner for the cases when Banner stretches to full page width. */\r\n  fullWidth?: boolean;\r\n};\r\n\r\n/** Banner component is used as a middle-interrupting message to the user with zero to one actions. */\r\nconst Banner: React.FunctionComponent<BannerProps> = ({\r\n  size,\r\n  type = 'neutral',\r\n  children,\r\n  bottom,\r\n  testId,\r\n  linkText,\r\n  link,\r\n  onClose,\r\n  icon,\r\n  noIcon,\r\n  linkAction,\r\n  fullWidth,\r\n  className,\r\n  ...rest\r\n}) => {\r\n  const [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    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.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.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.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    <BannerContainerStyles\r\n      data-testid={testId}\r\n      $type={bannerParams.typeColor}\r\n      linkFocused={bannerParams.linkFocused}\r\n      linkVisited={bannerParams.linkVisited}\r\n      link={bannerParams.accentColor}\r\n      bottom={bottom}\r\n      className={cls}\r\n      role=\"note\"\r\n      {...rest}>\r\n      <BannerCenterStyles style={{ color: bannerParams.accentColor }} className={size}>\r\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\r\n        <BannerContentWrapperStyles>\r\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\r\n            {children}&nbsp;\r\n            {link && linkText && (\r\n              <HyperLink\r\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\r\n                onClick={(e) => {\r\n                  if (linkAction) {\r\n                    e.preventDefault();\r\n                    linkAction(e);\r\n                  }\r\n                }}\r\n                href={link}\r\n                variant=\"default\">\r\n                {linkText}\r\n              </HyperLink>\r\n            )}\r\n          </ComponentResponsive>\r\n        </BannerContentWrapperStyles>\r\n        {onClose && (\r\n          <BannerCloseButtonWrapperStyles>\r\n            <BannerCloseButtonContainerStyles $type={bannerParams.containerType}>\r\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={() => onClose()}>\r\n                <SystemIcons.Close color={bannerParams.closeIconColor} size=\"24px\" />\r\n              </IconButton>\r\n            </BannerCloseButtonContainerStyles>\r\n          </BannerCloseButtonWrapperStyles>\r\n        )}\r\n      </BannerCenterStyles>\r\n    </BannerContainerStyles>\r\n  );\r\n};\r\n\r\nexport default Banner;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Banner.js","names":["React","styled","useTheme","BREAKPOINTS","COLORS","ComponentTextStyle","SystemIcons","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","StyledLink","hasWindow","jsx","_jsx","jsxs","_jsxs","BannerContainerStyles","div","_templateObject","_taggedTemplateLiteral","props","$type","getColor","theme","bottom","MEDIUM","LARGE","link","linkVisited","linkFocused","BannerCenterStyles","_templateObject2","Regular","BannerCloseButtonWrapperStyles","_templateObject3","BannerCloseButtonContainerStyles","_templateObject4","BannerContentWrapperStyles","_templateObject5","Banner","_ref","size","_ref$type","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","_objectWithoutProperties","_excluded","_React$useState","useState","window","innerWidth","_React$useState2","_slicedToArray","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","accentColor","closeIconColor","Tip","containerType","focusBgColor","Help","TechnicalWarning","ThumbsUp","cls","concat","_objectSpread","role","style","color","id","Math","floor","random","onClick","e","preventDefault","href","variant","shape","useTransparentBackground","action","Close","propTypes","_pt","oneOf","string","func","bool","node"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\r\nimport { SystemIcons } from '../icons';\r\nimport { IconButton } from '../Button';\r\nimport { getButtonStyle } from './styles';\r\nimport { Size } from '../types';\r\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\r\nimport { HyperLink } from '../HyperLink';\r\nimport { StyledLink } from '../HyperLink';\r\nimport { hasWindow } from '../utils/utils';\r\n\r\n/**\r\n * Styles for <Banner />\r\n */\r\nexport type StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\r\n\r\nexport const BannerContainerStyles = styled.div<StyleBannerProps>`\r\n  background: ${props => (props.$type ? props.$type : COLORS.getColor('correct_100', props.theme))};\r\n  min-height: 48px;\r\n  display: flex;\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n  margin-top: ${(props: 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: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.full-width-banner {\r\n    margin: 8px;\r\n  }\r\n`;\r\n\r\nexport const BannerCenterStyles = styled.div`\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  display: flex;\r\n  width: 100%;\r\n  margin: 0 16px;\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: 0 32px;\r\n  }\r\n  ${BREAKPOINTS.LARGE} {\r\n    margin: 0 56px;\r\n  }\r\n  &.small {\r\n    margin: 0 16px;\r\n  }\r\n  &.medium {\r\n    margin: 0 32px;\r\n  }\r\n  &.large {\r\n    margin: 0 64px;\r\n  }\r\n\r\n  > svg {\r\n    flex-shrink: 0;\r\n    margin: 12px 0;\r\n  }\r\n\r\n  .full-width-banner & {\r\n    margin: 0 16px;\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      margin: 0 32px;\r\n    }\r\n    ${BREAKPOINTS.LARGE} {\r\n      margin: 0 64px;\r\n    }\r\n\r\n    &.small {\r\n      margin: 0 16px;\r\n    }\r\n\r\n    &.medium {\r\n      margin: 0 32px;\r\n    }\r\n\r\n    &.large {\r\n      margin: 0 64px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const BannerCloseButtonWrapperStyles = styled.div`\r\n  margin: 0 0 0 auto;\r\n`;\r\n\r\nexport const BannerCloseButtonContainerStyles = styled.div<{ $type?: string }>`\r\n  display: contents;\r\n  ${(props) => (props.$type ? getButtonStyle(props.$type, props.theme) : null)};\r\n`;\r\n\r\nexport const BannerContentWrapperStyles = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin: 12px 0;\r\n  &:not(:first-child) {\r\n    margin-left: 8px;\r\n  }\r\n`;\r\n\r\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /** Size of the banner. */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Type of the banner. Different types have different color schemes. */\r\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\r\n  /** Link that will be shown after the children of the component. */\r\n  link?: string;\r\n  /** Text of the link */\r\n  linkText?: string;\r\n  /** If provided, then after user clicks on the link instead of following the link this method will be executed. */\r\n  linkAction?: (ev: React.MouseEvent) => void;\r\n  /** If set to true, then Banner will have 'margin-top' set to auto, and will render it at the bottom of the parent. */\r\n  bottom?: boolean;\r\n  /** For testing purposes. Will be set on top level container. */\r\n  testId?: string;\r\n  /** Icon to be shown instead of default icon on the left side of the Banner. */\r\n  icon?: React.ReactNode;\r\n  /** Callback event to be executed when user clicks on Close button. */\r\n  onClose?: () => void;\r\n  /** By default different banner types have different icons shown. If this flag is set, then no icon will be shown */\r\n  noIcon?: boolean;\r\n  /** Modifies margin of the banner for the cases when Banner stretches to full page width. */\r\n  fullWidth?: boolean;\r\n};\r\n\r\n/** Banner component is used as a middle-interrupting message to the user with zero to one actions. */\r\nconst Banner: React.FunctionComponent<BannerProps> = ({\r\n  size,\r\n  type = 'neutral',\r\n  children,\r\n  bottom,\r\n  testId,\r\n  linkText,\r\n  link,\r\n  onClose,\r\n  icon,\r\n  noIcon,\r\n  linkAction,\r\n  fullWidth,\r\n  className,\r\n  ...rest\r\n}) => {\r\n  const theme = useTheme();\r\n  const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\r\n  React.useEffect(() => {\r\n    function handleResize() {\r\n      setWidth(window.innerWidth);\r\n    }\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, []);\r\n\r\n  let bannerParams = {\r\n    typeColor: COLORS.getColor('primary_100', theme),\r\n    accentColor: COLORS.getColor('primary_700', theme),\r\n    closeIconColor: COLORS.getColor('primary_500', theme),\r\n    icon: SystemIcons.Tip,\r\n    containerType: type,\r\n    focusBgColor: COLORS.getColor('primary_200', theme),\r\n    linkVisited: COLORS.getColor('primary_600', theme),\r\n    linkFocused: COLORS.getColor('primary_800', theme),\r\n  };\r\n  switch (type) {\r\n    case 'warning':\r\n      bannerParams.typeColor = COLORS.getColor('warning_100', theme);\r\n      bannerParams.accentColor = COLORS.getColor('warning_700', theme);\r\n      bannerParams.focusBgColor = COLORS.getColor('warning_200', theme);\r\n      bannerParams.icon = SystemIcons.Help;\r\n      bannerParams.closeIconColor = COLORS.getColor('warning_500', theme);\r\n      bannerParams.linkVisited = COLORS.getColor('warning_800', theme);\r\n      bannerParams.linkFocused = COLORS.getColor('warning_800', theme);\r\n      break;\r\n    case 'critical':\r\n      bannerParams.typeColor = COLORS.getColor('critical_100', theme);\r\n      bannerParams.accentColor = COLORS.getColor('critical_700', theme);\r\n      bannerParams.focusBgColor = COLORS.getColor('critical_200', theme);\r\n      bannerParams.icon = SystemIcons.TechnicalWarning;\r\n      bannerParams.closeIconColor = COLORS.getColor('critical_500', theme);\r\n      bannerParams.linkVisited = COLORS.getColor('critical_800', theme);\r\n      bannerParams.linkFocused = COLORS.getColor('critical_800', theme);\r\n      break;\r\n    case 'positive':\r\n      bannerParams.typeColor = COLORS.getColor('correct_100', theme);\r\n      bannerParams.accentColor = COLORS.getColor('correct_700', theme);\r\n      bannerParams.focusBgColor = COLORS.getColor('correct_200', theme);\r\n      bannerParams.icon = SystemIcons.ThumbsUp;\r\n      bannerParams.closeIconColor = COLORS.getColor('correct_500', theme);\r\n      bannerParams.linkVisited = COLORS.getColor('correct_800', theme);\r\n      bannerParams.linkFocused = COLORS.getColor('correct_800', theme);\r\n      break;\r\n  }\r\n\r\n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\r\n\r\n  return (\r\n    <BannerContainerStyles\r\n      data-testid={testId}\r\n      $type={bannerParams.typeColor}\r\n      linkFocused={bannerParams.linkFocused}\r\n      linkVisited={bannerParams.linkVisited}\r\n      link={bannerParams.accentColor}\r\n      bottom={bottom}\r\n      className={cls}\r\n      role=\"note\"\r\n      {...rest}>\r\n      <BannerCenterStyles style={{ color: bannerParams.accentColor }} className={size}>\r\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\r\n        <BannerContentWrapperStyles>\r\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\r\n            {children}&nbsp;\r\n            {link && linkText && (\r\n              <HyperLink\r\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\r\n                onClick={(e) => {\r\n                  if (linkAction) {\r\n                    e.preventDefault();\r\n                    linkAction(e);\r\n                  }\r\n                }}\r\n                href={link}\r\n                variant=\"default\">\r\n                {linkText}\r\n              </HyperLink>\r\n            )}\r\n          </ComponentResponsive>\r\n        </BannerContentWrapperStyles>\r\n        {onClose && (\r\n          <BannerCloseButtonWrapperStyles>\r\n            <BannerCloseButtonContainerStyles $type={bannerParams.containerType}>\r\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={() => onClose()}>\r\n                <SystemIcons.Close color={bannerParams.closeIconColor} size=\"24px\" />\r\n              </IconButton>\r\n            </BannerCloseButtonContainerStyles>\r\n          </BannerCloseButtonWrapperStyles>\r\n        )}\r\n      </BannerCenterStyles>\r\n    </BannerContainerStyles>\r\n  );\r\n};\r\n\r\nexport default Banner;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Banners/OverviewBanner.cjs

@@ -21,9 +21,13 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var OverviewBannerWrapperStyles = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n"])), _styles.COLORS.primary_20);
+var OverviewBannerWrapperStyles = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n"])), function (props) {
+  return _styles.COLORS.getColor('primary_20', props.theme);
+});
 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);
+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"])), function (props) {
+  return _styles.COLORS.getColor('primary_20', props.theme);
+}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.MEDIUM);
 exports.OverviewBannerContentStyles = OverviewBannerContentStyles;
 var OverviewBanner = function OverviewBanner(_ref) {
   var children = _ref.children,

package/dist/Banners/OverviewBanner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"OverviewBanner.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styles","_Layouts","_jsxRuntime","_excluded","_templateObject","_templateObject2","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","OverviewBannerWrapperStyles","styled","div","_taggedTemplateLiteral2","COLORS","primary_20","exports","OverviewBannerContentStyles","PageWidth","BREAKPOINTS","MEDIUM","OverviewBanner","_ref","children","testId","rest","_objectWithoutProperties2","jsx","propTypes","_propTypes","any","isRequired","string","_default"],"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\nexport const OverviewBannerWrapperStyles = styled.div`\r\n  background-color: ${COLORS.primary_20};\r\n`;\r\n\r\nexport const OverviewBannerContentStyles = 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\nexport type OverviewBannerProps = { children: any; testId?: string } & React.HTMLAttributes<HTMLDivElement>;\r\n\r\nconst OverviewBanner = ({ children, testId, ...rest }: OverviewBannerProps) => {\r\n  return (\r\n    <OverviewBannerWrapperStyles {...rest}>\r\n      <OverviewBannerContentStyles data-testid={testId}>{children}</OverviewBannerContentStyles>\r\n    </OverviewBannerWrapperStyles>\r\n  );\r\n};\r\n\r\nexport default OverviewBanner;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"OverviewBanner.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styles","_Layouts","_jsxRuntime","_excluded","_templateObject","_templateObject2","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","OverviewBannerWrapperStyles","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","exports","OverviewBannerContentStyles","PageWidth","BREAKPOINTS","MEDIUM","OverviewBanner","_ref","children","testId","rest","_objectWithoutProperties2","jsx","propTypes","_propTypes","any","isRequired","string","_default"],"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\nexport const OverviewBannerWrapperStyles = styled.div`\r\n  background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n`;\r\n\r\nexport const OverviewBannerContentStyles = styled(PageWidth)`\r\n  background-color: ${props => COLORS.getColor('primary_20', props.theme)};\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\nexport type OverviewBannerProps = { children: any; testId?: string } & React.HTMLAttributes<HTMLDivElement>;\r\n\r\nconst OverviewBanner = ({ children, testId, ...rest }: OverviewBannerProps) => {\r\n  return (\r\n    <OverviewBannerWrapperStyles {...rest}>\r\n      <OverviewBannerContentStyles data-testid={testId}>{children}</OverviewBannerContentStyles>\r\n    </OverviewBannerWrapperStyles>\r\n  );\r\n};\r\n\r\nexport default OverviewBanner;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Banners/OverviewBanner.js

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

package/dist/Banners/OverviewBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverviewBanner.js","names":["React","styled","BREAKPOINTS","COLORS","PageWidth","jsx","_jsx","OverviewBannerWrapperStyles","div","_templateObject","_taggedTemplateLiteral","primary_20","OverviewBannerContentStyles","_templateObject2","MEDIUM","OverviewBanner","_ref","children","testId","rest","_objectWithoutProperties","_excluded","_objectSpread","propTypes","_pt","any","isRequired","string"],"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\nexport const OverviewBannerWrapperStyles = styled.div`\r\n  background-color: ${COLORS.primary_20};\r\n`;\r\n\r\nexport const OverviewBannerContentStyles = 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\nexport type OverviewBannerProps = { children: any; testId?: string } & React.HTMLAttributes<HTMLDivElement>;\r\n\r\nconst OverviewBanner = ({ children, testId, ...rest }: OverviewBannerProps) => {\r\n  return (\r\n    <OverviewBannerWrapperStyles {...rest}>\r\n      <OverviewBannerContentStyles data-testid={testId}>{children}</OverviewBannerContentStyles>\r\n    </OverviewBannerWrapperStyles>\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,SAAAC,GAAA,IAAAC,IAAA;AAErC,OAAO,IAAMC,2BAA2B,GAAGN,MAAM,CAACO,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,sCAC/BP,MAAM,CAACQ,UAAU,CACtC;AAED,OAAO,IAAMC,2BAA2B,GAAGX,MAAM,CAACG,SAAS,CAAC,CAAAS,gBAAA,KAAAA,gBAAA,GAAAH,sBAAA,2zBACtCP,MAAM,CAACQ,UAAU,EAMnCT,WAAW,CAACY,MAAM,EAUhBZ,WAAW,CAACY,MAAM,EAyBlBZ,WAAW,CAACY,MAAM,CAOvB;AAID,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAAC,IAAA,EAA2D;EAAA,IAArDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,MAAM,GAAAF,IAAA,CAANE,MAAM;IAAKC,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EACjD,oBACEf,IAAA,CAACC,2BAA2B,EAAAe,aAAA,CAAAA,aAAA,KAAKH,IAAI;IAAAF,QAAA,eACnCX,IAAA,CAACM,2BAA2B;MAAC,eAAaM,MAAO;MAAAD,QAAA,EAAEA;IAAQ,CAA8B;EAAC,EAC/D,CAAC;AAElC,CAAC;AAACF,cAAA,CAAAQ,SAAA;EARkCN,QAAQ,EAAAO,GAAA,CAAAC,GAAA,CAAAC,UAAA;EAAOR,MAAM,EAAAM,GAAA,CAAAG;AAAA;AAUzD,eAAeZ,cAAc","ignoreList":[]}
+{"version":3,"file":"OverviewBanner.js","names":["React","styled","BREAKPOINTS","COLORS","PageWidth","jsx","_jsx","OverviewBannerWrapperStyles","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","OverviewBannerContentStyles","_templateObject2","MEDIUM","OverviewBanner","_ref","children","testId","rest","_objectWithoutProperties","_excluded","_objectSpread","propTypes","_pt","any","isRequired","string"],"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\nexport const OverviewBannerWrapperStyles = styled.div`\r\n  background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n`;\r\n\r\nexport const OverviewBannerContentStyles = styled(PageWidth)`\r\n  background-color: ${props => COLORS.getColor('primary_20', props.theme)};\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\nexport type OverviewBannerProps = { children: any; testId?: string } & React.HTMLAttributes<HTMLDivElement>;\r\n\r\nconst OverviewBanner = ({ children, testId, ...rest }: OverviewBannerProps) => {\r\n  return (\r\n    <OverviewBannerWrapperStyles {...rest}>\r\n      <OverviewBannerContentStyles data-testid={testId}>{children}</OverviewBannerContentStyles>\r\n    </OverviewBannerWrapperStyles>\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,SAAAC,GAAA,IAAAC,IAAA;AAErC,OAAO,IAAMC,2BAA2B,GAAGN,MAAM,CAACO,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,sCAC/B,UAAAC,KAAK;EAAA,OAAIR,MAAM,CAACS,QAAQ,CAAC,YAAY,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EACxE;AAED,OAAO,IAAMC,2BAA2B,GAAGb,MAAM,CAACG,SAAS,CAAC,CAAAW,gBAAA,KAAAA,gBAAA,GAAAL,sBAAA,2zBACtC,UAAAC,KAAK;EAAA,OAAIR,MAAM,CAACS,QAAQ,CAAC,YAAY,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAMrEX,WAAW,CAACc,MAAM,EAUhBd,WAAW,CAACc,MAAM,EAyBlBd,WAAW,CAACc,MAAM,CAOvB;AAID,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAAC,IAAA,EAA2D;EAAA,IAArDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,MAAM,GAAAF,IAAA,CAANE,MAAM;IAAKC,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EACjD,oBACEjB,IAAA,CAACC,2BAA2B,EAAAiB,aAAA,CAAAA,aAAA,KAAKH,IAAI;IAAAF,QAAA,eACnCb,IAAA,CAACQ,2BAA2B;MAAC,eAAaM,MAAO;MAAAD,QAAA,EAAEA;IAAQ,CAA8B;EAAC,EAC/D,CAAC;AAElC,CAAC;AAACF,cAAA,CAAAQ,SAAA;EARkCN,QAAQ,EAAAO,GAAA,CAAAC,GAAA,CAAAC,UAAA;EAAOR,MAAM,EAAAM,GAAA,CAAAG;AAAA;AAUzD,eAAeZ,cAAc","ignoreList":[]}

package/dist/Banners/styles.cjs

@@ -10,48 +10,48 @@ var _styledComponents = require("styled-components");
 var _Iconbutton = require("../Button/Iconbutton");
 var _styles = require("../styles");
 var _templateObject;
-var getButtonStyle = function getButtonStyle(type) {
+var getButtonStyle = function getButtonStyle(type, theme) {
   var style = {
-    svgFill: _styles.COLORS.primary_500,
-    hoverBgColor: _styles.COLORS.primary_200,
-    hoverSvgFill: _styles.COLORS.primary_700,
-    activeBgColor: _styles.COLORS.primary_300,
-    activeSvgFill: _styles.COLORS.primary_800,
-    focusBgColor: _styles.COLORS.primary_200,
-    focusSvgFill: _styles.COLORS.primary_700
+    svgFill: _styles.COLORS.getColor('primary_500', theme),
+    hoverBgColor: _styles.COLORS.getColor('primary_200', theme),
+    hoverSvgFill: _styles.COLORS.getColor('primary_700', theme),
+    activeBgColor: _styles.COLORS.getColor('primary_300', theme),
+    activeSvgFill: _styles.COLORS.getColor('primary_800', theme),
+    focusBgColor: _styles.COLORS.getColor('primary_200', theme),
+    focusSvgFill: _styles.COLORS.getColor('primary_700', theme)
   };
   switch (type) {
     case 'warning':
       style = {
-        svgFill: _styles.COLORS.warning_500,
-        hoverBgColor: _styles.COLORS.warning_200,
-        hoverSvgFill: _styles.COLORS.warning_700,
-        activeBgColor: _styles.COLORS.warning_300,
-        activeSvgFill: _styles.COLORS.warning_800,
-        focusBgColor: _styles.COLORS.warning_200,
-        focusSvgFill: _styles.COLORS.warning_700
+        svgFill: _styles.COLORS.getColor('warning_500', theme),
+        hoverBgColor: _styles.COLORS.getColor('warning_200', theme),
+        hoverSvgFill: _styles.COLORS.getColor('warning_700', theme),
+        activeBgColor: _styles.COLORS.getColor('warning_300', theme),
+        activeSvgFill: _styles.COLORS.getColor('warning_800', theme),
+        focusBgColor: _styles.COLORS.getColor('warning_200', theme),
+        focusSvgFill: _styles.COLORS.getColor('warning_700', theme)
       };
       break;
     case 'critical':
       style = {
-        svgFill: _styles.COLORS.critical_600,
-        hoverBgColor: _styles.COLORS.critical_200,
-        hoverSvgFill: _styles.COLORS.critical_700,
-        activeBgColor: _styles.COLORS.critical_300,
-        activeSvgFill: _styles.COLORS.critical_800,
-        focusBgColor: _styles.COLORS.critical_200,
-        focusSvgFill: _styles.COLORS.critical_700
+        svgFill: _styles.COLORS.getColor('critical_600', theme),
+        hoverBgColor: _styles.COLORS.getColor('critical_200', theme),
+        hoverSvgFill: _styles.COLORS.getColor('critical_700', theme),
+        activeBgColor: _styles.COLORS.getColor('critical_300', theme),
+        activeSvgFill: _styles.COLORS.getColor('critical_800', theme),
+        focusBgColor: _styles.COLORS.getColor('critical_200', theme),
+        focusSvgFill: _styles.COLORS.getColor('critical_700', theme)
       };
       break;
     case 'positive':
       style = {
-        svgFill: _styles.COLORS.correct_500,
-        hoverBgColor: _styles.COLORS.correct_200,
-        hoverSvgFill: _styles.COLORS.correct_700,
-        activeBgColor: _styles.COLORS.correct_300,
-        activeSvgFill: _styles.COLORS.correct_800,
-        focusBgColor: _styles.COLORS.correct_200,
-        focusSvgFill: _styles.COLORS.correct_700
+        svgFill: _styles.COLORS.getColor('correct_500', theme),
+        hoverBgColor: _styles.COLORS.getColor('correct_200', theme),
+        hoverSvgFill: _styles.COLORS.getColor('correct_700', theme),
+        activeBgColor: _styles.COLORS.getColor('correct_300', theme),
+        activeSvgFill: _styles.COLORS.getColor('correct_800', theme),
+        focusBgColor: _styles.COLORS.getColor('correct_200', theme),
+        focusSvgFill: _styles.COLORS.getColor('correct_700', theme)
       };
       break;
   }

package/dist/Banners/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","names":["_styledComponents","require","_Iconbutton","_styles","_templateObject","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","_taggedTemplateLiteral2","IconButtonStyledSecondary","exports"],"sources":["../../src/Banners/styles.tsx"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { IconButtonStyledSecondary } 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    ${IconButtonStyledSecondary} {\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,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAAmC,IAAAG,eAAA;AAE5B,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,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;EACJ;EAEA,WAAOG,qBAAG,EAAAhC,eAAA,KAAAA,eAAA,OAAAiC,uBAAA,qdACNC,qCAAyB,EAMjB/B,KAAK,CAACC,OAAO,EAICD,KAAK,CAACI,YAAY,EAI9BJ,KAAK,CAACM,YAAY,EAKZN,KAAK,CAACQ,aAAa,EAIzBR,KAAK,CAACU,aAAa;AAInC,CAAC;AAACsB,OAAA,CAAAlC,cAAA,GAAAA,cAAA","ignoreList":[]}
+{"version":3,"file":"styles.cjs","names":["_styledComponents","require","_Iconbutton","_styles","_templateObject","getButtonStyle","type","theme","style","svgFill","COLORS","getColor","hoverBgColor","hoverSvgFill","activeBgColor","activeSvgFill","focusBgColor","focusSvgFill","css","_taggedTemplateLiteral2","IconButtonStyledSecondary","exports"],"sources":["../../src/Banners/styles.tsx"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { IconButtonStyledSecondary } from '../Button/Iconbutton';\r\nimport { COLORS } from '../styles';\r\n\r\nexport const getButtonStyle = (type: string, theme: any) => {\r\n  let style = {\r\n    svgFill: COLORS.getColor('primary_500', theme),\r\n    hoverBgColor: COLORS.getColor('primary_200', theme),\r\n    hoverSvgFill: COLORS.getColor('primary_700', theme),\r\n    activeBgColor: COLORS.getColor('primary_300', theme),\r\n    activeSvgFill: COLORS.getColor('primary_800', theme),\r\n    focusBgColor: COLORS.getColor('primary_200', theme),\r\n    focusSvgFill: COLORS.getColor('primary_700', theme)\r\n  };\r\n\r\n  switch(type)\r\n  {\r\n    case 'warning':\r\n      style = {\r\n        svgFill: COLORS.getColor('warning_500', theme),\r\n        hoverBgColor: COLORS.getColor('warning_200', theme),\r\n        hoverSvgFill: COLORS.getColor('warning_700', theme),\r\n        activeBgColor: COLORS.getColor('warning_300', theme),\r\n        activeSvgFill: COLORS.getColor('warning_800', theme),\r\n        focusBgColor: COLORS.getColor('warning_200', theme),\r\n        focusSvgFill: COLORS.getColor('warning_700', theme)\r\n      };\r\n      break;\r\n    \r\n    case 'critical':\r\n      style = {\r\n        svgFill: COLORS.getColor('critical_600', theme),\r\n        hoverBgColor: COLORS.getColor('critical_200', theme),\r\n        hoverSvgFill: COLORS.getColor('critical_700', theme),\r\n        activeBgColor: COLORS.getColor('critical_300', theme),\r\n        activeSvgFill: COLORS.getColor('critical_800', theme),\r\n        focusBgColor: COLORS.getColor('critical_200', theme),\r\n        focusSvgFill: COLORS.getColor('critical_700', theme)\r\n      };\r\n      break;\r\n\r\n    case 'positive':\r\n      style = {\r\n        svgFill: COLORS.getColor('correct_500', theme),\r\n        hoverBgColor: COLORS.getColor('correct_200', theme),\r\n        hoverSvgFill: COLORS.getColor('correct_700', theme),\r\n        activeBgColor: COLORS.getColor('correct_300', theme),\r\n        activeSvgFill: COLORS.getColor('correct_800', theme),\r\n        focusBgColor: COLORS.getColor('correct_200', theme),\r\n        focusSvgFill: COLORS.getColor('correct_700', theme)\r\n      };\r\n      break;\r\n  }\r\n\r\n  return css`\r\n    ${IconButtonStyledSecondary} {\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":"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","ignoreList":[]}

package/dist/Banners/styles.d.ts

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