@onereach/ui-components 8.26.2-beta.4184.0 → 9.0.0

package/dist/bundled/v2/components/OrSelect/OrSelect.js

@@ -1,5 +1,11 @@
 import { defineComponent, ref } from 'vue-demi';
 import { o as onClickOutside } from '../../index-13c63b4c.js';
+import { DEFAULT_TEXT, OR_SELECT_NO_RESULTS_TITLE_PROP, OR_SELECT_NO_RESULTS_START_TEXT_PROP, OR_SELECT_NO_RESULTS_END_TEXT_PROP, OR_SELECT_UPDATE_SEARCH_TEXT_PROP, OR_SELECT_VALUE_PROP, OR_SELECT_OPTIONS_PROP, OR_SELECT_SEARCH_OPTIONS_PROP, OR_SELECT_PLACEHOLDER_PROP, COMMON_STRING_PROP, SEARCH_OPTIONS_FUNCTION_PROP } from './constants.js';
+import __vue_component__$9 from '../OrIcon/OrIcon.js';
+import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+import __vue_component__$a from '../OrCheckbox/OrCheckbox.js';
+import __vue_component__$b from '../OrLoader/OrLoader.js';
 import { isEmpty } from '../../utils/isEmpty.js';
 import { _ as _baseAssignValue } from '../../_baseAssignValue-2250dbc9.js';
 import { k as keys_1, _ as _Stack, a as _baseIsEqual, i as isArguments_1 } from '../../_baseIsEqual-fe2002b6.js';
@@ -8,1017 +14,1035 @@ import { i as isObject_1 } from '../../isObject-b7415fc1.js';
 import { _ as _castPath, a as _toKey, g as get_1, b as _isKey, c as _baseGet } from '../../get-34aa21f4.js';
 import { i as isArray_1 } from '../../toString-b6e4472a.js';
 import { _ as _baseProperty } from '../../_baseProperty-a52739e9.js';
-import { OR_SELECT_VALUE_PROP, OR_SELECT_SEARCH_OPTIONS_PROP, OR_SELECT_OPTIONS_PROP, OR_SELECT_PLACEHOLDER_PROP, DEFAULT_TEXT, OR_SELECT_NO_RESULTS_TITLE_PROP, OR_SELECT_NO_RESULTS_START_TEXT_PROP, OR_SELECT_NO_RESULTS_END_TEXT_PROP, OR_SELECT_UPDATE_SEARCH_TEXT_PROP, COMMON_STRING_PROP, SEARCH_OPTIONS_FUNCTION_PROP } from './constants.js';
-import __vue_component__$9 from '../OrChip/OrChip.js';
-import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
-import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
-import __vue_component__$a from '../OrIcon/OrIcon.js';
-import __vue_component__$b from '../OrCheckbox/OrCheckbox.js';
-import __vue_component__$c from '../OrLoader/OrLoader.js';
+import __vue_component__$c from '../OrChip/OrChip.js';
 import __vue_component__$d from '../OrFloating/OrFloating.js';
 import __vue_component__$e from '../OrLabel/OrLabel.js';
 import __vue_component__$f from '../OrError/OrError.js';
 
-/**
- * A specialized version of `baseAggregator` for arrays.
- *
- * @private
- * @param {Array} [array] The array to iterate over.
- * @param {Function} setter The function to set `accumulator` values.
- * @param {Function} iteratee The iteratee to transform keys.
- * @param {Object} accumulator The initial aggregated object.
- * @returns {Function} Returns `accumulator`.
- */
-function arrayAggregator$1(array, setter, iteratee, accumulator) {
-  var index = -1,
-    length = array == null ? 0 : array.length;
-  while (++index < length) {
-    var value = array[index];
-    setter(accumulator, value, iteratee(value), array);
+var script$8 = defineComponent({
+  name: 'OrSelectSearchOptions',
+  components: {
+    OrIcon: __vue_component__$9
+  },
+  props: {
+    isTop: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ['search-change'],
+  data() {
+    return {
+      search: '',
+      placeholder: DEFAULT_TEXT.SEARCH_PLACEHOLDER
+    };
+  },
+  computed: {
+    icon() {
+      return this.search ? 'close' : 'search';
+    }
+  },
+  methods: {
+    handleSearchChange(search) {
+      this.search = search;
+      this.$emit('search-change', search);
+    }
   }
-  return accumulator;
-}
-var _arrayAggregator = arrayAggregator$1;
+});
 
-/**
- * Creates a base function for methods like `_.forIn` and `_.forOwn`.
- *
- * @private
- * @param {boolean} [fromRight] Specify iterating from right to left.
- * @returns {Function} Returns the new base function.
- */
-function createBaseFor$1(fromRight) {
-  return function (object, iteratee, keysFunc) {
-    var index = -1,
-      iterable = Object(object),
-      props = keysFunc(object),
-      length = props.length;
-    while (length--) {
-      var key = props[fromRight ? length : ++index];
-      if (iteratee(iterable[key], key, iterable) === false) {
-        break;
+var css_248z$8 = "@keyframes spinAround-data-v-10cb2d28{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-10cb2d28{from{opacity:1}to{opacity:0}}.or-select-search-options[data-v-10cb2d28]{display:flex;flex:0 0 auto;align-items:center;height:2.1875rem;padding:0 .5rem}.or-select-search-options[data-v-10cb2d28]:not(.top){border-bottom:1px solid var(--c-neutral-2)}.or-select-search-options.top[data-v-10cb2d28]{border-top:1px solid var(--c-neutral-2)}.or-select-search-options-input[data-v-10cb2d28]{flex:1 1 100%;min-width:0;height:100%;background:0 0;border:none;outline:0}.or-select-search-options-button[data-v-10cb2d28]{display:flex;padding:.125rem;margin-left:.5rem;cursor:pointer}.or-select-search-options-button[data-v-10cb2d28]  .or-icon{font-size:1rem;color:var(--c-neutral-4)}";
+styleInject(css_248z$8);
+
+/* script */
+const __vue_script__$8 = script$8;
+/* template */
+var __vue_render__$8 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    staticClass: "or-select-search-options",
+    class: {
+      'top': _vm.isTop
+    }
+  }, [_c('input', {
+    staticClass: "or-select-search-options-input",
+    attrs: {
+      "placeholder": _vm.placeholder
+    },
+    domProps: {
+      "value": _vm.search
+    },
+    on: {
+      "input": function ($event) {
+        return _vm.handleSearchChange($event.target.value);
       }
     }
-    return object;
-  };
-}
-var _createBaseFor = createBaseFor$1;
+  }), _vm._v(" "), _c('span', {
+    staticClass: "or-select-search-options-button",
+    on: {
+      "click": function ($event) {
+        return _vm.handleSearchChange('');
+      }
+    }
+  }, [_c('or-icon', {
+    attrs: {
+      "icon": _vm.icon
+    }
+  })], 1)]);
+};
+var __vue_staticRenderFns__$8 = [];
 
-var createBaseFor = _createBaseFor;
+/* style */
+const __vue_inject_styles__$8 = undefined;
+/* scoped */
+const __vue_scope_id__$8 = "data-v-10cb2d28";
+/* module identifier */
+const __vue_module_identifier__$8 = undefined;
+/* functional template */
+const __vue_is_functional_template__$8 = false;
+/* style inject */
 
-/**
- * The base implementation of `baseForOwn` which iterates over `object`
- * properties returned by `keysFunc` and invokes `iteratee` for each property.
- * Iteratee functions may exit iteration early by explicitly returning `false`.
- *
- * @private
- * @param {Object} object The object to iterate over.
- * @param {Function} iteratee The function invoked per iteration.
- * @param {Function} keysFunc The function to get the keys of `object`.
- * @returns {Object} Returns `object`.
- */
-var baseFor$1 = createBaseFor();
-var _baseFor = baseFor$1;
+/* style inject SSR */
 
-var baseFor = _baseFor,
-  keys$1 = keys_1;
+/* style inject shadow dom */
 
-/**
- * The base implementation of `_.forOwn` without support for iteratee shorthands.
- *
- * @private
- * @param {Object} object The object to iterate over.
- * @param {Function} iteratee The function invoked per iteration.
- * @returns {Object} Returns `object`.
- */
-function baseForOwn$1(object, iteratee) {
-  return object && baseFor(object, iteratee, keys$1);
-}
-var _baseForOwn = baseForOwn$1;
+const __vue_component__$8 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$8,
+  staticRenderFns: __vue_staticRenderFns__$8
+}, __vue_inject_styles__$8, __vue_script__$8, __vue_scope_id__$8, __vue_is_functional_template__$8, __vue_module_identifier__$8, false, undefined, undefined, undefined);
+var OrSelectSearchOptions = __vue_component__$8;
 
-var isArrayLike = isArrayLike_1;
+/** TODO: Use text management library! */
+var script$7 = defineComponent({
+  name: 'OrSelectContentEmpty',
+  props: {
+    search: {
+      type: String,
+      default: ''
+    },
+    noResultsTitle: OR_SELECT_NO_RESULTS_TITLE_PROP,
+    noResultsStartText: OR_SELECT_NO_RESULTS_START_TEXT_PROP,
+    noResultsEndText: OR_SELECT_NO_RESULTS_END_TEXT_PROP,
+    updateSearchText: OR_SELECT_UPDATE_SEARCH_TEXT_PROP
+  }
+});
 
-/**
- * Creates a `baseEach` or `baseEachRight` function.
- *
- * @private
- * @param {Function} eachFunc The function to iterate over a collection.
- * @param {boolean} [fromRight] Specify iterating from right to left.
- * @returns {Function} Returns the new base function.
- */
-function createBaseEach$1(eachFunc, fromRight) {
-  return function (collection, iteratee) {
-    if (collection == null) {
-      return collection;
-    }
-    if (!isArrayLike(collection)) {
-      return eachFunc(collection, iteratee);
-    }
-    var length = collection.length,
-      index = fromRight ? length : -1,
-      iterable = Object(collection);
-    while (fromRight ? index-- : ++index < length) {
-      if (iteratee(iterable[index], index, iterable) === false) {
-        break;
-      }
-    }
-    return collection;
-  };
-}
-var _createBaseEach = createBaseEach$1;
+var css_248z$7 = "@keyframes spinAround-data-v-998c6f28{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-998c6f28{from{opacity:1}to{opacity:0}}.or-select-content-empty[data-v-998c6f28]{display:flex;flex-direction:column;align-items:center;justify-content:center;height:10.625rem}.or-select-content-empty-title[data-v-998c6f28]{font-weight:var(--fw-1)}.or-select-content-empty-description[data-v-998c6f28]{margin-top:.5rem}";
+styleInject(css_248z$7);
 
