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

package/dist/bundled/v3/components/{OrSelect-86ff24c8.js → OrSelect-ca4f92d4.js}

@@ -1,129 +1,470 @@
-import { k as keys_1, a as isArrayLike_1, b as _Stack, c as _baseIsEqual, d as isArguments_1, e as _isIndex, f as isLength_1, g as _baseAssignValue } from './OrList-2849032e.js';
-import { i as isObject_1, d as isArray_1, l as _baseProperty } from './OrDateTimePicker-70ddd8fa.js';
-import { _ as _castPath, a as _toKey, g as get_1, b as _isKey, c as _baseGet } from './OrRadio-584a9a95.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, Fragment, renderList, createBlock, createElementVNode, renderSlot, createVNode, createTextVNode, withCtx, normalizeProps, guardReactiveProps } from 'vue';
-import { s as styleInject } from './OrAvatar-63d77b2d.js';
+import { k as keys_1, a as isArrayLike_1, b as _Stack, c as _baseIsEqual, d as isArguments_1, e as _isIndex, f as isLength_1, g as _baseAssignValue } from './OrList-92862764.js';
+import { i as isObject_1, d as isArray_1, l as _baseProperty } from './OrDateTimePicker-ecc08f15.js';
+import { _ as _castPath, a as _toKey, g as get_1, b as _isKey, c as _baseGet } from './OrRadio-7a07f978.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, toDisplayString, Fragment, createTextVNode, createCommentVNode, createBlock, renderList, renderSlot, withCtx, normalizeProps, guardReactiveProps } from 'vue';
+import { s as styleInject } from './OrAvatar-bceb6c00.js';
 import { defineComponent, ref } from 'vue-demi';
-import { o as onClickOutside } from './OrBottomSheetV3-c89c08d9.js';
+import { o as onClickOutside } from './OrBottomSheetV3-ec6d69fe.js';
+import { OrIcon as script$9 } from './OrIcon/index.js';
+import script$a from './OrCheckbox/OrCheckbox.js';
+import { OrLoader as script$b } from './OrLoader/index.js';
 import { isEmpty } from '../utils/isEmpty.js';
-import { s as script$9 } from './OrChips-770e0f87.js';
-import { OrIcon as script$a } from './OrIcon/index.js';
-import script$b from './OrCheckbox/OrCheckbox.js';
-import { OrLoader as script$c } from './OrLoader/index.js';
-import { s as script$d } from './OrFloating-7c769e86.js';
+import { s as script$c } from './OrChips-06567038.js';
+import { s as script$d } from './OrFloating-18e0dac6.js';
 import script$e from './OrLabel/OrLabel.js';
 import script$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);
-  }
-  return accumulator;
-}
-var _arrayAggregator = arrayAggregator$1;
+const DEFAULT_TEXT = {
+  SEARCH_PLACEHOLDER: 'Search',
+  SELECT_OPTION_PLACEHOLDER: 'Select option',
+  NO_RESULTS_TITLE: 'No results',
+  NO_RESULTS_START: 'We couldn\'t find ',
+  NO_RESULTS_END: '.',
+  UPDATE_SEARCH: 'Please, update your search criteria.'
+};
+const OR_SELECT_OPTIONS_PROP = {
+  type: Array,
+  default: () => []
+};
+const OR_SELECT_SEARCH_OPTIONS_PROP = {
+  type: Array,
+  default: undefined
+};
+const OR_SELECT_VALUE_PROP = {
+  type: [String, Array, Number],
+  default: undefined
+};
+const OR_SELECT_PLACEHOLDER_PROP = {
+  type: String,
+  default: () => DEFAULT_TEXT.SELECT_OPTION_PLACEHOLDER
+};
+const COMMON_STRING_PROP = {
+  type: String,
+  default: ''
+};
+const SEARCH_OPTIONS_FUNCTION_PROP = {
+  type: Function,
+  default: undefined
+};
+const OR_SELECT_NO_RESULTS_TITLE_PROP = {
+  type: String,
+  default: () => DEFAULT_TEXT.NO_RESULTS_TITLE
+};
+const OR_SELECT_NO_RESULTS_START_TEXT_PROP = {
+  type: String,
+  default: () => DEFAULT_TEXT.NO_RESULTS_START
+};
+const OR_SELECT_NO_RESULTS_END_TEXT_PROP = {
+  type: String,
+  default: () => DEFAULT_TEXT.NO_RESULTS_END
+};
+const OR_SELECT_UPDATE_SEARCH_TEXT_PROP = {
+  type: String,
+  default: () => DEFAULT_TEXT.UPDATE_SEARCH
+};
 
-/**
- * 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 script$8 = defineComponent({
+  name: 'OrSelectSearchOptions',
+  components: {
+    OrIcon: script$9
+  },
+  props: {
+    isTop: {
+      type: Boolean,
+      required: false,
+      default: false
     }
-    return object;
-  };
+  },
+  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);
+    }
+  }
+});
+
+const _hoisted_1$5 = ["value", "placeholder"];
+function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_icon = resolveComponent("or-icon");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["or-select-search-options", {
+      'top': _ctx.isTop
+    }])
+  }, [createElementVNode("input", {
+    class: "or-select-search-options-input",
+    value: _ctx.search,
+    placeholder: _ctx.placeholder,
+    onInput: _cache[0] || (_cache[0] = $event => _ctx.handleSearchChange($event.target.value))
+  }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1$5), createElementVNode("span", {
+    class: "or-select-search-options-button",
+    onClick: _cache[1] || (_cache[1] = $event => _ctx.handleSearchChange(''))
+  }, [createVNode(_component_or_icon, {
+    icon: _ctx.icon
+  }, null, 8 /* PROPS */, ["icon"])])], 2 /* CLASS */);
 }
