@laerdal/life-react-components 6.0.0-dev.2.full → 6.0.0-dev.21.full.full

package/dist/Card/VerticalCard/CardMiddleSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardMiddleSection.js","names":["React","styled","useTheme","COLORS","ComponentS","ComponentTextStyle","ComponentXL","Tag","jsx","_jsx","jsxs","_jsxs","CardMiddleSectionContainer","div","CardMiddleSectionColorBandStyles","props","$color","CardMiddleSectionTagsStyles","CardMiddleSectionCategoryStyles","getColor","theme","CardMiddleSection","_ref","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","children","$extraTopMargin","Boolean","$bottomMargin","textStyle","Bold","color","className","map","x","index","label","variant","icon"],"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '../../index';\r\nimport { ReactNode } from 'react';\r\n\r\nexport interface CardMiddleSectionProps {\r\n  /** Color of the band to be shown on the top of middle section. */\r\n  colorBandColor?: string;\r\n  /** Icon to be shown on the left side of the categoryLabel. */\r\n  categoryIcon?: React.ReactNode;\r\n  /** Label to be shown at the top part of the middle section. */\r\n  categoryLabel?: string;\r\n  /** Main title of the Card component. */\r\n  title: string;\r\n  /** Description of the Card. */\r\n  description?: string;\r\n  /** Tags to be shown under the description. */\r\n  tags?: CardTag[];\r\n  /** Second row of tags if needed. */\r\n  row2Tags?: CardTag[];\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface CardTag {\r\n  label: string;\r\n  variant?: TagVariants;\r\n  icon?: ReactNode\r\n}\r\n\r\nexport const CardMiddleSectionContainer = styled.div`\r\n  display: flex;\r\n  flex-grow: 1;\r\n  width: calc(100% - 32px);\r\n  position: relative;\r\n  flex-direction: column;\r\n  padding: 16px;\r\n  gap: 8px;\r\n\r\n  .descriptionBlock {\r\n    padding: 2px 0;\r\n  }\r\n\r\n  .titleBlock {\r\n    padding: 2px 0;\r\n  }\r\n`;\r\n\r\nexport const CardMiddleSectionColorBandStyles = styled.div<{ $color: string }>`\r\n  position: absolute;\r\n  width: 100%;\r\n  top: 0px;\r\n  left: 0px;\r\n  height: 8px;\r\n  background-color: ${(props) => props.$color};\r\n`;\r\n\r\nexport const CardMiddleSectionTagsStyles = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n  flex-wrap: wrap;\r\n`;\r\n\r\nexport const CardMiddleSectionCategoryStyles = styled.div<{ $extraTopMargin: boolean; $bottomMargin: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: none;\r\n  gap: 6px;\r\n\r\n  svg {\r\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\r\n  colorBandColor,\r\n  categoryIcon,\r\n  categoryLabel,\r\n  title,\r\n  description,\r\n  tags,\r\n  row2Tags,\r\n  disabled,\r\n}: CardMiddleSectionProps) => {\r\n  const theme = useTheme();\r\n  return (\r\n    <CardMiddleSectionContainer data-testid={'card-middleSection'} >\r\n      {colorBandColor && <CardMiddleSectionColorBandStyles $color={colorBandColor} />}\r\n      {\r\n        (categoryIcon || categoryLabel) &&\r\n        <CardMiddleSectionCategoryStyles $extraTopMargin={Boolean(colorBandColor)} $bottomMargin={Boolean(categoryIcon || categoryLabel)}>\r\n          {categoryIcon}\r\n          <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.getColor('neutral_500', theme)}>\r\n            {categoryLabel}\r\n          </ComponentS>\r\n        </CardMiddleSectionCategoryStyles>\r\n      }\r\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.getColor('neutral_500', theme) : COLORS.getColor('black', theme)}>\r\n        {title}\r\n      </ComponentXL>\r\n      {description && (\r\n        <ComponentS className=\"descriptionBlock\" color={COLORS.getColor('neutral_600', theme)}>\r\n          {description}\r\n        </ComponentS>\r\n      )}\r\n      {tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n      {row2Tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {row2Tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n    </CardMiddleSectionContainer>\r\n  );\r\n};\r\n\r\nexport default CardMiddleSection;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CardMiddleSection.js","names":["React","styled","useTheme","COLORS","ComponentS","ComponentTextStyle","ComponentXLStyling","Tag","jsx","_jsx","jsxs","_jsxs","CardMiddleSectionContainer","div","CardMiddleSectionColorBandStyles","props","$color","CardMiddleSectionTagsStyles","CardMiddleSectionCategoryStyles","generateToken","componentType","defaultVariant","theme","CardMiddleSectionTitle","h3","Bold","$disabled","CardMiddleSection","_ref","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","componentId","children","$extraTopMargin","Boolean","$bottomMargin","textStyle","color","id","className","map","x","index","label","variant","icon"],"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, ComponentXLStyling, Tag, TagVariants } from '../../index';\r\nimport { ReactNode } from 'react';\r\n\r\nexport interface CardMiddleSectionProps {\r\n  /** Color of the band to be shown on the top of middle section. */\r\n  colorBandColor?: string;\r\n  /** Icon to be shown on the left side of the categoryLabel. */\r\n  categoryIcon?: React.ReactNode;\r\n  /** Label to be shown at the top part of the middle section. */\r\n  categoryLabel?: string;\r\n  /** Main title of the Card component. */\r\n  title: string;\r\n  /** Description of the Card. */\r\n  description?: string;\r\n  /** Tags to be shown under the description. */\r\n  tags?: CardTag[];\r\n  /** Second row of tags if needed. */\r\n  row2Tags?: CardTag[];\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n  /** Top level Id of Card component */\r\n  componentId?: string;\r\n}\r\n\r\nexport interface CardTag {\r\n  label: string;\r\n  variant?: TagVariants;\r\n  icon?: ReactNode\r\n}\r\n\r\nexport const CardMiddleSectionContainer = styled.div`\r\n  display: flex;\r\n  flex-grow: 1;\r\n  width: calc(100% - 32px);\r\n  position: relative;\r\n  flex-direction: column;\r\n  padding: 16px;\r\n  gap: 8px;\r\n\r\n  .descriptionBlock {\r\n    padding: 2px 0;\r\n  }\r\n\r\n  .titleBlock {\r\n    padding: 2px 0;\r\n  }\r\n`;\r\n\r\nexport const CardMiddleSectionColorBandStyles = styled.div<{ $color: string }>`\r\n  position: absolute;\r\n  width: 100%;\r\n  top: 0px;\r\n  left: 0px;\r\n  height: 8px;\r\n  background-color: ${(props) => props.$color};\r\n`;\r\n\r\nexport const CardMiddleSectionTagsStyles = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n  flex-wrap: wrap;\r\n`;\r\n\r\nexport const CardMiddleSectionCategoryStyles = styled.div<{ $extraTopMargin: boolean; $bottomMargin: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: none;\r\n  gap: 6px;\r\n\r\n  svg {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)};\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardMiddleSectionTitle = styled.h3<{ $disabled?: boolean }>`\r\n  ${props => ComponentXLStyling(ComponentTextStyle.Bold, props.$disabled \r\n    ? COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme)\r\n    : COLORS.generateToken({componentType:'text',defaultVariant:'default'}, props.theme)\r\n  )}\r\n`;\r\n\r\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\r\n  colorBandColor,\r\n  categoryIcon,\r\n  categoryLabel,\r\n  title,\r\n  description,\r\n  tags,\r\n  row2Tags,\r\n  disabled,\r\n  componentId\r\n}: CardMiddleSectionProps) => {\r\n  const theme = useTheme();\r\n  \r\n  return (\r\n    <CardMiddleSectionContainer data-testid={'card-middleSection'} >\r\n      {colorBandColor && <CardMiddleSectionColorBandStyles $color={colorBandColor} />}\r\n      {\r\n        (categoryIcon || categoryLabel) &&\r\n        <CardMiddleSectionCategoryStyles $extraTopMargin={Boolean(colorBandColor)} $bottomMargin={Boolean(categoryIcon || categoryLabel)}>\r\n          {categoryIcon}\r\n          <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, theme)}>\r\n            {categoryLabel}\r\n          </ComponentS>\r\n        </CardMiddleSectionCategoryStyles>\r\n      }\r\n      <CardMiddleSectionTitle \r\n        id={`${componentId}-title`} \r\n        className=\"titleBlock\"\r\n        $disabled={disabled}>\r\n        {title}\r\n      </CardMiddleSectionTitle>\r\n      {description && (\r\n        <ComponentS className=\"descriptionBlock\" color={COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, theme)}>\r\n          {description}\r\n        </ComponentS>\r\n      )}\r\n      {tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n      {row2Tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {row2Tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n    </CardMiddleSectionContainer>\r\n  );\r\n};\r\n\r\nexport default CardMiddleSection;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/CardTopSection.cjs