-var baseForOwn = _baseForOwn,
-  createBaseEach = _createBaseEach;
+/* script */
+const __vue_script__$7 = script$7;
+/* template */
+var __vue_render__$7 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    staticClass: "or-select-content-empty"
+  }, [_c('div', {
+    staticClass: "or-select-content-empty-title"
+  }, [_vm._v("\n    " + _vm._s(_vm.noResultsTitle) + "\n  ")]), _vm._v(" "), _vm.search ? [_c('div', {
+    staticClass: "or-select-content-empty-description"
+  }, [_vm._v("\n      " + _vm._s(_vm.noResultsStartText)), _c('strong', [_vm._v(_vm._s(_vm.search))]), _vm._v(_vm._s(_vm.noResultsEndText) + "\n    ")]), _vm._v("\n\n    " + _vm._s(_vm.updateSearchText) + "\n  ")] : _vm._e()], 2);
+};
+var __vue_staticRenderFns__$7 = [];
 
-/**
- * The base implementation of `_.forEach` without support for iteratee shorthands.
- *
- * @private
- * @param {Array|Object} collection The collection to iterate over.
- * @param {Function} iteratee The function invoked per iteration.
- * @returns {Array|Object} Returns `collection`.
- */
-var baseEach$1 = createBaseEach(baseForOwn);
-var _baseEach = baseEach$1;
+/* style */
+const __vue_inject_styles__$7 = undefined;
+/* scoped */
+const __vue_scope_id__$7 = "data-v-998c6f28";
+/* module identifier */
+const __vue_module_identifier__$7 = undefined;
+/* functional template */
+const __vue_is_functional_template__$7 = false;
+/* style inject */
 
-var baseEach = _baseEach;
+/* style inject SSR */
 
-/**
- * Aggregates elements of `collection` on `accumulator` with keys transformed
- * by `iteratee` and values set by `setter`.
- *
- * @private
- * @param {Array|Object} collection The collection to iterate over.
- * @param {Function} setter The function to set `accumulator` values.
- * @param {Function} iteratee The iteratee to transform keys.
- * @param {Object} accumulator The initial aggregated object.
- * @returns {Function} Returns `accumulator`.
- */
-function baseAggregator$1(collection, setter, iteratee, accumulator) {
-  baseEach(collection, function (value, key, collection) {
-    setter(accumulator, value, iteratee(value), collection);
-  });
-  return accumulator;
-}
-var _baseAggregator = baseAggregator$1;
+/* style inject shadow dom */
 
-var Stack = _Stack,
-  baseIsEqual$1 = _baseIsEqual;
-
-/** Used to compose bitmasks for value comparisons. */
-var COMPARE_PARTIAL_FLAG$1 = 1,
-  COMPARE_UNORDERED_FLAG$1 = 2;
+const __vue_component__$7 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$7,
+  staticRenderFns: __vue_staticRenderFns__$7
+}, __vue_inject_styles__$7, __vue_script__$7, __vue_scope_id__$7, __vue_is_functional_template__$7, __vue_module_identifier__$7, false, undefined, undefined, undefined);
+var OrSelectContentEmpty = __vue_component__$7;
 
-/**
- * The base implementation of `_.isMatch` without support for iteratee shorthands.
- *
- * @private
- * @param {Object} object The object to inspect.
- * @param {Object} source The object of property values to match.
- * @param {Array} matchData The property names, values, and compare flags to match.
- * @param {Function} [customizer] The function to customize comparisons.
- * @returns {boolean} Returns `true` if `object` is a match, else `false`.
- */
-function baseIsMatch$1(object, source, matchData, customizer) {
-  var index = matchData.length,
-    length = index,
-    noCustomizer = !customizer;
-  if (object == null) {
-    return !length;
-  }
-  object = Object(object);
-  while (index--) {
-    var data = matchData[index];
-    if (noCustomizer && data[2] ? data[1] !== object[data[0]] : !(data[0] in object)) {
-      return false;
-    }
-  }
-  while (++index < length) {
-    data = matchData[index];
-    var key = data[0],
-      objValue = object[key],
-      srcValue = data[1];
-    if (noCustomizer && data[2]) {
-      if (objValue === undefined && !(key in object)) {
-        return false;
-      }
-    } else {
-      var stack = new Stack();
-      if (customizer) {
-        var result = customizer(objValue, srcValue, key, object, source, stack);
-      }
-      if (!(result === undefined ? baseIsEqual$1(srcValue, objValue, COMPARE_PARTIAL_FLAG$1 | COMPARE_UNORDERED_FLAG$1, customizer, stack) : result)) {
-        return false;
-      }
+var script$6 = defineComponent({
+  name: 'OrSelectOption',
+  components: {
+    OrCheckbox: __vue_component__$a
+  },
+  props: {
+    option: {
+      type: Object,
+      required: true
+    },
+    isActive: Boolean,
+    isCheckbox: Boolean
+  },
+  emits: ['select-option'],
+  computed: {
+    optionLabel() {
+      var _a;
+      return String((_a = this.option.label) !== null && _a !== void 0 ? _a : this.option.value);
     }
   }
-  return true;
-}
-var _baseIsMatch = baseIsMatch$1;
-
-var isObject = isObject_1;
-
-/**
- * Checks if `value` is suitable for strict equality comparisons, i.e. `===`.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` if suitable for strict
- *  equality comparisons, else `false`.
- */
-function isStrictComparable$2(value) {
-  return value === value && !isObject(value);
-}
-var _isStrictComparable = isStrictComparable$2;
-
-var isStrictComparable$1 = _isStrictComparable,
-  keys = keys_1;
+});
 
-/**
- * Gets the property names, values, and compare flags of `object`.
- *
- * @private
- * @param {Object} object The object to query.
- * @returns {Array} Returns the match data of `object`.
- */
-function getMatchData$1(object) {
-  var result = keys(object),
-    length = result.length;
-  while (length--) {
-    var key = result[length],
-      value = object[key];
-    result[length] = [key, value, isStrictComparable$1(value)];
-  }
-  return result;
-}
-var _getMatchData = getMatchData$1;
+var css_248z$6 = "@keyframes spinAround-data-v-710f1291{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-710f1291{from{opacity:1}to{opacity:0}}.or-select-option[data-v-710f1291]{display:flex;align-items:center;height:2.125rem;padding:0 .5rem;cursor:pointer}.or-select-option[data-v-710f1291]:hover{background-color:var(--c-neutral-1)}.or-select-option.active[data-v-710f1291]:not(.checkbox){font-weight:var(--fw-1);background-color:var(--c-neutral-2)}.or-select-option[data-v-710f1291]  .or-checkbox--content,.or-select-option-content[data-v-710f1291]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.or-select-option .or-checkbox[data-v-710f1291]{overflow:hidden}";
+styleInject(css_248z$6);
 
-/**
- * A specialized version of `matchesProperty` for source values suitable
- * for strict equality comparisons, i.e. `===`.
- *
- * @private
- * @param {string} key The key of the property to get.
- * @param {*} srcValue The value to match.
- * @returns {Function} Returns the new spec function.
- */
-function matchesStrictComparable$2(key, srcValue) {
-  return function (object) {
-    if (object == null) {
-      return false;
+/* script */
+const __vue_script__$6 = script$6;
+/* template */
+var __vue_render__$6 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    staticClass: "or-select-option",
+    class: {
+      active: _vm.isActive,
+      checkbox: _vm.isCheckbox
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.$emit('select-option');
+      }
     }
-    return object[key] === srcValue && (srcValue !== undefined || key in Object(object));
-  };
-}
-var _matchesStrictComparable = matchesStrictComparable$2;
+  }, [!_vm.isCheckbox ? _c('span', {
+    staticClass: "or-select-option-content"
+  }, [_vm._v("\n    " + _vm._s(_vm.optionLabel) + "\n  ")]) : _vm._e(), _vm._v(" "), _vm.isCheckbox ? _c('or-checkbox', {
+    attrs: {
+      "label": _vm.optionLabel,
+      "model-value": _vm.isActive
+    }
+  }) : _vm._e()], 1);
+};
+var __vue_staticRenderFns__$6 = [];
 
-var baseIsMatch = _baseIsMatch,
-  getMatchData = _getMatchData,
-  matchesStrictComparable$1 = _matchesStrictComparable;
+/* style */
+const __vue_inject_styles__$6 = undefined;
+/* scoped */
+const __vue_scope_id__$6 = "data-v-710f1291";
+/* module identifier */
+const __vue_module_identifier__$6 = undefined;
+/* functional template */
+const __vue_is_functional_template__$6 = false;
+/* style inject */
 
-/**
- * The base implementation of `_.matches` which doesn't clone `source`.
- *
- * @private
- * @param {Object} source The object of property values to match.
- * @returns {Function} Returns the new spec function.
- */
-function baseMatches$1(source) {
-  var matchData = getMatchData(source);
-  if (matchData.length == 1 && matchData[0][2]) {
-    return matchesStrictComparable$1(matchData[0][0], matchData[0][1]);
-  }
-  return function (object) {
-    return object === source || baseIsMatch(object, source, matchData);
-  };
-}
-var _baseMatches = baseMatches$1;
+/* style inject SSR */
 
-/**
- * The base implementation of `_.hasIn` without support for deep paths.
- *
- * @private
- * @param {Object} [object] The object to query.
- * @param {Array|string} key The key to check.
- * @returns {boolean} Returns `true` if `key` exists, else `false`.
- */
-function baseHasIn$1(object, key) {
-  return object != null && key in Object(object);
-}
-var _baseHasIn = baseHasIn$1;
+/* style inject shadow dom */
 
-var castPath = _castPath,
-  isArguments = isArguments_1,
-  isArray$2 = isArray_1,
-  isIndex = _isIndex,
-  isLength = isLength_1,
-  toKey$2 = _toKey;
+const __vue_component__$6 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$6,
+  staticRenderFns: __vue_staticRenderFns__$6
+}, __vue_inject_styles__$6, __vue_script__$6, __vue_scope_id__$6, __vue_is_functional_template__$6, __vue_module_identifier__$6, false, undefined, undefined, undefined);
+var OrSelectOption = __vue_component__$6;
 