-var _createBaseFor = createBaseFor$1;
 
-var createBaseFor = _createBaseFor;
+var css_248z$8 = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-2f836793 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-2f836793 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-search-options[data-v-2f836793] {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  height: 2.1875rem;\n  padding: 0 0.5rem;\n}\n.or-select-search-options[data-v-2f836793]:not(.top) {\n  border-bottom: 1px solid var(--c-neutral-2);\n}\n.or-select-search-options.top[data-v-2f836793] {\n  border-top: 1px solid var(--c-neutral-2);\n}\n.or-select-search-options-input[data-v-2f836793] {\n  flex: 1 1 100%;\n  min-width: 0;\n  height: 100%;\n  background: transparent;\n  border: none;\n  outline: none;\n}\n.or-select-search-options-button[data-v-2f836793] {\n  display: flex;\n  padding: 0.125rem;\n  margin-left: 0.5rem;\n  cursor: pointer;\n}\n.or-select-search-options-button[data-v-2f836793] .or-icon {\n  font-size: 1rem;\n  color: var(--c-neutral-4);\n}";
+styleInject(css_248z$8);
 
-/**
- * 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;
+script$8.render = render$8;
+script$8.__scopeId = "data-v-2f836793";
+script$8.__file = "src/components/or-select/partials/OrSelectSearchOptions.vue";
 
-var baseFor = _baseFor,
-  keys$1 = keys_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
+  }
+});
 
-/**
- * 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);
+const _hoisted_1$4 = {
+  class: "or-select-content-empty"
+};
+const _hoisted_2$1 = {
+  class: "or-select-content-empty-title"
+};
+const _hoisted_3$1 = {
+  class: "or-select-content-empty-description"
+};
+function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$4, [createElementVNode("div", _hoisted_2$1, toDisplayString(_ctx.noResultsTitle), 1 /* TEXT */), _ctx.search ? (openBlock(), createElementBlock(Fragment, {
+    key: 0
+  }, [createElementVNode("div", _hoisted_3$1, [createTextVNode(toDisplayString(_ctx.noResultsStartText), 1 /* TEXT */), createElementVNode("strong", null, toDisplayString(_ctx.search), 1 /* TEXT */), createTextVNode(toDisplayString(_ctx.noResultsEndText), 1 /* TEXT */)]), createTextVNode(" " + toDisplayString(_ctx.updateSearchText), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)]);
 }
-var _baseForOwn = baseForOwn$1;
 
-var isArrayLike = isArrayLike_1;
+var css_248z$7 = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-26c01027 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-26c01027 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-content-empty[data-v-26c01027] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 10.625rem;\n}\n.or-select-content-empty-title[data-v-26c01027] {\n  font-weight: var(--fw-1);\n}\n.or-select-content-empty-description[data-v-26c01027] {\n  margin-top: 0.5rem;\n}";
+styleInject(css_248z$7);
 
