@laerdal/life-react-components 6.0.0-dev.24.full → 6.0.0-dev.26.full

package/dist/Chips/ChipStyles.js

@@ -10,7 +10,6 @@ import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, Compo
 export const ChipContentContainer = styled.div`
   display: flex;
   align-items: center;
-  min-height: 48px;
   width: max-content;
 `;
 export const ChipContent = styled.div`
@@ -63,13 +62,26 @@ export const ChipContainer = styled.div`
   display: inline-block;
   cursor: pointer;
   position: relative;
+  
+  ${ChipContent} {
+    min-height: 32px;
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
+  }
 
   &.medium {
     ${ChipContent} {
       gap: 6px;
       padding: 10px 16px;
+      min-height: 40px;
+
+      ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
 
-      ${ComponentSStyling(ComponentTextStyle.Bold, null)}
       .chip-icon {
         height: 20px;
         width: 20px;
@@ -94,8 +106,12 @@ export const ChipContainer = styled.div`
     ${ChipContent} {
       gap: 8px;
       padding: 12px 20px;
+      min-height: 48px;
 
-      ${ComponentMStyling(ComponentTextStyle.Bold, null)}
+      ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
       .chip-icon {
         height: 24px;
         width: 24px;
@@ -116,27 +132,103 @@ export const ChipContainer = styled.div`
     }
   }
 
+  box-sizing: border-box;
+  border-radius: 24px;
+  border: 2px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
+
+  &:hover {
+    border: 2px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover'
+}, props.theme)};
+  }
+
+  &:active {
+    border: 2px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'active'
+}, props.theme)};
+  }
+
   &.interactive:focus {
     ${focusStyles}
   }
 
   &.default {
-    color: ${props => COLORS.getColor('white', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)} !important;
+
+    ${ChipContent} {
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)} !important;
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)} !important;
+    }
+  }
+
+  &.selected {
+    border: none;
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)} !important;
+
+    ${ChipContent} {
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'primary'
+}, props.theme)} !important;
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)} !important;
+    }
+  }
+
+  &.interactive.selected:hover:not(.action-within) {
+    ${ChipContent} {
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+    }
+  }
 
+  &.interactive.selected:active:not(.action-within) {
     ${ChipContent} {
-      background-color: ${props => COLORS.getColor('primary_500', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
     }
   }
 
   &.interactive.default:hover:not(.action-within) {
     ${ChipContent} {
-      background-color: ${props => COLORS.getColor('primary_700', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
     }
   }
 
   &.interactive.default:active:not(.action-within) {
     ${ChipContent} {
-      background-color: ${props => COLORS.getColor('primary_800', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
     }
   }
 
@@ -147,24 +239,36 @@ export const ChipContainer = styled.div`
 }, props.theme)};
 
     ${ChipContent} {
-      background-color: ${props => COLORS.getColor('white', props.theme)};
-      border: 2px solid ${props => COLORS.getColor('neutral_200', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
     }
   }
 
   &.interactive.outline:hover:not(.action-within) {
     ${ChipContent} {
-      background-color: ${props => COLORS.getColor('primary_20', props.theme)};
-      border: 2px solid ${props => COLORS.getColor('primary_200', props.theme)};
-      color: ${props => COLORS.getColor('primary_700', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
     }
   }
 
   &.interactive.outline:active:not(.action-within) {
     ${ChipContent} {
-      background-color: ${props => COLORS.getColor('primary_100', props.theme)};
-      border: 2px solid ${props => COLORS.getColor('primary_300', props.theme)};
-      color: ${props => COLORS.getColor('primary_800', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
       box-shadow: none;
     }
   }
@@ -189,23 +293,59 @@ export const ChipContainer = styled.div`
   }
 
   &.invalid {
+    border-color: ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'critical'
+}, props.theme)};
     ${ChipContent} {
-      background-color: ${props => COLORS.getColor('critical_100', props.theme)};
-      color: ${props => COLORS.getColor('critical_600', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'critical'
+}, props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'critical'
+}, props.theme)};
     }
   }
 
   &.interactive.invalid:hover:not(.action-within) {
+    border-color: ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'critical',
+  state: 'hover'
+}, props.theme)};
     ${ChipContent} {
-      background: ${props => COLORS.getColor('critical_200', props.theme)};
-      color: ${props => COLORS.getColor('critical_700', props.theme)};
+      background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'critical',
+  state: 'hover'
+}, props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'critical',
+  state: 'hover'
+}, props.theme)};
     }
   }
 
   &.interactive.invalid:active:not(.action-within) {
+    border-color: ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'critical',
+  state: 'active'
+}, props.theme)};
     ${ChipContent} {
-      background: ${props => COLORS.getColor('critical_300', props.theme)};
-      color: ${props => COLORS.getColor('critical_800', props.theme)};
+      background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'critical',
+  state: 'active'
+}, props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'critical',
+  state: 'active'
+}, props.theme)};
     }
   }
 
