@laerdal/life-react-components 1.4.1-dev.2 → 1.4.1-dev.3

package/dist/umd/Chips/ChipStyles.js

@@ -0,0 +1,454 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "styled-components", "../styles", "../styles/typography"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("styled-components"), require("../styles"), require("../styles/typography"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.styledComponents, global.styles, global.typography);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _styledComponents, _styles, _typography) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.ChipInputEl = exports.ActionChipContainer = exports.FilterChipContainer = exports.RequiredStar = exports.ChipInputContainer = exports.ChipContainer = undefined;
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  /**
+   * Import third-party libraries.
+   */
+
+  /**
+   * Import custom style properties.
+   */
+
+  /**
+   *
+   * Chip styles.
+   */
+  const ChipContainer = exports.ChipContainer = _styledComponents2.default.div`
+  cursor: pointer;
+  color: ${_styles.COLORS.white};
+  display: inline-block;
+
+  > button > div > .remove > path {
+    fill: ${_styles.COLORS.white};
+  }
+
+  &:hover,
+  &:focus {
+    > button > div > .remove > path {
+      fill: ${_styles.COLORS.white};
+    }
+  }
+
+  button {
+    background: transparent;
+    display: inline-block;
+    padding: 0;
+    width: auto;
+    height: auto;
+    color: inherit;
+
+    div {
+      color: inherit;
+      width: auto;
+      height: auto;
+
+      svg {
+        color: inherit;
+      }
+    }
+
+    &:hover,
+    &:hover:not(:disabled),
+    :focus,
+    :focus:not(:disabled) {
+      background: transparent;
+      display: inline-block;
+      padding: 0;
+      width: auto;
+      height: auto;
+      color: inherit;
+      outline: none;
+
+      div {
+        box-shadow: none;
+        background-color: transparent;
+
+        svg {
+          color: inherit;
+        }
+      }
+    }
+  }
+
+  &.small {
+    ${(0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.white)}
+    border-radius: 40px;
+    height: 24px;
+    padding: 0px 12px;
+    margin: 12px 0px;
+    border-radius: 40px;
+    display: inline-flex;
+    align-items: center;
+
+    &.icon-chip {
+      padding: 0px 12px 0px 8px;
+    }
+
+    &.button-chip {
+      padding: 0px 8px 0px 12px;
+    }
+
+    &.icon-chip.button-chip {
+      padding: 0px 8px;
+    }
+
+    > button {
+      width: 16px;
+      height: 16px;
+
+      > div {
+        width: 16px;
+        height: 16px;
+
+        svg {
+          padding: 0px;
+          margin-left: 4x;
+        }
+      }
+    }
+
+    svg {
+      vertical-align: middle;
+
+      &.icon {
+        margin-right: 4px;
+      }
+
+      &.remove {
+        margin-left: 4px;
+      }
+    }
+  }
+
+  &.medium {
+    ${(0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.white)}
+    border-radius: 80px;
+    height: 40px;
+    padding: 0px 16px;
+    margin: 4px 0px;
+    display: inline-flex;
+    align-items: center;
+
+    &.icon-chip {
+      padding: 0px 16px 0px 12px;
+    }
+
+    &.button-chip {
+      padding: 0px 12px 0px 16px;
+    }
+
+    &.icon-chip.button-chip {
+      padding: 0px 12px;
+    }
+
+    > button {
+      width: 20px;
+      height: 20px;
+
+      > div {
+        width: 20px;
+        height: 20px;
+
+        svg {
+          padding: 0px;
+          margin-left: 6px;
+        }
+      }
+    }
+
+    svg {
+      vertical-align: middle;
+
+      &.icon {
+        margin-right: 6px;
+      }
+
+      &.remove {
+        margin-left: 6px;
+      }
+    }
+  }
+
+  &.large {
+    ${(0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.white)}
+    border-radius: 120px;
+    height: 56px;
+    padding: 0px 20px;
+    margin: 0px;
+    display: inline-flex;
+    align-items: center;
+
+    &.icon-chip {
+      padding: 0px 20px 0px 16px;
+    }
+
+    &.button-chip {
+      padding: 0px 16px 0px 20px;
+    }
+
+    &.icon-chip.button-chip {
+      padding: 0px 16px;
+    }
+
+    > button {
+      width: 24px;
+      height: 24px;
+
+      > div {
+        width: 24px;
+        height: 24px;
+
+        svg {
+          padding: 0px;
+          margin-left: 8px;
+        }
+      }
+    }
+
+    svg {
+      vertical-align: middle;
+
+      &.icon {
+        margin-right: 8px;
+      }
+
+      &.remove {
+        margin-left: 8px;
+      }
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    background: ${_styles.COLORS.neutral_100};
+    color: ${_styles.COLORS.neutral_300};
+
+    > button > div > .remove > path {
+      fill: ${_styles.COLORS.neutral_300};
+    }
+
+    &:hover {
+      background: ${_styles.COLORS.neutral_100};
+    }
+
+    &:active {
+      background: ${_styles.COLORS.neutral_100};
+    }
+  }
+
+  &.normal {
+    background: ${_styles.COLORS.primary_500};
+
+    &:hover {
+      background: ${_styles.COLORS.primary_700};
+    }
+
+    &:active {
+      background: ${_styles.COLORS.primary_800};
+    }
+  }
+
+  &.warning {
+    color: ${_styles.COLORS.black};
+    background: ${_styles.COLORS.warning_100};
+
+    > button > div > .remove > path {
+      fill: ${_styles.COLORS.warning_500};
+    }
+
+    &:hover {
+      background: ${_styles.COLORS.warning_400};
+    }
+
+    &:active {
+      background: ${_styles.COLORS.warning_400};
+    }
+  }
+
+  &.error {
+    color: ${_styles.COLORS.black};
+    background: ${_styles.COLORS.critical_100};
+
+    > button > div > .remove > path {
+      fill: ${_styles.COLORS.critical_500};
+    }
+
+    &:hover {
+      background: ${_styles.COLORS.critical_400};
+    }
+
+    &:active {
+      background: ${_styles.COLORS.critical_400};
+    }
+  }
+`;
+  const ChipInputContainer = exports.ChipInputContainer = _styledComponents2.default.div`
+  min-height: 56px;
+  height: auto;
+  width: 100%;
+  border-radius: 4px;
+  border: 2px solid transparent;
+  box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.neutral_400};
+  background-color: #fff;
+  box-sizing: border-box;
+  padding: 16px 16px 8px 16px;
+  box-sizing: border-box;
+  width: 100%;
+  cursor: text;
+  outline: none;
+  border-radius: 4.5px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  ${(0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black)}
+  color: ${_styles.COLORS.black} !important;
+
+  &.warning,
+  &.warning:hover,
+  &.warning:focus {
+    -webkit-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.warning_500};
+    -moz-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.warning_500};
+    box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.warning_500};
+  }
+
+  &.error,
+  &.error:hover,
+  &.error:focus {
+    -webkit-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.critical_500};
+    -moz-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.critical_500};
+    box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.critical_500};
+  }
+
+  > div {
+    margin-right: 8px;
+    margin-bottom: 8px;
+  }
+
+  &.active {
+    -webkit-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.primary_800};
+    -moz-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.primary_800};
+    box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.primary_800};
+  }
+
+  &:hover {
+    -webkit-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.primary_700};
+    -moz-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.primary_700};
+    box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.primary_700};
+  }
+`;
+  const RequiredStar = exports.RequiredStar = _styledComponents2.default.span`
+  color: ${_styles.COLORS.critical_500};
+  font-size: 28px;
+  line-height: 12px;
+  float: right;
+  font-weight: 700;
+  position: relative;
+  top: 10px;
+`;
+  const FilterChipContainer = exports.FilterChipContainer = (0, _styledComponents2.default)(ChipContainer)`
+  &.normal {
+    background: ${_styles.COLORS.white};
+    color: ${_styles.COLORS.neutral_600};
+    border: 2px solid;
+    border-color: ${_styles.COLORS.neutral_200};
+
+    &:hover {
+      background: ${_styles.COLORS.primary_20};
+      color: ${_styles.COLORS.primary_600};
+      border-color: ${_styles.COLORS.primary_200};
+    }
+
+    &:active,
+    &:focus {
+      background: ${_styles.COLORS.primary_100};
+      color: ${_styles.COLORS.primary_800};
+      border-color: ${_styles.COLORS.primary_300};
+      box-shadow: 0px 4px 12px ${_styles.COLORS.focus_25}, 0px 0px 8px ${_styles.COLORS.focus} !important;
+      outline: none;
+    }
+  }
+
+  &.selected {
+    background: ${_styles.COLORS.primary_500};
+    color: ${_styles.COLORS.white};
+    border: 2px solid;
+    border-color: ${_styles.COLORS.primary_500};
+
+    &:hover {
+      background: ${_styles.COLORS.primary_700};
+      color: ${_styles.COLORS.white};
+      border-color: ${_styles.COLORS.primary_700};
+    }
+
+    &:active,
+    &:focus {
+      background: ${_styles.COLORS.primary_800};
+      color: ${_styles.COLORS.white};
+      border-color: ${_styles.COLORS.primary_800};
+      box-shadow: 0px 4px 12px ${_styles.COLORS.focus_25}, 0px 0px 8px ${_styles.COLORS.focus} !important;
+      outline: none;
+    }
+  }
+`;
+  const ActionChipContainer = exports.ActionChipContainer = (0, _styledComponents2.default)(ChipContainer)`
+  &.normal {
+    background: ${_styles.COLORS.white};
+    color: ${_styles.COLORS.neutral_600};
+    border: 2px solid;
+    border-color: ${_styles.COLORS.neutral_200};
+
+    &:hover {
+      background: ${_styles.COLORS.primary_20};
+      color: ${_styles.COLORS.primary_600};
+      border-color: ${_styles.COLORS.primary_200};
+    }
+
+    &:active,
+    &:focus {
+      background: ${_styles.COLORS.primary_100};
+      color: ${_styles.COLORS.primary_800};
+      border-color: ${_styles.COLORS.primary_300};
+      box-shadow: 0px 4px 12px ${_styles.COLORS.focus_25}, 0px 0px 8px ${_styles.COLORS.focus} !important;
+    }
+  }
+`;
+  const ChipInputEl = exports.ChipInputEl = _styledComponents2.default.input`
+  height: 40px;
+  width: auto;
+  display: inline-flex;
+  border: none;
+  outline: none;
+  margin-top: 5px;
+  margin-bottom: 8px;
+
+  ${(0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black)}
+  color: ${_styles.COLORS.black} !important;
+`;
+});
+//# sourceMappingURL=ChipStyles.js.map