-/**
- * Checks if `path` exists on `object`.
- *
- * @private
- * @param {Object} object The object to query.
- * @param {Array|string} path The path to check.
- * @param {Function} hasFunc The function to check properties.
- * @returns {boolean} Returns `true` if `path` exists, else `false`.
- */
-function hasPath$1(object, path, hasFunc) {
-  path = castPath(path, object);
-  var index = -1,
-    length = path.length,
-    result = false;
-  while (++index < length) {
-    var key = toKey$2(path[index]);
-    if (!(result = object != null && hasFunc(object, key))) {
-      break;
+var script$5 = defineComponent({
+  name: 'OrSelectContentOptions',
+  components: {
+    OrSelectOption
+  },
+  props: {
+    value: OR_SELECT_VALUE_PROP,
+    options: OR_SELECT_OPTIONS_PROP,
+    isMultiSelect: Boolean
+  },
+  emits: ['select-option'],
+  methods: {
+    isActive(option) {
+      return this.isMultiSelect ? (this.value || []).includes(option.value) : option.value === this.value;
+    },
+    /** Bind event and content here, so slot won't have to manage event name and payload */
+    getOnSelectCallback(option) {
+      return () => this.$emit('select-option', option);
     }
-    object = object[key];
-  }
-  if (result || ++index != length) {
-    return result;
   }
-  length = object == null ? 0 : object.length;
-  return !!length && isLength(length) && isIndex(key, length) && (isArray$2(object) || isArguments(object));
-}
-var _hasPath = hasPath$1;
+});
 
-var baseHasIn = _baseHasIn,
-  hasPath = _hasPath;
-
-/**
- * Checks if `path` is a direct or inherited property of `object`.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Object
- * @param {Object} object The object to query.
- * @param {Array|string} path The path to check.
- * @returns {boolean} Returns `true` if `path` exists, else `false`.
- * @example
- *
- * var object = _.create({ 'a': _.create({ 'b': 2 }) });
- *
- * _.hasIn(object, 'a');
- * // => true
- *
- * _.hasIn(object, 'a.b');
- * // => true
- *
- * _.hasIn(object, ['a', 'b']);
- * // => true
- *
- * _.hasIn(object, 'b');
- * // => false
- */
-function hasIn$1(object, path) {
-  return object != null && hasPath(object, path, baseHasIn);
-}
-var hasIn_1 = hasIn$1;
-
-var baseIsEqual = _baseIsEqual,
-  get = get_1,
-  hasIn = hasIn_1,
-  isKey$1 = _isKey,
-  isStrictComparable = _isStrictComparable,
-  matchesStrictComparable = _matchesStrictComparable,
-  toKey$1 = _toKey;
-
-/** Used to compose bitmasks for value comparisons. */
-var COMPARE_PARTIAL_FLAG = 1,
-  COMPARE_UNORDERED_FLAG = 2;
-
-/**
- * The base implementation of `_.matchesProperty` which doesn't clone `srcValue`.
- *
- * @private
- * @param {string} path The path of the property to get.
- * @param {*} srcValue The value to match.
- * @returns {Function} Returns the new spec function.
- */
-function baseMatchesProperty$1(path, srcValue) {
-  if (isKey$1(path) && isStrictComparable(srcValue)) {
-    return matchesStrictComparable(toKey$1(path), srcValue);
-  }
-  return function (object) {
-    var objValue = get(object, path);
-    return objValue === undefined && objValue === srcValue ? hasIn(object, path) : baseIsEqual(srcValue, objValue, COMPARE_PARTIAL_FLAG | COMPARE_UNORDERED_FLAG);
-  };
-}
-var _baseMatchesProperty = baseMatchesProperty$1;
-
-/**
- * This method returns the first argument it receives.
- *
- * @static
- * @since 0.1.0
- * @memberOf _
- * @category Util
- * @param {*} value Any value.
- * @returns {*} Returns `value`.
- * @example
- *
- * var object = { 'a': 1 };
- *
- * console.log(_.identity(object) === object);
- * // => true
- */
-function identity$1(value) {
-  return value;
-}
-var identity_1 = identity$1;
-
-var baseGet = _baseGet;
-
-/**
- * A specialized version of `baseProperty` which supports deep paths.
- *
- * @private
- * @param {Array|string} path The path of the property to get.
- * @returns {Function} Returns the new accessor function.
- */
-function basePropertyDeep$1(path) {
-  return function (object) {
-    return baseGet(object, path);
-  };
-}
-var _basePropertyDeep = basePropertyDeep$1;
-
-var baseProperty = _baseProperty,
-  basePropertyDeep = _basePropertyDeep,
-  isKey = _isKey,
-  toKey = _toKey;
-
-/**
- * Creates a function that returns the value at `path` of a given object.
- *
- * @static
- * @memberOf _
- * @since 2.4.0
- * @category Util
- * @param {Array|string} path The path of the property to get.
- * @returns {Function} Returns the new accessor function.
- * @example
- *
- * var objects = [
- *   { 'a': { 'b': 2 } },
- *   { 'a': { 'b': 1 } }
- * ];
- *
- * _.map(objects, _.property('a.b'));
- * // => [2, 1]
- *
- * _.map(_.sortBy(objects, _.property(['a', 'b'])), 'a.b');
- * // => [1, 2]
- */
-function property$1(path) {
-  return isKey(path) ? baseProperty(toKey(path)) : basePropertyDeep(path);
-}
-var property_1 = property$1;
-
-var baseMatches = _baseMatches,
-  baseMatchesProperty = _baseMatchesProperty,
-  identity = identity_1,
-  isArray$1 = isArray_1,
-  property = property_1;
-
-/**
- * The base implementation of `_.iteratee`.
- *
- * @private
- * @param {*} [value=_.identity] The value to convert to an iteratee.
- * @returns {Function} Returns the iteratee.
- */
-function baseIteratee$1(value) {
-  // Don't store the `typeof` result in a variable to avoid a JIT bug in Safari 9.
-  // See https://bugs.webkit.org/show_bug.cgi?id=156034 for more details.
-  if (typeof value == 'function') {
-    return value;
-  }
-  if (value == null) {
-    return identity;
-  }
-  if (typeof value == 'object') {
-    return isArray$1(value) ? baseMatchesProperty(value[0], value[1]) : baseMatches(value);
-  }
-  return property(value);
-}
-var _baseIteratee = baseIteratee$1;
-
-var arrayAggregator = _arrayAggregator,
-  baseAggregator = _baseAggregator,
-  baseIteratee = _baseIteratee,
-  isArray = isArray_1;
-
-/**
- * Creates a function like `_.groupBy`.
- *
- * @private
- * @param {Function} setter The function to set accumulator values.
- * @param {Function} [initializer] The accumulator object initializer.
- * @returns {Function} Returns the new aggregator function.
- */
-function createAggregator$1(setter, initializer) {
-  return function (collection, iteratee) {
-    var func = isArray(collection) ? arrayAggregator : baseAggregator,
-      accumulator = initializer ? initializer() : {};
-    return func(collection, setter, baseIteratee(iteratee), accumulator);
-  };
-}
-var _createAggregator = createAggregator$1;
-
-var baseAssignValue = _baseAssignValue,
-  createAggregator = _createAggregator;
-
-/**
- * Creates an object composed of keys generated from the results of running
- * each element of `collection` thru `iteratee`. The corresponding value of
- * each key is the last element responsible for generating the key. The
- * iteratee is invoked with one argument: (value).
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Collection
- * @param {Array|Object} collection The collection to iterate over.
- * @param {Function} [iteratee=_.identity] The iteratee to transform keys.
- * @returns {Object} Returns the composed aggregate object.
- * @example
- *
- * var array = [
- *   { 'dir': 'left', 'code': 97 },
- *   { 'dir': 'right', 'code': 100 }
- * ];
- *
- * _.keyBy(array, function(o) {
- *   return String.fromCharCode(o.code);
- * });
- * // => { 'a': { 'dir': 'left', 'code': 97 }, 'd': { 'dir': 'right', 'code': 100 } }
- *
- * _.keyBy(array, 'dir');
- * // => { 'left': { 'dir': 'left', 'code': 97 }, 'right': { 'dir': 'right', 'code': 100 } }
- */
-var keyBy = createAggregator(function (result, value, key) {
-  baseAssignValue(result, key, value);
-});
-var keyBy_1 = keyBy;
-
-var script$8 = defineComponent({
-  name: 'OrSelectInputValue',
-  components: {
-    OrChip: __vue_component__$9
-  },
-  props: {
-    value: OR_SELECT_VALUE_PROP,
-    options: OR_SELECT_SEARCH_OPTIONS_PROP,
-    isMultiSelect: Boolean,
-    isDisabled: Boolean
-  },
-  emits: ['delete-value'],
-  computed: {
-    optionsByKey() {
-      return keyBy_1(this.options, 'value');
-    },
-    states() {
-      return {
-        'simple-value': !this.isMultiSelect,
-        'multi-value': this.isMultiSelect
-      };
-    }
-  },
-  methods: {
-    getOptionLabel(optionId) {
-      var _a;
-      const option = this.optionsByKey[optionId];
-      return String(option ? (_a = option.label) !== null && _a !== void 0 ? _a : option.value : optionId);
-    },
-    /** Prevent content toggle event on chips, since they have their own control elements */
-    handleInputValueClick(event) {
-      const inputValueElement = this.$refs['input-value'];
-      const inputValueTextElement = this.$refs['input-value-text'];
-      const target = event.target;
-      if (target !== inputValueElement && target !== inputValueTextElement) {
-        event.stopPropagation();
-      }
-    }
-  }
-});
-
-var css_248z$8 = "@keyframes spinAround-data-v-100ef33e{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-100ef33e{from{opacity:1}to{opacity:0}}.or-select-input-value[data-v-100ef33e]{display:flex;flex:1 1 100%;overflow:hidden}.or-select-input-value.simple-value[data-v-100ef33e]{align-items:center}.or-select-input-value-text[data-v-100ef33e]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.or-select-input-value.multi-value[data-v-100ef33e]{flex-wrap:wrap;padding:.125rem 0}.or-select-input-value.multi-value .or-chip[data-v-100ef33e]{margin:.125rem}.or-select-input-value.multi-value .or-chip[data-v-100ef33e]:not(.disabled){cursor:default}";
-styleInject(css_248z$8);
+var css_248z$5 = ".or-select-content-options[data-v-37fa8f57]{display:flex;flex:1 1 100%;flex-direction:column}";
+styleInject(css_248z$5);
 
 /* script */
-const __vue_script__$8 = script$8;
+const __vue_script__$5 = script$5;
 /* template */
-var __vue_render__$8 = function () {
+var __vue_render__$5 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c('div', {
-    ref: "input-value",
-    staticClass: "or-select-input-value",
-    class: _vm.states,
-    on: {
-      "click": _vm.handleInputValueClick
-    }
-  }, [!_vm.isMultiSelect ? _c('div', {
-    ref: "input-value-text",
-    staticClass: "or-select-input-value-text"
-  }, [_vm._v("\n    " + _vm._s(_vm.getOptionLabel(_vm.value)) + "\n  ")]) : _vm._e(), _vm._v(" "), _vm.isMultiSelect ? _vm._l(_vm.value, function (valueItem) {
-    return _c('or-chip', {
-      key: valueItem,
-      attrs: {
-        "content": _vm.getOptionLabel(valueItem),
-        "is-disabled": _vm.isDisabled
-      },
-      on: {
-        "delete": function ($event) {
-          return _vm.$emit('delete-value', valueItem);
+    staticClass: "or-select-content-options"
+  }, _vm._l(_vm.options, function (option) {
+    return _c('div', {
+      key: option.value,
+      staticClass: "or-select-content-option-wrapper"
+    }, [_vm._t("content-option", function () {
+      return [_c('or-select-option', {
+        attrs: {
+          "option": option,
+          "is-active": _vm.isActive(option),
+          "is-checkbox": _vm.isMultiSelect
+        },
+        on: {
+          "select-option": function ($event) {
+            return _vm.$emit('select-option', option);
+          }
         }
-      }
-    });
-  }) : _vm._e()], 2);
+      })];
+    }, {
+      "option": option,
+      "isActive": _vm.isActive(option),
+      "onSelect": _vm.getOnSelectCallback(option)
+    })], 2);
+  }), 0);
 };
-var __vue_staticRenderFns__$8 = [];
+var __vue_staticRenderFns__$5 = [];
 
 /* style */
-const __vue_inject_styles__$8 = undefined;
+const __vue_inject_styles__$5 = undefined;
 /* scoped */
-const __vue_scope_id__$8 = "data-v-100ef33e";
+const __vue_scope_id__$5 = "data-v-37fa8f57";
 /* module identifier */
-const __vue_module_identifier__$8 = undefined;
+const __vue_module_identifier__$5 = undefined;
 /* functional template */
-const __vue_is_functional_template__$8 = false;
+const __vue_is_functional_template__$5 = false;
 /* style inject */
 
 /* style inject SSR */
 
 /* style inject shadow dom */
 
-const __vue_component__$8 = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$8,
-  staticRenderFns: __vue_staticRenderFns__$8
-}, __vue_inject_styles__$8, __vue_script__$8, __vue_scope_id__$8, __vue_is_functional_template__$8, __vue_module_identifier__$8, false, undefined, undefined, undefined);
-var OrSelectInputValue = __vue_component__$8;
+const __vue_component__$5 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$5,
+  staticRenderFns: __vue_staticRenderFns__$5
+}, __vue_inject_styles__$5, __vue_script__$5, __vue_scope_id__$5, __vue_is_functional_template__$5, __vue_module_identifier__$5, false, undefined, undefined, undefined);
+var OrSelectContentOptions = __vue_component__$5;
 
