@laerdal/life-react-components 1.4.1-dev.1 → 1.4.1-dev.12

package/dist/Chips/ChipStyles.cjs

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RequiredStar = exports.FilterChipContainer = exports.ChipInputEl = exports.ChipInputContainer = exports.ChipContainer = exports.ActionChipContainer = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _typography = require("../styles/typography");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+/**
+ *
+ * Chip styles.
+ */
+var ChipContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  color: ", ";\n  display: inline-block;\n\n  > button > div > .remove > path {\n    fill: ", ";\n  }\n\n  &:hover,\n  &:focus {\n    > button > div > .remove > path {\n      fill: ", ";\n    }\n  }\n\n  button {\n    background: transparent;\n    display: inline-block;\n    padding: 0;\n    width: auto;\n    height: auto;\n    color: inherit;\n\n    div {\n      color: inherit;\n      width: auto;\n      height: auto;\n\n      svg {\n        color: inherit;\n      }\n    }\n\n    &:hover,\n    &:hover:not(:disabled),\n    :focus,\n    :focus:not(:disabled) {\n      background: transparent;\n      display: inline-block;\n      padding: 0;\n      width: auto;\n      height: auto;\n      color: inherit;\n      outline: none;\n\n      div {\n        box-shadow: none;\n        background-color: transparent;\n\n        svg {\n          color: inherit;\n        }\n      }\n    }\n  }\n\n  &.small {\n    ", "\n    border-radius: 40px;\n    height: 24px;\n    padding: 0px 12px;\n    margin: 12px 0px;\n    border-radius: 40px;\n    display: inline-flex;\n    align-items: center;\n\n    &.icon-chip {\n      padding: 0px 12px 0px 8px;\n    }\n\n    &.button-chip {\n      padding: 0px 8px 0px 12px;\n    }\n\n    &.icon-chip.button-chip {\n      padding: 0px 8px;\n    }\n\n    > button {\n      width: 16px;\n      height: 16px;\n\n      > div {\n        width: 16px;\n        height: 16px;\n\n        svg {\n          padding: 0px;\n          margin-left: 4x;\n        }\n      }\n    }\n\n    svg {\n      vertical-align: middle;\n\n      &.icon {\n        margin-right: 4px;\n      }\n\n      &.remove {\n        margin-left: 4px;\n      }\n    }\n  }\n\n  &.medium {\n    ", "\n    border-radius: 80px;\n    height: 40px;\n    padding: 0px 16px;\n    margin: 4px 0px;\n    display: inline-flex;\n    align-items: center;\n\n    &.icon-chip {\n      padding: 0px 16px 0px 12px;\n    }\n\n    &.button-chip {\n      padding: 0px 12px 0px 16px;\n    }\n\n    &.icon-chip.button-chip {\n      padding: 0px 12px;\n    }\n\n    > button {\n      width: 20px;\n      height: 20px;\n\n      > div {\n        width: 20px;\n        height: 20px;\n\n        svg {\n          padding: 0px;\n          margin-left: 6px;\n        }\n      }\n    }\n\n    svg {\n      vertical-align: middle;\n\n      &.icon {\n        margin-right: 6px;\n      }\n\n      &.remove {\n        margin-left: 6px;\n      }\n    }\n  }\n\n  &.large {\n    ", "\n    border-radius: 120px;\n    height: 56px;\n    padding: 0px 20px;\n    margin: 0px;\n    display: inline-flex;\n    align-items: center;\n\n    &.icon-chip {\n      padding: 0px 20px 0px 16px;\n    }\n\n    &.button-chip {\n      padding: 0px 16px 0px 20px;\n    }\n\n    &.icon-chip.button-chip {\n      padding: 0px 16px;\n    }\n\n    > button {\n      width: 24px;\n      height: 24px;\n\n      > div {\n        width: 24px;\n        height: 24px;\n\n        svg {\n          padding: 0px;\n          margin-left: 8px;\n        }\n      }\n    }\n\n    svg {\n      vertical-align: middle;\n\n      &.icon {\n        margin-right: 8px;\n      }\n\n      &.remove {\n        margin-left: 8px;\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    background: ", ";\n    color: ", ";\n\n    > button > div > .remove > path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n  }\n\n  &.normal {\n    background: ", ";\n\n    &:hover {\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n  }\n\n  &.warning {\n    color: ", ";\n    background: ", ";\n\n    > button > div > .remove > path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n  }\n\n  &.error {\n    color: ", ";\n    background: ", ";\n\n    > button > div > .remove > path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n  }\n"])), _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.white, (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.white), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.white), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.white), _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.primary_500, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.black, _styles.COLORS.warning_100, _styles.COLORS.warning_500, _styles.COLORS.warning_400, _styles.COLORS.warning_400, _styles.COLORS.black, _styles.COLORS.critical_100, _styles.COLORS.critical_500, _styles.COLORS.critical_400, _styles.COLORS.critical_400);
+
+exports.ChipContainer = ChipContainer;
+
+var ChipInputContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  min-height: 56px;\n  height: auto;\n  width: 100%;\n  border-radius: 4px;\n  border: 2px solid transparent;\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 16px 16px 8px 16px;\n  box-sizing: border-box;\n  width: 100%;\n  cursor: text;\n  outline: none;\n  border-radius: 4.5px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n\n  ", "\n  color: ", " !important;\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  > div {\n    margin-right: 8px;\n    margin-bottom: 8px;\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n"])), _styles.COLORS.neutral_400, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.black, _styles.COLORS.warning_500, _styles.COLORS.warning_500, _styles.COLORS.warning_500, _styles.COLORS.critical_500, _styles.COLORS.critical_500, _styles.COLORS.critical_500, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.primary_700);
+
+exports.ChipInputContainer = ChipInputContainer;
+
+var RequiredStar = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 28px;\n  line-height: 12px;\n  float: right;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n"])), _styles.COLORS.critical_500);
+
+exports.RequiredStar = RequiredStar;
+var FilterChipContainer = (0, _styledComponents.default)(ChipContainer)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  &.normal {\n    background: ", ";\n    color: ", ";\n    border: 2px solid;\n    border-color: ", ";\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n    }\n\n    &:active,\n    &:focus {\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n    }\n  }\n\n  &.selected {\n    background: ", ";\n    color: ", ";\n    border: 2px solid;\n    border-color: ", ";\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n    }\n\n    &:active,\n    &:focus {\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n    }\n  }\n"])), _styles.COLORS.white, _styles.COLORS.neutral_600, _styles.COLORS.neutral_200, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_200, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_300, _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.primary_500, _styles.COLORS.white, _styles.COLORS.primary_500, _styles.COLORS.primary_700, _styles.COLORS.white, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.white, _styles.COLORS.primary_800, _styles.COLORS.focus_25, _styles.COLORS.focus);
+exports.FilterChipContainer = FilterChipContainer;
+var ActionChipContainer = (0, _styledComponents.default)(ChipContainer)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  &.normal {\n    background: ", ";\n    color: ", ";\n    border: 2px solid;\n    border-color: ", ";\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n    }\n\n    &:active,\n    &:focus {\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n    }\n  }\n"])), _styles.COLORS.white, _styles.COLORS.neutral_600, _styles.COLORS.neutral_200, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_200, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_300, _styles.COLORS.focus_25, _styles.COLORS.focus);
+exports.ActionChipContainer = ActionChipContainer;
+
+var ChipInputEl = _styledComponents.default.input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  height: 40px;\n  width: auto;\n  display: inline-flex;\n  border: none;\n  outline: none;\n  margin-top: 5px;\n  margin-bottom: 8px;\n\n  ", "\n  color: ", " !important;\n"])), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.black);
+
+exports.ChipInputEl = ChipInputEl;
+//# sourceMappingURL=ChipStyles.cjs.map

package/dist/Chips/ChipStyles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Chips/ChipStyles.ts"],"names":["ChipContainer","styled","div","COLORS","white","ComponentTextStyle","Bold","neutral_100","neutral_300","primary_500","primary_700","primary_800","black","warning_100","warning_500","warning_400","critical_100","critical_500","critical_400","ChipInputContainer","neutral_400","Regular","RequiredStar","span","FilterChipContainer","neutral_600","neutral_200","primary_20","primary_600","primary_200","primary_100","primary_300","focus_25","focus","ActionChipContainer","ChipInputEl","input"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;;;AAEA;AACA;AACA;AACA;AACO,IAAMA,aAAa,GAAGC,0BAAOC,GAAV,yhIAEfC,eAAOC,KAFQ,EAMdD,eAAOC,KANO,EAYZD,eAAOC,KAZK,EA0DpB,oCAAmBC,+BAAmBC,IAAtC,EAA4CH,eAAOC,KAAnD,CA1DoB,EA4GpB,mCAAkBC,+BAAmBC,IAArC,EAA2CH,eAAOC,KAAlD,CA5GoB,EA6JpB,mCAAkBC,+BAAmBC,IAArC,EAA2CH,eAAOC,KAAlD,CA7JoB,EA+MRD,eAAOI,WA/MC,EAgNbJ,eAAOK,WAhNM,EAmNZL,eAAOK,WAnNK,EAuNNL,eAAOI,WAvND,EA2NNJ,eAAOI,WA3ND,EAgORJ,eAAOM,WAhOC,EAmONN,eAAOO,WAnOD,EAuONP,eAAOQ,WAvOD,EA4ObR,eAAOS,KA5OM,EA6ORT,eAAOU,WA7OC,EAgPZV,eAAOW,WAhPK,EAoPNX,eAAOY,WApPD,EAwPNZ,eAAOY,WAxPD,EA6PbZ,eAAOS,KA7PM,EA8PRT,eAAOa,YA9PC,EAiQZb,eAAOc,YAjQK,EAqQNd,eAAOe,YArQD,EAyQNf,eAAOe,YAzQD,CAAnB;;;;AA8QA,IAAMC,kBAAkB,GAAGlB,0BAAOC,GAAV,o0CAMOC,eAAOiB,WANd,EAmB3B,mCAAkBf,+BAAmBgB,OAArC,EAA8ClB,eAAOS,KAArD,CAnB2B,EAoBpBT,eAAOS,KApBa,EAyBiBT,eAAOW,WAzBxB,EA0BcX,eAAOW,WA1BrB,EA2BSX,eAAOW,WA3BhB,EAiCiBX,eAAOc,YAjCxB,EAkCcd,eAAOc,YAlCrB,EAmCSd,eAAOc,YAnChB,EA4CiBd,eAAOQ,WA5CxB,EA6CcR,eAAOQ,WA7CrB,EA8CSR,eAAOQ,WA9ChB,EAkDiBR,eAAOO,WAlDxB,EAmDcP,eAAOO,WAnDrB,EAoDSP,eAAOO,WApDhB,CAAxB;;;;AAwDA,IAAMY,YAAY,GAAGrB,0BAAOsB,IAAV,6NACdpB,eAAOc,YADO,CAAlB;;;AAUA,IAAMO,mBAAmB,GAAG,+BAAOxB,aAAP,CAAH,s4BAEdG,eAAOC,KAFO,EAGnBD,eAAOsB,WAHY,EAKZtB,eAAOuB,WALK,EAQZvB,eAAOwB,UARK,EASjBxB,eAAOyB,WATU,EAUVzB,eAAO0B,WAVG,EAeZ1B,eAAO2B,WAfK,EAgBjB3B,eAAOQ,WAhBU,EAiBVR,eAAO4B,WAjBG,EAkBC5B,eAAO6B,QAlBR,EAkBiC7B,eAAO8B,KAlBxC,EAwBd9B,eAAOM,WAxBO,EAyBnBN,eAAOC,KAzBY,EA2BZD,eAAOM,WA3BK,EA8BZN,eAAOO,WA9BK,EA+BjBP,eAAOC,KA/BU,EAgCVD,eAAOO,WAhCG,EAqCZP,eAAOQ,WArCK,EAsCjBR,eAAOC,KAtCU,EAuCVD,eAAOQ,WAvCG,EAwCCR,eAAO6B,QAxCR,EAwCiC7B,eAAO8B,KAxCxC,CAAzB;;AA8CA,IAAMC,mBAAmB,GAAG,+BAAOlC,aAAP,CAAH,udAEdG,eAAOC,KAFO,EAGnBD,eAAOsB,WAHY,EAKZtB,eAAOuB,WALK,EAQZvB,eAAOwB,UARK,EASjBxB,eAAOyB,WATU,EAUVzB,eAAO0B,WAVG,EAeZ1B,eAAO2B,WAfK,EAgBjB3B,eAAOQ,WAhBU,EAiBVR,eAAO4B,WAjBG,EAkBC5B,eAAO6B,QAlBR,EAkBiC7B,eAAO8B,KAlBxC,CAAzB;;;AAuBA,IAAME,WAAW,GAAGlC,0BAAOmC,KAAV,qQASpB,mCAAkB/B,+BAAmBgB,OAArC,EAA8ClB,eAAOS,KAArD,CAToB,EAUbT,eAAOS,KAVM,CAAjB","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\n\n/**\n *\n * Chip styles.\n */\nexport const ChipContainer = styled.div`\n  cursor: pointer;\n  color: ${COLORS.white};\n  display: inline-block;\n\n  > button > div > .remove > path {\n    fill: ${COLORS.white};\n  }\n\n  &:hover,\n  &:focus {\n    > button > div > .remove > path {\n      fill: ${COLORS.white};\n    }\n  }\n\n  button {\n    background: transparent;\n    display: inline-block;\n    padding: 0;\n    width: auto;\n    height: auto;\n    color: inherit;\n\n    div {\n      color: inherit;\n      width: auto;\n      height: auto;\n\n      svg {\n        color: inherit;\n      }\n    }\n\n    &:hover,\n    &:hover:not(:disabled),\n    :focus,\n    :focus:not(:disabled) {\n      background: transparent;\n      display: inline-block;\n      padding: 0;\n      width: auto;\n      height: auto;\n      color: inherit;\n      outline: none;\n\n      div {\n        box-shadow: none;\n        background-color: transparent;\n\n        svg {\n          color: inherit;\n        }\n      }\n    }\n  }\n\n  &.small {\n    ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.white)}\n    border-radius: 40px;\n    height: 24px;\n    padding: 0px 12px;\n    margin: 12px 0px;\n    border-radius: 40px;\n    display: inline-flex;\n    align-items: center;\n\n    &.icon-chip {\n      padding: 0px 12px 0px 8px;\n    }\n\n    &.button-chip {\n      padding: 0px 8px 0px 12px;\n    }\n\n    &.icon-chip.button-chip {\n      padding: 0px 8px;\n    }\n\n    > button {\n      width: 16px;\n      height: 16px;\n\n      > div {\n        width: 16px;\n        height: 16px;\n\n        svg {\n          padding: 0px;\n          margin-left: 4x;\n        }\n      }\n    }\n\n    svg {\n      vertical-align: middle;\n\n      &.icon {\n        margin-right: 4px;\n      }\n\n      &.remove {\n        margin-left: 4px;\n      }\n    }\n  }\n\n  &.medium {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n    border-radius: 80px;\n    height: 40px;\n    padding: 0px 16px;\n    margin: 4px 0px;\n    display: inline-flex;\n    align-items: center;\n\n    &.icon-chip {\n      padding: 0px 16px 0px 12px;\n    }\n\n    &.button-chip {\n      padding: 0px 12px 0px 16px;\n    }\n\n    &.icon-chip.button-chip {\n      padding: 0px 12px;\n    }\n\n    > button {\n      width: 20px;\n      height: 20px;\n\n      > div {\n        width: 20px;\n        height: 20px;\n\n        svg {\n          padding: 0px;\n          margin-left: 6px;\n        }\n      }\n    }\n\n    svg {\n      vertical-align: middle;\n\n      &.icon {\n        margin-right: 6px;\n      }\n\n      &.remove {\n        margin-left: 6px;\n      }\n    }\n  }\n\n  &.large {\n    ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.white)}\n    border-radius: 120px;\n    height: 56px;\n    padding: 0px 20px;\n    margin: 0px;\n    display: inline-flex;\n    align-items: center;\n\n    &.icon-chip {\n      padding: 0px 20px 0px 16px;\n    }\n\n    &.button-chip {\n      padding: 0px 16px 0px 20px;\n    }\n\n    &.icon-chip.button-chip {\n      padding: 0px 16px;\n    }\n\n    > button {\n      width: 24px;\n      height: 24px;\n\n      > div {\n        width: 24px;\n        height: 24px;\n\n        svg {\n          padding: 0px;\n          margin-left: 8px;\n        }\n      }\n    }\n\n    svg {\n      vertical-align: middle;\n\n      &.icon {\n        margin-right: 8px;\n      }\n\n      &.remove {\n        margin-left: 8px;\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    background: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n\n    > button > div > .remove > path {\n      fill: ${COLORS.neutral_300};\n    }\n\n    &:hover {\n      background: ${COLORS.neutral_100};\n    }\n\n    &:active {\n      background: ${COLORS.neutral_100};\n    }\n  }\n\n  &.normal {\n    background: ${COLORS.primary_500};\n\n    &:hover {\n      background: ${COLORS.primary_700};\n    }\n\n    &:active {\n      background: ${COLORS.primary_800};\n    }\n  }\n\n  &.warning {\n    color: ${COLORS.black};\n    background: ${COLORS.warning_100};\n\n    > button > div > .remove > path {\n      fill: ${COLORS.warning_500};\n    }\n\n    &:hover {\n      background: ${COLORS.warning_400};\n    }\n\n    &:active {\n      background: ${COLORS.warning_400};\n    }\n  }\n\n  &.error {\n    color: ${COLORS.black};\n    background: ${COLORS.critical_100};\n\n    > button > div > .remove > path {\n      fill: ${COLORS.critical_500};\n    }\n\n    &:hover {\n      background: ${COLORS.critical_400};\n    }\n\n    &:active {\n      background: ${COLORS.critical_400};\n    }\n  }\n`;\n\nexport const ChipInputContainer = styled.div`\n  min-height: 56px;\n  height: auto;\n  width: 100%;\n  border-radius: 4px;\n  border: 2px solid transparent;\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 16px 16px 8px 16px;\n  box-sizing: border-box;\n  width: 100%;\n  cursor: text;\n  outline: none;\n  border-radius: 4.5px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  color: ${COLORS.black} !important;\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  > div {\n    margin-right: 8px;\n    margin-bottom: 8px;\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n`;\n\nexport const RequiredStar = styled.span`\n  color: ${COLORS.critical_500};\n  font-size: 28px;\n  line-height: 12px;\n  float: right;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n`;\n\nexport const FilterChipContainer = styled(ChipContainer)`\n  &.normal {\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_600};\n    border: 2px solid;\n    border-color: ${COLORS.neutral_200};\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n      border-color: ${COLORS.primary_200};\n    }\n\n    &:active,\n    &:focus {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      border-color: ${COLORS.primary_300};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n    }\n  }\n\n  &.selected {\n    background: ${COLORS.primary_500};\n    color: ${COLORS.white};\n    border: 2px solid;\n    border-color: ${COLORS.primary_500};\n\n    &:hover {\n      background: ${COLORS.primary_700};\n      color: ${COLORS.white};\n      border-color: ${COLORS.primary_700};\n    }\n\n    &:active,\n    &:focus {\n      background: ${COLORS.primary_800};\n      color: ${COLORS.white};\n      border-color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n    }\n  }\n`;\n\nexport const ActionChipContainer = styled(ChipContainer)`\n  &.normal {\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_600};\n    border: 2px solid;\n    border-color: ${COLORS.neutral_200};\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n      border-color: ${COLORS.primary_200};\n    }\n\n    &:active,\n    &:focus {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      border-color: ${COLORS.primary_300};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n    }\n  }\n`;\n\nexport const ChipInputEl = styled.input`\n  height: 40px;\n  width: auto;\n  display: inline-flex;\n  border: none;\n  outline: none;\n  margin-top: 5px;\n  margin-bottom: 8px;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  color: ${COLORS.black} !important;\n`;\n"],"file":"ChipStyles.cjs"}