@@ -99,10 +99,12 @@ const CardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       height: image?.height ?? 200
     },
     children: [image && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTopSectionImageContainer, {
+      role: "none",
+      "aria-hidden": "true",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.ImageWithFallbacks, {
         fallbacks: image.fallbackSrc ?? '',
         src: image.src,
-        alt: image.alt,
+        alt: "",
         loader: image.loader ?? false,
         width: image.width,
         height: image.height
@@ -124,9 +126,16 @@ const CardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopSectionRibbonContainer, {
       "data-testid": 'card-topSection-ribbon',
       $color: highlightRibbonContentColor ?? '',
-      $backgroundColor: disabled ? _index.COLORS.getColor('neutral_300', theme) : highlightRibbonBgColor ?? '',
+      $backgroundColor: disabled ? _index.COLORS.generateToken({
+        componentType: 'bg-fill',
+        state: 'disabled'
+      }, theme) : highlightRibbonBgColor ?? '',
       children: [highlightRibbonIcon, highlightRibbonText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.ComponentS, {
-        color: highlightRibbonContentColor ?? '',
+        color: disabled ? _index.COLORS.generateToken({
+          componentType: 'text',
+          isOnFill: true,
+          state: 'disabled'
+        }, theme) : highlightRibbonContentColor ?? '',
         textStyle: _typography.ComponentTextStyle.Regular,
         children: highlightRibbonText
       })]

package/dist/Card/VerticalCard/CardTopSection.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CardTopSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_typography","_Checkbox","_interopRequireDefault","_Tag","_index","_Image","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardTopSectionImageContainer","exports","styled","div","CardTopSectionTagContainer","CardTopSectionContainer","props","disabled","CardTopSectionRibbonContainer","$backgroundColor","$color","CardTopSectionCheckboxContainer","COLORS","getColor","theme","CardTopSection","forwardRef","_ref","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","useTheme","jsxs","style","height","children","jsx","ImageWithFallbacks","fallbacks","fallbackSrc","src","alt","loader","width","select","Tag","label","variant","icon","ComponentS","color","textStyle","ComponentTextStyle","Regular","propTypes","_propTypes","bool","func","string","node","shape","isRequired","_default"],"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {ComponentS, ComponentTextStyle} from '../../styles/typography';\r\nimport Checkbox from '../../InputFields/Checkbox';\r\nimport {Tag, TagVariants} from '../../Tag';\r\n\r\nimport {COLORS} from '../../index';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport interface CardTopSectionProps {\r\n  /** Sets initial state of select Checkbox. */\r\n  selected?: boolean;\r\n  /** If this action is provided, then Checkbox will be shown on the top-right corner of the Card. */\r\n  setSelected?: (arg0: boolean) => void;\r\n  /** Label shown in the tag in the top-left corner of the Card. */\r\n  tagLabel?: string;\r\n  /** Icon shown in the tag in the top-left corner of the Card. */\r\n  tagIcon?: React.ReactNode;\r\n  /** Tag variant shown in the tag in the top-left corner of the Card. */\r\n  tagVariant?: TagVariants;\r\n  /** Text shown in the Ribbon, under the Image.  */\r\n  highlightRibbonText?: string;\r\n  /** Icon shown in the Ribbon, under the Image.  */\r\n  highlightRibbonIcon?: React.ReactNode;\r\n  /** Content color (text and image) of the Ribbon, under the Image.  */\r\n  highlightRibbonContentColor?: string;\r\n  /** Background color of the Ribbon, shown under the Image.  */\r\n  highlightRibbonBgColor?: string;\r\n  /** Details of the Image shown in the section. */\r\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n  /** This property is automatically set in the Card itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const CardTopSectionImageContainer = styled.div`\r\n  border-top-right-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  height: 100%;\r\n  width: 100%;\r\n  img{\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n    border-top-right-radius: 8px;\r\n    border-top-left-radius: 8px;\r\n  }\r\n`;\r\n\r\nexport const CardTopSectionTagContainer = styled.div`\r\n  position: absolute;\r\n\r\n  top: 16px;\r\n  left: 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nexport const CardTopSectionContainer = styled.div<{ disabled?: boolean }>`\r\n  position: relative;\r\n  width: 100%;\r\n  overflow: visible;\r\n\r\n  ${props => props.disabled ? `\r\n  img, svg {\r\n    filter: grayscale(100%);\r\n  }` : ''}\r\n`;\r\n\r\nexport const CardTopSectionRibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\r\n  min-height: calc(40px - 16px);\r\n  background-color: ${props => props.$backgroundColor};\r\n  width: calc(100% - 32px);\r\n  position: absolute;\r\n  bottom: 0px;\r\n  left: 0px;\r\n  padding: 8px 16px 8px 16px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  gap: 8px;\r\n\r\n  svg {\r\n    color: ${props => props.$color};\r\n    width: 24px;\r\n    height: 24px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardTopSectionCheckboxContainer = styled.div`\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  z-index: 1;\r\n\r\n  .checkbox-icon {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n`;\r\n\r\nconst CardTopSection = React.forwardRef(({\r\n                                           selected,\r\n                                           setSelected,\r\n                                           image,\r\n                                           tagLabel,\r\n                                           tagIcon,\r\n                                           tagVariant = 'positive',\r\n                                           highlightRibbonIcon,\r\n                                           highlightRibbonText,\r\n                                           highlightRibbonContentColor,\r\n                                           highlightRibbonBgColor,\r\n                                           disabled\r\n                                         }: CardTopSectionProps, ref: React.Ref<HTMLDivElement>) => {\r\n\r\n  const theme = useTheme();\r\n  return (\r\n    <CardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\r\n      {\r\n        image &&\r\n        <CardTopSectionImageContainer>\r\n            <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt} loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n        </CardTopSectionImageContainer>\r\n      }\r\n      {(!!selected || !!setSelected) && (\r\n        <CardTopSectionCheckboxContainer data-testid={'card-topSection-checkbox'}>\r\n          <Checkbox ref={ref}\r\n                    disabled={disabled}\r\n                    select={(selected: boolean) => setSelected && setSelected(selected)}\r\n                    selected={selected || false}/>\r\n        </CardTopSectionCheckboxContainer>\r\n      )}\r\n      {(tagLabel || tagIcon) && (\r\n        <CardTopSectionTagContainer>\r\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\r\n        </CardTopSectionTagContainer>\r\n      )}\r\n      {(highlightRibbonIcon || highlightRibbonText) && (\r\n        <CardTopSectionRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\r\n                             $backgroundColor={disabled ? COLORS.getColor('neutral_300', theme) : highlightRibbonBgColor ?? ''}>\r\n          {highlightRibbonIcon}\r\n          {highlightRibbonText && (\r\n            <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\r\n              {highlightRibbonText}\r\n            </ComponentS>\r\n          )}\r\n        </CardTopSectionRibbonContainer>\r\n      )}\r\n    </CardTopSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardTopSection;\r\n"],"mappings":";;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAF,uBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,IAAA,GAAAL,OAAA;AAEA,IAAAM,MAAA,GAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AAA+C,IAAAQ,WAAA,GAAAR,OAAA;AAAA,SAAAS,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAX,wBAAAW,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AA2BxC,MAAMW,4BAA4B,GAAAC,OAAA,CAAAD,4BAAA,GAAGE,yBAAM,CAACC,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,0BAA0B,GAAAH,OAAA,CAAAG,0BAAA,GAAGF,yBAAM,CAACC,GAAG;AACpD;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAME,uBAAuB,GAAAJ,OAAA,CAAAI,uBAAA,GAAGH,yBAAM,CAACC,GAA2B;AACzE;AACA;AACA;AACA;AACA,IAAIG,KAAK,IAAIA,KAAK,CAACC,QAAQ,GAAG;AAC9B;AACA;AACA,IAAI,GAAG,EAAE;AACT,CAAC;AAEM,MAAMC,6BAA6B,GAAAP,OAAA,CAAAO,6BAAA,GAAGN,yBAAM,CAACC,GAAiD;AACrG;AACA,sBAAsBG,KAAK,IAAIA,KAAK,CAACG,gBAAgB;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaH,KAAK,IAAIA,KAAK,CAACI,MAAM;AAClC;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,+BAA+B,GAAAV,OAAA,CAAAU,+BAAA,GAAGT,yBAAM,CAACC,GAAG;AACzD;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBG,KAAK,IAAIM,aAAM,CAACC,QAAQ,CAAC,OAAO,EAAEP,KAAK,CAACQ,KAAK,CAAC;AACtE;AACA,CAAC;AAED,MAAMC,cAAc,gBAAG9C,KAAK,CAAC+C,UAAU,CAAC,CAAAC,IAAA,EAYyBC,GAA8B,KAAK;EAAA,IAZ3D;IACEC,QAAQ;IACRC,WAAW;IACXC,KAAK;IACLC,QAAQ;IACRC,OAAO;IACPC,UAAU,GAAG,UAAU;IACvBC,mBAAmB;IACnBC,mBAAmB;IACnBC,2BAA2B;IAC3BC,sBAAsB;IACtBrB;EACmB,CAAC,GAAAU,IAAA;EAE7D,MAAMH,KAAK,GAAG,IAAAe,0BAAQ,EAAC,CAAC;EACxB,oBACE,IAAAlD,WAAA,CAAAmD,IAAA,EAACzB,uBAAuB;IAACE,QAAQ,EAAEA,QAAS;IAAC,eAAa,iBAAkB;IAACwB,KAAK,EAAE;MAACC,MAAM,EAAEX,KAAK,EAAEW,MAAM,IAAI;IAAG,CAAE;IAAAC,QAAA,GAE/GZ,KAAK,iBACL,IAAA1C,WAAA,CAAAuD,GAAA,EAAClC,4BAA4B;MAAAiC,QAAA,eACzB,IAAAtD,WAAA,CAAAuD,GAAA,EAACxD,MAAA,CAAAyD,kBAAkB;QAACC,SAAS,EAAEf,KAAK,CAACgB,WAAW,IAAI,EAAG;QAACC,GAAG,EAAEjB,KAAK,CAACiB,GAAI;QAACC,GAAG,EAAElB,KAAK,CAACkB,GAAI;QAACC,MAAM,EAAEnB,KAAK,CAACmB,MAAM,IAAI,KAAM;QAACC,KAAK,EAAEpB,KAAK,CAACoB,KAAM;QAACT,MAAM,EAAEX,KAAK,CAACW;MAAO,CAAC;IAAC,CACxI,CAAC,EAEhC,CAAC,CAAC,CAACb,QAAQ,IAAI,CAAC,CAACC,WAAW,kBAC3B,IAAAzC,WAAA,CAAAuD,GAAA,EAACvB,+BAA+B;MAAC,eAAa,0BAA2B;MAAAsB,QAAA,eACvE,IAAAtD,WAAA,CAAAuD,GAAA,EAAC5D,SAAA,CAAAY,OAAQ;QAACgC,GAAG,EAAEA,GAAI;QACTX,QAAQ,EAAEA,QAAS;QACnBmC,MAAM,EAAGvB,QAAiB,IAAKC,WAAW,IAAIA,WAAW,CAACD,QAAQ,CAAE;QACpEA,QAAQ,EAAEA,QAAQ,IAAI;MAAM,CAAC;IAAC,CACT,CAClC,EACA,CAACG,QAAQ,IAAIC,OAAO,kBACnB,IAAA5C,WAAA,CAAAuD,GAAA,EAAC9B,0BAA0B;MAAA6B,QAAA,eACzB,IAAAtD,WAAA,CAAAuD,GAAA,EAAC1D,IAAA,CAAAmE,GAAG;QAACC,KAAK,EAAEtB,QAAS;QAACuB,OAAO,EAAErB,UAAW;QAACsB,IAAI,EAAEvB;MAAQ,CAAC;IAAC,CACjC,CAC7B,EACA,CAACE,mBAAmB,IAAIC,mBAAmB,kBAC1C,IAAA/C,WAAA,CAAAmD,IAAA,EAACtB,6BAA6B;MAAC,eAAa,wBAAyB;MAACE,MAAM,EAAEiB,2BAA2B,IAAI,EAAG;MAC3FlB,gBAAgB,EAAEF,QAAQ,GAAGK,aAAM,CAACC,QAAQ,CAAC,aAAa,EAAEC,KAAK,CAAC,GAAGc,sBAAsB,IAAI,EAAG;MAAAK,QAAA,GACpHR,mBAAmB,EACnBC,mBAAmB,iBAClB,IAAA/C,WAAA,CAAAuD,GAAA,EAAC7D,WAAA,CAAA0E,UAAU;QAACC,KAAK,EAAErB,2BAA2B,IAAI,EAAG;QAACsB,SAAS,EAAEC,8BAAkB,CAACC,OAAQ;QAAAlB,QAAA,EACzFP;MAAmB,CACV,CACb;IAAA,CAC4B,CAChC;EAAA,CACsB,CAAC;AAE9B,CAAC,CAAC;AAACX,cAAA,CAAAqC,SAAA;EA1IDjC,QAAQ,EAAAkC,UAAA,CAAAnE,OAAA,CAAAoE,IAAA;EAERlC,WAAW,EAAAiC,UAAA,CAAAnE,OAAA,CAAAqE,IAAA;EAEXjC,QAAQ,EAAA+B,UAAA,CAAAnE,OAAA,CAAAsE,MAAA;EAERjC,OAAO,EAAA8B,UAAA,CAAAnE,OAAA,CAAAuE,IAAA;EAIP/B,mBAAmB,EAAA2B,UAAA,CAAAnE,OAAA,CAAAsE,MAAA;EAEnB/B,mBAAmB,EAAA4B,UAAA,CAAAnE,OAAA,CAAAuE,IAAA;EAEnB9B,2BAA2B,EAAA0B,UAAA,CAAAnE,OAAA,CAAAsE,MAAA;EAE3B5B,sBAAsB,EAAAyB,UAAA,CAAAnE,OAAA,CAAAsE,MAAA;EAEtBnC,KAAK,EAAAgC,UAAA,CAAAnE,OAAA,CAAAwE,KAAA;IAAKpB,GAAG,EAAAe,UAAA,CAAAnE,OAAA,CAAAsE,MAAA,CAAAG,UAAA;IAAUtB,WAAW,EAAAgB,UAAA,CAAAnE,OAAA,CAAAsE,MAAA;IAAWjB,GAAG,EAAAc,UAAA,CAAAnE,OAAA,CAAAsE,MAAA,CAAAG,UAAA;IAAU3B,MAAM,EAAAqB,UAAA,CAAAnE,OAAA,CAAAsE,MAAA;IAAWf,KAAK,EAAAY,UAAA,CAAAnE,OAAA,CAAAsE,MAAA;IAAWhB,MAAM,EAAAa,UAAA,CAAAnE,OAAA,CAAAoE;EAAA;EAEjG/C,QAAQ,EAAA8C,UAAA,CAAAnE,OAAA,CAAAoE;AAAA;AAAA,IAAAM,QAAA,GAAA3D,OAAA,CAAAf,OAAA,GAwHK6B,cAAc","ignoreList":[]}
+{"version":3,"file":"CardTopSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_typography","_Checkbox","_interopRequireDefault","_Tag","_index","_Image","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardTopSectionImageContainer","exports","styled","div","CardTopSectionTagContainer","CardTopSectionContainer","props","disabled","CardTopSectionRibbonContainer","$backgroundColor","$color","CardTopSectionCheckboxContainer","COLORS","getColor","theme","CardTopSection","forwardRef","_ref","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","useTheme","jsxs","style","height","children","jsx","role","ImageWithFallbacks","fallbacks","fallbackSrc","src","alt","loader","width","select","Tag","label","variant","icon","generateToken","componentType","state","ComponentS","color","isOnFill","textStyle","ComponentTextStyle","Regular","propTypes","_propTypes","bool","func","string","node","shape","isRequired","_default"],"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {ComponentS, ComponentTextStyle} from '../../styles/typography';\r\nimport Checkbox from '../../InputFields/Checkbox';\r\nimport {Tag, TagVariants} from '../../Tag';\r\n\r\nimport {COLORS} from '../../index';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport interface CardTopSectionProps {\r\n  /** Sets initial state of select Checkbox. */\r\n  selected?: boolean;\r\n  /** If this action is provided, then Checkbox will be shown on the top-right corner of the Card. */\r\n  setSelected?: (arg0: boolean) => void;\r\n  /** Label shown in the tag in the top-left corner of the Card. */\r\n  tagLabel?: string;\r\n  /** Icon shown in the tag in the top-left corner of the Card. */\r\n  tagIcon?: React.ReactNode;\r\n  /** Tag variant shown in the tag in the top-left corner of the Card. */\r\n  tagVariant?: TagVariants;\r\n  /** Text shown in the Ribbon, under the Image.  */\r\n  highlightRibbonText?: string;\r\n  /** Icon shown in the Ribbon, under the Image.  */\r\n  highlightRibbonIcon?: React.ReactNode;\r\n  /** Content color (text and image) of the Ribbon, under the Image.  */\r\n  highlightRibbonContentColor?: string;\r\n  /** Background color of the Ribbon, shown under the Image.  */\r\n  highlightRibbonBgColor?: string;\r\n  /** Details of the Image shown in the section. */\r\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n  /** This property is automatically set in the Card itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const CardTopSectionImageContainer = styled.div`\r\n  border-top-right-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  height: 100%;\r\n  width: 100%;\r\n  img{\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n    border-top-right-radius: 8px;\r\n    border-top-left-radius: 8px;\r\n  }\r\n`;\r\n\r\nexport const CardTopSectionTagContainer = styled.div`\r\n  position: absolute;\r\n\r\n  top: 16px;\r\n  left: 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nexport const CardTopSectionContainer = styled.div<{ disabled?: boolean }>`\r\n  position: relative;\r\n  width: 100%;\r\n  overflow: visible;\r\n\r\n  ${props => props.disabled ? `\r\n  img, svg {\r\n    filter: grayscale(100%);\r\n  }` : ''}\r\n`;\r\n\r\nexport const CardTopSectionRibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\r\n  min-height: calc(40px - 16px);\r\n  background-color: ${props => props.$backgroundColor};\r\n  width: calc(100% - 32px);\r\n  position: absolute;\r\n  bottom: 0px;\r\n  left: 0px;\r\n  padding: 8px 16px 8px 16px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  gap: 8px;\r\n\r\n  svg {\r\n    color: ${props => props.$color};\r\n    width: 24px;\r\n    height: 24px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardTopSectionCheckboxContainer = styled.div`\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  z-index: 1;\r\n\r\n  .checkbox-icon {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n`;\r\n\r\nconst CardTopSection = React.forwardRef(({\r\n                                           selected,\r\n                                           setSelected,\r\n                                           image,\r\n                                           tagLabel,\r\n                                           tagIcon,\r\n                                           tagVariant = 'positive',\r\n                                           highlightRibbonIcon,\r\n                                           highlightRibbonText,\r\n                                           highlightRibbonContentColor,\r\n                                           highlightRibbonBgColor,\r\n                                           disabled\r\n                                         }: CardTopSectionProps, ref: React.Ref<HTMLDivElement>) => {\r\n\r\n  const theme = useTheme();\r\n  return (\r\n    <CardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\r\n      {\r\n        image &&\r\n        <CardTopSectionImageContainer role=\"none\" aria-hidden=\"true\">\r\n            <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt=\"\" loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n        </CardTopSectionImageContainer>\r\n      }\r\n      {(!!selected || !!setSelected) && (\r\n        <CardTopSectionCheckboxContainer data-testid={'card-topSection-checkbox'}>\r\n          <Checkbox ref={ref}\r\n                    disabled={disabled}\r\n                    select={(selected: boolean) => setSelected && setSelected(selected)}\r\n                    selected={selected || false}/>\r\n        </CardTopSectionCheckboxContainer>\r\n      )}\r\n      {(tagLabel || tagIcon) && (\r\n        <CardTopSectionTagContainer>\r\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\r\n        </CardTopSectionTagContainer>\r\n      )}\r\n      {(highlightRibbonIcon || highlightRibbonText) && (\r\n        <CardTopSectionRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\r\n                             $backgroundColor={disabled ? COLORS.generateToken({componentType:'bg-fill', state:'disabled'}, theme) : highlightRibbonBgColor ?? ''}>\r\n          {highlightRibbonIcon}\r\n          {highlightRibbonText && (\r\n            <ComponentS color={disabled ? COLORS.generateToken({componentType:'text', isOnFill: true, state:'disabled'}, theme) : highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\r\n              {highlightRibbonText}\r\n            </ComponentS>\r\n          )}\r\n        </CardTopSectionRibbonContainer>\r\n      )}\r\n    </CardTopSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardTopSection;\r\n"],"mappings":";;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAF,uBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,IAAA,GAAAL,OAAA;AAEA,IAAAM,MAAA,GAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AAA+C,IAAAQ,WAAA,GAAAR,OAAA;AAAA,SAAAS,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAX,wBAAAW,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AA2BxC,MAAMW,4BAA4B,GAAAC,OAAA,CAAAD,4BAAA,GAAGE,yBAAM,CAACC,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,0BAA0B,GAAAH,OAAA,CAAAG,0BAAA,GAAGF,yBAAM,CAACC,GAAG;AACpD;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAME,uBAAuB,GAAAJ,OAAA,CAAAI,uBAAA,GAAGH,yBAAM,CAACC,GAA2B;AACzE;AACA;AACA;AACA;AACA,IAAIG,KAAK,IAAIA,KAAK,CAACC,QAAQ,GAAG;AAC9B;AACA;AACA,IAAI,GAAG,EAAE;AACT,CAAC;AAEM,MAAMC,6BAA6B,GAAAP,OAAA,CAAAO,6BAAA,GAAGN,yBAAM,CAACC,GAAiD;AACrG;AACA,sBAAsBG,KAAK,IAAIA,KAAK,CAACG,gBAAgB;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaH,KAAK,IAAIA,KAAK,CAACI,MAAM;AAClC;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,+BAA+B,GAAAV,OAAA,CAAAU,+BAAA,GAAGT,yBAAM,CAACC,GAAG;AACzD;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBG,KAAK,IAAIM,aAAM,CAACC,QAAQ,CAAC,OAAO,EAAEP,KAAK,CAACQ,KAAK,CAAC;AACtE;AACA,CAAC;AAED,MAAMC,cAAc,gBAAG9C,KAAK,CAAC+C,UAAU,CAAC,CAAAC,IAAA,EAYyBC,GAA8B,KAAK;EAAA,IAZ3D;IACEC,QAAQ;IACRC,WAAW;IACXC,KAAK;IACLC,QAAQ;IACRC,OAAO;IACPC,UAAU,GAAG,UAAU;IACvBC,mBAAmB;IACnBC,mBAAmB;IACnBC,2BAA2B;IAC3BC,sBAAsB;IACtBrB;EACmB,CAAC,GAAAU,IAAA;EAE7D,MAAMH,KAAK,GAAG,IAAAe,0BAAQ,EAAC,CAAC;EACxB,oBACE,IAAAlD,WAAA,CAAAmD,IAAA,EAACzB,uBAAuB;IAACE,QAAQ,EAAEA,QAAS;IAAC,eAAa,iBAAkB;IAACwB,KAAK,EAAE;MAACC,MAAM,EAAEX,KAAK,EAAEW,MAAM,IAAI;IAAG,CAAE;IAAAC,QAAA,GAE/GZ,KAAK,iBACL,IAAA1C,WAAA,CAAAuD,GAAA,EAAClC,4BAA4B;MAACmC,IAAI,EAAC,MAAM;MAAC,eAAY,MAAM;MAAAF,QAAA,eACxD,IAAAtD,WAAA,CAAAuD,GAAA,EAACxD,MAAA,CAAA0D,kBAAkB;QAACC,SAAS,EAAEhB,KAAK,CAACiB,WAAW,IAAI,EAAG;QAACC,GAAG,EAAElB,KAAK,CAACkB,GAAI;QAACC,GAAG,EAAC,EAAE;QAACC,MAAM,EAAEpB,KAAK,CAACoB,MAAM,IAAI,KAAM;QAACC,KAAK,EAAErB,KAAK,CAACqB,KAAM;QAACV,MAAM,EAAEX,KAAK,CAACW;MAAO,CAAC;IAAC,CAC/H,CAAC,EAEhC,CAAC,CAAC,CAACb,QAAQ,IAAI,CAAC,CAACC,WAAW,kBAC3B,IAAAzC,WAAA,CAAAuD,GAAA,EAACvB,+BAA+B;MAAC,eAAa,0BAA2B;MAAAsB,QAAA,eACvE,IAAAtD,WAAA,CAAAuD,GAAA,EAAC5D,SAAA,CAAAY,OAAQ;QAACgC,GAAG,EAAEA,GAAI;QACTX,QAAQ,EAAEA,QAAS;QACnBoC,MAAM,EAAGxB,QAAiB,IAAKC,WAAW,IAAIA,WAAW,CAACD,QAAQ,CAAE;QACpEA,QAAQ,EAAEA,QAAQ,IAAI;MAAM,CAAC;IAAC,CACT,CAClC,EACA,CAACG,QAAQ,IAAIC,OAAO,kBACnB,IAAA5C,WAAA,CAAAuD,GAAA,EAAC9B,0BAA0B;MAAA6B,QAAA,eACzB,IAAAtD,WAAA,CAAAuD,GAAA,EAAC1D,IAAA,CAAAoE,GAAG;QAACC,KAAK,EAAEvB,QAAS;QAACwB,OAAO,EAAEtB,UAAW;QAACuB,IAAI,EAAExB;MAAQ,CAAC;IAAC,CACjC,CAC7B,EACA,CAACE,mBAAmB,IAAIC,mBAAmB,kBAC1C,IAAA/C,WAAA,CAAAmD,IAAA,EAACtB,6BAA6B;MAAC,eAAa,wBAAyB;MAACE,MAAM,EAAEiB,2BAA2B,IAAI,EAAG;MAC3FlB,gBAAgB,EAAEF,QAAQ,GAAGK,aAAM,CAACoC,aAAa,CAAC;QAACC,aAAa,EAAC,SAAS;QAAEC,KAAK,EAAC;MAAU,CAAC,EAAEpC,KAAK,CAAC,GAAGc,sBAAsB,IAAI,EAAG;MAAAK,QAAA,GACvJR,mBAAmB,EACnBC,mBAAmB,iBAClB,IAAA/C,WAAA,CAAAuD,GAAA,EAAC7D,WAAA,CAAA8E,UAAU;QAACC,KAAK,EAAE7C,QAAQ,GAAGK,aAAM,CAACoC,aAAa,CAAC;UAACC,aAAa,EAAC,MAAM;UAAEI,QAAQ,EAAE,IAAI;UAAEH,KAAK,EAAC;QAAU,CAAC,EAAEpC,KAAK,CAAC,GAAGa,2BAA2B,IAAI,EAAG;QAAC2B,SAAS,EAAEC,8BAAkB,CAACC,OAAQ;QAAAvB,QAAA,EAC5LP;MAAmB,CACV,CACb;IAAA,CAC4B,CAChC;EAAA,CACsB,CAAC;AAE9B,CAAC,CAAC;AAACX,cAAA,CAAA0C,SAAA;EA1IDtC,QAAQ,EAAAuC,UAAA,CAAAxE,OAAA,CAAAyE,IAAA;EAERvC,WAAW,EAAAsC,UAAA,CAAAxE,OAAA,CAAA0E,IAAA;EAEXtC,QAAQ,EAAAoC,UAAA,CAAAxE,OAAA,CAAA2E,MAAA;EAERtC,OAAO,EAAAmC,UAAA,CAAAxE,OAAA,CAAA4E,IAAA;EAIPpC,mBAAmB,EAAAgC,UAAA,CAAAxE,OAAA,CAAA2E,MAAA;EAEnBpC,mBAAmB,EAAAiC,UAAA,CAAAxE,OAAA,CAAA4E,IAAA;EAEnBnC,2BAA2B,EAAA+B,UAAA,CAAAxE,OAAA,CAAA2E,MAAA;EAE3BjC,sBAAsB,EAAA8B,UAAA,CAAAxE,OAAA,CAAA2E,MAAA;EAEtBxC,KAAK,EAAAqC,UAAA,CAAAxE,OAAA,CAAA6E,KAAA;IAAKxB,GAAG,EAAAmB,UAAA,CAAAxE,OAAA,CAAA2E,MAAA,CAAAG,UAAA;IAAU1B,WAAW,EAAAoB,UAAA,CAAAxE,OAAA,CAAA2E,MAAA;IAAWrB,GAAG,EAAAkB,UAAA,CAAAxE,OAAA,CAAA2E,MAAA,CAAAG,UAAA;IAAUhC,MAAM,EAAA0B,UAAA,CAAAxE,OAAA,CAAA2E,MAAA;IAAWnB,KAAK,EAAAgB,UAAA,CAAAxE,OAAA,CAAA2E,MAAA;IAAWpB,MAAM,EAAAiB,UAAA,CAAAxE,OAAA,CAAAyE;EAAA;EAEjGpD,QAAQ,EAAAmD,UAAA,CAAAxE,OAAA,CAAAyE;AAAA;AAAA,IAAAM,QAAA,GAAAhE,OAAA,CAAAf,OAAA,GAwHK6B,cAAc","ignoreList":[]}

package/dist/Card/VerticalCard/CardTopSection.js

@@ -90,10 +90,12 @@ const CardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       height: image?.height ?? 200
     },
     children: [image && /*#__PURE__*/_jsx(CardTopSectionImageContainer, {
+      role: "none",
+      "aria-hidden": "true",
       children: /*#__PURE__*/_jsx(ImageWithFallbacks, {
         fallbacks: image.fallbackSrc ?? '',
         src: image.src,
-        alt: image.alt,
+        alt: "",
         loader: image.loader ?? false,
         width: image.width,
         height: image.height
@@ -115,9 +117,16 @@ const CardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/_jsxs(CardTopSectionRibbonContainer, {
       "data-testid": 'card-topSection-ribbon',
       $color: highlightRibbonContentColor ?? '',
-      $backgroundColor: disabled ? COLORS.getColor('neutral_300', theme) : highlightRibbonBgColor ?? '',
+      $backgroundColor: disabled ? COLORS.generateToken({
+        componentType: 'bg-fill',
+        state: 'disabled'
+      }, theme) : highlightRibbonBgColor ?? '',
       children: [highlightRibbonIcon, highlightRibbonText && /*#__PURE__*/_jsx(ComponentS, {
-        color: highlightRibbonContentColor ?? '',
+        color: disabled ? COLORS.generateToken({
+          componentType: 'text',
+          isOnFill: true,
+          state: 'disabled'
+        }, theme) : highlightRibbonContentColor ?? '',
         textStyle: ComponentTextStyle.Regular,
         children: highlightRibbonText
       })]

package/dist/Card/VerticalCard/CardTopSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardTopSection.js","names":["React","styled","useTheme","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","ImageWithFallbacks","jsx","_jsx","jsxs","_jsxs","CardTopSectionImageContainer","div","CardTopSectionTagContainer","CardTopSectionContainer","props","disabled","CardTopSectionRibbonContainer","$backgroundColor","$color","CardTopSectionCheckboxContainer","getColor","theme","CardTopSection","forwardRef","_ref","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","style","height","children","fallbacks","fallbackSrc","src","alt","loader","width","select","label","variant","icon","color","textStyle","Regular","propTypes","_pt","bool","func","string","node","shape","isRequired"],"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {ComponentS, ComponentTextStyle} from '../../styles/typography';\r\nimport Checkbox from '../../InputFields/Checkbox';\r\nimport {Tag, TagVariants} from '../../Tag';\r\n\r\nimport {COLORS} from '../../index';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport interface CardTopSectionProps {\r\n  /** Sets initial state of select Checkbox. */\r\n  selected?: boolean;\r\n  /** If this action is provided, then Checkbox will be shown on the top-right corner of the Card. */\r\n  setSelected?: (arg0: boolean) => void;\r\n  /** Label shown in the tag in the top-left corner of the Card. */\r\n  tagLabel?: string;\r\n  /** Icon shown in the tag in the top-left corner of the Card. */\r\n  tagIcon?: React.ReactNode;\r\n  /** Tag variant shown in the tag in the top-left corner of the Card. */\r\n  tagVariant?: TagVariants;\r\n  /** Text shown in the Ribbon, under the Image.  */\r\n  highlightRibbonText?: string;\r\n  /** Icon shown in the Ribbon, under the Image.  */\r\n  highlightRibbonIcon?: React.ReactNode;\r\n  /** Content color (text and image) of the Ribbon, under the Image.  */\r\n  highlightRibbonContentColor?: string;\r\n  /** Background color of the Ribbon, shown under the Image.  */\r\n  highlightRibbonBgColor?: string;\r\n  /** Details of the Image shown in the section. */\r\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n  /** This property is automatically set in the Card itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const CardTopSectionImageContainer = styled.div`\r\n  border-top-right-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  height: 100%;\r\n  width: 100%;\r\n  img{\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n    border-top-right-radius: 8px;\r\n    border-top-left-radius: 8px;\r\n  }\r\n`;\r\n\r\nexport const CardTopSectionTagContainer = styled.div`\r\n  position: absolute;\r\n\r\n  top: 16px;\r\n  left: 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nexport const CardTopSectionContainer = styled.div<{ disabled?: boolean }>`\r\n  position: relative;\r\n  width: 100%;\r\n  overflow: visible;\r\n\r\n  ${props => props.disabled ? `\r\n  img, svg {\r\n    filter: grayscale(100%);\r\n  }` : ''}\r\n`;\r\n\r\nexport const CardTopSectionRibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\r\n  min-height: calc(40px - 16px);\r\n  background-color: ${props => props.$backgroundColor};\r\n  width: calc(100% - 32px);\r\n  position: absolute;\r\n  bottom: 0px;\r\n  left: 0px;\r\n  padding: 8px 16px 8px 16px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  gap: 8px;\r\n\r\n  svg {\r\n    color: ${props => props.$color};\r\n    width: 24px;\r\n    height: 24px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardTopSectionCheckboxContainer = styled.div`\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  z-index: 1;\r\n\r\n  .checkbox-icon {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n`;\r\n\r\nconst CardTopSection = React.forwardRef(({\r\n                                           selected,\r\n                                           setSelected,\r\n                                           image,\r\n                                           tagLabel,\r\n                                           tagIcon,\r\n                                           tagVariant = 'positive',\r\n                                           highlightRibbonIcon,\r\n                                           highlightRibbonText,\r\n                                           highlightRibbonContentColor,\r\n                                           highlightRibbonBgColor,\r\n                                           disabled\r\n                                         }: CardTopSectionProps, ref: React.Ref<HTMLDivElement>) => {\r\n\r\n  const theme = useTheme();\r\n  return (\r\n    <CardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\r\n      {\r\n        image &&\r\n        <CardTopSectionImageContainer>\r\n            <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt} loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n        </CardTopSectionImageContainer>\r\n      }\r\n      {(!!selected || !!setSelected) && (\r\n        <CardTopSectionCheckboxContainer data-testid={'card-topSection-checkbox'}>\r\n          <Checkbox ref={ref}\r\n                    disabled={disabled}\r\n                    select={(selected: boolean) => setSelected && setSelected(selected)}\r\n                    selected={selected || false}/>\r\n        </CardTopSectionCheckboxContainer>\r\n      )}\r\n      {(tagLabel || tagIcon) && (\r\n        <CardTopSectionTagContainer>\r\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\r\n        </CardTopSectionTagContainer>\r\n      )}\r\n      {(highlightRibbonIcon || highlightRibbonText) && (\r\n        <CardTopSectionRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\r\n                             $backgroundColor={disabled ? COLORS.getColor('neutral_300', theme) : highlightRibbonBgColor ?? ''}>\r\n          {highlightRibbonIcon}\r\n          {highlightRibbonText && (\r\n            <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\r\n              {highlightRibbonText}\r\n            </ComponentS>\r\n          )}\r\n        </CardTopSectionRibbonContainer>\r\n      )}\r\n    </CardTopSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardTopSection;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CardTopSection.js","names":["React","styled","useTheme","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","ImageWithFallbacks","jsx","_jsx","jsxs","_jsxs","CardTopSectionImageContainer","div","CardTopSectionTagContainer","CardTopSectionContainer","props","disabled","CardTopSectionRibbonContainer","$backgroundColor","$color","CardTopSectionCheckboxContainer","getColor","theme","CardTopSection","forwardRef","_ref","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","style","height","children","role","fallbacks","fallbackSrc","src","alt","loader","width","select","label","variant","icon","generateToken","componentType","state","color","isOnFill","textStyle","Regular","propTypes","_pt","bool","func","string","node","shape","isRequired"],"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {ComponentS, ComponentTextStyle} from '../../styles/typography';\r\nimport Checkbox from '../../InputFields/Checkbox';\r\nimport {Tag, TagVariants} from '../../Tag';\r\n\r\nimport {COLORS} from '../../index';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport interface CardTopSectionProps {\r\n  /** Sets initial state of select Checkbox. */\r\n  selected?: boolean;\r\n  /** If this action is provided, then Checkbox will be shown on the top-right corner of the Card. */\r\n  setSelected?: (arg0: boolean) => void;\r\n  /** Label shown in the tag in the top-left corner of the Card. */\r\n  tagLabel?: string;\r\n  /** Icon shown in the tag in the top-left corner of the Card. */\r\n  tagIcon?: React.ReactNode;\r\n  /** Tag variant shown in the tag in the top-left corner of the Card. */\r\n  tagVariant?: TagVariants;\r\n  /** Text shown in the Ribbon, under the Image.  */\r\n  highlightRibbonText?: string;\r\n  /** Icon shown in the Ribbon, under the Image.  */\r\n  highlightRibbonIcon?: React.ReactNode;\r\n  /** Content color (text and image) of the Ribbon, under the Image.  */\r\n  highlightRibbonContentColor?: string;\r\n  /** Background color of the Ribbon, shown under the Image.  */\r\n  highlightRibbonBgColor?: string;\r\n  /** Details of the Image shown in the section. */\r\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n  /** This property is automatically set in the Card itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const CardTopSectionImageContainer = styled.div`\r\n  border-top-right-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  height: 100%;\r\n  width: 100%;\r\n  img{\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n    border-top-right-radius: 8px;\r\n    border-top-left-radius: 8px;\r\n  }\r\n`;\r\n\r\nexport const CardTopSectionTagContainer = styled.div`\r\n  position: absolute;\r\n\r\n  top: 16px;\r\n  left: 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nexport const CardTopSectionContainer = styled.div<{ disabled?: boolean }>`\r\n  position: relative;\r\n  width: 100%;\r\n  overflow: visible;\r\n\r\n  ${props => props.disabled ? `\r\n  img, svg {\r\n    filter: grayscale(100%);\r\n  }` : ''}\r\n`;\r\n\r\nexport const CardTopSectionRibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\r\n  min-height: calc(40px - 16px);\r\n  background-color: ${props => props.$backgroundColor};\r\n  width: calc(100% - 32px);\r\n  position: absolute;\r\n  bottom: 0px;\r\n  left: 0px;\r\n  padding: 8px 16px 8px 16px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  gap: 8px;\r\n\r\n  svg {\r\n    color: ${props => props.$color};\r\n    width: 24px;\r\n    height: 24px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardTopSectionCheckboxContainer = styled.div`\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  z-index: 1;\r\n\r\n  .checkbox-icon {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n`;\r\n\r\nconst CardTopSection = React.forwardRef(({\r\n                                           selected,\r\n                                           setSelected,\r\n                                           image,\r\n                                           tagLabel,\r\n                                           tagIcon,\r\n                                           tagVariant = 'positive',\r\n                                           highlightRibbonIcon,\r\n                                           highlightRibbonText,\r\n                                           highlightRibbonContentColor,\r\n                                           highlightRibbonBgColor,\r\n                                           disabled\r\n                                         }: CardTopSectionProps, ref: React.Ref<HTMLDivElement>) => {\r\n\r\n  const theme = useTheme();\r\n  return (\r\n    <CardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\r\n      {\r\n        image &&\r\n        <CardTopSectionImageContainer role=\"none\" aria-hidden=\"true\">\r\n            <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt=\"\" loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n        </CardTopSectionImageContainer>\r\n      }\r\n      {(!!selected || !!setSelected) && (\r\n        <CardTopSectionCheckboxContainer data-testid={'card-topSection-checkbox'}>\r\n          <Checkbox ref={ref}\r\n                    disabled={disabled}\r\n                    select={(selected: boolean) => setSelected && setSelected(selected)}\r\n                    selected={selected || false}/>\r\n        </CardTopSectionCheckboxContainer>\r\n      )}\r\n      {(tagLabel || tagIcon) && (\r\n        <CardTopSectionTagContainer>\r\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\r\n        </CardTopSectionTagContainer>\r\n      )}\r\n      {(highlightRibbonIcon || highlightRibbonText) && (\r\n        <CardTopSectionRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\r\n                             $backgroundColor={disabled ? COLORS.generateToken({componentType:'bg-fill', state:'disabled'}, theme) : highlightRibbonBgColor ?? ''}>\r\n          {highlightRibbonIcon}\r\n          {highlightRibbonText && (\r\n            <ComponentS color={disabled ? COLORS.generateToken({componentType:'text', isOnFill: true, state:'disabled'}, theme) : highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\r\n              {highlightRibbonText}\r\n            </ComponentS>\r\n          )}\r\n        </CardTopSectionRibbonContainer>\r\n      )}\r\n    </CardTopSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardTopSection;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/__tests__/Card.test.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import { fireEvent, getByRole, render } from '../../test-utils';
+import 'jest-styled-components';
+import { Card } from '../..';
+import { COLORS } from '../../styles';
+import { SystemIcons } from '../../icons';
+
+describe('<Card />',()=>{
+    it('renders top section', async () => {
+        const{getByTestId} = render(
+            <Card topSectionProps={{disabled: false}} disabled/>
+        );
+
+        expect(getByTestId('card-topSection')).toBeDefined();
+        //expect(getByTestId('card-middleSection')).toBeDefined();
+    });
+
+    it('renders middle section', async () => {
+        const{getByTestId} = render(
+            <Card middleSectionProps={{title:'title',disabled:false}} disabled/>
+        );
+
+        expect(getByTestId('card-middleSection')).toBeDefined();
+    });
+
+    it('renders bottom section', async () => {
+        const{getByTestId} = render(
+            <Card bottomSectionProps={{disabled:false}} disabled/>
+        );
+
+        expect(getByTestId('card-bottomSection')).toBeDefined();
+    });
+
+    it('fires card clicked event on click', async () => {
+        const cardClicked = jest.fn();
+        const{getByTestId} = render(
+            <Card bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
+        );
+
+        fireEvent.click(getByTestId('card-link'));
+        expect(cardClicked).toHaveBeenCalled();
+    });
+
+    it('fires card clicked event on keyDown', async () => {
+        const cardClicked = jest.fn();
+        const{getByTestId} = render(
+            <Card bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
+        );
+
+        fireEvent.keyDown(getByTestId('card-wrapper'), {key: 'Enter', code: 'Enter', charCode: 13});
+        expect(cardClicked).toHaveBeenCalled();
+    });
+
+    it('renders tag in top section', async () => {
+        const{getByText} = render(
+            <Card topSectionProps={{disabled: false, tagLabel:'test_label'}} disabled/>
+        );
+
+        expect(getByText('test_label')).toBeDefined();
+    });
+
+    it('renders checkbox in top section', async () => {
+        const{getByTestId} = render(
+            <Card topSectionProps={{disabled: false, selected: true}} disabled/>
+        );
+
+        expect(getByTestId('card-topSection-checkbox')).toBeDefined();
+    });
+
+    it('renders highlight ribbon in top section', async () => {
+        const{getByTestId, getByText} = render(
+            <Card topSectionProps={{disabled: false, highlightRibbonText:'testRibbon', highlightRibbonBgColor:'red'}} disabled={false}/>
+        );
+
+        expect(getByText('testRibbon')).toBeDefined();
+        expect(getByTestId('card-topSection-ribbon')).toHaveStyleRule('background-color','red');
+    });
+
+    it('renders title ,description and category label in middle section', async () => {
+        const{getByText} = render(
+            <Card middleSectionProps={{title:'testTitle', disabled: false, description:'testDescription', categoryLabel:'testCatLabel'}} disabled={false}/>
+        );
+
+        expect(getByText('testTitle')).toBeDefined();
+        expect(getByText('testDescription')).toBeDefined();
+        expect(getByText('testCatLabel')).toBeDefined();
+    });
+
+    it('renders tags in middle section', async () => {
+        const{getByText} = render(
+            <Card middleSectionProps={{title:'testTitle', disabled: false, tags:[{label:'testTag'}], row2Tags:[{label:'testTag2'}]}} disabled={false}/>
+        );
+
+        expect(getByText('testTitle')).toBeDefined();
+        expect(getByText('testTag2')).toBeDefined();
+    });
+
+    it('renders note text in bottom section', async () => {
+        const{getByText} = render(
+            <Card bottomSectionProps={{disabled: false, noteLeft:'leftNote', noteRight:'rightNote'}} disabled={false}/>
+        );
+
+        expect(getByText('leftNote')).toBeDefined();
+        expect(getByText('rightNote')).toBeDefined();
+    });
+
+    it('renders author in bottom section', async () => {
+        const{getByText,getByTestId} = render(
+            <Card bottomSectionProps={{disabled: true, authorName:'testAuthor'}} disabled={true}/>
+        );
+
+        expect(getByText('testAuthor')).toBeDefined();
+        expect(getByTestId('card-bottomSection-author')).toBeDefined();
+    });
+
+    it('renders actions in bottom section', async () => {
+        const{getByText,getByTestId} = render(
+            <Card bottomSectionProps={{disabled: true, authorName:'testAuthor', actions:[{icon:<SystemIcons.Add/>,onClick:()=>{}}]}} disabled={true}/>
+        );
+
+        expect(getByText('testAuthor')).toBeDefined();
+        expect(getByTestId('card-bottomSection-author')).toBeDefined();
+    });
+
+    it('fires leftButton click event on click', async () => {
+        const leftButtonClicked = jest.fn();
+        const{getByRole} = render(
+            <Card bottomSectionProps={{disabled: true, 
+                authorName:'testAuthor', 
+                actions:[],
+                leftButton: {
+                    variant: 'tertiary',
+                    buttonText: 'button',
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      leftButtonClicked();
+                    }
+                  }
+                }} 
+            disabled={true}/>
+        );
+
+        fireEvent.click(getByRole('button'));
+        expect(leftButtonClicked).toBeCalledTimes(1);
+    });
+})

package/dist/Chips/ChipStyles.cjs

@@ -149,7 +149,10 @@ const ChipContainer = exports.ChipContainer = _styledComponents.default.div`
   }
 
   &.outline {
-    color: ${props => _styles.COLORS.getColor('neutral_600', props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
 
     ${ChipContent} {
       background-color: ${props => _styles.COLORS.getColor('white', props.theme)};

package/dist/Chips/ChipStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChipStyles.cjs","names":["_styledComponents","_interopRequireDefault","require","_styles","ChipContentContainer","exports","styled","div","ChipContent","ComponentXSStyling","ComponentTextStyle","Bold","ChipContainer","ComponentSStyling","ComponentMStyling","focusStyles","props","COLORS","getColor","theme"],"sources":["../../src/Chips/ChipStyles.ts"],"sourcesContent":["/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\n\r\n/**\r\n * Import custom style properties.\r\n */\r\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';\r\n\r\nexport const ChipContentContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  min-height: 48px;\r\n  width: max-content;\r\n`;\r\n\r\nexport const ChipContent = styled.div`\r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n\r\n  position: relative;\r\n  display: flex;\r\n  gap: 4px;\r\n  align-items: center;\r\n  min-height: 24px;\r\n  box-sizing: border-box;\r\n  border-radius: 24px;\r\n  padding: 4px 12px;\r\n\r\n  .chip-icon {\r\n    height: 16px;\r\n    width: 16px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      height: 16px;\r\n      width: 16px;\r\n    }\r\n  }\r\n\r\n  .icon-left {\r\n    margin-left: -4px;\r\n  }\r\n\r\n  .icon-right {\r\n    margin-right: -4px;\r\n  }\r\n\r\n  .action-right {\r\n    position: absolute;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    height: 48px;\r\n    width: 48px;\r\n    right: -8px;\r\n  }\r\n\r\n  &.with-action-right {\r\n    position: relative;\r\n    padding-right: 28px;\r\n  }\r\n`;\r\n\r\nexport const ChipContainer = styled.div`\r\n  display: inline-block;\r\n  cursor: pointer;\r\n  position: relative;\r\n\r\n  &.medium {\r\n    ${ChipContent} {\r\n      gap: 6px;\r\n      padding: 10px 16px;\r\n\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      .chip-icon {\r\n        height: 20px;\r\n        width: 20px;\r\n\r\n        svg {\r\n          height: 20px;\r\n          width: 20px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .with-action-right {\r\n      padding-right: 38px;\r\n\r\n      .action-right {\r\n        right: -2px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ChipContent} {\r\n      gap: 8px;\r\n      padding: 12px 20px;\r\n\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      .chip-icon {\r\n        height: 24px;\r\n        width: 24px;\r\n\r\n        svg {\r\n          height: 24px;\r\n          width: 24px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .with-action-right {\r\n      padding-right: 48px;\r\n\r\n      .action-right {\r\n        right: 4px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.default {\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.outline {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('primary_200', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('primary_300', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      box-shadow: none;\r\n    }\r\n  }\r\n\r\n  //account for border\r\n  &.small.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 2px 10px;\r\n    }\r\n  }\r\n\r\n  &.medium.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 8px 14px;\r\n    }\r\n  }\r\n\r\n  &.large.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 10px 18px;\r\n    }\r\n  }\r\n\r\n  &.invalid {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('critical_100', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${props => COLORS.getColor('critical_200', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${props => COLORS.getColor('critical_300', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  .action-right:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  .action-right:hover .chip-icon {\r\n    background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  .action-right:active .chip-icon {\r\n    background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  .action-right.disabled .chip-icon {\r\n    background-color: transparent;\r\n    color: ${props => COLORS.getColor('primary_300', props.theme)};\r\n  }\r\n\r\n  &.invalid {\r\n    .action-right:hover .chip-icon {\r\n      background-color: ${props => COLORS.getColor('critical_200', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_700', props.theme)};\r\n    }\r\n\r\n    .action-right:active .chip-icon {\r\n      background-color: ${props => COLORS.getColor('critical_300', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_800', props.theme)};\r\n    }\r\n\r\n    .action-right.disabled .chip-icon {\r\n      background-color: transparent;\r\n      color: ${props => COLORS.getColor('primary_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    ${ChipContentContainer} {\r\n      pointer-events: none;\r\n    }\r\n\r\n    ${ChipContent} {\r\n      border: none !important;\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    }\r\n  }\r\n`;\r\n"],"mappings":";;;;;;;AAGA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,OAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGO,MAAME,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC9C;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,WAAW,GAAAH,OAAA,CAAAG,WAAA,GAAGF,yBAAM,CAACC,GAAG;AACrC,IAAI,IAAAE,0BAAkB,EAACC,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,aAAa,GAAAP,OAAA,CAAAO,aAAA,GAAGN,yBAAM,CAACC,GAAG;AACvC;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAW;AACjB;AACA;AACA;AACA,QAAQ,IAAAK,yBAAiB,EAACH,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMH,WAAW;AACjB;AACA;AACA;AACA,QAAQ,IAAAM,yBAAiB,EAACJ,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMI,mBAAW;AACjB;AACA;AACA;AACA,aAAaC,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC3D;AACA,MAAMX,WAAW;AACjB,0BAA0BQ,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E;AACA;AACA;AACA;AACA,MAAMX,WAAW;AACjB,0BAA0BQ,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E;AACA;AACA;AACA;AACA,MAAMX,WAAW;AACjB,0BAA0BQ,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E;AACA;AACA;AACA;AACA,aAAaH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA,MAAMX,WAAW;AACjB,0BAA0BQ,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AACxE,0BAA0BH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E;AACA;AACA;AACA;AACA,MAAMX,WAAW;AACjB,0BAA0BQ,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC7E,0BAA0BH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACnE;AACA;AACA;AACA;AACA,MAAMX,WAAW;AACjB,0BAA0BQ,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E,0BAA0BH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,MAAMX,WAAW;AACjB;AACA;AACA;AACA;AACA;AACA,MAAMA,WAAW;AACjB;AACA;AACA;AACA;AACA;AACA,MAAMA,WAAW;AACjB;AACA;AACA;AACA;AACA;AACA,MAAMA,WAAW;AACjB,0BAA0BQ,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC/E,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC;AACpE;AACA;AACA;AACA;AACA,MAAMX,WAAW;AACjB,oBAAoBQ,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC;AACzE,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC;AACpE;AACA;AACA;AACA;AACA,MAAMX,WAAW;AACjB,oBAAoBQ,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC;AACzE,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC;AACpE;AACA;AACA;AACA;AACA,MAAMJ,mBAAW;AACjB;AACA;AACA;AACA,wBAAwBC,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC5E;AACA;AACA;AACA,wBAAwBH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC5E;AACA;AACA;AACA;AACA,aAAaH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA,0BAA0BH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC/E,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC;AACpE;AACA;AACA;AACA,0BAA0BH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC/E,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC;AACpE;AACA;AACA;AACA;AACA,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,MAAMf,oBAAoB;AAC1B;AACA;AACA;AACA,MAAMI,WAAW;AACjB;AACA,0BAA0BQ,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACnE;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"ChipStyles.cjs","names":["_styledComponents","_interopRequireDefault","require","_styles","ChipContentContainer","exports","styled","div","ChipContent","ComponentXSStyling","ComponentTextStyle","Bold","ChipContainer","ComponentSStyling","ComponentMStyling","focusStyles","props","COLORS","getColor","theme","generateToken","componentType","defaultVariant"],"sources":["../../src/Chips/ChipStyles.ts"],"sourcesContent":["/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\n\r\n/**\r\n * Import custom style properties.\r\n */\r\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';\r\n\r\nexport const ChipContentContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  min-height: 48px;\r\n  width: max-content;\r\n`;\r\n\r\nexport const ChipContent = styled.div`\r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n\r\n  position: relative;\r\n  display: flex;\r\n  gap: 4px;\r\n  align-items: center;\r\n  min-height: 24px;\r\n  box-sizing: border-box;\r\n  border-radius: 24px;\r\n  padding: 4px 12px;\r\n\r\n  .chip-icon {\r\n    height: 16px;\r\n    width: 16px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      height: 16px;\r\n      width: 16px;\r\n    }\r\n  }\r\n\r\n  .icon-left {\r\n    margin-left: -4px;\r\n  }\r\n\r\n  .icon-right {\r\n    margin-right: -4px;\r\n  }\r\n\r\n  .action-right {\r\n    position: absolute;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    height: 48px;\r\n    width: 48px;\r\n    right: -8px;\r\n  }\r\n\r\n  &.with-action-right {\r\n    position: relative;\r\n    padding-right: 28px;\r\n  }\r\n`;\r\n\r\nexport const ChipContainer = styled.div`\r\n  display: inline-block;\r\n  cursor: pointer;\r\n  position: relative;\r\n\r\n  &.medium {\r\n    ${ChipContent} {\r\n      gap: 6px;\r\n      padding: 10px 16px;\r\n\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      .chip-icon {\r\n        height: 20px;\r\n        width: 20px;\r\n\r\n        svg {\r\n          height: 20px;\r\n          width: 20px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .with-action-right {\r\n      padding-right: 38px;\r\n\r\n      .action-right {\r\n        right: -2px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ChipContent} {\r\n      gap: 8px;\r\n      padding: 12px 20px;\r\n\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      .chip-icon {\r\n        height: 24px;\r\n        width: 24px;\r\n\r\n        svg {\r\n          height: 24px;\r\n          width: 24px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .with-action-right {\r\n      padding-right: 48px;\r\n\r\n      .action-right {\r\n        right: 4px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.default {\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.outline {\r\n    color: ${props => COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme)};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('primary_200', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('primary_300', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      box-shadow: none;\r\n    }\r\n  }\r\n\r\n  //account for border\r\n  &.small.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 2px 10px;\r\n    }\r\n  }\r\n\r\n  &.medium.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 8px 14px;\r\n    }\r\n  }\r\n\r\n  &.large.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 10px 18px;\r\n    }\r\n  }\r\n\r\n  &.invalid {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('critical_100', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${props => COLORS.getColor('critical_200', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${props => COLORS.getColor('critical_300', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  .action-right:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  .action-right:hover .chip-icon {\r\n    background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  .action-right:active .chip-icon {\r\n    background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  .action-right.disabled .chip-icon {\r\n    background-color: transparent;\r\n    color: ${props => COLORS.getColor('primary_300', props.theme)};\r\n  }\r\n\r\n  &.invalid {\r\n    .action-right:hover .chip-icon {\r\n      background-color: ${props => COLORS.getColor('critical_200', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_700', props.theme)};\r\n    }\r\n\r\n    .action-right:active .chip-icon {\r\n      background-color: ${props => COLORS.getColor('critical_300', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_800', props.theme)};\r\n    }\r\n\r\n    .action-right.disabled .chip-icon {\r\n      background-color: transparent;\r\n      color: ${props => COLORS.getColor('primary_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    ${ChipContentContainer} {\r\n      pointer-events: none;\r\n    }\r\n\r\n    ${ChipContent} {\r\n      border: none !important;\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    }\r\n  }\r\n`;\r\n"],"mappings":";;;;;;;AAGA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,OAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGO,MAAME,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC9C;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,WAAW,GAAAH,OAAA,CAAAG,WAAA,GAAGF,yBAAM,CAACC,GAAG;AACrC,IAAI,IAAAE,0BAAkB,EAACC,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,aAAa,GAAAP,OAAA,CAAAO,aAAA,GAAGN,yBAAM,CAACC,GAAG;AACvC;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAW;AACjB;AACA;AACA;AACA,QAAQ,IAAAK,yBAAiB,EAACH,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMH,WAAW;AACjB;AACA;AACA;AACA,QAAQ,IAAAM,yBAAiB,EAACJ,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMI,mBAAW;AACjB;AACA;AACA;AACA,aAAaC,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC3D;AACA,MAAMX,WAAW;AACjB,0BAA0BQ,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E;AACA;AACA;AACA;AACA,MAAMX,WAAW;AACjB,0BAA0BQ,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E;AACA;AACA;AACA;AACA,MAAMX,WAAW;AACjB,0BAA0BQ,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E;AACA;AACA;AACA;AACA,aAAaH,KAAK,IAAIC,cAAM,CAACG,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAACC,cAAc,EAAC;AAAQ,CAAC,EAAEN,KAAK,CAACG,KAAK,CAAC;AACvG;AACA,MAAMX,WAAW;AACjB,0BAA0BQ,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AACxE,0BAA0BH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E;AACA;AACA;AACA;AACA,MAAMX,WAAW;AACjB,0BAA0BQ,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC7E,0BAA0BH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACnE;AACA;AACA;AACA;AACA,MAAMX,WAAW;AACjB,0BAA0BQ,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E,0BAA0BH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,MAAMX,WAAW;AACjB;AACA;AACA;AACA;AACA;AACA,MAAMA,WAAW;AACjB;AACA;AACA;AACA;AACA;AACA,MAAMA,WAAW;AACjB;AACA;AACA;AACA;AACA;AACA,MAAMA,WAAW;AACjB,0BAA0BQ,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC/E,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC;AACpE;AACA;AACA;AACA;AACA,MAAMX,WAAW;AACjB,oBAAoBQ,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC;AACzE,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC;AACpE;AACA;AACA;AACA;AACA,MAAMX,WAAW;AACjB,oBAAoBQ,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC;AACzE,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC;AACpE;AACA;AACA;AACA;AACA,MAAMJ,mBAAW;AACjB;AACA;AACA;AACA,wBAAwBC,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC5E;AACA;AACA;AACA,wBAAwBH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC5E;AACA;AACA;AACA;AACA,aAAaH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA,0BAA0BH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC/E,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC;AACpE;AACA;AACA;AACA,0BAA0BH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC/E,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEF,KAAK,CAACG,KAAK,CAAC;AACpE;AACA;AACA;AACA;AACA,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,MAAMf,oBAAoB;AAC1B;AACA;AACA;AACA,MAAMI,WAAW;AACjB;AACA,0BAA0BQ,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACnE;AACA;AACA,CAAC","ignoreList":[]}

package/dist/Chips/ChipStyles.js

@@ -141,7 +141,10 @@ export const ChipContainer = styled.div`
   }
 
   &.outline {
-    color: ${props => COLORS.getColor('neutral_600', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
 
     ${ChipContent} {
       background-color: ${props => COLORS.getColor('white', props.theme)};

package/dist/Chips/ChipStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipStyles.js","names":["styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","focusStyles","ChipContentContainer","div","ChipContent","Bold","ChipContainer","props","getColor","theme"],"sources":["../../src/Chips/ChipStyles.ts"],"sourcesContent":["/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\n\r\n/**\r\n * Import custom style properties.\r\n */\r\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';\r\n\r\nexport const ChipContentContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  min-height: 48px;\r\n  width: max-content;\r\n`;\r\n\r\nexport const ChipContent = styled.div`\r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n\r\n  position: relative;\r\n  display: flex;\r\n  gap: 4px;\r\n  align-items: center;\r\n  min-height: 24px;\r\n  box-sizing: border-box;\r\n  border-radius: 24px;\r\n  padding: 4px 12px;\r\n\r\n  .chip-icon {\r\n    height: 16px;\r\n    width: 16px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      height: 16px;\r\n      width: 16px;\r\n    }\r\n  }\r\n\r\n  .icon-left {\r\n    margin-left: -4px;\r\n  }\r\n\r\n  .icon-right {\r\n    margin-right: -4px;\r\n  }\r\n\r\n  .action-right {\r\n    position: absolute;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    height: 48px;\r\n    width: 48px;\r\n    right: -8px;\r\n  }\r\n\r\n  &.with-action-right {\r\n    position: relative;\r\n    padding-right: 28px;\r\n  }\r\n`;\r\n\r\nexport const ChipContainer = styled.div`\r\n  display: inline-block;\r\n  cursor: pointer;\r\n  position: relative;\r\n\r\n  &.medium {\r\n    ${ChipContent} {\r\n      gap: 6px;\r\n      padding: 10px 16px;\r\n\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      .chip-icon {\r\n        height: 20px;\r\n        width: 20px;\r\n\r\n        svg {\r\n          height: 20px;\r\n          width: 20px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .with-action-right {\r\n      padding-right: 38px;\r\n\r\n      .action-right {\r\n        right: -2px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ChipContent} {\r\n      gap: 8px;\r\n      padding: 12px 20px;\r\n\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      .chip-icon {\r\n        height: 24px;\r\n        width: 24px;\r\n\r\n        svg {\r\n          height: 24px;\r\n          width: 24px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .with-action-right {\r\n      padding-right: 48px;\r\n\r\n      .action-right {\r\n        right: 4px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.default {\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.outline {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('primary_200', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('primary_300', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      box-shadow: none;\r\n    }\r\n  }\r\n\r\n  //account for border\r\n  &.small.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 2px 10px;\r\n    }\r\n  }\r\n\r\n  &.medium.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 8px 14px;\r\n    }\r\n  }\r\n\r\n  &.large.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 10px 18px;\r\n    }\r\n  }\r\n\r\n  &.invalid {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('critical_100', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${props => COLORS.getColor('critical_200', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${props => COLORS.getColor('critical_300', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  .action-right:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  .action-right:hover .chip-icon {\r\n    background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  .action-right:active .chip-icon {\r\n    background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  .action-right.disabled .chip-icon {\r\n    background-color: transparent;\r\n    color: ${props => COLORS.getColor('primary_300', props.theme)};\r\n  }\r\n\r\n  &.invalid {\r\n    .action-right:hover .chip-icon {\r\n      background-color: ${props => COLORS.getColor('critical_200', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_700', props.theme)};\r\n    }\r\n\r\n    .action-right:active .chip-icon {\r\n      background-color: ${props => COLORS.getColor('critical_300', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_800', props.theme)};\r\n    }\r\n\r\n    .action-right.disabled .chip-icon {\r\n      background-color: transparent;\r\n      color: ${props => COLORS.getColor('primary_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    ${ChipContentContainer} {\r\n      pointer-events: none;\r\n    }\r\n\r\n    ${ChipContent} {\r\n      border: none !important;\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    }\r\n  }\r\n`;\r\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,MAAM,MAAM,mBAAmB;;AAEtC;AACA;AACA;AACA,SAASC,MAAM,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,kBAAkB,EAAEC,WAAW,QAAQ,WAAW;AAE7H,OAAO,MAAMC,oBAAoB,GAAGP,MAAM,CAACQ,GAAG;AAC9C;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,WAAW,GAAGT,MAAM,CAACQ,GAAG;AACrC,IAAIH,kBAAkB,CAACD,kBAAkB,CAACM,IAAI,EAAE,IAAI,CAAC;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,aAAa,GAAGX,MAAM,CAACQ,GAAG;AACvC;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAW;AACjB;AACA;AACA;AACA,QAAQN,iBAAiB,CAACC,kBAAkB,CAACM,IAAI,EAAE,IAAI,CAAC;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMD,WAAW;AACjB;AACA;AACA;AACA,QAAQP,iBAAiB,CAACE,kBAAkB,CAACM,IAAI,EAAE,IAAI,CAAC;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMJ,WAAW;AACjB;AACA;AACA;AACA,aAAaM,KAAK,IAAIX,MAAM,CAACY,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAC3D;AACA,MAAML,WAAW;AACjB,0BAA0BG,KAAK,IAAIX,MAAM,CAACY,QAAQ,CAAC,aAAa,EAAED,KA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","ignoreList":[]}
+{"version":3,"file":"ChipStyles.js","names":["styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","focusStyles","ChipContentContainer","div","ChipContent","Bold","ChipContainer","props","getColor","theme","generateToken","componentType","defaultVariant"],"sources":["../../src/Chips/ChipStyles.ts"],"sourcesContent":["/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\n\r\n/**\r\n * Import custom style properties.\r\n */\r\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';\r\n\r\nexport const ChipContentContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  min-height: 48px;\r\n  width: max-content;\r\n`;\r\n\r\nexport const ChipContent = styled.div`\r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n\r\n  position: relative;\r\n  display: flex;\r\n  gap: 4px;\r\n  align-items: center;\r\n  min-height: 24px;\r\n  box-sizing: border-box;\r\n  border-radius: 24px;\r\n  padding: 4px 12px;\r\n\r\n  .chip-icon {\r\n    height: 16px;\r\n    width: 16px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      height: 16px;\r\n      width: 16px;\r\n    }\r\n  }\r\n\r\n  .icon-left {\r\n    margin-left: -4px;\r\n  }\r\n\r\n  .icon-right {\r\n    margin-right: -4px;\r\n  }\r\n\r\n  .action-right {\r\n    position: absolute;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    height: 48px;\r\n    width: 48px;\r\n    right: -8px;\r\n  }\r\n\r\n  &.with-action-right {\r\n    position: relative;\r\n    padding-right: 28px;\r\n  }\r\n`;\r\n\r\nexport const ChipContainer = styled.div`\r\n  display: inline-block;\r\n  cursor: pointer;\r\n  position: relative;\r\n\r\n  &.medium {\r\n    ${ChipContent} {\r\n      gap: 6px;\r\n      padding: 10px 16px;\r\n\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      .chip-icon {\r\n        height: 20px;\r\n        width: 20px;\r\n\r\n        svg {\r\n          height: 20px;\r\n          width: 20px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .with-action-right {\r\n      padding-right: 38px;\r\n\r\n      .action-right {\r\n        right: -2px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ChipContent} {\r\n      gap: 8px;\r\n      padding: 12px 20px;\r\n\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      .chip-icon {\r\n        height: 24px;\r\n        width: 24px;\r\n\r\n        svg {\r\n          height: 24px;\r\n          width: 24px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .with-action-right {\r\n      padding-right: 48px;\r\n\r\n      .action-right {\r\n        right: 4px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.default {\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.outline {\r\n    color: ${props => COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme)};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('primary_200', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('primary_300', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      box-shadow: none;\r\n    }\r\n  }\r\n\r\n  //account for border\r\n  &.small.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 2px 10px;\r\n    }\r\n  }\r\n\r\n  &.medium.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 8px 14px;\r\n    }\r\n  }\r\n\r\n  &.large.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 10px 18px;\r\n    }\r\n  }\r\n\r\n  &.invalid {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('critical_100', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${props => COLORS.getColor('critical_200', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${props => COLORS.getColor('critical_300', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  .action-right:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  .action-right:hover .chip-icon {\r\n    background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  .action-right:active .chip-icon {\r\n    background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  .action-right.disabled .chip-icon {\r\n    background-color: transparent;\r\n    color: ${props => COLORS.getColor('primary_300', props.theme)};\r\n  }\r\n\r\n  &.invalid {\r\n    .action-right:hover .chip-icon {\r\n      background-color: ${props => COLORS.getColor('critical_200', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_700', props.theme)};\r\n    }\r\n\r\n    .action-right:active .chip-icon {\r\n      background-color: ${props => COLORS.getColor('critical_300', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_800', props.theme)};\r\n    }\r\n\r\n    .action-right.disabled .chip-icon {\r\n      background-color: transparent;\r\n      color: ${props => COLORS.getColor('primary_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    ${ChipContentContainer} {\r\n      pointer-events: none;\r\n    }\r\n\r\n    ${ChipContent} {\r\n      border: none !important;\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    }\r\n  }\r\n`;\r\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,MAAM,MAAM,mBAAmB;;AAEtC;AACA;AACA;AACA,SAASC,MAAM,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,kBAAkB,EAAEC,WAAW,QAAQ,WAAW;AAE7H,OAAO,MAAMC,oBAAoB,GAAGP,MAAM,CAACQ,GAAG;AAC9C;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,WAAW,GAAGT,MAAM,CAACQ,GAAG;AACrC,IAAIH,kBAAkB,CAACD,kBAAkB,CAACM,IAAI,EAAE,IAAI,CAAC;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,aAAa,GAAGX,MAAM,CAACQ,GAAG;AACvC;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAW;AACjB;AACA;AACA;AACA,QAAQN,iBAAiB,CAACC,kBAAkB,CAACM,IAAI,EAAE,IAAI,CAAC;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMD,WAAW;AACjB;AACA;AACA;AACA,QAAQP,iBAAiB,CAACE,kBAAkB,CAACM,IAAI,EAAE,IAAI,CAAC;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMJ,WAAW;AACjB;AACA;AACA;AACA,aAAaM,KAAK,IAAIX,MAAM,CAACY,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAC3D;AACA,MAAML,WAAW;AACjB,0BAA0BG,KAAK,IAAIX,MAAM,CAACY,QAAQ,CAAC,aAAa,EAAED,KA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","ignoreList":[]}

package/dist/Chips/FilterChip.cjs

@@ -46,6 +46,7 @@ const FilterChip = _ref => {
    */
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, _objectSpread(_objectSpread({
     role: "checkbox",
+    "aria-checked": selected,
     "data-testid": dataTestId,
     className: `${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''} ${className || ''}`,
     tabIndex: disabled || !onClick ? -1 : 0,

package/dist/Chips/FilterChip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterChip.cjs","names":["React","_interopRequireWildcard","require","_types","_index","_ChipStyles","_common","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","FilterChip","_ref","selected","text","size","Size","Medium","disabled","onClick","className","dataTestId","rest","_objectWithoutProperties2","jsx","ChipContainer","role","tabIndex","onKeyDown","key","onMouseDown","defaultOnMouseDownHandler","children","ChipContentContainer","jsxs","ChipContent","SystemIcons","CheckMark","_default","exports"],"sources":["../../src/Chips/FilterChip.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport {Size} from '../types';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport {SystemIcons} from '../icons/index';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {FilterChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\r\n                                                                selected,\r\n                                                                text,\r\n                                                                size = Size.Medium,\r\n                                                                disabled,\r\n                                                                onClick,\r\n                                                                className,\r\n                                                                dataTestId,\r\n                                                                ...rest\r\n                                                              }: FilterChipProps) => {\r\n\r\n\r\n  /**\r\n   * Return Filter Chip component.\r\n   */\r\n  return (\r\n    <ChipContainer\r\n      role=\"checkbox\"\r\n      data-testid={dataTestId}\r\n      className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\r\n      tabIndex={disabled || !onClick ? -1 : 0}\r\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\r\n      onMouseDown={defaultOnMouseDownHandler}\r\n      onClick={() => !disabled && onClick && onClick()}\r\n      {...rest}>\r\n      <ChipContentContainer>\r\n        <ChipContent>\r\n          {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckMark className={'icon'}/></div>}\r\n          <div>{text}</div>\r\n        </ChipContent>\r\n      </ChipContentContainer>\r\n    </ChipContainer>\r\n  );\r\n};\r\n\r\nexport default FilterChip;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FilterChip.cjs","names":["React","_interopRequireWildcard","require","_types","_index","_ChipStyles","_common","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","FilterChip","_ref","selected","text","size","Size","Medium","disabled","onClick","className","dataTestId","rest","_objectWithoutProperties2","jsx","ChipContainer","role","tabIndex","onKeyDown","key","onMouseDown","defaultOnMouseDownHandler","children","ChipContentContainer","jsxs","ChipContent","SystemIcons","CheckMark","_default","exports"],"sources":["../../src/Chips/FilterChip.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport {Size} from '../types';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport {SystemIcons} from '../icons/index';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {FilterChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\r\n                                                                selected,\r\n                                                                text,\r\n                                                                size = Size.Medium,\r\n                                                                disabled,\r\n                                                                onClick,\r\n                                                                className,\r\n                                                                dataTestId,\r\n                                                                ...rest\r\n                                                              }: FilterChipProps) => {\r\n\r\n\r\n  /**\r\n   * Return Filter Chip component.\r\n   */\r\n  return (\r\n    <ChipContainer\r\n      role=\"checkbox\"\r\n      aria-checked={selected}\r\n      data-testid={dataTestId}\r\n      className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\r\n      tabIndex={disabled || !onClick ? -1 : 0}\r\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\r\n      onMouseDown={defaultOnMouseDownHandler}\r\n      onClick={() => !disabled && onClick && onClick()}\r\n      {...rest}>\r\n      <ChipContentContainer>\r\n        <ChipContent>\r\n          {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckMark className={'icon'}/></div>}\r\n          <div>{text}</div>\r\n        </ChipContent>\r\n      </ChipContentContainer>\r\n    </ChipContainer>\r\n  );\r\n};\r\n\r\nexport default FilterChip;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Chips/FilterChip.js

@@ -41,6 +41,7 @@ const FilterChip = _ref => {
    */
   return /*#__PURE__*/_jsx(ChipContainer, _objectSpread(_objectSpread({
     role: "checkbox",
+    "aria-checked": selected,
     "data-testid": dataTestId,
     className: `${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''} ${className || ''}`,
     tabIndex: disabled || !onClick ? -1 : 0,

package/dist/Chips/FilterChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterChip.js","names":["React","Size","SystemIcons","ChipContent","ChipContentContainer","ChipContainer","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","FilterChip","_ref","selected","text","size","Medium","disabled","onClick","className","dataTestId","rest","_objectWithoutProperties","_excluded","_objectSpread","role","tabIndex","onKeyDown","e","key","onMouseDown","children","CheckMark"],"sources":["../../src/Chips/FilterChip.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport {Size} from '../types';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport {SystemIcons} from '../icons/index';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {FilterChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\r\n                                                                selected,\r\n                                                                text,\r\n                                                                size = Size.Medium,\r\n                                                                disabled,\r\n                                                                onClick,\r\n                                                                className,\r\n                                                                dataTestId,\r\n                                                                ...rest\r\n                                                              }: FilterChipProps) => {\r\n\r\n\r\n  /**\r\n   * Return Filter Chip component.\r\n   */\r\n  return (\r\n    <ChipContainer\r\n      role=\"checkbox\"\r\n      data-testid={dataTestId}\r\n      className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\r\n      tabIndex={disabled || !onClick ? -1 : 0}\r\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\r\n      onMouseDown={defaultOnMouseDownHandler}\r\n      onClick={() => !disabled && onClick && onClick()}\r\n      {...rest}>\r\n      <ChipContentContainer>\r\n        <ChipContent>\r\n          {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckMark className={'icon'}/></div>}\r\n          <div>{text}</div>\r\n        </ChipContent>\r\n      </ChipContentContainer>\r\n    </ChipContainer>\r\n  );\r\n};\r\n\r\nexport default FilterChip;\r\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAQC,IAAI,QAAO,UAAU;;AAE7B;AACA;AACA;AACA,SAAQC,WAAW,QAAO,gBAAgB;;AAE1C;AACA;AACA;AACA,SAAQC,WAAW,EAAEC,oBAAoB,EAAEC,aAAa,QAAO,cAAc;;AAE7E;AACA;AACA;;AAEA,SAAQC,yBAAyB,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEpD,MAAMC,UAAoD,GAAGC,IAAA,IASwB;EAAA,IATvB;MACEC,QAAQ;MACRC,IAAI;MACJC,IAAI,GAAGd,IAAI,CAACe,MAAM;MAClBC,QAAQ;MACRC,OAAO;MACPC,SAAS;MACTC;IAEe,CAAC,GAAAR,IAAA;IADbS,IAAI,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA;EAIrE;AACF;AACA;EACE,oBACEf,IAAA,CAACH,aAAa,EAAAmB,aAAA,CAAAA,aAAA;IACZC,IAAI,EAAC,UAAU;IACf,eAAaL,UAAW;IACxBD,SAAS,EAAE,GAAGJ,IAAI,IAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAIJ,QAAQ,GAAG,SAAS,GAAG,SAAS,IAAI,CAAC,CAACK,OAAO,GAAG,aAAa,GAAG,EAAE,IAAIC,SAAS,IAAI,EAAE,EAAG;IAC5IO,QAAQ,EAAET,QAAQ,IAAI,CAACC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAE;IACxCS,SAAS,EAAEC,CAAC,IAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK,CAACZ,QAAQ,IAAIC,OAAO,IAAIA,OAAO,CAAC,CAAE;IAC1FY,WAAW,EAAExB,yBAA0B;IACvCY,OAAO,EAAEA,CAAA,KAAM,CAACD,QAAQ,IAAIC,OAAO,IAAIA,OAAO,CAAC;EAAE,GAC7CG,IAAI;IAAAU,QAAA,eACRvB,IAAA,CAACJ,oBAAoB;MAAA2B,QAAA,eACnBrB,KAAA,CAACP,WAAW;QAAA4B,QAAA,GACTlB,QAAQ,iBAAIL,IAAA;UAAKW,SAAS,EAAE,qBAAsB;UAAAY,QAAA,eAACvB,IAAA,CAACN,WAAW,CAAC8B,SAAS;YAACb,SAAS,EAAE;UAAO,CAAC;QAAC,CAAK,CAAC,eACrGX,IAAA;UAAAuB,QAAA,EAAMjB;QAAI,CAAM,CAAC;MAAA,CACN;IAAC,CACM;EAAC,EACV,CAAC;AAEpB,CAAC;AAED,eAAeH,UAAU","ignoreList":[]}
+{"version":3,"file":"FilterChip.js","names":["React","Size","SystemIcons","ChipContent","ChipContentContainer","ChipContainer","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","FilterChip","_ref","selected","text","size","Medium","disabled","onClick","className","dataTestId","rest","_objectWithoutProperties","_excluded","_objectSpread","role","tabIndex","onKeyDown","e","key","onMouseDown","children","CheckMark"],"sources":["../../src/Chips/FilterChip.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport {Size} from '../types';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport {SystemIcons} from '../icons/index';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {FilterChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\r\n                                                                selected,\r\n                                                                text,\r\n                                                                size = Size.Medium,\r\n                                                                disabled,\r\n                                                                onClick,\r\n                                                                className,\r\n                                                                dataTestId,\r\n                                                                ...rest\r\n                                                              }: FilterChipProps) => {\r\n\r\n\r\n  /**\r\n   * Return Filter Chip component.\r\n   */\r\n  return (\r\n    <ChipContainer\r\n      role=\"checkbox\"\r\n      aria-checked={selected}\r\n      data-testid={dataTestId}\r\n      className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''} ${className || ''}`}\r\n      tabIndex={disabled || !onClick ? -1 : 0}\r\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\r\n      onMouseDown={defaultOnMouseDownHandler}\r\n      onClick={() => !disabled && onClick && onClick()}\r\n      {...rest}>\r\n      <ChipContentContainer>\r\n        <ChipContent>\r\n          {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckMark className={'icon'}/></div>}\r\n          <div>{text}</div>\r\n        </ChipContent>\r\n      </ChipContentContainer>\r\n    </ChipContainer>\r\n  );\r\n};\r\n\r\nexport default FilterChip;\r\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAQC,IAAI,QAAO,UAAU;;AAE7B;AACA;AACA;AACA,SAAQC,WAAW,QAAO,gBAAgB;;AAE1C;AACA;AACA;AACA,SAAQC,WAAW,EAAEC,oBAAoB,EAAEC,aAAa,QAAO,cAAc;;AAE7E;AACA;AACA;;AAEA,SAAQC,yBAAyB,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEpD,MAAMC,UAAoD,GAAGC,IAAA,IASwB;EAAA,IATvB;MACEC,QAAQ;MACRC,IAAI;MACJC,IAAI,GAAGd,IAAI,CAACe,MAAM;MAClBC,QAAQ;MACRC,OAAO;MACPC,SAAS;MACTC;IAEe,CAAC,GAAAR,IAAA;IADbS,IAAI,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA;EAIrE;AACF;AACA;EACE,oBACEf,IAAA,CAACH,aAAa,EAAAmB,aAAA,CAAAA,aAAA;IACZC,IAAI,EAAC,UAAU;IACf,gBAAcZ,QAAS;IACvB,eAAaO,UAAW;IACxBD,SAAS,EAAE,GAAGJ,IAAI,IAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAIJ,QAAQ,GAAG,SAAS,GAAG,SAAS,IAAI,CAAC,CAACK,OAAO,GAAG,aAAa,GAAG,EAAE,IAAIC,SAAS,IAAI,EAAE,EAAG;IAC5IO,QAAQ,EAAET,QAAQ,IAAI,CAACC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAE;IACxCS,SAAS,EAAEC,CAAC,IAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK,CAACZ,QAAQ,IAAIC,OAAO,IAAIA,OAAO,CAAC,CAAE;IAC1FY,WAAW,EAAExB,yBAA0B;IACvCY,OAAO,EAAEA,CAAA,KAAM,CAACD,QAAQ,IAAIC,OAAO,IAAIA,OAAO,CAAC;EAAE,GAC7CG,IAAI;IAAAU,QAAA,eACRvB,IAAA,CAACJ,oBAAoB;MAAA2B,QAAA,eACnBrB,KAAA,CAACP,WAAW;QAAA4B,QAAA,GACTlB,QAAQ,iBAAIL,IAAA;UAAKW,SAAS,EAAE,qBAAsB;UAAAY,QAAA,eAACvB,IAAA,CAACN,WAAW,CAAC8B,SAAS;YAACb,SAAS,EAAE;UAAO,CAAC;QAAC,CAAK,CAAC,eACrGX,IAAA;UAAAuB,QAAA,EAAMjB;QAAI,CAAM,CAAC;MAAA,CACN;IAAC,CACM;EAAC,EACV,CAAC;AAEpB,CAAC;AAED,eAAeH,UAAU","ignoreList":[]}