-var script$7 = defineComponent({
-  name: 'OrSelectInput',
+var script$4 = defineComponent({
+  name: 'OrSelectContent',
   components: {
-    OrIcon: __vue_component__$a,
-    OrSelectInputValue
+    OrLoader: __vue_component__$b,
+    OrSelectSearchOptions,
+    OrSelectContentEmpty,
+    OrSelectContentOptions
   },
   props: {
     value: OR_SELECT_VALUE_PROP,
     options: OR_SELECT_OPTIONS_PROP,
-    placeholder: OR_SELECT_PLACEHOLDER_PROP,
-    isOpen: Boolean,
-    isMultiSelect: Boolean,
+    useSearch: Boolean,
     isTop: Boolean,
-    isDisabled: Boolean,
-    isInvalid: Boolean
+    isLoading: Boolean,
+    isMultiSelect: Boolean,
+    noResultsTitle: OR_SELECT_NO_RESULTS_TITLE_PROP,
+    noResultsStartText: OR_SELECT_NO_RESULTS_START_TEXT_PROP,
+    noResultsEndText: OR_SELECT_NO_RESULTS_END_TEXT_PROP,
+    updateSearchText: OR_SELECT_UPDATE_SEARCH_TEXT_PROP
+  },
+  emits: ['search-change', 'select-option'],
+  data() {
+    return {
+      search: ''
+    };
   },
-  emits: ['toggle-content', 'delete-value'],
   computed: {
-    icon() {
-      return this.isOpen ? 'arrow_drop_up' : 'arrow_drop_down';
-    },
-    states() {
-      return {
-        open: this.isOpen,
-        error: this.isInvalid,
-        disabled: this.isDisabled,
-        multiselect: this.isMultiSelect,
-        top: this.isTop
-      };
+    showOptions() {
+      return !this.isLoading && this.options.length > 0;
     },
-    isEmptyValue() {
-      return typeof this.value === 'number' ? false : isEmpty(this.value);
-    }
-  },
-  methods: {
-    handleToggleContent() {
-      if (!this.isDisabled) {
-        this.$emit('toggle-content');
-      }
+    showEmptyResult() {
+      return !this.isLoading && !this.options.length;
+    }
+  },
+  methods: {
+    handleSearchChange(search) {
+      this.search = search;
+      this.$emit('search-change', search);
+    },
+    handleSelectOption(option) {
+      this.$emit('select-option', option);
     }
   }
 });
 
-var css_248z$7 = "@keyframes spinAround-data-v-4d590135{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-4d590135{from{opacity:1}to{opacity:0}}.or-select-input[data-v-4d590135]{display:flex;padding:0 .5rem;cursor:pointer}.or-select-input.input-wrapper[data-v-4d590135]{min-height:2.25rem;background-color:var(--c-neutral-1);border:1px solid var(--c-neutral-2);border-radius:.25rem}.or-select-input.input-wrapper.error[data-v-4d590135]{border-color:var(--c-error)}.or-select-input.open[data-v-4d590135],.or-select-input[data-v-4d590135]:hover:not(.disabled){background-color:var(--c-white)}.or-select-input.open[data-v-4d590135]{border-color:var(--c-neutral-2)}.or-select-input.open[data-v-4d590135]:not(.top){border-bottom-right-radius:0;border-bottom-left-radius:0}.or-select-input.open.top[data-v-4d590135]{border-top-left-radius:0;border-top-right-radius:0}.or-select-input.disabled[data-v-4d590135]{cursor:not-allowed}.or-select-input.disabled[data-v-4d590135]:not(.multiselect){background-color:var(--c-neutral-1-darken-5)}.or-select-input-placeholder[data-v-4d590135]{display:flex;align-items:center;overflow:hidden;color:var(--c-neutral-4);-webkit-user-select:none;-moz-user-select:none;user-select:none}.or-select-input-placeholder-text[data-v-4d590135]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.or-select-input-button[data-v-4d590135]{display:flex;align-items:center;height:2.125rem;margin-left:auto}.or-select-input-button[data-v-4d590135]  .or-icon{margin-left:.5rem}";
-styleInject(css_248z$7);
+var css_248z$4 = "@keyframes spinAround-data-v-6c988c45{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-6c988c45{from{opacity:1}to{opacity:0}}.or-select-content[data-v-6c988c45]{display:flex;flex-direction:column;overflow:hidden;background-color:var(--c-white);border:1px solid var(--c-neutral-2)}.or-select-content[data-v-6c988c45]:not(.top){border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem;box-shadow:0 .125rem .5rem 0 rgba(0,0,0,.1)}.or-select-content.top[data-v-6c988c45]{border-top-left-radius:.25rem;border-top-right-radius:.25rem;box-shadow:0 -.125rem .5rem 0 rgba(0,0,0,.1)}.or-select-content-main[data-v-6c988c45]{display:flex;flex:1 1 100%;flex-direction:column;max-height:10.625rem;overflow-y:auto}.or-select-content-main.center-content[data-v-6c988c45]{flex:0 0 10.625rem;align-items:center;justify-content:center}";
+styleInject(css_248z$4);
 
 /* script */
-const __vue_script__$7 = script$7;
+const __vue_script__$4 = script$4;
 /* template */
-var __vue_render__$7 = function () {
+var __vue_render__$4 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c('div', {
-    staticClass: "or-select-input input-wrapper",
-    class: _vm.states,
+    staticClass: "or-select-content",
+    class: {
+      'top': _vm.isTop
+    }
+  }, [_vm.useSearch && !_vm.isTop ? _c('or-select-search-options', {
     on: {
-      "click": _vm.handleToggleContent
+      "search-change": _vm.handleSearchChange
     }
-  }, [_vm.isEmptyValue ? _c('div', {
-    staticClass: "or-select-input-placeholder"
-  }, [_c('span', {
-    staticClass: "or-select-input-placeholder-text"
-  }, [_vm._v("\n      " + _vm._s(_vm.placeholder) + "\n    ")])]) : _vm._e(), _vm._v(" "), !_vm.isEmptyValue ? _vm._t("input-value", function () {
-    return [_c('or-select-input-value', {
+  }) : _vm._e(), _vm._v(" "), _c('div', {
+    staticClass: "or-select-content-main",
+    class: {
+      'center-content': _vm.isLoading
+    }
+  }, [_vm.isLoading ? _c('or-loader') : _vm._e(), _vm._v(" "), _vm.showEmptyResult ? _vm._t("empty-options", function () {
+    return [_c('or-select-content-empty', {
+      attrs: {
+        "search": _vm.search,
+        "no-results-title": _vm.noResultsTitle,
+        "no-results-start-text": _vm.noResultsStartText,
+        "no-results-end-text": _vm.noResultsEndText,
+        "update-search-text": _vm.updateSearchText
+      }
+    })];
+  }, {
+    "search": _vm.search
+  }) : _vm._e(), _vm._v(" "), _vm._t("content-options", function () {
+    return [_vm.showOptions ? _c('or-select-content-options', {
       attrs: {
         "value": _vm.value,
         "options": _vm.options,
-        "is-multi-select": _vm.isMultiSelect,
-        "is-disabled": _vm.isDisabled
+        "is-multi-select": _vm.isMultiSelect
       },
       on: {
-        "delete-value": function ($event) {
-          return _vm.$emit('delete-value', $event);
+        "select-option": function ($event) {
+          return _vm.$emit('select-option', $event);
         }
+      },
+      scopedSlots: _vm._u([{
+        key: "content-option",
+        fn: function (scope) {
+          return [_vm._t("content-option", null, null, scope)];
+        }
+      }], null, true)
+    }) : _vm._e()];
+  }, {
+    "onSelectOption": _vm.handleSelectOption
+  })], 2), _vm._v(" "), _vm.useSearch && _vm.isTop ? _c('or-select-search-options', {
+    attrs: {
+      "is-top": ""
+    },
+    on: {
+      "search-change": _vm.handleSearchChange
+    }
+  }) : _vm._e()], 1);
+};
+var __vue_staticRenderFns__$4 = [];
+
+/* style */
+const __vue_inject_styles__$4 = undefined;
+/* scoped */
+const __vue_scope_id__$4 = "data-v-6c988c45";
+/* module identifier */
+const __vue_module_identifier__$4 = undefined;
+/* functional template */
+const __vue_is_functional_template__$4 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$4 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$4,
+  staticRenderFns: __vue_staticRenderFns__$4
+}, __vue_inject_styles__$4, __vue_script__$4, __vue_scope_id__$4, __vue_is_functional_template__$4, __vue_module_identifier__$4, false, undefined, undefined, undefined);
+var OrSelectContent = __vue_component__$4;
+
+/**
+ * A specialized version of `baseAggregator` for arrays.
+ *
+ * @private
+ * @param {Array} [array] The array to iterate over.
+ * @param {Function} setter The function to set `accumulator` values.
+ * @param {Function} iteratee The iteratee to transform keys.
+ * @param {Object} accumulator The initial aggregated object.
+ * @returns {Function} Returns `accumulator`.
+ */
+function arrayAggregator$1(array, setter, iteratee, accumulator) {
+  var index = -1,
+    length = array == null ? 0 : array.length;
+  while (++index < length) {
+    var value = array[index];
+    setter(accumulator, value, iteratee(value), array);
+  }
+  return accumulator;
+}
+var _arrayAggregator = arrayAggregator$1;
+
+/**
+ * Creates a base function for methods like `_.forIn` and `_.forOwn`.
+ *
+ * @private
+ * @param {boolean} [fromRight] Specify iterating from right to left.
+ * @returns {Function} Returns the new base function.
+ */
+function createBaseFor$1(fromRight) {
+  return function (object, iteratee, keysFunc) {
+    var index = -1,
+      iterable = Object(object),
+      props = keysFunc(object),
+      length = props.length;
+    while (length--) {
+      var key = props[fromRight ? length : ++index];
+      if (iteratee(iterable[key], key, iterable) === false) {
+        break;
+      }
+    }
+    return object;
+  };
+}
+var _createBaseFor = createBaseFor$1;
+
+var createBaseFor = _createBaseFor;
+
+/**
+ * The base implementation of `baseForOwn` which iterates over `object`
+ * properties returned by `keysFunc` and invokes `iteratee` for each property.
+ * Iteratee functions may exit iteration early by explicitly returning `false`.
+ *
+ * @private
+ * @param {Object} object The object to iterate over.
+ * @param {Function} iteratee The function invoked per iteration.
+ * @param {Function} keysFunc The function to get the keys of `object`.
+ * @returns {Object} Returns `object`.
+ */
+var baseFor$1 = createBaseFor();
+var _baseFor = baseFor$1;
+
+var baseFor = _baseFor,
+  keys$1 = keys_1;
+
+/**
+ * The base implementation of `_.forOwn` without support for iteratee shorthands.
+ *
+ * @private
+ * @param {Object} object The object to iterate over.
+ * @param {Function} iteratee The function invoked per iteration.
+ * @returns {Object} Returns `object`.
+ */
+function baseForOwn$1(object, iteratee) {
+  return object && baseFor(object, iteratee, keys$1);
+}
+var _baseForOwn = baseForOwn$1;
+
+var isArrayLike = isArrayLike_1;
+
+/**
+ * Creates a `baseEach` or `baseEachRight` function.
+ *
+ * @private
+ * @param {Function} eachFunc The function to iterate over a collection.
+ * @param {boolean} [fromRight] Specify iterating from right to left.
+ * @returns {Function} Returns the new base function.
+ */
+function createBaseEach$1(eachFunc, fromRight) {
+  return function (collection, iteratee) {
+    if (collection == null) {
+      return collection;
+    }
+    if (!isArrayLike(collection)) {
+      return eachFunc(collection, iteratee);
+    }
+    var length = collection.length,
+      index = fromRight ? length : -1,
+      iterable = Object(collection);
+    while (fromRight ? index-- : ++index < length) {
+      if (iteratee(iterable[index], index, iterable) === false) {
+        break;
+      }
+    }
+    return collection;
+  };
+}
+var _createBaseEach = createBaseEach$1;
+
+var baseForOwn = _baseForOwn,
+  createBaseEach = _createBaseEach;
+
+/**
+ * The base implementation of `_.forEach` without support for iteratee shorthands.
+ *
+ * @private
+ * @param {Array|Object} collection The collection to iterate over.
+ * @param {Function} iteratee The function invoked per iteration.
+ * @returns {Array|Object} Returns `collection`.
+ */
+var baseEach$1 = createBaseEach(baseForOwn);
+var _baseEach = baseEach$1;
+
+var baseEach = _baseEach;
+
+/**
+ * Aggregates elements of `collection` on `accumulator` with keys transformed
+ * by `iteratee` and values set by `setter`.
+ *
+ * @private
+ * @param {Array|Object} collection The collection to iterate over.
+ * @param {Function} setter The function to set `accumulator` values.
+ * @param {Function} iteratee The iteratee to transform keys.
+ * @param {Object} accumulator The initial aggregated object.
+ * @returns {Function} Returns `accumulator`.
+ */
+function baseAggregator$1(collection, setter, iteratee, accumulator) {
+  baseEach(collection, function (value, key, collection) {
+    setter(accumulator, value, iteratee(value), collection);
+  });
+  return accumulator;
+}
+var _baseAggregator = baseAggregator$1;
+
+var Stack = _Stack,
+  baseIsEqual$1 = _baseIsEqual;
+
+/** Used to compose bitmasks for value comparisons. */
+var COMPARE_PARTIAL_FLAG$1 = 1,
+  COMPARE_UNORDERED_FLAG$1 = 2;
+
+/**
+ * The base implementation of `_.isMatch` without support for iteratee shorthands.
+ *
+ * @private
+ * @param {Object} object The object to inspect.
+ * @param {Object} source The object of property values to match.
+ * @param {Array} matchData The property names, values, and compare flags to match.
+ * @param {Function} [customizer] The function to customize comparisons.
+ * @returns {boolean} Returns `true` if `object` is a match, else `false`.
+ */
+function baseIsMatch$1(object, source, matchData, customizer) {
+  var index = matchData.length,
+    length = index,
+    noCustomizer = !customizer;
+  if (object == null) {
+    return !length;
+  }
+  object = Object(object);
+  while (index--) {
+    var data = matchData[index];
+    if (noCustomizer && data[2] ? data[1] !== object[data[0]] : !(data[0] in object)) {
+      return false;
+    }
+  }
+  while (++index < length) {
+    data = matchData[index];
+    var key = data[0],
+      objValue = object[key],
+      srcValue = data[1];
+    if (noCustomizer && data[2]) {
+      if (objValue === undefined && !(key in object)) {
+        return false;
+      }
+    } else {
+      var stack = new Stack();
+      if (customizer) {
+        var result = customizer(objValue, srcValue, key, object, source, stack);
+      }
+      if (!(result === undefined ? baseIsEqual$1(srcValue, objValue, COMPARE_PARTIAL_FLAG$1 | COMPARE_UNORDERED_FLAG$1, customizer, stack) : result)) {
+        return false;
       }
-    })];
-  }, {
-    "value": _vm.value,
-    "options": _vm.options
-  }) : _vm._e(), _vm._v(" "), _c('div', {
-    staticClass: "or-select-input-button"
-  }, [_c('or-icon', {
-    attrs: {
-      "icon": _vm.icon
     }
-  })], 1)], 2);
-};
-var __vue_staticRenderFns__$7 = [];
+  }
+  return true;
+}
+var _baseIsMatch = baseIsMatch$1;
 
-/* style */
-const __vue_inject_styles__$7 = undefined;
-/* scoped */
-const __vue_scope_id__$7 = "data-v-4d590135";
-/* module identifier */
-const __vue_module_identifier__$7 = undefined;
-/* functional template */
-const __vue_is_functional_template__$7 = false;
-/* style inject */
+var isObject = isObject_1;
 
-/* style inject SSR */
+/**
+ * Checks if `value` is suitable for strict equality comparisons, i.e. `===`.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` if suitable for strict
+ *  equality comparisons, else `false`.
+ */
+function isStrictComparable$2(value) {
+  return value === value && !isObject(value);
+}
+var _isStrictComparable = isStrictComparable$2;
 
-/* style inject shadow dom */
+var isStrictComparable$1 = _isStrictComparable,
+  keys = keys_1;
 
-const __vue_component__$7 = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$7,
-  staticRenderFns: __vue_staticRenderFns__$7
-}, __vue_inject_styles__$7, __vue_script__$7, __vue_scope_id__$7, __vue_is_functional_template__$7, __vue_module_identifier__$7, false, undefined, undefined, undefined);
-var OrSelectInput = __vue_component__$7;
+/**
+ * Gets the property names, values, and compare flags of `object`.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @returns {Array} Returns the match data of `object`.
+ */
+function getMatchData$1(object) {
+  var result = keys(object),
+    length = result.length;
+  while (length--) {
+    var key = result[length],
+      value = object[key];
+    result[length] = [key, value, isStrictComparable$1(value)];
+  }
+  return result;
+}
+var _getMatchData = getMatchData$1;
 