package/dist/Chips/ChipStyles.js

@@ -0,0 +1,26 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+/**
+ * Import third-party libraries.
+ */
+import styled from 'styled-components';
+/**
+ * Import custom style properties.
+ */
+
+import { COLORS } from '../styles';
+import { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling } from '../styles/typography';
+/**
+ *
+ * Chip styles.
+ */
+
+export var ChipContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  color: ", ";\n  display: inline-block;\n\n  > button > div > .remove > path {\n    fill: ", ";\n  }\n\n  &:hover,\n  &:focus {\n    > button > div > .remove > path {\n      fill: ", ";\n    }\n  }\n\n  button {\n    background: transparent;\n    display: inline-block;\n    padding: 0;\n    width: auto;\n    height: auto;\n    color: inherit;\n\n    div {\n      color: inherit;\n      width: auto;\n      height: auto;\n\n      svg {\n        color: inherit;\n      }\n    }\n\n    &:hover,\n    &:hover:not(:disabled),\n    :focus,\n    :focus:not(:disabled) {\n      background: transparent;\n      display: inline-block;\n      padding: 0;\n      width: auto;\n      height: auto;\n      color: inherit;\n      outline: none;\n\n      div {\n        box-shadow: none;\n        background-color: transparent;\n\n        svg {\n          color: inherit;\n        }\n      }\n    }\n  }\n\n  &.small {\n    ", "\n    border-radius: 40px;\n    height: 24px;\n    padding: 0px 12px;\n    margin: 12px 0px;\n    border-radius: 40px;\n    display: inline-flex;\n    align-items: center;\n\n    &.icon-chip {\n      padding: 0px 12px 0px 8px;\n    }\n\n    &.button-chip {\n      padding: 0px 8px 0px 12px;\n    }\n\n    &.icon-chip.button-chip {\n      padding: 0px 8px;\n    }\n\n    > button {\n      width: 16px;\n      height: 16px;\n\n      > div {\n        width: 16px;\n        height: 16px;\n\n        svg {\n          padding: 0px;\n          margin-left: 4x;\n        }\n      }\n    }\n\n    svg {\n      vertical-align: middle;\n\n      &.icon {\n        margin-right: 4px;\n      }\n\n      &.remove {\n        margin-left: 4px;\n      }\n    }\n  }\n\n  &.medium {\n    ", "\n    border-radius: 80px;\n    height: 40px;\n    padding: 0px 16px;\n    margin: 4px 0px;\n    display: inline-flex;\n    align-items: center;\n\n    &.icon-chip {\n      padding: 0px 16px 0px 12px;\n    }\n\n    &.button-chip {\n      padding: 0px 12px 0px 16px;\n    }\n\n    &.icon-chip.button-chip {\n      padding: 0px 12px;\n    }\n\n    > button {\n      width: 20px;\n      height: 20px;\n\n      > div {\n        width: 20px;\n        height: 20px;\n\n        svg {\n          padding: 0px;\n          margin-left: 6px;\n        }\n      }\n    }\n\n    svg {\n      vertical-align: middle;\n\n      &.icon {\n        margin-right: 6px;\n      }\n\n      &.remove {\n        margin-left: 6px;\n      }\n    }\n  }\n\n  &.large {\n    ", "\n    border-radius: 120px;\n    height: 56px;\n    padding: 0px 20px;\n    margin: 0px;\n    display: inline-flex;\n    align-items: center;\n\n    &.icon-chip {\n      padding: 0px 20px 0px 16px;\n    }\n\n    &.button-chip {\n      padding: 0px 16px 0px 20px;\n    }\n\n    &.icon-chip.button-chip {\n      padding: 0px 16px;\n    }\n\n    > button {\n      width: 24px;\n      height: 24px;\n\n      > div {\n        width: 24px;\n        height: 24px;\n\n        svg {\n          padding: 0px;\n          margin-left: 8px;\n        }\n      }\n    }\n\n    svg {\n      vertical-align: middle;\n\n      &.icon {\n        margin-right: 8px;\n      }\n\n      &.remove {\n        margin-left: 8px;\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    background: ", ";\n    color: ", ";\n\n    > button > div > .remove > path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n  }\n\n  &.normal {\n    background: ", ";\n\n    &:hover {\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n  }\n\n  &.warning {\n    color: ", ";\n    background: ", ";\n\n    > button > div > .remove > path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n  }\n\n  &.error {\n    color: ", ";\n    background: ", ";\n\n    > button > div > .remove > path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n  }\n"])), COLORS.white, COLORS.white, COLORS.white, ComponentXSStyling(ComponentTextStyle.Bold, COLORS.white), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white), ComponentMStyling(ComponentTextStyle.Bold, COLORS.white), COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_100, COLORS.primary_500, COLORS.primary_700, COLORS.primary_800, COLORS.black, COLORS.warning_100, COLORS.warning_500, COLORS.warning_400, COLORS.warning_400, COLORS.black, COLORS.critical_100, COLORS.critical_500, COLORS.critical_400, COLORS.critical_400);
+export var ChipInputContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-height: 56px;\n  height: auto;\n  width: 100%;\n  border-radius: 4px;\n  border: 2px solid transparent;\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 16px 16px 8px 16px;\n  box-sizing: border-box;\n  width: 100%;\n  cursor: text;\n  outline: none;\n  border-radius: 4.5px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n\n  ", "\n  color: ", " !important;\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  > div {\n    margin-right: 8px;\n    margin-bottom: 8px;\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n"])), COLORS.neutral_400, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.black, COLORS.warning_500, COLORS.warning_500, COLORS.warning_500, COLORS.critical_500, COLORS.critical_500, COLORS.critical_500, COLORS.primary_800, COLORS.primary_800, COLORS.primary_800, COLORS.primary_700, COLORS.primary_700, COLORS.primary_700);
+export var RequiredStar = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 28px;\n  line-height: 12px;\n  float: right;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n"])), COLORS.critical_500);
+export var FilterChipContainer = styled(ChipContainer)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  &.normal {\n    background: ", ";\n    color: ", ";\n    border: 2px solid;\n    border-color: ", ";\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n    }\n\n    &:active,\n    &:focus {\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n    }\n  }\n\n  &.selected {\n    background: ", ";\n    color: ", ";\n    border: 2px solid;\n    border-color: ", ";\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n    }\n\n    &:active,\n    &:focus {\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n    }\n  }\n"])), COLORS.white, COLORS.neutral_600, COLORS.neutral_200, COLORS.primary_20, COLORS.primary_600, COLORS.primary_200, COLORS.primary_100, COLORS.primary_800, COLORS.primary_300, COLORS.focus_25, COLORS.focus, COLORS.primary_500, COLORS.white, COLORS.primary_500, COLORS.primary_700, COLORS.white, COLORS.primary_700, COLORS.primary_800, COLORS.white, COLORS.primary_800, COLORS.focus_25, COLORS.focus);
+export var ActionChipContainer = styled(ChipContainer)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  &.normal {\n    background: ", ";\n    color: ", ";\n    border: 2px solid;\n    border-color: ", ";\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n    }\n\n    &:active,\n    &:focus {\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n    }\n  }\n"])), COLORS.white, COLORS.neutral_600, COLORS.neutral_200, COLORS.primary_20, COLORS.primary_600, COLORS.primary_200, COLORS.primary_100, COLORS.primary_800, COLORS.primary_300, COLORS.focus_25, COLORS.focus);
+export var ChipInputEl = styled.input(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  height: 40px;\n  width: auto;\n  display: inline-flex;\n  border: none;\n  outline: none;\n  margin-top: 5px;\n  margin-bottom: 8px;\n\n  ", "\n  color: ", " !important;\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.black);
+//# sourceMappingURL=ChipStyles.js.map

package/dist/Chips/ChipStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Chips/ChipStyles.ts"],"names":["styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ChipContainer","div","white","Bold","neutral_100","neutral_300","primary_500","primary_700","primary_800","black","warning_100","warning_500","warning_400","critical_100","critical_500","critical_400","ChipInputContainer","neutral_400","Regular","RequiredStar","span","FilterChipContainer","neutral_600","neutral_200","primary_20","primary_600","primary_200","primary_100","primary_300","focus_25","focus","ActionChipContainer","ChipInputEl","input"],"mappings":";;;;AAAA;AACA;AACA;AACA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,EAA+CC,kBAA/C,EAAmEC,kBAAnE,QAAkH,sBAAlH;AAEA;AACA;AACA;AACA;;AACA,OAAO,IAAMC,aAAa,GAAGN,MAAM,CAACO,GAAV,2gIAEfN,MAAM,CAACO,KAFQ,EAMdP,MAAM,CAACO,KANO,EAYZP,MAAM,CAACO,KAZK,EA0DpBH,kBAAkB,CAACD,kBAAkB,CAACK,IAApB,EAA0BR,MAAM,CAACO,KAAjC,CA1DE,EA4GpBL,iBAAiB,CAACC,kBAAkB,CAACK,IAApB,EAA0BR,MAAM,CAACO,KAAjC,CA5GG,EA6JpBN,iBAAiB,CAACE,kBAAkB,CAACK,IAApB,EAA0BR,MAAM,CAACO,KAAjC,CA7JG,EA+MRP,MAAM,CAACS,WA/MC,EAgNbT,MAAM,CAACU,WAhNM,EAmNZV,MAAM,CAACU,WAnNK,EAuNNV,MAAM,CAACS,WAvND,EA2NNT,MAAM,CAACS,WA3ND,EAgORT,MAAM,CAACW,WAhOC,EAmONX,MAAM,CAACY,WAnOD,EAuONZ,MAAM,CAACa,WAvOD,EA4Obb,MAAM,CAACc,KA5OM,EA6ORd,MAAM,CAACe,WA7OC,EAgPZf,MAAM,CAACgB,WAhPK,EAoPNhB,MAAM,CAACiB,WApPD,EAwPNjB,MAAM,CAACiB,WAxPD,EA6PbjB,MAAM,CAACc,KA7PM,EA8PRd,MAAM,CAACkB,YA9PC,EAiQZlB,MAAM,CAACmB,YAjQK,EAqQNnB,MAAM,CAACoB,YArQD,EAyQNpB,MAAM,CAACoB,YAzQD,CAAnB;AA8QP,OAAO,IAAMC,kBAAkB,GAAGtB,MAAM,CAACO,GAAV,szCAMON,MAAM,CAACsB,WANd,EAmB3BrB,iBAAiB,CAACE,kBAAkB,CAACoB,OAApB,EAA6BvB,MAAM,CAACc,KAApC,CAnBU,EAoBpBd,MAAM,CAACc,KApBa,EAyBiBd,MAAM,CAACgB,WAzBxB,EA0BchB,MAAM,CAACgB,WA1BrB,EA2BShB,MAAM,CAACgB,WA3BhB,EAiCiBhB,MAAM,CAACmB,YAjCxB,EAkCcnB,MAAM,CAACmB,YAlCrB,EAmCSnB,MAAM,CAACmB,YAnChB,EA4CiBnB,MAAM,CAACa,WA5CxB,EA6Ccb,MAAM,CAACa,WA7CrB,EA8CSb,MAAM,CAACa,WA9ChB,EAkDiBb,MAAM,CAACY,WAlDxB,EAmDcZ,MAAM,CAACY,WAnDrB,EAoDSZ,MAAM,CAACY,WApDhB,CAAxB;AAwDP,OAAO,IAAMY,YAAY,GAAGzB,MAAM,CAAC0B,IAAV,+MACdzB,MAAM,CAACmB,YADO,CAAlB;AAUP,OAAO,IAAMO,mBAAmB,GAAG3B,MAAM,CAACM,aAAD,CAAT,w3BAEdL,MAAM,CAACO,KAFO,EAGnBP,MAAM,CAAC2B,WAHY,EAKZ3B,MAAM,CAAC4B,WALK,EAQZ5B,MAAM,CAAC6B,UARK,EASjB7B,MAAM,CAAC8B,WATU,EAUV9B,MAAM,CAAC+B,WAVG,EAeZ/B,MAAM,CAACgC,WAfK,EAgBjBhC,MAAM,CAACa,WAhBU,EAiBVb,MAAM,CAACiC,WAjBG,EAkBCjC,MAAM,CAACkC,QAlBR,EAkBiClC,MAAM,CAACmC,KAlBxC,EAwBdnC,MAAM,CAACW,WAxBO,EAyBnBX,MAAM,CAACO,KAzBY,EA2BZP,MAAM,CAACW,WA3BK,EA8BZX,MAAM,CAACY,WA9BK,EA+BjBZ,MAAM,CAACO,KA/BU,EAgCVP,MAAM,CAACY,WAhCG,EAqCZZ,MAAM,CAACa,WArCK,EAsCjBb,MAAM,CAACO,KAtCU,EAuCVP,MAAM,CAACa,WAvCG,EAwCCb,MAAM,CAACkC,QAxCR,EAwCiClC,MAAM,CAACmC,KAxCxC,CAAzB;AA8CP,OAAO,IAAMC,mBAAmB,GAAGrC,MAAM,CAACM,aAAD,CAAT,ycAEdL,MAAM,CAACO,KAFO,EAGnBP,MAAM,CAAC2B,WAHY,EAKZ3B,MAAM,CAAC4B,WALK,EAQZ5B,MAAM,CAAC6B,UARK,EASjB7B,MAAM,CAAC8B,WATU,EAUV9B,MAAM,CAAC+B,WAVG,EAeZ/B,MAAM,CAACgC,WAfK,EAgBjBhC,MAAM,CAACa,WAhBU,EAiBVb,MAAM,CAACiC,WAjBG,EAkBCjC,MAAM,CAACkC,QAlBR,EAkBiClC,MAAM,CAACmC,KAlBxC,CAAzB;AAuBP,OAAO,IAAME,WAAW,GAAGtC,MAAM,CAACuC,KAAV,uPASpBrC,iBAAiB,CAACE,kBAAkB,CAACoB,OAApB,EAA6BvB,MAAM,CAACc,KAApC,CATG,EAUbd,MAAM,CAACc,KAVM,CAAjB","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\n\n/**\n *\n * Chip styles.\n */\nexport const ChipContainer = styled.div`\n  cursor: pointer;\n  color: ${COLORS.white};\n  display: inline-block;\n\n  > button > div > .remove > path {\n    fill: ${COLORS.white};\n  }\n\n  &:hover,\n  &:focus {\n    > button > div > .remove > path {\n      fill: ${COLORS.white};\n    }\n  }\n\n  button {\n    background: transparent;\n    display: inline-block;\n    padding: 0;\n    width: auto;\n    height: auto;\n    color: inherit;\n\n    div {\n      color: inherit;\n      width: auto;\n      height: auto;\n\n      svg {\n        color: inherit;\n      }\n    }\n\n    &:hover,\n    &:hover:not(:disabled),\n    :focus,\n    :focus:not(:disabled) {\n      background: transparent;\n      display: inline-block;\n      padding: 0;\n      width: auto;\n      height: auto;\n      color: inherit;\n      outline: none;\n\n      div {\n        box-shadow: none;\n        background-color: transparent;\n\n        svg {\n          color: inherit;\n        }\n      }\n    }\n  }\n\n  &.small {\n    ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.white)}\n    border-radius: 40px;\n    height: 24px;\n    padding: 0px 12px;\n    margin: 12px 0px;\n    border-radius: 40px;\n    display: inline-flex;\n    align-items: center;\n\n    &.icon-chip {\n      padding: 0px 12px 0px 8px;\n    }\n\n    &.button-chip {\n      padding: 0px 8px 0px 12px;\n    }\n\n    &.icon-chip.button-chip {\n      padding: 0px 8px;\n    }\n\n    > button {\n      width: 16px;\n      height: 16px;\n\n      > div {\n        width: 16px;\n        height: 16px;\n\n        svg {\n          padding: 0px;\n          margin-left: 4x;\n        }\n      }\n    }\n\n    svg {\n      vertical-align: middle;\n\n      &.icon {\n        margin-right: 4px;\n      }\n\n      &.remove {\n        margin-left: 4px;\n      }\n    }\n  }\n\n  &.medium {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n    border-radius: 80px;\n    height: 40px;\n    padding: 0px 16px;\n    margin: 4px 0px;\n    display: inline-flex;\n    align-items: center;\n\n    &.icon-chip {\n      padding: 0px 16px 0px 12px;\n    }\n\n    &.button-chip {\n      padding: 0px 12px 0px 16px;\n    }\n\n    &.icon-chip.button-chip {\n      padding: 0px 12px;\n    }\n\n    > button {\n      width: 20px;\n      height: 20px;\n\n      > div {\n        width: 20px;\n        height: 20px;\n\n        svg {\n          padding: 0px;\n          margin-left: 6px;\n        }\n      }\n    }\n\n    svg {\n      vertical-align: middle;\n\n      &.icon {\n        margin-right: 6px;\n      }\n\n      &.remove {\n        margin-left: 6px;\n      }\n    }\n  }\n\n  &.large {\n    ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.white)}\n    border-radius: 120px;\n    height: 56px;\n    padding: 0px 20px;\n    margin: 0px;\n    display: inline-flex;\n    align-items: center;\n\n    &.icon-chip {\n      padding: 0px 20px 0px 16px;\n    }\n\n    &.button-chip {\n      padding: 0px 16px 0px 20px;\n    }\n\n    &.icon-chip.button-chip {\n      padding: 0px 16px;\n    }\n\n    > button {\n      width: 24px;\n      height: 24px;\n\n      > div {\n        width: 24px;\n        height: 24px;\n\n        svg {\n          padding: 0px;\n          margin-left: 8px;\n        }\n      }\n    }\n\n    svg {\n      vertical-align: middle;\n\n      &.icon {\n        margin-right: 8px;\n      }\n\n      &.remove {\n        margin-left: 8px;\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    background: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n\n    > button > div > .remove > path {\n      fill: ${COLORS.neutral_300};\n    }\n\n    &:hover {\n      background: ${COLORS.neutral_100};\n    }\n\n    &:active {\n      background: ${COLORS.neutral_100};\n    }\n  }\n\n  &.normal {\n    background: ${COLORS.primary_500};\n\n    &:hover {\n      background: ${COLORS.primary_700};\n    }\n\n    &:active {\n      background: ${COLORS.primary_800};\n    }\n  }\n\n  &.warning {\n    color: ${COLORS.black};\n    background: ${COLORS.warning_100};\n\n    > button > div > .remove > path {\n      fill: ${COLORS.warning_500};\n    }\n\n    &:hover {\n      background: ${COLORS.warning_400};\n    }\n\n    &:active {\n      background: ${COLORS.warning_400};\n    }\n  }\n\n  &.error {\n    color: ${COLORS.black};\n    background: ${COLORS.critical_100};\n\n    > button > div > .remove > path {\n      fill: ${COLORS.critical_500};\n    }\n\n    &:hover {\n      background: ${COLORS.critical_400};\n    }\n\n    &:active {\n      background: ${COLORS.critical_400};\n    }\n  }\n`;\n\nexport const ChipInputContainer = styled.div`\n  min-height: 56px;\n  height: auto;\n  width: 100%;\n  border-radius: 4px;\n  border: 2px solid transparent;\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 16px 16px 8px 16px;\n  box-sizing: border-box;\n  width: 100%;\n  cursor: text;\n  outline: none;\n  border-radius: 4.5px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  color: ${COLORS.black} !important;\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  > div {\n    margin-right: 8px;\n    margin-bottom: 8px;\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n`;\n\nexport const RequiredStar = styled.span`\n  color: ${COLORS.critical_500};\n  font-size: 28px;\n  line-height: 12px;\n  float: right;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n`;\n\nexport const FilterChipContainer = styled(ChipContainer)`\n  &.normal {\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_600};\n    border: 2px solid;\n    border-color: ${COLORS.neutral_200};\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n      border-color: ${COLORS.primary_200};\n    }\n\n    &:active,\n    &:focus {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      border-color: ${COLORS.primary_300};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n    }\n  }\n\n  &.selected {\n    background: ${COLORS.primary_500};\n    color: ${COLORS.white};\n    border: 2px solid;\n    border-color: ${COLORS.primary_500};\n\n    &:hover {\n      background: ${COLORS.primary_700};\n      color: ${COLORS.white};\n      border-color: ${COLORS.primary_700};\n    }\n\n    &:active,\n    &:focus {\n      background: ${COLORS.primary_800};\n      color: ${COLORS.white};\n      border-color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n    }\n  }\n`;\n\nexport const ActionChipContainer = styled(ChipContainer)`\n  &.normal {\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_600};\n    border: 2px solid;\n    border-color: ${COLORS.neutral_200};\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n      border-color: ${COLORS.primary_200};\n    }\n\n    &:active,\n    &:focus {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      border-color: ${COLORS.primary_300};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n    }\n  }\n`;\n\nexport const ChipInputEl = styled.input`\n  height: 40px;\n  width: auto;\n  display: inline-flex;\n  border: none;\n  outline: none;\n  margin-top: 5px;\n  margin-bottom: 8px;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  color: ${COLORS.black} !important;\n`;\n"],"file":"ChipStyles.js"}

package/dist/Chips/ChipTypes.cjs

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=ChipTypes.cjs.map

package/dist/Chips/ChipTypes.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"ChipTypes.cjs"}

