@laerdal/life-react-components 2.0.1-dev.3.full → 2.0.1-dev.5

package/dist/Banners/Banner.cjs

@@ -161,7 +161,8 @@ var Banner = function Banner(_ref) {
     link: bannerParams.accentColor,
     hover: bannerParams.hoverColor,
     bottom: bottom,
-    className: cls
+    className: cls,
+    role: "note"
   }, rest), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(BannerCenter, {
       style: {

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","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 { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink/HyperLink';\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 56px;\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 24px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 24px;\n    }\n\n    &.large {\n      margin: 0 48px;\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: 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 = 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 = 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 = 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      {...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                <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":["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","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 { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink/HyperLink';\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 56px;\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 24px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 24px;\n    }\n\n    &.large {\n      margin: 0 48px;\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: 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 = 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 = 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 = 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                <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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"}

package/dist/Banners/Banner.js

@@ -133,7 +133,8 @@ var Banner = function Banner(_ref) {
     link: bannerParams.accentColor,
     hover: bannerParams.hoverColor,
     bottom: bottom,
-    className: cls
+    className: cls,
+    role: "note"
   }, rest), {}, {
     children: /*#__PURE__*/_jsxs(BannerCenter, {
       style: {

package/dist/Banners/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","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","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","critical_500","critical_800","correct_700","correct_200","correct_20","correct_500","correct_800","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 { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink/HyperLink';\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 56px;\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 24px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 24px;\n    }\n\n    &.large {\n      margin: 0 48px;\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: 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 = 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 = 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 = 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      {...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                <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","Close","Help","TechnicalWarning","ThumbsUp","Tip","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","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","critical_500","critical_800","correct_700","correct_200","correct_20","correct_500","correct_800","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 { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink/HyperLink';\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 56px;\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 24px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium {\n      margin: 0 24px;\n    }\n\n    &.large {\n      margin: 0 48px;\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: 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 = 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 = 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 = 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                <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":";;;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAASC,WAAT,EAAsBC,MAAtB,EAA8BC,kBAA9B,QAAwD,WAAxD;AACA,SAASC,KAAT,EAAgBC,IAAhB,EAAsBC,gBAAtB,EAAwCC,QAAxC,EAAkDC,GAAlD,QAA6D,kCAA7D;AACA,SAASC,UAAT,QAA2B,WAA3B;AACA,SAASC,cAAT,QAA+B,UAA/B;AAEA,SAASC,iBAAT,EAA4BC,mBAA5B,QAAuD,WAAvD;AACA,SAASC,SAAT,QAA0B,cAA1B;AACA,SAASC,UAAT,QAA2B,wBAA3B;AACA,SAASC,SAAT,QAA0B,gBAA1B;AAEA;AACA;AACA;;;;AAGA,IAAMC,eAAe,GAAGhB,MAAM,CAACiB,GAAV,0uBACL,UAACC,KAAD;EAAA,OAA8BA,KAAK,CAACC,KAAN,GAAcD,KAAK,CAACC,KAApB,GAA4BjB,MAAM,CAACkB,WAAjE;AAAA,CADK,EAIVlB,MAAM,CAACmB,KAJG,EAKL,UAACH,KAAD;EAAA,OAA8BA,KAAK,CAACI,MAAN,GAAe,MAAf,GAAwB,GAAtD;AAAA,CALK,EAWfrB,WAAW,CAACsB,MAXG,EAcftB,WAAW,CAACuB,KAdG,EA4BjBV,UA5BiB,EA8BN,UAACI,KAAD;EAAA,OAAWA,KAAK,CAACO,IAAjB;AAAA,CA9BM,EAiCN,UAACP,KAAD;EAAA,OAAWA,KAAK,CAACQ,WAAjB;AAAA,CAjCM,EAqCK,UAACR,KAAD;EAAA,OAAWA,KAAK,CAACS,WAAjB;AAAA,CArCL,EAsCNzB,MAAM,CAAC0B,KAtCD,CAArB;AA+CA,IAAMC,YAAY,GAAG7B,MAAM,CAACiB,GAAV,6pBACdN,iBAAiB,CAACR,kBAAkB,CAAC2B,OAApB,EAA6B,IAA7B,CADH,EAMd7B,WAAW,CAACsB,MANE,EASdtB,WAAW,CAACuB,KATE,EA8BZvB,WAAW,CAACsB,MA9BA,EAiCZtB,WAAW,CAACuB,KAjCA,CAAlB;AAmDA,IAAMO,aAAa,GAAG/B,MAAM,CAACiB,GAAV,gGAAnB;AAIA,IAAMe,eAAe,GAAGhC,MAAM,CAACiB,GAAV,yGAEjB,UAACC,KAAD;EAAA,OAAYA,KAAK,CAACC,KAAN,GAAcT,cAAc,CAACQ,KAAK,CAACC,KAAP,CAA5B,GAA4C,IAAxD;AAAA,CAFiB,CAArB;AAKA,IAAMc,oBAAoB,GAAGjC,MAAM,CAACiB,GAAV,2LAA1B;;AAwBA,IAAMiB,MAA4C,GAAG,SAA/CA,MAA+C,OAe/C;EAAA,IAdJC,IAcI,QAdJA,IAcI;EAAA,qBAbJC,IAaI;EAAA,IAbJA,IAaI,0BAbG,SAaH;EAAA,IAZJC,QAYI,QAZJA,QAYI;EAAA,IAXJf,MAWI,QAXJA,MAWI;EAAA,IAVJgB,MAUI,QAVJA,MAUI;EAAA,IATJC,QASI,QATJA,QASI;EAAA,IARJd,IAQI,QARJA,IAQI;EAAA,IAPJe,OAOI,QAPJA,OAOI;EAAA,IANJC,IAMI,QANJA,IAMI;EAAA,IALJC,MAKI,QALJA,MAKI;EAAA,IAJJC,UAII,QAJJA,UAII;EAAA,IAHJC,SAGI,QAHJA,SAGI;EAAA,IAFJC,SAEI,QAFJA,SAEI;EAAA,IADDC,IACC;;EACJ,sBAA0B/C,KAAK,CAACgD,QAAN,CAAuBhC,SAAS,KAAKiC,MAAM,CAACC,UAAZ,GAAyB,CAAC,CAA1D,CAA1B;EAAA;EAAA,IAAOC,KAAP;EAAA,IAAcC,QAAd;;EACApD,KAAK,CAACqD,SAAN,CAAgB,YAAM;IACpB,SAASC,YAAT,GAAwB;MACtBF,QAAQ,CAACH,MAAM,CAACC,UAAR,CAAR;IACD;;IACDD,MAAM,CAACM,gBAAP,CAAwB,QAAxB,EAAkCD,YAAlC;IACA,OAAO;MAAA,OAAML,MAAM,CAACO,mBAAP,CAA2B,QAA3B,EAAqCF,YAArC,CAAN;IAAA,CAAP;EACD,CAND,EAMG,EANH;EAQA,IAAIG,YAAY,GAAG;IACjBC,SAAS,EAAEvD,MAAM,CAACwD,WADD;IAEjBC,WAAW,EAAEzD,MAAM,CAAC0D,WAFH;IAGjBC,UAAU,EAAE3D,MAAM,CAAC4D,UAHF;IAIjBC,cAAc,EAAE7D,MAAM,CAAC8D,WAJN;IAKjBvB,IAAI,EAAEjC,GALW;IAMjByD,aAAa,EAAE7B,IANE;IAOjB8B,YAAY,EAAEhE,MAAM,CAACiE,WAPJ;IAQjBzC,WAAW,EAAExB,MAAM,CAACkE,WARH;IASjBzC,WAAW,EAAEzB,MAAM,CAACmE;EATH,CAAnB;;EAWA,QAAQjC,IAAR;IACE,KAAK,SAAL;MACEoB,YAAY,CAACC,SAAb,GAAyBvD,MAAM,CAACoE,WAAhC;MACAd,YAAY,CAACG,WAAb,GAA2BzD,MAAM,CAACqE,WAAlC;MACAf,YAAY,CAACU,YAAb,GAA4BhE,MAAM,CAACsE,WAAnC;MACAhB,YAAY,CAACK,UAAb,GAA0B3D,MAAM,CAACuE,UAAjC;MACAjB,YAAY,CAACf,IAAb,GAAoBpC,IAApB;MACAmD,YAAY,CAACO,cAAb,GAA8B7D,MAAM,CAACwE,WAArC;MACAlB,YAAY,CAAC9B,WAAb,GAA2BxB,MAAM,CAACyE,WAAlC;MACAnB,YAAY,CAAC7B,WAAb,GAA2BzB,MAAM,CAACyE,WAAlC;MACA;;IACF,KAAK,UAAL;MACEnB,YAAY,CAACC,SAAb,GAAyBvD,MAAM,CAAC0E,YAAhC;MACApB,YAAY,CAACG,WAAb,GAA2BzD,MAAM,CAAC2E,YAAlC;MACArB,YAAY,CAACU,YAAb,GAA4BhE,MAAM,CAAC4E,YAAnC;MACAtB,YAAY,CAACK,UAAb,GAA0B3D,MAAM,CAAC6E,WAAjC;MACAvB,YAAY,CAACf,IAAb,GAAoBnC,gBAApB;MACAkD,YAAY,CAACO,cAAb,GAA8B7D,MAAM,CAAC8E,YAArC;MACAxB,YAAY,CAAC9B,WAAb,GAA2BxB,MAAM,CAAC+E,YAAlC;MACAzB,YAAY,CAAC7B,WAAb,GAA2BzB,MAAM,CAAC+E,YAAlC;MACA;;IACF,KAAK,UAAL;MACEzB,YAAY,CAACC,SAAb,GAAyBvD,MAAM,CAACkB,WAAhC;MACAoC,YAAY,CAACG,WAAb,GAA2BzD,MAAM,CAACgF,WAAlC;MACA1B,YAAY,CAACU,YAAb,GAA4BhE,MAAM,CAACiF,WAAnC;MACA3B,YAAY,CAACK,UAAb,GAA0B3D,MAAM,CAACkF,UAAjC;MACA5B,YAAY,CAACf,IAAb,GAAoBlC,QAApB;MACAiD,YAAY,CAACO,cAAb,GAA8B7D,MAAM,CAACmF,WAArC;MACA7B,YAAY,CAAC9B,WAAb,GAA2BxB,MAAM,CAACoF,WAAlC;MACA9B,YAAY,CAAC7B,WAAb,GAA2BzB,MAAM,CAACoF,WAAlC;MACA;EA9BJ;;EAiCA,IAAMC,GAAG,aAAM1C,SAAN,aAAMA,SAAN,cAAMA,SAAN,GAAmB,EAAnB,cAAyBD,SAAS,GAAG,mBAAH,GAAyB,EAA3D,CAAT;EAEA,oBACE,KAAC,eAAD;IACE,eAAaN,MADf;IAEE,KAAK,EAAEkB,YAAY,CAACC,SAFtB;IAGE,WAAW,EAAED,YAAY,CAAC7B,WAH5B;IAIE,WAAW,EAAE6B,YAAY,CAAC9B,WAJ5B;IAKE,IAAI,EAAE8B,YAAY,CAACG,WALrB;IAME,KAAK,EAAEH,YAAY,CAACK,UANtB;IAOE,MAAM,EAAEvC,MAPV;IAQE,SAAS,EAAEiE,GARb;IASE,IAAI,EAAC;EATP,GAUMzC,IAVN;IAAA,uBAWE,MAAC,YAAD;MAAc,KAAK,EAAE;QAAE0C,KAAK,EAAEhC,YAAY,CAACG;MAAtB,CAArB;MAA0D,SAAS,EAAExB,IAArE;MAAA,WACGM,IAAI,GAAGA,IAAH,GAAUC,MAAM,GAAG,IAAH,gBAAU,KAAC,YAAD,CAAc,IAAd;QAAmB,KAAK,EAAEc,YAAY,CAACG,WAAvC;QAAoD,IAAI,EAAC;MAAzD,EADjC,eAEE,KAAC,oBAAD;QAAA,uBACE,MAAC,mBAAD;UAAqB,IAAI,EAAExB,IAA3B;UAAiC,KAAK,EAAEe,KAAxC;UAA+C,KAAK,EAAEM,YAAY,CAACG,WAAnE;UAAA,WACGtB,QADH,UAEGZ,IAAI,IAAIc,QAAR,iBACC,KAAC,SAAD;YACE,EAAE,YAAKkD,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAL,gBADJ;YAEE,OAAO,EAAE,iBAACC,CAAD,EAAO;cACd,IAAIjD,UAAJ,EAAgB;gBACdiD,CAAC,CAACC,cAAF;gBACAlD,UAAU,CAACiD,CAAD,CAAV;cACD;YACF,CAPH;YAQE,IAAI,EAAEnE,IARR;YASE,OAAO,EAAC,SATV;YAAA,UAUGc;UAVH,EAHJ;QAAA;MADF,EAFF,EAqBGC,OAAO,iBACN,KAAC,aAAD;QAAA,uBACE,KAAC,eAAD;UAAiB,KAAK,EAAEgB,YAAY,CAACS,aAArC;UAAA,uBACE,KAAC,UAAD;YAAY,OAAO,EAAC,WAApB;YAAgC,KAAK,EAAC,UAAtC;YAAiD,wBAAwB,MAAzE;YAA0E,oBAAoB,EAAET,YAAY,CAACU,YAA7G;YAA2H,MAAM,EAAE;cAAA,OAAM1B,OAAO,EAAb;YAAA,CAAnI;YAAA,uBACE,KAAC,KAAD;cAAO,KAAK,EAAEgB,YAAY,CAACO,cAA3B;cAA2C,IAAI,EAAC;YAAhD;UADF;QADF;MADF,EAtBJ;IAAA;EAXF,GADF;AA6CD,CApHD;;;EAbE3B,I,aAAO,S,EAAY,U,EAAa,U,EAAa,S;EAC7CX,I;EACAc,Q;EACAI,U;EACAmD,K;EACAxE,M;EACAgB,M;EACAG,I;EACAD,O;EACAE,M;EACAE,S;;AAyHF,eAAeV,MAAf"}

package/dist/Breadcrumb/Breadcrumb.cjs

@@ -63,6 +63,18 @@ var Breadcrumb = function Breadcrumb(_ref) {
   };
 
   var chevronSize = size == _.Size.Medium ? '24px' : size == _.Size.Small ? '20px' : '16px';
+
+  var renderChevron = function renderChevron() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "aria-hidden": "true",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SystemIcons.ChevronRight, {
+        className: "chevronicon",
+        color: _styles.COLORS.neutral_500,
+        size: chevronSize
+      })
+    });
+  };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.BreadcrumbContainer, _objectSpread(_objectSpread({
     size: size,
     "data-testid": 'breacrumbContainer'
@@ -87,11 +99,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
       },
       children: homeLabel
     }), !!items && items.length > 2 && (items.length > 3 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.SystemIcons.ChevronRight, {
-        className: "chevronicon",
-        color: _styles.COLORS.neutral_500,
-        size: chevronSize
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownButton.default, {
+      children: [renderChevron(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownButton.default, {
         type: 'icon',
         alignLeft: true,
         items: dropdownItems,
@@ -103,11 +111,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
         onClick: navigate
       })]
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.SystemIcons.ChevronRight, {
-        className: "chevronicon",
-        color: _styles.COLORS.neutral_500,
-        size: chevronSize
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HyperLink, {
+      children: [renderChevron(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HyperLink, {
         id: 'link-item-' + (items.length - 3),
         onClick: function onClick(e) {
           e.preventDefault();
@@ -119,11 +123,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
         children: items[items.length - 3].label
       })]
     })), !!items && items.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.SystemIcons.ChevronRight, {
-        className: "chevronicon",
-        color: _styles.COLORS.neutral_500,
-        size: chevronSize
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HyperLink, {
+      children: [renderChevron(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HyperLink, {
         id: 'link-item-' + (items.length - 2),
         onClick: function onClick(e) {
           e.preventDefault();
@@ -135,11 +135,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
         children: items[items.length - 2].label
       })]
     }), !!items && items.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.SystemIcons.ChevronRight, {
-        className: "chevronicon",
-        color: _styles.COLORS.neutral_500,
-        size: chevronSize
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles2.LastBreadcrumbItem, {
+      children: [renderChevron(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles2.LastBreadcrumbItem, {
         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","homeUrl","rest","navigateHook","useNavigate","dropdownItems","slice","length","map","x","value","url","displayLabel","label","navigate","links","chevronSize","Medium","e","preventDefault","COLORS","neutral_500","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';\n\ntype BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {\n  homeIcon?: boolean;\n  homeLabel?: string;\n  homeUrl?: string;\n  items?: BreadcrumbItem[];\n  size?: Size;\n};\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ items, size = Size.Small, homeIcon = true, homeLabel = 'Home', homeUrl = '/', ...rest }) => {\n  const 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\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 id={'homelink'} variant=\"default\" href={homeUrl} onClick={(e) => { e.preventDefault(); navigateHook(homeUrl);}} >\n          {homeLabel}\n        </HyperLink>\n      )}\n\n      {!!items &&\n        items.length > 2 &&\n        (items.length > 3 ? (\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <DropdownButton\n              type={'icon'}\n              alignLeft={true}\n              items={dropdownItems}\n              size={size}\n              icon={<SystemIcons.MoreHorizontal color={COLORS.neutral_600} size=\"20px\" />}\n              onClick={navigate}\n            />\n          </>\n        ) : (\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <HyperLink id={'link-item-' + (items.length - 3)} onClick={(e) => { e.preventDefault(); navigateHook(items[items.length - 3].url);}} target=\"_self\" variant=\"default\" href={items[items.length - 3].url}>\n              {items[items.length - 3].label}\n            </HyperLink>\n          </>\n        ))}\n\n      {!!items && items.length > 1 && (\n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <HyperLink id={'link-item-' + (items.length - 2)} onClick={(e) => { e.preventDefault(); navigateHook(items[items.length - 2].url);}} target=\"_self\" variant=\"default\" href={items[items.length - 2].url}>\n            {items[items.length - 2].label}\n          </HyperLink>\n        </>\n      )}\n\n      {!!items && items.length > 0 && (\n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <LastBreadcrumbItem size={size}>{items[items.length - 1].label}</LastBreadcrumbItem>\n        </>\n      )}\n    </BreadcrumbContainer>\n  );\n};\n\nexport default Breadcrumb;\n"],"mappings":"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"}
+{"version":3,"file":"Breadcrumb.cjs","names":["Breadcrumb","items","size","Size","Small","homeIcon","homeLabel","homeUrl","rest","navigateHook","useNavigate","dropdownItems","slice","length","map","x","value","url","displayLabel","label","navigate","links","chevronSize","Medium","renderChevron","COLORS","neutral_500","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';\n\ntype BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {\n  homeIcon?: boolean;\n  homeLabel?: string;\n  homeUrl?: string;\n  items?: BreadcrumbItem[];\n  size?: Size;\n};\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ items, size = Size.Small, homeIcon = true, homeLabel = 'Home', homeUrl = '/', ...rest }) => {\n  const 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.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n    </div>\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          <>\n            {renderChevron()}\n            <HyperLink\n              id={'link-item-' + (items.length - 3)}\n              onClick={(e) => {\n                e.preventDefault();\n                navigateHook(items[items.length - 3].url);\n              }}\n              target=\"_self\"\n              variant=\"default\"\n              href={items[items.length - 3].url}>\n              {items[items.length - 3].label}\n            </HyperLink>\n          </>\n        ))}\n\n      {!!items && items.length > 1 && (\n        <>\n          {renderChevron()}\n          <HyperLink\n            id={'link-item-' + (items.length - 2)}\n            onClick={(e) => {\n              e.preventDefault();\n              navigateHook(items[items.length - 2].url);\n            }}\n            target=\"_self\"\n            variant=\"default\"\n            href={items[items.length - 2].url}>\n            {items[items.length - 2].label}\n          </HyperLink>\n        </>\n      )}\n\n      {!!items && items.length > 0 && (\n        <>\n          {renderChevron()}\n          <LastBreadcrumbItem size={size}>{items[items.length - 1].label}</LastBreadcrumbItem>\n        </>\n      )}\n    </BreadcrumbContainer>\n  );\n};\n\nexport default Breadcrumb;\n"],"mappings":"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"}

package/dist/Breadcrumb/Breadcrumb.js

@@ -43,6 +43,18 @@ var Breadcrumb = function Breadcrumb(_ref) {
   };
 
   var chevronSize = size == Size.Medium ? '24px' : size == Size.Small ? '20px' : '16px';
+
+  var renderChevron = function renderChevron() {
+    return /*#__PURE__*/_jsx("div", {
+      "aria-hidden": "true",
+      children: /*#__PURE__*/_jsx(SystemIcons.ChevronRight, {
+        className: "chevronicon",
+        color: COLORS.neutral_500,
+        size: chevronSize
+      })
+    });
+  };
+
   return /*#__PURE__*/_jsxs(BreadcrumbContainer, _objectSpread(_objectSpread({
     size: size,
     "data-testid": 'breacrumbContainer'
@@ -67,11 +79,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
       },
       children: homeLabel
     }), !!items && items.length > 2 && (items.length > 3 ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(SystemIcons.ChevronRight, {
-        className: "chevronicon",
-        color: COLORS.neutral_500,
-        size: chevronSize
-      }), /*#__PURE__*/_jsx(DropdownButton, {
+      children: [renderChevron(), /*#__PURE__*/_jsx(DropdownButton, {
         type: 'icon',
         alignLeft: true,
         items: dropdownItems,
@@ -83,11 +91,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
         onClick: navigate
       })]
     }) : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(SystemIcons.ChevronRight, {
-        className: "chevronicon",
-        color: COLORS.neutral_500,
-        size: chevronSize
-      }), /*#__PURE__*/_jsx(HyperLink, {
+      children: [renderChevron(), /*#__PURE__*/_jsx(HyperLink, {
         id: 'link-item-' + (items.length - 3),
         onClick: function onClick(e) {
           e.preventDefault();
@@ -99,11 +103,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
         children: items[items.length - 3].label
       })]
     })), !!items && items.length > 1 && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(SystemIcons.ChevronRight, {
-        className: "chevronicon",
-        color: COLORS.neutral_500,
-        size: chevronSize
-      }), /*#__PURE__*/_jsx(HyperLink, {
+      children: [renderChevron(), /*#__PURE__*/_jsx(HyperLink, {
         id: 'link-item-' + (items.length - 2),
         onClick: function onClick(e) {
           e.preventDefault();
@@ -115,11 +115,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
         children: items[items.length - 2].label
       })]
     }), !!items && items.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(SystemIcons.ChevronRight, {
-        className: "chevronicon",
-        color: COLORS.neutral_500,
-        size: chevronSize
-      }), /*#__PURE__*/_jsx(LastBreadcrumbItem, {
+      children: [renderChevron(), /*#__PURE__*/_jsx(LastBreadcrumbItem, {
         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","homeUrl","rest","navigateHook","dropdownItems","slice","length","map","x","value","url","displayLabel","label","navigate","links","chevronSize","Medium","e","preventDefault","neutral_500","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';\n\ntype BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {\n  homeIcon?: boolean;\n  homeLabel?: string;\n  homeUrl?: string;\n  items?: BreadcrumbItem[];\n  size?: Size;\n};\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ items, size = Size.Small, homeIcon = true, homeLabel = 'Home', homeUrl = '/', ...rest }) => {\n  const 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\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 id={'homelink'} variant=\"default\" href={homeUrl} onClick={(e) => { e.preventDefault(); navigateHook(homeUrl);}} >\n          {homeLabel}\n        </HyperLink>\n      )}\n\n      {!!items &&\n        items.length > 2 &&\n        (items.length > 3 ? (\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <DropdownButton\n              type={'icon'}\n              alignLeft={true}\n              items={dropdownItems}\n              size={size}\n              icon={<SystemIcons.MoreHorizontal color={COLORS.neutral_600} size=\"20px\" />}\n              onClick={navigate}\n            />\n          </>\n        ) : (\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <HyperLink id={'link-item-' + (items.length - 3)} onClick={(e) => { e.preventDefault(); navigateHook(items[items.length - 3].url);}} target=\"_self\" variant=\"default\" href={items[items.length - 3].url}>\n              {items[items.length - 3].label}\n            </HyperLink>\n          </>\n        ))}\n\n      {!!items && items.length > 1 && (\n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <HyperLink id={'link-item-' + (items.length - 2)} onClick={(e) => { e.preventDefault(); navigateHook(items[items.length - 2].url);}} target=\"_self\" variant=\"default\" href={items[items.length - 2].url}>\n            {items[items.length - 2].label}\n          </HyperLink>\n        </>\n      )}\n\n      {!!items && items.length > 0 && (\n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <LastBreadcrumbItem size={size}>{items[items.length - 1].label}</LastBreadcrumbItem>\n        </>\n      )}\n    </BreadcrumbContainer>\n  );\n};\n\nexport default Breadcrumb;\n"],"mappings":"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"}
+{"version":3,"file":"Breadcrumb.js","names":["React","COLORS","Size","SystemIcons","useNavigate","HyperLink","IconButton","DropdownButton","BreadcrumbContainer","LastBreadcrumbItem","Breadcrumb","items","size","Small","homeIcon","homeLabel","homeUrl","rest","navigateHook","dropdownItems","slice","length","map","x","value","url","displayLabel","label","navigate","links","chevronSize","Medium","renderChevron","neutral_500","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';\n\ntype BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {\n  homeIcon?: boolean;\n  homeLabel?: string;\n  homeUrl?: string;\n  items?: BreadcrumbItem[];\n  size?: Size;\n};\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ items, size = Size.Small, homeIcon = true, homeLabel = 'Home', homeUrl = '/', ...rest }) => {\n  const 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.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n    </div>\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          <>\n            {renderChevron()}\n            <HyperLink\n              id={'link-item-' + (items.length - 3)}\n              onClick={(e) => {\n                e.preventDefault();\n                navigateHook(items[items.length - 3].url);\n              }}\n              target=\"_self\"\n              variant=\"default\"\n              href={items[items.length - 3].url}>\n              {items[items.length - 3].label}\n            </HyperLink>\n          </>\n        ))}\n\n      {!!items && items.length > 1 && (\n        <>\n          {renderChevron()}\n          <HyperLink\n            id={'link-item-' + (items.length - 2)}\n            onClick={(e) => {\n              e.preventDefault();\n              navigateHook(items[items.length - 2].url);\n            }}\n            target=\"_self\"\n            variant=\"default\"\n            href={items[items.length - 2].url}>\n            {items[items.length - 2].label}\n          </HyperLink>\n        </>\n      )}\n\n      {!!items && items.length > 0 && (\n        <>\n          {renderChevron()}\n          <LastBreadcrumbItem size={size}>{items[items.length - 1].label}</LastBreadcrumbItem>\n        </>\n      )}\n    </BreadcrumbContainer>\n  );\n};\n\nexport default Breadcrumb;\n"],"mappings":"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"}

package/dist/Chips/ActionChip.cjs

@@ -54,6 +54,7 @@ var ActionChip = function ActionChip(_ref) {
       return !disabled && _onClick && _onClick();
     },
     onMouseDown: _common.defaultOnMouseDownHandler,
+    role: "button",
     onKeyDown: function onKeyDown(e) {
       return (e.key === 'Enter' || e.key === ' ') && !disabled && _onClick && _onClick();
     },

package/dist/Chips/ActionChip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionChip.cjs","names":["ActionChip","icon","text","size","Size","Medium","disabled","onClick","className","rest","defaultOnMouseDownHandler","e","key","icons"],"sources":["../../src/Chips/ActionChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick,\n                                                                className,\n                                                                ...rest\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   onClick={() => !disabled && onClick && onClick()}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent>\n          {\n            icon &&\n            <div className={'chip-icon icon-left'}>\n              {icons[icon]({className: 'icon'})}\n            </div>\n          }\n          <div>\n            {text}\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default ActionChip;\n"],"mappings":";;;;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AAIA;;AAMA;;;;;;;;;;;;;;AAEA,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAQwB;EAAA,IAPrBC,IAOqB,QAPrBA,IAOqB;EAAA,IANrBC,IAMqB,QANrBA,IAMqB;EAAA,qBALrBC,IAKqB;EAAA,IALrBA,IAKqB,0BALdC,WAAA,CAAKC,MAKS;EAAA,IAJrBC,QAIqB,QAJrBA,QAIqB;EAAA,IAHrBC,QAGqB,QAHrBA,OAGqB;EAAA,IAFrBC,SAEqB,QAFrBA,SAEqB;EAAA,IADlBC,IACkB;;EAEnF;AACF;AACA;EACE,oBACE,qBAAC,yBAAD;IAAe,SAAS,YAAKN,IAAL,cAAaG,QAAQ,GAAG,UAAH,GAAgB,EAArC,sBAAmD,CAAC,CAACC,QAAF,GAAY,aAAZ,GAA4B,EAA/E,cAAqFC,SAAS,IAAI,EAAlG,CAAxB;IACe,OAAO,EAAE;MAAA,OAAM,CAACF,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;IAAA,CADxB;IAEe,WAAW,EAAEG,iCAF5B;IAGe,SAAS,EAAE,mBAAAC,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwC,CAACN,QAAzC,IAAqDC,QAArD,IAAgEA,QAAO,EAA3E;IAAA,CAH3B;IAIe,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAb,GAAuB,CAAC,CAAxB,GAA4B;EAJrD,GAKmBE,IALnB;IAAA,uBAME,qBAAC,gCAAD;MAAA,uBACE,sBAAC,uBAAD;QAAA,WAEIR,IAAI,iBACJ;UAAK,SAAS,EAAE,qBAAhB;UAAA,UACGY,kBAAA,CAAMZ,IAAN,EAAY;YAACO,SAAS,EAAE;UAAZ,CAAZ;QADH,EAHJ,eAOE;UAAA,UACGN;QADH,EAPF;MAAA;IADF;EANF,GADF;AAsBD,CAnCD;;eAqCeF,U"}
+{"version":3,"file":"ActionChip.cjs","names":["ActionChip","icon","text","size","Size","Medium","disabled","onClick","className","rest","defaultOnMouseDownHandler","e","key","icons"],"sources":["../../src/Chips/ActionChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick,\n                                                                className,\n                                                                ...rest\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   onClick={() => !disabled && onClick && onClick()}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   role=\"button\"\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent>\n          {\n            icon &&\n            <div className={'chip-icon icon-left'}>\n              {icons[icon]({className: 'icon'})}\n            </div>\n          }\n          <div>\n            {text}\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default ActionChip;\n"],"mappings":";;;;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AAIA;;AAMA;;;;;;;;;;;;;;AAEA,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAQwB;EAAA,IAPrBC,IAOqB,QAPrBA,IAOqB;EAAA,IANrBC,IAMqB,QANrBA,IAMqB;EAAA,qBALrBC,IAKqB;EAAA,IALrBA,IAKqB,0BALdC,WAAA,CAAKC,MAKS;EAAA,IAJrBC,QAIqB,QAJrBA,QAIqB;EAAA,IAHrBC,QAGqB,QAHrBA,OAGqB;EAAA,IAFrBC,SAEqB,QAFrBA,SAEqB;EAAA,IADlBC,IACkB;;EAEnF;AACF;AACA;EACE,oBACE,qBAAC,yBAAD;IAAe,SAAS,YAAKN,IAAL,cAAaG,QAAQ,GAAG,UAAH,GAAgB,EAArC,sBAAmD,CAAC,CAACC,QAAF,GAAY,aAAZ,GAA4B,EAA/E,cAAqFC,SAAS,IAAI,EAAlG,CAAxB;IACe,OAAO,EAAE;MAAA,OAAM,CAACF,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;IAAA,CADxB;IAEe,WAAW,EAAEG,iCAF5B;IAGe,IAAI,EAAC,QAHpB;IAIe,SAAS,EAAE,mBAAAC,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwC,CAACN,QAAzC,IAAqDC,QAArD,IAAgEA,QAAO,EAA3E;IAAA,CAJ3B;IAKe,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAb,GAAuB,CAAC,CAAxB,GAA4B;EALrD,GAMmBE,IANnB;IAAA,uBAOE,qBAAC,gCAAD;MAAA,uBACE,sBAAC,uBAAD;QAAA,WAEIR,IAAI,iBACJ;UAAK,SAAS,EAAE,qBAAhB;UAAA,UACGY,kBAAA,CAAMZ,IAAN,EAAY;YAACO,SAAS,EAAE;UAAZ,CAAZ;QADH,EAHJ,eAOE;UAAA,UACGN;QADH,EAPF;MAAA;IADF;EAPF,GADF;AAuBD,CApCD;;eAsCeF,U"}

package/dist/Chips/ActionChip.js

@@ -48,6 +48,7 @@ var ActionChip = function ActionChip(_ref) {
       return !disabled && _onClick && _onClick();
     },
     onMouseDown: defaultOnMouseDownHandler,
+    role: "button",
     onKeyDown: function onKeyDown(e) {
       return (e.key === 'Enter' || e.key === ' ') && !disabled && _onClick && _onClick();
     },

package/dist/Chips/ActionChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionChip.js","names":["React","SystemIcons","icons","Size","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","ActionChip","icon","text","size","Medium","disabled","onClick","className","rest","e","key"],"sources":["../../src/Chips/ActionChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick,\n                                                                className,\n                                                                ...rest\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   onClick={() => !disabled && onClick && onClick()}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent>\n          {\n            icon &&\n            <div className={'chip-icon icon-left'}>\n              {icons[icon]({className: 'icon'})}\n            </div>\n          }\n          <div>\n            {text}\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default ActionChip;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,WAAW,IAAIC,KAAvB,QAAmC,gBAAnC;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA;AACA;AACA;;AACA,SAAQC,aAAR,EAAuBC,WAAvB,EAAoCC,oBAApC,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;;;;AAEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAQwB;EAAA,IAPrBC,IAOqB,QAPrBA,IAOqB;EAAA,IANrBC,IAMqB,QANrBA,IAMqB;EAAA,qBALrBC,IAKqB;EAAA,IALrBA,IAKqB,0BALdR,IAAI,CAACS,MAKS;EAAA,IAJrBC,QAIqB,QAJrBA,QAIqB;EAAA,IAHrBC,QAGqB,QAHrBA,OAGqB;EAAA,IAFrBC,SAEqB,QAFrBA,SAEqB;EAAA,IADlBC,IACkB;;EAEnF;AACF;AACA;EACE,oBACE,KAAC,aAAD;IAAe,SAAS,YAAKL,IAAL,cAAaE,QAAQ,GAAG,UAAH,GAAgB,EAArC,sBAAmD,CAAC,CAACC,QAAF,GAAY,aAAZ,GAA4B,EAA/E,cAAqFC,SAAS,IAAI,EAAlG,CAAxB;IACe,OAAO,EAAE;MAAA,OAAM,CAACF,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;IAAA,CADxB;IAEe,WAAW,EAAEP,yBAF5B;IAGe,SAAS,EAAE,mBAAAU,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwC,CAACL,QAAzC,IAAqDC,QAArD,IAAgEA,QAAO,EAA3E;IAAA,CAH3B;IAIe,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAb,GAAuB,CAAC,CAAxB,GAA4B;EAJrD,GAKmBE,IALnB;IAAA,uBAME,KAAC,oBAAD;MAAA,uBACE,MAAC,WAAD;QAAA,WAEIP,IAAI,iBACJ;UAAK,SAAS,EAAE,qBAAhB;UAAA,UACGP,KAAK,CAACO,IAAD,CAAL,CAAY;YAACM,SAAS,EAAE;UAAZ,CAAZ;QADH,EAHJ,eAOE;UAAA,UACGL;QADH,EAPF;MAAA;IADF;EANF,GADF;AAsBD,CAnCD;;AAqCA,eAAeF,UAAf"}
+{"version":3,"file":"ActionChip.js","names":["React","SystemIcons","icons","Size","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","ActionChip","icon","text","size","Medium","disabled","onClick","className","rest","e","key"],"sources":["../../src/Chips/ActionChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick,\n                                                                className,\n                                                                ...rest\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   onClick={() => !disabled && onClick && onClick()}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   role=\"button\"\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent>\n          {\n            icon &&\n            <div className={'chip-icon icon-left'}>\n              {icons[icon]({className: 'icon'})}\n            </div>\n          }\n          <div>\n            {text}\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default ActionChip;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,WAAW,IAAIC,KAAvB,QAAmC,gBAAnC;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA;AACA;AACA;;AACA,SAAQC,aAAR,EAAuBC,WAAvB,EAAoCC,oBAApC,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;;;;AAEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAQwB;EAAA,IAPrBC,IAOqB,QAPrBA,IAOqB;EAAA,IANrBC,IAMqB,QANrBA,IAMqB;EAAA,qBALrBC,IAKqB;EAAA,IALrBA,IAKqB,0BALdR,IAAI,CAACS,MAKS;EAAA,IAJrBC,QAIqB,QAJrBA,QAIqB;EAAA,IAHrBC,QAGqB,QAHrBA,OAGqB;EAAA,IAFrBC,SAEqB,QAFrBA,SAEqB;EAAA,IADlBC,IACkB;;EAEnF;AACF;AACA;EACE,oBACE,KAAC,aAAD;IAAe,SAAS,YAAKL,IAAL,cAAaE,QAAQ,GAAG,UAAH,GAAgB,EAArC,sBAAmD,CAAC,CAACC,QAAF,GAAY,aAAZ,GAA4B,EAA/E,cAAqFC,SAAS,IAAI,EAAlG,CAAxB;IACe,OAAO,EAAE;MAAA,OAAM,CAACF,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;IAAA,CADxB;IAEe,WAAW,EAAEP,yBAF5B;IAGe,IAAI,EAAC,QAHpB;IAIe,SAAS,EAAE,mBAAAU,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwC,CAACL,QAAzC,IAAqDC,QAArD,IAAgEA,QAAO,EAA3E;IAAA,CAJ3B;IAKe,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAb,GAAuB,CAAC,CAAxB,GAA4B;EALrD,GAMmBE,IANnB;IAAA,uBAOE,KAAC,oBAAD;MAAA,uBACE,MAAC,WAAD;QAAA,WAEIP,IAAI,iBACJ;UAAK,SAAS,EAAE,qBAAhB;UAAA,UACGP,KAAK,CAACO,IAAD,CAAL,CAAY;YAACM,SAAS,EAAE;UAAZ,CAAZ;QADH,EAHJ,eAOE;UAAA,UACGL;QADH,EAPF;MAAA;IADF;EAPF,GADF;AAuBD,CApCD;;AAsCA,eAAeF,UAAf"}

package/dist/Chips/ChoiceChips.cjs

@@ -78,7 +78,8 @@ var ChoiceChips = function ChoiceChips(_ref) {
    */
 
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    role: "radiogroup",
     children: values.map(function (item) {
       var value = item.value,
           _item$size = item.size,
@@ -87,6 +88,7 @@ var ChoiceChips = function ChoiceChips(_ref) {
           className = item.className,
           rest = (0, _objectWithoutProperties2.default)(item, _excluded);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, _objectSpread(_objectSpread({
+        role: "radio",
         tabIndex: disabled ? -1 : 0,
         className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value ? 'default' : 'outline', " interactive ").concat(className || ''),
         onMouseDown: _common.defaultOnMouseDownHandler,

package/dist/Chips/ChoiceChips.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceChips.cjs","names":["ChoiceChips","selected","disabled","onClick","values","React","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","item","size","Size","Medium","label","className","rest","defaultOnMouseDownHandler"],"sources":["../../src/Chips/ChoiceChips.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {Size} from '../types';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n                                                                 selected,\n                                                                 disabled,\n                                                                 onClick,\n                                                                 values\n                                                               }: ChoiceChipProps) => {\n  /**\n   * Globally used variables within the component.\n   */\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n  /**\n   * Set the selected value for the chip.\n   */\n  React.useEffect(() => {\n    setSelectedChip(selected);\n  }, [selected]);\n\n  /**\n   * Sets selected chip and fires an event to parent component.\n   * @param value - Chip which was selected.\n   */\n  const onSelectChip = (value: ChipValue) => {\n    // Update selected chip\n    setSelectedChip(value.value);\n\n    // Fire the event\n    onClick && onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <>\n      {values.map((item: ChipValue) => {\n        const {value, size = Size.Medium, label, className, ...rest } = item;\n        return (\n          <ChipContainer\n            key={value}\n            tabIndex={disabled ? -1 : 0}\n            className={`${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'default' : 'outline'} interactive ${className || ''}`}\n            onMouseDown={defaultOnMouseDownHandler}\n            onClick={() => !disabled && onSelectChip(item)}\n            onKeyDown={e => !disabled && handleKeyDown(e, item)}\n            {...rest}>\n            <ChipContentContainer>\n              <ChipContent>\n                {label}\n              </ChipContent>\n            </ChipContentContainer>\n          </ChipContainer>\n        );\n      })}\n    </>\n  );\n};\n\nexport default ChoiceChips;\n"],"mappings":";;;;;;;;;;;;;;;;;AAGA;;AAKA;;AAMA;;AACA;;;;;;;;;;;;;;AAEA,IAAMA,WAAqD,GAAG,SAAxDA,WAAwD,OAKwB;EAAA,IAJrBC,QAIqB,QAJrBA,QAIqB;EAAA,IAHrBC,QAGqB,QAHrBA,QAGqB;EAAA,IAFrBC,OAEqB,QAFrBA,OAEqB;EAAA,IADrBC,MACqB,QADrBA,MACqB;;EACpF;AACF;AACA;EACE,sBAAwCC,KAAK,CAACC,QAAN,CAAuB,EAAvB,CAAxC;EAAA;EAAA,IAAOC,YAAP;EAAA,IAAqBC,eAArB;EAEA;AACF;AACA;;;EACEH,KAAK,CAACI,SAAN,CAAgB,YAAM;IACpBD,eAAe,CAACP,QAAD,CAAf;EACD,CAFD,EAEG,CAACA,QAAD,CAFH;EAIA;AACF;AACA;AACA;;EACE,IAAMS,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;IACzC;IACAH,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;IACAR,OAAO,IAAIA,OAAO,CAACQ,KAAD,CAAlB;EACD,CAND;;EAQA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;IAClD,IAAIE,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAnC,EAAwC;MACtCJ,YAAY,CAACC,KAAD,CAAZ;IACD;EACF,CAJD;EAMA;AACF;AACA;;;EACE,oBACE;IAAA,UACGP,MAAM,CAACW,GAAP,CAAW,UAACC,IAAD,EAAqB;MAC/B,IAAOL,KAAP,GAAgEK,IAAhE,CAAOL,KAAP;MAAA,iBAAgEK,IAAhE,CAAcC,IAAd;MAAA,IAAcA,IAAd,2BAAqBC,WAAA,CAAKC,MAA1B;MAAA,IAAkCC,KAAlC,GAAgEJ,IAAhE,CAAkCI,KAAlC;MAAA,IAAyCC,SAAzC,GAAgEL,IAAhE,CAAyCK,SAAzC;MAAA,IAAuDC,IAAvD,0CAAgEN,IAAhE;MACA,oBACE,qBAAC,yBAAD;QAEE,QAAQ,EAAEd,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;QAGE,SAAS,YAAKe,IAAL,cAAaf,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CK,YAAY,KAAKI,KAAjB,GAAyB,SAAzB,GAAqC,SAAhF,0BAAyGU,SAAS,IAAI,EAAtH,CAHX;QAIE,WAAW,EAAEE,iCAJf;QAKE,OAAO,EAAE;UAAA,OAAM,CAACrB,QAAD,IAAaQ,YAAY,CAACM,IAAD,CAA/B;QAAA,CALX;QAME,SAAS,EAAE,mBAAAH,CAAC;UAAA,OAAI,CAACX,QAAD,IAAaU,aAAa,CAACC,CAAD,EAAIG,IAAJ,CAA9B;QAAA;MANd,GAOMM,IAPN;QAAA,uBAQE,qBAAC,gCAAD;UAAA,uBACE,qBAAC,uBAAD;YAAA,UACGF;UADH;QADF;MARF,IACOT,KADP,CADF;IAgBD,CAlBA;EADH,EADF;AAuBD,CA9DD;;eAgEeX,W"}
+{"version":3,"file":"ChoiceChips.cjs","names":["ChoiceChips","selected","disabled","onClick","values","React","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","item","size","Size","Medium","label","className","rest","defaultOnMouseDownHandler"],"sources":["../../src/Chips/ChoiceChips.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {Size} from '../types';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n                                                                 selected,\n                                                                 disabled,\n                                                                 onClick,\n                                                                 values\n                                                               }: ChoiceChipProps) => {\n  /**\n   * Globally used variables within the component.\n   */\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n  /**\n   * Set the selected value for the chip.\n   */\n  React.useEffect(() => {\n    setSelectedChip(selected);\n  }, [selected]);\n\n  /**\n   * Sets selected chip and fires an event to parent component.\n   * @param value - Chip which was selected.\n   */\n  const onSelectChip = (value: ChipValue) => {\n    // Update selected chip\n    setSelectedChip(value.value);\n\n    // Fire the event\n    onClick && onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <div role=\"radiogroup\">\n      {values.map((item: ChipValue) => {\n        const {value, size = Size.Medium, label, className, ...rest } = item;\n        return (\n          <ChipContainer\n            role=\"radio\"\n            key={value}\n            tabIndex={disabled ? -1 : 0}\n            className={`${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'default' : 'outline'} interactive ${className || ''}`}\n            onMouseDown={defaultOnMouseDownHandler}\n            onClick={() => !disabled && onSelectChip(item)}\n            onKeyDown={e => !disabled && handleKeyDown(e, item)}\n            {...rest}>\n            <ChipContentContainer>\n              <ChipContent>\n                {label}\n              </ChipContent>\n            </ChipContentContainer>\n          </ChipContainer>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default ChoiceChips;\n"],"mappings":";;;;;;;;;;;;;;;;;AAGA;;AAKA;;AAMA;;AACA;;;;;;;;;;;;;;AAEA,IAAMA,WAAqD,GAAG,SAAxDA,WAAwD,OAKwB;EAAA,IAJrBC,QAIqB,QAJrBA,QAIqB;EAAA,IAHrBC,QAGqB,QAHrBA,QAGqB;EAAA,IAFrBC,OAEqB,QAFrBA,OAEqB;EAAA,IADrBC,MACqB,QADrBA,MACqB;;EACpF;AACF;AACA;EACE,sBAAwCC,KAAK,CAACC,QAAN,CAAuB,EAAvB,CAAxC;EAAA;EAAA,IAAOC,YAAP;EAAA,IAAqBC,eAArB;EAEA;AACF;AACA;;;EACEH,KAAK,CAACI,SAAN,CAAgB,YAAM;IACpBD,eAAe,CAACP,QAAD,CAAf;EACD,CAFD,EAEG,CAACA,QAAD,CAFH;EAIA;AACF;AACA;AACA;;EACE,IAAMS,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;IACzC;IACAH,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;IACAR,OAAO,IAAIA,OAAO,CAACQ,KAAD,CAAlB;EACD,CAND;;EAQA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;IAClD,IAAIE,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAnC,EAAwC;MACtCJ,YAAY,CAACC,KAAD,CAAZ;IACD;EACF,CAJD;EAMA;AACF;AACA;;;EACE,oBACE;IAAK,IAAI,EAAC,YAAV;IAAA,UACGP,MAAM,CAACW,GAAP,CAAW,UAACC,IAAD,EAAqB;MAC/B,IAAOL,KAAP,GAAgEK,IAAhE,CAAOL,KAAP;MAAA,iBAAgEK,IAAhE,CAAcC,IAAd;MAAA,IAAcA,IAAd,2BAAqBC,WAAA,CAAKC,MAA1B;MAAA,IAAkCC,KAAlC,GAAgEJ,IAAhE,CAAkCI,KAAlC;MAAA,IAAyCC,SAAzC,GAAgEL,IAAhE,CAAyCK,SAAzC;MAAA,IAAuDC,IAAvD,0CAAgEN,IAAhE;MACA,oBACE,qBAAC,yBAAD;QACE,IAAI,EAAC,OADP;QAGE,QAAQ,EAAEd,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAH5B;QAIE,SAAS,YAAKe,IAAL,cAAaf,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CK,YAAY,KAAKI,KAAjB,GAAyB,SAAzB,GAAqC,SAAhF,0BAAyGU,SAAS,IAAI,EAAtH,CAJX;QAKE,WAAW,EAAEE,iCALf;QAME,OAAO,EAAE;UAAA,OAAM,CAACrB,QAAD,IAAaQ,YAAY,CAACM,IAAD,CAA/B;QAAA,CANX;QAOE,SAAS,EAAE,mBAAAH,CAAC;UAAA,OAAI,CAACX,QAAD,IAAaU,aAAa,CAACC,CAAD,EAAIG,IAAJ,CAA9B;QAAA;MAPd,GAQMM,IARN;QAAA,uBASE,qBAAC,gCAAD;UAAA,uBACE,qBAAC,uBAAD;YAAA,UACGF;UADH;QADF;MATF,IAEOT,KAFP,CADF;IAiBD,CAnBA;EADH,EADF;AAwBD,CA/DD;;eAiEeX,W"}

package/dist/Chips/ChoiceChips.js

@@ -23,7 +23,6 @@ import { ChipContainer, ChipContent, ChipContentContainer } from './ChipStyles';
 import { defaultOnMouseDownHandler } from '../common';
 import { Size } from '../types';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 
 var ChoiceChips = function ChoiceChips(_ref) {
   var selected = _ref.selected,
@@ -68,7 +67,8 @@ var ChoiceChips = function ChoiceChips(_ref) {
    */
 
 
-  return /*#__PURE__*/_jsx(_Fragment, {
+  return /*#__PURE__*/_jsx("div", {
+    role: "radiogroup",
     children: values.map(function (item) {
       var value = item.value,
           _item$size = item.size,
@@ -78,6 +78,7 @@ var ChoiceChips = function ChoiceChips(_ref) {
           rest = _objectWithoutProperties(item, _excluded);
 
       return /*#__PURE__*/_jsx(ChipContainer, _objectSpread(_objectSpread({
+        role: "radio",
         tabIndex: disabled ? -1 : 0,
         className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value ? 'default' : 'outline', " interactive ").concat(className || ''),
         onMouseDown: defaultOnMouseDownHandler,

package/dist/Chips/ChoiceChips.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceChips.js","names":["React","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","Size","ChoiceChips","selected","disabled","onClick","values","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","item","size","Medium","label","className","rest"],"sources":["../../src/Chips/ChoiceChips.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {Size} from '../types';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n                                                                 selected,\n                                                                 disabled,\n                                                                 onClick,\n                                                                 values\n                                                               }: ChoiceChipProps) => {\n  /**\n   * Globally used variables within the component.\n   */\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n  /**\n   * Set the selected value for the chip.\n   */\n  React.useEffect(() => {\n    setSelectedChip(selected);\n  }, [selected]);\n\n  /**\n   * Sets selected chip and fires an event to parent component.\n   * @param value - Chip which was selected.\n   */\n  const onSelectChip = (value: ChipValue) => {\n    // Update selected chip\n    setSelectedChip(value.value);\n\n    // Fire the event\n    onClick && onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <>\n      {values.map((item: ChipValue) => {\n        const {value, size = Size.Medium, label, className, ...rest } = item;\n        return (\n          <ChipContainer\n            key={value}\n            tabIndex={disabled ? -1 : 0}\n            className={`${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'default' : 'outline'} interactive ${className || ''}`}\n            onMouseDown={defaultOnMouseDownHandler}\n            onClick={() => !disabled && onSelectChip(item)}\n            onKeyDown={e => !disabled && handleKeyDown(e, item)}\n            {...rest}>\n            <ChipContentContainer>\n              <ChipContent>\n                {label}\n              </ChipContent>\n            </ChipContentContainer>\n          </ChipContainer>\n        );\n      })}\n    </>\n  );\n};\n\nexport default ChoiceChips;\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,aAAR,EAAuBC,WAAvB,EAAoCC,oBAApC,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;AACA,SAAQC,IAAR,QAAmB,UAAnB;;;;AAEA,IAAMC,WAAqD,GAAG,SAAxDA,WAAwD,OAKwB;EAAA,IAJrBC,QAIqB,QAJrBA,QAIqB;EAAA,IAHrBC,QAGqB,QAHrBA,QAGqB;EAAA,IAFrBC,OAEqB,QAFrBA,OAEqB;EAAA,IADrBC,MACqB,QADrBA,MACqB;;EACpF;AACF;AACA;EACE,sBAAwCV,KAAK,CAACW,QAAN,CAAuB,EAAvB,CAAxC;EAAA;EAAA,IAAOC,YAAP;EAAA,IAAqBC,eAArB;EAEA;AACF;AACA;;;EACEb,KAAK,CAACc,SAAN,CAAgB,YAAM;IACpBD,eAAe,CAACN,QAAD,CAAf;EACD,CAFD,EAEG,CAACA,QAAD,CAFH;EAIA;AACF;AACA;AACA;;EACE,IAAMQ,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;IACzC;IACAH,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;IACAP,OAAO,IAAIA,OAAO,CAACO,KAAD,CAAlB;EACD,CAND;;EAQA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;IAClD,IAAIE,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAnC,EAAwC;MACtCJ,YAAY,CAACC,KAAD,CAAZ;IACD;EACF,CAJD;EAMA;AACF;AACA;;;EACE,oBACE;IAAA,UACGN,MAAM,CAACU,GAAP,CAAW,UAACC,IAAD,EAAqB;MAC/B,IAAOL,KAAP,GAAgEK,IAAhE,CAAOL,KAAP;MAAA,iBAAgEK,IAAhE,CAAcC,IAAd;MAAA,IAAcA,IAAd,2BAAqBjB,IAAI,CAACkB,MAA1B;MAAA,IAAkCC,KAAlC,GAAgEH,IAAhE,CAAkCG,KAAlC;MAAA,IAAyCC,SAAzC,GAAgEJ,IAAhE,CAAyCI,SAAzC;MAAA,IAAuDC,IAAvD,4BAAgEL,IAAhE;;MACA,oBACE,KAAC,aAAD;QAEE,QAAQ,EAAEb,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;QAGE,SAAS,YAAKc,IAAL,cAAad,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CI,YAAY,KAAKI,KAAjB,GAAyB,SAAzB,GAAqC,SAAhF,0BAAyGS,SAAS,IAAI,EAAtH,CAHX;QAIE,WAAW,EAAErB,yBAJf;QAKE,OAAO,EAAE;UAAA,OAAM,CAACI,QAAD,IAAaO,YAAY,CAACM,IAAD,CAA/B;QAAA,CALX;QAME,SAAS,EAAE,mBAAAH,CAAC;UAAA,OAAI,CAACV,QAAD,IAAaS,aAAa,CAACC,CAAD,EAAIG,IAAJ,CAA9B;QAAA;MANd,GAOMK,IAPN;QAAA,uBAQE,KAAC,oBAAD;UAAA,uBACE,KAAC,WAAD;YAAA,UACGF;UADH;QADF;MARF,IACOR,KADP,CADF;IAgBD,CAlBA;EADH,EADF;AAuBD,CA9DD;;AAgEA,eAAeV,WAAf"}
+{"version":3,"file":"ChoiceChips.js","names":["React","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","Size","ChoiceChips","selected","disabled","onClick","values","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","item","size","Medium","label","className","rest"],"sources":["../../src/Chips/ChoiceChips.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {Size} from '../types';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n                                                                 selected,\n                                                                 disabled,\n                                                                 onClick,\n                                                                 values\n                                                               }: ChoiceChipProps) => {\n  /**\n   * Globally used variables within the component.\n   */\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n  /**\n   * Set the selected value for the chip.\n   */\n  React.useEffect(() => {\n    setSelectedChip(selected);\n  }, [selected]);\n\n  /**\n   * Sets selected chip and fires an event to parent component.\n   * @param value - Chip which was selected.\n   */\n  const onSelectChip = (value: ChipValue) => {\n    // Update selected chip\n    setSelectedChip(value.value);\n\n    // Fire the event\n    onClick && onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <div role=\"radiogroup\">\n      {values.map((item: ChipValue) => {\n        const {value, size = Size.Medium, label, className, ...rest } = item;\n        return (\n          <ChipContainer\n            role=\"radio\"\n            key={value}\n            tabIndex={disabled ? -1 : 0}\n            className={`${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'default' : 'outline'} interactive ${className || ''}`}\n            onMouseDown={defaultOnMouseDownHandler}\n            onClick={() => !disabled && onSelectChip(item)}\n            onKeyDown={e => !disabled && handleKeyDown(e, item)}\n            {...rest}>\n            <ChipContentContainer>\n              <ChipContent>\n                {label}\n              </ChipContent>\n            </ChipContentContainer>\n          </ChipContainer>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default ChoiceChips;\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,aAAR,EAAuBC,WAAvB,EAAoCC,oBAApC,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;AACA,SAAQC,IAAR,QAAmB,UAAnB;;;AAEA,IAAMC,WAAqD,GAAG,SAAxDA,WAAwD,OAKwB;EAAA,IAJrBC,QAIqB,QAJrBA,QAIqB;EAAA,IAHrBC,QAGqB,QAHrBA,QAGqB;EAAA,IAFrBC,OAEqB,QAFrBA,OAEqB;EAAA,IADrBC,MACqB,QADrBA,MACqB;;EACpF;AACF;AACA;EACE,sBAAwCV,KAAK,CAACW,QAAN,CAAuB,EAAvB,CAAxC;EAAA;EAAA,IAAOC,YAAP;EAAA,IAAqBC,eAArB;EAEA;AACF;AACA;;;EACEb,KAAK,CAACc,SAAN,CAAgB,YAAM;IACpBD,eAAe,CAACN,QAAD,CAAf;EACD,CAFD,EAEG,CAACA,QAAD,CAFH;EAIA;AACF;AACA;AACA;;EACE,IAAMQ,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;IACzC;IACAH,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;IACAP,OAAO,IAAIA,OAAO,CAACO,KAAD,CAAlB;EACD,CAND;;EAQA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;IAClD,IAAIE,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAnC,EAAwC;MACtCJ,YAAY,CAACC,KAAD,CAAZ;IACD;EACF,CAJD;EAMA;AACF;AACA;;;EACE,oBACE;IAAK,IAAI,EAAC,YAAV;IAAA,UACGN,MAAM,CAACU,GAAP,CAAW,UAACC,IAAD,EAAqB;MAC/B,IAAOL,KAAP,GAAgEK,IAAhE,CAAOL,KAAP;MAAA,iBAAgEK,IAAhE,CAAcC,IAAd;MAAA,IAAcA,IAAd,2BAAqBjB,IAAI,CAACkB,MAA1B;MAAA,IAAkCC,KAAlC,GAAgEH,IAAhE,CAAkCG,KAAlC;MAAA,IAAyCC,SAAzC,GAAgEJ,IAAhE,CAAyCI,SAAzC;MAAA,IAAuDC,IAAvD,4BAAgEL,IAAhE;;MACA,oBACE,KAAC,aAAD;QACE,IAAI,EAAC,OADP;QAGE,QAAQ,EAAEb,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAH5B;QAIE,SAAS,YAAKc,IAAL,cAAad,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CI,YAAY,KAAKI,KAAjB,GAAyB,SAAzB,GAAqC,SAAhF,0BAAyGS,SAAS,IAAI,EAAtH,CAJX;QAKE,WAAW,EAAErB,yBALf;QAME,OAAO,EAAE;UAAA,OAAM,CAACI,QAAD,IAAaO,YAAY,CAACM,IAAD,CAA/B;QAAA,CANX;QAOE,SAAS,EAAE,mBAAAH,CAAC;UAAA,OAAI,CAACV,QAAD,IAAaS,aAAa,CAACC,CAAD,EAAIG,IAAJ,CAA9B;QAAA;MAPd,GAQMK,IARN;QAAA,uBASE,KAAC,oBAAD;UAAA,uBACE,KAAC,WAAD;YAAA,UACGF;UADH;QADF;MATF,IAEOR,KAFP,CADF;IAiBD,CAnBA;EADH,EADF;AAwBD,CA/DD;;AAiEA,eAAeV,WAAf"}

package/dist/Chips/FilterChip.cjs

@@ -49,6 +49,7 @@ var FilterChip = function FilterChip(_ref) {
    * Return Filter Chip component.
    */
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, _objectSpread(_objectSpread({
+    role: "checkbox",
     className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'default' : 'outline', " ").concat(!!_onClick ? 'interactive' : '', " ").concat(className || ''),
     tabIndex: disabled || !_onClick ? -1 : 0,
     onKeyDown: function onKeyDown(e) {

package/dist/Chips/FilterChip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterChip.cjs","names":["FilterChip","selected","text","size","Size","Medium","disabled","onClick","className","rest","e","key","defaultOnMouseDownHandler"],"sources":["../../src/Chips/FilterChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {FilterChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\n                                                                selected,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick,\n                                                                className,\n                                                                ...rest\n                                                              }: FilterChipProps) => {\n\n\n  /**\n   * Return Filter Chip component.\n   */\n  return (\n    <ChipContainer\n      className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n      tabIndex={disabled || !onClick ? -1 : 0}\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n      onMouseDown={defaultOnMouseDownHandler}\n      onClick={() => !disabled && onClick && onClick()}\n      {...rest}>\n      <ChipContentContainer>\n        <ChipContent>\n          {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckMark className={'icon'}/></div>}\n          <div>{text}</div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default FilterChip;\n"],"mappings":";;;;;;;;;;;;;;;AAGA;;AACA;;AAKA;;AAKA;;AAMA;;;;;;;;;;;;;;AAEA,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAQwB;EAAA,IAPrBC,QAOqB,QAPrBA,QAOqB;EAAA,IANrBC,IAMqB,QANrBA,IAMqB;EAAA,qBALrBC,IAKqB;EAAA,IALrBA,IAKqB,0BALdC,WAAA,CAAKC,MAKS;EAAA,IAJrBC,QAIqB,QAJrBA,QAIqB;EAAA,IAHrBC,QAGqB,QAHrBA,OAGqB;EAAA,IAFrBC,SAEqB,QAFrBA,SAEqB;EAAA,IADlBC,IACkB;;EAGnF;AACF;AACA;EACE,oBACE,qBAAC,yBAAD;IACE,SAAS,YAAKN,IAAL,cAAaG,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CL,QAAQ,GAAG,SAAH,GAAe,SAAlE,cAA+E,CAAC,CAACM,QAAF,GAAY,aAAZ,GAA4B,EAA3G,cAAiHC,SAAS,IAAI,EAA9H,CADX;IAEE,QAAQ,EAAEF,QAAQ,IAAI,CAACC,QAAb,GAAuB,CAAC,CAAxB,GAA4B,CAFxC;IAGE,SAAS,EAAE,mBAAAG,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwC,CAACL,QAAzC,IAAqDC,QAArD,IAAgEA,QAAO,EAA3E;IAAA,CAHd;IAIE,WAAW,EAAEK,iCAJf;IAKE,OAAO,EAAE;MAAA,OAAM,CAACN,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;IAAA;EALX,GAMME,IANN;IAAA,uBAOE,qBAAC,gCAAD;MAAA,uBACE,sBAAC,uBAAD;QAAA,WACGR,QAAQ,iBAAI;UAAK,SAAS,EAAE,qBAAhB;UAAA,uBAAuC,qBAAC,kBAAD,CAAa,SAAb;YAAuB,SAAS,EAAE;UAAlC;QAAvC,EADf,eAEE;UAAA,UAAMC;QAAN,EAFF;MAAA;IADF;EAPF,GADF;AAgBD,CA9BD;;eAgCeF,U"}
+{"version":3,"file":"FilterChip.cjs","names":["FilterChip","selected","text","size","Size","Medium","disabled","onClick","className","rest","e","key","defaultOnMouseDownHandler"],"sources":["../../src/Chips/FilterChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {FilterChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\n                                                                selected,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick,\n                                                                className,\n                                                                ...rest\n                                                              }: FilterChipProps) => {\n\n\n  /**\n   * Return Filter Chip component.\n   */\n  return (\n    <ChipContainer\n      role=\"checkbox\"\n      className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n      tabIndex={disabled || !onClick ? -1 : 0}\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n      onMouseDown={defaultOnMouseDownHandler}\n      onClick={() => !disabled && onClick && onClick()}\n      {...rest}>\n      <ChipContentContainer>\n        <ChipContent>\n          {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckMark className={'icon'}/></div>}\n          <div>{text}</div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default FilterChip;\n"],"mappings":";;;;;;;;;;;;;;;AAGA;;AACA;;AAKA;;AAKA;;AAMA;;;;;;;;;;;;;;AAEA,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAQwB;EAAA,IAPrBC,QAOqB,QAPrBA,QAOqB;EAAA,IANrBC,IAMqB,QANrBA,IAMqB;EAAA,qBALrBC,IAKqB;EAAA,IALrBA,IAKqB,0BALdC,WAAA,CAAKC,MAKS;EAAA,IAJrBC,QAIqB,QAJrBA,QAIqB;EAAA,IAHrBC,QAGqB,QAHrBA,OAGqB;EAAA,IAFrBC,SAEqB,QAFrBA,SAEqB;EAAA,IADlBC,IACkB;;EAGnF;AACF;AACA;EACE,oBACE,qBAAC,yBAAD;IACE,IAAI,EAAC,UADP;IAEE,SAAS,YAAKN,IAAL,cAAaG,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CL,QAAQ,GAAG,SAAH,GAAe,SAAlE,cAA+E,CAAC,CAACM,QAAF,GAAY,aAAZ,GAA4B,EAA3G,cAAiHC,SAAS,IAAI,EAA9H,CAFX;IAGE,QAAQ,EAAEF,QAAQ,IAAI,CAACC,QAAb,GAAuB,CAAC,CAAxB,GAA4B,CAHxC;IAIE,SAAS,EAAE,mBAAAG,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwC,CAACL,QAAzC,IAAqDC,QAArD,IAAgEA,QAAO,EAA3E;IAAA,CAJd;IAKE,WAAW,EAAEK,iCALf;IAME,OAAO,EAAE;MAAA,OAAM,CAACN,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;IAAA;EANX,GAOME,IAPN;IAAA,uBAQE,qBAAC,gCAAD;MAAA,uBACE,sBAAC,uBAAD;QAAA,WACGR,QAAQ,iBAAI;UAAK,SAAS,EAAE,qBAAhB;UAAA,uBAAuC,qBAAC,kBAAD,CAAa,SAAb;YAAuB,SAAS,EAAE;UAAlC;QAAvC,EADf,eAEE;UAAA,UAAMC;QAAN,EAFF;MAAA;IADF;EARF,GADF;AAiBD,CA/BD;;eAiCeF,U"}