package/dist/umd/Chips/ChipStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Chips/ChipStyles.ts"],"names":["ChipContainer","styled","div","COLORS","white","ComponentXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","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","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;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACO,QAAMA,aAAa,WAAbA,aAAa,GAAGC,2BAAOC,GAAI;AACxC;AACA,WAAWC,eAAOC,KAAM;AACxB;AACA;AACA;AACA,YAAYD,eAAOC,KAAM;AACzB;AACA;AACA;AACA;AACA;AACA,cAAcD,eAAOC,KAAM;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,oCAAmBC,+BAAD,IAAlBD,EAA4CF,eAA1B,KAAlBE,CAA0D;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,mCAAkBD,+BAAD,IAAjBC,EAA2CJ,eAA1B,KAAjBI,CAAyD;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,mCAAkBF,+BAAD,IAAjBE,EAA2CL,eAA1B,KAAjBK,CAAyD;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBL,eAAOM,WAAY;AACrC,aAAaN,eAAOO,WAAY;AAChC;AACA;AACA,cAAcP,eAAOO,WAAY;AACjC;AACA;AACA;AACA,oBAAoBP,eAAOM,WAAY;AACvC;AACA;AACA;AACA,oBAAoBN,eAAOM,WAAY;AACvC;AACA;AACA;AACA;AACA,kBAAkBN,eAAOQ,WAAY;AACrC;AACA;AACA,oBAAoBR,eAAOS,WAAY;AACvC;AACA;AACA;AACA,oBAAoBT,eAAOU,WAAY;AACvC;AACA;AACA;AACA;AACA,aAAaV,eAAOW,KAAM;AAC1B,kBAAkBX,eAAOY,WAAY;AACrC;AACA;AACA,cAAcZ,eAAOa,WAAY;AACjC;AACA;AACA;AACA,oBAAoBb,eAAOc,WAAY;AACvC;AACA;AACA;AACA,oBAAoBd,eAAOc,WAAY;AACvC;AACA;AACA;AACA;AACA,aAAad,eAAOW,KAAM;AAC1B,kBAAkBX,eAAOe,YAAa;AACtC;AACA;AACA,cAAcf,eAAOgB,YAAa;AAClC;AACA;AACA;AACA,oBAAoBhB,eAAOiB,YAAa;AACxC;AACA;AACA;AACA,oBAAoBjB,eAAOiB,YAAa;AACxC;AACA;AA3QO,CAAA;AA8QA,QAAMC,kBAAkB,WAAlBA,kBAAkB,GAAGpB,2BAAOC,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA,sCAAsCC,eAAOmB,WAAY;AACzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAId,mCAAkBF,+BAAD,OAAjBE,EAA8CL,eAA7B,KAAjBK,CAA4D;AAChE,WAAWL,eAAOW,KAAM;AACxB;AACA;AACA;AACA;AACA,gDAAgDX,eAAOa,WAAY;AACnE,6CAA6Cb,eAAOa,WAAY;AAChE,wCAAwCb,eAAOa,WAAY;AAC3D;AACA;AACA;AACA;AACA;AACA,gDAAgDb,eAAOgB,YAAa;AACpE,6CAA6ChB,eAAOgB,YAAa;AACjE,wCAAwChB,eAAOgB,YAAa;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gDAAgDhB,eAAOU,WAAY;AACnE,6CAA6CV,eAAOU,WAAY;AAChE,wCAAwCV,eAAOU,WAAY;AAC3D;AACA;AACA;AACA,gDAAgDV,eAAOS,WAAY;AACnE,6CAA6CT,eAAOS,WAAY;AAChE,wCAAwCT,eAAOS,WAAY;AAC3D;AArDO,CAAA;AAwDA,QAAMW,YAAY,WAAZA,YAAY,GAAGtB,2BAAOuB,IAAK;AACxC,WAAWrB,eAAOgB,YAAa;AAC/B;AACA;AACA;AACA;AACA;AACA;AAPO,CAAA;AAUA,QAAMM,mBAAmB,WAAnBA,mBAAmB,GAAGxB,gCAAM,aAANA,CAAsB;AACzD;AACA,kBAAkBE,eAAOC,KAAM;AAC/B,aAAaD,eAAOuB,WAAY;AAChC;AACA,oBAAoBvB,eAAOwB,WAAY;AACvC;AACA;AACA,oBAAoBxB,eAAOyB,UAAW;AACtC,eAAezB,eAAO0B,WAAY;AAClC,sBAAsB1B,eAAO2B,WAAY;AACzC;AACA;AACA;AACA;AACA,oBAAoB3B,eAAO4B,WAAY;AACvC,eAAe5B,eAAOU,WAAY;AAClC,sBAAsBV,eAAO6B,WAAY;AACzC,iCAAiC7B,eAAO8B,QAAS,iBAAgB9B,eAAO+B,KAAM;AAC9E;AACA;AACA;AACA;AACA;AACA,kBAAkB/B,eAAOQ,WAAY;AACrC,aAAaR,eAAOC,KAAM;AAC1B;AACA,oBAAoBD,eAAOQ,WAAY;AACvC;AACA;AACA,oBAAoBR,eAAOS,WAAY;AACvC,eAAeT,eAAOC,KAAM;AAC5B,sBAAsBD,eAAOS,WAAY;AACzC;AACA;AACA;AACA;AACA,oBAAoBT,eAAOU,WAAY;AACvC,eAAeV,eAAOC,KAAM;AAC5B,sBAAsBD,eAAOU,WAAY;AACzC,iCAAiCV,eAAO8B,QAAS,iBAAgB9B,eAAO+B,KAAM;AAC9E;AACA;AACA;AA3CO,CAAA;AA8CA,QAAMC,mBAAmB,WAAnBA,mBAAmB,GAAGlC,gCAAM,aAANA,CAAsB;AACzD;AACA,kBAAkBE,eAAOC,KAAM;AAC/B,aAAaD,eAAOuB,WAAY;AAChC;AACA,oBAAoBvB,eAAOwB,WAAY;AACvC;AACA;AACA,oBAAoBxB,eAAOyB,UAAW;AACtC,eAAezB,eAAO0B,WAAY;AAClC,sBAAsB1B,eAAO2B,WAAY;AACzC;AACA;AACA;AACA;AACA,oBAAoB3B,eAAO4B,WAAY;AACvC,eAAe5B,eAAOU,WAAY;AAClC,sBAAsBV,eAAO6B,WAAY;AACzC,iCAAiC7B,eAAO8B,QAAS,iBAAgB9B,eAAO+B,KAAM;AAC9E;AACA;AApBO,CAAA;AAuBA,QAAME,WAAW,WAAXA,WAAW,GAAGnC,2BAAOoC,KAAM;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI7B,mCAAkBF,+BAAD,OAAjBE,EAA8CL,eAA7B,KAAjBK,CAA4D;AAChE,WAAWL,eAAOW,KAAM;AAVjB,CAAA","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/umd/Chips/ChipTypes.js