package/dist/Chips/ChoiceChips.cjs

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _ChipStyles = require("./ChipStyles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * Import React libraries.
+ */
+
+/**
+ * Import custom styles.
+ */
+var ChoiceChips = function ChoiceChips(_ref) {
+  var selected = _ref.selected,
+      variant = _ref.variant,
+      disabled = _ref.disabled,
+      onClick = _ref.onClick,
+      values = _ref.values;
+
+  /**
+   * Globally used variables within the component.
+   */
+  var _React$useState = React.useState(''),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      selectedChip = _React$useState2[0],
+      setSelectedChip = _React$useState2[1];
+  /**
+   * Set the selected value for the chip.
+   */
+
+
+  React.useEffect(function () {
+    setSelectedChip(selected);
+  }, [selected]);
+  /**
+   * Sets selected chip and fires an event to parent component.
+   * @param value - Chip which was selected.
+   */
+
+  var onSelectChip = function onSelectChip(value) {
+    // Update selected chip
+    setSelectedChip(value.value); // Fire the event
+
+    onClick(value);
+  };
+
+  var handleKeyDown = function handleKeyDown(e, value) {
+    if (e.keyCode === 13) {
+      onSelectChip(value);
+    }
+  };
+  /**
+   * Return Choice Chip component.
+   */
+
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: values.map(function (value) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.FilterChipContainer, {
+        tabIndex: disabled ? -1 : 0,
+        className: "".concat(value.size, " ").concat(disabled ? 'disabled' : selectedChip === value.value ? 'selected' : variant),
+        onClick: function onClick() {
+          return onSelectChip(value);
+        },
+        onKeyDown: function onKeyDown(e) {
+          return handleKeyDown(e, value);
+        },
+        children: value.label
+      }, value.value);
+    })
+  });
+};
+
+var _default = ChoiceChips;
+exports.default = _default;
+//# sourceMappingURL=ChoiceChips.cjs.map

