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

package/dist/Banners/Banner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.cjs","names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentMStyling","ComponentTextStyle","Regular","ButtonWrapper","ButtonContainer","getButtonStyle","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","React","useState","hasWindow","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","SystemIcons","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 */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n  background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ${StyledLink} {\n    &:link {\n      color: ${(props) => props.link};\n    }\n    &:visited {\n      color: ${(props) => props.linkVisited};\n    }\n    &:focus,\n    &:active {\n      background-color: ${(props) => props.linkFocused};\n      color: ${COLORS.white};\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 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\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n  display: contents;\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\n  link?: string;\n  linkText?: string;\n  linkAction?: (ev: React.MouseEvent) => void;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n  fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n  size,\n  type = 'neutral',\n  children,\n  bottom,\n  testId,\n  linkText,\n  link,\n  onClose,\n  icon,\n  noIcon,\n  linkAction,\n  fullWidth,\n  className,\n  ...rest\n}) => {\n  const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  let bannerParams = {\n    typeColor: COLORS.primary_100,\n    accentColor: COLORS.primary_700,\n    hoverColor: COLORS.primary_20,\n    closeIconColor: COLORS.primary_500,\n    icon: 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    <BannerContainer\n      data-testid={testId}\n      $type={bannerParams.typeColor}\n      linkFocused={bannerParams.linkFocused}\n      linkVisited={bannerParams.linkVisited}\n      link={bannerParams.accentColor}\n      hover={bannerParams.hoverColor}\n      bottom={bottom}\n      className={cls}\n      role=\"note\"\n      {...rest}>\n      <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n        <BannerContentWrapper>\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n            {children}&nbsp;\n            {link && linkText && (\n              <HyperLink\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n                onClick={(e) => {\n                  if (linkAction) {\n                    e.preventDefault();\n                    linkAction(e);\n                  }\n                }}\n                href={link}\n                variant=\"default\">\n                {linkText}\n              </HyperLink>\n            )}\n          </ComponentResponsive>\n        </BannerContentWrapper>\n        {onClose && (\n          <ButtonWrapper>\n            <ButtonContainer $type={bannerParams.containerType}>\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n                <SystemIcons.Close color={bannerParams.closeIconColor} size=\"24px\" />\n              </IconButton>\n            </ButtonContainer>\n          </ButtonWrapper>\n        )}\n      </BannerCenter>\n    </BannerContainer>\n  );\n};\n\nexport default Banner;\n"],"mappings":"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"}
+{"version":3,"file":"Banner.cjs","names":["BannerContainerStyles","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenterStyles","ComponentMStyling","ComponentTextStyle","Regular","BannerCloseButtonWrapperStyles","BannerCloseButtonContainerStyles","getButtonStyle","BannerContentWrapperStyles","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","React","useState","hasWindow","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","SystemIcons","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/Banner.d.ts

@@ -1,6 +1,38 @@
 import * as React from 'react';
 import { Size } from '../types';
-type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
+/**
+ * Styles for <Banner />
+ */
+export type StyleBannerProps = BannerProps & {
+    $type: string;
+    linkVisited: string;
+    linkFocused: string;
+};
+export declare const BannerContainerStyles: import("styled-components").StyledComponent<"div", any, React.HTMLAttributes<HTMLDivElement> & {
+    size?: Size.Small | Size.Medium | Size.Large | undefined;
+    type?: "positive" | "critical" | "warning" | "neutral" | undefined;
+    link?: string | undefined;
+    linkText?: string | undefined;
+    linkAction?: ((ev: React.MouseEvent) => void) | undefined;
+    hover?: string | undefined;
+    bottom?: boolean | undefined;
+    testId?: string | undefined;
+    icon?: React.ReactNode;
+    onClose?: (() => void) | undefined;
+    noIcon?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+} & {
+    $type: string;
+    linkVisited: string;
+    linkFocused: string;
+}, never>;
+export declare const BannerCenterStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BannerCloseButtonWrapperStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BannerCloseButtonContainerStyles: import("styled-components").StyledComponent<"div", any, {
+    $type?: string | undefined;
+}, never>;
+export declare const BannerContentWrapperStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
     size?: Size.Small | Size.Medium | Size.Large;
     type?: 'warning' | 'critical' | 'positive' | 'neutral';
     link?: string;

package/dist/Banners/Banner.js

@@ -23,7 +23,7 @@ import { hasWindow } from '../utils/utils';
  */
 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';\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 */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n  background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ${StyledLink} {\n    &:link {\n      color: ${(props) => props.link};\n    }\n    &:visited {\n      color: ${(props) => props.linkVisited};\n    }\n    &:focus,\n    &:active {\n      background-color: ${(props) => props.linkFocused};\n      color: ${COLORS.white};\n    }\n  }\n\n  &.full-width-banner {\n    margin: 8px;\n  }\n`;\n\nconst BannerCenter = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 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\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n  display: contents;\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\n  link?: string;\n  linkText?: string;\n  linkAction?: (ev: React.MouseEvent) => void;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n  fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n  size,\n  type = 'neutral',\n  children,\n  bottom,\n  testId,\n  linkText,\n  link,\n  onClose,\n  icon,\n  noIcon,\n  linkAction,\n  fullWidth,\n  className,\n  ...rest\n}) => {\n  const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  let bannerParams = {\n    typeColor: COLORS.primary_100,\n    accentColor: COLORS.primary_700,\n    hoverColor: COLORS.primary_20,\n    closeIconColor: COLORS.primary_500,\n    icon: 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    <BannerContainer\n      data-testid={testId}\n      $type={bannerParams.typeColor}\n      linkFocused={bannerParams.linkFocused}\n      linkVisited={bannerParams.linkVisited}\n      link={bannerParams.accentColor}\n      hover={bannerParams.hoverColor}\n      bottom={bottom}\n      className={cls}\n      role=\"note\"\n      {...rest}>\n      <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n        <BannerContentWrapper>\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n            {children}&nbsp;\n            {link && linkText && (\n              <HyperLink\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n                onClick={(e) => {\n                  if (linkAction) {\n                    e.preventDefault();\n                    linkAction(e);\n                  }\n                }}\n                href={link}\n                variant=\"default\">\n                {linkText}\n              </HyperLink>\n            )}\n          </ComponentResponsive>\n        </BannerContentWrapper>\n        {onClose && (\n          <ButtonWrapper>\n            <ButtonContainer $type={bannerParams.containerType}>\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n                <SystemIcons.Close color={bannerParams.closeIconColor} size=\"24px\" />\n              </IconButton>\n            </ButtonContainer>\n          </ButtonWrapper>\n        )}\n      </BannerCenter>\n    </BannerContainer>\n  );\n};\n\nexport default Banner;\n"],"mappings":"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"}
+{"version":3,"file":"Banner.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","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';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS} from '../styles';\nimport {PageWidth} from '../Layouts';\n\nconst BannersWrapper = styled.div`\n  background-color: ${COLORS.primary_20};\n`;\n\nconst BannerContent = styled(PageWidth)`\n  background-color: ${COLORS.primary_20};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n    padding: 48px 12px;\n  }\n\n  & > *:first-child {\n    padding-top: 12px;\n    width: 320px;\n    height: 180px;\n\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\ntype Props = { children: any; testId?: string } & React.HTMLAttributes<HTMLDivElement>;\n\nconst OverviewBanner = ({ children, testId, ...rest }: Props) => {\n  return (\n    <BannersWrapper {...rest}>\n      <BannerContent data-testid={testId}>{children}</BannerContent>\n    </BannersWrapper>\n  );\n};\n\nexport default OverviewBanner;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;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 = {
+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 }: Props) => JSX.Element;
+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';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS} from '../styles';\nimport {PageWidth} from '../Layouts';\n\nconst BannersWrapper = styled.div`\n  background-color: ${COLORS.primary_20};\n`;\n\nconst BannerContent = styled(PageWidth)`\n  background-color: ${COLORS.primary_20};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n    padding: 48px 12px;\n  }\n\n  & > *:first-child {\n    padding-top: 12px;\n    width: 320px;\n    height: 180px;\n\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\ntype Props = { children: any; testId?: string } & React.HTMLAttributes<HTMLDivElement>;\n\nconst OverviewBanner = ({ children, testId, ...rest }: Props) => {\n  return (\n    <BannersWrapper {...rest}>\n      <BannerContent data-testid={testId}>{children}</BannerContent>\n    </BannersWrapper>\n  );\n};\n\nexport default OverviewBanner;\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,WAAW,EAAEC,MAAM,QAAO,WAAW;AAC7C,SAAQC,SAAS,QAAO,YAAY;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';\nimport OverviewBanner from './OverviewBanner';\n\n// eslint-disable-next-line import/prefer-default-export\nexport { Banner, OverviewBanner };\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AACA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Banners/index.ts"],"sourcesContent":["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';\nimport OverviewBanner from './OverviewBanner';\n\n// eslint-disable-next-line import/prefer-default-export\nexport { Banner, OverviewBanner };\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,UAAU;AAC7B,OAAOC,cAAc,MAAM,kBAAkB;;AAE7C;AACA,SAASD,MAAM,EAAEC,cAAc"}
+{"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/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';\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 { BreadcrumbContainer, LastBreadcrumbItem } from './styles';\nimport internal from 'stream';\n\ntype 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    <BreadcrumbContainer 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              <LastBreadcrumbItem size={size}>{items[items.length - 1].label}</LastBreadcrumbItem>\n            </>\n          ) : (\n            <>\n              {renderBreadcrumbLinkItem(items.length - 1, items[items.length - 1])}\n              {renderChevron()}\n            </>\n          )}\n        </>\n      )}\n    </BreadcrumbContainer>\n  );\n};\n\nexport default Breadcrumb;\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,7 +1,7 @@
 import * as React from 'react';
 import { Size } from '..';
 import { BreadcrumbItem } from './BreadcrumbItem';
-type BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {
+export type BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {
     homeIcon?: boolean;
     homeLabel?: string;
     homeUrl?: string;

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';\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 { BreadcrumbContainer, LastBreadcrumbItem } from './styles';\nimport internal from 'stream';\n\ntype 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    <BreadcrumbContainer 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              <LastBreadcrumbItem size={size}>{items[items.length - 1].label}</LastBreadcrumbItem>\n            </>\n          ) : (\n            <>\n              {renderBreadcrumbLinkItem(items.length - 1, items[items.length - 1])}\n              {renderChevron()}\n            </>\n          )}\n        </>\n      )}\n    </BreadcrumbContainer>\n  );\n};\n\nexport default Breadcrumb;\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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"}