-/**
- * 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;
-      }
+script$7.render = render$7;
+script$7.__scopeId = "data-v-26c01027";
+script$7.__file = "src/components/or-select/partials/OrSelectContentEmpty.vue";
+
+var script$6 = defineComponent({
+  name: 'OrSelectOption',
+  components: {
+    OrCheckbox: script$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 collection;
-  };
+  }
+});
+
+const _hoisted_1$3 = {
+  key: 0,
+  class: "or-select-option-content"
+};
+function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_checkbox = resolveComponent("or-checkbox");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["or-select-option", {
+      active: _ctx.isActive,
+      checkbox: _ctx.isCheckbox
+    }]),
+    onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('select-option'))
+  }, [!_ctx.isCheckbox ? (openBlock(), createElementBlock("span", _hoisted_1$3, toDisplayString(_ctx.optionLabel), 1 /* TEXT */)) : createCommentVNode("v-if", true), _ctx.isCheckbox ? (openBlock(), createBlock(_component_or_checkbox, {
+    key: 1,
+    label: _ctx.optionLabel,
+    "model-value": _ctx.isActive
+  }, null, 8 /* PROPS */, ["label", "model-value"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
 }
-var _createBaseEach = createBaseEach$1;
 
-var baseForOwn = _baseForOwn,
-  createBaseEach = _createBaseEach;
+var css_248z$6 = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-60e42408 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-60e42408 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-option[data-v-60e42408] {\n  display: flex;\n  align-items: center;\n  height: 2.125rem;\n  padding: 0 0.5rem;\n  cursor: pointer;\n}\n.or-select-option[data-v-60e42408]:hover {\n  background-color: var(--c-neutral-1);\n}\n.or-select-option.active[data-v-60e42408]:not(.checkbox) {\n  font-weight: var(--fw-1);\n  background-color: var(--c-neutral-2);\n}\n.or-select-option-content[data-v-60e42408],\n.or-select-option[data-v-60e42408] .or-checkbox--content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.or-select-option .or-checkbox[data-v-60e42408] {\n  overflow: hidden;\n}";
+styleInject(css_248z$6);
+
+script$6.render = render$6;
+script$6.__scopeId = "data-v-60e42408";
+script$6.__file = "src/components/or-select/partials/OrSelectOption.vue";
+
+var script$5 = defineComponent({
+  name: 'OrSelectContentOptions',
+  components: {
+    OrSelectOption: script$6
+  },
+  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);
+    }
+  }
+});
+
+const _hoisted_1$2 = {
+  class: "or-select-content-options"
+};
+function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_select_option = resolveComponent("or-select-option");
+  return openBlock(), createElementBlock("div", _hoisted_1$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, option => {
+    return openBlock(), createElementBlock("div", {
+      key: option.value,
+      class: "or-select-content-option-wrapper"
+    }, [renderSlot(_ctx.$slots, "content-option", {
+      option: option,
+      isActive: _ctx.isActive(option),
+      onSelect: _ctx.getOnSelectCallback(option)
+    }, () => [createVNode(_component_or_select_option, {
+      option: option,
+      "is-active": _ctx.isActive(option),
+      "is-checkbox": _ctx.isMultiSelect,
+      onSelectOption: $event => _ctx.$emit('select-option', option)
+    }, null, 8 /* PROPS */, ["option", "is-active", "is-checkbox", "onSelectOption"])])]);
+  }), 128 /* KEYED_FRAGMENT */))]);
+}
+
+var css_248z$5 = ".or-select-content-options[data-v-5b1a5878] {\n  display: flex;\n  flex: 1 1 100%;\n  flex-direction: column;\n}";
+styleInject(css_248z$5);
+
+script$5.render = render$5;
+script$5.__scopeId = "data-v-5b1a5878";
+script$5.__file = "src/components/or-select/partials/OrSelectContentOptions.vue";
+
+var script$4 = defineComponent({
+  name: 'OrSelectContent',
+  components: {
+    OrLoader: script$b,
+    OrSelectSearchOptions: script$8,
+    OrSelectContentEmpty: script$7,
+    OrSelectContentOptions: script$5
+  },
+  props: {
+    value: OR_SELECT_VALUE_PROP,
+    options: OR_SELECT_OPTIONS_PROP,
+    useSearch: Boolean,
+    isTop: 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: ''
+    };
+  },
+  computed: {
+    showOptions() {
+      return !this.isLoading && this.options.length > 0;
+    },
+    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);
+    }
+  }
+});
+
+function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_select_search_options = resolveComponent("or-select-search-options");
+  const _component_or_loader = resolveComponent("or-loader");
+  const _component_or_select_content_empty = resolveComponent("or-select-content-empty");
+  const _component_or_select_content_options = resolveComponent("or-select-content-options");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["or-select-content", {
+      'top': _ctx.isTop
+    }])
+  }, [_ctx.useSearch && !_ctx.isTop ? (openBlock(), createBlock(_component_or_select_search_options, {
+    key: 0,
+    onSearchChange: _ctx.handleSearchChange
+  }, null, 8 /* PROPS */, ["onSearchChange"])) : createCommentVNode("v-if", true), createElementVNode("div", {
+    class: normalizeClass(["or-select-content-main", {
+      'center-content': _ctx.isLoading
+    }])
+  }, [_ctx.isLoading ? (openBlock(), createBlock(_component_or_loader, {
+    key: 0
+  })) : createCommentVNode("v-if", true), _ctx.showEmptyResult ? renderSlot(_ctx.$slots, "empty-options", {
+    key: 1,
+    search: _ctx.search
+  }, () => [createVNode(_component_or_select_content_empty, {
+    search: _ctx.search,
+    "no-results-title": _ctx.noResultsTitle,
+    "no-results-start-text": _ctx.noResultsStartText,
+    "no-results-end-text": _ctx.noResultsEndText,
+    "update-search-text": _ctx.updateSearchText
+  }, null, 8 /* PROPS */, ["search", "no-results-title", "no-results-start-text", "no-results-end-text", "update-search-text"])]) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "content-options", {
+    onSelectOption: _ctx.handleSelectOption
+  }, () => [_ctx.showOptions ? (openBlock(), createBlock(_component_or_select_content_options, {
+    key: 0,
+    value: _ctx.value,
+    options: _ctx.options,
+    "is-multi-select": _ctx.isMultiSelect,
+    onSelectOption: _cache[0] || (_cache[0] = $event => _ctx.$emit('select-option', $event))
+  }, {
+    "content-option": withCtx(scope => [renderSlot(_ctx.$slots, "content-option", normalizeProps(guardReactiveProps(scope)))]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["value", "options", "is-multi-select"])) : createCommentVNode("v-if", true)])], 2 /* CLASS */), _ctx.useSearch && _ctx.isTop ? (openBlock(), createBlock(_component_or_select_search_options, {
+    key: 1,
+    "is-top": "",
+    onSearchChange: _ctx.handleSearchChange
+  }, null, 8 /* PROPS */, ["onSearchChange"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
+}
+
+var css_248z$4 = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-87277314 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-87277314 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-content[data-v-87277314] {\n  /* Should fit up to 5 rows by default */\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background-color: var(--c-white);\n  border: 1px solid var(--c-neutral-2);\n}\n.or-select-content[data-v-87277314]:not(.top) {\n  border-bottom-right-radius: 0.25rem;\n  border-bottom-left-radius: 0.25rem;\n  box-shadow: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.1);\n}\n.or-select-content.top[data-v-87277314] {\n  border-top-left-radius: 0.25rem;\n  border-top-right-radius: 0.25rem;\n  box-shadow: 0 -0.125rem 0.5rem 0 rgba(0, 0, 0, 0.1);\n}\n.or-select-content-main[data-v-87277314] {\n  display: flex;\n  flex: 1 1 100%;\n  flex-direction: column;\n  max-height: 10.625rem;\n  overflow-y: auto;\n}\n.or-select-content-main.center-content[data-v-87277314] {\n  flex: 0 0 10.625rem;\n  align-items: center;\n  justify-content: center;\n}";
+styleInject(css_248z$4);
+
+script$4.render = render$4;
+script$4.__scopeId = "data-v-87277314";
+script$4.__file = "src/components/or-select/partials/OrSelectContent.vue";
+
+/**
+ * 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.
@@ -326,741 +667,400 @@ function hasPath$1(object, path, hasFunc) {
   while (++index < length) {
     var key = toKey$2(path[index]);
     if (!(result = object != null && hasFunc(object, key))) {
-      break;
-    }
-    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 keyBy$1 = keyBy_1;
-
-const DEFAULT_TEXT = {
-  SEARCH_PLACEHOLDER: 'Search',
-  SELECT_OPTION_PLACEHOLDER: 'Select option',
-  NO_RESULTS_TITLE: 'No results',
-  NO_RESULTS_START: 'We couldn\'t find ',
-  NO_RESULTS_END: '.',
-  UPDATE_SEARCH: 'Please, update your search criteria.'
-};
-const OR_SELECT_OPTIONS_PROP = {
-  type: Array,
-  default: () => []
-};
-const OR_SELECT_SEARCH_OPTIONS_PROP = {
-  type: Array,
-  default: undefined
-};
-const OR_SELECT_VALUE_PROP = {
-  type: [String, Array, Number],
-  default: undefined
-};
-const OR_SELECT_PLACEHOLDER_PROP = {
-  type: String,
-  default: () => DEFAULT_TEXT.SELECT_OPTION_PLACEHOLDER
-};
-const COMMON_STRING_PROP = {
-  type: String,
-  default: ''
-};
-const SEARCH_OPTIONS_FUNCTION_PROP = {
-  type: Function,
-  default: undefined
-};
-const OR_SELECT_NO_RESULTS_TITLE_PROP = {
-  type: String,
-  default: () => DEFAULT_TEXT.NO_RESULTS_TITLE
-};
-const OR_SELECT_NO_RESULTS_START_TEXT_PROP = {
-  type: String,
-  default: () => DEFAULT_TEXT.NO_RESULTS_START
-};
-const OR_SELECT_NO_RESULTS_END_TEXT_PROP = {
-  type: String,
-  default: () => DEFAULT_TEXT.NO_RESULTS_END
-};
-const OR_SELECT_UPDATE_SEARCH_TEXT_PROP = {
-  type: String,
-  default: () => DEFAULT_TEXT.UPDATE_SEARCH
-};
-
-var script$8 = defineComponent({
-  name: 'OrSelectInputValue',
-  components: {
-    OrChip: script$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();
-      }
-    }
-  }
-});
-
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_or_chip = resolveComponent("or-chip");
-  return openBlock(), createElementBlock("div", {
-    ref: "input-value",
-    class: normalizeClass(["or-select-input-value", _ctx.states]),
-    onClick: _cache[0] || (_cache[0] = function () {
-      return _ctx.handleInputValueClick && _ctx.handleInputValueClick(...arguments);
-    })
-  }, [!_ctx.isMultiSelect ? (openBlock(), createElementBlock("div", {
-    key: 0,
-    ref: "input-value-text",
-    class: "or-select-input-value-text"
-  }, toDisplayString(_ctx.getOptionLabel(_ctx.value)), 513 /* TEXT, NEED_PATCH */)) : createCommentVNode("v-if", true), _ctx.isMultiSelect ? (openBlock(true), createElementBlock(Fragment, {
-    key: 1
-  }, renderList(_ctx.value, valueItem => {
-    return openBlock(), createBlock(_component_or_chip, {
-      key: valueItem,
-      content: _ctx.getOptionLabel(valueItem),
-      "is-disabled": _ctx.isDisabled,
-      onDelete: $event => _ctx.$emit('delete-value', valueItem)
-    }, null, 8 /* PROPS */, ["content", "is-disabled", "onDelete"]);
-  }), 128 /* KEYED_FRAGMENT */)) : createCommentVNode("v-if", true)], 2 /* CLASS */);
-}
-
-var css_248z$8 = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-7e5504da {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-7e5504da {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-input-value[data-v-7e5504da] {\n  display: flex;\n  flex: 1 1 100%;\n  overflow: hidden;\n}\n.or-select-input-value.simple-value[data-v-7e5504da] {\n  align-items: center;\n}\n.or-select-input-value-text[data-v-7e5504da] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.or-select-input-value.multi-value[data-v-7e5504da] {\n  flex-wrap: wrap;\n  padding: 0.125rem 0;\n}\n.or-select-input-value.multi-value .or-chip[data-v-7e5504da] {\n  margin: 0.125rem;\n}\n.or-select-input-value.multi-value .or-chip[data-v-7e5504da]:not(.disabled) {\n  cursor: default;\n}";
-styleInject(css_248z$8);
-
-script$8.render = render$8;
-script$8.__scopeId = "data-v-7e5504da";
-script$8.__file = "src/components/or-select/partials/OrSelectInputValue.vue";
-
-var script$7 = defineComponent({
-  name: 'OrSelectInput',
-  components: {
-    OrIcon: script$a,
-    OrSelectInputValue: script$8
-  },
-  props: {
-    value: OR_SELECT_VALUE_PROP,
-    options: OR_SELECT_OPTIONS_PROP,
-    placeholder: OR_SELECT_PLACEHOLDER_PROP,
-    isOpen: Boolean,
-    isMultiSelect: Boolean,
-    isTop: Boolean,
-    isDisabled: Boolean,
-    isInvalid: Boolean
-  },
-  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
-      };
-    },
-    isEmptyValue() {
-      return typeof this.value === 'number' ? false : isEmpty(this.value);
-    }
-  },
-  methods: {
-    handleToggleContent() {
-      if (!this.isDisabled) {
-        this.$emit('toggle-content');
-      }
-    }
-  }
-});
-
-const _hoisted_1$5 = {
-  key: 0,
-  class: "or-select-input-placeholder"
-};
-const _hoisted_2$1 = {
-  class: "or-select-input-placeholder-text"
-};
-const _hoisted_3$1 = {
-  class: "or-select-input-button"
-};
-function render$7(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_or_select_input_value = resolveComponent("or-select-input-value");
-  const _component_or_icon = resolveComponent("or-icon");
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass(["or-select-input input-wrapper", _ctx.states]),
-    onClick: _cache[1] || (_cache[1] = function () {
-      return _ctx.handleToggleContent && _ctx.handleToggleContent(...arguments);
-    })
-  }, [_ctx.isEmptyValue ? (openBlock(), createElementBlock("div", _hoisted_1$5, [createElementVNode("span", _hoisted_2$1, toDisplayString(_ctx.placeholder), 1 /* TEXT */)])) : createCommentVNode("v-if", true), !_ctx.isEmptyValue ? renderSlot(_ctx.$slots, "input-value", {
-    key: 1,
-    value: _ctx.value,
-    options: _ctx.options
-  }, () => [createVNode(_component_or_select_input_value, {
-    value: _ctx.value,
-    options: _ctx.options,
-    "is-multi-select": _ctx.isMultiSelect,
-    "is-disabled": _ctx.isDisabled,
-    onDeleteValue: _cache[0] || (_cache[0] = $event => _ctx.$emit('delete-value', $event))
-  }, null, 8 /* PROPS */, ["value", "options", "is-multi-select", "is-disabled"])]) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_3$1, [createVNode(_component_or_icon, {
-    icon: _ctx.icon
-  }, null, 8 /* PROPS */, ["icon"])])], 2 /* CLASS */);
+      break;
+    }
+    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 css_248z$7 = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-d093e2f2 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-d093e2f2 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-input[data-v-d093e2f2] {\n  display: flex;\n  padding: 0 0.5rem;\n  cursor: pointer;\n}\n.or-select-input.input-wrapper[data-v-d093e2f2] {\n  min-height: 2.25rem;\n  background-color: var(--c-neutral-1);\n  border: 1px solid var(--c-neutral-2);\n  border-radius: 0.25rem;\n}\n.or-select-input.input-wrapper.error[data-v-d093e2f2] {\n  border-color: var(--c-error);\n}\n.or-select-input[data-v-d093e2f2]:hover:not(.disabled), .or-select-input.open[data-v-d093e2f2] {\n  background-color: var(--c-white);\n}\n.or-select-input.open[data-v-d093e2f2] {\n  border-color: var(--c-neutral-2);\n}\n.or-select-input.open[data-v-d093e2f2]:not(.top) {\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.or-select-input.open.top[data-v-d093e2f2] {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n.or-select-input.disabled[data-v-d093e2f2] {\n  cursor: not-allowed;\n}\n.or-select-input.disabled[data-v-d093e2f2]:not(.multiselect) {\n  background-color: var(--c-neutral-1-darken-5);\n}\n.or-select-input-placeholder[data-v-d093e2f2] {\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  color: var(--c-neutral-4);\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.or-select-input-placeholder-text[data-v-d093e2f2] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.or-select-input-button[data-v-d093e2f2] {\n  display: flex;\n  align-items: center;\n  height: 2.125rem;\n  margin-left: auto;\n}\n.or-select-input-button[data-v-d093e2f2] .or-icon {\n  margin-left: 0.5rem;\n}";
-styleInject(css_248z$7);
+var baseHasIn = _baseHasIn,
+  hasPath = _hasPath;
 
-script$7.render = render$7;
-script$7.__scopeId = "data-v-d093e2f2";
-script$7.__file = "src/components/or-select/partials/OrSelectInput.vue";
+/**
+ * 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 script$6 = defineComponent({
-  name: 'OrSelectSearchOptions',
-  components: {
-    OrIcon: script$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);
-    }
+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;
 
-const _hoisted_1$4 = ["value", "placeholder"];
-function render$6(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_or_icon = resolveComponent("or-icon");
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass(["or-select-search-options", {
-      'top': _ctx.isTop
-    }])
-  }, [createElementVNode("input", {
-    class: "or-select-search-options-input",
-    value: _ctx.search,
-    placeholder: _ctx.placeholder,
-    onInput: _cache[0] || (_cache[0] = $event => _ctx.handleSearchChange($event.target.value))
-  }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1$4), createElementVNode("span", {
-    class: "or-select-search-options-button",
-    onClick: _cache[1] || (_cache[1] = $event => _ctx.handleSearchChange(''))
-  }, [createVNode(_component_or_icon, {
-    icon: _ctx.icon
-  }, null, 8 /* PROPS */, ["icon"])])], 2 /* CLASS */);
+/**
+ * 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 css_248z$6 = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-2f836793 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-2f836793 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-search-options[data-v-2f836793] {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  height: 2.1875rem;\n  padding: 0 0.5rem;\n}\n.or-select-search-options[data-v-2f836793]:not(.top) {\n  border-bottom: 1px solid var(--c-neutral-2);\n}\n.or-select-search-options.top[data-v-2f836793] {\n  border-top: 1px solid var(--c-neutral-2);\n}\n.or-select-search-options-input[data-v-2f836793] {\n  flex: 1 1 100%;\n  min-width: 0;\n  height: 100%;\n  background: transparent;\n  border: none;\n  outline: none;\n}\n.or-select-search-options-button[data-v-2f836793] {\n  display: flex;\n  padding: 0.125rem;\n  margin-left: 0.5rem;\n  cursor: pointer;\n}\n.or-select-search-options-button[data-v-2f836793] .or-icon {\n  font-size: 1rem;\n  color: var(--c-neutral-4);\n}";
-styleInject(css_248z$6);
+var baseGet = _baseGet;
 
-script$6.render = render$6;
-script$6.__scopeId = "data-v-2f836793";
-script$6.__file = "src/components/or-select/partials/OrSelectSearchOptions.vue";
+/**
+ * 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;
 
-/** 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
-  }
-});
+var baseProperty = _baseProperty,
+  basePropertyDeep = _basePropertyDeep,
+  isKey = _isKey,
+  toKey = _toKey;
 
-const _hoisted_1$3 = {
-  class: "or-select-content-empty"
-};
-const _hoisted_2 = {
-  class: "or-select-content-empty-title"
-};
-const _hoisted_3 = {
-  class: "or-select-content-empty-description"
-};
-function render$5(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$3, [createElementVNode("div", _hoisted_2, toDisplayString(_ctx.noResultsTitle), 1 /* TEXT */), _ctx.search ? (openBlock(), createElementBlock(Fragment, {
-    key: 0
-  }, [createElementVNode("div", _hoisted_3, [createTextVNode(toDisplayString(_ctx.noResultsStartText), 1 /* TEXT */), createElementVNode("strong", null, toDisplayString(_ctx.search), 1 /* TEXT */), createTextVNode(toDisplayString(_ctx.noResultsEndText), 1 /* TEXT */)]), createTextVNode(" " + toDisplayString(_ctx.updateSearchText), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)]);
+/**
+ * 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 css_248z$5 = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-26c01027 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-26c01027 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-content-empty[data-v-26c01027] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 10.625rem;\n}\n.or-select-content-empty-title[data-v-26c01027] {\n  font-weight: var(--fw-1);\n}\n.or-select-content-empty-description[data-v-26c01027] {\n  margin-top: 0.5rem;\n}";
-styleInject(css_248z$5);
-
-script$5.render = render$5;
-script$5.__scopeId = "data-v-26c01027";
-script$5.__file = "src/components/or-select/partials/OrSelectContentEmpty.vue";
+var baseMatches = _baseMatches,
+  baseMatchesProperty = _baseMatchesProperty,
+  identity = identity_1,
+  isArray$1 = isArray_1,
+  property = property_1;
 
-var script$4 = defineComponent({
-  name: 'OrSelectOption',
-  components: {
-    OrCheckbox: script$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;
   }
-});
+  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;
 
-const _hoisted_1$2 = {
-  key: 0,
-  class: "or-select-option-content"
-};
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_or_checkbox = resolveComponent("or-checkbox");
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass(["or-select-option", {
-      active: _ctx.isActive,
-      checkbox: _ctx.isCheckbox
-    }]),
-    onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('select-option'))
-  }, [!_ctx.isCheckbox ? (openBlock(), createElementBlock("span", _hoisted_1$2, toDisplayString(_ctx.optionLabel), 1 /* TEXT */)) : createCommentVNode("v-if", true), _ctx.isCheckbox ? (openBlock(), createBlock(_component_or_checkbox, {
-    key: 1,
-    label: _ctx.optionLabel,
-    "model-value": _ctx.isActive
-  }, null, 8 /* PROPS */, ["label", "model-value"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
+/**
+ * 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 css_248z$4 = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-60e42408 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-60e42408 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-option[data-v-60e42408] {\n  display: flex;\n  align-items: center;\n  height: 2.125rem;\n  padding: 0 0.5rem;\n  cursor: pointer;\n}\n.or-select-option[data-v-60e42408]:hover {\n  background-color: var(--c-neutral-1);\n}\n.or-select-option.active[data-v-60e42408]:not(.checkbox) {\n  font-weight: var(--fw-1);\n  background-color: var(--c-neutral-2);\n}\n.or-select-option-content[data-v-60e42408],\n.or-select-option[data-v-60e42408] .or-checkbox--content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.or-select-option .or-checkbox[data-v-60e42408] {\n  overflow: hidden;\n}";
-styleInject(css_248z$4);
+var baseAssignValue = _baseAssignValue,
+  createAggregator = _createAggregator;
 
-script$4.render = render$4;
-script$4.__scopeId = "data-v-60e42408";
-script$4.__file = "src/components/or-select/partials/OrSelectOption.vue";
+/**
+ * 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 keyBy$1 = keyBy_1;
 
 var script$3 = defineComponent({
-  name: 'OrSelectContentOptions',
+  name: 'OrSelectInputValue',
   components: {
-    OrSelectOption: script$4
+    OrChip: script$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();
+      }
     }
   }
 });
 
-const _hoisted_1$1 = {
-  class: "or-select-content-options"
-};
 function render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_or_select_option = resolveComponent("or-select-option");
-  return openBlock(), createElementBlock("div", _hoisted_1$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, option => {
-    return openBlock(), createElementBlock("div", {
-      key: option.value,
-      class: "or-select-content-option-wrapper"
-    }, [renderSlot(_ctx.$slots, "content-option", {
-      option: option,
-      isActive: _ctx.isActive(option),
-      onSelect: _ctx.getOnSelectCallback(option)
-    }, () => [createVNode(_component_or_select_option, {
-      option: option,
-      "is-active": _ctx.isActive(option),
-      "is-checkbox": _ctx.isMultiSelect,
-      onSelectOption: $event => _ctx.$emit('select-option', option)
-    }, null, 8 /* PROPS */, ["option", "is-active", "is-checkbox", "onSelectOption"])])]);
-  }), 128 /* KEYED_FRAGMENT */))]);
+  const _component_or_chip = resolveComponent("or-chip");
+  return openBlock(), createElementBlock("div", {
+    ref: "input-value",
+    class: normalizeClass(["or-select-input-value", _ctx.states]),
+    onClick: _cache[0] || (_cache[0] = function () {
+      return _ctx.handleInputValueClick && _ctx.handleInputValueClick(...arguments);
+    })
+  }, [!_ctx.isMultiSelect ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    ref: "input-value-text",
+    class: "or-select-input-value-text"
+  }, toDisplayString(_ctx.getOptionLabel(_ctx.value)), 513 /* TEXT, NEED_PATCH */)) : createCommentVNode("v-if", true), _ctx.isMultiSelect ? (openBlock(true), createElementBlock(Fragment, {
+    key: 1
+  }, renderList(_ctx.value, valueItem => {
+    return openBlock(), createBlock(_component_or_chip, {
+      key: valueItem,
+      content: _ctx.getOptionLabel(valueItem),
+      "is-disabled": _ctx.isDisabled,
+      onDelete: $event => _ctx.$emit('delete-value', valueItem)
+    }, null, 8 /* PROPS */, ["content", "is-disabled", "onDelete"]);
+  }), 128 /* KEYED_FRAGMENT */)) : createCommentVNode("v-if", true)], 2 /* CLASS */);
 }
 
