@laerdal/life-react-components 1.4.0 → 1.4.1-dev.11

package/dist/umd/Chips/ChipStyles.js

@@ -1,454 +0,0 @@
-(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

@@ -1 +0,0 @@
-{"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

@@ -1,20 +0,0 @@
-(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

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

package/dist/umd/Chips/ChoiceChips.js

@@ -1,134 +0,0 @@
-(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

@@ -1 +0,0 @@
-{"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"}