@laerdal/life-react-components 3.5.1-dev.15 → 3.5.1-dev.17

package/dist/Chips/ChipStyles.cjs

@@ -19,6 +19,64 @@ var ChipContentContainer = _styledComponents["default"].div(_templateObject || (
 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, _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, 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","styled","div","_taggedTemplateLiteral2","exports","ChipContent","ComponentXSStyling","ComponentTextStyle","Bold","ChipContainer","ComponentSStyling","ComponentMStyling","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"],"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: ${COLORS.white};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.primary_500};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.primary_700};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &.outline {\r\n    color: ${COLORS.neutral_600};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.white};\r\n      border: 2px solid ${COLORS.neutral_200};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.primary_20};\r\n      border: 2px solid ${COLORS.primary_200};\r\n      color: ${COLORS.primary_700};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.primary_100};\r\n      border: 2px solid ${COLORS.primary_300};\r\n      color: ${COLORS.primary_800};\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: ${COLORS.critical_100};\r\n      color: ${COLORS.critical_600};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${COLORS.critical_200};\r\n      color: ${COLORS.critical_700};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${COLORS.critical_300};\r\n      color: ${COLORS.critical_800};\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: ${COLORS.primary_700};\r\n  }\r\n\r\n  .action-right:active .chip-icon {\r\n    background-color: ${COLORS.primary_800};\r\n  }\r\n\r\n  .action-right.disabled .chip-icon {\r\n    background-color: transparent;\r\n    color: ${COLORS.primary_300};\r\n  }\r\n\r\n  &.invalid {\r\n    .action-right:hover .chip-icon {\r\n      background-color: ${COLORS.critical_200};\r\n      color: ${COLORS.critical_700};\r\n    }\r\n\r\n    .action-right:active .chip-icon {\r\n      background-color: ${COLORS.critical_300};\r\n      color: ${COLORS.critical_800};\r\n    }\r\n\r\n    .action-right.disabled .chip-icon {\r\n      background-color: transparent;\r\n      color: ${COLORS.primary_300};\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: ${COLORS.neutral_100} !important;\r\n      color: ${COLORS.neutral_300} !important;\r\n    }\r\n  }\r\n`;\r\n"],"mappings":";;;;;;;;AAGA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,OAAA,GAAAD,OAAA;AAA8H,IAAAE,eAAA,EAAAC,gBAAA,EAAAC,gBAAA;AAR9H;AACA;AACA;AAGA;AACA;AACA;AAGO,IAAMC,oBAAoB,GAAGC,4BAAM,CAACC,GAAG,CAAAL,eAAA,KAAAA,eAAA,OAAAM,uBAAA,4GAK7C;AAACC,OAAA,CAAAJ,oBAAA,GAAAA,oBAAA;AAEK,IAAMK,WAAW,GAAGJ,4BAAM,CAACC,GAAG,CAAAJ,gBAAA,KAAAA,gBAAA,OAAAK,uBAAA,wsBACjC,IAAAG,0BAAkB,EAACC,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,CA4CpD;AAACJ,OAAA,CAAAC,WAAA,GAAAA,WAAA;AAEK,IAAMI,aAAa,GAAGR,4BAAM,CAACC,GAAG,CAAAH,gBAAA,KAAAA,gBAAA,OAAAI,uBAAA,gjGAMjCE,WAAW,EAIT,IAAAK,yBAAiB,EAACH,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,EAsBlDH,WAAW,EAIT,IAAAM,yBAAiB,EAACJ,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,EAsBlDI,mBAAW,EAIJC,cAAM,CAACC,KAAK,EAEnBT,WAAW,EACSQ,cAAM,CAACE,WAAW,EAKtCV,WAAW,EACSQ,cAAM,CAACG,WAAW,EAKtCX,WAAW,EACSQ,cAAM,CAACI,WAAW,EAK/BJ,cAAM,CAACK,WAAW,EAEzBb,WAAW,EACSQ,cAAM,CAACC,KAAK,EACZD,cAAM,CAACM,WAAW,EAKtCd,WAAW,EACSQ,cAAM,CAACO,UAAU,EACjBP,cAAM,CAACQ,WAAW,EAC7BR,cAAM,CAACG,WAAW,EAK3BX,WAAW,EACSQ,cAAM,CAACS,WAAW,EAClBT,cAAM,CAACU,WAAW,EAC7BV,cAAM,CAACI,WAAW,EAO3BZ,WAAW,EAMXA,WAAW,EAMXA,WAAW,EAMXA,WAAW,EACSQ,cAAM,CAACW,YAAY,EAC9BX,cAAM,CAACY,YAAY,EAK5BpB,WAAW,EACGQ,cAAM,CAACa,YAAY,EACxBb,cAAM,CAACc,YAAY,EAK5BtB,WAAW,EACGQ,cAAM,CAACe,YAAY,EACxBf,cAAM,CAACgB,YAAY,EAK5BjB,mBAAW,EAIOC,cAAM,CAACG,WAAW,EAIlBH,cAAM,CAACI,WAAW,EAK7BJ,cAAM,CAACU,WAAW,EAKLV,cAAM,CAACa,YAAY,EAC9Bb,cAAM,CAACc,YAAY,EAIRd,cAAM,CAACe,YAAY,EAC9Bf,cAAM,CAACgB,YAAY,EAKnBhB,cAAM,CAACU,WAAW,EAO3BvB,oBAAoB,EAIpBK,WAAW,EAESQ,cAAM,CAACiB,WAAW,EAC7BjB,cAAM,CAACkB,WAAW,CAGhC;AAAC3B,OAAA,CAAAK,aAAA,GAAAA,aAAA","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

@@ -11,5 +11,63 @@ 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  &.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);
+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","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"],"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: ${COLORS.white};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.primary_500};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.primary_700};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &.outline {\r\n    color: ${COLORS.neutral_600};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.white};\r\n      border: 2px solid ${COLORS.neutral_200};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.primary_20};\r\n      border: 2px solid ${COLORS.primary_200};\r\n      color: ${COLORS.primary_700};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.primary_100};\r\n      border: 2px solid ${COLORS.primary_300};\r\n      color: ${COLORS.primary_800};\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: ${COLORS.critical_100};\r\n      color: ${COLORS.critical_600};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${COLORS.critical_200};\r\n      color: ${COLORS.critical_700};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${COLORS.critical_300};\r\n      color: ${COLORS.critical_800};\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: ${COLORS.primary_700};\r\n  }\r\n\r\n  .action-right:active .chip-icon {\r\n    background-color: ${COLORS.primary_800};\r\n  }\r\n\r\n  .action-right.disabled .chip-icon {\r\n    background-color: transparent;\r\n    color: ${COLORS.primary_300};\r\n  }\r\n\r\n  &.invalid {\r\n    .action-right:hover .chip-icon {\r\n      background-color: ${COLORS.critical_200};\r\n      color: ${COLORS.critical_700};\r\n    }\r\n\r\n    .action-right:active .chip-icon {\r\n      background-color: ${COLORS.critical_300};\r\n      color: ${COLORS.critical_800};\r\n    }\r\n\r\n    .action-right.disabled .chip-icon {\r\n      background-color: transparent;\r\n      color: ${COLORS.primary_300};\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: ${COLORS.neutral_100} !important;\r\n      color: ${COLORS.neutral_300} !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,IAAMC,oBAAoB,GAAGP,MAAM,CAACQ,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,gGAK7C;AAED,OAAO,IAAMC,WAAW,GAAGX,MAAM,CAACQ,GAAG,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,sBAAA,4rBACjCL,kBAAkB,CAACD,kBAAkB,CAACS,IAAI,EAAE,IAAI,CAAC,CA4CpD;AAED,OAAO,IAAMC,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,EAIJL,MAAM,CAACe,KAAK,EAEnBL,WAAW,EACSV,MAAM,CAACgB,WAAW,EAKtCN,WAAW,EACSV,MAAM,CAACiB,WAAW,EAKtCP,WAAW,EACSV,MAAM,CAACkB,WAAW,EAK/BlB,MAAM,CAACmB,WAAW,EAEzBT,WAAW,EACSV,MAAM,CAACe,KAAK,EACZf,MAAM,CAACoB,WAAW,EAKtCV,WAAW,EACSV,MAAM,CAACqB,UAAU,EACjBrB,MAAM,CAACsB,WAAW,EAC7BtB,MAAM,CAACiB,WAAW,EAK3BP,WAAW,EACSV,MAAM,CAACuB,WAAW,EAClBvB,MAAM,CAACwB,WAAW,EAC7BxB,MAAM,CAACkB,WAAW,EAO3BR,WAAW,EAMXA,WAAW,EAMXA,WAAW,EAMXA,WAAW,EACSV,MAAM,CAACyB,YAAY,EAC9BzB,MAAM,CAAC0B,YAAY,EAK5BhB,WAAW,EACGV,MAAM,CAAC2B,YAAY,EACxB3B,MAAM,CAAC4B,YAAY,EAK5BlB,WAAW,EACGV,MAAM,CAAC6B,YAAY,EACxB7B,MAAM,CAAC8B,YAAY,EAK5BzB,WAAW,EAIOL,MAAM,CAACiB,WAAW,EAIlBjB,MAAM,CAACkB,WAAW,EAK7BlB,MAAM,CAACwB,WAAW,EAKLxB,MAAM,CAAC2B,YAAY,EAC9B3B,MAAM,CAAC4B,YAAY,EAIR5B,MAAM,CAAC6B,YAAY,EAC9B7B,MAAM,CAAC8B,YAAY,EAKnB9B,MAAM,CAACwB,WAAW,EAO3BlB,oBAAoB,EAIpBI,WAAW,EAESV,MAAM,CAAC+B,WAAW,EAC7B/B,MAAM,CAACgC,WAAW,CAGhC","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":";;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,IAAMC,oBAAoB,GAAGP,MAAM,CAACQ,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,gGAK7C;AAED,OAAO,IAAMC,WAAW,GAAGX,MAAM,CAACQ,GAAG,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,sBAAA,4rBACjCL,kBAAkB,CAACD,kBAAkB,CAACS,IAAI,EAAE,IAAI,CAAC,CA4CpD;AAED,OAAO,IAAMC,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,EAIJ,UAAAU,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAErDP,WAAW,EACS,UAAAK,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAKxEP,WAAW,EACS,UAAAK,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAKxEP,WAAW,EACS,UAAAK,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAKjE,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAE3DP,WAAW,EACS,UAAAK,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAC9C,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAKxEP,WAAW,EACS,UAAAK,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,YAAY,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GACnD,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAC/D,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAK7DP,WAAW,EACS,UAAAK,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GACpD,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAC/D,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAO7DP,WAAW,EAMXA,WAAW,EAMXA,WAAW,EAMXA,WAAW,EACS,UAAAK,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAChE,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAK9DP,WAAW,EACG,UAAAK,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAC1D,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAK9DP,WAAW,EACG,UAAAK,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAC1D,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAK9DZ,WAAW,EAIO,UAAAU,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAIpD,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAK/D,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAKvC,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAChE,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAI1C,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAChE,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAKrD,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAO7DX,oBAAoB,EAIpBI,WAAW,EAES,UAAAK,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAC/D,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EAGlE","ignoreList":[]}

package/dist/ChipsInput/ChipInputField.cjs

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -14,7 +15,7 @@ var _types = require("../types");
 var _Chips = require("../Chips");
 var _InputFields = require("../InputFields");
 var _styles = require("../styles");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _LoadingIndicator = require("../LoadingIndicator");
 var _common = require("../common");
 var _Button = require("../Button");
@@ -22,6 +23,8 @@ var _icons = require("../icons");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["inputId", "items", "disabled", "placeholder", "altPlaceholder", "multiLine", "size", "validationMessage", "loading", "onRemoveItem", "onInputValueChange", "onInputKeyDown", "onActivationChange", "inputValue", "required", "onBlur"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+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; }
 var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n"])));
@@ -30,9 +33,33 @@ var ChipInputBoundItems = _styledComponents["default"].div(_templateObject3 || (
 exports.ChipInputBoundItems = ChipInputBoundItems;
 var ChipInputContentContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ", "\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus,\n  button:focus {\n    outline-offset: -4px !important;\n  }\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
 exports.ChipInputContentContainer = ChipInputContentContainer;
-var ChipInputEl = _styledComponents["default"].input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ", "\n  color: ", " !important;\n\n  &::placeholder {\n    ", "\n  }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.black, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600));
+var ChipInputEl = _styledComponents["default"].input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ", "\n  color: ", " !important;\n\n  &::placeholder {\n    ", "\n  }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), function (props) {
+  return _styles.COLORS.getColor('black', props.theme);
+}, function (props) {
+  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_600', props.theme));
+});
 exports.ChipInputEl = ChipInputEl;
-var ChipInputContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin-bottom: 4px;\n  box-shadow: inset 0 0 0 1px ", ";\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ", "\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.multiline.medium {\n    ", " {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ", "\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    ", " {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ", ";\n    outline: none;\n    color: ", " !important;\n  }\n"])), _styles.COLORS.neutral_400, _styles.COLORS.white, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), ChipInputEl, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), ChipInputEl, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), ChipInputContentContainer, _styles.focusStyles, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.critical_500, ChipInputContentContainer, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
+var ChipInputContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin-bottom: 4px;\n  box-shadow: inset 0 0 0 1px ", ";\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ", "\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.multiline.medium {\n    ", " {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ", "\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    ", " {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ", ";\n    outline: none;\n    color: ", " !important;\n  }\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_400', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+}, function (props) {
+  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme));
+}, ChipInputEl, function (props) {
+  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_600', props.theme));
+}, ChipInputEl, function (props) {
+  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_600', props.theme));
+}, ChipInputContentContainer, _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('critical_500', props.theme);
+}, ChipInputContentContainer, function (props) {
+  return _styles.COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_300', props.theme);
+});
 exports.ChipInputContainer = ChipInputContainer;
 var ChipInputField = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var inputId = _ref.inputId,
@@ -55,6 +82,7 @@ var ChipInputField = /*#__PURE__*/_react["default"].forwardRef(function (_ref, r
     required = _ref.required,
     onBlur = _ref.onBlur,
     rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var theme = (0, _styledComponents.useTheme)();
   var containerRef = _react["default"].useRef(null);
   var inputRef = (0, _common.useFocusVisibleRef)([containerRef]);
   _react["default"].useImperativeHandle(ref, function () {
@@ -172,14 +200,14 @@ var ChipInputField = /*#__PURE__*/_react["default"].forwardRef(function (_ref, r
             className: size,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicator.LoadingIndicator, {
               size: _types.Size.Small,
-              color: _styles.COLORS.neutral_600
+              color: _styles.COLORS.getColor('neutral_600', theme)
             })
           })]
         })]
       })
     }), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_InputFields.ErrorMessage, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.TechnicalWarning, {
-        color: _styles.COLORS.critical_400
+        color: _styles.COLORS.getColor('critical_400', theme)
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: validationMessage
       })]

package/dist/ChipsInput/ChipInputField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChipInputField.cjs","names":["_react","_interopRequireDefault","require","_types","_Chips","_InputFields","_styles","_styledComponents","_LoadingIndicator","_common","_Button","_icons","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","Wrapper","styled","div","_taggedTemplateLiteral2","Loading","ChipInputBoundItems","exports","ChipInputContentContainer","scrollBarStyling","Size","Small","ChipInputEl","input","ComponentMStyling","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","ComponentSStyling","focusStyles","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","React","forwardRef","_ref","ref","inputId","items","_ref$disabled","disabled","placeholder","altPlaceholder","_ref$multiLine","multiLine","_ref$size","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","onBlur","rest","_objectWithoutProperties2","containerRef","useRef","inputRef","useFocusVisibleRef","useImperativeHandle","current","useEffect","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","_inputRef$current","key","value","repeat","handleItemRemove","event","item","index","_inputRef$current2","focus","focusVisible","detail","handleInputClear","_inputRef$current3","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","concat","jsxs","children","jsx","onKeyDown","onClick","_inputRef$current4","className","map","chip","InputChip","icon","variant","States","Default","text","label","onRemove","type","id","tabIndex","onChange","stopPropagation","IconButton","dataTestId","action","useTransparentBackground","shape","style","marginLeft","focusOnClick","SystemIcons","Clear","LoadingIndicator","color","ErrorMessage","TechnicalWarning","critical_400","propTypes","_propTypes","string","isRequired","array","bool","func"],"sources":["../../src/ChipsInput/ChipInputField.tsx"],"sourcesContent":["import React from 'react';\r\nimport {ChipItem} from './ChipInputTypes';\r\nimport {Size, States} from '../types';\r\nimport {InputChip} from '../Chips';\r\nimport {ErrorMessage} from '../InputFields';\r\nimport {\r\n  COLORS,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles,\r\n  scrollBarStyling\r\n} from '../styles';\r\nimport styled from 'styled-components';\r\nimport {LoadingIndicator} from '../LoadingIndicator';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {IconButton} from '../Button';\r\nimport {SystemIcons} from '../icons';\r\n\r\nconst Wrapper = styled.div`\r\n  position: relative;\r\n`;\r\n\r\nconst Loading = styled.div`\r\n  height: 20px;\r\n  width: 20px;\r\n`;\r\n\r\nexport const ChipInputBoundItems = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  gap: 8px;\r\n  flex: 1;\r\n  min-width: 40px;\r\n`;\r\n\r\nexport const ChipInputContentContainer = styled.div`\r\n  width: 100%;\r\n  background: transparent;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  column-gap: 8px;\r\n  margin-right: 6px;\r\n  padding-right: 10px;\r\n  padding-left: 16px;\r\n  flex-wrap: nowrap;\r\n  overflow-x: scroll;\r\n  min-height: 48px;\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n  ::-webkit-scrollbar:horizontal {\r\n    display: none;\r\n  }\r\n\r\n  .action-right:focus,\r\n  button:focus {\r\n    outline-offset: -4px !important;\r\n  }\r\n`;\r\n\r\nexport const ChipInputEl = styled.input`\r\n  border: none;\r\n  outline: none;\r\n\r\n  height: 40px;\r\n  min-width: 40px;\r\n  display: inline-flex;\r\n  flex: 1;\r\n  background: transparent;\r\n\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  color: ${COLORS.black} !important;\r\n\r\n  &::placeholder {\r\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n  }\r\n`;\r\n\r\nexport const ChipInputContainer = styled.div`\r\n  width: 100%;\r\n  height: auto;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\r\n  background-color: ${COLORS.white};\r\n  box-sizing: border-box;\r\n  cursor: text;\r\n  outline: none;\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  &.small {\r\n    padding: 0;\r\n    min-height: 48px;\r\n\r\n    ${ChipInputEl}::placeholder {\r\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    padding: 4px 0;\r\n    min-height: 56px;\r\n\r\n    ${ChipInputEl}::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  &.multiline.medium {\r\n    ${ChipInputContentContainer} {\r\n      max-height: calc(48px * 3);\r\n      flex-wrap: wrap;\r\n      overflow-y: auto;\r\n      overflow-x: unset;\r\n    }\r\n  }\r\n\r\n  &.focus-visible-within,\r\n  :focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\r\n  }\r\n\r\n  &:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  &.invalid,\r\n  &.invalid:hover,\r\n  &.invalid:focus {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\r\n  }\r\n\r\n  &.disabled {\r\n    ${ChipInputContentContainer} {\r\n      pointer-events: none;\r\n    }\r\n\r\n    cursor: not-allowed;\r\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\r\n    outline: none;\r\n    color: ${COLORS.neutral_300} !important;\r\n  }\r\n`;\r\n\r\nexport interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,  'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\r\n  inputId: string;\r\n  items: ChipItem[];\r\n  disabled?: boolean;\r\n  placeholder?: string;\r\n  altPlaceholder?: string;\r\n  multiLine?: boolean;\r\n  size?: Size.Large | Size.Medium | Size.Small;\r\n  loading?: boolean;\r\n  required?: boolean;\r\n\r\n  validationMessage?: string;\r\n\r\n  onRemoveItem: (item: ChipItem, index: number) => void;\r\n  inputValue: string;\r\n  onInputValueChange: (value: string) => void;\r\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\r\n  onActivationChange?: (active: boolean) => void;\r\n}\r\n\r\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(\r\n  (\r\n    {\r\n      inputId,\r\n      items,\r\n      disabled = false,\r\n      placeholder,\r\n      altPlaceholder,\r\n      multiLine = true,\r\n      size = Size.Medium,\r\n      validationMessage,\r\n      loading,\r\n      onRemoveItem,\r\n      onInputValueChange,\r\n      onInputKeyDown,\r\n      onActivationChange,\r\n      inputValue,\r\n      required,\r\n      onBlur,\r\n      ...rest\r\n    },\r\n    ref,\r\n  ) => {\r\n    const containerRef = React.useRef<HTMLDivElement>(null);\r\n    const inputRef = useFocusVisibleRef([containerRef]);\r\n    \r\n    React.useImperativeHandle(ref, () => inputRef.current, [inputRef])\r\n\r\n    /**\r\n     * Scroll container to last item on change\r\n     * */\r\n    React.useEffect(() => {\r\n      if (inputRef.current && document.activeElement === inputRef.current) {\r\n        inputRef.current.scrollIntoView({\r\n          block: 'nearest',\r\n          inline: 'nearest',\r\n        });\r\n      }\r\n    }, [containerRef, inputRef, items]);\r\n\r\n    /**\r\n     * Remove last cheap on backspace\r\n     * */\r\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n      if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\r\n        onRemoveItem(items[items.length - 1], items.length - 1);\r\n      } else {\r\n        onInputKeyDown(e);\r\n      }\r\n    };\r\n\r\n    const handleItemRemove = (event: any, item: ChipItem, index: number) => {\r\n      onRemoveItem(item, index);\r\n      inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\r\n    };\r\n\r\n    const handleInputClear = (e: any) => {\r\n      onInputValueChange('');\r\n      inputRef.current?.focus({focusVisible: e?.detail !== 1} as any);\r\n    };\r\n\r\n    const handleContainerKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n      if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\r\n\r\n      const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\r\n      const currentIndex = Array.from(items).indexOf(e.target as any);\r\n      const direction = e.key === 'ArrowLeft' ? -1 : 1;\r\n      const item = items[currentIndex + direction];\r\n      item?.focus({focusVisible: true} as any);\r\n\r\n      onActivationChange && onActivationChange(false);\r\n    };\r\n\r\n    const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\r\n\r\n    return (\r\n      <Wrapper onBlur={onBlur}>\r\n        <ChipInputContainer\r\n          data-testid=\"chip-input-container\"\r\n          ref={containerRef}\r\n          onKeyDown={handleContainerKeyDown}\r\n          onClick={() => !disabled && inputRef.current?.focus()}\r\n          className={cls}>\r\n          <ChipInputContentContainer>\r\n            {items?.map((chip: ChipItem, index: number) => (\r\n              <InputChip\r\n                key={`chip_${index}`}\r\n                icon={chip?.icon}\r\n                size={size}\r\n                disabled={chip.disabled || disabled}\r\n                variant={chip.variant || States.Default}\r\n                text={chip.label}\r\n                onRemove={(e) => handleItemRemove(e, chip, index)}\r\n              />\r\n            ))}\r\n            <ChipInputBoundItems>\r\n              <ChipInputEl\r\n                ref={inputRef}\r\n                type=\"text\"\r\n                id={inputId}\r\n                required={required}\r\n                tabIndex={disabled ? -1 : 0}\r\n                value={inputValue}\r\n                onChange={(e) => onInputValueChange(e.target.value)}\r\n                onKeyDown={handleInputKeyDown}\r\n                placeholder={items?.length === 0 ? placeholder : altPlaceholder || ''}\r\n                onClick={(e) => {\r\n                  e.stopPropagation();\r\n                  onActivationChange && onActivationChange(true);\r\n                }}\r\n                {...rest}\r\n              />\r\n              {inputValue && !disabled && (\r\n                <IconButton\r\n                  id={`clear-btn-${inputId}`}\r\n                  dataTestId={`clear-btn-${inputId}`}\r\n                  action={handleInputClear}\r\n                  ref={(ref) => {\r\n                    ref?.scrollIntoView({\r\n                      block: 'nearest',\r\n                      inline: 'nearest',\r\n                    });\r\n                  }}\r\n                  useTransparentBackground={true}\r\n                  shape={'circular'}\r\n                  style={{marginLeft: '-8px'}}\r\n                  focusOnClick={true}\r\n                  variant={'secondary'}>\r\n                  <SystemIcons.Clear/>\r\n                </IconButton>\r\n              )}\r\n\r\n              {loading && (\r\n                <Loading className={size}>\r\n                  <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\r\n                </Loading>\r\n              )}\r\n            </ChipInputBoundItems>\r\n          </ChipInputContentContainer>\r\n        </ChipInputContainer>\r\n        {validationMessage && (\r\n          <ErrorMessage>\r\n            <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>\r\n            <span>{validationMessage}</span>\r\n          </ErrorMessage>\r\n        )}\r\n      </Wrapper>\r\n    );\r\n  },\r\n);\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ChipInputField.cjs","names":["_react","_interopRequireDefault","require","_types","_Chips","_InputFields","_styles","_styledComponents","_interopRequireWildcard","_LoadingIndicator","_common","_Button","_icons","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_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","Wrapper","styled","div","_taggedTemplateLiteral2","Loading","ChipInputBoundItems","exports","ChipInputContentContainer","scrollBarStyling","Size","Small","ChipInputEl","input","ComponentMStyling","ComponentTextStyle","Regular","props","COLORS","getColor","theme","Italic","ChipInputContainer","ComponentSStyling","focusStyles","ChipInputField","React","forwardRef","_ref","ref","inputId","items","_ref$disabled","disabled","placeholder","altPlaceholder","_ref$multiLine","multiLine","_ref$size","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","onBlur","rest","_objectWithoutProperties2","useTheme","containerRef","useRef","inputRef","useFocusVisibleRef","useImperativeHandle","current","useEffect","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","_inputRef$current","key","value","repeat","handleItemRemove","event","item","index","_inputRef$current2","focus","focusVisible","detail","handleInputClear","_inputRef$current3","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","concat","jsxs","children","jsx","onKeyDown","onClick","_inputRef$current4","className","map","chip","InputChip","icon","variant","States","Default","text","label","onRemove","type","id","tabIndex","onChange","stopPropagation","IconButton","dataTestId","action","useTransparentBackground","shape","style","marginLeft","focusOnClick","SystemIcons","Clear","LoadingIndicator","color","ErrorMessage","TechnicalWarning","propTypes","_propTypes","string","isRequired","array","bool","func"],"sources":["../../src/ChipsInput/ChipInputField.tsx"],"sourcesContent":["import React from 'react';\r\nimport {ChipItem} from './ChipInputTypes';\r\nimport {Size, States} from '../types';\r\nimport {InputChip} from '../Chips';\r\nimport {ErrorMessage} from '../InputFields';\r\nimport {\r\n  COLORS,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles,\r\n  scrollBarStyling\r\n} from '../styles';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {LoadingIndicator} from '../LoadingIndicator';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {IconButton} from '../Button';\r\nimport {SystemIcons} from '../icons';\r\n\r\nconst Wrapper = styled.div`\r\n  position: relative;\r\n`;\r\n\r\nconst Loading = styled.div`\r\n  height: 20px;\r\n  width: 20px;\r\n`;\r\n\r\nexport const ChipInputBoundItems = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  gap: 8px;\r\n  flex: 1;\r\n  min-width: 40px;\r\n`;\r\n\r\nexport const ChipInputContentContainer = styled.div`\r\n  width: 100%;\r\n  background: transparent;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  column-gap: 8px;\r\n  margin-right: 6px;\r\n  padding-right: 10px;\r\n  padding-left: 16px;\r\n  flex-wrap: nowrap;\r\n  overflow-x: scroll;\r\n  min-height: 48px;\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n  ::-webkit-scrollbar:horizontal {\r\n    display: none;\r\n  }\r\n\r\n  .action-right:focus,\r\n  button:focus {\r\n    outline-offset: -4px !important;\r\n  }\r\n`;\r\n\r\nexport const ChipInputEl = styled.input`\r\n  border: none;\r\n  outline: none;\r\n\r\n  height: 40px;\r\n  min-width: 40px;\r\n  display: inline-flex;\r\n  flex: 1;\r\n  background: transparent;\r\n\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  color: ${props => COLORS.getColor('black', props.theme)} !important;\r\n\r\n  &::placeholder {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\n\r\nexport const ChipInputContainer = styled.div`\r\n  width: 100%;\r\n  height: auto;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  box-sizing: border-box;\r\n  cursor: text;\r\n  outline: none;\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  &.small {\r\n    padding: 0;\r\n    min-height: 48px;\r\n\r\n    ${ChipInputEl}::placeholder {\r\n      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    padding: 4px 0;\r\n    min-height: 56px;\r\n\r\n    ${ChipInputEl}::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.multiline.medium {\r\n    ${ChipInputContentContainer} {\r\n      max-height: calc(48px * 3);\r\n      flex-wrap: wrap;\r\n      overflow-y: auto;\r\n      overflow-x: unset;\r\n    }\r\n  }\r\n\r\n  &.focus-visible-within,\r\n  :focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.invalid,\r\n  &.invalid:hover,\r\n  &.invalid:focus {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n\r\n  &.disabled {\r\n    ${ChipInputContentContainer} {\r\n      pointer-events: none;\r\n    }\r\n\r\n    cursor: not-allowed;\r\n    box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    outline: none;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  }\r\n`;\r\n\r\nexport interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,  'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\r\n  inputId: string;\r\n  items: ChipItem[];\r\n  disabled?: boolean;\r\n  placeholder?: string;\r\n  altPlaceholder?: string;\r\n  multiLine?: boolean;\r\n  size?: Size.Large | Size.Medium | Size.Small;\r\n  loading?: boolean;\r\n  required?: boolean;\r\n\r\n  validationMessage?: string;\r\n\r\n  onRemoveItem: (item: ChipItem, index: number) => void;\r\n  inputValue: string;\r\n  onInputValueChange: (value: string) => void;\r\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\r\n  onActivationChange?: (active: boolean) => void;\r\n}\r\n\r\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(\r\n  (\r\n    {\r\n      inputId,\r\n      items,\r\n      disabled = false,\r\n      placeholder,\r\n      altPlaceholder,\r\n      multiLine = true,\r\n      size = Size.Medium,\r\n      validationMessage,\r\n      loading,\r\n      onRemoveItem,\r\n      onInputValueChange,\r\n      onInputKeyDown,\r\n      onActivationChange,\r\n      inputValue,\r\n      required,\r\n      onBlur,\r\n      ...rest\r\n    },\r\n    ref,\r\n  ) => {\r\n    const theme = useTheme();\r\n    const containerRef = React.useRef<HTMLDivElement>(null);\r\n    const inputRef = useFocusVisibleRef([containerRef]);\r\n    \r\n    React.useImperativeHandle(ref, () => inputRef.current, [inputRef])\r\n\r\n    /**\r\n     * Scroll container to last item on change\r\n     * */\r\n    React.useEffect(() => {\r\n      if (inputRef.current && document.activeElement === inputRef.current) {\r\n        inputRef.current.scrollIntoView({\r\n          block: 'nearest',\r\n          inline: 'nearest',\r\n        });\r\n      }\r\n    }, [containerRef, inputRef, items]);\r\n\r\n    /**\r\n     * Remove last cheap on backspace\r\n     * */\r\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n      if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\r\n        onRemoveItem(items[items.length - 1], items.length - 1);\r\n      } else {\r\n        onInputKeyDown(e);\r\n      }\r\n    };\r\n\r\n    const handleItemRemove = (event: any, item: ChipItem, index: number) => {\r\n      onRemoveItem(item, index);\r\n      inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\r\n    };\r\n\r\n    const handleInputClear = (e: any) => {\r\n      onInputValueChange('');\r\n      inputRef.current?.focus({focusVisible: e?.detail !== 1} as any);\r\n    };\r\n\r\n    const handleContainerKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n      if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\r\n\r\n      const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\r\n      const currentIndex = Array.from(items).indexOf(e.target as any);\r\n      const direction = e.key === 'ArrowLeft' ? -1 : 1;\r\n      const item = items[currentIndex + direction];\r\n      item?.focus({focusVisible: true} as any);\r\n\r\n      onActivationChange && onActivationChange(false);\r\n    };\r\n\r\n    const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\r\n\r\n    return (\r\n      <Wrapper onBlur={onBlur}>\r\n        <ChipInputContainer\r\n          data-testid=\"chip-input-container\"\r\n          ref={containerRef}\r\n          onKeyDown={handleContainerKeyDown}\r\n          onClick={() => !disabled && inputRef.current?.focus()}\r\n          className={cls}>\r\n          <ChipInputContentContainer>\r\n            {items?.map((chip: ChipItem, index: number) => (\r\n              <InputChip\r\n                key={`chip_${index}`}\r\n                icon={chip?.icon}\r\n                size={size}\r\n                disabled={chip.disabled || disabled}\r\n                variant={chip.variant || States.Default}\r\n                text={chip.label}\r\n                onRemove={(e) => handleItemRemove(e, chip, index)}\r\n              />\r\n            ))}\r\n            <ChipInputBoundItems>\r\n              <ChipInputEl\r\n                ref={inputRef}\r\n                type=\"text\"\r\n                id={inputId}\r\n                required={required}\r\n                tabIndex={disabled ? -1 : 0}\r\n                value={inputValue}\r\n                onChange={(e) => onInputValueChange(e.target.value)}\r\n                onKeyDown={handleInputKeyDown}\r\n                placeholder={items?.length === 0 ? placeholder : altPlaceholder || ''}\r\n                onClick={(e) => {\r\n                  e.stopPropagation();\r\n                  onActivationChange && onActivationChange(true);\r\n                }}\r\n                {...rest}\r\n              />\r\n              {inputValue && !disabled && (\r\n                <IconButton\r\n                  id={`clear-btn-${inputId}`}\r\n                  dataTestId={`clear-btn-${inputId}`}\r\n                  action={handleInputClear}\r\n                  ref={(ref) => {\r\n                    ref?.scrollIntoView({\r\n                      block: 'nearest',\r\n                      inline: 'nearest',\r\n                    });\r\n                  }}\r\n                  useTransparentBackground={true}\r\n                  shape={'circular'}\r\n                  style={{marginLeft: '-8px'}}\r\n                  focusOnClick={true}\r\n                  variant={'secondary'}>\r\n                  <SystemIcons.Clear/>\r\n                </IconButton>\r\n              )}\r\n\r\n              {loading && (\r\n                <Loading className={size}>\r\n                  <LoadingIndicator size={Size.Small} color={COLORS.getColor('neutral_600', theme)}/>\r\n                </Loading>\r\n              )}\r\n            </ChipInputBoundItems>\r\n          </ChipInputContentContainer>\r\n        </ChipInputContainer>\r\n        {validationMessage && (\r\n          <ErrorMessage>\r\n            <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)}/>\r\n            <span>{validationMessage}</span>\r\n          </ErrorMessage>\r\n        )}\r\n      </Wrapper>\r\n    );\r\n  },\r\n);\r\n"],"mappings":"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","ignoreList":[]}