-var css_248z$3 = ".or-select-content-options[data-v-5b1a5878] {\n  display: flex;\n  flex: 1 1 100%;\n  flex-direction: column;\n}";
+var css_248z$3 = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-7e5504da {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-7e5504da {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-input-value[data-v-7e5504da] {\n  display: flex;\n  flex: 1 1 100%;\n  overflow: hidden;\n}\n.or-select-input-value.simple-value[data-v-7e5504da] {\n  align-items: center;\n}\n.or-select-input-value-text[data-v-7e5504da] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.or-select-input-value.multi-value[data-v-7e5504da] {\n  flex-wrap: wrap;\n  padding: 0.125rem 0;\n}\n.or-select-input-value.multi-value .or-chip[data-v-7e5504da] {\n  margin: 0.125rem;\n}\n.or-select-input-value.multi-value .or-chip[data-v-7e5504da]:not(.disabled) {\n  cursor: default;\n}";
 styleInject(css_248z$3);
 
 script$3.render = render$3;
-script$3.__scopeId = "data-v-5b1a5878";
-script$3.__file = "src/components/or-select/partials/OrSelectContentOptions.vue";
+script$3.__scopeId = "data-v-7e5504da";
+script$3.__file = "src/components/or-select/partials/OrSelectInputValue.vue";
 
 var script$2 = defineComponent({
-  name: 'OrSelectContent',
+  name: 'OrSelectInput',
   components: {
-    OrLoader: script$c,
-    OrSelectSearchOptions: script$6,
-    OrSelectContentEmpty: script$5,
-    OrSelectContentOptions: script$3
+    OrIcon: script$9,
+    OrSelectInputValue: script$3
   },
   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');
+      }
     }
   }
 });
 