-var script$6 = defineComponent({
-  name: 'OrSelectSearchOptions',
-  components: {
-    OrIcon: __vue_component__$a
-  },
-  props: {
-    isTop: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  emits: ['search-change'],
-  data() {
-    return {
-      search: '',
-      placeholder: DEFAULT_TEXT.SEARCH_PLACEHOLDER
-    };
-  },
-  computed: {
-    icon() {
-      return this.search ? 'close' : 'search';
-    }
-  },
-  methods: {
-    handleSearchChange(search) {
-      this.search = search;
-      this.$emit('search-change', search);
+/**
+ * A specialized version of `matchesProperty` for source values suitable
+ * for strict equality comparisons, i.e. `===`.
+ *
+ * @private
+ * @param {string} key The key of the property to get.
+ * @param {*} srcValue The value to match.
+ * @returns {Function} Returns the new spec function.
+ */
+function matchesStrictComparable$2(key, srcValue) {
+  return function (object) {
+    if (object == null) {
+      return false;
     }
+    return object[key] === srcValue && (srcValue !== undefined || key in Object(object));
+  };
+}
+var _matchesStrictComparable = matchesStrictComparable$2;
+
+var baseIsMatch = _baseIsMatch,
+  getMatchData = _getMatchData,
+  matchesStrictComparable$1 = _matchesStrictComparable;
+
+/**
+ * The base implementation of `_.matches` which doesn't clone `source`.
+ *
+ * @private
+ * @param {Object} source The object of property values to match.
+ * @returns {Function} Returns the new spec function.
+ */
+function baseMatches$1(source) {
+  var matchData = getMatchData(source);
+  if (matchData.length == 1 && matchData[0][2]) {
+    return matchesStrictComparable$1(matchData[0][0], matchData[0][1]);
   }
-});
+  return function (object) {
+    return object === source || baseIsMatch(object, source, matchData);
+  };
+}
+var _baseMatches = baseMatches$1;
 
-var css_248z$6 = "@keyframes spinAround-data-v-10cb2d28{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-10cb2d28{from{opacity:1}to{opacity:0}}.or-select-search-options[data-v-10cb2d28]{display:flex;flex:0 0 auto;align-items:center;height:2.1875rem;padding:0 .5rem}.or-select-search-options[data-v-10cb2d28]:not(.top){border-bottom:1px solid var(--c-neutral-2)}.or-select-search-options.top[data-v-10cb2d28]{border-top:1px solid var(--c-neutral-2)}.or-select-search-options-input[data-v-10cb2d28]{flex:1 1 100%;min-width:0;height:100%;background:0 0;border:none;outline:0}.or-select-search-options-button[data-v-10cb2d28]{display:flex;padding:.125rem;margin-left:.5rem;cursor:pointer}.or-select-search-options-button[data-v-10cb2d28]  .or-icon{font-size:1rem;color:var(--c-neutral-4)}";
-styleInject(css_248z$6);
+/**
+ * The base implementation of `_.hasIn` without support for deep paths.
+ *
+ * @private
+ * @param {Object} [object] The object to query.
+ * @param {Array|string} key The key to check.
+ * @returns {boolean} Returns `true` if `key` exists, else `false`.
+ */
+function baseHasIn$1(object, key) {
+  return object != null && key in Object(object);
+}
+var _baseHasIn = baseHasIn$1;
 
-/* script */
-const __vue_script__$6 = script$6;
-/* template */
-var __vue_render__$6 = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('div', {
-    staticClass: "or-select-search-options",
-    class: {
-      'top': _vm.isTop
-    }
-  }, [_c('input', {
-    staticClass: "or-select-search-options-input",
-    attrs: {
-      "placeholder": _vm.placeholder
-    },
-    domProps: {
-      "value": _vm.search
-    },
-    on: {
-      "input": function ($event) {
-        return _vm.handleSearchChange($event.target.value);
-      }
-    }
-  }), _vm._v(" "), _c('span', {
-    staticClass: "or-select-search-options-button",
-    on: {
-      "click": function ($event) {
-        return _vm.handleSearchChange('');
-      }
-    }
-  }, [_c('or-icon', {
-    attrs: {
-      "icon": _vm.icon
+var castPath = _castPath,
+  isArguments = isArguments_1,
+  isArray$2 = isArray_1,
+  isIndex = _isIndex,
+  isLength = isLength_1,
+  toKey$2 = _toKey;
+
+/**
+ * Checks if `path` exists on `object`.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @param {Array|string} path The path to check.
+ * @param {Function} hasFunc The function to check properties.
+ * @returns {boolean} Returns `true` if `path` exists, else `false`.
+ */
+function hasPath$1(object, path, hasFunc) {
+  path = castPath(path, object);
+  var index = -1,
+    length = path.length,
+    result = false;
+  while (++index < length) {
+    var key = toKey$2(path[index]);
+    if (!(result = object != null && hasFunc(object, key))) {
+      break;
     }
-  })], 1)]);
-};
-var __vue_staticRenderFns__$6 = [];
+    object = object[key];
+  }
+  if (result || ++index != length) {
+    return result;
+  }
+  length = object == null ? 0 : object.length;
+  return !!length && isLength(length) && isIndex(key, length) && (isArray$2(object) || isArguments(object));
+}
+var _hasPath = hasPath$1;
 
-/* style */
-const __vue_inject_styles__$6 = undefined;
-/* scoped */
-const __vue_scope_id__$6 = "data-v-10cb2d28";
-/* module identifier */
-const __vue_module_identifier__$6 = undefined;
-/* functional template */
-const __vue_is_functional_template__$6 = false;
-/* style inject */
+var baseHasIn = _baseHasIn,
+  hasPath = _hasPath;
 
-/* style inject SSR */
+/**
+ * Checks if `path` is a direct or inherited property of `object`.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Object
+ * @param {Object} object The object to query.
+ * @param {Array|string} path The path to check.
+ * @returns {boolean} Returns `true` if `path` exists, else `false`.
+ * @example
+ *
+ * var object = _.create({ 'a': _.create({ 'b': 2 }) });
+ *
+ * _.hasIn(object, 'a');
+ * // => true
+ *
+ * _.hasIn(object, 'a.b');
+ * // => true
+ *
+ * _.hasIn(object, ['a', 'b']);
+ * // => true
+ *
+ * _.hasIn(object, 'b');
+ * // => false
+ */
+function hasIn$1(object, path) {
+  return object != null && hasPath(object, path, baseHasIn);
+}
+var hasIn_1 = hasIn$1;
 
-/* style inject shadow dom */
+var baseIsEqual = _baseIsEqual,
+  get = get_1,
+  hasIn = hasIn_1,
+  isKey$1 = _isKey,
+  isStrictComparable = _isStrictComparable,
+  matchesStrictComparable = _matchesStrictComparable,
+  toKey$1 = _toKey;
 
-const __vue_component__$6 = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$6,
-  staticRenderFns: __vue_staticRenderFns__$6
-}, __vue_inject_styles__$6, __vue_script__$6, __vue_scope_id__$6, __vue_is_functional_template__$6, __vue_module_identifier__$6, false, undefined, undefined, undefined);
-var OrSelectSearchOptions = __vue_component__$6;
+/** Used to compose bitmasks for value comparisons. */
+var COMPARE_PARTIAL_FLAG = 1,
+  COMPARE_UNORDERED_FLAG = 2;
 
-/** TODO: Use text management library! */
-var script$5 = defineComponent({
-  name: 'OrSelectContentEmpty',
-  props: {
-    search: {
-      type: String,
-      default: ''
-    },
-    noResultsTitle: OR_SELECT_NO_RESULTS_TITLE_PROP,
-    noResultsStartText: OR_SELECT_NO_RESULTS_START_TEXT_PROP,
-    noResultsEndText: OR_SELECT_NO_RESULTS_END_TEXT_PROP,
-    updateSearchText: OR_SELECT_UPDATE_SEARCH_TEXT_PROP
+/**
+ * The base implementation of `_.matchesProperty` which doesn't clone `srcValue`.
+ *
+ * @private
+ * @param {string} path The path of the property to get.
+ * @param {*} srcValue The value to match.
+ * @returns {Function} Returns the new spec function.
+ */
+function baseMatchesProperty$1(path, srcValue) {
+  if (isKey$1(path) && isStrictComparable(srcValue)) {
+    return matchesStrictComparable(toKey$1(path), srcValue);
   }
-});
+  return function (object) {
+    var objValue = get(object, path);
+    return objValue === undefined && objValue === srcValue ? hasIn(object, path) : baseIsEqual(srcValue, objValue, COMPARE_PARTIAL_FLAG | COMPARE_UNORDERED_FLAG);
+  };
+}
+var _baseMatchesProperty = baseMatchesProperty$1;
 
-var css_248z$5 = "@keyframes spinAround-data-v-998c6f28{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-998c6f28{from{opacity:1}to{opacity:0}}.or-select-content-empty[data-v-998c6f28]{display:flex;flex-direction:column;align-items:center;justify-content:center;height:10.625rem}.or-select-content-empty-title[data-v-998c6f28]{font-weight:var(--fw-1)}.or-select-content-empty-description[data-v-998c6f28]{margin-top:.5rem}";
-styleInject(css_248z$5);
+/**
+ * This method returns the first argument it receives.
+ *
+ * @static
+ * @since 0.1.0
+ * @memberOf _
+ * @category Util
+ * @param {*} value Any value.
+ * @returns {*} Returns `value`.
+ * @example
+ *
+ * var object = { 'a': 1 };
+ *
+ * console.log(_.identity(object) === object);
+ * // => true
+ */
+function identity$1(value) {
+  return value;
+}
+var identity_1 = identity$1;
 
-/* script */
-const __vue_script__$5 = script$5;
-/* template */
-var __vue_render__$5 = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('div', {
-    staticClass: "or-select-content-empty"
-  }, [_c('div', {
-    staticClass: "or-select-content-empty-title"
-  }, [_vm._v("\n    " + _vm._s(_vm.noResultsTitle) + "\n  ")]), _vm._v(" "), _vm.search ? [_c('div', {
-    staticClass: "or-select-content-empty-description"
-  }, [_vm._v("\n      " + _vm._s(_vm.noResultsStartText)), _c('strong', [_vm._v(_vm._s(_vm.search))]), _vm._v(_vm._s(_vm.noResultsEndText) + "\n    ")]), _vm._v("\n\n    " + _vm._s(_vm.updateSearchText) + "\n  ")] : _vm._e()], 2);
-};
-var __vue_staticRenderFns__$5 = [];
+var baseGet = _baseGet;
 
-/* style */
-const __vue_inject_styles__$5 = undefined;
-/* scoped */
-const __vue_scope_id__$5 = "data-v-998c6f28";
-/* module identifier */
-const __vue_module_identifier__$5 = undefined;
-/* functional template */
-const __vue_is_functional_template__$5 = false;
-/* style inject */
+/**
+ * A specialized version of `baseProperty` which supports deep paths.
+ *
+ * @private
+ * @param {Array|string} path The path of the property to get.
+ * @returns {Function} Returns the new accessor function.
+ */
+function basePropertyDeep$1(path) {
+  return function (object) {
+    return baseGet(object, path);
+  };
+}
+var _basePropertyDeep = basePropertyDeep$1;
 
-/* style inject SSR */
+var baseProperty = _baseProperty,
+  basePropertyDeep = _basePropertyDeep,
+  isKey = _isKey,
+  toKey = _toKey;
 
-/* style inject shadow dom */
+/**
+ * Creates a function that returns the value at `path` of a given object.
+ *
+ * @static
+ * @memberOf _
+ * @since 2.4.0
+ * @category Util
+ * @param {Array|string} path The path of the property to get.
+ * @returns {Function} Returns the new accessor function.
+ * @example
+ *
+ * var objects = [
+ *   { 'a': { 'b': 2 } },
+ *   { 'a': { 'b': 1 } }
+ * ];
+ *
+ * _.map(objects, _.property('a.b'));
+ * // => [2, 1]
+ *
+ * _.map(_.sortBy(objects, _.property(['a', 'b'])), 'a.b');
+ * // => [1, 2]
+ */
+function property$1(path) {
+  return isKey(path) ? baseProperty(toKey(path)) : basePropertyDeep(path);
+}
+var property_1 = property$1;
 
-const __vue_component__$5 = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$5,
-  staticRenderFns: __vue_staticRenderFns__$5
-}, __vue_inject_styles__$5, __vue_script__$5, __vue_scope_id__$5, __vue_is_functional_template__$5, __vue_module_identifier__$5, false, undefined, undefined, undefined);
-var OrSelectContentEmpty = __vue_component__$5;
+var baseMatches = _baseMatches,
+  baseMatchesProperty = _baseMatchesProperty,
+  identity = identity_1,
+  isArray$1 = isArray_1,
+  property = property_1;
 
