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

package/dist/esm/v3/{OrSelect-c87b9c23.js → OrSelect-4f2ea2f2.js}

@@ -1,15 +1,15 @@
 import { defineComponent, ref } from 'vue-demi';
 import { onClickOutside } from '@vueuse/core';
+import { s as script$d } from './OrFloating-c875c590.js';
+import { s as script$b } from './OrLoader-0b463089.js';
+import { s as script$9 } from './OrIcon-eb0a5aa2.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 './style-inject.es-4c6f2515.js';
+import { s as script$a } from './OrCheckbox-42ed332c.js';
 import { i as isEmpty } from './isEmpty-a3a94129.js';
-import { s as script$a } from './OrIcon-eb0a5aa2.js';
 import keyBy from 'lodash/keyBy';
-import { s as script$9 } from './OrChip-2e26629d.js';
+import { s as script$c } from './OrChip-2e26629d.js';
 import './OrChips-58954587.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 './style-inject.es-4c6f2515.js';
-import { s as script$c } from './OrLoader-0b463089.js';
-import { s as script$b } from './OrCheckbox-42ed332c.js';
-import { s as script$d } from './OrFloating-c875c590.js';
 import { s as script$e } from './OrLabel-a7d99df4.js';
 import { s as script$f } from './OrError-f90296db.js';
 
@@ -63,164 +63,9 @@ const OR_SELECT_UPDATE_SEARCH_TEXT_PROP = {
 };
 
 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(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 */);
-}
-
-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  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);
-
-script$7.render = render$7;
-script$7.__scopeId = "data-v-d093e2f2";
-script$7.__file = "src/components/or-select/partials/OrSelectInput.vue";
-
-var script$6 = defineComponent({
   name: 'OrSelectSearchOptions',
   components: {
-    OrIcon: script$a
+    OrIcon: script$9
   },
   props: {
     isTop: {
@@ -249,8 +94,8 @@ var script$6 = defineComponent({
   }
 });
 
-const _hoisted_1$4 = ["value", "placeholder"];
-function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+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", {
@@ -261,7 +106,7 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
     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", {
+  }, 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, {
@@ -269,15 +114,15 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 8 /* PROPS */, ["icon"])])], 2 /* CLASS */);
 }
 
-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 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);
 
-script$6.render = render$6;
-script$6.__scopeId = "data-v-2f836793";
-script$6.__file = "src/components/or-select/partials/OrSelectSearchOptions.vue";
+script$8.render = render$8;
+script$8.__scopeId = "data-v-2f836793";
+script$8.__file = "src/components/or-select/partials/OrSelectSearchOptions.vue";
 
 /** TODO: Use text management library! */
-var script$5 = defineComponent({
+var script$7 = defineComponent({
   name: 'OrSelectContentEmpty',
   props: {
     search: {
@@ -291,32 +136,32 @@ var script$5 = defineComponent({
   }
 });
 
-const _hoisted_1$3 = {
+const _hoisted_1$4 = {
   class: "or-select-content-empty"
 };
-const _hoisted_2 = {
+const _hoisted_2$1 = {
   class: "or-select-content-empty-title"
 };
-const _hoisted_3 = {
+const _hoisted_3$1 = {
   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, {
+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, [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)]);
+  }, [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 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);
+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);
 
-script$5.render = render$5;
-script$5.__scopeId = "data-v-26c01027";
-script$5.__file = "src/components/or-select/partials/OrSelectContentEmpty.vue";
+script$7.render = render$7;
+script$7.__scopeId = "data-v-26c01027";
+script$7.__file = "src/components/or-select/partials/OrSelectContentEmpty.vue";
 
-var script$4 = defineComponent({
+var script$6 = defineComponent({
   name: 'OrSelectOption',
   components: {
-    OrCheckbox: script$b
+    OrCheckbox: script$a
   },
   props: {
     option: {
@@ -335,11 +180,11 @@ var script$4 = defineComponent({
   }
 });
 
-const _hoisted_1$2 = {
+const _hoisted_1$3 = {
   key: 0,
   class: "or-select-option-content"
 };
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+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", {
@@ -347,24 +192,24 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
       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, {
+  }, [!_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 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 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$4.render = render$4;
-script$4.__scopeId = "data-v-60e42408";
-script$4.__file = "src/components/or-select/partials/OrSelectOption.vue";
+script$6.render = render$6;
+script$6.__scopeId = "data-v-60e42408";
+script$6.__file = "src/components/or-select/partials/OrSelectOption.vue";
 
-var script$3 = defineComponent({
+var script$5 = defineComponent({
   name: 'OrSelectContentOptions',
   components: {
-    OrSelectOption: script$4
+    OrSelectOption: script$6
   },
   props: {
     value: OR_SELECT_VALUE_PROP,
@@ -383,12 +228,12 @@ var script$3 = defineComponent({
   }
 });
 
-const _hoisted_1$1 = {
+const _hoisted_1$2 = {
   class: "or-select-content-options"
 };
-function render$3(_ctx, _cache, $props, $setup, $data, $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$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, 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"
@@ -405,20 +250,20 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   }), 128 /* KEYED_FRAGMENT */))]);
 }
 
-var css_248z$3 = ".or-select-content-options[data-v-5b1a5878] {\n  display: flex;\n  flex: 1 1 100%;\n  flex-direction: column;\n}";
-styleInject(css_248z$3);
+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$3.render = render$3;
-script$3.__scopeId = "data-v-5b1a5878";
-script$3.__file = "src/components/or-select/partials/OrSelectContentOptions.vue";
+script$5.render = render$5;
+script$5.__scopeId = "data-v-5b1a5878";
+script$5.__file = "src/components/or-select/partials/OrSelectContentOptions.vue";
 
-var script$2 = defineComponent({
+var script$4 = defineComponent({
   name: 'OrSelectContent',
   components: {
-    OrLoader: script$c,
-    OrSelectSearchOptions: script$6,
-    OrSelectContentEmpty: script$5,
-    OrSelectContentOptions: script$3
+    OrLoader: script$b,
+    OrSelectSearchOptions: script$8,
+    OrSelectContentEmpty: script$7,
+    OrSelectContentOptions: script$5
   },
   props: {
     value: OR_SELECT_VALUE_PROP,
@@ -457,7 +302,7 @@ var script$2 = defineComponent({
   }
 });
 
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+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");
@@ -502,18 +347,173 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 8 /* PROPS */, ["onSearchChange"])) : createCommentVNode("v-if", true)], 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$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";
+
+var script$3 = defineComponent({
+  name: 'OrSelectInputValue',
+  components: {
+    OrChip: script$c
+  },
+  props: {
+    value: OR_SELECT_VALUE_PROP,
+    options: OR_SELECT_SEARCH_OPTIONS_PROP,
+    isMultiSelect: Boolean,
+    isDisabled: Boolean
+  },
+  emits: ['delete-value'],
+  computed: {
+    optionsByKey() {
+      return keyBy(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$3(_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$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-7e5504da";
+script$3.__file = "src/components/or-select/partials/OrSelectInputValue.vue";
+
+var script$2 = defineComponent({
+  name: 'OrSelectInput',
+  components: {
+    OrIcon: script$9,
+    OrSelectInputValue: script$3
+  },
+  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$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_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$1, [createElementVNode("span", _hoisted_2, 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, [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-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  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: {
@@ -590,7 +590,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
     }])