package/dist/ChipsInput/ChipInputField.js

@@ -11,7 +11,7 @@ import { Size, States } from '../types';
 import { InputChip } from '../Chips';
 import { ErrorMessage } from '../InputFields';
 import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, scrollBarStyling } from '../styles';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { LoadingIndicator } from '../LoadingIndicator';
 import { useFocusVisibleRef } from '../common';
 import { IconButton } from '../Button';
@@ -22,8 +22,32 @@ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
 var Loading = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 20px;\n  width: 20px;\n"])));
 export var ChipInputBoundItems = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n"])));
 export var ChipInputContentContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ", "\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus,\n  button:focus {\n    outline-offset: -4px !important;\n  }\n"])), scrollBarStyling(Size.Small));
-export var ChipInputEl = styled.input(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ", "\n  color: ", " !important;\n\n  &::placeholder {\n    ", "\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, null), COLORS.black, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600));
-export var ChipInputContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin-bottom: 4px;\n  box-shadow: inset 0 0 0 1px ", ";\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ", "\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.multiline.medium {\n    ", " {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ", "\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    ", " {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ", ";\n    outline: none;\n    color: ", " !important;\n  }\n"])), COLORS.neutral_400, COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ChipInputEl, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ChipInputEl, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ChipInputContentContainer, focusStyles, COLORS.primary_700, COLORS.primary_800, COLORS.critical_500, ChipInputContentContainer, COLORS.neutral_100, COLORS.neutral_300);
+export var ChipInputEl = styled.input(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ", "\n  color: ", " !important;\n\n  &::placeholder {\n    ", "\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, null), function (props) {
+  return COLORS.getColor('black', props.theme);
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme));
+});
+export var ChipInputContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin-bottom: 4px;\n  box-shadow: inset 0 0 0 1px ", ";\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ", "\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.multiline.medium {\n    ", " {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ", "\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    ", " {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ", ";\n    outline: none;\n    color: ", " !important;\n  }\n"])), function (props) {
+  return COLORS.getColor('neutral_400', props.theme);
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, ChipInputEl, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme));
+}, ChipInputEl, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme));
+}, ChipInputContentContainer, focusStyles, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return COLORS.getColor('critical_500', props.theme);
+}, ChipInputContentContainer, function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+});
 export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var inputId = _ref.inputId,
     items = _ref.items,
@@ -45,6 +69,7 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     required = _ref.required,
     onBlur = _ref.onBlur,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
   var containerRef = React.useRef(null);
   var inputRef = useFocusVisibleRef([containerRef]);
   React.useImperativeHandle(ref, function () {
@@ -162,14 +187,14 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             className: size,
             children: /*#__PURE__*/_jsx(LoadingIndicator, {
               size: Size.Small,
-              color: COLORS.neutral_600
+              color: COLORS.getColor('neutral_600', theme)
             })
           })]
         })]
       })
     }), validationMessage && /*#__PURE__*/_jsxs(ErrorMessage, {
       children: [/*#__PURE__*/_jsx(SystemIcons.TechnicalWarning, {
-        color: COLORS.critical_400
+        color: COLORS.getColor('critical_400', theme)
       }), /*#__PURE__*/_jsx("span", {
         children: validationMessage
       })]