package/dist/Chips/ChoiceChips.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Chips/ChoiceChips.tsx"],"names":["ChoiceChips","selected","variant","disabled","onClick","values","React","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","keyCode","map","size","label"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;;;;;;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAQA,IAAMA,WAAqD,GAAG,SAAxDA,WAAwD,OAAuE;AAAA,MAApEC,QAAoE,QAApEA,QAAoE;AAAA,MAA1DC,OAA0D,QAA1DA,OAA0D;AAAA,MAAjDC,QAAiD,QAAjDA,QAAiD;AAAA,MAAvCC,OAAuC,QAAvCA,OAAuC;AAAA,MAA9BC,MAA8B,QAA9BA,MAA8B;;AACnI;AACF;AACA;AACE,wBAAwCC,KAAK,CAACC,QAAN,CAAuB,EAAvB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;AAEA;AACF;AACA;;;AACEH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpBD,IAAAA,eAAe,CAACR,QAAD,CAAf;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA;AACF;AACA;AACA;;AACE,MAAMU,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;AACzC;AACAH,IAAAA,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;AACAR,IAAAA,OAAO,CAACQ,KAAD,CAAP;AACD,GAND;;AAQA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;AAClD,QAAIE,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE;AAAA,cACGP,MAAM,CAACW,GAAP,CAAW,UAACJ,KAAD;AAAA,0BACV,qBAAC,+BAAD;AAEE,QAAA,QAAQ,EAAET,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,QAAA,SAAS,YAAKS,KAAK,CAACK,IAAX,cAAmBd,QAAQ,GAAG,UAAH,GAAgBK,YAAY,KAAKI,KAAK,CAACA,KAAvB,GAA+B,UAA/B,GAA4CV,OAAvF,CAHX;AAIE,QAAA,OAAO,EAAE;AAAA,iBAAMS,YAAY,CAACC,KAAD,CAAlB;AAAA,SAJX;AAKE,QAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,iBAAID,aAAa,CAACC,CAAD,EAAIF,KAAJ,CAAjB;AAAA,SALd;AAAA,kBAMGA,KAAK,CAACM;AANT,SACON,KAAK,CAACA,KADb,CADU;AAAA,KAAX;AADH,IADF;AAcD,CAhDD;;eAkDeZ,W","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { FilterChipContainer } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { ChipValue, ChoiceChipProps } from './ChipTypes';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({ selected, variant, disabled, onClick, values }: ChoiceChipProps) => {\n  /**\n   * Globally used variables within the component.\n   */\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n  /**\n   * Set the selected value for the chip.\n   */\n  React.useEffect(() => {\n    setSelectedChip(selected);\n  }, [selected]);\n\n  /**\n   * Sets selected chip and fires an event to parent component.\n   * @param value - Chip which was selected.\n   */\n  const onSelectChip = (value: ChipValue) => {\n    // Update selected chip\n    setSelectedChip(value.value);\n\n    // Fire the event\n    onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.keyCode === 13) {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <>\n      {values.map((value: ChipValue) => (\n        <FilterChipContainer\n          key={value.value}\n          tabIndex={disabled ? -1 : 0}\n          className={`${value.size} ${disabled ? 'disabled' : selectedChip === value.value ? 'selected' : variant}`}\n          onClick={() => onSelectChip(value)}\n          onKeyDown={e => handleKeyDown(e, value)}>\n          {value.label}\n        </FilterChipContainer>\n      ))}\n    </>\n  );\n};\n\nexport default ChoiceChips;\n"],"file":"ChoiceChips.cjs"}