-var script$4 = defineComponent({
-  name: 'OrSelectOption',
-  components: {
-    OrCheckbox: __vue_component__$b
-  },
-  props: {
-    option: {
-      type: Object,
-      required: true
-    },
-    isActive: Boolean,
-    isCheckbox: Boolean
-  },
-  emits: ['select-option'],
-  computed: {
-    optionLabel() {
-      var _a;
-      return String((_a = this.option.label) !== null && _a !== void 0 ? _a : this.option.value);
-    }
+/**
+ * The base implementation of `_.iteratee`.
+ *
+ * @private
+ * @param {*} [value=_.identity] The value to convert to an iteratee.
+ * @returns {Function} Returns the iteratee.
+ */
+function baseIteratee$1(value) {
+  // Don't store the `typeof` result in a variable to avoid a JIT bug in Safari 9.
+  // See https://bugs.webkit.org/show_bug.cgi?id=156034 for more details.
+  if (typeof value == 'function') {
+    return value;
   }
-});
-
-var css_248z$4 = "@keyframes spinAround-data-v-710f1291{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-710f1291{from{opacity:1}to{opacity:0}}.or-select-option[data-v-710f1291]{display:flex;align-items:center;height:2.125rem;padding:0 .5rem;cursor:pointer}.or-select-option[data-v-710f1291]:hover{background-color:var(--c-neutral-1)}.or-select-option.active[data-v-710f1291]:not(.checkbox){font-weight:var(--fw-1);background-color:var(--c-neutral-2)}.or-select-option[data-v-710f1291]  .or-checkbox--content,.or-select-option-content[data-v-710f1291]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.or-select-option .or-checkbox[data-v-710f1291]{overflow:hidden}";
-styleInject(css_248z$4);
-
-/* script */
-const __vue_script__$4 = script$4;
-/* template */
-var __vue_render__$4 = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('div', {
-    staticClass: "or-select-option",
-    class: {
-      active: _vm.isActive,
-      checkbox: _vm.isCheckbox
-    },
-    on: {
-      "click": function ($event) {
-        return _vm.$emit('select-option');
-      }
-    }
-  }, [!_vm.isCheckbox ? _c('span', {
-    staticClass: "or-select-option-content"
-  }, [_vm._v("\n    " + _vm._s(_vm.optionLabel) + "\n  ")]) : _vm._e(), _vm._v(" "), _vm.isCheckbox ? _c('or-checkbox', {
-    attrs: {
-      "label": _vm.optionLabel,
-      "model-value": _vm.isActive
-    }
-  }) : _vm._e()], 1);
-};
-var __vue_staticRenderFns__$4 = [];
+  if (value == null) {
+    return identity;
+  }
+  if (typeof value == 'object') {
+    return isArray$1(value) ? baseMatchesProperty(value[0], value[1]) : baseMatches(value);
+  }
+  return property(value);
+}
+var _baseIteratee = baseIteratee$1;
 
