@laerdal/life-react-components 1.8.0-dev.1.full → 1.8.0-dev.10

package/dist/Chips/ChipStyles.cjs

@@ -23,7 +23,7 @@ var ChipContent = _styledComponents.default.div(_templateObject2 || (_templateOb
 
 exports.ChipContent = ChipContent;
 
-var ChipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  cursor: pointer;\n  position: relative;\n\n  &.medium {\n    ", " {\n      gap: 6px;\n      padding: 10px 16px;\n\n      ", "\n      .chip-icon {\n        height: 20px;\n        width: 20px;\n\n        svg {\n          height: 20px;\n          width: 20px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 38px;\n\n      .action-right {\n        right: -2px;\n      }\n    }\n  }\n\n  &.large {\n    ", " {\n      gap: 8px;\n      padding: 12px 20px;\n\n      ", "\n      .chip-icon {\n        height: 24px;\n        width: 24px;\n\n        svg {\n          height: 24px;\n          width: 24px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 48px;\n\n      .action-right {\n        right: 4px;\n      }\n    }\n  }\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.normal {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.normal:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.normal:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.outline {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n    }\n  }\n\n  &.interactive.outline:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.outline:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n  //account for border\n  &.small.outline:not(.disabled) {\n    ", " {\n      padding: 2px 10px;\n    }\n  }\n\n  &.medium.outline:not(.disabled) {\n    ", " {\n      padding: 8px 14px;\n    }\n  }\n\n  &.large.outline:not(.disabled) {\n    ", " {\n      padding: 10px 18px;\n    }\n  }\n\n  &.error {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.error:hover:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.error:active:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  .action-right:focus {\n    ", "\n  }\n\n  .action-right:hover .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right:active .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right.disabled .chip-icon {\n    background-color: transparent;\n    color: ", ";\n  }\n\n  &.error {\n    .action-right:hover .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right:active .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right.disabled .chip-icon {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      pointer-events: none;\n    }\n\n    ", " {\n      border: none !important;\n      background-color: ", " !important;\n      color: ", " !important;\n    }\n  }\n"])), ChipContent, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), ChipContent, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), _styles.focusStyles, _styles.COLORS.white, ChipContent, _styles.COLORS.primary_500, ChipContent, _styles.COLORS.primary_700, ChipContent, _styles.COLORS.primary_800, _styles.COLORS.neutral_600, ChipContent, _styles.COLORS.white, _styles.COLORS.neutral_200, ChipContent, _styles.COLORS.primary_20, _styles.COLORS.primary_200, _styles.COLORS.primary_700, ChipContent, _styles.COLORS.primary_100, _styles.COLORS.primary_300, _styles.COLORS.primary_800, ChipContent, ChipContent, ChipContent, ChipContent, _styles.COLORS.critical_100, _styles.COLORS.critical_600, ChipContent, _styles.COLORS.critical_200, _styles.COLORS.critical_700, ChipContent, _styles.COLORS.critical_300, _styles.COLORS.critical_800, _styles.focusStyles, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_300, _styles.COLORS.critical_200, _styles.COLORS.critical_700, _styles.COLORS.critical_300, _styles.COLORS.critical_800, _styles.COLORS.primary_300, ChipContentContainer, ChipContent, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
+var ChipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  cursor: pointer;\n  position: relative;\n\n  &.medium {\n    ", " {\n      gap: 6px;\n      padding: 10px 16px;\n\n      ", "\n      .chip-icon {\n        height: 20px;\n        width: 20px;\n\n        svg {\n          height: 20px;\n          width: 20px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 38px;\n\n      .action-right {\n        right: -2px;\n      }\n    }\n  }\n\n  &.large {\n    ", " {\n      gap: 8px;\n      padding: 12px 20px;\n\n      ", "\n      .chip-icon {\n        height: 24px;\n        width: 24px;\n\n        svg {\n          height: 24px;\n          width: 24px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 48px;\n\n      .action-right {\n        right: 4px;\n      }\n    }\n  }\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.default {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.default:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.default:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.outline {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n    }\n  }\n\n  &.interactive.outline:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.outline:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n  //account for border\n  &.small.outline:not(.disabled) {\n    ", " {\n      padding: 2px 10px;\n    }\n  }\n\n  &.medium.outline:not(.disabled) {\n    ", " {\n      padding: 8px 14px;\n    }\n  }\n\n  &.large.outline:not(.disabled) {\n    ", " {\n      padding: 10px 18px;\n    }\n  }\n\n  &.invalid {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.invalid:hover:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.invalid:active:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  .action-right:focus {\n    ", "\n  }\n\n  .action-right:hover .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right:active .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right.disabled .chip-icon {\n    background-color: transparent;\n    color: ", ";\n  }\n\n  &.invalid {\n    .action-right:hover .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right:active .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right.disabled .chip-icon {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      pointer-events: none;\n    }\n\n    ", " {\n      border: none !important;\n      background-color: ", " !important;\n      color: ", " !important;\n    }\n  }\n"])), ChipContent, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), ChipContent, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), _styles.focusStyles, _styles.COLORS.white, ChipContent, _styles.COLORS.primary_500, ChipContent, _styles.COLORS.primary_700, ChipContent, _styles.COLORS.primary_800, _styles.COLORS.neutral_600, ChipContent, _styles.COLORS.white, _styles.COLORS.neutral_200, ChipContent, _styles.COLORS.primary_20, _styles.COLORS.primary_200, _styles.COLORS.primary_700, ChipContent, _styles.COLORS.primary_100, _styles.COLORS.primary_300, _styles.COLORS.primary_800, ChipContent, ChipContent, ChipContent, ChipContent, _styles.COLORS.critical_100, _styles.COLORS.critical_600, ChipContent, _styles.COLORS.critical_200, _styles.COLORS.critical_700, ChipContent, _styles.COLORS.critical_300, _styles.COLORS.critical_800, _styles.focusStyles, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_300, _styles.COLORS.critical_200, _styles.COLORS.critical_700, _styles.COLORS.critical_300, _styles.COLORS.critical_800, _styles.COLORS.primary_300, ChipContentContainer, ChipContent, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
 
 exports.ChipContainer = ChipContainer;
 //# sourceMappingURL=ChipStyles.cjs.map

package/dist/Chips/ChipStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/ChipStyles.ts"],"names":["ChipContentContainer","styled","div","ChipContent","ComponentTextStyle","Bold","ChipContainer","focusStyles","COLORS","white","primary_500","primary_700","primary_800","neutral_600","neutral_200","primary_20","primary_200","primary_100","primary_300","critical_100","critical_600","critical_200","critical_700","critical_300","critical_800","neutral_100","neutral_300"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;;;AAEO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,2KAA1B;;;;AAOA,IAAMC,WAAW,GAAGF,0BAAOC,GAAV,ywBACpB,gCAAmBE,2BAAmBC,IAAtC,EAA4C,IAA5C,CADoB,CAAjB;;;;AA+CA,IAAMC,aAAa,GAAGL,0BAAOC,GAAV,smGAMpBC,WANoB,EAUlB,+BAAkBC,2BAAmBC,IAArC,EAA2C,IAA3C,CAVkB,EAgCpBF,WAhCoB,EAoClB,+BAAkBC,2BAAmBC,IAArC,EAA2C,IAA3C,CApCkB,EA0DpBE,mBA1DoB,EA8DbC,eAAOC,KA9DM,EAgEpBN,WAhEoB,EAiEAK,eAAOE,WAjEP,EAsEpBP,WAtEoB,EAuEAK,eAAOG,WAvEP,EA4EpBR,WA5EoB,EA6EAK,eAAOI,WA7EP,EAkFbJ,eAAOK,WAlFM,EAoFpBV,WApFoB,EAqFAK,eAAOC,KArFP,EAsFAD,eAAOM,WAtFP,EA2FpBX,WA3FoB,EA4FAK,eAAOO,UA5FP,EA6FAP,eAAOQ,WA7FP,EA8FXR,eAAOG,WA9FI,EAmGpBR,WAnGoB,EAoGAK,eAAOS,WApGP,EAqGAT,eAAOU,WArGP,EAsGXV,eAAOI,WAtGI,EA6GpBT,WA7GoB,EAmHpBA,WAnHoB,EAyHpBA,WAzHoB,EA+HpBA,WA/HoB,EAgIAK,eAAOW,YAhIP,EAiIXX,eAAOY,YAjII,EAsIpBjB,WAtIoB,EAuINK,eAAOa,YAvID,EAwIXb,eAAOc,YAxII,EA6IpBnB,WA7IoB,EA8INK,eAAOe,YA9ID,EA+IXf,eAAOgB,YA/II,EAoJpBjB,mBApJoB,EAwJFC,eAAOG,WAxJL,EA4JFH,eAAOI,WA5JL,EAiKbJ,eAAOU,WAjKM,EAsKAV,eAAOa,YAtKP,EAuKXb,eAAOc,YAvKI,EA2KAd,eAAOe,YA3KP,EA4KXf,eAAOgB,YA5KI,EAiLXhB,eAAOU,WAjLI,EAwLpBlB,oBAxLoB,EA4LpBG,WA5LoB,EA8LAK,eAAOiB,WA9LP,EA+LXjB,eAAOkB,WA/LI,CAAnB","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';\n\nexport const ChipContentContainer = styled.div`\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n  width: max-content;\n`;\n\nexport const ChipContent = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n\n  position: relative;\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  min-height: 24px;\n  box-sizing: border-box;\n  border-radius: 24px;\n  padding: 4px 12px;\n\n  .chip-icon {\n    height: 16px;\n    width: 16px;\n    border-radius: 50%;\n\n    svg {\n      height: 16px;\n      width: 16px;\n    }\n  }\n\n  .icon-left {\n    margin-left: -4px;\n  }\n\n  .icon-right {\n    margin-right: -4px;\n  }\n\n  .action-right {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 48px;\n    width: 48px;\n    right: -8px;\n  }\n\n  &.with-action-right {\n    position: relative;\n    padding-right: 28px;\n  }\n`;\n\nexport const ChipContainer = styled.div`\n  display: inline-block;\n  cursor: pointer;\n  position: relative;\n\n  &.medium {\n    ${ChipContent} {\n      gap: 6px;\n      padding: 10px 16px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n      .chip-icon {\n        height: 20px;\n        width: 20px;\n\n        svg {\n          height: 20px;\n          width: 20px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 38px;\n\n      .action-right {\n        right: -2px;\n      }\n    }\n  }\n\n  &.large {\n    ${ChipContent} {\n      gap: 8px;\n      padding: 12px 20px;\n\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      .chip-icon {\n        height: 24px;\n        width: 24px;\n\n        svg {\n          height: 24px;\n          width: 24px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 48px;\n\n      .action-right {\n        right: 4px;\n      }\n    }\n  }\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.normal {\n    color: ${COLORS.white};\n\n    ${ChipContent} {\n      background-color: ${COLORS.primary_500};\n    }\n  }\n\n  &.interactive.normal:hover:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_700};\n    }\n  }\n\n  &.interactive.normal:active:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n  &.outline {\n    color: ${COLORS.neutral_600};\n\n    ${ChipContent} {\n      background-color: ${COLORS.white};\n      border: 2px solid ${COLORS.neutral_200};\n    }\n  }\n\n  &.interactive.outline:hover:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_20};\n      border: 2px solid ${COLORS.primary_200};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &.interactive.outline:active:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_100};\n      border: 2px solid ${COLORS.primary_300};\n      color: ${COLORS.primary_800};\n      box-shadow: none;\n    }\n  }\n\n  //account for border\n  &.small.outline:not(.disabled) {\n    ${ChipContent} {\n      padding: 2px 10px;\n    }\n  }\n\n  &.medium.outline:not(.disabled) {\n    ${ChipContent} {\n      padding: 8px 14px;\n    }\n  }\n\n  &.large.outline:not(.disabled) {\n    ${ChipContent} {\n      padding: 10px 18px;\n    }\n  }\n\n  &.error {\n    ${ChipContent} {\n      background-color: ${COLORS.critical_100};\n      color: ${COLORS.critical_600};\n    }\n  }\n\n  &.interactive.error:hover:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.critical_200};\n      color: ${COLORS.critical_700};\n    }\n  }\n\n  &.interactive.error:active:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.critical_300};\n      color: ${COLORS.critical_800};\n    }\n  }\n\n  .action-right:focus {\n    ${focusStyles}\n  }\n\n  .action-right:hover .chip-icon {\n    background-color: ${COLORS.primary_700};\n  }\n\n  .action-right:active .chip-icon {\n    background-color: ${COLORS.primary_800};\n  }\n\n  .action-right.disabled .chip-icon {\n    background-color: transparent;\n    color: ${COLORS.primary_300};\n  }\n\n  &.error {\n    .action-right:hover .chip-icon {\n      background-color: ${COLORS.critical_200};\n      color: ${COLORS.critical_700};\n    }\n\n    .action-right:active .chip-icon {\n      background-color: ${COLORS.critical_300};\n      color: ${COLORS.critical_800};\n    }\n\n    .action-right.disabled .chip-icon {\n      background-color: transparent;\n      color: ${COLORS.primary_300};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ${ChipContentContainer} {\n      pointer-events: none;\n    }\n\n    ${ChipContent} {\n      border: none !important;\n      background-color: ${COLORS.neutral_100} !important;\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n"],"file":"ChipStyles.cjs"}
+{"version":3,"sources":["../../src/Chips/ChipStyles.ts"],"names":["ChipContentContainer","styled","div","ChipContent","ComponentTextStyle","Bold","ChipContainer","focusStyles","COLORS","white","primary_500","primary_700","primary_800","neutral_600","neutral_200","primary_20","primary_200","primary_100","primary_300","critical_100","critical_600","critical_200","critical_700","critical_300","critical_800","neutral_100","neutral_300"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;;;AAEO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,2KAA1B;;;;AAOA,IAAMC,WAAW,GAAGF,0BAAOC,GAAV,ywBACpB,gCAAmBE,2BAAmBC,IAAtC,EAA4C,IAA5C,CADoB,CAAjB;;;;AA+CA,IAAMC,aAAa,GAAGL,0BAAOC,GAAV,inGAMpBC,WANoB,EAUlB,+BAAkBC,2BAAmBC,IAArC,EAA2C,IAA3C,CAVkB,EAgCpBF,WAhCoB,EAoClB,+BAAkBC,2BAAmBC,IAArC,EAA2C,IAA3C,CApCkB,EA0DpBE,mBA1DoB,EA8DbC,eAAOC,KA9DM,EAgEpBN,WAhEoB,EAiEAK,eAAOE,WAjEP,EAsEpBP,WAtEoB,EAuEAK,eAAOG,WAvEP,EA4EpBR,WA5EoB,EA6EAK,eAAOI,WA7EP,EAkFbJ,eAAOK,WAlFM,EAoFpBV,WApFoB,EAqFAK,eAAOC,KArFP,EAsFAD,eAAOM,WAtFP,EA2FpBX,WA3FoB,EA4FAK,eAAOO,UA5FP,EA6FAP,eAAOQ,WA7FP,EA8FXR,eAAOG,WA9FI,EAmGpBR,WAnGoB,EAoGAK,eAAOS,WApGP,EAqGAT,eAAOU,WArGP,EAsGXV,eAAOI,WAtGI,EA6GpBT,WA7GoB,EAmHpBA,WAnHoB,EAyHpBA,WAzHoB,EA+HpBA,WA/HoB,EAgIAK,eAAOW,YAhIP,EAiIXX,eAAOY,YAjII,EAsIpBjB,WAtIoB,EAuINK,eAAOa,YAvID,EAwIXb,eAAOc,YAxII,EA6IpBnB,WA7IoB,EA8INK,eAAOe,YA9ID,EA+IXf,eAAOgB,YA/II,EAoJpBjB,mBApJoB,EAwJFC,eAAOG,WAxJL,EA4JFH,eAAOI,WA5JL,EAiKbJ,eAAOU,WAjKM,EAsKAV,eAAOa,YAtKP,EAuKXb,eAAOc,YAvKI,EA2KAd,eAAOe,YA3KP,EA4KXf,eAAOgB,YA5KI,EAiLXhB,eAAOU,WAjLI,EAwLpBlB,oBAxLoB,EA4LpBG,WA5LoB,EA8LAK,eAAOiB,WA9LP,EA+LXjB,eAAOkB,WA/LI,CAAnB","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';\n\nexport const ChipContentContainer = styled.div`\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n  width: max-content;\n`;\n\nexport const ChipContent = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n\n  position: relative;\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  min-height: 24px;\n  box-sizing: border-box;\n  border-radius: 24px;\n  padding: 4px 12px;\n\n  .chip-icon {\n    height: 16px;\n    width: 16px;\n    border-radius: 50%;\n\n    svg {\n      height: 16px;\n      width: 16px;\n    }\n  }\n\n  .icon-left {\n    margin-left: -4px;\n  }\n\n  .icon-right {\n    margin-right: -4px;\n  }\n\n  .action-right {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 48px;\n    width: 48px;\n    right: -8px;\n  }\n\n  &.with-action-right {\n    position: relative;\n    padding-right: 28px;\n  }\n`;\n\nexport const ChipContainer = styled.div`\n  display: inline-block;\n  cursor: pointer;\n  position: relative;\n\n  &.medium {\n    ${ChipContent} {\n      gap: 6px;\n      padding: 10px 16px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n      .chip-icon {\n        height: 20px;\n        width: 20px;\n\n        svg {\n          height: 20px;\n          width: 20px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 38px;\n\n      .action-right {\n        right: -2px;\n      }\n    }\n  }\n\n  &.large {\n    ${ChipContent} {\n      gap: 8px;\n      padding: 12px 20px;\n\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      .chip-icon {\n        height: 24px;\n        width: 24px;\n\n        svg {\n          height: 24px;\n          width: 24px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 48px;\n\n      .action-right {\n        right: 4px;\n      }\n    }\n  }\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.default {\n    color: ${COLORS.white};\n\n    ${ChipContent} {\n      background-color: ${COLORS.primary_500};\n    }\n  }\n\n  &.interactive.default:hover:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_700};\n    }\n  }\n\n  &.interactive.default:active:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n  &.outline {\n    color: ${COLORS.neutral_600};\n\n    ${ChipContent} {\n      background-color: ${COLORS.white};\n      border: 2px solid ${COLORS.neutral_200};\n    }\n  }\n\n  &.interactive.outline:hover:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_20};\n      border: 2px solid ${COLORS.primary_200};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &.interactive.outline:active:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_100};\n      border: 2px solid ${COLORS.primary_300};\n      color: ${COLORS.primary_800};\n      box-shadow: none;\n    }\n  }\n\n  //account for border\n  &.small.outline:not(.disabled) {\n    ${ChipContent} {\n      padding: 2px 10px;\n    }\n  }\n\n  &.medium.outline:not(.disabled) {\n    ${ChipContent} {\n      padding: 8px 14px;\n    }\n  }\n\n  &.large.outline:not(.disabled) {\n    ${ChipContent} {\n      padding: 10px 18px;\n    }\n  }\n\n  &.invalid {\n    ${ChipContent} {\n      background-color: ${COLORS.critical_100};\n      color: ${COLORS.critical_600};\n    }\n  }\n\n  &.interactive.invalid:hover:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.critical_200};\n      color: ${COLORS.critical_700};\n    }\n  }\n\n  &.interactive.invalid:active:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.critical_300};\n      color: ${COLORS.critical_800};\n    }\n  }\n\n  .action-right:focus {\n    ${focusStyles}\n  }\n\n  .action-right:hover .chip-icon {\n    background-color: ${COLORS.primary_700};\n  }\n\n  .action-right:active .chip-icon {\n    background-color: ${COLORS.primary_800};\n  }\n\n  .action-right.disabled .chip-icon {\n    background-color: transparent;\n    color: ${COLORS.primary_300};\n  }\n\n  &.invalid {\n    .action-right:hover .chip-icon {\n      background-color: ${COLORS.critical_200};\n      color: ${COLORS.critical_700};\n    }\n\n    .action-right:active .chip-icon {\n      background-color: ${COLORS.critical_300};\n      color: ${COLORS.critical_800};\n    }\n\n    .action-right.disabled .chip-icon {\n      background-color: transparent;\n      color: ${COLORS.primary_300};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ${ChipContentContainer} {\n      pointer-events: none;\n    }\n\n    ${ChipContent} {\n      border: none !important;\n      background-color: ${COLORS.neutral_100} !important;\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n"],"file":"ChipStyles.cjs"}

package/dist/Chips/ChipStyles.js

@@ -13,5 +13,5 @@ import styled from 'styled-components';
 import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';
 export var ChipContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n  width: max-content;\n"])));
 export var ChipContent = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n\n  position: relative;\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  min-height: 24px;\n  box-sizing: border-box;\n  border-radius: 24px;\n  padding: 4px 12px;\n\n  .chip-icon {\n    height: 16px;\n    width: 16px;\n    border-radius: 50%;\n\n    svg {\n      height: 16px;\n      width: 16px;\n    }\n  }\n\n  .icon-left {\n    margin-left: -4px;\n  }\n\n  .icon-right {\n    margin-right: -4px;\n  }\n\n  .action-right {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 48px;\n    width: 48px;\n    right: -8px;\n  }\n\n  &.with-action-right {\n    position: relative;\n    padding-right: 28px;\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null));
-export var ChipContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  cursor: pointer;\n  position: relative;\n\n  &.medium {\n    ", " {\n      gap: 6px;\n      padding: 10px 16px;\n\n      ", "\n      .chip-icon {\n        height: 20px;\n        width: 20px;\n\n        svg {\n          height: 20px;\n          width: 20px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 38px;\n\n      .action-right {\n        right: -2px;\n      }\n    }\n  }\n\n  &.large {\n    ", " {\n      gap: 8px;\n      padding: 12px 20px;\n\n      ", "\n      .chip-icon {\n        height: 24px;\n        width: 24px;\n\n        svg {\n          height: 24px;\n          width: 24px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 48px;\n\n      .action-right {\n        right: 4px;\n      }\n    }\n  }\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.normal {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.normal:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.normal:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.outline {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n    }\n  }\n\n  &.interactive.outline:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.outline:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n  //account for border\n  &.small.outline:not(.disabled) {\n    ", " {\n      padding: 2px 10px;\n    }\n  }\n\n  &.medium.outline:not(.disabled) {\n    ", " {\n      padding: 8px 14px;\n    }\n  }\n\n  &.large.outline:not(.disabled) {\n    ", " {\n      padding: 10px 18px;\n    }\n  }\n\n  &.error {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.error:hover:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.error:active:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  .action-right:focus {\n    ", "\n  }\n\n  .action-right:hover .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right:active .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right.disabled .chip-icon {\n    background-color: transparent;\n    color: ", ";\n  }\n\n  &.error {\n    .action-right:hover .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right:active .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right.disabled .chip-icon {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      pointer-events: none;\n    }\n\n    ", " {\n      border: none !important;\n      background-color: ", " !important;\n      color: ", " !important;\n    }\n  }\n"])), ChipContent, ComponentSStyling(ComponentTextStyle.Bold, null), ChipContent, ComponentMStyling(ComponentTextStyle.Bold, null), focusStyles, COLORS.white, ChipContent, COLORS.primary_500, ChipContent, COLORS.primary_700, ChipContent, COLORS.primary_800, COLORS.neutral_600, ChipContent, COLORS.white, COLORS.neutral_200, ChipContent, COLORS.primary_20, COLORS.primary_200, COLORS.primary_700, ChipContent, COLORS.primary_100, COLORS.primary_300, COLORS.primary_800, ChipContent, ChipContent, ChipContent, ChipContent, COLORS.critical_100, COLORS.critical_600, ChipContent, COLORS.critical_200, COLORS.critical_700, ChipContent, COLORS.critical_300, COLORS.critical_800, focusStyles, COLORS.primary_700, COLORS.primary_800, COLORS.primary_300, COLORS.critical_200, COLORS.critical_700, COLORS.critical_300, COLORS.critical_800, COLORS.primary_300, ChipContentContainer, ChipContent, COLORS.neutral_100, COLORS.neutral_300);
+export var ChipContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  cursor: pointer;\n  position: relative;\n\n  &.medium {\n    ", " {\n      gap: 6px;\n      padding: 10px 16px;\n\n      ", "\n      .chip-icon {\n        height: 20px;\n        width: 20px;\n\n        svg {\n          height: 20px;\n          width: 20px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 38px;\n\n      .action-right {\n        right: -2px;\n      }\n    }\n  }\n\n  &.large {\n    ", " {\n      gap: 8px;\n      padding: 12px 20px;\n\n      ", "\n      .chip-icon {\n        height: 24px;\n        width: 24px;\n\n        svg {\n          height: 24px;\n          width: 24px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 48px;\n\n      .action-right {\n        right: 4px;\n      }\n    }\n  }\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.default {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.default:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.default:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.outline {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n    }\n  }\n\n  &.interactive.outline:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.outline:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n  //account for border\n  &.small.outline:not(.disabled) {\n    ", " {\n      padding: 2px 10px;\n    }\n  }\n\n  &.medium.outline:not(.disabled) {\n    ", " {\n      padding: 8px 14px;\n    }\n  }\n\n  &.large.outline:not(.disabled) {\n    ", " {\n      padding: 10px 18px;\n    }\n  }\n\n  &.invalid {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.invalid:hover:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.invalid:active:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  .action-right:focus {\n    ", "\n  }\n\n  .action-right:hover .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right:active .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right.disabled .chip-icon {\n    background-color: transparent;\n    color: ", ";\n  }\n\n  &.invalid {\n    .action-right:hover .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right:active .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right.disabled .chip-icon {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      pointer-events: none;\n    }\n\n    ", " {\n      border: none !important;\n      background-color: ", " !important;\n      color: ", " !important;\n    }\n  }\n"])), ChipContent, ComponentSStyling(ComponentTextStyle.Bold, null), ChipContent, ComponentMStyling(ComponentTextStyle.Bold, null), focusStyles, COLORS.white, ChipContent, COLORS.primary_500, ChipContent, COLORS.primary_700, ChipContent, COLORS.primary_800, COLORS.neutral_600, ChipContent, COLORS.white, COLORS.neutral_200, ChipContent, COLORS.primary_20, COLORS.primary_200, COLORS.primary_700, ChipContent, COLORS.primary_100, COLORS.primary_300, COLORS.primary_800, ChipContent, ChipContent, ChipContent, ChipContent, COLORS.critical_100, COLORS.critical_600, ChipContent, COLORS.critical_200, COLORS.critical_700, ChipContent, COLORS.critical_300, COLORS.critical_800, focusStyles, COLORS.primary_700, COLORS.primary_800, COLORS.primary_300, COLORS.critical_200, COLORS.critical_700, COLORS.critical_300, COLORS.critical_800, COLORS.primary_300, ChipContentContainer, ChipContent, COLORS.neutral_100, COLORS.neutral_300);
 //# sourceMappingURL=ChipStyles.js.map

package/dist/Chips/ChipStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/ChipStyles.ts"],"names":["styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","focusStyles","ChipContentContainer","div","ChipContent","Bold","ChipContainer","white","primary_500","primary_700","primary_800","neutral_600","neutral_200","primary_20","primary_200","primary_100","primary_300","critical_100","critical_600","critical_200","critical_700","critical_300","critical_800","neutral_100","neutral_300"],"mappings":";;;;AAAA;AACA;AACA;AACA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,iBAAjB,EAAoCC,iBAApC,EAAuDC,kBAAvD,EAA2EC,kBAA3E,EAA+FC,WAA/F,QAAkH,WAAlH;AAEA,OAAO,IAAMC,oBAAoB,GAAGP,MAAM,CAACQ,GAAV,6JAA1B;AAOP,OAAO,IAAMC,WAAW,GAAGT,MAAM,CAACQ,GAAV,2vBACpBH,kBAAkB,CAACD,kBAAkB,CAACM,IAApB,EAA0B,IAA1B,CADE,CAAjB;AA+CP,OAAO,IAAMC,aAAa,GAAGX,MAAM,CAACQ,GAAV,wlGAMpBC,WANoB,EAUlBN,iBAAiB,CAACC,kBAAkB,CAACM,IAApB,EAA0B,IAA1B,CAVC,EAgCpBD,WAhCoB,EAoClBP,iBAAiB,CAACE,kBAAkB,CAACM,IAApB,EAA0B,IAA1B,CApCC,EA0DpBJ,WA1DoB,EA8DbL,MAAM,CAACW,KA9DM,EAgEpBH,WAhEoB,EAiEAR,MAAM,CAACY,WAjEP,EAsEpBJ,WAtEoB,EAuEAR,MAAM,CAACa,WAvEP,EA4EpBL,WA5EoB,EA6EAR,MAAM,CAACc,WA7EP,EAkFbd,MAAM,CAACe,WAlFM,EAoFpBP,WApFoB,EAqFAR,MAAM,CAACW,KArFP,EAsFAX,MAAM,CAACgB,WAtFP,EA2FpBR,WA3FoB,EA4FAR,MAAM,CAACiB,UA5FP,EA6FAjB,MAAM,CAACkB,WA7FP,EA8FXlB,MAAM,CAACa,WA9FI,EAmGpBL,WAnGoB,EAoGAR,MAAM,CAACmB,WApGP,EAqGAnB,MAAM,CAACoB,WArGP,EAsGXpB,MAAM,CAACc,WAtGI,EA6GpBN,WA7GoB,EAmHpBA,WAnHoB,EAyHpBA,WAzHoB,EA+HpBA,WA/HoB,EAgIAR,MAAM,CAACqB,YAhIP,EAiIXrB,MAAM,CAACsB,YAjII,EAsIpBd,WAtIoB,EAuINR,MAAM,CAACuB,YAvID,EAwIXvB,MAAM,CAACwB,YAxII,EA6IpBhB,WA7IoB,EA8INR,MAAM,CAACyB,YA9ID,EA+IXzB,MAAM,CAAC0B,YA/II,EAoJpBrB,WApJoB,EAwJFL,MAAM,CAACa,WAxJL,EA4JFb,MAAM,CAACc,WA5JL,EAiKbd,MAAM,CAACoB,WAjKM,EAsKApB,MAAM,CAACuB,YAtKP,EAuKXvB,MAAM,CAACwB,YAvKI,EA2KAxB,MAAM,CAACyB,YA3KP,EA4KXzB,MAAM,CAAC0B,YA5KI,EAiLX1B,MAAM,CAACoB,WAjLI,EAwLpBd,oBAxLoB,EA4LpBE,WA5LoB,EA8LAR,MAAM,CAAC2B,WA9LP,EA+LX3B,MAAM,CAAC4B,WA/LI,CAAnB","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';\n\nexport const ChipContentContainer = styled.div`\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n  width: max-content;\n`;\n\nexport const ChipContent = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n\n  position: relative;\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  min-height: 24px;\n  box-sizing: border-box;\n  border-radius: 24px;\n  padding: 4px 12px;\n\n  .chip-icon {\n    height: 16px;\n    width: 16px;\n    border-radius: 50%;\n\n    svg {\n      height: 16px;\n      width: 16px;\n    }\n  }\n\n  .icon-left {\n    margin-left: -4px;\n  }\n\n  .icon-right {\n    margin-right: -4px;\n  }\n\n  .action-right {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 48px;\n    width: 48px;\n    right: -8px;\n  }\n\n  &.with-action-right {\n    position: relative;\n    padding-right: 28px;\n  }\n`;\n\nexport const ChipContainer = styled.div`\n  display: inline-block;\n  cursor: pointer;\n  position: relative;\n\n  &.medium {\n    ${ChipContent} {\n      gap: 6px;\n      padding: 10px 16px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n      .chip-icon {\n        height: 20px;\n        width: 20px;\n\n        svg {\n          height: 20px;\n          width: 20px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 38px;\n\n      .action-right {\n        right: -2px;\n      }\n    }\n  }\n\n  &.large {\n    ${ChipContent} {\n      gap: 8px;\n      padding: 12px 20px;\n\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      .chip-icon {\n        height: 24px;\n        width: 24px;\n\n        svg {\n          height: 24px;\n          width: 24px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 48px;\n\n      .action-right {\n        right: 4px;\n      }\n    }\n  }\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.normal {\n    color: ${COLORS.white};\n\n    ${ChipContent} {\n      background-color: ${COLORS.primary_500};\n    }\n  }\n\n  &.interactive.normal:hover:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_700};\n    }\n  }\n\n  &.interactive.normal:active:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n  &.outline {\n    color: ${COLORS.neutral_600};\n\n    ${ChipContent} {\n      background-color: ${COLORS.white};\n      border: 2px solid ${COLORS.neutral_200};\n    }\n  }\n\n  &.interactive.outline:hover:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_20};\n      border: 2px solid ${COLORS.primary_200};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &.interactive.outline:active:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_100};\n      border: 2px solid ${COLORS.primary_300};\n      color: ${COLORS.primary_800};\n      box-shadow: none;\n    }\n  }\n\n  //account for border\n  &.small.outline:not(.disabled) {\n    ${ChipContent} {\n      padding: 2px 10px;\n    }\n  }\n\n  &.medium.outline:not(.disabled) {\n    ${ChipContent} {\n      padding: 8px 14px;\n    }\n  }\n\n  &.large.outline:not(.disabled) {\n    ${ChipContent} {\n      padding: 10px 18px;\n    }\n  }\n\n  &.error {\n    ${ChipContent} {\n      background-color: ${COLORS.critical_100};\n      color: ${COLORS.critical_600};\n    }\n  }\n\n  &.interactive.error:hover:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.critical_200};\n      color: ${COLORS.critical_700};\n    }\n  }\n\n  &.interactive.error:active:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.critical_300};\n      color: ${COLORS.critical_800};\n    }\n  }\n\n  .action-right:focus {\n    ${focusStyles}\n  }\n\n  .action-right:hover .chip-icon {\n    background-color: ${COLORS.primary_700};\n  }\n\n  .action-right:active .chip-icon {\n    background-color: ${COLORS.primary_800};\n  }\n\n  .action-right.disabled .chip-icon {\n    background-color: transparent;\n    color: ${COLORS.primary_300};\n  }\n\n  &.error {\n    .action-right:hover .chip-icon {\n      background-color: ${COLORS.critical_200};\n      color: ${COLORS.critical_700};\n    }\n\n    .action-right:active .chip-icon {\n      background-color: ${COLORS.critical_300};\n      color: ${COLORS.critical_800};\n    }\n\n    .action-right.disabled .chip-icon {\n      background-color: transparent;\n      color: ${COLORS.primary_300};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ${ChipContentContainer} {\n      pointer-events: none;\n    }\n\n    ${ChipContent} {\n      border: none !important;\n      background-color: ${COLORS.neutral_100} !important;\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n"],"file":"ChipStyles.js"}
+{"version":3,"sources":["../../src/Chips/ChipStyles.ts"],"names":["styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","focusStyles","ChipContentContainer","div","ChipContent","Bold","ChipContainer","white","primary_500","primary_700","primary_800","neutral_600","neutral_200","primary_20","primary_200","primary_100","primary_300","critical_100","critical_600","critical_200","critical_700","critical_300","critical_800","neutral_100","neutral_300"],"mappings":";;;;AAAA;AACA;AACA;AACA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,iBAAjB,EAAoCC,iBAApC,EAAuDC,kBAAvD,EAA2EC,kBAA3E,EAA+FC,WAA/F,QAAkH,WAAlH;AAEA,OAAO,IAAMC,oBAAoB,GAAGP,MAAM,CAACQ,GAAV,6JAA1B;AAOP,OAAO,IAAMC,WAAW,GAAGT,MAAM,CAACQ,GAAV,2vBACpBH,kBAAkB,CAACD,kBAAkB,CAACM,IAApB,EAA0B,IAA1B,CADE,CAAjB;AA+CP,OAAO,IAAMC,aAAa,GAAGX,MAAM,CAACQ,GAAV,mmGAMpBC,WANoB,EAUlBN,iBAAiB,CAACC,kBAAkB,CAACM,IAApB,EAA0B,IAA1B,CAVC,EAgCpBD,WAhCoB,EAoClBP,iBAAiB,CAACE,kBAAkB,CAACM,IAApB,EAA0B,IAA1B,CApCC,EA0DpBJ,WA1DoB,EA8DbL,MAAM,CAACW,KA9DM,EAgEpBH,WAhEoB,EAiEAR,MAAM,CAACY,WAjEP,EAsEpBJ,WAtEoB,EAuEAR,MAAM,CAACa,WAvEP,EA4EpBL,WA5EoB,EA6EAR,MAAM,CAACc,WA7EP,EAkFbd,MAAM,CAACe,WAlFM,EAoFpBP,WApFoB,EAqFAR,MAAM,CAACW,KArFP,EAsFAX,MAAM,CAACgB,WAtFP,EA2FpBR,WA3FoB,EA4FAR,MAAM,CAACiB,UA5FP,EA6FAjB,MAAM,CAACkB,WA7FP,EA8FXlB,MAAM,CAACa,WA9FI,EAmGpBL,WAnGoB,EAoGAR,MAAM,CAACmB,WApGP,EAqGAnB,MAAM,CAACoB,WArGP,EAsGXpB,MAAM,CAACc,WAtGI,EA6GpBN,WA7GoB,EAmHpBA,WAnHoB,EAyHpBA,WAzHoB,EA+HpBA,WA/HoB,EAgIAR,MAAM,CAACqB,YAhIP,EAiIXrB,MAAM,CAACsB,YAjII,EAsIpBd,WAtIoB,EAuINR,MAAM,CAACuB,YAvID,EAwIXvB,MAAM,CAACwB,YAxII,EA6IpBhB,WA7IoB,EA8INR,MAAM,CAACyB,YA9ID,EA+IXzB,MAAM,CAAC0B,YA/II,EAoJpBrB,WApJoB,EAwJFL,MAAM,CAACa,WAxJL,EA4JFb,MAAM,CAACc,WA5JL,EAiKbd,MAAM,CAACoB,WAjKM,EAsKApB,MAAM,CAACuB,YAtKP,EAuKXvB,MAAM,CAACwB,YAvKI,EA2KAxB,MAAM,CAACyB,YA3KP,EA4KXzB,MAAM,CAAC0B,YA5KI,EAiLX1B,MAAM,CAACoB,WAjLI,EAwLpBd,oBAxLoB,EA4LpBE,WA5LoB,EA8LAR,MAAM,CAAC2B,WA9LP,EA+LX3B,MAAM,CAAC4B,WA/LI,CAAnB","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';\n\nexport const ChipContentContainer = styled.div`\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n  width: max-content;\n`;\n\nexport const ChipContent = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n\n  position: relative;\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  min-height: 24px;\n  box-sizing: border-box;\n  border-radius: 24px;\n  padding: 4px 12px;\n\n  .chip-icon {\n    height: 16px;\n    width: 16px;\n    border-radius: 50%;\n\n    svg {\n      height: 16px;\n      width: 16px;\n    }\n  }\n\n  .icon-left {\n    margin-left: -4px;\n  }\n\n  .icon-right {\n    margin-right: -4px;\n  }\n\n  .action-right {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 48px;\n    width: 48px;\n    right: -8px;\n  }\n\n  &.with-action-right {\n    position: relative;\n    padding-right: 28px;\n  }\n`;\n\nexport const ChipContainer = styled.div`\n  display: inline-block;\n  cursor: pointer;\n  position: relative;\n\n  &.medium {\n    ${ChipContent} {\n      gap: 6px;\n      padding: 10px 16px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n      .chip-icon {\n        height: 20px;\n        width: 20px;\n\n        svg {\n          height: 20px;\n          width: 20px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 38px;\n\n      .action-right {\n        right: -2px;\n      }\n    }\n  }\n\n  &.large {\n    ${ChipContent} {\n      gap: 8px;\n      padding: 12px 20px;\n\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      .chip-icon {\n        height: 24px;\n        width: 24px;\n\n        svg {\n          height: 24px;\n          width: 24px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 48px;\n\n      .action-right {\n        right: 4px;\n      }\n    }\n  }\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.default {\n    color: ${COLORS.white};\n\n    ${ChipContent} {\n      background-color: ${COLORS.primary_500};\n    }\n  }\n\n  &.interactive.default:hover:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_700};\n    }\n  }\n\n  &.interactive.default:active:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n  &.outline {\n    color: ${COLORS.neutral_600};\n\n    ${ChipContent} {\n      background-color: ${COLORS.white};\n      border: 2px solid ${COLORS.neutral_200};\n    }\n  }\n\n  &.interactive.outline:hover:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_20};\n      border: 2px solid ${COLORS.primary_200};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &.interactive.outline:active:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_100};\n      border: 2px solid ${COLORS.primary_300};\n      color: ${COLORS.primary_800};\n      box-shadow: none;\n    }\n  }\n\n  //account for border\n  &.small.outline:not(.disabled) {\n    ${ChipContent} {\n      padding: 2px 10px;\n    }\n  }\n\n  &.medium.outline:not(.disabled) {\n    ${ChipContent} {\n      padding: 8px 14px;\n    }\n  }\n\n  &.large.outline:not(.disabled) {\n    ${ChipContent} {\n      padding: 10px 18px;\n    }\n  }\n\n  &.invalid {\n    ${ChipContent} {\n      background-color: ${COLORS.critical_100};\n      color: ${COLORS.critical_600};\n    }\n  }\n\n  &.interactive.invalid:hover:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.critical_200};\n      color: ${COLORS.critical_700};\n    }\n  }\n\n  &.interactive.invalid:active:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.critical_300};\n      color: ${COLORS.critical_800};\n    }\n  }\n\n  .action-right:focus {\n    ${focusStyles}\n  }\n\n  .action-right:hover .chip-icon {\n    background-color: ${COLORS.primary_700};\n  }\n\n  .action-right:active .chip-icon {\n    background-color: ${COLORS.primary_800};\n  }\n\n  .action-right.disabled .chip-icon {\n    background-color: transparent;\n    color: ${COLORS.primary_300};\n  }\n\n  &.invalid {\n    .action-right:hover .chip-icon {\n      background-color: ${COLORS.critical_200};\n      color: ${COLORS.critical_700};\n    }\n\n    .action-right:active .chip-icon {\n      background-color: ${COLORS.critical_300};\n      color: ${COLORS.critical_800};\n    }\n\n    .action-right.disabled .chip-icon {\n      background-color: transparent;\n      color: ${COLORS.primary_300};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ${ChipContentContainer} {\n      pointer-events: none;\n    }\n\n    ${ChipContent} {\n      border: none !important;\n      background-color: ${COLORS.neutral_100} !important;\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n"],"file":"ChipStyles.js"}

package/dist/Chips/ChipTypes.d.ts

@@ -1,4 +1,4 @@
-import { Size } from '../types';
+import { Size, States } from '../types';
 /**
  * Types for the chips.
  */
@@ -35,4 +35,4 @@ export interface ChipValue {
     size: Size;
 }
 export declare type ChipIcons = 'Add' | 'ArrowDropDown' | 'ArrowDropUp' | 'ArrowLineDown' | 'ArrowLineLeft' | 'ArrowLineRight' | 'ArrowLineUp' | 'ArrowStopLeft' | 'ArrowStopRight' | 'Attachment' | 'Attention' | 'BackwardsFiveSec' | 'Book' | 'BookmarkOff' | 'BookmarkOn' | 'Bullet' | 'Calendar' | 'CheckboxOff' | 'CheckboxOn' | 'CheckboxSemi' | 'CheckComplete' | 'ChevronDown' | 'ChevronLeft' | 'ChevronRight' | 'ChevronUp' | 'Clear' | 'Close' | 'ClosedCaptionOff' | 'ClosedCaptionOn' | 'CloudAttention' | 'CloudCheck' | 'CloudDownload' | 'CloudLocked' | 'CloudNoConnection' | 'CloudSyncing' | 'CloudUpload' | 'Cloud' | 'Dashboard' | 'Delete' | 'Download' | 'DragHandle' | 'DragIndicator' | 'Edit' | 'Educator' | 'Equals' | 'EventLog' | 'ExtendTextArea' | 'Filter' | 'Forward' | 'ForwardSlash' | 'ForwardFiveSec' | 'FullscreenExit' | 'Fullscreen' | 'GearSettings' | 'GridView' | 'Group' | 'GuidedTour' | 'Help' | 'Hierarchy' | 'History' | 'Home' | 'Information' | 'Institute' | 'Language' | 'ListView' | 'LoadingMedium' | 'LoadingSmall' | 'LockedOff' | 'LockedOn' | 'Login' | 'Logout' | 'Loop' | 'Mail' | 'Manikin' | 'MapPoint' | 'Menu' | 'Minus' | 'MoreHorizontal' | 'MoreVertical' | 'NotificationNew' | 'Notification' | 'OpenFolder' | 'OpenNewWindow' | 'Pause' | 'PlayOutline' | 'Play' | 'Plus' | 'PointDown' | 'PointLeft' | 'PointRight' | 'PointUp' | 'RadioButtonOff' | 'RadioButtonOn' | 'Record' | 'Refresh' | 'Replay' | 'Rewind' | 'Save' | 'Search' | 'Share' | 'ShoppingCart' | 'StarFilled' | 'StarOutlined' | 'Stop' | 'Support' | 'Team' | 'ThumbsDown' | 'ThumbsUp' | 'TimeLimited' | 'Time' | 'Tip' | 'Upload' | 'Usb' | 'User' | 'Video' | 'VisibleOff' | 'VisibleOn' | 'VolumeDown' | 'VolumeOff' | 'VolumeUp';
-export declare type ChipVariant = 'normal' | 'error';
+export declare type ChipVariant = States.Default | States.Invalid;

package/dist/Chips/ChoiceChips.cjs

@@ -77,7 +77,7 @@ var ChoiceChips = function ChoiceChips(_ref) {
     children: values.map(function (value) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, {
         tabIndex: disabled ? -1 : 0,
-        className: "".concat(value.size, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value.value ? 'normal' : 'outline', " interactive"),
+        className: "".concat(value.size, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value.value ? 'default' : 'outline', " interactive"),
         onMouseDown: _common.defaultOnMouseDownHandler,
         onClick: function onClick() {
           return !disabled && onSelectChip(value);

package/dist/Chips/ChoiceChips.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/ChoiceChips.tsx"],"names":["ChoiceChips","selected","disabled","onClick","values","React","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","size","defaultOnMouseDownHandler","label"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AAMA;;;;;;;;AAdA;AACA;AACA;;AAGA;AACA;AACA;AASA,IAAMA,WAAqD,GAAG,SAAxDA,WAAwD,OAKwB;AAAA,MAJrBC,QAIqB,QAJrBA,QAIqB;AAAA,MAHrBC,QAGqB,QAHrBA,QAGqB;AAAA,MAFrBC,OAEqB,QAFrBA,OAEqB;AAAA,MADrBC,MACqB,QADrBA,MACqB;;AACpF;AACF;AACA;AACE,wBAAwCC,KAAK,CAACC,QAAN,CAAuB,EAAvB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;AAEA;AACF;AACA;;;AACEH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpBD,IAAAA,eAAe,CAACP,QAAD,CAAf;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA;AACF;AACA;AACA;;AACE,MAAMS,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;AACzC;AACAH,IAAAA,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;AACAR,IAAAA,OAAO,IAAIA,OAAO,CAACQ,KAAD,CAAlB;AACD,GAND;;AAQA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;AAClD,QAAIE,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE;AAAA,cACGP,MAAM,CAACW,GAAP,CAAW,UAACJ,KAAD;AAAA,0BACV,qBAAC,yBAAD;AAEE,QAAA,QAAQ,EAAET,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,QAAA,SAAS,YAAKS,KAAK,CAACK,IAAX,cAAmBd,QAAQ,GAAG,UAAH,GAAgB,EAA3C,cAAiDK,YAAY,KAAKI,KAAK,CAACA,KAAvB,GAA+B,QAA/B,GAA0C,SAA3F,iBAHX;AAIE,QAAA,WAAW,EAAEM,iCAJf;AAKE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACf,QAAD,IAAaQ,YAAY,CAACC,KAAD,CAA/B;AAAA,SALX;AAME,QAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,iBAAI,CAACX,QAAD,IAAaU,aAAa,CAACC,CAAD,EAAIF,KAAJ,CAA9B;AAAA,SANd;AAAA,+BAOE,qBAAC,gCAAD;AAAA,iCACE,qBAAC,uBAAD;AAAA,sBACGA,KAAK,CAACO;AADT;AADF;AAPF,SACOP,KAAK,CAACA,KADb,CADU;AAAA,KAAX;AADH,IADF;AAmBD,CA1DD;;eA4DeX,W","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n                                                                 selected,\n                                                                 disabled,\n                                                                 onClick,\n                                                                 values\n                                                               }: ChoiceChipProps) => {\n  /**\n   * Globally used variables within the component.\n   */\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n  /**\n   * Set the selected value for the chip.\n   */\n  React.useEffect(() => {\n    setSelectedChip(selected);\n  }, [selected]);\n\n  /**\n   * Sets selected chip and fires an event to parent component.\n   * @param value - Chip which was selected.\n   */\n  const onSelectChip = (value: ChipValue) => {\n    // Update selected chip\n    setSelectedChip(value.value);\n\n    // Fire the event\n    onClick && onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.key === 'Enter') {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <>\n      {values.map((value: ChipValue) => (\n        <ChipContainer\n          key={value.value}\n          tabIndex={disabled ? -1 : 0}\n          className={`${value.size} ${disabled ? 'disabled' : ''} ${selectedChip === value.value ? 'normal' : 'outline'} interactive`}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onSelectChip(value)}\n          onKeyDown={e => !disabled && handleKeyDown(e, value)}>\n          <ChipContentContainer>\n            <ChipContent>\n              {value.label}\n            </ChipContent>\n          </ChipContentContainer>\n        </ChipContainer>\n      ))}\n    </>\n  );\n};\n\nexport default ChoiceChips;\n"],"file":"ChoiceChips.cjs"}
+{"version":3,"sources":["../../src/Chips/ChoiceChips.tsx"],"names":["ChoiceChips","selected","disabled","onClick","values","React","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","size","defaultOnMouseDownHandler","label"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AAMA;;;;;;;;AAdA;AACA;AACA;;AAGA;AACA;AACA;AASA,IAAMA,WAAqD,GAAG,SAAxDA,WAAwD,OAKwB;AAAA,MAJrBC,QAIqB,QAJrBA,QAIqB;AAAA,MAHrBC,QAGqB,QAHrBA,QAGqB;AAAA,MAFrBC,OAEqB,QAFrBA,OAEqB;AAAA,MADrBC,MACqB,QADrBA,MACqB;;AACpF;AACF;AACA;AACE,wBAAwCC,KAAK,CAACC,QAAN,CAAuB,EAAvB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;AAEA;AACF;AACA;;;AACEH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpBD,IAAAA,eAAe,CAACP,QAAD,CAAf;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA;AACF;AACA;AACA;;AACE,MAAMS,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;AACzC;AACAH,IAAAA,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;AACAR,IAAAA,OAAO,IAAIA,OAAO,CAACQ,KAAD,CAAlB;AACD,GAND;;AAQA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;AAClD,QAAIE,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE;AAAA,cACGP,MAAM,CAACW,GAAP,CAAW,UAACJ,KAAD;AAAA,0BACV,qBAAC,yBAAD;AAEE,QAAA,QAAQ,EAAET,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,QAAA,SAAS,YAAKS,KAAK,CAACK,IAAX,cAAmBd,QAAQ,GAAG,UAAH,GAAgB,EAA3C,cAAiDK,YAAY,KAAKI,KAAK,CAACA,KAAvB,GAA+B,SAA/B,GAA2C,SAA5F,iBAHX;AAIE,QAAA,WAAW,EAAEM,iCAJf;AAKE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACf,QAAD,IAAaQ,YAAY,CAACC,KAAD,CAA/B;AAAA,SALX;AAME,QAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,iBAAI,CAACX,QAAD,IAAaU,aAAa,CAACC,CAAD,EAAIF,KAAJ,CAA9B;AAAA,SANd;AAAA,+BAOE,qBAAC,gCAAD;AAAA,iCACE,qBAAC,uBAAD;AAAA,sBACGA,KAAK,CAACO;AADT;AADF;AAPF,SACOP,KAAK,CAACA,KADb,CADU;AAAA,KAAX;AADH,IADF;AAmBD,CA1DD;;eA4DeX,W","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n                                                                 selected,\n                                                                 disabled,\n                                                                 onClick,\n                                                                 values\n                                                               }: ChoiceChipProps) => {\n  /**\n   * Globally used variables within the component.\n   */\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n  /**\n   * Set the selected value for the chip.\n   */\n  React.useEffect(() => {\n    setSelectedChip(selected);\n  }, [selected]);\n\n  /**\n   * Sets selected chip and fires an event to parent component.\n   * @param value - Chip which was selected.\n   */\n  const onSelectChip = (value: ChipValue) => {\n    // Update selected chip\n    setSelectedChip(value.value);\n\n    // Fire the event\n    onClick && onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.key === 'Enter') {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <>\n      {values.map((value: ChipValue) => (\n        <ChipContainer\n          key={value.value}\n          tabIndex={disabled ? -1 : 0}\n          className={`${value.size} ${disabled ? 'disabled' : ''} ${selectedChip === value.value ? 'default' : 'outline'} interactive`}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onSelectChip(value)}\n          onKeyDown={e => !disabled && handleKeyDown(e, value)}>\n          <ChipContentContainer>\n            <ChipContent>\n              {value.label}\n            </ChipContent>\n          </ChipContentContainer>\n        </ChipContainer>\n      ))}\n    </>\n  );\n};\n\nexport default ChoiceChips;\n"],"file":"ChoiceChips.cjs"}

package/dist/Chips/ChoiceChips.js

@@ -64,7 +64,7 @@ var ChoiceChips = function ChoiceChips(_ref) {
     children: values.map(function (value) {
       return /*#__PURE__*/_jsx(ChipContainer, {
         tabIndex: disabled ? -1 : 0,
-        className: "".concat(value.size, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value.value ? 'normal' : 'outline', " interactive"),
+        className: "".concat(value.size, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value.value ? 'default' : 'outline', " interactive"),
         onMouseDown: defaultOnMouseDownHandler,
         onClick: function onClick() {
           return !disabled && onSelectChip(value);

package/dist/Chips/ChoiceChips.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/ChoiceChips.tsx"],"names":["React","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","ChoiceChips","selected","disabled","onClick","values","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","size","label"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,aAAR,EAAuBC,WAAvB,EAAoCC,oBAApC,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;;;;AAEA,IAAMC,WAAqD,GAAG,SAAxDA,WAAwD,OAKwB;AAAA,MAJrBC,QAIqB,QAJrBA,QAIqB;AAAA,MAHrBC,QAGqB,QAHrBA,QAGqB;AAAA,MAFrBC,OAEqB,QAFrBA,OAEqB;AAAA,MADrBC,MACqB,QADrBA,MACqB;;AACpF;AACF;AACA;AACE,wBAAwCT,KAAK,CAACU,QAAN,CAAuB,EAAvB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;AAEA;AACF;AACA;;;AACEZ,EAAAA,KAAK,CAACa,SAAN,CAAgB,YAAM;AACpBD,IAAAA,eAAe,CAACN,QAAD,CAAf;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA;AACF;AACA;AACA;;AACE,MAAMQ,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;AACzC;AACAH,IAAAA,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;AACAP,IAAAA,OAAO,IAAIA,OAAO,CAACO,KAAD,CAAlB;AACD,GAND;;AAQA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;AAClD,QAAIE,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE;AAAA,cACGN,MAAM,CAACU,GAAP,CAAW,UAACJ,KAAD;AAAA,0BACV,KAAC,aAAD;AAEE,QAAA,QAAQ,EAAER,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,QAAA,SAAS,YAAKQ,KAAK,CAACK,IAAX,cAAmBb,QAAQ,GAAG,UAAH,GAAgB,EAA3C,cAAiDI,YAAY,KAAKI,KAAK,CAACA,KAAvB,GAA+B,QAA/B,GAA0C,SAA3F,iBAHX;AAIE,QAAA,WAAW,EAAEX,yBAJf;AAKE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACG,QAAD,IAAaO,YAAY,CAACC,KAAD,CAA/B;AAAA,SALX;AAME,QAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,iBAAI,CAACV,QAAD,IAAaS,aAAa,CAACC,CAAD,EAAIF,KAAJ,CAA9B;AAAA,SANd;AAAA,+BAOE,KAAC,oBAAD;AAAA,iCACE,KAAC,WAAD;AAAA,sBACGA,KAAK,CAACM;AADT;AADF;AAPF,SACON,KAAK,CAACA,KADb,CADU;AAAA,KAAX;AADH,IADF;AAmBD,CA1DD;;AA4DA,eAAeV,WAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n                                                                 selected,\n                                                                 disabled,\n                                                                 onClick,\n                                                                 values\n                                                               }: ChoiceChipProps) => {\n  /**\n   * Globally used variables within the component.\n   */\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n  /**\n   * Set the selected value for the chip.\n   */\n  React.useEffect(() => {\n    setSelectedChip(selected);\n  }, [selected]);\n\n  /**\n   * Sets selected chip and fires an event to parent component.\n   * @param value - Chip which was selected.\n   */\n  const onSelectChip = (value: ChipValue) => {\n    // Update selected chip\n    setSelectedChip(value.value);\n\n    // Fire the event\n    onClick && onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.key === 'Enter') {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <>\n      {values.map((value: ChipValue) => (\n        <ChipContainer\n          key={value.value}\n          tabIndex={disabled ? -1 : 0}\n          className={`${value.size} ${disabled ? 'disabled' : ''} ${selectedChip === value.value ? 'normal' : 'outline'} interactive`}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onSelectChip(value)}\n          onKeyDown={e => !disabled && handleKeyDown(e, value)}>\n          <ChipContentContainer>\n            <ChipContent>\n              {value.label}\n            </ChipContent>\n          </ChipContentContainer>\n        </ChipContainer>\n      ))}\n    </>\n  );\n};\n\nexport default ChoiceChips;\n"],"file":"ChoiceChips.js"}
+{"version":3,"sources":["../../src/Chips/ChoiceChips.tsx"],"names":["React","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","ChoiceChips","selected","disabled","onClick","values","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","size","label"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,aAAR,EAAuBC,WAAvB,EAAoCC,oBAApC,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;;;;AAEA,IAAMC,WAAqD,GAAG,SAAxDA,WAAwD,OAKwB;AAAA,MAJrBC,QAIqB,QAJrBA,QAIqB;AAAA,MAHrBC,QAGqB,QAHrBA,QAGqB;AAAA,MAFrBC,OAEqB,QAFrBA,OAEqB;AAAA,MADrBC,MACqB,QADrBA,MACqB;;AACpF;AACF;AACA;AACE,wBAAwCT,KAAK,CAACU,QAAN,CAAuB,EAAvB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;AAEA;AACF;AACA;;;AACEZ,EAAAA,KAAK,CAACa,SAAN,CAAgB,YAAM;AACpBD,IAAAA,eAAe,CAACN,QAAD,CAAf;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA;AACF;AACA;AACA;;AACE,MAAMQ,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;AACzC;AACAH,IAAAA,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;AACAP,IAAAA,OAAO,IAAIA,OAAO,CAACO,KAAD,CAAlB;AACD,GAND;;AAQA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;AAClD,QAAIE,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE;AAAA,cACGN,MAAM,CAACU,GAAP,CAAW,UAACJ,KAAD;AAAA,0BACV,KAAC,aAAD;AAEE,QAAA,QAAQ,EAAER,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,QAAA,SAAS,YAAKQ,KAAK,CAACK,IAAX,cAAmBb,QAAQ,GAAG,UAAH,GAAgB,EAA3C,cAAiDI,YAAY,KAAKI,KAAK,CAACA,KAAvB,GAA+B,SAA/B,GAA2C,SAA5F,iBAHX;AAIE,QAAA,WAAW,EAAEX,yBAJf;AAKE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACG,QAAD,IAAaO,YAAY,CAACC,KAAD,CAA/B;AAAA,SALX;AAME,QAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,iBAAI,CAACV,QAAD,IAAaS,aAAa,CAACC,CAAD,EAAIF,KAAJ,CAA9B;AAAA,SANd;AAAA,+BAOE,KAAC,oBAAD;AAAA,iCACE,KAAC,WAAD;AAAA,sBACGA,KAAK,CAACM;AADT;AADF;AAPF,SACON,KAAK,CAACA,KADb,CADU;AAAA,KAAX;AADH,IADF;AAmBD,CA1DD;;AA4DA,eAAeV,WAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n                                                                 selected,\n                                                                 disabled,\n                                                                 onClick,\n                                                                 values\n                                                               }: ChoiceChipProps) => {\n  /**\n   * Globally used variables within the component.\n   */\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n  /**\n   * Set the selected value for the chip.\n   */\n  React.useEffect(() => {\n    setSelectedChip(selected);\n  }, [selected]);\n\n  /**\n   * Sets selected chip and fires an event to parent component.\n   * @param value - Chip which was selected.\n   */\n  const onSelectChip = (value: ChipValue) => {\n    // Update selected chip\n    setSelectedChip(value.value);\n\n    // Fire the event\n    onClick && onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.key === 'Enter') {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <>\n      {values.map((value: ChipValue) => (\n        <ChipContainer\n          key={value.value}\n          tabIndex={disabled ? -1 : 0}\n          className={`${value.size} ${disabled ? 'disabled' : ''} ${selectedChip === value.value ? 'default' : 'outline'} interactive`}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onSelectChip(value)}\n          onKeyDown={e => !disabled && handleKeyDown(e, value)}>\n          <ChipContentContainer>\n            <ChipContent>\n              {value.label}\n            </ChipContent>\n          </ChipContentContainer>\n        </ChipContainer>\n      ))}\n    </>\n  );\n};\n\nexport default ChoiceChips;\n"],"file":"ChoiceChips.js"}

package/dist/Chips/FilterChip.cjs

@@ -44,7 +44,7 @@ var FilterChip = function FilterChip(_ref) {
    */
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, {
-      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'normal' : 'outline', " ").concat(!!_onClick ? 'interactive' : ''),
+      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'default' : 'outline', " ").concat(!!_onClick ? 'interactive' : ''),
       tabIndex: disabled ? -1 : 0,
       onKeyDown: function onKeyDown(e) {
         return e.key === 'Enter' && !disabled && _onClick && _onClick();

package/dist/Chips/FilterChip.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/FilterChip.tsx"],"names":["FilterChip","selected","text","size","disabled","onClick","e","key","defaultOnMouseDownHandler"],"mappings":";;;;;;;;;AAGA;;AAMA;;AAKA;;AAMA;;;;;;;;AApBA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AASA,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,QAKqB,QALrBA,QAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,MAHrBC,IAGqB,QAHrBA,IAGqB;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAGnF;AACF;AACA;AACE,sBACE;AAAA,2BACE,qBAAC,yBAAD;AACE,MAAA,SAAS,YAAKF,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CH,QAAQ,GAAG,QAAH,GAAc,SAAjE,cAA8E,CAAC,CAACI,QAAF,GAAY,aAAZ,GAA4B,EAA1G,CADX;AAEE,MAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,MAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACH,QAAtB,IAAkCC,QAAlC,IAA6CA,QAAO,EAAxD;AAAA,OAHd;AAIE,MAAA,WAAW,EAAEG,iCAJf;AAKE,MAAA,OAAO,EAAE;AAAA,eAAM,CAACJ,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,OALX;AAAA,6BAME,qBAAC,gCAAD;AAAA,+BACE,sBAAC,uBAAD;AAAA,qBACGJ,QAAQ,iBAAI;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,mCAAuC,qBAAC,kBAAD,CAAa,aAAb;AAA2B,cAAA,SAAS,EAAE;AAAtC;AAAvC,YADf,eAEE;AAAA,sBAAMC;AAAN,YAFF;AAAA;AADF;AANF;AADF,IADF;AAiBD,CA7BD;;eA+BeF,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {FilterChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\n                                                                selected,\n                                                                text,\n                                                                size,\n                                                                disabled,\n                                                                onClick\n                                                              }: FilterChipProps) => {\n\n\n  /**\n   * Return Filter Chip component.\n   */\n  return (\n    <>\n      <ChipContainer\n        className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'normal' : 'outline'} ${!!onClick ? 'interactive' : ''}`}\n        tabIndex={disabled ? -1 : 0}\n        onKeyDown={e => e.key === 'Enter' && !disabled && onClick && onClick()}\n        onMouseDown={defaultOnMouseDownHandler}\n        onClick={() => !disabled && onClick && onClick()}>\n        <ChipContentContainer>\n          <ChipContent>\n            {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckComplete className={'icon'}/></div>}\n            <div>{text}</div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default FilterChip;\n"],"file":"FilterChip.cjs"}
+{"version":3,"sources":["../../src/Chips/FilterChip.tsx"],"names":["FilterChip","selected","text","size","disabled","onClick","e","key","defaultOnMouseDownHandler"],"mappings":";;;;;;;;;AAGA;;AAMA;;AAKA;;AAMA;;;;;;;;AApBA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AASA,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,QAKqB,QALrBA,QAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,MAHrBC,IAGqB,QAHrBA,IAGqB;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAGnF;AACF;AACA;AACE,sBACE;AAAA,2BACE,qBAAC,yBAAD;AACE,MAAA,SAAS,YAAKF,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CH,QAAQ,GAAG,SAAH,GAAe,SAAlE,cAA+E,CAAC,CAACI,QAAF,GAAY,aAAZ,GAA4B,EAA3G,CADX;AAEE,MAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,MAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACH,QAAtB,IAAkCC,QAAlC,IAA6CA,QAAO,EAAxD;AAAA,OAHd;AAIE,MAAA,WAAW,EAAEG,iCAJf;AAKE,MAAA,OAAO,EAAE;AAAA,eAAM,CAACJ,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,OALX;AAAA,6BAME,qBAAC,gCAAD;AAAA,+BACE,sBAAC,uBAAD;AAAA,qBACGJ,QAAQ,iBAAI;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,mCAAuC,qBAAC,kBAAD,CAAa,aAAb;AAA2B,cAAA,SAAS,EAAE;AAAtC;AAAvC,YADf,eAEE;AAAA,sBAAMC;AAAN,YAFF;AAAA;AADF;AANF;AADF,IADF;AAiBD,CA7BD;;eA+BeF,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {FilterChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\n                                                                selected,\n                                                                text,\n                                                                size,\n                                                                disabled,\n                                                                onClick\n                                                              }: FilterChipProps) => {\n\n\n  /**\n   * Return Filter Chip component.\n   */\n  return (\n    <>\n      <ChipContainer\n        className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''}`}\n        tabIndex={disabled ? -1 : 0}\n        onKeyDown={e => e.key === 'Enter' && !disabled && onClick && onClick()}\n        onMouseDown={defaultOnMouseDownHandler}\n        onClick={() => !disabled && onClick && onClick()}>\n        <ChipContentContainer>\n          <ChipContent>\n            {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckComplete className={'icon'}/></div>}\n            <div>{text}</div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default FilterChip;\n"],"file":"FilterChip.cjs"}

package/dist/Chips/FilterChip.js

@@ -33,7 +33,7 @@ var FilterChip = function FilterChip(_ref) {
    */
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(ChipContainer, {
-      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'normal' : 'outline', " ").concat(!!_onClick ? 'interactive' : ''),
+      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'default' : 'outline', " ").concat(!!_onClick ? 'interactive' : ''),
       tabIndex: disabled ? -1 : 0,
       onKeyDown: function onKeyDown(e) {
         return e.key === 'Enter' && !disabled && _onClick && _onClick();

package/dist/Chips/FilterChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/FilterChip.tsx"],"names":["React","SystemIcons","ChipContent","ChipContentContainer","ChipContainer","defaultOnMouseDownHandler","FilterChip","selected","text","size","disabled","onClick","e","key"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;;AAGA;AACA;AACA;AACA,SAAQC,WAAR,QAA0B,gBAA1B;AAEA;AACA;AACA;;AACA,SAAQC,WAAR,EAAqBC,oBAArB,EAA2CC,aAA3C,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;;;;;AAEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,QAKqB,QALrBA,QAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,MAHrBC,IAGqB,QAHrBA,IAGqB;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAGnF;AACF;AACA;AACE,sBACE;AAAA,2BACE,KAAC,aAAD;AACE,MAAA,SAAS,YAAKF,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CH,QAAQ,GAAG,QAAH,GAAc,SAAjE,cAA8E,CAAC,CAACI,QAAF,GAAY,aAAZ,GAA4B,EAA1G,CADX;AAEE,MAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,MAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACH,QAAtB,IAAkCC,QAAlC,IAA6CA,QAAO,EAAxD;AAAA,OAHd;AAIE,MAAA,WAAW,EAAEN,yBAJf;AAKE,MAAA,OAAO,EAAE;AAAA,eAAM,CAACK,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,OALX;AAAA,6BAME,KAAC,oBAAD;AAAA,+BACE,MAAC,WAAD;AAAA,qBACGJ,QAAQ,iBAAI;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,mCAAuC,KAAC,WAAD,CAAa,aAAb;AAA2B,cAAA,SAAS,EAAE;AAAtC;AAAvC,YADf,eAEE;AAAA,sBAAMC;AAAN,YAFF;AAAA;AADF;AANF;AADF,IADF;AAiBD,CA7BD;;AA+BA,eAAeF,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {FilterChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\n                                                                selected,\n                                                                text,\n                                                                size,\n                                                                disabled,\n                                                                onClick\n                                                              }: FilterChipProps) => {\n\n\n  /**\n   * Return Filter Chip component.\n   */\n  return (\n    <>\n      <ChipContainer\n        className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'normal' : 'outline'} ${!!onClick ? 'interactive' : ''}`}\n        tabIndex={disabled ? -1 : 0}\n        onKeyDown={e => e.key === 'Enter' && !disabled && onClick && onClick()}\n        onMouseDown={defaultOnMouseDownHandler}\n        onClick={() => !disabled && onClick && onClick()}>\n        <ChipContentContainer>\n          <ChipContent>\n            {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckComplete className={'icon'}/></div>}\n            <div>{text}</div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default FilterChip;\n"],"file":"FilterChip.js"}
+{"version":3,"sources":["../../src/Chips/FilterChip.tsx"],"names":["React","SystemIcons","ChipContent","ChipContentContainer","ChipContainer","defaultOnMouseDownHandler","FilterChip","selected","text","size","disabled","onClick","e","key"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;;AAGA;AACA;AACA;AACA,SAAQC,WAAR,QAA0B,gBAA1B;AAEA;AACA;AACA;;AACA,SAAQC,WAAR,EAAqBC,oBAArB,EAA2CC,aAA3C,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;;;;;AAEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,QAKqB,QALrBA,QAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,MAHrBC,IAGqB,QAHrBA,IAGqB;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAGnF;AACF;AACA;AACE,sBACE;AAAA,2BACE,KAAC,aAAD;AACE,MAAA,SAAS,YAAKF,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CH,QAAQ,GAAG,SAAH,GAAe,SAAlE,cAA+E,CAAC,CAACI,QAAF,GAAY,aAAZ,GAA4B,EAA3G,CADX;AAEE,MAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,MAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACH,QAAtB,IAAkCC,QAAlC,IAA6CA,QAAO,EAAxD;AAAA,OAHd;AAIE,MAAA,WAAW,EAAEN,yBAJf;AAKE,MAAA,OAAO,EAAE;AAAA,eAAM,CAACK,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,OALX;AAAA,6BAME,KAAC,oBAAD;AAAA,+BACE,MAAC,WAAD;AAAA,qBACGJ,QAAQ,iBAAI;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,mCAAuC,KAAC,WAAD,CAAa,aAAb;AAA2B,cAAA,SAAS,EAAE;AAAtC;AAAvC,YADf,eAEE;AAAA,sBAAMC;AAAN,YAFF;AAAA;AADF;AANF;AADF,IADF;AAiBD,CA7BD;;AA+BA,eAAeF,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {FilterChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\n                                                                selected,\n                                                                text,\n                                                                size,\n                                                                disabled,\n                                                                onClick\n                                                              }: FilterChipProps) => {\n\n\n  /**\n   * Return Filter Chip component.\n   */\n  return (\n    <>\n      <ChipContainer\n        className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''}`}\n        tabIndex={disabled ? -1 : 0}\n        onKeyDown={e => e.key === 'Enter' && !disabled && onClick && onClick()}\n        onMouseDown={defaultOnMouseDownHandler}\n        onClick={() => !disabled && onClick && onClick()}>\n        <ChipContentContainer>\n          <ChipContent>\n            {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckComplete className={'icon'}/></div>}\n            <div>{text}</div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default FilterChip;\n"],"file":"FilterChip.js"}

package/dist/Chips/InputChip.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/InputChip.tsx"],"names":["InputChip","React","forwardRef","ref","icon","text","variant","size","disabled","onClick","disableRemove","onRemove","containerRef","useRef","removeRef","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","defaultOnMouseDownHandler","icons","className","e"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\nimport {IconButton} from '../Button/index';\nimport {Size} from '../types';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {InputChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\n                                                                               icon,\n                                                                               text,\n                                                                               variant,\n                                                                               size,\n                                                                               disabled,\n                                                                               onClick,\n                                                                               disableRemove,\n                                                                               onRemove\n                                                                             }: InputChipProps, ref) => {\n\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\n  const removeRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [removeRef]);\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent) => {\n    !!event && event.stopPropagation();\n    onRemove(event);\n  };\n\n  const handleContainerKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      !disabled && onClick && onClick();\n    }\n    if (event.key === 'Backspace' && !disableRemove) {\n      !disableRemove && onRemove && onRemove(event);\n    }\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <>\n      <ChipContainer ref={containerRef}\n                     className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''}`}\n                     tabIndex={disabled || !onClick ? -1 : 0}\n                     onMouseDown={defaultOnMouseDownHandler}\n                     onKeyDown={handleContainerKeyDown}\n                     onClick={() => onClick && onClick()}>\n        <ChipContentContainer>\n          <ChipContent className={'with-action-right'}>\n            {icon && <div className={'chip-icon icon-left'}>{icons[icon]({className: 'icon'})}</div>}\n\n            <div>{text}</div>\n\n            <div ref={removeRef}\n                 className={`action-right ${disableRemove ? 'disabled' : ''}`}\n                 tabIndex={disableRemove || disabled ? -1 : 0}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={e => !disableRemove && onRemoveClick(e)}\n                 onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onRemoveClick(e)}>\n              <div className={'chip-icon'}>\n                <SystemIcons.Close className={'remove'}/>\n              </div>\n            </div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n});\n\nexport default InputChip;\n"],"file":"InputChip.cjs"}
+{"version":3,"sources":["../../src/Chips/InputChip.tsx"],"names":["InputChip","React","forwardRef","ref","icon","text","variant","size","disabled","onClick","disableRemove","onRemove","containerRef","useRef","removeRef","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","defaultOnMouseDownHandler","icons","className","e"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {InputChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\n                                                                               icon,\n                                                                               text,\n                                                                               variant,\n                                                                               size,\n                                                                               disabled,\n                                                                               onClick,\n                                                                               disableRemove,\n                                                                               onRemove\n                                                                             }: InputChipProps, ref) => {\n\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\n  const removeRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [removeRef]);\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent) => {\n    !!event && event.stopPropagation();\n    onRemove(event);\n  };\n\n  const handleContainerKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      !disabled && onClick && onClick();\n    }\n    if (event.key === 'Backspace' && !disableRemove) {\n      !disableRemove && onRemove && onRemove(event);\n    }\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <>\n      <ChipContainer ref={containerRef}\n                     className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''}`}\n                     tabIndex={disabled || !onClick ? -1 : 0}\n                     onMouseDown={defaultOnMouseDownHandler}\n                     onKeyDown={handleContainerKeyDown}\n                     onClick={() => onClick && onClick()}>\n        <ChipContentContainer>\n          <ChipContent className={'with-action-right'}>\n            {icon && <div className={'chip-icon icon-left'}>{icons[icon]({className: 'icon'})}</div>}\n\n            <div>{text}</div>\n\n            <div ref={removeRef}\n                 className={`action-right ${disableRemove ? 'disabled' : ''}`}\n                 tabIndex={disableRemove || disabled ? -1 : 0}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={e => !disableRemove && onRemoveClick(e)}\n                 onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onRemoveClick(e)}>\n              <div className={'chip-icon'}>\n                <SystemIcons.Close className={'remove'}/>\n              </div>\n            </div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n});\n\nexport default InputChip;\n"],"file":"InputChip.cjs"}

package/dist/Chips/InputChip.js

@@ -7,10 +7,10 @@ import * as React from 'react';
  */
 
 import { SystemIcons, SystemIcons as icons } from '../icons/index';
-
 /**
  * Import custom styles.
  */
+
 import { ChipContainer, ChipContent, ChipContentContainer } from './ChipStyles';
 /**
  * Import custom types.

package/dist/Chips/InputChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/InputChip.tsx"],"names":["React","SystemIcons","icons","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","useActionWithin","InputChip","forwardRef","ref","icon","text","variant","size","disabled","onClick","disableRemove","onRemove","containerRef","useRef","removeRef","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","className","e"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\nimport {IconButton} from '../Button/index';\nimport {Size} from '../types';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {InputChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\n                                                                               icon,\n                                                                               text,\n                                                                               variant,\n                                                                               size,\n                                                                               disabled,\n                                                                               onClick,\n                                                                               disableRemove,\n                                                                               onRemove\n                                                                             }: InputChipProps, ref) => {\n\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\n  const removeRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [removeRef]);\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent) => {\n    !!event && event.stopPropagation();\n    onRemove(event);\n  };\n\n  const handleContainerKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      !disabled && onClick && onClick();\n    }\n    if (event.key === 'Backspace' && !disableRemove) {\n      !disableRemove && onRemove && onRemove(event);\n    }\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <>\n      <ChipContainer ref={containerRef}\n                     className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''}`}\n                     tabIndex={disabled || !onClick ? -1 : 0}\n                     onMouseDown={defaultOnMouseDownHandler}\n                     onKeyDown={handleContainerKeyDown}\n                     onClick={() => onClick && onClick()}>\n        <ChipContentContainer>\n          <ChipContent className={'with-action-right'}>\n            {icon && <div className={'chip-icon icon-left'}>{icons[icon]({className: 'icon'})}</div>}\n\n            <div>{text}</div>\n\n            <div ref={removeRef}\n                 className={`action-right ${disableRemove ? 'disabled' : ''}`}\n                 tabIndex={disableRemove || disabled ? -1 : 0}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={e => !disableRemove && onRemoveClick(e)}\n                 onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onRemoveClick(e)}>\n              <div className={'chip-icon'}>\n                <SystemIcons.Close className={'remove'}/>\n              </div>\n            </div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n});\n\nexport default InputChip;\n"],"file":"InputChip.js"}
+{"version":3,"sources":["../../src/Chips/InputChip.tsx"],"names":["React","SystemIcons","icons","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","useActionWithin","InputChip","forwardRef","ref","icon","text","variant","size","disabled","onClick","disableRemove","onRemove","containerRef","useRef","removeRef","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","className","e"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {InputChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\n                                                                               icon,\n                                                                               text,\n                                                                               variant,\n                                                                               size,\n                                                                               disabled,\n                                                                               onClick,\n                                                                               disableRemove,\n                                                                               onRemove\n                                                                             }: InputChipProps, ref) => {\n\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\n  const removeRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [removeRef]);\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent) => {\n    !!event && event.stopPropagation();\n    onRemove(event);\n  };\n\n  const handleContainerKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      !disabled && onClick && onClick();\n    }\n    if (event.key === 'Backspace' && !disableRemove) {\n      !disableRemove && onRemove && onRemove(event);\n    }\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <>\n      <ChipContainer ref={containerRef}\n                     className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''}`}\n                     tabIndex={disabled || !onClick ? -1 : 0}\n                     onMouseDown={defaultOnMouseDownHandler}\n                     onKeyDown={handleContainerKeyDown}\n                     onClick={() => onClick && onClick()}>\n        <ChipContentContainer>\n          <ChipContent className={'with-action-right'}>\n            {icon && <div className={'chip-icon icon-left'}>{icons[icon]({className: 'icon'})}</div>}\n\n            <div>{text}</div>\n\n            <div ref={removeRef}\n                 className={`action-right ${disableRemove ? 'disabled' : ''}`}\n                 tabIndex={disableRemove || disabled ? -1 : 0}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={e => !disableRemove && onRemoveClick(e)}\n                 onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onRemoveClick(e)}>\n              <div className={'chip-icon'}>\n                <SystemIcons.Close className={'remove'}/>\n              </div>\n            </div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n});\n\nexport default InputChip;\n"],"file":"InputChip.js"}

package/dist/ChipsInput/ChipDropdownInput.cjs

@@ -58,7 +58,6 @@ var ChipDropdownInput = function ChipDropdownInput(_ref) {
       inputId = _ref.inputId,
       variants = _ref.variants,
       placeholder = _ref.placeholder,
-      validationType = _ref.validationType,
       validationMessage = _ref.validationMessage,
       onValueChange = _ref.onValueChange,
       suggestion = _ref.suggestion,
@@ -71,7 +70,8 @@ var ChipDropdownInput = function ChipDropdownInput(_ref) {
       icon = _ref.icon,
       disableFiltering = _ref.disableFiltering,
       disabled = _ref.disabled,
-      altPlaceholder = _ref.altPlaceholder;
+      altPlaceholder = _ref.altPlaceholder,
+      required = _ref.required;
 
   // Initiate states
   var _React$useState = React.useState([]),
@@ -142,7 +142,7 @@ var ChipDropdownInput = function ChipDropdownInput(_ref) {
       };
     }).map(function (a, index) {
       return _objectSpread(_objectSpread({}, a), {}, {
-        variant: a.variant || variants && variants[index] || 'normal'
+        variant: a.variant || variants && variants[index] || _types.States.Default
       });
     }).map(function (a, index) {
       return _objectSpread(_objectSpread({}, a), {}, {
@@ -338,13 +338,13 @@ var ChipDropdownInput = function ChipDropdownInput(_ref) {
       inputId: inputId,
       ref: inputRef,
       items: chips,
+      required: required,
       inputValue: value,
       size: size,
       placeholder: placeholder,
       altPlaceholder: altPlaceholder,
       disabled: disabled,
       multiLine: multiLine,
-      validationType: validationType,
       validationMessage: validationMessage,
       loading: loading,
       onRemoveItem: function onRemoveItem(chip, index) {
@@ -395,7 +395,6 @@ ChipDropdownInput.propTypes = {
   loading: _propTypes.default.bool,
   maxSelectedItems: _propTypes.default.number,
   disableSorting: _propTypes.default.bool,
-  disableFiltering: _propTypes.default.bool,
-  allowCustomItem: _propTypes.default.bool
+  disableFiltering: _propTypes.default.bool
 };
 //# sourceMappingURL=ChipDropdownInput.cjs.map

package/dist/ChipsInput/ChipDropdownInput.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ChipsInput/ChipDropdownInput.tsx"],"names":["Wrapper","styled","div","ChipInputContainer","Z_INDEXES","dropdown","ChipDropdownInput","list","onInputChange","disableSorting","messageOnNoResults","values","inputId","variants","placeholder","validationType","validationMessage","onValueChange","suggestion","loading","maxSelectedItems","multiLine","size","Size","Medium","icon","disableFiltering","disabled","altPlaceholder","React","useState","givenList","setGivenList","chips","setChips","value","setValue","restartFilter","setRestartFilter","filteredList","setFilteredList","dropdownIsOpen","setDropdownIsOpen","dropdownList","setDropdownList","dropdownValue","setDropdownValue","focused","setFocused","containerRef","inputRef","useRef","useEffect","map","a","find","b","label","index","variant","newList","e","options","filter","option","toUpperCase","indexOf","secondaryLabel","sort","push","o","length","handleClickOutside","current","contains","target","document","addEventListener","removeEventListener","x","displayLabel","noteLabel","SystemIcons","addChip","newChip","handleInputValueChange","handleValueUpdate","item","focus","handleInputKeyDown","event","key","stopPropagation","handleOnChipRemoved","newChips","splice","chip","action","pinTopItem","itemsType","scrollable","actionLabel","multiSelect","onValueUpdate","items","allowCustomItem"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom components.\n */\nimport {ChipInputContainer, ChipInputField} from './ChipInputField';\nimport {Size} from '../types';\nimport {DropdownContent, DropdownItem} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {ChipInputProps, ChipItem} from './ChipInputTypes';\nimport {useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {Z_INDEXES} from '../styles';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n  width: 100%;\n\n  ${ChipInputContainer} {\n    position: relative;\n\n    &:focus, &.focus-visible-within {\n      z-index: ${Z_INDEXES.dropdown + 1} !important;\n    }\n  }\n`;\n\n\ninterface ListItem extends ChipItem {\n  secondaryLabel?: string;\n  value: string;\n}\n\ninterface ChipDropdownInputProps extends ChipInputProps {\n  list: ListItem[] | string[];\n  onInputChange?: (input: string) => void;\n  messageOnNoResults?: string;\n  suggestion?: ListItem;\n  loading?: boolean;\n  maxSelectedItems?: number;\n  disableSorting?: boolean;\n  disableFiltering?: boolean;\n  allowCustomItem?: boolean;\n}\n\nexport const ChipDropdownInput: React.FunctionComponent<ChipDropdownInputProps> = ({\n                                                                                     list,\n                                                                                     onInputChange,\n                                                                                     disableSorting,\n                                                                                     messageOnNoResults,\n                                                                                     values,\n                                                                                     inputId,\n                                                                                     variants,\n                                                                                     placeholder,\n                                                                                     validationType,\n                                                                                     validationMessage,\n                                                                                     onValueChange,\n                                                                                     suggestion,\n                                                                                     loading,\n                                                                                     maxSelectedItems,\n                                                                                     multiLine = true,\n                                                                                     size = Size.Medium,\n                                                                                     icon,\n                                                                                     disableFiltering,\n                                                                                     disabled,\n                                                                                     altPlaceholder\n                                                                                   }: ChipDropdownInputProps) => {\n  // Initiate states\n  const [givenList, setGivenList] = React.useState<ListItem[]>([]);\n  const [chips, setChips] = React.useState<ListItem[]>([]);\n\n  const [value, setValue] = React.useState<string>('');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [filteredList, setFilteredList] = React.useState<ListItem[]>();\n\n  const [dropdownIsOpen, setDropdownIsOpen] = React.useState<boolean>(false);\n  const [dropdownList, setDropdownList] = React.useState<DropdownItem[]>([]);\n  const [dropdownValue, setDropdownValue] = React.useState<string>('');\n\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  const containerRef = useClickOutsideRef(() => setDropdownIsOpen(false), [], useFocusOutsideRef(() => setDropdownIsOpen(false)));\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n\n    const list =\n      values.map((a) => chips.find(b => b.value === a) || givenList.find(b => b.value === a) || {\n        label: a,\n        value: a,\n        icon: icon\n      })\n        .map((a, index) => ({...a, variant: a.variant || (variants && variants[index]) || 'normal'}))\n        .map((a, index) => ({...a, icon: a.icon || icon}));\n\n    setChips(list);\n  }, [values, variants, icon, givenList]);\n\n  /**\n   * Convert string[] to List[] if necessary\n   */\n  React.useEffect(() => {\n    if (typeof list[0] === 'string') {\n      const newList: ListItem[] = (list as string[]).map((e: string) => ({label: e, value: e}));\n      setGivenList(newList);\n    } else {\n      setGivenList(list as ListItem[]);\n    }\n  }, [list]);\n\n  /**\n   * filter and sort list if remoteOperations is false\n   * */\n  React.useEffect(() => {\n    let options = [...givenList];\n    if (!disableFiltering) {\n      if (!restartFilter && value !== '') {\n        options = options.filter((option) => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 ||\n          (option.secondaryLabel && option.secondaryLabel?.toUpperCase().indexOf(value.toUpperCase()) !== -1));\n      }\n    }\n\n    if (!disableSorting) {\n      options = options.sort();\n    }\n\n    suggestion && options.push(suggestion);\n\n    options = options.filter((o) => !chips.find(a => a.value === o.value));\n    setFilteredList(options);\n  }, [value, givenList, chips, disableFiltering, disableSorting]);\n\n  /**\n   * if there is only one active item in dropdown mark it as focused\n   * */\n  React.useEffect(() => {\n    if (dropdownIsOpen && !!value && dropdownList?.filter(a => !a.disabled).length === 1) {\n      setDropdownValue(dropdownList.find(a => !a.disabled)!.value);\n    } else {\n      setDropdownValue('');\n    }\n  }, [dropdownList, dropdownIsOpen, value]);\n\n  const handleClickOutside = (e: any) => {\n    if (!containerRef.current?.contains(e.target)) {\n      if (dropdownIsOpen) {\n        setDropdownIsOpen(false);\n        if (!givenList.find((e) => e.value === value)) {\n          setValue('');\n        }\n      }\n    }\n  };\n\n  /**\n   * register click outside event listener\n   * */\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  /**\n   * update dropdown items when filtered list changes\n   * */\n  React.useEffect(() => {\n    setDropdownList(filteredList?.map(x => ({\n      value: x.value,\n      displayLabel: x.label,\n      noteLabel: x.secondaryLabel,\n      icon: (x.icon ?? icon) && SystemIcons[(x.icon || icon)!]({}),\n      disabled: x.disabled,\n    })) ?? []);\n  }, [filteredList]);\n\n  const addChip = (newChip: ListItem) => {\n    const newList = [...chips, newChip];\n    // Let's add the chip\n    setChips(newList);\n    onValueChange(newList.map(a => a.value));\n\n    setValue('');\n  };\n\n  const handleInputValueChange = (value: string) => {\n    setValue(value);\n    setRestartFilter(false);\n    setDropdownIsOpen(true);\n    onInputChange && onInputChange(value);\n  }\n\n  /**\n   * Add chip from dropdown\n   * */\n  const handleValueUpdate = (values: string[]) => {\n    const item = filteredList?.find(a => a.value === values[0]);\n    item && addChip(item);\n    setRestartFilter(true);\n    inputRef?.current?.focus();\n  }\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    // Let's trigger only on enter, comma and space key press\n    if ((event.key === 'Enter' || event.key === ' ') && value) {\n      if (dropdownList?.filter(a => !a.disabled).length === 1) {\n        handleValueUpdate([dropdownList!.find(a => !a.disabled)!.value]);\n        event.stopPropagation();\n      }\n    }\n\n    if ((event.key === 'ArrowDown' || event.key === 'Down' || event.key === 'ArrowUp' || event.key === 'Up') && !!dropdownList?.length) {\n      setDropdownIsOpen(true);\n    }\n  };\n\n  /**\n   * Removes a specific chip from the chip list.\n   * @param index - Index of the chip that needs to be removed.\n   */\n  const handleOnChipRemoved = (index: number): void => {\n    // Let's copy the chips\n    const newChips = [...chips];\n\n    // Let's delete the chip\n    // If necessary, let's replace it with a different chip\n    newChips.splice(index, 1);\n\n    // Let's update the chip list\n    setChips([...newChips]);\n    onValueChange(newChips.map((e) => e.value));\n  };\n\n  return (\n    <Wrapper ref={containerRef}>\n      <ChipInputField inputId={inputId}\n                      ref={inputRef}\n                      items={chips}\n                      inputValue={value}\n                      size={size}\n                      placeholder={placeholder}\n                      altPlaceholder={altPlaceholder}\n                      disabled={disabled}\n                      multiLine={multiLine}\n                      validationType={validationType}\n                      validationMessage={validationMessage}\n                      loading={loading}\n                      onRemoveItem={(chip, index) => handleOnChipRemoved(index)}\n                      onInputValueChange={handleInputValueChange}\n                      onInputKeyDown={handleInputKeyDown}\n                      onActivationChange={(value) => setDropdownIsOpen(value)}/>\n      <DropdownContent\n        customizationProps={{\n          action: () => {\n          },\n          pinTopItem: true,\n\n          itemsType: 'normal',\n          scrollable: true,\n          actionLabel: '',\n          multiSelect: false,\n          onValueUpdate: handleValueUpdate,\n          items: dropdownList\n        }}\n        focused={focused}\n        setFocused={setFocused}\n        selectedValues={[dropdownValue]}\n        messageOnNoResults={messageOnNoResults ?? ''}\n        setSelectedValues={() => {}}\n        isOpen={(!maxSelectedItems || (!!maxSelectedItems && chips.length < maxSelectedItems)) && dropdownIsOpen}\n        setIsOpen={setDropdownIsOpen}\n        filter={''}\n        isButton={false}\n        id={`${inputId}_dropdowncontent`}/>\n\n    </Wrapper>\n  );\n};\n"],"file":"ChipDropdownInput.cjs"}
+{"version":3,"sources":["../../src/ChipsInput/ChipDropdownInput.tsx"],"names":["Wrapper","styled","div","ChipInputContainer","Z_INDEXES","dropdown","ChipDropdownInput","list","onInputChange","disableSorting","messageOnNoResults","values","inputId","variants","placeholder","validationMessage","onValueChange","suggestion","loading","maxSelectedItems","multiLine","size","Size","Medium","icon","disableFiltering","disabled","altPlaceholder","required","React","useState","givenList","setGivenList","chips","setChips","value","setValue","restartFilter","setRestartFilter","filteredList","setFilteredList","dropdownIsOpen","setDropdownIsOpen","dropdownList","setDropdownList","dropdownValue","setDropdownValue","focused","setFocused","containerRef","inputRef","useRef","useEffect","map","a","find","b","label","index","variant","States","Default","newList","e","options","filter","option","toUpperCase","indexOf","secondaryLabel","sort","push","o","length","handleClickOutside","current","contains","target","document","addEventListener","removeEventListener","x","displayLabel","noteLabel","SystemIcons","addChip","newChip","handleInputValueChange","handleValueUpdate","item","focus","handleInputKeyDown","event","key","stopPropagation","handleOnChipRemoved","newChips","splice","chip","action","pinTopItem","itemsType","scrollable","actionLabel","multiSelect","onValueUpdate","items"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom components.\n */\nimport {ChipInputContainer, ChipInputField} from './ChipInputField';\nimport {Size, States} from '../types';\nimport {DropdownContent, DropdownItem} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {ChipInputProps, ChipItem} from './ChipInputTypes';\nimport {useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {Z_INDEXES} from '../styles';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n  width: 100%;\n\n  ${ChipInputContainer} {\n    position: relative;\n\n    &:focus, &.focus-visible-within {\n      z-index: ${Z_INDEXES.dropdown + 1} !important;\n    }\n  }\n`;\n\n\ninterface ListItem extends ChipItem {\n  secondaryLabel?: string;\n  value: string;\n}\n\ninterface ChipDropdownInputProps extends ChipInputProps {\n  list: ListItem[] | string[];\n  onInputChange?: (input: string) => void;\n  messageOnNoResults?: string;\n  suggestion?: ListItem;\n  loading?: boolean;\n  maxSelectedItems?: number;\n  disableSorting?: boolean;\n  disableFiltering?: boolean;\n}\n\nexport const ChipDropdownInput: React.FunctionComponent<ChipDropdownInputProps> = ({\n                                                                                     list,\n                                                                                     onInputChange,\n                                                                                     disableSorting,\n                                                                                     messageOnNoResults,\n                                                                                     values,\n                                                                                     inputId,\n                                                                                     variants,\n                                                                                     placeholder,\n                                                                                     validationMessage,\n                                                                                     onValueChange,\n                                                                                     suggestion,\n                                                                                     loading,\n                                                                                     maxSelectedItems,\n                                                                                     multiLine = true,\n                                                                                     size = Size.Medium,\n                                                                                     icon,\n                                                                                     disableFiltering,\n                                                                                     disabled,\n                                                                                     altPlaceholder,\n                                                                                     required\n                                                                                   }: ChipDropdownInputProps) => {\n  // Initiate states\n  const [givenList, setGivenList] = React.useState<ListItem[]>([]);\n  const [chips, setChips] = React.useState<ListItem[]>([]);\n\n  const [value, setValue] = React.useState<string>('');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [filteredList, setFilteredList] = React.useState<ListItem[]>();\n\n  const [dropdownIsOpen, setDropdownIsOpen] = React.useState<boolean>(false);\n  const [dropdownList, setDropdownList] = React.useState<DropdownItem[]>([]);\n  const [dropdownValue, setDropdownValue] = React.useState<string>('');\n\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  const containerRef = useClickOutsideRef(() => setDropdownIsOpen(false), [], useFocusOutsideRef(() => setDropdownIsOpen(false)));\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n\n    const list =\n      values.map((a) => chips.find(b => b.value === a) || givenList.find(b => b.value === a) || {\n        label: a,\n        value: a,\n        icon: icon\n      })\n        .map((a, index) => ({...a, variant: a.variant || (variants && variants[index]) || States.Default}))\n        .map((a, index) => ({...a, icon: a.icon || icon}));\n\n    setChips(list);\n  }, [values, variants, icon, givenList]);\n\n  /**\n   * Convert string[] to List[] if necessary\n   */\n  React.useEffect(() => {\n    if (typeof list[0] === 'string') {\n      const newList: ListItem[] = (list as string[]).map((e: string) => ({label: e, value: e}));\n      setGivenList(newList);\n    } else {\n      setGivenList(list as ListItem[]);\n    }\n  }, [list]);\n\n  /**\n   * filter and sort list if remoteOperations is false\n   * */\n  React.useEffect(() => {\n    let options = [...givenList];\n    if (!disableFiltering) {\n      if (!restartFilter && value !== '') {\n        options = options.filter((option) => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 ||\n          (option.secondaryLabel && option.secondaryLabel?.toUpperCase().indexOf(value.toUpperCase()) !== -1));\n      }\n    }\n\n    if (!disableSorting) {\n      options = options.sort();\n    }\n\n    suggestion && options.push(suggestion);\n\n    options = options.filter((o) => !chips.find(a => a.value === o.value));\n    setFilteredList(options);\n  }, [value, givenList, chips, disableFiltering, disableSorting]);\n\n  /**\n   * if there is only one active item in dropdown mark it as focused\n   * */\n  React.useEffect(() => {\n    if (dropdownIsOpen && !!value && dropdownList?.filter(a => !a.disabled).length === 1) {\n      setDropdownValue(dropdownList.find(a => !a.disabled)!.value);\n    } else {\n      setDropdownValue('');\n    }\n  }, [dropdownList, dropdownIsOpen, value]);\n\n  const handleClickOutside = (e: any) => {\n    if (!containerRef.current?.contains(e.target)) {\n      if (dropdownIsOpen) {\n        setDropdownIsOpen(false);\n        if (!givenList.find((e) => e.value === value)) {\n          setValue('');\n        }\n      }\n    }\n  };\n\n  /**\n   * register click outside event listener\n   * */\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  /**\n   * update dropdown items when filtered list changes\n   * */\n  React.useEffect(() => {\n    setDropdownList(filteredList?.map(x => ({\n      value: x.value,\n      displayLabel: x.label,\n      noteLabel: x.secondaryLabel,\n      icon: (x.icon ?? icon) && SystemIcons[(x.icon || icon)!]({}),\n      disabled: x.disabled,\n    })) ?? []);\n  }, [filteredList]);\n\n  const addChip = (newChip: ListItem) => {\n    const newList = [...chips, newChip];\n    // Let's add the chip\n    setChips(newList);\n    onValueChange(newList.map(a => a.value));\n\n    setValue('');\n  };\n\n  const handleInputValueChange = (value: string) => {\n    setValue(value);\n    setRestartFilter(false);\n    setDropdownIsOpen(true);\n    onInputChange && onInputChange(value);\n  }\n\n  /**\n   * Add chip from dropdown\n   * */\n  const handleValueUpdate = (values: string[]) => {\n    const item = filteredList?.find(a => a.value === values[0]);\n    item && addChip(item);\n    setRestartFilter(true);\n    inputRef?.current?.focus();\n  }\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    // Let's trigger only on enter, comma and space key press\n    if ((event.key === 'Enter' || event.key === ' ') && value) {\n      if (dropdownList?.filter(a => !a.disabled).length === 1) {\n        handleValueUpdate([dropdownList!.find(a => !a.disabled)!.value]);\n        event.stopPropagation();\n      }\n    }\n\n    if ((event.key === 'ArrowDown' || event.key === 'Down' || event.key === 'ArrowUp' || event.key === 'Up') && !!dropdownList?.length) {\n      setDropdownIsOpen(true);\n    }\n  };\n\n  /**\n   * Removes a specific chip from the chip list.\n   * @param index - Index of the chip that needs to be removed.\n   */\n  const handleOnChipRemoved = (index: number): void => {\n    // Let's copy the chips\n    const newChips = [...chips];\n\n    // Let's delete the chip\n    // If necessary, let's replace it with a different chip\n    newChips.splice(index, 1);\n\n    // Let's update the chip list\n    setChips([...newChips]);\n    onValueChange(newChips.map((e) => e.value));\n  };\n\n  return (\n    <Wrapper ref={containerRef}>\n      <ChipInputField inputId={inputId}\n                      ref={inputRef}\n                      items={chips}\n                      required={required}\n                      inputValue={value}\n                      size={size}\n                      placeholder={placeholder}\n                      altPlaceholder={altPlaceholder}\n                      disabled={disabled}\n                      multiLine={multiLine}\n                      validationMessage={validationMessage}\n                      loading={loading}\n                      onRemoveItem={(chip, index) => handleOnChipRemoved(index)}\n                      onInputValueChange={handleInputValueChange}\n                      onInputKeyDown={handleInputKeyDown}\n                      onActivationChange={(value) => setDropdownIsOpen(value)}/>\n      <DropdownContent\n        customizationProps={{\n          action: () => {\n          },\n          pinTopItem: true,\n\n          itemsType: 'normal',\n          scrollable: true,\n          actionLabel: '',\n          multiSelect: false,\n          onValueUpdate: handleValueUpdate,\n          items: dropdownList\n        }}\n        focused={focused}\n        setFocused={setFocused}\n        selectedValues={[dropdownValue]}\n        messageOnNoResults={messageOnNoResults ?? ''}\n        setSelectedValues={() => {\n        }}\n        isOpen={(!maxSelectedItems || (!!maxSelectedItems && chips.length < maxSelectedItems)) && dropdownIsOpen}\n        setIsOpen={setDropdownIsOpen}\n        filter={''}\n        isButton={false}\n        id={`${inputId}_dropdowncontent`}/>\n\n    </Wrapper>\n  );\n};\n"],"file":"ChipDropdownInput.cjs"}

package/dist/ChipsInput/ChipDropdownInput.d.ts

@@ -16,7 +16,6 @@ interface ChipDropdownInputProps extends ChipInputProps {
     maxSelectedItems?: number;
     disableSorting?: boolean;
     disableFiltering?: boolean;
-    allowCustomItem?: boolean;
 }
 export declare const ChipDropdownInput: React.FunctionComponent<ChipDropdownInputProps>;
 export {};