@@ -0,0 +1,20 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+});
+//# sourceMappingURL=ChipTypes.js.map

package/dist/umd/Chips/ChipTypes.js.map

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

package/dist/umd/Chips/ChoiceChips.js

@@ -0,0 +1,134 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "./ChipStyles"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("./ChipStyles"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.ChipStyles);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _react, _ChipStyles) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var React = _interopRequireWildcard(_react);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (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.
+   */
+
+  /**
+   * Import custom types.
+   */
+  const ChoiceChips = ({
+    selected,
+    variant,
+    disabled,
+    onClick,
+    values
+  }) => {
+    /**
+     * Globally used variables within the component.
+     */
+    const [selectedChip, setSelectedChip] = React.useState('');
+    /**
+     * Set the selected value for the chip.
+     */
+
+    React.useEffect(() => {
+      setSelectedChip(selected);
+    }, [selected]);
+    /**
+     * Sets selected chip and fires an event to parent component.
+     * @param value - Chip which was selected.
+     */
+
+    const onSelectChip = value => {
+      // Update selected chip
+      setSelectedChip(value.value); // Fire the event
+
+      onClick(value);
+    };
+
+    const handleKeyDown = (e, value) => {
+      if (e.keyCode === 13) {
+        onSelectChip(value);
+      }
+    };
+    /**
+     * Return Choice Chip component.
+     */
+
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, values.map(value => /*#__PURE__*/React.createElement(_ChipStyles.FilterChipContainer, {
+      key: value.value,
+      tabIndex: disabled ? -1 : 0,
+      className: `${value.size} ${disabled ? 'disabled' : selectedChip === value.value ? 'selected' : variant}`,
+      onClick: () => onSelectChip(value),
+      onKeyDown: e => handleKeyDown(e, value)
+    }, value.label)));
+  };
+
+  exports.default = ChoiceChips;
+});
+//# sourceMappingURL=ChoiceChips.js.map

