@laerdal/life-react-components 3.5.2-uss.hackathon → 3.5.3

package/dist/umd/Chips/ChipInput.js

@@ -1,209 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "./index", "../types", "../InputFields/styling", "../styles", "../icons/systemicons/SystemIcons", "./ChipStyles"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("./index"), require("../types"), require("../InputFields/styling"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("./ChipStyles"));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, global.react, global.index, global.types, global.styling, global.styles, global.SystemIcons, global.ChipStyles);
-    global.undefined = mod.exports;
-  }
-})(this, function (exports, _react, _index, _types, _styling, _styles, _SystemIcons, _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 components.
-   */
-
-  /**
-   * Import custom styles.
-   */
-
-  /**
-   * Import custom types.
-   */
-  const ChipInput = ({
-    values,
-    inputId,
-    variants,
-    required,
-    icon,
-    placeholder,
-    validationType,
-    validationMessage,
-    onValueChange
-  }) => {
-    // Globally used variables within the chip input
-    let chipInput;
-    const [chips, setChips] = React.useState([]);
-    const [value, setValue] = React.useState('');
-    /**
-     * Sets initial values for the chips.
-     */
-
-    React.useEffect(() => {
-      // Let's add initial chip values
-      setChips(values);
-    }, [values]);
-    /**
-     * Adds a chip to the chip list.
-     * @param event - Event handler from the key down event.
-     */
-
-    const onAddChip = event => {
-      // Let's trigger only on enter, comma and space key press
-      if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {
-        // Let's prevent default action - adding new key to the value
-        event.preventDefault(); // Let's add the chip
-
-        setChips([...chips, value]);
-        onValueChange([...chips, value]); // Let's clear the old value
-
-        chipInput.value = '';
-        setValue('');
-      }
-    };
-    /**
-     * Removes a specific chip from the chip list.
-     * @param index - Index of the chip that needs to be removed.
-     * @param elementToAdd - Element which needs to be added in the deleted element place.
-     */
-
-
-    const onRemoveChip = (index, elementToAdd) => {
-      // Let's copy the chips
-      const newChips = [...chips]; // Let's delete the chip
-      // If necessary, let's replace it with a different chip
-
-      if (elementToAdd) {
-        newChips.splice(index, 1, elementToAdd);
-      } else {
-        newChips.splice(index, 1);
-      } // Let's update the chip list
-
-
-      setChips([...newChips]);
-      onValueChange([...newChips]);
-    };
-    /**
-     * Changes a status of the chip to edit.
-     * @param text - Text of the chip that is being edited.
-     * @param index - Index of the chip in the array.
-     */
-
-
-    const onEditChip = (text, index) => {
-      // Let's check if we have to add value as a chip (in case we have entered something in the input field)
-      if (chipInput.value !== '') {
-        // Let's replace the chip
-        onRemoveChip(index, chipInput.value);
-      } else {
-        // Let's just remove the chip
-        onRemoveChip(index);
-      } // Let's update the text value of input field
-
-
-      chipInput.value = text;
-      setValue(text);
-    };
-    /**
-     * Return Chip Input component.
-     */
-
-
-    return /*#__PURE__*/React.createElement(React.Fragment, null, required && /*#__PURE__*/React.createElement(_ChipStyles.RequiredStar, null, "*"), /*#__PURE__*/React.createElement(_ChipStyles.ChipInputContainer, {
-      onClick: () => chipInput.focus(),
-      id: inputId,
-      className: validationType
-    }, chips.map((chip, index) => /*#__PURE__*/React.createElement(_index.InputChip, {
-      icon: icon,
-      size: _types.Size.Medium,
-      variant: variants && variants.length && variants[index] ? variants[index] : 'normal',
-      text: chip,
-      onRemove: () => onRemoveChip(index),
-      onClick: () => onEditChip(chip, index),
-      key: `chip_${index}`
-    })), /*#__PURE__*/React.createElement(_ChipStyles.ChipInputEl, {
-      type: "text",
-      onChange: event => setValue(event.target.value),
-      onKeyDown: event => {
-        onAddChip(event);
-      },
-      placeholder: placeholder && chips.length === 0 ? placeholder : '',
-      ref: input => {
-        chipInput = input;
-      }
-    })), validationMessage && validationType === 'warning' ? /*#__PURE__*/React.createElement(_styling.WarningMessage, null, /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
-      size: "20px",
-      color: _styles.COLORS.critical_500
-    }), /*#__PURE__*/React.createElement("span", null, validationMessage)) : validationType === 'error' && /*#__PURE__*/React.createElement(_styling.ErrorMessage, null, /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
-      size: "20px",
-      color: _styles.COLORS.critical_400
-    }), /*#__PURE__*/React.createElement("span", null, validationMessage)));
-  };
-
-  exports.default = ChipInput;
-});
-//# sourceMappingURL=ChipInput.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Chips/ChipInput.tsx"],"names":["ChipInput","onValueChange","React","setChips","onAddChip","event","chipInput","setValue","onRemoveChip","newChips","onEditChip","required","validationType","Size","variants","index","placeholder","chips","input","validationMessage","COLORS","critical_500","critical_400"],"mappings":"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","sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport { InputChip } from './index';\r\nimport { Size } from '../types';\r\nimport { WarningMessage, ErrorMessage } from '../InputFields/styling';\r\nimport { COLORS } from '../styles';\r\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { ChipInputContainer, ChipInputEl, RequiredStar } from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport { ChipInputProps } from './ChipTypes';\r\n\r\nconst ChipInput: React.FunctionComponent<ChipInputProps> = ({\r\n  values,\r\n  inputId,\r\n  variants,\r\n  required,\r\n  icon,\r\n  placeholder,\r\n  validationType,\r\n  validationMessage,\r\n  onValueChange,\r\n}: ChipInputProps) => {\r\n  // Globally used variables within the chip input\r\n  let chipInput: HTMLInputElement;\r\n  const [chips, setChips] = React.useState<string[]>([]);\r\n  const [value, setValue] = React.useState<string>('');\r\n\r\n  /**\r\n   * Sets initial values for the chips.\r\n   */\r\n  React.useEffect(() => {\r\n    // Let's add initial chip values\r\n    setChips(values);\r\n  }, [values]);\r\n\r\n  /**\r\n   * Adds a chip to the chip list.\r\n   * @param event - Event handler from the key down event.\r\n   */\r\n  const onAddChip = (event: React.KeyboardEvent<HTMLInputElement>): void => {\r\n    // Let's trigger only on enter, comma and space key press\r\n    if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {\r\n      // Let's prevent default action - adding new key to the value\r\n      event.preventDefault();\r\n\r\n      // Let's add the chip\r\n      setChips([...chips, value]);\r\n      onValueChange([...chips, value]);\r\n\r\n      // Let's clear the old value\r\n      chipInput.value = '';\r\n      setValue('');\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Removes a specific chip from the chip list.\r\n   * @param index - Index of the chip that needs to be removed.\r\n   * @param elementToAdd - Element which needs to be added in the deleted element place.\r\n   */\r\n  const onRemoveChip = (index: number, elementToAdd?: string): void => {\r\n    // Let's copy the chips\r\n    const newChips = [...chips];\r\n\r\n    // Let's delete the chip\r\n    // If necessary, let's replace it with a different chip\r\n    if (elementToAdd) {\r\n      newChips.splice(index, 1, elementToAdd);\r\n    } else {\r\n      newChips.splice(index, 1);\r\n    }\r\n\r\n    // Let's update the chip list\r\n    setChips([...newChips]);\r\n    onValueChange([...newChips]);\r\n  };\r\n\r\n  /**\r\n   * Changes a status of the chip to edit.\r\n   * @param text - Text of the chip that is being edited.\r\n   * @param index - Index of the chip in the array.\r\n   */\r\n  const onEditChip = (text: string, index: number): void => {\r\n    // Let's check if we have to add value as a chip (in case we have entered something in the input field)\r\n    if (chipInput.value !== '') {\r\n      // Let's replace the chip\r\n      onRemoveChip(index, chipInput.value);\r\n    } else {\r\n      // Let's just remove the chip\r\n      onRemoveChip(index);\r\n    }\r\n\r\n    // Let's update the text value of input field\r\n    chipInput.value = text;\r\n    setValue(text);\r\n  };\r\n\r\n  /**\r\n   * Return Chip Input component.\r\n   */\r\n  return (\r\n    <>\r\n      {required && <RequiredStar>*</RequiredStar>}\r\n      <ChipInputContainer onClick={() => chipInput.focus()} id={inputId} className={validationType}>\r\n        {chips.map((chip: string, index: number) => (\r\n          <InputChip\r\n            icon={icon}\r\n            size={Size.Medium}\r\n            variant={variants && variants.length && variants[index] ? variants[index] : 'normal'}\r\n            text={chip}\r\n            onRemove={() => onRemoveChip(index)}\r\n            onClick={() => onEditChip(chip, index)}\r\n            key={`chip_${index}`}></InputChip>\r\n        ))}\r\n        <ChipInputEl\r\n          type=\"text\"\r\n          onChange={(event: React.ChangeEvent<HTMLInputElement>) => setValue(event.target.value)}\r\n          onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {\r\n            onAddChip(event);\r\n          }}\r\n          placeholder={placeholder && chips.length === 0 ? placeholder : ''}\r\n          ref={(input: HTMLInputElement) => {\r\n            chipInput = input;\r\n          }}\r\n        />\r\n      </ChipInputContainer>\r\n\r\n      {/* If there is an error, let's render the error */}\r\n      {validationMessage && validationType === 'warning' ? (\r\n        <WarningMessage>\r\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_500} />\r\n          <span>{validationMessage}</span>\r\n        </WarningMessage>\r\n      ) : (\r\n        validationType === 'error' && (\r\n          <ErrorMessage>\r\n            <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\r\n            <span>{validationMessage}</span>\r\n          </ErrorMessage>\r\n        )\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default ChipInput;\r\n"],"file":"ChipInput.js"}

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