package/dist/Chips/ChoiceChips.js

@@ -0,0 +1,81 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+/**
+ * Import custom styles.
+ */
+
+import { FilterChipContainer } from './ChipStyles';
+/**
+ * Import custom types.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+
+var ChoiceChips = function ChoiceChips(_ref) {
+  var selected = _ref.selected,
+      variant = _ref.variant,
+      disabled = _ref.disabled,
+      onClick = _ref.onClick,
+      values = _ref.values;
+
+  /**
+   * Globally used variables within the component.
+   */
+  var _React$useState = React.useState(''),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      selectedChip = _React$useState2[0],
+      setSelectedChip = _React$useState2[1];
+  /**
+   * Set the selected value for the chip.
+   */
+
+
+  React.useEffect(function () {
+    setSelectedChip(selected);
+  }, [selected]);
+  /**
+   * Sets selected chip and fires an event to parent component.
+   * @param value - Chip which was selected.
+   */
+
+  var onSelectChip = function onSelectChip(value) {
+    // Update selected chip
+    setSelectedChip(value.value); // Fire the event
+
+    onClick(value);
+  };
+
+  var handleKeyDown = function handleKeyDown(e, value) {
+    if (e.keyCode === 13) {
+      onSelectChip(value);
+    }
+  };
+  /**
+   * Return Choice Chip component.
+   */
+
+
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: values.map(function (value) {
+      return /*#__PURE__*/_jsx(FilterChipContainer, {
+        tabIndex: disabled ? -1 : 0,
+        className: "".concat(value.size, " ").concat(disabled ? 'disabled' : selectedChip === value.value ? 'selected' : variant),
+        onClick: function onClick() {
+          return onSelectChip(value);
+        },
+        onKeyDown: function onKeyDown(e) {
+          return handleKeyDown(e, value);
+        },
+        children: value.label
+      }, value.value);
+    })
+  });
+};
+
+export default ChoiceChips;
+//# sourceMappingURL=ChoiceChips.js.map