@@ -214,36 +354,69 @@ export const ChipContainer = styled.div`
   }
 
   .action-right:hover .chip-icon {
-    background-color: ${props => COLORS.getColor('primary_700', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
   }
 
   .action-right:active .chip-icon {
-    background-color: ${props => COLORS.getColor('primary_800', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
   }
 
   .action-right.disabled .chip-icon {
     background-color: transparent;
-    color: ${props => COLORS.getColor('primary_300', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
   }
 
   &.invalid {
     .action-right:hover .chip-icon {
-      background-color: ${props => COLORS.getColor('critical_200', props.theme)};
-      color: ${props => COLORS.getColor('critical_700', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'critical',
+  state: 'hover'
+}, props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'critical',
+  state: 'hover'
+}, props.theme)};
     }
 
     .action-right:active .chip-icon {
-      background-color: ${props => COLORS.getColor('critical_300', props.theme)};
-      color: ${props => COLORS.getColor('critical_800', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'critical',
+  state: 'active'
+}, props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'critical',
+  state: 'active'
+}, props.theme)};
     }
 
     .action-right.disabled .chip-icon {
       background-color: transparent;
-      color: ${props => COLORS.getColor('primary_300', props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'critical',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 
   &.disabled {
+    border: 2px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
     cursor: not-allowed;
 
     ${ChipContentContainer} {
@@ -252,8 +425,14 @@ export const ChipContainer = styled.div`
 
     ${ChipContent} {
       border: none !important;
-      background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;
-      color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'disabled'
+}, props.theme)} !important;
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)} !important;
     }
   }
 `;

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","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":[]}
+{"version":3,"file":"ChipStyles.js","names":["styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","focusStyles","ChipContentContainer","div","ChipContent","Bold","ChipContainer","props","generateToken","componentType","defaultVariant","theme","state","isOnFill"],"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  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  ${ChipContent} {\r\n    min-height: 32px;\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)};\r\n  }\r\n\r\n  &.medium {\r\n    ${ChipContent} {\r\n      gap: 6px;\r\n      padding: 10px 16px;\r\n      min-height: 40px;\r\n\r\n      ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme))}\r\n\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      min-height: 48px;\r\n\r\n      ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme))}\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  box-sizing: border-box;\r\n  border-radius: 24px;\r\n  border: 2px solid ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'subtle' }, props.theme)};\r\n\r\n  &:hover {\r\n    border: 2px solid ${props => COLORS.generateToken({ componentType: 'border', state: 'hover' }, props.theme)};\r\n  }\r\n\r\n  &:active {\r\n    border: 2px solid ${props => COLORS.generateToken({ componentType: 'border', state: 'active' }, props.theme)};\r\n  }\r\n\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.default {\r\n    color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'default' }, props.theme)} !important;\r\n\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'default' }, props.theme)} !important;\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)} !important;\r\n    }\r\n  }\r\n\r\n  &.selected {\r\n    border: none;\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)} !important;\r\n\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'primary' }, props.theme)} !important;\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)} !important;\r\n    }\r\n  }\r\n\r\n  &.interactive.selected:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.selected:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, 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.generateToken({ componentType: 'bg-surface', state: 'hover' }, 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.generateToken({ componentType: 'bg-surface', state: 'active' }, 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.generateToken({ componentType: 'bg-surface', defaultVariant: 'default' }, 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.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'hover'}, 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.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'active' }, 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    border-color: ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'critical' }, props.theme)};\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'critical' }, props.theme)};\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'critical' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:hover:not(.action-within) {\r\n    border-color: ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'critical', state: 'hover' }, props.theme)};\r\n    ${ChipContent} {\r\n      background: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'critical', state: 'hover' }, props.theme)};\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'critical', state: 'hover' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:active:not(.action-within) {\r\n    border-color: ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'critical', state: 'active' }, props.theme)};\r\n    ${ChipContent} {\r\n      background: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'critical', state: 'active' }, props.theme)};\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'critical', state: 'active' }, 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.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n  }\r\n\r\n  .action-right:active .chip-icon {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n  }\r\n\r\n  .action-right.disabled .chip-icon {\r\n    background-color: transparent;\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n  }\r\n\r\n  &.invalid {\r\n    .action-right:hover .chip-icon {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'critical', state: 'hover' }, props.theme)};\r\n      color: ${props => COLORS.generateToken({ componentType: 'icon', defaultVariant: 'critical', state: 'hover' }, props.theme)};\r\n    }\r\n\r\n    .action-right:active .chip-icon {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'critical', state: 'active' }, props.theme)};\r\n      color: ${props => COLORS.generateToken({ componentType: 'icon', defaultVariant: 'critical', state: 'active' }, props.theme)};\r\n    }\r\n\r\n    .action-right.disabled .chip-icon {\r\n      background-color: transparent;\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'critical', state: 'disabled' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    border: 2px solid ${props => COLORS.generateToken({ componentType: 'border', state: 'disabled' }, props.theme)};\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.generateToken({ componentType: 'bg-surface', state: 'disabled' }, props.theme)} !important;\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, 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,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,IAAIC,WAAW;AACf;AACA,aAAaG,KAAK,IAAIX,MAAM,CAACY,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEC,cAAc,EAAE;AAAS,CAAC,EAAEH,KAAK,CAACI,KAAK,CAAC;AAC5G;AACA;AACA;AACA,MAAMP,WAAW;AACjB;AACA;AACA;AACA;AACA,QAAQG,KAAK,IAAIT,iBAAiB,CAACC,kBAAkB,CAACM,IAAI,EAAET,MAAM,CAACY,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEC,cAAc,EAAE;AAAS,CAAC,EAAEH,KAAK,CAACI,KAAK,CAAC,CAAC;AACnJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMP,WAAW;AACjB;AACA;AACA;AACA;AACA,QAAQG,KAAK,IAAIV,iBAAiB,CAACE,kBAAkB,CAACM,IAAI,EAAET,MAAM,CAACY,aAAa,CAAC;EAAEC,aAAa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","ignoreList":[]}

package/dist/Chips/ChoiceChips.cjs

@@ -80,7 +80,7 @@ const ChoiceChips = _ref => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, _objectSpread(_objectSpread({
         role: "radio",
         tabIndex: disabled ? -1 : 0,
-        className: `${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'default' : 'outline'} interactive ${className || ''}`,
+        className: `${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'selected' : 'outline'} interactive ${className || ''}`,
         onMouseDown: _common.defaultOnMouseDownHandler,
         "aria-checked": selectedChip === value,
         onClick: () => !disabled && onSelectChip(item),

package/dist/Chips/ChoiceChips.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceChips.cjs","names":["React","_interopRequireWildcard","require","_ChipStyles","_common","_types","_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","ChoiceChips","_ref","selected","disabled","onClick","values","dataTestId","selectedChip","setSelectedChip","useState","useEffect","onSelectChip","value","handleKeyDown","key","jsx","role","children","map","item","size","Size","Medium","label","className","rest","_objectWithoutProperties2","ChipContainer","tabIndex","onMouseDown","defaultOnMouseDownHandler","onKeyDown","ChipContentContainer","ChipContent","_default","exports"],"sources":["../../src/Chips/ChoiceChips.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport {Size} from '../types';\r\n\r\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\r\n                                                                 selected,\r\n                                                                 disabled,\r\n                                                                 onClick,\r\n                                                                 values,\r\n                                                                 dataTestId\r\n                                                               }: ChoiceChipProps) => {\r\n  /**\r\n   * Globally used variables within the component.\r\n   */\r\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\r\n\r\n  /**\r\n   * Set the selected value for the chip.\r\n   */\r\n  React.useEffect(() => {\r\n    setSelectedChip(selected);\r\n  }, [selected]);\r\n\r\n  /**\r\n   * Sets selected chip and fires an event to parent component.\r\n   * @param value - Chip which was selected.\r\n   */\r\n  const onSelectChip = (value: ChipValue) => {\r\n    // Update selected chip\r\n    setSelectedChip(value.value);\r\n\r\n    // Fire the event\r\n    onClick && onClick(value);\r\n  };\r\n\r\n  const handleKeyDown = (e: any, value: ChipValue) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      onSelectChip(value);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Return Choice Chip component.\r\n   */\r\n  return (\r\n    <div role=\"radiogroup\" data-testid={dataTestId}>\r\n      {values.map((item: ChipValue) => {\r\n        const {value, size = Size.Medium, label, className, ...rest } = item;\r\n        return (\r\n          <ChipContainer\r\n            role=\"radio\"\r\n            key={value}\r\n            tabIndex={disabled ? -1 : 0}\r\n            className={`${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'default' : 'outline'} interactive ${className || ''}`}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            aria-checked={selectedChip === value}\r\n            onClick={() => !disabled && onSelectChip(item)}\r\n            onKeyDown={e => !disabled && handleKeyDown(e, item)}\r\n            {...rest}>\r\n            <ChipContentContainer>\r\n              <ChipContent>\r\n                {label}\r\n              </ChipContent>\r\n            </ChipContentContainer>\r\n          </ChipContainer>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default ChoiceChips;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ChoiceChips.cjs","names":["React","_interopRequireWildcard","require","_ChipStyles","_common","_types","_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","ChoiceChips","_ref","selected","disabled","onClick","values","dataTestId","selectedChip","setSelectedChip","useState","useEffect","onSelectChip","value","handleKeyDown","key","jsx","role","children","map","item","size","Size","Medium","label","className","rest","_objectWithoutProperties2","ChipContainer","tabIndex","onMouseDown","defaultOnMouseDownHandler","onKeyDown","ChipContentContainer","ChipContent","_default","exports"],"sources":["../../src/Chips/ChoiceChips.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport {Size} from '../types';\r\n\r\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\r\n                                                                 selected,\r\n                                                                 disabled,\r\n                                                                 onClick,\r\n                                                                 values,\r\n                                                                 dataTestId\r\n                                                               }: ChoiceChipProps) => {\r\n  /**\r\n   * Globally used variables within the component.\r\n   */\r\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\r\n\r\n  /**\r\n   * Set the selected value for the chip.\r\n   */\r\n  React.useEffect(() => {\r\n    setSelectedChip(selected);\r\n  }, [selected]);\r\n\r\n  /**\r\n   * Sets selected chip and fires an event to parent component.\r\n   * @param value - Chip which was selected.\r\n   */\r\n  const onSelectChip = (value: ChipValue) => {\r\n    // Update selected chip\r\n    setSelectedChip(value.value);\r\n\r\n    // Fire the event\r\n    onClick && onClick(value);\r\n  };\r\n\r\n  const handleKeyDown = (e: any, value: ChipValue) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      onSelectChip(value);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Return Choice Chip component.\r\n   */\r\n  return (\r\n    <div role=\"radiogroup\" data-testid={dataTestId}>\r\n      {values.map((item: ChipValue) => {\r\n        const {value, size = Size.Medium, label, className, ...rest } = item;\r\n        return (\r\n          <ChipContainer\r\n            role=\"radio\"\r\n            key={value}\r\n            tabIndex={disabled ? -1 : 0}\r\n            className={`${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'selected' : 'outline'} interactive ${className || ''}`}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            aria-checked={selectedChip === value}\r\n            onClick={() => !disabled && onSelectChip(item)}\r\n            onKeyDown={e => !disabled && handleKeyDown(e, item)}\r\n            {...rest}>\r\n            <ChipContentContainer>\r\n              <ChipContent>\r\n                {label}\r\n              </ChipContent>\r\n            </ChipContentContainer>\r\n          </ChipContainer>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default ChoiceChips;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Chips/ChoiceChips.js

@@ -74,7 +74,7 @@ const ChoiceChips = _ref => {
       return /*#__PURE__*/_jsx(ChipContainer, _objectSpread(_objectSpread({
         role: "radio",
         tabIndex: disabled ? -1 : 0,
-        className: `${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'default' : 'outline'} interactive ${className || ''}`,
+        className: `${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'selected' : 'outline'} interactive ${className || ''}`,
         onMouseDown: defaultOnMouseDownHandler,
         "aria-checked": selectedChip === value,
         onClick: () => !disabled && onSelectChip(item),

package/dist/Chips/ChoiceChips.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceChips.js","names":["React","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","Size","jsx","_jsx","ChoiceChips","_ref","selected","disabled","onClick","values","dataTestId","selectedChip","setSelectedChip","useState","useEffect","onSelectChip","value","handleKeyDown","e","key","role","children","map","item","size","Medium","label","className","rest","_objectWithoutProperties","_excluded","_objectSpread","tabIndex","onMouseDown","onKeyDown"],"sources":["../../src/Chips/ChoiceChips.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport {Size} from '../types';\r\n\r\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\r\n                                                                 selected,\r\n                                                                 disabled,\r\n                                                                 onClick,\r\n                                                                 values,\r\n                                                                 dataTestId\r\n                                                               }: ChoiceChipProps) => {\r\n  /**\r\n   * Globally used variables within the component.\r\n   */\r\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\r\n\r\n  /**\r\n   * Set the selected value for the chip.\r\n   */\r\n  React.useEffect(() => {\r\n    setSelectedChip(selected);\r\n  }, [selected]);\r\n\r\n  /**\r\n   * Sets selected chip and fires an event to parent component.\r\n   * @param value - Chip which was selected.\r\n   */\r\n  const onSelectChip = (value: ChipValue) => {\r\n    // Update selected chip\r\n    setSelectedChip(value.value);\r\n\r\n    // Fire the event\r\n    onClick && onClick(value);\r\n  };\r\n\r\n  const handleKeyDown = (e: any, value: ChipValue) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      onSelectChip(value);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Return Choice Chip component.\r\n   */\r\n  return (\r\n    <div role=\"radiogroup\" data-testid={dataTestId}>\r\n      {values.map((item: ChipValue) => {\r\n        const {value, size = Size.Medium, label, className, ...rest } = item;\r\n        return (\r\n          <ChipContainer\r\n            role=\"radio\"\r\n            key={value}\r\n            tabIndex={disabled ? -1 : 0}\r\n            className={`${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'default' : 'outline'} interactive ${className || ''}`}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            aria-checked={selectedChip === value}\r\n            onClick={() => !disabled && onSelectChip(item)}\r\n            onKeyDown={e => !disabled && handleKeyDown(e, item)}\r\n            {...rest}>\r\n            <ChipContentContainer>\r\n              <ChipContent>\r\n                {label}\r\n              </ChipContent>\r\n            </ChipContentContainer>\r\n          </ChipContainer>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default ChoiceChips;\r\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;AACA,SAAQC,aAAa,EAAEC,WAAW,EAAEC,oBAAoB,QAAO,cAAc;;AAE7E;AACA;AACA;;AAEA,SAAQC,yBAAyB,QAAO,WAAW;AACnD,SAAQC,IAAI,QAAO,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE9B,MAAMC,WAAqD,GAAGC,IAAA,IAMwB;EAAA,IANvB;IACEC,QAAQ;IACRC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC;EACe,CAAC,GAAAL,IAAA;EAC/E;AACF;AACA;EACE,MAAM,CAACM,YAAY,EAAEC,eAAe,CAAC,GAAGhB,KAAK,CAACiB,QAAQ,CAAS,EAAE,CAAC;;EAElE;AACF;AACA;EACEjB,KAAK,CAACkB,SAAS,CAAC,MAAM;IACpBF,eAAe,CAACN,QAAQ,CAAC;EAC3B,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;;EAEd;AACF;AACA;AACA;EACE,MAAMS,YAAY,GAAIC,KAAgB,IAAK;IACzC;IACAJ,eAAe,CAACI,KAAK,CAACA,KAAK,CAAC;;IAE5B;IACAR,OAAO,IAAIA,OAAO,CAACQ,KAAK,CAAC;EAC3B,CAAC;EAED,MAAMC,aAAa,GAAGA,CAACC,CAAM,EAAEF,KAAgB,KAAK;IAClD,IAAIE,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,EAAE;MACtCJ,YAAY,CAACC,KAAK,CAAC;IACrB;EACF,CAAC;;EAED;AACF;AACA;EACE,oBACEb,IAAA;IAAKiB,IAAI,EAAC,YAAY;IAAC,eAAaV,UAAW;IAAAW,QAAA,EAC5CZ,MAAM,CAACa,GAAG,CAAEC,IAAe,IAAK;MAC/B,MAAM;UAACP,KAAK;UAAEQ,IAAI,GAAGvB,IAAI,CAACwB,MAAM;UAAEC,KAAK;UAAEC;QAAmB,CAAC,GAAGJ,IAAI;QAAbK,IAAI,GAAAC,wBAAA,CAAKN,IAAI,EAAAO,SAAA;MACpE,oBACE3B,IAAA,CAACN,aAAa,EAAAkC,aAAA,CAAAA,aAAA;QACZX,IAAI,EAAC,OAAO;QAEZY,QAAQ,EAAEzB,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;QAC5BoB,SAAS,EAAE,GAAGH,IAAI,IAAIjB,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAII,YAAY,KAAKK,KAAK,GAAG,SAAS,GAAG,SAAS,gBAAgBW,SAAS,IAAI,EAAE,EAAG;QACpIM,WAAW,EAAEjC,yBAA0B;QACvC,gBAAcW,YAAY,KAAKK,KAAM;QACrCR,OAAO,EAAEA,CAAA,KAAM,CAACD,QAAQ,IAAIQ,YAAY,CAACQ,IAAI,CAAE;QAC/CW,SAAS,EAAEhB,CAAC,IAAI,CAACX,QAAQ,IAAIU,aAAa,CAACC,CAAC,EAAEK,IAAI;MAAE,GAChDK,IAAI;QAAAP,QAAA,eACRlB,IAAA,CAACJ,oBAAoB;UAAAsB,QAAA,eACnBlB,IAAA,CAACL,WAAW;YAAAuB,QAAA,EACTK;UAAK,CACK;QAAC,CACM;MAAC,IAZlBV,KAaQ,CAAC;IAEpB,CAAC;EAAC,CACC,CAAC;AAEV,CAAC;AAED,eAAeZ,WAAW","ignoreList":[]}
+{"version":3,"file":"ChoiceChips.js","names":["React","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","Size","jsx","_jsx","ChoiceChips","_ref","selected","disabled","onClick","values","dataTestId","selectedChip","setSelectedChip","useState","useEffect","onSelectChip","value","handleKeyDown","e","key","role","children","map","item","size","Medium","label","className","rest","_objectWithoutProperties","_excluded","_objectSpread","tabIndex","onMouseDown","onKeyDown"],"sources":["../../src/Chips/ChoiceChips.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport {Size} from '../types';\r\n\r\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\r\n                                                                 selected,\r\n                                                                 disabled,\r\n                                                                 onClick,\r\n                                                                 values,\r\n                                                                 dataTestId\r\n                                                               }: ChoiceChipProps) => {\r\n  /**\r\n   * Globally used variables within the component.\r\n   */\r\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\r\n\r\n  /**\r\n   * Set the selected value for the chip.\r\n   */\r\n  React.useEffect(() => {\r\n    setSelectedChip(selected);\r\n  }, [selected]);\r\n\r\n  /**\r\n   * Sets selected chip and fires an event to parent component.\r\n   * @param value - Chip which was selected.\r\n   */\r\n  const onSelectChip = (value: ChipValue) => {\r\n    // Update selected chip\r\n    setSelectedChip(value.value);\r\n\r\n    // Fire the event\r\n    onClick && onClick(value);\r\n  };\r\n\r\n  const handleKeyDown = (e: any, value: ChipValue) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      onSelectChip(value);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Return Choice Chip component.\r\n   */\r\n  return (\r\n    <div role=\"radiogroup\" data-testid={dataTestId}>\r\n      {values.map((item: ChipValue) => {\r\n        const {value, size = Size.Medium, label, className, ...rest } = item;\r\n        return (\r\n          <ChipContainer\r\n            role=\"radio\"\r\n            key={value}\r\n            tabIndex={disabled ? -1 : 0}\r\n            className={`${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'selected' : 'outline'} interactive ${className || ''}`}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            aria-checked={selectedChip === value}\r\n            onClick={() => !disabled && onSelectChip(item)}\r\n            onKeyDown={e => !disabled && handleKeyDown(e, item)}\r\n            {...rest}>\r\n            <ChipContentContainer>\r\n              <ChipContent>\r\n                {label}\r\n              </ChipContent>\r\n            </ChipContentContainer>\r\n          </ChipContainer>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default ChoiceChips;\r\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;AACA,SAAQC,aAAa,EAAEC,WAAW,EAAEC,oBAAoB,QAAO,cAAc;;AAE7E;AACA;AACA;;AAEA,SAAQC,yBAAyB,QAAO,WAAW;AACnD,SAAQC,IAAI,QAAO,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE9B,MAAMC,WAAqD,GAAGC,IAAA,IAMwB;EAAA,IANvB;IACEC,QAAQ;IACRC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC;EACe,CAAC,GAAAL,IAAA;EAC/E;AACF;AACA;EACE,MAAM,CAACM,YAAY,EAAEC,eAAe,CAAC,GAAGhB,KAAK,CAACiB,QAAQ,CAAS,EAAE,CAAC;;EAElE;AACF;AACA;EACEjB,KAAK,CAACkB,SAAS,CAAC,MAAM;IACpBF,eAAe,CAACN,QAAQ,CAAC;EAC3B,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;;EAEd;AACF;AACA;AACA;EACE,MAAMS,YAAY,GAAIC,KAAgB,IAAK;IACzC;IACAJ,eAAe,CAACI,KAAK,CAACA,KAAK,CAAC;;IAE5B;IACAR,OAAO,IAAIA,OAAO,CAACQ,KAAK,CAAC;EAC3B,CAAC;EAED,MAAMC,aAAa,GAAGA,CAACC,CAAM,EAAEF,KAAgB,KAAK;IAClD,IAAIE,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,EAAE;MACtCJ,YAAY,CAACC,KAAK,CAAC;IACrB;EACF,CAAC;;EAED;AACF;AACA;EACE,oBACEb,IAAA;IAAKiB,IAAI,EAAC,YAAY;IAAC,eAAaV,UAAW;IAAAW,QAAA,EAC5CZ,MAAM,CAACa,GAAG,CAAEC,IAAe,IAAK;MAC/B,MAAM;UAACP,KAAK;UAAEQ,IAAI,GAAGvB,IAAI,CAACwB,MAAM;UAAEC,KAAK;UAAEC;QAAmB,CAAC,GAAGJ,IAAI;QAAbK,IAAI,GAAAC,wBAAA,CAAKN,IAAI,EAAAO,SAAA;MACpE,oBACE3B,IAAA,CAACN,aAAa,EAAAkC,aAAA,CAAAA,aAAA;QACZX,IAAI,EAAC,OAAO;QAEZY,QAAQ,EAAEzB,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;QAC5BoB,SAAS,EAAE,GAAGH,IAAI,IAAIjB,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAII,YAAY,KAAKK,KAAK,GAAG,UAAU,GAAG,SAAS,gBAAgBW,SAAS,IAAI,EAAE,EAAG;QACrIM,WAAW,EAAEjC,yBAA0B;QACvC,gBAAcW,YAAY,KAAKK,KAAM;QACrCR,OAAO,EAAEA,CAAA,KAAM,CAACD,QAAQ,IAAIQ,YAAY,CAACQ,IAAI,CAAE;QAC/CW,SAAS,EAAEhB,CAAC,IAAI,CAACX,QAAQ,IAAIU,aAAa,CAACC,CAAC,EAAEK,IAAI;MAAE,GAChDK,IAAI;QAAAP,QAAA,eACRlB,IAAA,CAACJ,oBAAoB;UAAAsB,QAAA,eACnBlB,IAAA,CAACL,WAAW;YAAAuB,QAAA,EACTK;UAAK,CACK;QAAC,CACM;MAAC,IAZlBV,KAaQ,CAAC;IAEpB,CAAC;EAAC,CACC,CAAC;AAEV,CAAC;AAED,eAAeZ,WAAW","ignoreList":[]}

package/dist/Chips/FilterChip.cjs

@@ -48,7 +48,7 @@ const FilterChip = _ref => {
     role: "checkbox",
     "aria-checked": selected,
     "data-testid": dataTestId,
-    className: `${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''} ${className || ''}`,
+    className: `${size} ${disabled ? 'disabled' : ''} ${selected ? 'selected' : 'outline'} ${!!onClick ? 'interactive' : ''} ${className || ''}`,
     tabIndex: disabled || !onClick ? -1 : 0,
     onKeyDown: e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick(),
     onMouseDown: _common.defaultOnMouseDownHandler,
@@ -57,11 +57,17 @@ const FilterChip = _ref => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContentContainer, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChipStyles.ChipContent, {
         children: [selected && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            color: 'inherit'
+          },
           className: 'chip-icon icon-left',
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SystemIcons.CheckMark, {
             className: 'icon'
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            color: 'inherit'
+          },
           children: text
         })]
       })

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      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":";;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAKA,IAAAE,MAAA,GAAAF,OAAA;AAKA,IAAAG,WAAA,GAAAH,OAAA;AAMA,IAAAI,OAAA,GAAAJ,OAAA;AAAoD,IAAAK,WAAA,GAAAL,OAAA;AAAA,MAAAM,SAAA;AApBpD;AACA;AACA;AAIA;AACA;AACA;AAGA;AACA;AACA;AAGA;AACA;AACA;AAFA,SAAAC,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,SAAAT,wBAAAS,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;AAAA,SAAAW,QAAAnB,CAAA,EAAAE,CAAA,QAAAC,CAAA,GAAAQ,MAAA,CAAAS,IAAA,CAAApB,CAAA,OAAAW,MAAA,CAAAU,qBAAA,QAAAC,CAAA,GAAAX,MAAA,CAAAU,qBAAA,CAAArB,CAAA,GAAAE,CAAA,KAAAoB,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAArB,CAAA,WAAAS,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAE,CAAA,EAAAsB,UAAA,OAAArB,CAAA,CAAAsB,IAAA,CAAAC,KAAA,CAAAvB,CAAA,EAAAmB,CAAA,YAAAnB,CAAA;AAAA,SAAAwB,cAAA3B,CAAA,aAAAE,CAAA,MAAAA,CAAA,GAAA0B,SAAA,CAAAC,MAAA,EAAA3B,CAAA,UAAAC,CAAA,WAAAyB,SAAA,CAAA1B,CAAA,IAAA0B,SAAA,CAAA1B,CAAA,QAAAA,CAAA,OAAAiB,OAAA,CAAAR,MAAA,CAAAR,CAAA,OAAA2B,OAAA,WAAA5B,CAAA,QAAA6B,gBAAA,CAAA1B,OAAA,EAAAL,CAAA,EAAAE,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAS,MAAA,CAAAqB,yBAAA,GAAArB,MAAA,CAAAsB,gBAAA,CAAAjC,CAAA,EAAAW,MAAA,CAAAqB,yBAAA,CAAA7B,CAAA,KAAAgB,OAAA,CAAAR,MAAA,CAAAR,CAAA,GAAA2B,OAAA,WAAA5B,CAAA,IAAAS,MAAA,CAAAC,cAAA,CAAAZ,CAAA,EAAAE,CAAA,EAAAS,MAAA,CAAAE,wBAAA,CAAAV,CAAA,EAAAD,CAAA,iBAAAF,CAAA;AAMA,MAAMkC,UAAoD,GAAGC,IAAA,IASwB;EAAA,IATvB;MACEC,QAAQ;MACRC,IAAI;MACJC,IAAI,GAAGC,WAAI,CAACC,MAAM;MAClBC,QAAQ;MACRC,OAAO;MACPC,SAAS;MACTC;IAEe,CAAC,GAAAT,IAAA;IADbU,IAAI,OAAAC,yBAAA,CAAAzC,OAAA,EAAA8B,IAAA,EAAArC,SAAA;EAIrE;AACF;AACA;EACE,oBACE,IAAAD,WAAA,CAAAkD,GAAA,EAACpD,WAAA,CAAAqD,aAAa,EAAArB,aAAA,CAAAA,aAAA;IACZsB,IAAI,EAAC,UAAU;IACf,gBAAcb,QAAS;IACvB,eAAaQ,UAAW;IACxBD,SAAS,EAAE,GAAGL,IAAI,IAAIG,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAIL,QAAQ,GAAG,SAAS,GAAG,SAAS,IAAI,CAAC,CAACM,OAAO,GAAG,aAAa,GAAG,EAAE,IAAIC,SAAS,IAAI,EAAE,EAAG;IAC5IO,QAAQ,EAAET,QAAQ,IAAI,CAACC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAE;IACxCS,SAAS,EAAEnD,CAAC,IAAI,CAACA,CAAC,CAACoD,GAAG,KAAK,OAAO,IAAIpD,CAAC,CAACoD,GAAG,KAAK,GAAG,KAAK,CAACX,QAAQ,IAAIC,OAAO,IAAIA,OAAO,CAAC,CAAE;IAC1FW,WAAW,EAAEC,iCAA0B;IACvCZ,OAAO,EAAEA,CAAA,KAAM,CAACD,QAAQ,IAAIC,OAAO,IAAIA,OAAO,CAAC;EAAE,GAC7CG,IAAI;IAAAU,QAAA,eACR,IAAA1D,WAAA,CAAAkD,GAAA,EAACpD,WAAA,CAAA6D,oBAAoB;MAAAD,QAAA,eACnB,IAAA1D,WAAA,CAAA4D,IAAA,EAAC9D,WAAA,CAAA+D,WAAW;QAAAH,QAAA,GACTnB,QAAQ,iBAAI,IAAAvC,WAAA,CAAAkD,GAAA;UAAKJ,SAAS,EAAE,qBAAsB;UAAAY,QAAA,eAAC,IAAA1D,WAAA,CAAAkD,GAAA,EAACrD,MAAA,CAAAiE,WAAW,CAACC,SAAS;YAACjB,SAAS,EAAE;UAAO,CAAC;QAAC,CAAK,CAAC,eACrG,IAAA9C,WAAA,CAAAkD,GAAA;UAAAQ,QAAA,EAAMlB;QAAI,CAAM,CAAC;MAAA,CACN;IAAC,CACM;EAAC,EACV,CAAC;AAEpB,CAAC;AAAC,IAAAwB,QAAA,GAAAC,OAAA,CAAAzD,OAAA,GAEa6B,UAAU","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","style","color","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 ? 'selected' : '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 style={{color:'inherit'}} className={'chip-icon icon-left'}><SystemIcons.CheckMark className={'icon'}/></div>}\r\n          <div style={{color:'inherit'}}>{text}</div>\r\n        </ChipContent>\r\n      </ChipContentContainer>\r\n    </ChipContainer>\r\n  );\r\n};\r\n\r\nexport default FilterChip;\r\n"],"mappings":";;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAKA,IAAAE,MAAA,GAAAF,OAAA;AAKA,IAAAG,WAAA,GAAAH,OAAA;AAMA,IAAAI,OAAA,GAAAJ,OAAA;AAAoD,IAAAK,WAAA,GAAAL,OAAA;AAAA,MAAAM,SAAA;AApBpD;AACA;AACA;AAIA;AACA;AACA;AAGA;AACA;AACA;AAGA;AACA;AACA;AAFA,SAAAC,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,SAAAT,wBAAAS,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;AAAA,SAAAW,QAAAnB,CAAA,EAAAE,CAAA,QAAAC,CAAA,GAAAQ,MAAA,CAAAS,IAAA,CAAApB,CAAA,OAAAW,MAAA,CAAAU,qBAAA,QAAAC,CAAA,GAAAX,MAAA,CAAAU,qBAAA,CAAArB,CAAA,GAAAE,CAAA,KAAAoB,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAArB,CAAA,WAAAS,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAE,CAAA,EAAAsB,UAAA,OAAArB,CAAA,CAAAsB,IAAA,CAAAC,KAAA,CAAAvB,CAAA,EAAAmB,CAAA,YAAAnB,CAAA;AAAA,SAAAwB,cAAA3B,CAAA,aAAAE,CAAA,MAAAA,CAAA,GAAA0B,SAAA,CAAAC,MAAA,EAAA3B,CAAA,UAAAC,CAAA,WAAAyB,SAAA,CAAA1B,CAAA,IAAA0B,SAAA,CAAA1B,CAAA,QAAAA,CAAA,OAAAiB,OAAA,CAAAR,MAAA,CAAAR,CAAA,OAAA2B,OAAA,WAAA5B,CAAA,QAAA6B,gBAAA,CAAA1B,OAAA,EAAAL,CAAA,EAAAE,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAS,MAAA,CAAAqB,yBAAA,GAAArB,MAAA,CAAAsB,gBAAA,CAAAjC,CAAA,EAAAW,MAAA,CAAAqB,yBAAA,CAAA7B,CAAA,KAAAgB,OAAA,CAAAR,MAAA,CAAAR,CAAA,GAAA2B,OAAA,WAAA5B,CAAA,IAAAS,MAAA,CAAAC,cAAA,CAAAZ,CAAA,EAAAE,CAAA,EAAAS,MAAA,CAAAE,wBAAA,CAAAV,CAAA,EAAAD,CAAA,iBAAAF,CAAA;AAMA,MAAMkC,UAAoD,GAAGC,IAAA,IASwB;EAAA,IATvB;MACEC,QAAQ;MACRC,IAAI;MACJC,IAAI,GAAGC,WAAI,CAACC,MAAM;MAClBC,QAAQ;MACRC,OAAO;MACPC,SAAS;MACTC;IAEe,CAAC,GAAAT,IAAA;IADbU,IAAI,OAAAC,yBAAA,CAAAzC,OAAA,EAAA8B,IAAA,EAAArC,SAAA;EAIrE;AACF;AACA;EACE,oBACE,IAAAD,WAAA,CAAAkD,GAAA,EAACpD,WAAA,CAAAqD,aAAa,EAAArB,aAAA,CAAAA,aAAA;IACZsB,IAAI,EAAC,UAAU;IACf,gBAAcb,QAAS;IACvB,eAAaQ,UAAW;IACxBD,SAAS,EAAE,GAAGL,IAAI,IAAIG,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAIL,QAAQ,GAAG,UAAU,GAAG,SAAS,IAAI,CAAC,CAACM,OAAO,GAAG,aAAa,GAAG,EAAE,IAAIC,SAAS,IAAI,EAAE,EAAG;IAC7IO,QAAQ,EAAET,QAAQ,IAAI,CAACC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAE;IACxCS,SAAS,EAAEnD,CAAC,IAAI,CAACA,CAAC,CAACoD,GAAG,KAAK,OAAO,IAAIpD,CAAC,CAACoD,GAAG,KAAK,GAAG,KAAK,CAACX,QAAQ,IAAIC,OAAO,IAAIA,OAAO,CAAC,CAAE;IAC1FW,WAAW,EAAEC,iCAA0B;IACvCZ,OAAO,EAAEA,CAAA,KAAM,CAACD,QAAQ,IAAIC,OAAO,IAAIA,OAAO,CAAC;EAAE,GAC7CG,IAAI;IAAAU,QAAA,eACR,IAAA1D,WAAA,CAAAkD,GAAA,EAACpD,WAAA,CAAA6D,oBAAoB;MAAAD,QAAA,eACnB,IAAA1D,WAAA,CAAA4D,IAAA,EAAC9D,WAAA,CAAA+D,WAAW;QAAAH,QAAA,GACTnB,QAAQ,iBAAI,IAAAvC,WAAA,CAAAkD,GAAA;UAAKY,KAAK,EAAE;YAACC,KAAK,EAAC;UAAS,CAAE;UAACjB,SAAS,EAAE,qBAAsB;UAAAY,QAAA,eAAC,IAAA1D,WAAA,CAAAkD,GAAA,EAACrD,MAAA,CAAAmE,WAAW,CAACC,SAAS;YAACnB,SAAS,EAAE;UAAO,CAAC;QAAC,CAAK,CAAC,eAC/H,IAAA9C,WAAA,CAAAkD,GAAA;UAAKY,KAAK,EAAE;YAACC,KAAK,EAAC;UAAS,CAAE;UAAAL,QAAA,EAAElB;QAAI,CAAM,CAAC;MAAA,CAChC;IAAC,CACM;EAAC,EACV,CAAC;AAEpB,CAAC;AAAC,IAAA0B,QAAA,GAAAC,OAAA,CAAA3D,OAAA,GAEa6B,UAAU","ignoreList":[]}

package/dist/Chips/FilterChip.js

@@ -43,7 +43,7 @@ const FilterChip = _ref => {
     role: "checkbox",
     "aria-checked": selected,
     "data-testid": dataTestId,
-    className: `${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''} ${className || ''}`,
+    className: `${size} ${disabled ? 'disabled' : ''} ${selected ? 'selected' : 'outline'} ${!!onClick ? 'interactive' : ''} ${className || ''}`,
     tabIndex: disabled || !onClick ? -1 : 0,
     onKeyDown: e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick(),
     onMouseDown: defaultOnMouseDownHandler,
@@ -52,11 +52,17 @@ const FilterChip = _ref => {
     children: /*#__PURE__*/_jsx(ChipContentContainer, {
       children: /*#__PURE__*/_jsxs(ChipContent, {
         children: [selected && /*#__PURE__*/_jsx("div", {
+          style: {
+            color: 'inherit'
+          },
           className: 'chip-icon icon-left',
           children: /*#__PURE__*/_jsx(SystemIcons.CheckMark, {
             className: 'icon'
           })
         }), /*#__PURE__*/_jsx("div", {
+          style: {
+            color: 'inherit'
+          },
           children: text
         })]
       })