@laerdal/life-react-components 5.0.8-dev.2.full → 5.0.9

package/dist/Chips/ChipStyles.cjs

@@ -15,7 +15,68 @@ var _templateObject, _templateObject2, _templateObject3;
 /**
  * Import custom style properties.
  */
-const ChipContentContainer = exports.ChipContentContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n  width: max-content;\n"])));
-const ChipContent = exports.ChipContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, null));
-const ChipContainer = exports.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, props => _styles.COLORS.getColor('white', props.theme), ChipContent, props => _styles.COLORS.getColor('primary_500', props.theme), ChipContent, props => _styles.COLORS.getColor('primary_700', props.theme), ChipContent, props => _styles.COLORS.getColor('primary_800', props.theme), props => _styles.COLORS.getColor('neutral_600', props.theme), ChipContent, props => _styles.COLORS.getColor('white', props.theme), props => _styles.COLORS.getColor('neutral_200', props.theme), ChipContent, props => _styles.COLORS.getColor('primary_20', props.theme), props => _styles.COLORS.getColor('primary_200', props.theme), props => _styles.COLORS.getColor('primary_700', props.theme), ChipContent, props => _styles.COLORS.getColor('primary_100', props.theme), props => _styles.COLORS.getColor('primary_300', props.theme), props => _styles.COLORS.getColor('primary_800', props.theme), ChipContent, ChipContent, ChipContent, ChipContent, props => _styles.COLORS.getColor('critical_100', props.theme), props => _styles.COLORS.getColor('critical_600', props.theme), ChipContent, props => _styles.COLORS.getColor('critical_200', props.theme), props => _styles.COLORS.getColor('critical_700', props.theme), ChipContent, props => _styles.COLORS.getColor('critical_300', props.theme), props => _styles.COLORS.getColor('critical_800', props.theme), _styles.focusStyles, props => _styles.COLORS.getColor('primary_700', props.theme), props => _styles.COLORS.getColor('primary_800', props.theme), props => _styles.COLORS.getColor('primary_300', props.theme), props => _styles.COLORS.getColor('critical_200', props.theme), props => _styles.COLORS.getColor('critical_700', props.theme), props => _styles.COLORS.getColor('critical_300', props.theme), props => _styles.COLORS.getColor('critical_800', props.theme), props => _styles.COLORS.getColor('primary_300', props.theme), ChipContentContainer, ChipContent, props => _styles.COLORS.getColor('neutral_100', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme));
+var ChipContentContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n  width: max-content;\n"])));
+exports.ChipContentContainer = ChipContentContainer;
+var ChipContent = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\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"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, null));
+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  &.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, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+}, ChipContent, function (props) {
+  return _styles.COLORS.getColor('primary_500', props.theme);
+}, ChipContent, function (props) {
+  return _styles.COLORS.getColor('primary_700', props.theme);
+}, ChipContent, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_600', props.theme);
+}, ChipContent, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
+}, ChipContent, function (props) {
+  return _styles.COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_200', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_700', props.theme);
+}, ChipContent, function (props) {
+  return _styles.COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_300', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+}, ChipContent, ChipContent, ChipContent, ChipContent, function (props) {
+  return _styles.COLORS.getColor('critical_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('critical_600', props.theme);
+}, ChipContent, function (props) {
+  return _styles.COLORS.getColor('critical_200', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('critical_700', props.theme);
+}, ChipContent, function (props) {
+  return _styles.COLORS.getColor('critical_300', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('critical_800', props.theme);
+}, _styles.focusStyles, function (props) {
+  return _styles.COLORS.getColor('primary_700', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_300', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('critical_200', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('critical_700', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('critical_300', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('critical_800', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_300', props.theme);
+}, ChipContentContainer, ChipContent, function (props) {
+  return _styles.COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_300', props.theme);
+});
+exports.ChipContainer = ChipContainer;
 //# sourceMappingURL=ChipStyles.cjs.map

package/dist/Chips/ChipStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChipStyles.cjs","names":["_styledComponents","_interopRequireDefault","require","_styles","_templateObject","_templateObject2","_templateObject3","ChipContentContainer","exports","styled","div","_taggedTemplateLiteral2","default","ChipContent","ComponentXSStyling","ComponentTextStyle","Bold","ChipContainer","ComponentSStyling","ComponentMStyling","focusStyles","props","COLORS","getColor","theme"],"sources":["../../src/Chips/ChipStyles.ts"],"sourcesContent":["/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\n\r\n/**\r\n * Import custom style properties.\r\n */\r\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';\r\n\r\nexport const ChipContentContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  min-height: 48px;\r\n  width: max-content;\r\n`;\r\n\r\nexport const ChipContent = styled.div`\r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n\r\n  position: relative;\r\n  display: flex;\r\n  gap: 4px;\r\n  align-items: center;\r\n  min-height: 24px;\r\n  box-sizing: border-box;\r\n  border-radius: 24px;\r\n  padding: 4px 12px;\r\n\r\n  .chip-icon {\r\n    height: 16px;\r\n    width: 16px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      height: 16px;\r\n      width: 16px;\r\n    }\r\n  }\r\n\r\n  .icon-left {\r\n    margin-left: -4px;\r\n  }\r\n\r\n  .icon-right {\r\n    margin-right: -4px;\r\n  }\r\n\r\n  .action-right {\r\n    position: absolute;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    height: 48px;\r\n    width: 48px;\r\n    right: -8px;\r\n  }\r\n\r\n  &.with-action-right {\r\n    position: relative;\r\n    padding-right: 28px;\r\n  }\r\n`;\r\n\r\nexport const ChipContainer = styled.div`\r\n  display: inline-block;\r\n  cursor: pointer;\r\n  position: relative;\r\n\r\n  &.medium {\r\n    ${ChipContent} {\r\n      gap: 6px;\r\n      padding: 10px 16px;\r\n\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      .chip-icon {\r\n        height: 20px;\r\n        width: 20px;\r\n\r\n        svg {\r\n          height: 20px;\r\n          width: 20px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .with-action-right {\r\n      padding-right: 38px;\r\n\r\n      .action-right {\r\n        right: -2px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ChipContent} {\r\n      gap: 8px;\r\n      padding: 12px 20px;\r\n\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      .chip-icon {\r\n        height: 24px;\r\n        width: 24px;\r\n\r\n        svg {\r\n          height: 24px;\r\n          width: 24px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .with-action-right {\r\n      padding-right: 48px;\r\n\r\n      .action-right {\r\n        right: 4px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.default {\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.outline {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('primary_200', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('primary_300', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      box-shadow: none;\r\n    }\r\n  }\r\n\r\n  //account for border\r\n  &.small.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 2px 10px;\r\n    }\r\n  }\r\n\r\n  &.medium.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 8px 14px;\r\n    }\r\n  }\r\n\r\n  &.large.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 10px 18px;\r\n    }\r\n  }\r\n\r\n  &.invalid {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('critical_100', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${props => COLORS.getColor('critical_200', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${props => COLORS.getColor('critical_300', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  .action-right:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  .action-right:hover .chip-icon {\r\n    background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  .action-right:active .chip-icon {\r\n    background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  .action-right.disabled .chip-icon {\r\n    background-color: transparent;\r\n    color: ${props => COLORS.getColor('primary_300', props.theme)};\r\n  }\r\n\r\n  &.invalid {\r\n    .action-right:hover .chip-icon {\r\n      background-color: ${props => COLORS.getColor('critical_200', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_700', props.theme)};\r\n    }\r\n\r\n    .action-right:active .chip-icon {\r\n      background-color: ${props => COLORS.getColor('critical_300', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_800', props.theme)};\r\n    }\r\n\r\n    .action-right.disabled .chip-icon {\r\n      background-color: transparent;\r\n      color: ${props => COLORS.getColor('primary_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    ${ChipContentContainer} {\r\n      pointer-events: none;\r\n    }\r\n\r\n    ${ChipContent} {\r\n      border: none !important;\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    }\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ChipStyles.cjs","names":["_styledComponents","_interopRequireDefault","require","_styles","_templateObject","_templateObject2","_templateObject3","ChipContentContainer","styled","div","_taggedTemplateLiteral2","exports","ChipContent","ComponentXSStyling","ComponentTextStyle","Bold","ChipContainer","ComponentSStyling","ComponentMStyling","focusStyles","props","COLORS","getColor","theme"],"sources":["../../src/Chips/ChipStyles.ts"],"sourcesContent":["/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\n\r\n/**\r\n * Import custom style properties.\r\n */\r\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';\r\n\r\nexport const ChipContentContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  min-height: 48px;\r\n  width: max-content;\r\n`;\r\n\r\nexport const ChipContent = styled.div`\r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n\r\n  position: relative;\r\n  display: flex;\r\n  gap: 4px;\r\n  align-items: center;\r\n  min-height: 24px;\r\n  box-sizing: border-box;\r\n  border-radius: 24px;\r\n  padding: 4px 12px;\r\n\r\n  .chip-icon {\r\n    height: 16px;\r\n    width: 16px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      height: 16px;\r\n      width: 16px;\r\n    }\r\n  }\r\n\r\n  .icon-left {\r\n    margin-left: -4px;\r\n  }\r\n\r\n  .icon-right {\r\n    margin-right: -4px;\r\n  }\r\n\r\n  .action-right {\r\n    position: absolute;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    height: 48px;\r\n    width: 48px;\r\n    right: -8px;\r\n  }\r\n\r\n  &.with-action-right {\r\n    position: relative;\r\n    padding-right: 28px;\r\n  }\r\n`;\r\n\r\nexport const ChipContainer = styled.div`\r\n  display: inline-block;\r\n  cursor: pointer;\r\n  position: relative;\r\n\r\n  &.medium {\r\n    ${ChipContent} {\r\n      gap: 6px;\r\n      padding: 10px 16px;\r\n\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      .chip-icon {\r\n        height: 20px;\r\n        width: 20px;\r\n\r\n        svg {\r\n          height: 20px;\r\n          width: 20px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .with-action-right {\r\n      padding-right: 38px;\r\n\r\n      .action-right {\r\n        right: -2px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ChipContent} {\r\n      gap: 8px;\r\n      padding: 12px 20px;\r\n\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      .chip-icon {\r\n        height: 24px;\r\n        width: 24px;\r\n\r\n        svg {\r\n          height: 24px;\r\n          width: 24px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .with-action-right {\r\n      padding-right: 48px;\r\n\r\n      .action-right {\r\n        right: 4px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.default {\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.outline {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('primary_200', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('primary_300', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      box-shadow: none;\r\n    }\r\n  }\r\n\r\n  //account for border\r\n  &.small.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 2px 10px;\r\n    }\r\n  }\r\n\r\n  &.medium.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 8px 14px;\r\n    }\r\n  }\r\n\r\n  &.large.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 10px 18px;\r\n    }\r\n  }\r\n\r\n  &.invalid {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('critical_100', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${props => COLORS.getColor('critical_200', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${props => COLORS.getColor('critical_300', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  .action-right:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  .action-right:hover .chip-icon {\r\n    background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  .action-right:active .chip-icon {\r\n    background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  .action-right.disabled .chip-icon {\r\n    background-color: transparent;\r\n    color: ${props => COLORS.getColor('primary_300', props.theme)};\r\n  }\r\n\r\n  &.invalid {\r\n    .action-right:hover .chip-icon {\r\n      background-color: ${props => COLORS.getColor('critical_200', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_700', props.theme)};\r\n    }\r\n\r\n    .action-right:active .chip-icon {\r\n      background-color: ${props => COLORS.getColor('critical_300', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_800', props.theme)};\r\n    }\r\n\r\n    .action-right.disabled .chip-icon {\r\n      background-color: transparent;\r\n      color: ${props => COLORS.getColor('primary_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    ${ChipContentContainer} {\r\n      pointer-events: none;\r\n    }\r\n\r\n    ${ChipContent} {\r\n      border: none !important;\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    }\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Chips/ChipStyles.js

@@ -9,7 +9,65 @@ import styled from 'styled-components';
  * Import custom style properties.
  */
 import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';
-export const ChipContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n  width: max-content;\n"])));
-export const 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 const 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, props => COLORS.getColor('white', props.theme), ChipContent, props => COLORS.getColor('primary_500', props.theme), ChipContent, props => COLORS.getColor('primary_700', props.theme), ChipContent, props => COLORS.getColor('primary_800', props.theme), props => COLORS.getColor('neutral_600', props.theme), ChipContent, props => COLORS.getColor('white', props.theme), props => COLORS.getColor('neutral_200', props.theme), ChipContent, props => COLORS.getColor('primary_20', props.theme), props => COLORS.getColor('primary_200', props.theme), props => COLORS.getColor('primary_700', props.theme), ChipContent, props => COLORS.getColor('primary_100', props.theme), props => COLORS.getColor('primary_300', props.theme), props => COLORS.getColor('primary_800', props.theme), ChipContent, ChipContent, ChipContent, ChipContent, props => COLORS.getColor('critical_100', props.theme), props => COLORS.getColor('critical_600', props.theme), ChipContent, props => COLORS.getColor('critical_200', props.theme), props => COLORS.getColor('critical_700', props.theme), ChipContent, props => COLORS.getColor('critical_300', props.theme), props => COLORS.getColor('critical_800', props.theme), focusStyles, props => COLORS.getColor('primary_700', props.theme), props => COLORS.getColor('primary_800', props.theme), props => COLORS.getColor('primary_300', props.theme), props => COLORS.getColor('critical_200', props.theme), props => COLORS.getColor('critical_700', props.theme), props => COLORS.getColor('critical_300', props.theme), props => COLORS.getColor('critical_800', props.theme), props => COLORS.getColor('primary_300', props.theme), ChipContentContainer, ChipContent, props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('neutral_300', props.theme));
+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  &.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, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, ChipContent, function (props) {
+  return COLORS.getColor('primary_500', props.theme);
+}, ChipContent, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+}, ChipContent, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_600', props.theme);
+}, ChipContent, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+}, ChipContent, function (props) {
+  return COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_200', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+}, ChipContent, function (props) {
+  return COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_300', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, ChipContent, ChipContent, ChipContent, ChipContent, function (props) {
+  return COLORS.getColor('critical_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('critical_600', props.theme);
+}, ChipContent, function (props) {
+  return COLORS.getColor('critical_200', props.theme);
+}, function (props) {
+  return COLORS.getColor('critical_700', props.theme);
+}, ChipContent, function (props) {
+  return COLORS.getColor('critical_300', props.theme);
+}, function (props) {
+  return COLORS.getColor('critical_800', props.theme);
+}, focusStyles, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_300', props.theme);
+}, function (props) {
+  return COLORS.getColor('critical_200', props.theme);
+}, function (props) {
+  return COLORS.getColor('critical_700', props.theme);
+}, function (props) {
+  return COLORS.getColor('critical_300', props.theme);
+}, function (props) {
+  return COLORS.getColor('critical_800', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_300', props.theme);
+}, ChipContentContainer, ChipContent, function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+});
 //# sourceMappingURL=ChipStyles.js.map