package/dist/Chips/ChoiceChips.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Chips/ChoiceChips.tsx"],"names":["React","FilterChipContainer","ChoiceChips","selected","variant","disabled","onClick","values","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","keyCode","map","size","label"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAASC,mBAAT,QAAoC,cAApC;AAEA;AACA;AACA;;;;;AAGA,IAAMC,WAAqD,GAAG,SAAxDA,WAAwD,OAAuE;AAAA,MAApEC,QAAoE,QAApEA,QAAoE;AAAA,MAA1DC,OAA0D,QAA1DA,OAA0D;AAAA,MAAjDC,QAAiD,QAAjDA,QAAiD;AAAA,MAAvCC,OAAuC,QAAvCA,OAAuC;AAAA,MAA9BC,MAA8B,QAA9BA,MAA8B;;AACnI;AACF;AACA;AACE,wBAAwCP,KAAK,CAACQ,QAAN,CAAuB,EAAvB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;AAEA;AACF;AACA;;;AACEV,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AACpBD,IAAAA,eAAe,CAACP,QAAD,CAAf;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA;AACF;AACA;AACA;;AACE,MAAMS,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;AACzC;AACAH,IAAAA,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;AACAP,IAAAA,OAAO,CAACO,KAAD,CAAP;AACD,GAND;;AAQA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;AAClD,QAAIE,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE;AAAA,cACGN,MAAM,CAACU,GAAP,CAAW,UAACJ,KAAD;AAAA,0BACV,KAAC,mBAAD;AAEE,QAAA,QAAQ,EAAER,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,QAAA,SAAS,YAAKQ,KAAK,CAACK,IAAX,cAAmBb,QAAQ,GAAG,UAAH,GAAgBI,YAAY,KAAKI,KAAK,CAACA,KAAvB,GAA+B,UAA/B,GAA4CT,OAAvF,CAHX;AAIE,QAAA,OAAO,EAAE;AAAA,iBAAMQ,YAAY,CAACC,KAAD,CAAlB;AAAA,SAJX;AAKE,QAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,iBAAID,aAAa,CAACC,CAAD,EAAIF,KAAJ,CAAjB;AAAA,SALd;AAAA,kBAMGA,KAAK,CAACM;AANT,SACON,KAAK,CAACA,KADb,CADU;AAAA,KAAX;AADH,IADF;AAcD,CAhDD;;AAkDA,eAAeX,WAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { FilterChipContainer } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { ChipValue, ChoiceChipProps } from './ChipTypes';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({ selected, variant, disabled, onClick, values }: ChoiceChipProps) => {\n  /**\n   * Globally used variables within the component.\n   */\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n  /**\n   * Set the selected value for the chip.\n   */\n  React.useEffect(() => {\n    setSelectedChip(selected);\n  }, [selected]);\n\n  /**\n   * Sets selected chip and fires an event to parent component.\n   * @param value - Chip which was selected.\n   */\n  const onSelectChip = (value: ChipValue) => {\n    // Update selected chip\n    setSelectedChip(value.value);\n\n    // Fire the event\n    onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.keyCode === 13) {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <>\n      {values.map((value: ChipValue) => (\n        <FilterChipContainer\n          key={value.value}\n          tabIndex={disabled ? -1 : 0}\n          className={`${value.size} ${disabled ? 'disabled' : selectedChip === value.value ? 'selected' : variant}`}\n          onClick={() => onSelectChip(value)}\n          onKeyDown={e => handleKeyDown(e, value)}>\n          {value.label}\n        </FilterChipContainer>\n      ))}\n    </>\n  );\n};\n\nexport default ChoiceChips;\n"],"file":"ChoiceChips.js"}