package/dist/umd/Chips/ChoiceChips.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Chips/ChoiceChips.tsx"],"names":["ChoiceChips","values","React","setSelectedChip","onSelectChip","value","onClick","handleKeyDown","e","disabled","size","selectedChip","variant"],"mappings":";;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAGA,QAAMA,WAAqD,GAAG,CAAC;AAAA,IAAA,QAAA;AAAA,IAAA,OAAA;AAAA,IAAA,QAAA;AAAA,IAAA,OAAA;AAAwCC,IAAAA;AAAxC,GAAD,KAAuE;AACnI;AACF;AACA;AACE,UAAM,CAAA,YAAA,EAAA,eAAA,IAAkCC,KAAK,CAALA,QAAAA,CAAxC,EAAwCA,CAAxC;AAEA;AACF;AACA;;AACEA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpBC,MAAAA,eAAe,CAAfA,QAAe,CAAfA;AADFD,KAAAA,EAEG,CAFHA,QAEG,CAFHA;AAIA;AACF;AACA;AACA;;AACE,UAAME,YAAY,GAAIC,KAAD,IAAsB;AACzC;AACAF,MAAAA,eAAe,CAACE,KAAK,CAFoB,KAE1B,CAAfF,CAFyC,CAIzC;;AACAG,MAAAA,OAAO,CAAPA,KAAO,CAAPA;AALF,KAAA;;AAQA,UAAMC,aAAa,GAAG,CAAA,CAAA,EAAA,KAAA,KAA8B;AAClD,UAAIC,CAAC,CAADA,OAAAA,KAAJ,EAAA,EAAsB;AACpBJ,QAAAA,YAAY,CAAZA,KAAY,CAAZA;AACD;AAHH,KAAA;AAMA;AACF;AACA;;;AACE,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,MAAM,CAAN,GAAA,CAAYC,KAAD,IAAA,aACV,KAAA,CAAA,aAAA,CAAA,+BAAA,EAAA;AACE,MAAA,GAAG,EAAEA,KAAK,CADZ,KAAA;AAEE,MAAA,QAAQ,EAAEI,QAAQ,GAAG,CAAH,CAAA,GAFpB,CAAA;AAGE,MAAA,SAAS,EAAG,GAAEJ,KAAK,CAACK,IAAK,IAAGD,QAAQ,GAAA,UAAA,GAAgBE,YAAY,KAAKN,KAAK,CAAtBM,KAAAA,GAAAA,UAAAA,GAA4CC,OAHlG,EAAA;AAIE,MAAA,OAAO,EAAE,MAAMR,YAAY,CAJ7B,KAI6B,CAJ7B;AAKE,MAAA,SAAS,EAAEI,CAAC,IAAID,aAAa,CAAA,CAAA,EAAA,KAAA;AAL/B,KAAA,EAMGF,KAAK,CATd,KAGM,CADD,CADH,CADF;AAlCF,GAAA;;oBAkDA,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.js"}