-/* style */
-const __vue_inject_styles__$4 = undefined;
-/* scoped */
-const __vue_scope_id__$4 = "data-v-710f1291";
-/* module identifier */
-const __vue_module_identifier__$4 = undefined;
-/* functional template */
-const __vue_is_functional_template__$4 = false;
-/* style inject */
+var arrayAggregator = _arrayAggregator,
+  baseAggregator = _baseAggregator,
+  baseIteratee = _baseIteratee,
+  isArray = isArray_1;
 
-/* style inject SSR */
+/**
+ * Creates a function like `_.groupBy`.
+ *
+ * @private
+ * @param {Function} setter The function to set accumulator values.
+ * @param {Function} [initializer] The accumulator object initializer.
+ * @returns {Function} Returns the new aggregator function.
+ */
+function createAggregator$1(setter, initializer) {
+  return function (collection, iteratee) {
+    var func = isArray(collection) ? arrayAggregator : baseAggregator,
+      accumulator = initializer ? initializer() : {};
+    return func(collection, setter, baseIteratee(iteratee), accumulator);
+  };
+}
+var _createAggregator = createAggregator$1;
 
-/* style inject shadow dom */
+var baseAssignValue = _baseAssignValue,
+  createAggregator = _createAggregator;
 
-const __vue_component__$4 = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$4,
-  staticRenderFns: __vue_staticRenderFns__$4
-}, __vue_inject_styles__$4, __vue_script__$4, __vue_scope_id__$4, __vue_is_functional_template__$4, __vue_module_identifier__$4, false, undefined, undefined, undefined);
-var OrSelectOption = __vue_component__$4;
+/**
+ * Creates an object composed of keys generated from the results of running
+ * each element of `collection` thru `iteratee`. The corresponding value of
+ * each key is the last element responsible for generating the key. The
+ * iteratee is invoked with one argument: (value).
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Collection
+ * @param {Array|Object} collection The collection to iterate over.
+ * @param {Function} [iteratee=_.identity] The iteratee to transform keys.
+ * @returns {Object} Returns the composed aggregate object.
+ * @example
+ *
+ * var array = [
+ *   { 'dir': 'left', 'code': 97 },
+ *   { 'dir': 'right', 'code': 100 }
+ * ];
+ *
+ * _.keyBy(array, function(o) {
+ *   return String.fromCharCode(o.code);
+ * });
+ * // => { 'a': { 'dir': 'left', 'code': 97 }, 'd': { 'dir': 'right', 'code': 100 } }
+ *
+ * _.keyBy(array, 'dir');
+ * // => { 'left': { 'dir': 'left', 'code': 97 }, 'right': { 'dir': 'right', 'code': 100 } }
+ */
+var keyBy = createAggregator(function (result, value, key) {
+  baseAssignValue(result, key, value);
+});
+var keyBy_1 = keyBy;
 
 var script$3 = defineComponent({
-  name: 'OrSelectContentOptions',
+  name: 'OrSelectInputValue',
   components: {
-    OrSelectOption
+    OrChip: __vue_component__$c
   },
   props: {
     value: OR_SELECT_VALUE_PROP,
-    options: OR_SELECT_OPTIONS_PROP,
-    isMultiSelect: Boolean
+    options: OR_SELECT_SEARCH_OPTIONS_PROP,
+    isMultiSelect: Boolean,
+    isDisabled: Boolean
+  },
+  emits: ['delete-value'],
+  computed: {
+    optionsByKey() {
+      return keyBy_1(this.options, 'value');
+    },
+    states() {
+      return {
+        'simple-value': !this.isMultiSelect,
+        'multi-value': this.isMultiSelect
+      };
+    }
   },
-  emits: ['select-option'],
   methods: {
-    isActive(option) {
-      return this.isMultiSelect ? (this.value || []).includes(option.value) : option.value === this.value;
+    getOptionLabel(optionId) {
+      var _a;
+      const option = this.optionsByKey[optionId];
+      return String(option ? (_a = option.label) !== null && _a !== void 0 ? _a : option.value : optionId);
     },
-    /** Bind event and content here, so slot won't have to manage event name and payload */
-    getOnSelectCallback(option) {
-      return () => this.$emit('select-option', option);
+    /** Prevent content toggle event on chips, since they have their own control elements */
+    handleInputValueClick(event) {
+      const inputValueElement = this.$refs['input-value'];
+      const inputValueTextElement = this.$refs['input-value-text'];
+      const target = event.target;
+      if (target !== inputValueElement && target !== inputValueTextElement) {
+        event.stopPropagation();
+      }
     }
   }
 });
 
-var css_248z$3 = ".or-select-content-options[data-v-37fa8f57]{display:flex;flex:1 1 100%;flex-direction:column}";
+var css_248z$3 = "@keyframes spinAround-data-v-100ef33e{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-100ef33e{from{opacity:1}to{opacity:0}}.or-select-input-value[data-v-100ef33e]{display:flex;flex:1 1 100%;overflow:hidden}.or-select-input-value.simple-value[data-v-100ef33e]{align-items:center}.or-select-input-value-text[data-v-100ef33e]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.or-select-input-value.multi-value[data-v-100ef33e]{flex-wrap:wrap;padding:.125rem 0}.or-select-input-value.multi-value .or-chip[data-v-100ef33e]{margin:.125rem}.or-select-input-value.multi-value .or-chip[data-v-100ef33e]:not(.disabled){cursor:default}";
 styleInject(css_248z$3);
 
 /* script */
@@ -1029,37 +1053,36 @@ var __vue_render__$3 = function () {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c('div', {
-    staticClass: "or-select-content-options"
-  }, _vm._l(_vm.options, function (option) {
-    return _c('div', {
-      key: option.value,
-      staticClass: "or-select-content-option-wrapper"
-    }, [_vm._t("content-option", function () {
-      return [_c('or-select-option', {
-        attrs: {
-          "option": option,
-          "is-active": _vm.isActive(option),
-          "is-checkbox": _vm.isMultiSelect
-        },
-        on: {
-          "select-option": function ($event) {
-            return _vm.$emit('select-option', option);
-          }
+    ref: "input-value",
+    staticClass: "or-select-input-value",
+    class: _vm.states,
+    on: {
+      "click": _vm.handleInputValueClick
+    }
+  }, [!_vm.isMultiSelect ? _c('div', {
+    ref: "input-value-text",
+    staticClass: "or-select-input-value-text"
+  }, [_vm._v("\n    " + _vm._s(_vm.getOptionLabel(_vm.value)) + "\n  ")]) : _vm._e(), _vm._v(" "), _vm.isMultiSelect ? _vm._l(_vm.value, function (valueItem) {
+    return _c('or-chip', {
+      key: valueItem,
+      attrs: {
+        "content": _vm.getOptionLabel(valueItem),
+        "is-disabled": _vm.isDisabled
+      },
+      on: {
+        "delete": function ($event) {
+          return _vm.$emit('delete-value', valueItem);
         }
-      })];
-    }, {
-      "option": option,
-      "isActive": _vm.isActive(option),
-      "onSelect": _vm.getOnSelectCallback(option)
-    })], 2);
-  }), 0);
+      }
+    });
+  }) : _vm._e()], 2);
 };
 var __vue_staticRenderFns__$3 = [];
 
 /* style */
 const __vue_inject_styles__$3 = undefined;
 /* scoped */
-const __vue_scope_id__$3 = "data-v-37fa8f57";
+const __vue_scope_id__$3 = "data-v-100ef33e";
 /* module identifier */
 const __vue_module_identifier__$3 = undefined;
 /* functional template */
@@ -1074,54 +1097,52 @@ const __vue_component__$3 = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$3,
   staticRenderFns: __vue_staticRenderFns__$3
 }, __vue_inject_styles__$3, __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, false, undefined, undefined, undefined);