package/dist/Chips/FilterChip.cjs

@@ -0,0 +1,81 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _types = require("../types");
+
+var _index = require("../icons/index");
+
+var _ChipStyles = require("./ChipStyles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * Import React libraries.
+ */
+
+/**
+ * Import custom components.
+ */
+
+/**
+ * Import custom styles.
+ */
+var FilterChip = function FilterChip(_ref) {
+  var selected = _ref.selected,
+      text = _ref.text,
+      variant = _ref.variant,
+      size = _ref.size,
+      disabled = _ref.disabled,
+      _onClick = _ref.onClick;
+
+  /**
+   * Retrieves icon size based on the chip size.
+   * @returns A string indicating the icon size.
+   */
+  var getIconSize = function getIconSize() {
+    var iconSize; // Calculate correct icon size
+
+    if (size === _types.Size.Small) {
+      iconSize = '16px';
+    } else if (size === _types.Size.Medium) {
+      iconSize = '20px';
+    } else {
+      iconSize = '24px';
+    }
+
+    return iconSize;
+  };
+  /**
+   * Return Filter Chip component.
+   */
+
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChipStyles.FilterChipContainer, {
+      className: "".concat(size, " ").concat(disabled ? 'disabled' : selected ? 'selected icon-chip' : variant),
+      onClick: function onClick() {
+        return _onClick();
+      },
+      children: [selected && _index.SystemIcons.CheckComplete({
+        size: getIconSize(),
+        className: 'icon'
+      }), text]
+    })
+  });
+};
+
+var _default = FilterChip;
+exports.default = _default;
+//# sourceMappingURL=FilterChip.cjs.map

