diff --git a/src/components/Deselect.vue b/src/components/Deselect.vue
deleted file mode 100644
index 1c4dacf..0000000
--- a/src/components/Deselect.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
-    <path
-      d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z"
-    />
-  </svg>
-</template>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index c2ccd40..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest"
-          target="_blank"
-          rel="noopener"
-          >unit-jest</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-cypress"
-          target="_blank"
-          rel="noopener"
-          >e2e-cypress</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "HelloWorld",
-  props: {
-    msg: String
-  }
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/OpenIndicator.vue b/src/components/OpenIndicator.vue
deleted file mode 100644
index ae1e7d6..0000000
--- a/src/components/OpenIndicator.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="10">
-    <path
-      d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z"
-    />
-  </svg>
-</template>
diff --git a/src/components/Select.vue b/src/components/Select.vue
deleted file mode 100644
index 7a24694..0000000
--- a/src/components/Select.vue
+++ /dev/null
@@ -1,1150 +0,0 @@
-<template>
-
-</template>
-
-<script>
-
-/**
- * @name VueSelect
- */
-export default {
-  components: { ...childComponents },
-
-  mixins: [pointerScroll, typeAheadPointer, ajax],
-
-  directives: { appendToBody },
-
-  props: {
-    /**
-     * Contains the currently selected value. Very similar to a
-     * `value` attribute on an <input>. You can listen for changes
-     * using 'change' event using v-on
-     * @type {Object||String||null}
-     */
-    value: {},
-
-    /**
-     * An object with any custom components that you'd like to overwrite
-     * the default implementation of in your app. The keys in this object
-     * will be merged with the defaults.
-     * @see https://vue-select.org/guide/components.html
-     * @type {Function}
-     */
-    components: {
-      type: Object,
-      default: () => ({})
-    },
-
-    /**
-     * An array of strings or objects to be used as dropdown choices.
-     * If you are using an array of objects, vue-select will look for
-     * a `label` key (ex. [{label: 'This is Foo', value: 'foo'}]). A
-     * custom label key can be set with the `label` prop.
-     * @type {Array}
-     */
-    options: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
-
-    /**
-     * Disable the entire component.
-     * @type {Boolean}
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-
-    /**
-     * Can the user clear the selected property.
-     * @type {Boolean}
-     */
-    clearable: {
-      type: Boolean,
-      default: true
-    },
-
-    /**
-     * Enable/disable filtering the options.
-     * @type {Boolean}
-     */
-    searchable: {
-      type: Boolean,
-      default: true
-    },
-
-    /**
-     * Equivalent to the `multiple` attribute on a `<select>` input.
-     * @type {Boolean}
-     */
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-
-    /**
-     * Equivalent to the `placeholder` attribute on an `<input>`.
-     * @type {String}
-     */
-    placeholder: {
-      type: String,
-      default: ""
-    },
-
-    /**
-     * Sets a Vue transition property on the `.vs__dropdown-menu`.
-     * @type {String}
-     */
-    transition: {
-      type: String,
-      default: "vs__fade"
-    },
-
-    /**
-     * Enables/disables clearing the search text when an option is selected.
-     * @type {Boolean}
-     */
-    clearSearchOnSelect: {
-      type: Boolean,
-      default: true
-    },
-
-    /**
-     * Close a dropdown when an option is chosen. Set to false to keep the dropdown
-     * open (useful when combined with multi-select, for example)
-     * @type {Boolean}
-     */
-    closeOnSelect: {
-      type: Boolean,
-      default: true
-    },
-
-    /**
-     * Tells vue-select what key to use when generating option
-     * labels when each `option` is an object.
-     * @type {String}
-     */
-    label: {
-      type: String,
-      default: "label"
-    },
-
-    /**
-     * Value of the 'autocomplete' field of the input
-     * element.
-     * @type {String}
-     */
-    autocomplete: {
-      type: String,
-      default: "off"
-    },
-
-    /**
-     * When working with objects, the reduce
-     * prop allows you to transform a given
-     * object to only the information you
-     * want passed to a v-model binding
-     * or @input event.
-     */
-    reduce: {
-      type: Function,
-      default: option => option
-    },
-
-    /**
-     * Decides whether an option is selectable or not. Not selectable options
-     * are displayed but disabled and cannot be selected.
-     *
-     * @type {Function}
-     * @since 3.3.0
-     * @param {Object|String} option
-     * @return {Boolean}
-     */
-    selectable: {
-      type: Function,
-      default: option => true
-    },
-
-    /**
-     * Callback to generate the label text. If {option}
-     * is an object, returns option[this.label] by default.
-     *
-     * Label text is used for filtering comparison and
-     * displaying. If you only need to adjust the
-     * display, you should use the `option` and
-     * `selected-option` slots.
-     *
-     * @type {Function}
-     * @param  {Object || String} option
-     * @return {String}
-     */
-    getOptionLabel: {
-      type: Function,
-      default(option) {
-        if (typeof option === "object") {
-          if (!option.hasOwnProperty(this.label)) {
-            return console.warn(
-              `[vue-select warn]: Label key "option.${this.label}" does not` +
-                ` exist in options object ${JSON.stringify(option)}.\n` +
-                "https://vue-select.org/api/props.html#getoptionlabel"
-            );
-          }
-          return option[this.label];
-        }
-        return option;
-      }
-    },
-
-    /**
-     * Generate a unique identifier for each option. If `option`
-     * is an object and `option.hasOwnProperty('id')` exists,
-     * `option.id` is used by default, otherwise the option
-     * will be serialized to JSON.
-     *
-     * If you are supplying a lot of options, you should
-     * provide your own keys, as JSON.stringify can be
-     * slow with lots of objects.
-     *
-     * The result of this function *must* be unique.
-     *
-     * @type {Function}
-     * @param  {Object || String} option
-     * @return {String}
-     */
-    getOptionKey: {
-      type: Function,
-      default(option) {
-        if (typeof option !== "object") {
-          return option;
-        }
-
-        try {
-          return option.hasOwnProperty("id")
-            ? option.id
-            : sortAndStringify(option);
-        } catch (e) {
-          const warning =
-            `[vue-select warn]: Could not stringify this option ` +
-            `to generate unique key. Please provide'getOptionKey' prop ` +
-            `to return a unique key for each option.\n` +
-            "https://vue-select.org/api/props.html#getoptionkey";
-          return console.warn(warning, option, e);
-        }
-      }
-    },
-
-    /**
-     * Select the current value if selectOnTab is enabled
-     * @deprecated since 3.3
-     */
-    onTab: {
-      type: Function,
-      default: function() {
-        if (this.selectOnTab && !this.isComposing) {
-          this.typeAheadSelect();
-        }
-      }
-    },
-
-    /**
-     * Enable/disable creating options from searchEl.
-     * @type {Boolean}
-     */
-    taggable: {
-      type: Boolean,
-      default: false
-    },
-
-    /**
-     * Set the tabindex for the input field.
-     * @type {Number}
-     */
-    tabindex: {
-      type: Number,
-      default: null
-    },
-
-    /**
-     * When true, newly created tags will be added to
-     * the options list.
-     * @type {Boolean}
-     */
-    pushTags: {
-      type: Boolean,
-      default: false
-    },
-
-    /**
-     * When true, existing options will be filtered
-     * by the search text. Should not be used in conjunction
-     * with taggable.
-     * @type {Boolean}
-     */
-    filterable: {
-      type: Boolean,
-      default: true
-    },
-
-    /**
-     * Callback to determine if the provided option should
-     * match the current search text. Used to determine
-     * if the option should be displayed.
-     * @type   {Function}
-     * @param  {Object || String} option
-     * @param  {String} label
-     * @param  {String} search
-     * @return {Boolean}
-     */
-    filterBy: {
-      type: Function,
-      default(option, label, search) {
-        return (label || "").toLowerCase().indexOf(search.toLowerCase()) > -1;
-      }
-    },
-
-    /**
-     * Callback to filter results when search text
-     * is provided. Default implementation loops
-     * each option, and returns the result of
-     * this.filterBy.
-     * @type   {Function}
-     * @param  {Array} list of options
-     * @param  {String} search text
-     * @param  {Object} vSelect instance
-     * @return {Boolean}
-     */
-    filter: {
-      type: Function,
-      default(options, search) {
-        return options.filter(option => {
-          let label = this.getOptionLabel(option);
-          if (typeof label === "number") {
-            label = label.toString();
-          }
-          return this.filterBy(option, label, search);
-        });
-      }
-    },
-
-    /**
-     * User defined function for adding Options
-     * @type {Function}
-     */
-    createOption: {
-      type: Function,
-      default(option) {
-        return typeof this.optionList[0] === "object"
-          ? { [this.label]: option }
-          : option;
-      }
-    },
-
-    /**
-     * When false, updating the options will not reset the selected value. Accepts
-     * a `boolean` or `function` that returns a `boolean`. If defined as a function,
-     * it will receive the params listed below.
-     *
-     * @since 3.4 - Type changed to {Boolean|Function}
-     *
-     * @type {Boolean|Function}
-     * @param {Array} newOptions
-     * @param {Array} oldOptions
-     * @param {Array} selectedValue
-     */
-    resetOnOptionsChange: {
-      default: false,
-      validator: value => ["function", "boolean"].includes(typeof value)
-    },
-
-    /**
-     * If search text should clear on blur
-     * @return {Boolean} True when single and clearSearchOnSelect
-     */
-    clearSearchOnBlur: {
-      type: Function,
-      default: function({ clearSearchOnSelect, multiple }) {
-        return clearSearchOnSelect && !multiple;
-      }
-    },
-
-    /**
-     * Disable the dropdown entirely.
-     * @type {Boolean}
-     */
-    noDrop: {
-      type: Boolean,
-      default: false
-    },
-
-    /**
-     * Sets the id of the input element.
-     * @type {String}
-     * @default {null}
-     */
-    inputId: {
-      type: String
-    },
-
-    /**
-     * Sets RTL support. Accepts 'ltr', 'rtl', 'auto'.
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir
-     * @type {String}
-     * @default 'auto'
-     */
-    dir: {
-      type: String,
-      default: "auto"
-    },
-
-    /**
-     * When true, hitting the 'tab' key will select the current select value
-     * @type {Boolean}
-     * @deprecated since 3.3 - use selectOnKeyCodes instead
-     */
-    selectOnTab: {
-      type: Boolean,
-      default: false
-    },
-
-    /**
-     * Keycodes that will select the current option.
-     * @type Array
-     */
-    selectOnKeyCodes: {
-      type: Array,
-      default: () => [13]
-    },
-
-    /**
-     * Query Selector used to find the search input
-     * when the 'search' scoped slot is used.
-     *
-     * Must be a valid CSS selector string.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
-     * @type {String}
-     */
-    searchInputQuerySelector: {
-      type: String,
-      default: "[type=search]"
-    },
-
-    /**
-     * Used to modify the default keydown events map
-     * for the search input. Can be used to implement
-     * custom behaviour for key presses.
-     */
-    mapKeydown: {
-      type: Function,
-      /**
-       * @param map {Object}
-       * @param vm {VueSelect}
-       * @return {Object}
-       */
-      default: (map, vm) => map
-    },
-
-    /**
-     * Append the dropdown element to the end of the body
-     * and size/position it dynamically. Use it if you have
-     * overflow or z-index issues.
-     * @type {Boolean}
-     */
-    appendToBody: {
-      type: Boolean,
-      default: false
-    },
-
-    /**
-     * When `appendToBody` is true, this function is responsible for
-     * positioning the drop down list.
-     *
-     * If a function is returned from `calculatePosition`, it will
-     * be called when the drop down list is removed from the DOM.
-     * This allows for any garbage collection you may need to do.
-     *
-     * @since v3.7.0
-     * @see http://vue-select.org/guide/positioning.html
-     */
-    calculatePosition: {
-      type: Function,
-      /**
-       * @param dropdownList {HTMLUListElement}
-       * @param component {Vue} current instance of vue select
-       * @param width {string} calculated width in pixels of the dropdown menu
-       * @param top {string} absolute position top value in pixels relative to the document
-       * @param left {string} absolute position left value in pixels relative to the document
-       * @return {function|void}
-       */
-      default(dropdownList, component, { width, top, left }) {
-        dropdownList.style.top = top;
-        dropdownList.style.left = left;
-        dropdownList.style.width = width;
-      }
-    }
-  },
-
-  data() {
-    return {
-      uid: uniqueId(),
-      search: "",
-      open: false,
-      isComposing: false,
-      pushedTags: [],
-      _value: [] // Internal value managed by Vue Select if no `value` prop is passed
-    };
-  },
-
-  watch: {
-    /**
-     * Maybe reset the value
-     * when options change.
-     * Make sure selected option
-     * is correct.
-     * @return {[type]} [description]
-     */
-    options(newOptions, oldOptions) {
-      let shouldReset = () =>
-        typeof this.resetOnOptionsChange === "function"
-          ? this.resetOnOptionsChange(
-              newOptions,
-              oldOptions,
-              this.selectedValue
-            )
-          : this.resetOnOptionsChange;
-
-      if (!this.taggable && shouldReset()) {
-        this.clearSelection();
-      }
-
-      if (this.value && this.isTrackingValues) {
-        this.setInternalValueFromOptions(this.value);
-      }
-    },
-
-    /**
-     * Make sure to update internal
-     * value if prop changes outside
-     */
-    value(val) {
-      if (this.isTrackingValues) {
-        this.setInternalValueFromOptions(val);
-      }
-    },
-
-    /**
-     * Always reset the value when
-     * the multiple prop changes.
-     * @param  {Boolean} isMultiple
-     * @return {void}
-     */
-    multiple() {
-      this.clearSelection();
-    },
-
-    open(isOpen) {
-      this.$emit(isOpen ? "open" : "close");
-    }
-  },
-
-  created() {
-    this.mutableLoading = this.loading;
-
-    if (typeof this.value !== "undefined" && this.isTrackingValues) {
-      this.setInternalValueFromOptions(this.value);
-    }
-
-    this.$on("option:created", this.pushTag);
-  },
-
-  methods: {
-    /**
-     * Make sure tracked value is
-     * one option if possible.
-     * @param  {Object|String} value
-     * @return {void}
-     */
-    setInternalValueFromOptions(value) {
-      if (Array.isArray(value)) {
-        this.$data._value = value.map(val =>
-          this.findOptionFromReducedValue(val)
-        );
-      } else {
-        this.$data._value = this.findOptionFromReducedValue(value);
-      }
-    },
-
-    /**
-     * Select a given option.
-     * @param  {Object|String} option
-     * @return {void}
-     */
-    select(option) {
-      this.$emit("option:selecting", option);
-      if (!this.isOptionSelected(option)) {
-        if (this.taggable && !this.optionExists(option)) {
-          this.$emit("option:created", option);
-        }
-        if (this.multiple) {
-          option = this.selectedValue.concat(option);
-        }
-        this.updateValue(option);
-        this.$emit("option:selected", option);
-      }
-      this.onAfterSelect(option);
-    },
-
-    /**
-     * De-select a given option.
-     * @param  {Object|String} option
-     * @return {void}
-     */
-    deselect(option) {
-      this.$emit("option:deselecting", option);
-      this.updateValue(
-        this.selectedValue.filter(val => {
-          return !this.optionComparator(val, option);
-        })
-      );
-      this.$emit("option:deselected", option);
-    },
-
-    /**
-     * Clears the currently selected value(s)
-     * @return {void}
-     */
-    clearSelection() {
-      this.updateValue(this.multiple ? [] : null);
-    },
-
-    /**
-     * Called from this.select after each selection.
-     * @param  {Object|String} option
-     * @return {void}
-     */
-    onAfterSelect(option) {
-      if (this.closeOnSelect) {
-        this.open = !this.open;
-        this.searchEl.blur();
-      }
-
-      if (this.clearSearchOnSelect) {
-        this.search = "";
-      }
-    },
-
-    /**
-     * Accepts a selected value, updates local
-     * state when required, and triggers the
-     * input event.
-     *
-     * @emits input
-     * @param value
-     */
-    updateValue(value) {
-      if (typeof this.value === "undefined") {
-        // Vue select has to manage value
-        this.$data._value = value;
-      }
-
-      if (value !== null) {
-        if (Array.isArray(value)) {
-          value = value.map(val => this.reduce(val));
-        } else {
-          value = this.reduce(value);
-        }
-      }
-
-      this.$emit("input", value);
-    },
-
-    /**
-     * Toggle the visibility of the dropdown menu.
-     * @param  {Event} event
-     * @return {void}
-     */
-    toggleDropdown(event) {
-      const targetIsNotSearch = event.target !== this.searchEl;
-      if (targetIsNotSearch) {
-        event.preventDefault();
-      }
-
-      //  don't react to click on deselect/clear buttons,
-      //  they dropdown state will be set in their click handlers
-      const ignoredButtons = [
-        ...(this.$refs["deselectButtons"] || []),
-        ...([this.$refs["clearButton"]] || [])
-      ];
-
-      if (
-        this.searchEl === undefined ||
-        ignoredButtons
-          .filter(Boolean)
-          .some(ref => ref.contains(event.target) || ref === event.target)
-      ) {
-        event.preventDefault();
-        return;
-      }
-
-      if (this.open && targetIsNotSearch) {
-        this.searchEl.blur();
-      } else if (!this.disabled) {
-        this.open = true;
-        this.searchEl.focus();
-      }
-    },
-
-    /**
-     * Check if the given option is currently selected.
-     * @param  {Object|String}  option
-     * @return {Boolean}        True when selected | False otherwise
-     */
-    isOptionSelected(option) {
-      return this.selectedValue.some(value =>
-        this.optionComparator(value, option)
-      );
-    },
-
-    /**
-     * Determine if two option objects are matching.
-     *
-     * @param a {Object}
-     * @param b {Object}
-     * @returns {boolean}
-     */
-    optionComparator(a, b) {
-      return this.getOptionKey(a) === this.getOptionKey(b);
-    },
-
-    /**
-     * Finds an option from the options
-     * where a reduced value matches
-     * the passed in value.
-     *
-     * @param value {Object}
-     * @returns {*}
-     */
-    findOptionFromReducedValue(value) {
-      const predicate = option =>
-        JSON.stringify(this.reduce(option)) === JSON.stringify(value);
-
-      const matches = [...this.options, ...this.pushedTags].filter(predicate);
-
-      if (matches.length === 1) {
-        return matches[0];
-      }
-
-      /**
-       * This second loop is needed to cover an edge case where `taggable` + `reduce`
-       * were used in conjunction with a `create-option` that doesn't create a
-       * unique reduced value.
-       * @see https://github.com/sagalbot/vue-select/issues/1089#issuecomment-597238735
-       */
-      return (
-        matches.find(match =>
-          this.optionComparator(match, this.$data._value)
-        ) || value
-      );
-    },
-
-    /**
-     * 'Private' function to close the search options
-     * @emits  {search:blur}
-     * @returns {void}
-     */
-    closeSearchOptions() {
-      this.open = false;
-      this.$emit("search:blur");
-    },
-
-    /**
-     * Delete the value on Delete keypress when there is no
-     * text in the search input, & there's tags to delete
-     * @return {this.value}
-     */
-    maybeDeleteValue() {
-      if (
-        !this.searchEl.value.length &&
-        this.selectedValue &&
-        this.selectedValue.length &&
-        this.clearable
-      ) {
-        let value = null;
-        if (this.multiple) {
-          value = [
-            ...this.selectedValue.slice(0, this.selectedValue.length - 1)
-          ];
-        }
-        this.updateValue(value);
-      }
-    },
-
-    /**
-     * Determine if an option exists
-     * within this.optionList array.
-     *
-     * @param  {Object || String} option
-     * @return {boolean}
-     */
-    optionExists(option) {
-      return this.optionList.some(_option =>
-        this.optionComparator(_option, option)
-      );
-    },
-
-    /**
-     * Ensures that options are always
-     * passed as objects to scoped slots.
-     * @param option
-     * @return {*}
-     */
-    normalizeOptionForSlot(option) {
-      return typeof option === "object" ? option : { [this.label]: option };
-    },
-
-    /**
-     * If push-tags is true, push the
-     * given option to `this.pushedTags`.
-     *
-     * @param  {Object || String} option
-     * @return {void}
-     */
-    pushTag(option) {
-      this.pushedTags.push(option);
-    },
-
-    /**
-     * If there is any text in the search input, remove it.
-     * Otherwise, blur the search input to close the dropdown.
-     * @return {void}
-     */
-    onEscape() {
-      if (!this.search.length) {
-        this.searchEl.blur();
-      } else {
-        this.search = "";
-      }
-    },
-
-    /**
-     * Close the dropdown on blur.
-     * @emits  {search:blur}
-     * @return {void}
-     */
-    onSearchBlur() {
-      if (this.mousedown && !this.searching) {
-        this.mousedown = false;
-      } else {
-        const { clearSearchOnSelect, multiple } = this;
-        if (this.clearSearchOnBlur({ clearSearchOnSelect, multiple })) {
-          this.search = "";
-        }
-        this.closeSearchOptions();
-        return;
-      }
-      // Fixed bug where no-options message could not be closed
-      if (this.search.length === 0 && this.options.length === 0) {
-        this.closeSearchOptions();
-        return;
-      }
-    },
-
-    /**
-     * Open the dropdown on focus.
-     * @emits  {search:focus}
-     * @return {void}
-     */
-    onSearchFocus() {
-      this.open = true;
-      this.$emit("search:focus");
-    },
-
-    /**
-     * Event-Handler to help workaround IE11 (probably fixes 10 as well)
-     * firing a `blur` event when clicking
-     * the dropdown's scrollbar, causing it
-     * to collapse abruptly.
-     * @see https://github.com/sagalbot/vue-select/issues/106
-     * @return {void}
-     */
-    onMousedown() {
-      this.mousedown = true;
-    },
-
-    /**
-     * Event-Handler to help workaround IE11 (probably fixes 10 as well)
-     * @see https://github.com/sagalbot/vue-select/issues/106
-     * @return {void}
-     */
-    onMouseUp() {
-      this.mousedown = false;
-    },
-
-    /**
-     * Search <input> KeyBoardEvent handler.
-     * @param e {KeyboardEvent}
-     * @return {Function}
-     */
-    onSearchKeyDown(e) {
-      const preventAndSelect = e => {
-        e.preventDefault();
-        return !this.isComposing && this.typeAheadSelect();
-      };
-
-      const defaults = {
-        //  backspace
-        8: e => this.maybeDeleteValue(),
-        //  tab
-        9: e => this.onTab(),
-        //  esc
-        27: e => this.onEscape(),
-        //  up.prevent
-        38: e => {
-          e.preventDefault();
-          return this.typeAheadUp();
-        },
-        //  down.prevent
-        40: e => {
-          e.preventDefault();
-          return this.typeAheadDown();
-        }
-      };
-
-      this.selectOnKeyCodes.forEach(
-        keyCode => (defaults[keyCode] = preventAndSelect)
-      );
-
-      const handlers = this.mapKeydown(defaults, this);
-
-      if (typeof handlers[e.keyCode] === "function") {
-        return handlers[e.keyCode](e);
-      }
-    }
-  },
-
-  computed: {
-    /**
-     * Determine if the component needs to
-     * track the state of values internally.
-     * @return {boolean}
-     */
-    isTrackingValues() {
-      return (
-        typeof this.value === "undefined" ||
-        this.$options.propsData.hasOwnProperty("reduce")
-      );
-    },
-
-    /**
-     * The options that are currently selected.
-     * @return {Array}
-     */
-    selectedValue() {
-      let value = this.value;
-      if (this.isTrackingValues) {
-        // Vue select has to manage value internally
-        value = this.$data._value;
-      }
-
-      if (value) {
-        return [].concat(value);
-      }
-
-      return [];
-    },
-
-    /**
-     * The options available to be chosen
-     * from the dropdown, including any
-     * tags that have been pushed.
-     *
-     * @return {Array}
-     */
-    optionList() {
-      return this.options.concat(this.pushTags ? this.pushedTags : []);
-    },
-
-    /**
-     * Find the search input DOM element.
-     * @returns {HTMLInputElement}
-     */
-    searchEl() {
-      return this.$slots["search"]
-        ? this.$refs.selectedOptions.querySelector(
-            this.searchInputQuerySelector
-          )
-        : this.$refs.search;
-    },
-
-    /**
-     * The object to be bound to the $slots.search scoped slot.
-     * @returns {Object}
-     */
-    scope() {
-      const listSlot = {
-        search: this.search,
-        loading: this.loading,
-        searching: this.searching,
-        filteredOptions: this.filteredOptions
-      };
-      return {
-        search: {
-          attributes: {
-            disabled: this.disabled,
-            placeholder: this.searchPlaceholder,
-            tabindex: this.tabindex,
-            readonly: !this.searchable,
-            id: this.inputId,
-            "aria-autocomplete": "list",
-            "aria-labelledby": `vs${this.uid}__combobox`,
-            "aria-controls": `vs${this.uid}__listbox`,
-            ref: "search",
-            type: "search",
-            autocomplete: this.autocomplete,
-            value: this.search,
-            ...(this.dropdownOpen && this.filteredOptions[this.typeAheadPointer]
-              ? {
-                  "aria-activedescendant": `vs${this.uid}__option-${this.typeAheadPointer}`
-                }
-              : {})
-          },
-          events: {
-            compositionstart: () => (this.isComposing = true),
-            compositionend: () => (this.isComposing = false),
-            keydown: this.onSearchKeyDown,
-            blur: this.onSearchBlur,
-            focus: this.onSearchFocus,
-            input: e => (this.search = e.target.value)
-          }
-        },
-        spinner: {
-          loading: this.mutableLoading
-        },
-        noOptions: {
-          search: this.search,
-          loading: this.loading,
-          searching: this.searching
-        },
-        openIndicator: {
-          attributes: {
-            ref: "openIndicator",
-            role: "presentation",
-            class: "vs__open-indicator"
-          }
-        },
-        listHeader: listSlot,
-        listFooter: listSlot,
-        header: { ...listSlot, deselect: this.deselect },
-        footer: { ...listSlot, deselect: this.deselect }
-      };
-    },
-
-    /**
-     * Returns an object containing the child components
-     * that will be used throughout the component. The
-     * `component` prop can be used to overwrite the defaults.
-     *
-     * @return {Object}
-     */
-    childComponents() {
-      return {
-        ...childComponents,
-        ...this.components
-      };
-    },
-
-    /**
-     * Holds the current state of the component.
-     * @return {Object}
-     */
-    stateClasses() {
-      return {
-        "vs--open": this.dropdownOpen,
-        "vs--single": !this.multiple,
-        "vs--searching": this.searching && !this.noDrop,
-        "vs--searchable": this.searchable && !this.noDrop,
-        "vs--unsearchable": !this.searchable,
-        "vs--loading": this.mutableLoading,
-        "vs--disabled": this.disabled
-      };
-    },
-
-    /**
-     * Return the current state of the
-     * search input
-     * @return {Boolean} True if non empty value
-     */
-    searching() {
-      return !!this.search;
-    },
-
-    /**
-     * Return the current state of the
-     * dropdown menu.
-     * @return {Boolean} True if open
-     */
-    dropdownOpen() {
-      return this.noDrop ? false : this.open && !this.mutableLoading;
-    },
-
-    /**
-     * Return the placeholder string if it's set
-     * & there is no value selected.
-     * @return {String} Placeholder text
-     */
-    searchPlaceholder() {
-      if (this.isValueEmpty && this.placeholder) {
-        return this.placeholder;
-      }
-    },
-
-    /**
-     * The currently displayed options, filtered
-     * by the search elements value. If tagging
-     * true, the search text will be prepended
-     * if it doesn't already exist.
-     *
-     * @return {array}
-     */
-    filteredOptions() {
-      const optionList = [].concat(this.optionList);
-
-      if (!this.filterable && !this.taggable) {
-        return optionList;
-      }
-
-      let options = this.search.length
-        ? this.filter(optionList, this.search, this)
-        : optionList;
-      if (this.taggable && this.search.length) {
-        const createdOption = this.createOption(this.search);
-        if (!this.optionExists(createdOption)) {
-          options.unshift(createdOption);
-        }
-      }
-      return options;
-    },
-
-    /**
-     * Check if there aren't any options selected.
-     * @return {Boolean}
-     */
-    isValueEmpty() {
-      return this.selectedValue.length === 0;
-    },
-
-    /**
-     * Determines if the clear button should be displayed.
-     * @return {Boolean}
-     */
-    showClearButton() {
-      return (
-        !this.multiple && this.clearable && !this.open && !this.isValueEmpty
-      );
-    }
-  }
-};
-</script>
diff --git a/src/components/childComponents.js b/src/components/childComponents.js
deleted file mode 100644
index 41ab96d..0000000
--- a/src/components/childComponents.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Deselect from "./Deselect";
-import OpenIndicator from "./OpenIndicator";
-
-export default {
-  Deselect,
-  OpenIndicator
-};
diff --git a/src/scss/global/_animations.scss b/src/css/global/_animations.css
similarity index 67%
rename from src/scss/global/_animations.scss
rename to src/css/global/_animations.css
index 3d994e2..94359f0 100644
--- a/src/scss/global/_animations.scss
+++ b/src/css/global/_animations.css
@@ -1,5 +1,7 @@
-$transition-timing-function: cubic-bezier(1.0, 0.5, 0.8, 1.0);
-$transition-duration: .15s;
+:root {
+  --vs-transition-timing-function: cubic-bezier(1, 0.5, 0.8, 1);
+  --vs-transition-duration: 0.15s;
+}
 
 /* KeyFrames */
 @-webkit-keyframes vSelectSpinner {
@@ -24,7 +26,8 @@ $transition-duration: .15s;
 .vs__fade-enter-active,
 .vs__fade-leave-active {
   pointer-events: none;
-  transition: opacity $transition-duration $transition-timing-function;
+  transition: opacity var(--vs-transition-duration)
+    var(--vs-transition-timing-function);
 }
 .vs__fade-enter,
 .vs__fade-leave-to {
diff --git a/src/css/global/_states.css b/src/css/global/_states.css
new file mode 100644
index 0000000..3b32494
--- /dev/null
+++ b/src/css/global/_states.css
@@ -0,0 +1,50 @@
+/** Component States */
+
+/*
+ * Disabled
+ *
+ * When the component is disabled, all interaction
+ * should be prevented. Here we modify the bg color,
+ * and change the cursor displayed on the interactive
+ * components.
+ */
+
+:root {
+  --vs-disabled-bg: var(--vs-state-disabled-bg);
+  --vs-disabled-color: var(--vs-state-disabled-color);
+  --vs-disabled-cursor: var(--vs-state-disabled-cursor);
+}
+.vs--disabled.vs__dropdown-toggle,
+.vs--disabled.vs__clear,
+.vs--disabled.vs__search,
+.vs--disabled.vs__selected,
+.vs--disabled.vs__open-indicator {
+  cursor: var(--vs-disabled-cursor);
+  background-color: var(--vs-disabled-bg);
+}
+
+/*
+ *  RTL - Right to Left Support
+ *
+ *  Because we're using a flexbox layout, the `dir="rtl"`
+ *  HTML attribute does most of the work for us by
+ *  rearranging the child elements visually.
+ */
+
+.v-select[dir="rtl"].vs__actions {
+  padding: 0 3px 0 6px;
+}
+
+.v-select[dir="rtl"].vs__clear {
+  margin-left: 6px;
+  margin-right: 0;
+}
+
+.v-select[dir="rtl"].vs__deselect {
+  margin-left: 0;
+  margin-right: 2px;
+}
+
+.v-select[dir="rtl"].vs__dropdown-menu {
+  text-align: right;
+}
diff --git a/src/css/global/_variables.css b/src/css/global/_variables.css
new file mode 100644
index 0000000..9fc8b9f
--- /dev/null
+++ b/src/css/global/_variables.css
@@ -0,0 +1,44 @@
+:root {
+  --vs-colors-lightest: rgba(60, 60, 60, 0.26);
+  --vs-colors-light: rgba(60, 60, 60, 0.5);
+  --vs-colors-dark: #333;
+  --vs-colors-darkest: rgba(0, 0, 0, 0.15);
+
+  /*  Global Component Variables*/
+  --vs-component-line-height: 1.4;
+  --vs-component-placeholder-color: inherit;
+
+  /*  Active State*/
+  --vs-state-active-bg: #5897fb;
+  --vs-state-active-color: #fff;
+
+  /*  Disabled State*/
+  --vs-state-disabled-bg: rgb(248, 248, 248);
+  --vs-state-disabled-color: var(--vs-colors-light);
+  --vs-state-disabled-controls-color: var(--vs-colors-light);
+  --vs-state-disabled-cursor: not-allowed;
+
+  /*  Borders*/
+  --vs-border-width: 1px;
+  --vs-border-style: solid;
+  --vs-border-radius: 4px;
+  --vs-border-color: var(--vs-colors-lightest);
+
+  /*  Component Controls: Clear, Open Indicator*/
+  --vs-controls-color: var(--vs-colors-light);
+  --vs-controls-size: 1;
+  --vs-controls-deselect-text-shadow: 0 1px 0 #fff;
+
+  /*  Selected*/
+  --vs-selected-bg: #f0f0f0;
+  --vs-selected-border-color: var(--vs-border-color);
+  --vs-selected-border-style: var(--vs-border-style);
+  --vs-selected-border-width: var(--vs-border-width);
+
+  /*  Dropdown*/
+  --vs-dropdown-z-index: 1000;
+  --vs-dropdown-min-width: 160px;
+  --vs-dropdown-max-height: 350px;
+  --vs-dropdown-box-shadow: 0px 3px 6px 0px var(--vs-colors-darkest);
+  --vs-dropdown-bg: #fff;
+}
diff --git a/src/css/vue-select.css b/src/css/vue-select.css
new file mode 100644
index 0000000..6df4abc
--- /dev/null
+++ b/src/css/vue-select.css
@@ -0,0 +1,3 @@
+@import "global/_variables.css";
+@import "global/_animations.css";
+@import "global/_states.css";
diff --git a/src/scss/global/_component.scss b/src/scss/global/_component.scss
deleted file mode 100644
index 29be497..0000000
--- a/src/scss/global/_component.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.v-select {
-  position: relative;
-  font-family: inherit;
-}
-
-.v-select,
-.v-select * {
-  box-sizing: border-box;
-}
diff --git a/src/scss/global/_states.scss b/src/scss/global/_states.scss
deleted file mode 100644
index 8a5def2..0000000
--- a/src/scss/global/_states.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-/** Component States */
-
-/*
- * Disabled
- *
- * When the component is disabled, all interaction
- * should be prevented. Here we modify the bg color,
- * and change the cursor displayed on the interactive
- * components.
- */
-
-$disabled-bg: $vs-state-disabled-bg;
-$disabled-color: $vs-state-disabled-color;
-$disabled-cursor: $vs-state-disabled-cursor;
-
-.vs--disabled {
-  .vs__dropdown-toggle,
-  .vs__clear,
-  .vs__search,
-  .vs__selected,
-  .vs__open-indicator {
-    cursor: $disabled-cursor;
-    background-color: $disabled-bg;
-  }
-}
-
-/*
- *  RTL - Right to Left Support
- *
- *  Because we're using a flexbox layout, the `dir="rtl"`
- *  HTML attribute does most of the work for us by
- *  rearranging the child elements visually.
- */
-
-.v-select[dir="rtl"] {
-  .vs__actions {
-    padding: 0 3px 0 6px;
-  }
-
-  .vs__clear {
-    margin-left: 6px;
-    margin-right: 0;
-  }
-
-  .vs__deselect {
-    margin-left: 0;
-    margin-right: 2px;
-  }
-
-  .vs__dropdown-menu {
-    text-align: right;
-  }
-}
diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss
deleted file mode 100644
index 42c6774..0000000
--- a/src/scss/global/_variables.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-$vs-colors: (
-        lightest: rgba(60, 60, 60, 0.26),
-        light: rgba(60, 60, 60, 0.5),
-        dark: #333,
-        darkest: rgba(0, 0, 0, .15),
-) !default;
-
-//  Global Component Variables
-$vs-component-line-height: 1.4 !default;
-$vs-component-placeholder-color: inherit !default;
-
-//  Active State
-$vs-state-active-bg: #5897fb !default;
-$vs-state-active-color: #fff !default;
-
-//  Disabled State
-$vs-state-disabled-bg: rgb(248, 248, 248) !default;
-$vs-state-disabled-color: map_get($vs-colors, 'light') !default;
-$vs-state-disabled-controls-color: map_get($vs-colors, 'light') !default;
-$vs-state-disabled-cursor: not-allowed !default;
-
-//  Borders
-$vs-border-width: 1px !default;
-$vs-border-style: solid !default;
-$vs-border-radius: 4px !default;
-$vs-border-color: map_get($vs-colors, 'lightest') !default;
-
-//  Component Controls: Clear, Open Indicator
-$vs-controls-color: map_get($vs-colors, 'light') !default;
-$vs-controls-size: 1 !default;
-$vs-controls-deselect-text-shadow: 0 1px 0 #fff;
-
-//  Selected
-$vs-selected-bg: #f0f0f0 !default;
-$vs-selected-border-color: $vs-border-color !default;
-$vs-selected-border-style: $vs-border-style !default;
-$vs-selected-border-width: $vs-border-width !default;
-
-//  Dropdown
-$vs-dropdown-z-index: 1000 !default;
-$vs-dropdown-min-width: 160px !default;
-$vs-dropdown-max-height: 350px !default;
-$vs-dropdown-box-shadow: 0px 3px 6px 0px map_get($vs-colors, 'darkest') !default;
-$vs-dropdown-bg: #fff !default;
diff --git a/src/scss/modules/_clear.scss b/src/scss/modules/_clear.scss
deleted file mode 100644
index 8d307a7..0000000
--- a/src/scss/modules/_clear.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/* Clear Button */
-
-.vs__clear {
-  fill: $vs-controls-color;
-  padding: 0;
-  border: 0;
-  background-color: transparent;
-  cursor: pointer;
-  margin-right: 8px;
-}
diff --git a/src/scss/modules/_dropdown-menu.scss b/src/scss/modules/_dropdown-menu.scss
deleted file mode 100644
index 3e1af38..0000000
--- a/src/scss/modules/_dropdown-menu.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-/* Dropdown Menu */
-
-$border-width: $vs-border-width;
-$border-style: solid;
-$border-color: $vs-border-color;
-$border-radius: $vs-border-radius;
-$box-shadow: $vs-dropdown-box-shadow;
-
-$bg-color: $vs-dropdown-bg;
-$z-index: $vs-dropdown-z-index;
-$min-width: $vs-dropdown-min-width;
-$max-height: $vs-dropdown-max-height;
-
-.vs__dropdown-menu {
-  display: block;
-  box-sizing: border-box;
-  position: absolute;
-  top: calc(100% - #{$border-width}); // -{#$border-width} here ensures the left and right borders of the dropdown appear flush with the toggle.
-  left: 0;
-  z-index: $z-index;
-  padding: 5px 0;
-  margin: 0;
-  width: 100%;
-  max-height: $max-height;
-  min-width: $min-width;
-  overflow-y: auto;
-  box-shadow: $box-shadow;
-  border: $border-width $border-style $border-color;
-  border-top-style: none;
-  border-radius: 0 0 $border-radius $border-radius;
-  text-align: left;
-  list-style: none;
-  background: $bg-color;
-}
-
-.vs__no-options {
-  text-align: center;
-}
diff --git a/src/scss/modules/_dropdown-option.scss b/src/scss/modules/_dropdown-option.scss
deleted file mode 100644
index 474746d..0000000
--- a/src/scss/modules/_dropdown-option.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-/* List Items */
-.vs__dropdown-option {
-  line-height: 1.42857143; /* Normalize line height */
-  display: block;
-  padding: 3px 20px;
-  clear: both;
-  color: #333; /* Overrides most CSS frameworks */
-  white-space: nowrap;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.vs__dropdown-option--highlight {
-  background: $vs-state-active-bg;
-  color: $vs-state-active-color;
-}
-
-.vs__dropdown-option--disabled {
-  background: inherit;
-  color: $vs-state-disabled-color;
-
-  &:hover {
-    cursor: inherit;
-  }
-}
diff --git a/src/scss/modules/_dropdown-toggle.scss b/src/scss/modules/_dropdown-toggle.scss
deleted file mode 100644
index 5d5ddeb..0000000
--- a/src/scss/modules/_dropdown-toggle.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
-    Dropdown Toggle
-
-    The dropdown toggle is the primary wrapper of the component. It
-    has two direct descendants: .vs__selected-options, and .vs__actions.
-
-    .vs__selected-options holds the .vs__selected's as well as the
-    main search input.
-
-    .vs__actions holds the clear button and dropdown toggle.
- */
-
-$border-width: $vs-border-width;
-$border-style: $vs-border-style;
-$border-color: $vs-border-color;
-$border-radius: $vs-border-radius;
-
-.vs__dropdown-toggle {
-  appearance: none;
-  display: flex;
-  padding: 0 0 4px 0;
-  background: none;
-  border: $border-width $border-style $border-color;
-  border-radius: $border-radius;
-  white-space: normal;
-}
-
-.vs__selected-options {
-  display: flex;
-  flex-basis: 100%;
-  flex-grow: 1;
-  flex-wrap: wrap;
-  padding: 0 2px;
-  position: relative;
-}
-
-.vs__actions {
-  display: flex;
-  align-items: center;
-  padding: 4px 6px 0 3px;
-}
-
-/* Dropdown Toggle States */
-.vs--searchable .vs__dropdown-toggle {
-  cursor: text;
-}
-.vs--unsearchable .vs__dropdown-toggle {
-  cursor: pointer;
-}
-.vs--open .vs__dropdown-toggle {
-  border-bottom-color: transparent;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
diff --git a/src/scss/modules/_open-indicator.scss b/src/scss/modules/_open-indicator.scss
deleted file mode 100644
index 74c8b3c..0000000
--- a/src/scss/modules/_open-indicator.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-//  Open Indicator
-
-//  The open indicator appears as a down facing
-//  caret on the right side of the select.
-
-$transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
-$transition-duration: 150ms;
-
-$open-indicator-color: $vs-controls-color;
-$open-indicator-size: $vs-controls-size;
-
-.vs__open-indicator {
-  fill: $open-indicator-color;
-  transform: scale($open-indicator-size);
-  transition: transform $transition-duration $transition-timing-function;
-  transition-timing-function: $transition-timing-function;
-}
-
-//  Open State
-
-.vs--open .vs__open-indicator {
-  transform: rotate(180deg) scale($open-indicator-size);
-}
-
-//  Loading State
-
-.vs--loading .vs__open-indicator {
-  opacity: 0;
-}
diff --git a/src/scss/modules/_search-input.scss b/src/scss/modules/_search-input.scss
deleted file mode 100644
index 119cfd5..0000000
--- a/src/scss/modules/_search-input.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-/* Search Input */
-
-$line-height: $vs-component-line-height;
-$font-size: 1em;
-
-/**
- * Super weird bug... If this declaration is grouped
- * below, the cancel button will still appear in chrome.
- * If it's up here on it's own, it'll hide it.
- */
-.vs__search::-webkit-search-cancel-button {
-  display: none;
-}
-
-.vs__search::-webkit-search-decoration,
-.vs__search::-webkit-search-results-button,
-.vs__search::-webkit-search-results-decoration,
-.vs__search::-ms-clear {
-  display: none;
-}
-
-.vs__search,
-.vs__search:focus {
-  appearance: none;
-  line-height: $line-height;
-  font-size: $font-size;
-  border: 1px solid transparent;
-  border-left: none;
-  outline: none;
-  margin: 4px 0 0 0;
-  padding: 0 7px;
-  background: none;
-  box-shadow: none;
-  width: 0;
-  max-width: 100%;
-  flex-grow: 1;
-  z-index: 1;
-}
-
-.vs__search::placeholder {
-  color: $vs-component-placeholder-color;
-}
-
-/**
-    States
- */
-
-// Unsearchable
-.vs--unsearchable {
-  .vs__search {
-    opacity: 1;
-  }
-  &:not(.vs--disabled) .vs__search:hover {
-    cursor: pointer;
-  }
-}
-// Single, when searching but not loading or open
-.vs--single.vs--searching:not(.vs--open):not(.vs--loading) {
-    .vs__search {
-      opacity: .2;
-    }
-}
diff --git a/src/scss/modules/_selected.scss b/src/scss/modules/_selected.scss
deleted file mode 100644
index 9e3b879..0000000
--- a/src/scss/modules/_selected.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-/* Selected Tags */
-.vs__selected {
-  display: flex;
-  align-items: center;
-  background-color: $vs-selected-bg;
-  border: $vs-selected-border-width $vs-selected-border-style $vs-selected-border-color;
-  border-radius: $vs-border-radius;
-  color: map_get($vs-colors, 'dark');
-  line-height: $vs-component-line-height;
-  margin: 4px 2px 0px 2px;
-  padding: 0 0.25em;
-  z-index: 0;
-}
-
-.vs__deselect {
-  display: inline-flex;
-  appearance: none;
-  margin-left: 4px;
-  padding: 0;
-  border: 0;
-  cursor: pointer;
-  background: none;
-  fill: $vs-controls-color;
-  text-shadow: $vs-controls-deselect-text-shadow;
-}
-
-/* States */
-
-.vs--single {
-  .vs__selected {
-    background-color: transparent;
-    border-color: transparent;
-  }
-  &.vs--open .vs__selected {
-    position: absolute;
-    opacity: .4;
-  }
-  &.vs--searching .vs__selected {
-    display: none;
-  }
-}
diff --git a/src/scss/modules/_spinner.scss b/src/scss/modules/_spinner.scss
deleted file mode 100644
index 1f8e536..0000000
--- a/src/scss/modules/_spinner.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-/* Loading Spinner */
-.vs__spinner {
-  align-self: center;
-  opacity: 0;
-  font-size: 5px;
-  text-indent: -9999em;
-  overflow: hidden;
-  border-top: .9em solid rgba(100, 100, 100, .1);
-  border-right: .9em solid rgba(100, 100, 100, .1);
-  border-bottom: .9em solid rgba(100, 100, 100, .1);
-  border-left: .9em solid rgba(60, 60, 60, .45);
-  transform: translateZ(0);
-  animation: vSelectSpinner 1.1s infinite linear;
-  transition: opacity .1s;
-}
-.vs__spinner,
-.vs__spinner:after {
-  border-radius: 50%;
-  width: 5em;
-  height: 5em;
-}
-
-/* Loading Spinner States */
-.vs--loading .vs__spinner {
-  opacity: 1;
-}
diff --git a/src/scss/vue-select.scss b/src/scss/vue-select.scss
deleted file mode 100644
index f3c25a7..0000000
--- a/src/scss/vue-select.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import "global/variables";
-@import "global/component";
-@import "global/animations";
-@import "global/states";
-
-@import "modules/dropdown-toggle";
-@import "modules/open-indicator";
-@import "modules/clear";
-@import "modules/dropdown-menu";
-@import "modules/dropdown-option";
-@import "modules/selected";
-@import "modules/search-input";
-@import "modules/spinner";