package/dist/Chips/ChipStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipStyles.js","names":["styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","focusStyles","ChipContentContainer","div","_templateObject","_taggedTemplateLiteral","ChipContent","_templateObject2","Bold","ChipContainer","_templateObject3","props","getColor","theme"],"sources":["../../src/Chips/ChipStyles.ts"],"sourcesContent":["/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\n\r\n/**\r\n * Import custom style properties.\r\n */\r\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';\r\n\r\nexport const ChipContentContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  min-height: 48px;\r\n  width: max-content;\r\n`;\r\n\r\nexport const ChipContent = styled.div`\r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n\r\n  position: relative;\r\n  display: flex;\r\n  gap: 4px;\r\n  align-items: center;\r\n  min-height: 24px;\r\n  box-sizing: border-box;\r\n  border-radius: 24px;\r\n  padding: 4px 12px;\r\n\r\n  .chip-icon {\r\n    height: 16px;\r\n    width: 16px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      height: 16px;\r\n      width: 16px;\r\n    }\r\n  }\r\n\r\n  .icon-left {\r\n    margin-left: -4px;\r\n  }\r\n\r\n  .icon-right {\r\n    margin-right: -4px;\r\n  }\r\n\r\n  .action-right {\r\n    position: absolute;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    height: 48px;\r\n    width: 48px;\r\n    right: -8px;\r\n  }\r\n\r\n  &.with-action-right {\r\n    position: relative;\r\n    padding-right: 28px;\r\n  }\r\n`;\r\n\r\nexport const ChipContainer = styled.div`\r\n  display: inline-block;\r\n  cursor: pointer;\r\n  position: relative;\r\n\r\n  &.medium {\r\n    ${ChipContent} {\r\n      gap: 6px;\r\n      padding: 10px 16px;\r\n\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      .chip-icon {\r\n        height: 20px;\r\n        width: 20px;\r\n\r\n        svg {\r\n          height: 20px;\r\n          width: 20px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .with-action-right {\r\n      padding-right: 38px;\r\n\r\n      .action-right {\r\n        right: -2px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ChipContent} {\r\n      gap: 8px;\r\n      padding: 12px 20px;\r\n\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      .chip-icon {\r\n        height: 24px;\r\n        width: 24px;\r\n\r\n        svg {\r\n          height: 24px;\r\n          width: 24px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .with-action-right {\r\n      padding-right: 48px;\r\n\r\n      .action-right {\r\n        right: 4px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.default {\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.outline {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('primary_200', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('primary_300', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      box-shadow: none;\r\n    }\r\n  }\r\n\r\n  //account for border\r\n  &.small.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 2px 10px;\r\n    }\r\n  }\r\n\r\n  &.medium.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 8px 14px;\r\n    }\r\n  }\r\n\r\n  &.large.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 10px 18px;\r\n    }\r\n  }\r\n\r\n  &.invalid {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('critical_100', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${props => COLORS.getColor('critical_200', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${props => COLORS.getColor('critical_300', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  .action-right:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  .action-right:hover .chip-icon {\r\n    background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  .action-right:active .chip-icon {\r\n    background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  .action-right.disabled .chip-icon {\r\n    background-color: transparent;\r\n    color: ${props => COLORS.getColor('primary_300', props.theme)};\r\n  }\r\n\r\n  &.invalid {\r\n    .action-right:hover .chip-icon {\r\n      background-color: ${props => COLORS.getColor('critical_200', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_700', props.theme)};\r\n    }\r\n\r\n    .action-right:active .chip-icon {\r\n      background-color: ${props => COLORS.getColor('critical_300', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_800', props.theme)};\r\n    }\r\n\r\n    .action-right.disabled .chip-icon {\r\n      background-color: transparent;\r\n      color: ${props => COLORS.getColor('primary_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    ${ChipContentContainer} {\r\n      pointer-events: none;\r\n    }\r\n\r\n    ${ChipContent} {\r\n      border: none !important;\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    }\r\n  }\r\n`;\r\n"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,MAAM,MAAM,mBAAmB;;AAEtC;AACA;AACA;AACA,SAASC,MAAM,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,kBAAkB,EAAEC,WAAW,QAAQ,WAAW;AAE7H,OAAO,MAAMC,oBAAoB,GAAGP,MAAM,CAACQ,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,gGAK7C;AAED,OAAO,MAAMC,WAAW,GAAGX,MAAM,CAACQ,GAAG,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,sBAAA,4rBACjCL,kBAAkB,CAACD,kBAAkB,CAACS,IAAI,EAAE,IAAI,CAAC,CA4CpD;AAED,OAAO,MAAMC,aAAa,GAAGd,MAAM,CAACQ,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAL,sBAAA,oiGAMjCC,WAAW,EAITR,iBAAiB,CAACC,kBAAkB,CAACS,IAAI,EAAE,IAAI,CAAC,EAsBlDF,WAAW,EAITT,iBAAiB,CAACE,kBAAkB,CAACS,IAAI,EAAE,IAAI,CAAC,EAsBlDP,WAAW,EAIJU,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC,EAErDP,WAAW,EACSK,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,EAKxEP,WAAW,EACSK,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,EAKxEP,WAAW,EACSK,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,EAKjEF,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,EAE3DP,WAAW,EACSK,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC,EAC9CF,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,EAKxEP,WAAW,EACSK,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,YAAY,EAAED,KAAK,CAACE,KAAK,CAAC,EACnDF,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,EAC/DF,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,EAK7DP,WAAW,EACSK,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,EACpDF,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,EAC/DF,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,EAO7DP,WAAW,EAMXA,WAAW,EAMXA,WAAW,EAMXA,WAAW,EACSK,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC,EAChEF,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC,EAK9DP,WAAW,EACGK,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC,EAC1DF,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC,EAK9DP,WAAW,EACGK,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC,EAC1DF,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC,EAK9DZ,WAAW,EAIOU,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,EAIpDF,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,EAK/DF,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,EAKvCF,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC,EAChEF,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC,EAI1CF,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC,EAChEF,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC,EAKrDF,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,EAO7DX,oBAAoB,EAIpBI,WAAW,EAESK,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,EAC/DF,KAAK,IAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,CAGlE","ignoreList":[]}
+{"version":3,"file":"ChipStyles.js","names":["styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","focusStyles","ChipContentContainer","div","_templateObject","_taggedTemplateLiteral","ChipContent","_templateObject2","Bold","ChipContainer","_templateObject3","props","getColor","theme"],"sources":["../../src/Chips/ChipStyles.ts"],"sourcesContent":["/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\n\r\n/**\r\n * Import custom style properties.\r\n */\r\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';\r\n\r\nexport const ChipContentContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  min-height: 48px;\r\n  width: max-content;\r\n`;\r\n\r\nexport const ChipContent = styled.div`\r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n\r\n  position: relative;\r\n  display: flex;\r\n  gap: 4px;\r\n  align-items: center;\r\n  min-height: 24px;\r\n  box-sizing: border-box;\r\n  border-radius: 24px;\r\n  padding: 4px 12px;\r\n\r\n  .chip-icon {\r\n    height: 16px;\r\n    width: 16px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      height: 16px;\r\n      width: 16px;\r\n    }\r\n  }\r\n\r\n  .icon-left {\r\n    margin-left: -4px;\r\n  }\r\n\r\n  .icon-right {\r\n    margin-right: -4px;\r\n  }\r\n\r\n  .action-right {\r\n    position: absolute;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    height: 48px;\r\n    width: 48px;\r\n    right: -8px;\r\n  }\r\n\r\n  &.with-action-right {\r\n    position: relative;\r\n    padding-right: 28px;\r\n  }\r\n`;\r\n\r\nexport const ChipContainer = styled.div`\r\n  display: inline-block;\r\n  cursor: pointer;\r\n  position: relative;\r\n\r\n  &.medium {\r\n    ${ChipContent} {\r\n      gap: 6px;\r\n      padding: 10px 16px;\r\n\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      .chip-icon {\r\n        height: 20px;\r\n        width: 20px;\r\n\r\n        svg {\r\n          height: 20px;\r\n          width: 20px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .with-action-right {\r\n      padding-right: 38px;\r\n\r\n      .action-right {\r\n        right: -2px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ChipContent} {\r\n      gap: 8px;\r\n      padding: 12px 20px;\r\n\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      .chip-icon {\r\n        height: 24px;\r\n        width: 24px;\r\n\r\n        svg {\r\n          height: 24px;\r\n          width: 24px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .with-action-right {\r\n      padding-right: 48px;\r\n\r\n      .action-right {\r\n        right: 4px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.default {\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.outline {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('primary_200', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n      border: 2px solid ${props => COLORS.getColor('primary_300', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      box-shadow: none;\r\n    }\r\n  }\r\n\r\n  //account for border\r\n  &.small.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 2px 10px;\r\n    }\r\n  }\r\n\r\n  &.medium.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 8px 14px;\r\n    }\r\n  }\r\n\r\n  &.large.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 10px 18px;\r\n    }\r\n  }\r\n\r\n  &.invalid {\r\n    ${ChipContent} {\r\n      background-color: ${props => COLORS.getColor('critical_100', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${props => COLORS.getColor('critical_200', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${props => COLORS.getColor('critical_300', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  .action-right:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  .action-right:hover .chip-icon {\r\n    background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  .action-right:active .chip-icon {\r\n    background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  .action-right.disabled .chip-icon {\r\n    background-color: transparent;\r\n    color: ${props => COLORS.getColor('primary_300', props.theme)};\r\n  }\r\n\r\n  &.invalid {\r\n    .action-right:hover .chip-icon {\r\n      background-color: ${props => COLORS.getColor('critical_200', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_700', props.theme)};\r\n    }\r\n\r\n    .action-right:active .chip-icon {\r\n      background-color: ${props => COLORS.getColor('critical_300', props.theme)};\r\n      color: ${props => COLORS.getColor('critical_800', props.theme)};\r\n    }\r\n\r\n    .action-right.disabled .chip-icon {\r\n      background-color: transparent;\r\n      color: ${props => COLORS.getColor('primary_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    ${ChipContentContainer} {\r\n      pointer-events: none;\r\n    }\r\n\r\n    ${ChipContent} {\r\n      border: none !important;\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    }\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Chips/ChoiceChips.cjs

@@ -1,18 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var React = _interopRequireWildcard(require("react"));
 var _ChipStyles = require("./ChipStyles");
 var _common = require("../common");
 var _types = require("../types");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["value", "size", "label", "className"];
+var _excluded = ["value", "size", "label", "className"];
 /**
  * Import React libraries.
  */
@@ -22,27 +24,28 @@ const _excluded = ["value", "size", "label", "className"];
 /**
  * Import custom types.
  */
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-const ChoiceChips = _ref => {
-  let {
-    selected,
-    disabled,
-    onClick,
-    values,
-    dataTestId
-  } = _ref;
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ChoiceChips = function ChoiceChips(_ref) {
+  var selected = _ref.selected,
+    disabled = _ref.disabled,
+    onClick = _ref.onClick,
+    values = _ref.values,
+    dataTestId = _ref.dataTestId;
   /**
    * Globally used variables within the component.
    */
-  const [selectedChip, setSelectedChip] = React.useState('');
+  var _React$useState = React.useState(''),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    selectedChip = _React$useState2[0],
+    setSelectedChip = _React$useState2[1];
 
   /**
    * Set the selected value for the chip.
    */
-  React.useEffect(() => {
+  React.useEffect(function () {
     setSelectedChip(selected);
   }, [selected]);
 
@@ -50,14 +53,14 @@ const ChoiceChips = _ref => {
    * Sets selected chip and fires an event to parent component.
    * @param value - Chip which was selected.
    */
-  const onSelectChip = value => {
+  var onSelectChip = function onSelectChip(value) {
     // Update selected chip
     setSelectedChip(value.value);
 
     // Fire the event
     onClick && onClick(value);
   };
-  const handleKeyDown = (e, value) => {
+  var handleKeyDown = function handleKeyDown(e, value) {
     if (e.key === 'Enter' || e.key === ' ') {
       onSelectChip(value);
     }
@@ -69,22 +72,25 @@ const ChoiceChips = _ref => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     role: "radiogroup",
     "data-testid": dataTestId,
-    children: values.map(item => {
-      const {
-          value,
-          size = _types.Size.Medium,
-          label,
-          className
-        } = item,
-        rest = (0, _objectWithoutProperties2.default)(item, _excluded);
+    children: values.map(function (item) {
+      var value = item.value,
+        _item$size = item.size,
+        size = _item$size === void 0 ? _types.Size.Medium : _item$size,
+        label = item.label,
+        className = item.className,
+        rest = (0, _objectWithoutProperties2["default"])(item, _excluded);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, _objectSpread(_objectSpread({
         role: "radio",
         tabIndex: disabled ? -1 : 0,
         className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value ? 'default' : 'outline', " interactive ").concat(className || ''),
         onMouseDown: _common.defaultOnMouseDownHandler,
         "aria-checked": selectedChip === value,
-        onClick: () => !disabled && onSelectChip(item),
-        onKeyDown: e => !disabled && handleKeyDown(e, item)
+        onClick: function onClick() {
+          return !disabled && onSelectChip(item);
+        },
+        onKeyDown: function onKeyDown(e) {
+          return !disabled && handleKeyDown(e, item);
+        }
       }, rest), {}, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContentContainer, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContent, {
@@ -95,5 +101,6 @@ const ChoiceChips = _ref => {
     })
   });
 };
-var _default = exports.default = ChoiceChips;
+var _default = ChoiceChips;
+exports["default"] = _default;
 //# sourceMappingURL=ChoiceChips.cjs.map

package/dist/Chips/ChoiceChips.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceChips.cjs","names":["React","_interopRequireWildcard","require","_ChipStyles","_common","_types","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","ChoiceChips","_ref","selected","disabled","onClick","values","dataTestId","selectedChip","setSelectedChip","useState","useEffect","onSelectChip","value","handleKeyDown","key","jsx","role","children","map","item","size","Size","Medium","label","className","rest","_objectWithoutProperties2","ChipContainer","tabIndex","concat","onMouseDown","defaultOnMouseDownHandler","onKeyDown","ChipContentContainer","ChipContent","_default","exports"],"sources":["../../src/Chips/ChoiceChips.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport {Size} from '../types';\r\n\r\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\r\n                                                                 selected,\r\n                                                                 disabled,\r\n                                                                 onClick,\r\n                                                                 values,\r\n                                                                 dataTestId\r\n                                                               }: ChoiceChipProps) => {\r\n  /**\r\n   * Globally used variables within the component.\r\n   */\r\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\r\n\r\n  /**\r\n   * Set the selected value for the chip.\r\n   */\r\n  React.useEffect(() => {\r\n    setSelectedChip(selected);\r\n  }, [selected]);\r\n\r\n  /**\r\n   * Sets selected chip and fires an event to parent component.\r\n   * @param value - Chip which was selected.\r\n   */\r\n  const onSelectChip = (value: ChipValue) => {\r\n    // Update selected chip\r\n    setSelectedChip(value.value);\r\n\r\n    // Fire the event\r\n    onClick && onClick(value);\r\n  };\r\n\r\n  const handleKeyDown = (e: any, value: ChipValue) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      onSelectChip(value);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Return Choice Chip component.\r\n   */\r\n  return (\r\n    <div role=\"radiogroup\" data-testid={dataTestId}>\r\n      {values.map((item: ChipValue) => {\r\n        const {value, size = Size.Medium, label, className, ...rest } = item;\r\n        return (\r\n          <ChipContainer\r\n            role=\"radio\"\r\n            key={value}\r\n            tabIndex={disabled ? -1 : 0}\r\n            className={`${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'default' : 'outline'} interactive ${className || ''}`}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            aria-checked={selectedChip === value}\r\n            onClick={() => !disabled && onSelectChip(item)}\r\n            onKeyDown={e => !disabled && handleKeyDown(e, item)}\r\n            {...rest}>\r\n            <ChipContentContainer>\r\n              <ChipContent>\r\n                {label}\r\n              </ChipContent>\r\n            </ChipContentContainer>\r\n          </ChipContainer>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default ChoiceChips;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ChoiceChips.cjs","names":["React","_interopRequireWildcard","require","_ChipStyles","_common","_types","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","ChoiceChips","_ref","selected","disabled","onClick","values","dataTestId","_React$useState","useState","_React$useState2","_slicedToArray2","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","key","jsx","role","children","map","item","_item$size","size","Size","Medium","label","className","rest","_objectWithoutProperties2","ChipContainer","tabIndex","concat","onMouseDown","defaultOnMouseDownHandler","onKeyDown","ChipContentContainer","ChipContent","_default","exports"],"sources":["../../src/Chips/ChoiceChips.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport {Size} from '../types';\r\n\r\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\r\n                                                                 selected,\r\n                                                                 disabled,\r\n                                                                 onClick,\r\n                                                                 values,\r\n                                                                 dataTestId\r\n                                                               }: ChoiceChipProps) => {\r\n  /**\r\n   * Globally used variables within the component.\r\n   */\r\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\r\n\r\n  /**\r\n   * Set the selected value for the chip.\r\n   */\r\n  React.useEffect(() => {\r\n    setSelectedChip(selected);\r\n  }, [selected]);\r\n\r\n  /**\r\n   * Sets selected chip and fires an event to parent component.\r\n   * @param value - Chip which was selected.\r\n   */\r\n  const onSelectChip = (value: ChipValue) => {\r\n    // Update selected chip\r\n    setSelectedChip(value.value);\r\n\r\n    // Fire the event\r\n    onClick && onClick(value);\r\n  };\r\n\r\n  const handleKeyDown = (e: any, value: ChipValue) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      onSelectChip(value);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Return Choice Chip component.\r\n   */\r\n  return (\r\n    <div role=\"radiogroup\" data-testid={dataTestId}>\r\n      {values.map((item: ChipValue) => {\r\n        const {value, size = Size.Medium, label, className, ...rest } = item;\r\n        return (\r\n          <ChipContainer\r\n            role=\"radio\"\r\n            key={value}\r\n            tabIndex={disabled ? -1 : 0}\r\n            className={`${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'default' : 'outline'} interactive ${className || ''}`}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            aria-checked={selectedChip === value}\r\n            onClick={() => !disabled && onSelectChip(item)}\r\n            onKeyDown={e => !disabled && handleKeyDown(e, item)}\r\n            {...rest}>\r\n            <ChipContentContainer>\r\n              <ChipContent>\r\n                {label}\r\n              </ChipContent>\r\n            </ChipContentContainer>\r\n          </ChipContainer>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default ChoiceChips;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Chips/ChoiceChips.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["value", "size", "label", "className"];
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["value", "size", "label", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -20,23 +21,24 @@ import { ChipContainer, ChipContent, ChipContentContainer } from './ChipStyles';
 import { defaultOnMouseDownHandler } from '../common';
 import { Size } from '../types';
 import { jsx as _jsx } from "react/jsx-runtime";
-const ChoiceChips = _ref => {
-  let {
-    selected,
-    disabled,
-    onClick,
-    values,
-    dataTestId
-  } = _ref;
+var ChoiceChips = function ChoiceChips(_ref) {
+  var selected = _ref.selected,
+    disabled = _ref.disabled,
+    onClick = _ref.onClick,
+    values = _ref.values,
+    dataTestId = _ref.dataTestId;
   /**
    * Globally used variables within the component.
    */
-  const [selectedChip, setSelectedChip] = React.useState('');
+  var _React$useState = React.useState(''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    selectedChip = _React$useState2[0],
+    setSelectedChip = _React$useState2[1];
 
   /**
    * Set the selected value for the chip.
    */
-  React.useEffect(() => {
+  React.useEffect(function () {
     setSelectedChip(selected);
   }, [selected]);
 
@@ -44,14 +46,14 @@ const ChoiceChips = _ref => {
    * Sets selected chip and fires an event to parent component.
    * @param value - Chip which was selected.
    */
-  const onSelectChip = value => {
+  var onSelectChip = function onSelectChip(value) {
     // Update selected chip
     setSelectedChip(value.value);
 
     // Fire the event
     onClick && onClick(value);
   };
-  const handleKeyDown = (e, value) => {
+  var handleKeyDown = function handleKeyDown(e, value) {
     if (e.key === 'Enter' || e.key === ' ') {
       onSelectChip(value);
     }
@@ -63,13 +65,12 @@ const ChoiceChips = _ref => {
   return /*#__PURE__*/_jsx("div", {
     role: "radiogroup",
     "data-testid": dataTestId,
-    children: values.map(item => {
-      const {
-          value,
-          size = Size.Medium,
-          label,
-          className
-        } = item,
+    children: values.map(function (item) {
+      var value = item.value,
+        _item$size = item.size,
+        size = _item$size === void 0 ? Size.Medium : _item$size,
+        label = item.label,
+        className = item.className,
         rest = _objectWithoutProperties(item, _excluded);
       return /*#__PURE__*/_jsx(ChipContainer, _objectSpread(_objectSpread({
         role: "radio",
@@ -77,8 +78,12 @@ const ChoiceChips = _ref => {
         className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value ? 'default' : 'outline', " interactive ").concat(className || ''),
         onMouseDown: defaultOnMouseDownHandler,
         "aria-checked": selectedChip === value,
-        onClick: () => !disabled && onSelectChip(item),
-        onKeyDown: e => !disabled && handleKeyDown(e, item)
+        onClick: function onClick() {
+          return !disabled && onSelectChip(item);
+        },
+        onKeyDown: function onKeyDown(e) {
+          return !disabled && handleKeyDown(e, item);
+        }
       }, rest), {}, {
         children: /*#__PURE__*/_jsx(ChipContentContainer, {
           children: /*#__PURE__*/_jsx(ChipContent, {

package/dist/Chips/ChoiceChips.js.map

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