package/dist/Chips/FilterChip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Chips/FilterChip.tsx"],"names":["FilterChip","selected","text","variant","size","disabled","onClick","getIconSize","iconSize","Size","Small","Medium","icons","CheckComplete","className"],"mappings":";;;;;;;;;AAGC;;AACD;;AAKC;;AAKA;;;;;;;;AAdD;AACA;AACA;;AAIC;AACD;AACA;;AAGC;AACD;AACA;AAQC,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAA2E;AAAA,MAAxEC,QAAwE,QAAxEA,QAAwE;AAAA,MAA9DC,IAA8D,QAA9DA,IAA8D;AAAA,MAAxDC,OAAwD,QAAxDA,OAAwD;AAAA,MAA/CC,IAA+C,QAA/CA,IAA+C;AAAA,MAAzCC,QAAyC,QAAzCA,QAAyC;AAAA,MAA/BC,QAA+B,QAA/BA,OAA+B;;AACtI;AACH;AACA;AACA;AACG,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAc;AAChC,QAAIC,QAAJ,CADgC,CAGhC;;AACA,QAAIJ,IAAI,KAAKK,YAAKC,KAAlB,EAAyB;AACvBF,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFD,MAEO,IAAIJ,IAAI,KAAKK,YAAKE,MAAlB,EAA0B;AAC/BH,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFM,MAEA;AACLA,MAAAA,QAAQ,GAAG,MAAX;AACD;;AAED,WAAOA,QAAP;AACD,GAbD;AAeA;AACH;AACA;;;AACG,sBACE;AAAA,2BACE,sBAAC,+BAAD;AAAqB,MAAA,SAAS,YAAKJ,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgBJ,QAAQ,GAAG,oBAAH,GAA0BE,OAAvE,CAA9B;AAAgH,MAAA,OAAO,EAAE;AAAA,eAAMG,QAAO,EAAb;AAAA,OAAzH;AAAA,iBAEGL,QAAQ,IAAIW,mBAAMC,aAAN,CAAoB;AAAET,QAAAA,IAAI,EAAEG,WAAW,EAAnB;AAAuBO,QAAAA,SAAS,EAAE;AAAlC,OAApB,CAFf,EAKGZ,IALH;AAAA;AADF,IADF;AAWD,CAlCD;;eAoCeF,U","sourcesContent":["/**\n * Import React libraries.\n */\n import * as React from 'react';\nimport { Size } from '../types';\n\n /**\n  * Import custom components.\n  */\n import {SystemIcons as icons} from '../icons/index';\n \n /**\n  * Import custom styles.\n  */\n import { FilterChipContainer } from './ChipStyles';\n \n /**\n  * Import custom types.\n  */\n import { FilterChipProps } from './ChipTypes';\n \n const FilterChip: React.FunctionComponent<FilterChipProps> = ({ selected, text, variant, size, disabled, onClick }: FilterChipProps) => {\n   /**\n    * Retrieves icon size based on the chip size.\n    * @returns A string indicating the icon size.\n    */\n   const getIconSize = (): string => {\n     let iconSize: string;\n \n     // Calculate correct icon size\n     if (size === Size.Small) {\n       iconSize = '16px';\n     } else if (size === Size.Medium) {\n       iconSize = '20px';\n     } else {\n       iconSize = '24px';\n     }\n \n     return iconSize;\n   }\n \n   /**\n    * Return Filter Chip component.\n    */\n   return (\n     <>\n       <FilterChipContainer className={`${size} ${disabled ? 'disabled' : selected ? 'selected icon-chip' : variant}`} onClick={() => onClick()}>\n         { /* Let's render icon if the chip is selected */ }\n         {selected && icons.CheckComplete({ size: getIconSize(), className: 'icon' })}\n         \n         { /* Let's render text */ }\n         {text}\n       </FilterChipContainer>\n     </>\n   );\n };\n \n export default FilterChip;\n "],"file":"FilterChip.cjs"}

package/dist/Chips/FilterChip.js

@@ -0,0 +1,69 @@
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+import { Size } from '../types';
+/**
+ * Import custom components.
+ */
+
+import { SystemIcons as icons } from '../icons/index';
+/**
+ * Import custom styles.
+ */
+
+import { FilterChipContainer } from './ChipStyles';
+/**
+ * Import custom types.
+ */
+
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var FilterChip = function FilterChip(_ref) {
+  var selected = _ref.selected,
+      text = _ref.text,
+      variant = _ref.variant,
+      size = _ref.size,
+      disabled = _ref.disabled,
+      _onClick = _ref.onClick;
+
+  /**
+   * Retrieves icon size based on the chip size.
+   * @returns A string indicating the icon size.
+   */
+  var getIconSize = function getIconSize() {
+    var iconSize; // Calculate correct icon size
+
+    if (size === Size.Small) {
+      iconSize = '16px';
+    } else if (size === Size.Medium) {
+      iconSize = '20px';
+    } else {
+      iconSize = '24px';
+    }
+
+    return iconSize;
+  };
+  /**
+   * Return Filter Chip component.
+   */
+
+
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs(FilterChipContainer, {
+      className: "".concat(size, " ").concat(disabled ? 'disabled' : selected ? 'selected icon-chip' : variant),
+      onClick: function onClick() {
+        return _onClick();
+      },
+      children: [selected && icons.CheckComplete({
+        size: getIconSize(),
+        className: 'icon'
+      }), text]
+    })
+  });
+};
+
+export default FilterChip;
+//# sourceMappingURL=FilterChip.js.map

package/dist/Chips/FilterChip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Chips/FilterChip.tsx"],"names":["React","Size","SystemIcons","icons","FilterChipContainer","FilterChip","selected","text","variant","size","disabled","onClick","getIconSize","iconSize","Small","Medium","CheckComplete","className"],"mappings":"AAAA;AACA;AACA;AACC,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACD,SAASC,IAAT,QAAqB,UAArB;AAEC;AACD;AACA;;AACC,SAAQC,WAAW,IAAIC,KAAvB,QAAmC,gBAAnC;AAEA;AACD;AACA;;AACC,SAASC,mBAAT,QAAoC,cAApC;AAEA;AACD;AACA;;;;;;AAGC,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAA2E;AAAA,MAAxEC,QAAwE,QAAxEA,QAAwE;AAAA,MAA9DC,IAA8D,QAA9DA,IAA8D;AAAA,MAAxDC,OAAwD,QAAxDA,OAAwD;AAAA,MAA/CC,IAA+C,QAA/CA,IAA+C;AAAA,MAAzCC,QAAyC,QAAzCA,QAAyC;AAAA,MAA/BC,QAA+B,QAA/BA,OAA+B;;AACtI;AACH;AACA;AACA;AACG,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAc;AAChC,QAAIC,QAAJ,CADgC,CAGhC;;AACA,QAAIJ,IAAI,KAAKR,IAAI,CAACa,KAAlB,EAAyB;AACvBD,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFD,MAEO,IAAIJ,IAAI,KAAKR,IAAI,CAACc,MAAlB,EAA0B;AAC/BF,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFM,MAEA;AACLA,MAAAA,QAAQ,GAAG,MAAX;AACD;;AAED,WAAOA,QAAP;AACD,GAbD;AAeA;AACH;AACA;;;AACG,sBACE;AAAA,2BACE,MAAC,mBAAD;AAAqB,MAAA,SAAS,YAAKJ,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgBJ,QAAQ,GAAG,oBAAH,GAA0BE,OAAvE,CAA9B;AAAgH,MAAA,OAAO,EAAE;AAAA,eAAMG,QAAO,EAAb;AAAA,OAAzH;AAAA,iBAEGL,QAAQ,IAAIH,KAAK,CAACa,aAAN,CAAoB;AAAEP,QAAAA,IAAI,EAAEG,WAAW,EAAnB;AAAuBK,QAAAA,SAAS,EAAE;AAAlC,OAApB,CAFf,EAKGV,IALH;AAAA;AADF,IADF;AAWD,CAlCD;;AAoCA,eAAeF,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\n import * as React from 'react';\nimport { Size } from '../types';\n\n /**\n  * Import custom components.\n  */\n import {SystemIcons as icons} from '../icons/index';\n \n /**\n  * Import custom styles.\n  */\n import { FilterChipContainer } from './ChipStyles';\n \n /**\n  * Import custom types.\n  */\n import { FilterChipProps } from './ChipTypes';\n \n const FilterChip: React.FunctionComponent<FilterChipProps> = ({ selected, text, variant, size, disabled, onClick }: FilterChipProps) => {\n   /**\n    * Retrieves icon size based on the chip size.\n    * @returns A string indicating the icon size.\n    */\n   const getIconSize = (): string => {\n     let iconSize: string;\n \n     // Calculate correct icon size\n     if (size === Size.Small) {\n       iconSize = '16px';\n     } else if (size === Size.Medium) {\n       iconSize = '20px';\n     } else {\n       iconSize = '24px';\n     }\n \n     return iconSize;\n   }\n \n   /**\n    * Return Filter Chip component.\n    */\n   return (\n     <>\n       <FilterChipContainer className={`${size} ${disabled ? 'disabled' : selected ? 'selected icon-chip' : variant}`} onClick={() => onClick()}>\n         { /* Let's render icon if the chip is selected */ }\n         {selected && icons.CheckComplete({ size: getIconSize(), className: 'icon' })}\n         \n         { /* Let's render text */ }\n         {text}\n       </FilterChipContainer>\n     </>\n   );\n };\n \n export default FilterChip;\n "],"file":"FilterChip.js"}