+const _hoisted_1$1 = {
+  key: 0,
+  class: "or-select-input-placeholder"
+};
+const _hoisted_2 = {
+  class: "or-select-input-placeholder-text"
+};
+const _hoisted_3 = {
+  class: "or-select-input-button"
+};
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_or_select_search_options = resolveComponent("or-select-search-options");
-  const _component_or_loader = resolveComponent("or-loader");
-  const _component_or_select_content_empty = resolveComponent("or-select-content-empty");
-  const _component_or_select_content_options = resolveComponent("or-select-content-options");
+  const _component_or_select_input_value = resolveComponent("or-select-input-value");
+  const _component_or_icon = resolveComponent("or-icon");
   return openBlock(), createElementBlock("div", {
-    class: normalizeClass(["or-select-content", {
-      'top': _ctx.isTop
-    }])
-  }, [_ctx.useSearch && !_ctx.isTop ? (openBlock(), createBlock(_component_or_select_search_options, {
-    key: 0,
-    onSearchChange: _ctx.handleSearchChange
-  }, null, 8 /* PROPS */, ["onSearchChange"])) : createCommentVNode("v-if", true), createElementVNode("div", {
-    class: normalizeClass(["or-select-content-main", {
-      'center-content': _ctx.isLoading
-    }])
-  }, [_ctx.isLoading ? (openBlock(), createBlock(_component_or_loader, {
-    key: 0
-  })) : createCommentVNode("v-if", true), _ctx.showEmptyResult ? renderSlot(_ctx.$slots, "empty-options", {
+    class: normalizeClass(["or-select-input input-wrapper", _ctx.states]),
+    onClick: _cache[1] || (_cache[1] = function () {
+      return _ctx.handleToggleContent && _ctx.handleToggleContent(...arguments);
+    })
+  }, [_ctx.isEmptyValue ? (openBlock(), createElementBlock("div", _hoisted_1$1, [createElementVNode("span", _hoisted_2, toDisplayString(_ctx.placeholder), 1 /* TEXT */)])) : createCommentVNode("v-if", true), !_ctx.isEmptyValue ? renderSlot(_ctx.$slots, "input-value", {
     key: 1,
-    search: _ctx.search
-  }, () => [createVNode(_component_or_select_content_empty, {
-    search: _ctx.search,
-    "no-results-title": _ctx.noResultsTitle,
-    "no-results-start-text": _ctx.noResultsStartText,
-    "no-results-end-text": _ctx.noResultsEndText,
-    "update-search-text": _ctx.updateSearchText
-  }, null, 8 /* PROPS */, ["search", "no-results-title", "no-results-start-text", "no-results-end-text", "update-search-text"])]) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "content-options", {
-    onSelectOption: _ctx.handleSelectOption
-  }, () => [_ctx.showOptions ? (openBlock(), createBlock(_component_or_select_content_options, {
-    key: 0,
+    value: _ctx.value,
+    options: _ctx.options
+  }, () => [createVNode(_component_or_select_input_value, {
     value: _ctx.value,
     options: _ctx.options,
     "is-multi-select": _ctx.isMultiSelect,
-    onSelectOption: _cache[0] || (_cache[0] = $event => _ctx.$emit('select-option', $event))
-  }, {
-    "content-option": withCtx(scope => [renderSlot(_ctx.$slots, "content-option", normalizeProps(guardReactiveProps(scope)))]),
-    _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["value", "options", "is-multi-select"])) : createCommentVNode("v-if", true)])], 2 /* CLASS */), _ctx.useSearch && _ctx.isTop ? (openBlock(), createBlock(_component_or_select_search_options, {
-    key: 1,
-    "is-top": "",
-    onSearchChange: _ctx.handleSearchChange
-  }, null, 8 /* PROPS */, ["onSearchChange"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
+    "is-disabled": _ctx.isDisabled,
+    onDeleteValue: _cache[0] || (_cache[0] = $event => _ctx.$emit('delete-value', $event))
+  }, null, 8 /* PROPS */, ["value", "options", "is-multi-select", "is-disabled"])]) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_3, [createVNode(_component_or_icon, {
+    icon: _ctx.icon
+  }, null, 8 /* PROPS */, ["icon"])])], 2 /* CLASS */);
 }
 
-var css_248z$2 = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-87277314 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-87277314 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-content[data-v-87277314] {\n  /* Should fit up to 5 rows by default */\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background-color: var(--c-white);\n  border: 1px solid var(--c-neutral-2);\n}\n.or-select-content[data-v-87277314]:not(.top) {\n  border-bottom-right-radius: 0.25rem;\n  border-bottom-left-radius: 0.25rem;\n  box-shadow: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.1);\n}\n.or-select-content.top[data-v-87277314] {\n  border-top-left-radius: 0.25rem;\n  border-top-right-radius: 0.25rem;\n  box-shadow: 0 -0.125rem 0.5rem 0 rgba(0, 0, 0, 0.1);\n}\n.or-select-content-main[data-v-87277314] {\n  display: flex;\n  flex: 1 1 100%;\n  flex-direction: column;\n  max-height: 10.625rem;\n  overflow-y: auto;\n}\n.or-select-content-main.center-content[data-v-87277314] {\n  flex: 0 0 10.625rem;\n  align-items: center;\n  justify-content: center;\n}";
+var css_248z$2 = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-d093e2f2 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-d093e2f2 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-input[data-v-d093e2f2] {\n  display: flex;\n  padding: 0 0.5rem;\n  cursor: pointer;\n}\n.or-select-input.input-wrapper[data-v-d093e2f2] {\n  min-height: 2.25rem;\n  background-color: var(--c-neutral-1);\n  border: 1px solid var(--c-neutral-2);\n  border-radius: 0.25rem;\n}\n.or-select-input.input-wrapper.error[data-v-d093e2f2] {\n  border-color: var(--c-error);\n}\n.or-select-input[data-v-d093e2f2]:hover:not(.disabled), .or-select-input.open[data-v-d093e2f2] {\n  background-color: var(--c-white);\n}\n.or-select-input.open[data-v-d093e2f2] {\n  border-color: var(--c-neutral-2);\n}\n.or-select-input.open[data-v-d093e2f2]:not(.top) {\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.or-select-input.open.top[data-v-d093e2f2] {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n.or-select-input.disabled[data-v-d093e2f2] {\n  cursor: not-allowed;\n}\n.or-select-input.disabled[data-v-d093e2f2]:not(.multiselect) {\n  background-color: var(--c-neutral-1-darken-5);\n}\n.or-select-input-placeholder[data-v-d093e2f2] {\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  color: var(--c-neutral-4);\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.or-select-input-placeholder-text[data-v-d093e2f2] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.or-select-input-button[data-v-d093e2f2] {\n  display: flex;\n  align-items: center;\n  height: 2.125rem;\n  margin-left: auto;\n}\n.or-select-input-button[data-v-d093e2f2] .or-icon {\n  margin-left: 0.5rem;\n}";
 styleInject(css_248z$2);
 
 script$2.render = render$2;
-script$2.__scopeId = "data-v-87277314";
-script$2.__file = "src/components/or-select/partials/OrSelectContent.vue";
+script$2.__scopeId = "data-v-d093e2f2";
+script$2.__file = "src/components/or-select/partials/OrSelectInput.vue";
 
 var script$1 = defineComponent({
   name: 'OrSelect',
   components: {
-    OrSelectInput: script$7,
-    OrSelectContent: script$2,
+    OrSelectInput: script$2,
+    OrSelectContent: script$4,
     OrFloating: script$d
   },
   props: {
@@ -1137,7 +1137,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_or_select_content = resolveComponent("or-select-content");
   const _component_or_floating = resolveComponent("or-floating");
   return openBlock(), createElementBlock("div", {
-    ref: "root",
+    ref: 'root',
     class: normalizeClass(["or-select-main", {
       open: _ctx.isOpen
     }])