-var OrSelectContentOptions = __vue_component__$3;
+var OrSelectInputValue = __vue_component__$3;
 
 var script$2 = defineComponent({
-  name: 'OrSelectContent',
+  name: 'OrSelectInput',
   components: {
-    OrLoader: __vue_component__$c,
-    OrSelectSearchOptions,
-    OrSelectContentEmpty,
-    OrSelectContentOptions
+    OrIcon: __vue_component__$9,
+    OrSelectInputValue
   },
   props: {
     value: OR_SELECT_VALUE_PROP,
     options: OR_SELECT_OPTIONS_PROP,
-    useSearch: Boolean,
-    isTop: Boolean,
-    isLoading: Boolean,
+    placeholder: OR_SELECT_PLACEHOLDER_PROP,
+    isOpen: Boolean,
     isMultiSelect: Boolean,
-    noResultsTitle: OR_SELECT_NO_RESULTS_TITLE_PROP,
-    noResultsStartText: OR_SELECT_NO_RESULTS_START_TEXT_PROP,
-    noResultsEndText: OR_SELECT_NO_RESULTS_END_TEXT_PROP,
-    updateSearchText: OR_SELECT_UPDATE_SEARCH_TEXT_PROP
-  },
-  emits: ['search-change', 'select-option'],
-  data() {
-    return {
-      search: ''
-    };
+    isTop: Boolean,
+    isDisabled: Boolean,
+    isInvalid: Boolean
   },
+  emits: ['toggle-content', 'delete-value'],
   computed: {
-    showOptions() {
-      return !this.isLoading && this.options.length > 0;
+    icon() {
+      return this.isOpen ? 'arrow_drop_up' : 'arrow_drop_down';
     },
-    showEmptyResult() {
-      return !this.isLoading && !this.options.length;
+    states() {
+      return {
+        open: this.isOpen,
+        error: this.isInvalid,
+        disabled: this.isDisabled,
+        multiselect: this.isMultiSelect,
+        top: this.isTop
+      };
+    },
+    isEmptyValue() {
+      return typeof this.value === 'number' ? false : isEmpty(this.value);
     }
   },
   methods: {
-    handleSearchChange(search) {
-      this.search = search;
-      this.$emit('search-change', search);
-    },
-    handleSelectOption(option) {
-      this.$emit('select-option', option);
+    handleToggleContent() {
+      if (!this.isDisabled) {
+        this.$emit('toggle-content');
+      }
     }
   }
 });
 
-var css_248z$2 = "@keyframes spinAround-data-v-6c988c45{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-6c988c45{from{opacity:1}to{opacity:0}}.or-select-content[data-v-6c988c45]{display:flex;flex-direction:column;overflow:hidden;background-color:var(--c-white);border:1px solid var(--c-neutral-2)}.or-select-content[data-v-6c988c45]:not(.top){border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem;box-shadow:0 .125rem .5rem 0 rgba(0,0,0,.1)}.or-select-content.top[data-v-6c988c45]{border-top-left-radius:.25rem;border-top-right-radius:.25rem;box-shadow:0 -.125rem .5rem 0 rgba(0,0,0,.1)}.or-select-content-main[data-v-6c988c45]{display:flex;flex:1 1 100%;flex-direction:column;max-height:10.625rem;overflow-y:auto}.or-select-content-main.center-content[data-v-6c988c45]{flex:0 0 10.625rem;align-items:center;justify-content:center}";
+var css_248z$2 = "@keyframes spinAround-data-v-4d590135{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-4d590135{from{opacity:1}to{opacity:0}}.or-select-input[data-v-4d590135]{display:flex;padding:0 .5rem;cursor:pointer}.or-select-input.input-wrapper[data-v-4d590135]{min-height:2.25rem;background-color:var(--c-neutral-1);border:1px solid var(--c-neutral-2);border-radius:.25rem}.or-select-input.input-wrapper.error[data-v-4d590135]{border-color:var(--c-error)}.or-select-input.open[data-v-4d590135],.or-select-input[data-v-4d590135]:hover:not(.disabled){background-color:var(--c-white)}.or-select-input.open[data-v-4d590135]{border-color:var(--c-neutral-2)}.or-select-input.open[data-v-4d590135]:not(.top){border-bottom-right-radius:0;border-bottom-left-radius:0}.or-select-input.open.top[data-v-4d590135]{border-top-left-radius:0;border-top-right-radius:0}.or-select-input.disabled[data-v-4d590135]{cursor:not-allowed}.or-select-input.disabled[data-v-4d590135]:not(.multiselect){background-color:var(--c-neutral-1-darken-5)}.or-select-input-placeholder[data-v-4d590135]{display:flex;align-items:center;overflow:hidden;color:var(--c-neutral-4);-webkit-user-select:none;-moz-user-select:none;user-select:none}.or-select-input-placeholder-text[data-v-4d590135]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.or-select-input-button[data-v-4d590135]{display:flex;align-items:center;height:2.125rem;margin-left:auto}.or-select-input-button[data-v-4d590135]  .or-icon{margin-left:.5rem}";
 styleInject(css_248z$2);
 
 /* script */
@@ -1132,67 +1153,46 @@ var __vue_render__$2 = function () {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c('div', {
-    staticClass: "or-select-content",
-    class: {
-      'top': _vm.isTop
-    }
-  }, [_vm.useSearch && !_vm.isTop ? _c('or-select-search-options', {
+    staticClass: "or-select-input input-wrapper",
+    class: _vm.states,
     on: {
-      "search-change": _vm.handleSearchChange
-    }
-  }) : _vm._e(), _vm._v(" "), _c('div', {
-    staticClass: "or-select-content-main",
-    class: {
-      'center-content': _vm.isLoading
+      "click": _vm.handleToggleContent
     }
-  }, [_vm.isLoading ? _c('or-loader') : _vm._e(), _vm._v(" "), _vm.showEmptyResult ? _vm._t("empty-options", function () {
-    return [_c('or-select-content-empty', {
-      attrs: {
-        "search": _vm.search,
-        "no-results-title": _vm.noResultsTitle,
-        "no-results-start-text": _vm.noResultsStartText,
-        "no-results-end-text": _vm.noResultsEndText,
-        "update-search-text": _vm.updateSearchText
-      }
-    })];
-  }, {
-    "search": _vm.search
-  }) : _vm._e(), _vm._v(" "), _vm._t("content-options", function () {
-    return [_vm.showOptions ? _c('or-select-content-options', {
+  }, [_vm.isEmptyValue ? _c('div', {
+    staticClass: "or-select-input-placeholder"
+  }, [_c('span', {
+    staticClass: "or-select-input-placeholder-text"
+  }, [_vm._v("\n      " + _vm._s(_vm.placeholder) + "\n    ")])]) : _vm._e(), _vm._v(" "), !_vm.isEmptyValue ? _vm._t("input-value", function () {
+    return [_c('or-select-input-value', {
       attrs: {
         "value": _vm.value,
         "options": _vm.options,
-        "is-multi-select": _vm.isMultiSelect
+        "is-multi-select": _vm.isMultiSelect,
+        "is-disabled": _vm.isDisabled
       },
       on: {
-        "select-option": function ($event) {
-          return _vm.$emit('select-option', $event);
-        }
-      },
-      scopedSlots: _vm._u([{
-        key: "content-option",
-        fn: function (scope) {
-          return [_vm._t("content-option", null, null, scope)];
+        "delete-value": function ($event) {
+          return _vm.$emit('delete-value', $event);
         }
-      }], null, true)
-    }) : _vm._e()];
+      }
+    })];
   }, {
-    "onSelectOption": _vm.handleSelectOption
-  })], 2), _vm._v(" "), _vm.useSearch && _vm.isTop ? _c('or-select-search-options', {
+    "value": _vm.value,
+    "options": _vm.options
+  }) : _vm._e(), _vm._v(" "), _c('div', {
+    staticClass: "or-select-input-button"
+  }, [_c('or-icon', {
     attrs: {
-      "is-top": ""
-    },
-    on: {
-      "search-change": _vm.handleSearchChange
+      "icon": _vm.icon
     }
-  }) : _vm._e()], 1);
+  })], 1)], 2);
 };
 var __vue_staticRenderFns__$2 = [];
 
 /* style */
 const __vue_inject_styles__$2 = undefined;
 /* scoped */
-const __vue_scope_id__$2 = "data-v-6c988c45";
+const __vue_scope_id__$2 = "data-v-4d590135";
 /* module identifier */
 const __vue_module_identifier__$2 = undefined;
 /* functional template */
@@ -1207,7 +1207,7 @@ const __vue_component__$2 = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$2,
   staticRenderFns: __vue_staticRenderFns__$2
 }, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, false, undefined, undefined, undefined);
-var OrSelectContent = __vue_component__$2;
+var OrSelectInput = __vue_component__$2;
 
 var script$1 = defineComponent({
   name: 'OrSelect',
@@ -1285,7 +1285,7 @@ var script$1 = defineComponent({
   }
 });
 
-var css_248z$1 = "@keyframes spinAround-data-v-16ec6af4{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-16ec6af4{from{opacity:1}to{opacity:0}}.or-select-main[data-v-16ec6af4]{position:relative}.or-select-main .or-select-input[data-v-16ec6af4]{position:relative}.or-floating .or-select-content[data-v-16ec6af4]{width:100%}.or-floating .or-select-content[data-v-16ec6af4]:not(.top){border-top:none}.or-floating .or-select-content.top[data-v-16ec6af4]{border-bottom:none}";
+var css_248z$1 = "@keyframes spinAround-data-v-70c19136{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-70c19136{from{opacity:1}to{opacity:0}}.or-select-main[data-v-70c19136]{position:relative}.or-select-main .or-select-input[data-v-70c19136]{position:relative}.or-floating .or-select-content[data-v-70c19136]{width:100%}.or-floating .or-select-content[data-v-70c19136]:not(.top){border-top:none}.or-floating .or-select-content.top[data-v-70c19136]{border-bottom:none}";
 styleInject(css_248z$1);
 
 /* script */
@@ -1296,7 +1296,7 @@ var __vue_render__$1 = function () {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c('div', {
-    ref: "root",
+    ref: 'root',
     staticClass: "or-select-main",
     class: {
       open: _vm.isOpen
@@ -1380,7 +1380,7 @@ var __vue_staticRenderFns__$1 = [];
 /* style */
 const __vue_inject_styles__$1 = undefined;
 /* scoped */
-const __vue_scope_id__$1 = "data-v-16ec6af4";
+const __vue_scope_id__$1 = "data-v-70c19136";
 /* module identifier */
 const __vue_module_identifier__$1 = undefined;
 /* functional template */