@onereach/ui-components 2.65.0-beta.1953.0 → 2.65.0

package/dist/bundled/v3/OrSelect.vue_vue_type_script_lang-bf266c01.js

@@ -1,817 +0,0 @@
-import { onClickOutside } from '@vueuse/core';
-import _ from 'lodash';
-import { s as script$a } from './OrChip-7e4cb500.js';
-import { d as defineComponent } from './runtime-core.esm-bundler-d2b749cd.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, withModifiers, normalizeStyle, createVNode, Transition, withCtx, createBlock, createCommentVNode, renderSlot, createTextVNode, toDisplayString, Fragment, renderList, normalizeProps, guardReactiveProps } from 'vue';
-import { s as styleInject } from './style-inject.es-4c6f2515.js';
-import './OrIcon-223093d8.js';
-import { s as script$b } from './OrIcon.vue_vue_type_script_lang-079e1007.js';
-import { s as script$9 } from './OrCheckbox.vue_vue_type_script_lang-042252f7.js';
-import './OrLoader-f4bf7e03.js';
-import { s as script$c } from './OrLoader.vue_vue_type_script_lang-fb938b93.js';
-import './OrFloating-c505cc90.js';
-import { s as script$d } from './OrFloating.vue_vue_type_script_lang-0ade39d3.js';
-import { r as ref } from './reactivity.esm-bundler-942db00f.js';
-import './OrLabel-507a8caf.js';
-import './OrError-4c75ee93.js';
-import { s as script$e } from './OrLabel.vue_vue_type_script_lang-2c1b25a1.js';
-import { s as script$f } from './OrError.vue_vue_type_script_lang-669d3f1f.js';
-
-const _hoisted_1$5 = ["checked", "disabled", "value"];
-const _hoisted_2$2 = {
-  key: 2,
-  class: "or-checkbox--content"
-};
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_or_icon = resolveComponent("or-icon");
-  return openBlock(), createElementBlock("label", {
-    class: normalizeClass(_ctx.rootClasses)
-  }, [createElementVNode("input", mergeProps(_ctx.$attrs, {
-    checked: _ctx.isChecked,
-    disabled: _ctx.isDisabled,
-    value: _ctx.value,
-    type: "checkbox",
-    class: "or-checkbox--input visually-hidden",
-    onChange: _cache[0] || (_cache[0] = (...args) => _ctx.onChange && _ctx.onChange(...args)),
-    onFocus: _cache[1] || (_cache[1] = $event => _ctx.$emit('focus', $event)),
-    onBlur: _cache[2] || (_cache[2] = $event => _ctx.$emit('blur', $event)),
-    onClick: _cache[3] || (_cache[3] = withModifiers((...args) => _ctx.onClick && _ctx.onClick(...args), ["stop"]))
-  }), null, 16 /* FULL_PROPS */, _hoisted_1$5), !_ctx.withState ? (openBlock(), createElementBlock("span", {
-    key: 0,
-    style: normalizeStyle(!_ctx.hasContent ? {
-      marginRight: 0
-    } : null),
-    class: "or-checkbox--checkbox"
-  }, [createVNode(Transition, {
-    name: "fade",
-    mode: "out-in"
-  }, {
-    default: withCtx(() => [_ctx.isChecked ? (openBlock(), createBlock(_component_or_icon, {
-      key: 0,
-      class: "or-checkbox--icon",
-      icon: "done"
-    })) : createCommentVNode("v-if", true)]),
-    _: 1 /* STABLE */
-  })], 4 /* STYLE */)) : (openBlock(), createElementBlock("span", {
-    key: 1,
-    style: normalizeStyle(!_ctx.hasContent ? {
-      marginRight: 0
-    } : null),
-    class: "or-checkbox--checkbox"
-  }, [createVNode(Transition, {
-    name: "fade",
-    mode: "out-in"
-  }, {
-    default: withCtx(() => [(openBlock(), createBlock(_component_or_icon, {
-      key: _ctx.modelValue.icon,
-      icon: _ctx.modelValue.icon
-    }, null, 8 /* PROPS */, ["icon"]))]),
-    _: 1 /* STABLE */
-  })], 4 /* STYLE */)), _ctx.hasContent ? (openBlock(), createElementBlock("span", _hoisted_2$2, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(_ctx.label), 1 /* TEXT */)])])) : 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-22a147d8 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-22a147d8 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-checkbox[data-v-22a147d8] {\n  display: inline-flex;\n  align-items: center;\n  font-size: var(--fs-1);\n  line-height: 1rem;\n  color: inherit;\n  cursor: pointer;\n}\n.or-checkbox--checkbox[data-v-22a147d8] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  min-width: 1rem;\n  height: 1rem;\n  min-height: 1rem;\n  margin-right: var(--s-3);\n  background-color: var(--c-white);\n  border: 1px solid var(--c-neutral-2);\n  border-radius: 2px;\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: background-color, border-color;\n}\n.or-checkbox[data-v-22a147d8] .or-icon {\n  font-size: 1rem;\n  color: var(--c-white);\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: color;\n}\n@media (hover: hover) and (pointer: fine) {\n.or-checkbox:not(.or-checkbox.is-loading):not(.or-checkbox.is-disabled):not(.or-checkbox.is-readonly):not(.or-checkbox:disabled):not(.or-checkbox.is-focused):not(.or-checkbox:active):hover .or-checkbox--checkbox[data-v-22a147d8] {\n    border-color: var(--c-neutral-2-darken-3);\n}\n}\n@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n.or-checkbox:not(.or-checkbox.is-loading):not(.or-checkbox.is-disabled):not(.or-checkbox.is-readonly):not(.or-checkbox:disabled):not(.or-checkbox.is-focused):not(.or-checkbox:active):hover .or-checkbox--checkbox[data-v-22a147d8] {\n    border-color: var(--c-neutral-2-darken-3);\n}\n}\n.or-checkbox:not(:disabled):not(.is-loading):not(.is-disabled):not(.is-readonly):active .or-checkbox--checkbox[data-v-22a147d8] {\n  border-color: var(--c-neutral-2-darken-5);\n}\n.or-checkbox[data-v-22a147d8]:disabled, .or-checkbox.is-disabled[data-v-22a147d8] {\n  cursor: not-allowed;\n}\n.or-checkbox.is-checked .or-checkbox--checkbox[data-v-22a147d8] {\n  background-color: var(--c-primary);\n  border-color: var(--c-primary);\n}\n@media (hover: hover) and (pointer: fine) {\n.or-checkbox.is-checked:not(.or-checkbox.is-checked.is-loading):not(.or-checkbox.is-checked.is-disabled):not(.or-checkbox.is-checked.is-readonly):not(.or-checkbox.is-checked:disabled):not(.or-checkbox.is-checked.is-focused):not(.or-checkbox.is-checked:active):hover .or-checkbox--checkbox[data-v-22a147d8] {\n    background-color: var(--c-primary-darken-3);\n    border-color: var(--c-primary-darken-3);\n}\n}\n@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n.or-checkbox.is-checked:not(.or-checkbox.is-checked.is-loading):not(.or-checkbox.is-checked.is-disabled):not(.or-checkbox.is-checked.is-readonly):not(.or-checkbox.is-checked:disabled):not(.or-checkbox.is-checked.is-focused):not(.or-checkbox.is-checked:active):hover .or-checkbox--checkbox[data-v-22a147d8] {\n    background-color: var(--c-primary-darken-3);\n    border-color: var(--c-primary-darken-3);\n}\n}\n.or-checkbox.is-checked:not(:disabled):not(.is-loading):not(.is-disabled):not(.is-readonly):active .or-checkbox--checkbox[data-v-22a147d8] {\n  background-color: var(--c-primary-darken-5);\n  border-color: var(--c-primary-darken-5);\n}\n.or-checkbox.is-checked[data-v-22a147d8]:disabled, .or-checkbox.is-checked.is-disabled[data-v-22a147d8] {\n  cursor: not-allowed;\n}\n.or-checkbox.is-checked:disabled .or-checkbox--checkbox[data-v-22a147d8], .or-checkbox.is-checked.is-disabled .or-checkbox--checkbox[data-v-22a147d8] {\n  background-color: var(--c-primary-lighten-20);\n  border-color: var(--c-primary-lighten-20);\n}";
-styleInject(css_248z$8);
-
-script$9.render = render$8;
-script$9.__scopeId = "data-v-22a147d8";
-script$9.__file = "src/components/or-checkbox/OrCheckbox.vue";
-
-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$a
-  },
-  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$7(_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] = (...args) => _ctx.handleInputValueClick && _ctx.handleInputValueClick(...args))
-  }, [!_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$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-4cc18f1f {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-4cc18f1f {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-input-value[data-v-4cc18f1f] {\n  display: flex;\n  flex: 1 1 100%;\n  overflow: hidden;\n}\n.or-select-input-value.simple-value[data-v-4cc18f1f] {\n  align-items: center;\n}\n.or-select-input-value-text[data-v-4cc18f1f] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.or-select-input-value.multi-value[data-v-4cc18f1f] {\n  flex-wrap: wrap;\n  padding: 0.125rem 0;\n}\n.or-select-input-value.multi-value .or-chip[data-v-4cc18f1f] {\n  margin: 0.125rem;\n}\n.or-select-input-value.multi-value .or-chip[data-v-4cc18f1f]:not(.disabled) {\n  cursor: default;\n}";
-styleInject(css_248z$7);
-
-script$8.render = render$7;
-script$8.__scopeId = "data-v-4cc18f1f";
-script$8.__file = "src/components/or-select/OrSelectInputValue.vue";
-
-var script$7 = defineComponent({
-  name: 'OrSelectInput',
-  components: {
-    OrIcon: script$b,
-    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 _.isNumber(this.value) ? false : _.isEmpty(this.value);
-    }
-  },
-  methods: {
-    handleToggleContent() {
-      if (!this.isDisabled) {
-        this.$emit('toggle-content');
-      }
-    }
-  }
-});
-
-const _hoisted_1$4 = {
-  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$6(_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] = (...args) => _ctx.handleToggleContent && _ctx.handleToggleContent(...args))
-  }, [_ctx.isEmptyValue ? (openBlock(), createElementBlock("div", _hoisted_1$4, [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$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-f11925bc {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-f11925bc {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-input[data-v-f11925bc] {\n  display: flex;\n  padding: 0 0.5rem;\n  cursor: pointer;\n}\n.or-select-input.input-wrapper[data-v-f11925bc] {\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-f11925bc] {\n  border-color: var(--c-error);\n}\n.or-select-input[data-v-f11925bc]:hover:not(.disabled), .or-select-input.open[data-v-f11925bc] {\n  background-color: var(--c-white);\n}\n.or-select-input.open[data-v-f11925bc] {\n  border-color: var(--c-neutral-2);\n}\n.or-select-input.open[data-v-f11925bc]:not(.top) {\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.or-select-input.open.top[data-v-f11925bc] {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n.or-select-input.disabled[data-v-f11925bc] {\n  cursor: not-allowed;\n}\n.or-select-input.disabled[data-v-f11925bc]:not(.multiselect) {\n  background-color: var(--c-neutral-1-darken-5);\n}\n.or-select-input-placeholder[data-v-f11925bc] {\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-f11925bc] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.or-select-input-button[data-v-f11925bc] {\n  display: flex;\n  align-items: center;\n  height: 2.125rem;\n  margin-left: auto;\n}\n.or-select-input-button[data-v-f11925bc] .or-icon {\n  margin-left: 0.5rem;\n}";
-styleInject(css_248z$6);
-
-script$7.render = render$6;
-script$7.__scopeId = "data-v-f11925bc";
-script$7.__file = "src/components/or-select/OrSelectInput.vue";
-
-var script$6 = defineComponent({
-  name: 'OrSelectSearchOptions',
-  components: {
-    OrIcon: script$b
-  },
-  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);
-    }
-  }
-});
-
-const _hoisted_1$3 = ["value", "placeholder"];
-function render$5(_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$3), 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 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-0f1c09a4 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-0f1c09a4 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-search-options[data-v-0f1c09a4] {\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-0f1c09a4]:not(.top) {\n  border-bottom: 1px solid var(--c-neutral-2);\n}\n.or-select-search-options.top[data-v-0f1c09a4] {\n  border-top: 1px solid var(--c-neutral-2);\n}\n.or-select-search-options-input[data-v-0f1c09a4] {\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-0f1c09a4] {\n  display: flex;\n  padding: 0.125rem;\n  margin-left: 0.5rem;\n  cursor: pointer;\n}\n.or-select-search-options-button[data-v-0f1c09a4] .or-icon {\n  font-size: 1rem;\n  color: var(--c-neutral-4);\n}";
-styleInject(css_248z$5);
-
-script$6.render = render$5;
-script$6.__scopeId = "data-v-0f1c09a4";
-script$6.__file = "src/components/or-select/OrSelectSearchOptions.vue";
-
-/** 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
-  }
-});
-
-const _hoisted_1$2 = {
-  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$4(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$2, [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)]);
-}
-
-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-0c331d2c {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-0c331d2c {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-content-empty[data-v-0c331d2c] {\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-0c331d2c] {\n  font-weight: var(--fw-1);\n}\n.or-select-content-empty-description[data-v-0c331d2c] {\n  margin-top: 0.5rem;\n}";
-styleInject(css_248z$4);
-
-script$5.render = render$4;
-script$5.__scopeId = "data-v-0c331d2c";
-script$5.__file = "src/components/or-select/OrSelectContentEmpty.vue";
-
-var script$4 = defineComponent({
-  name: 'OrSelectOption',
-  components: {
-    OrCheckbox: script$9
-  },
-  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);
-    }
-  }
-});
-
-const _hoisted_1$1 = {
-  key: 0,
-  class: "or-select-option-content"
-};
-function render$3(_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$1, 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$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-68d298cd {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-68d298cd {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-option[data-v-68d298cd] {\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-68d298cd]:hover {\n  background-color: var(--c-neutral-1);\n}\n.or-select-option.active[data-v-68d298cd]:not(.checkbox) {\n  background-color: var(--c-neutral-2);\n  font-weight: var(--fw-1);\n}\n.or-select-option-content[data-v-68d298cd],\n.or-select-option[data-v-68d298cd] .or-checkbox--content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.or-select-option .or-checkbox[data-v-68d298cd] {\n  overflow: hidden;\n}";
-styleInject(css_248z$3);
-
-script$4.render = render$3;
-script$4.__scopeId = "data-v-68d298cd";
-script$4.__file = "src/components/or-select/OrSelectOption.vue";
-
-var script$3 = defineComponent({
-  name: 'OrSelectContentOptions',
-  components: {
-    OrSelectOption: script$4
-  },
-  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 = {
-  class: "or-select-content-options"
-};
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_or_select_option = resolveComponent("or-select-option");
-  return openBlock(), createElementBlock("div", _hoisted_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 */))]);
-}
-
-var css_248z$2 = ".or-select-content-options[data-v-a0038f86] {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 100%;\n}";
-styleInject(css_248z$2);
-
-script$3.render = render$2;
-script$3.__scopeId = "data-v-a0038f86";
-script$3.__file = "src/components/or-select/OrSelectContentOptions.vue";
-
-var script$2 = defineComponent({
-  name: 'OrSelectContent',
-  components: {
-    OrLoader: script$c,
-    OrSelectSearchOptions: script$6,
-    OrSelectContentEmpty: script$5,
-    OrSelectContentOptions: script$3
-  },
-  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$1(_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$1 = "/**\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-9b672b5e {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-9b672b5e {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-content[data-v-9b672b5e] {\n  /* Should fit up to 5 rows by default */\n  display: flex;\n  flex-direction: column;\n  background-color: var(--c-white);\n  border: 1px solid var(--c-neutral-2);\n  overflow: hidden;\n}\n.or-select-content[data-v-9b672b5e]: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-9b672b5e] {\n  border-top-right-radius: 0.25rem;\n  border-top-left-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-9b672b5e] {\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-9b672b5e] {\n  flex: 0 0 10.625rem;\n  align-items: center;\n  justify-content: center;\n}";
-styleInject(css_248z$1);
-
-script$2.render = render$1;
-script$2.__scopeId = "data-v-9b672b5e";
-script$2.__file = "src/components/or-select/OrSelectContent.vue";
-
-var script$1 = defineComponent({
-  name: 'OrSelect',
-  components: {
-    OrSelectInput: script$7,
-    OrSelectContent: script$2,
-    OrFloating: script$d
-  },
-  props: {
-    value: OR_SELECT_VALUE_PROP,
-    options: OR_SELECT_OPTIONS_PROP,
-    placeholder: OR_SELECT_PLACEHOLDER_PROP,
-    contentOptions: OR_SELECT_OPTIONS_PROP,
-    useSearch: Boolean,
-    isMultiSelect: Boolean,
-    isLoading: Boolean,
-    isDisabled: Boolean,
-    isInvalid: 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,
-    ignoreClickOutside: Boolean
-  },
-  emits: ['open', 'close', 'input', 'search-change'],
-  setup(props) {
-    const isOpen = ref(false);
-    const root = ref();
-    const content = ref(null);
-    const floating = ref();
-    onClickOutside(content, evt => {
-      if (props.ignoreClickOutside) return;
-      if (evt.composedPath().includes(root.value)) return;
-      isOpen.value = false;
-    });
-    return {
-      root,
-      floating,
-      content,
-      isOpen
-    };
-  },
-  computed: {
-    isFlipped() {
-      var _a, _b;
-      return (_b = (_a = this.floating) === null || _a === void 0 ? void 0 : _a.isFlipped) !== null && _b !== void 0 ? _b : false;
-    }
-  },
-  watch: {
-    /* Closing dropdown should notify about search state reset */
-    isOpen(isOpen) {
-      const event = isOpen ? 'open' : 'close';
-      this.$emit(event);
-      if (!isOpen && this.useSearch) {
-        this.$emit('search-change', '');
-      }
-    }
-  },
-  methods: {
-    handleOptionSelect(option) {
-      if (this.isMultiSelect) {
-        const copy = [...this.value];
-        const index = copy.findIndex(optionId => optionId === option.value);
-        index !== -1 ? copy.splice(index, 1) : copy.push(option.value);
-        this.$emit('input', copy);
-      } else {
-        this.$emit('input', option.value);
-        this.isOpen = false;
-      }
-    },
-    handleDeleteValue(optionId) {
-      const value = [...this.value].filter(valueItem => valueItem !== optionId);
-      this.$emit('input', value);
-    }
-  }
-});
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_or_select_input = resolveComponent("or-select-input");
-  const _component_or_select_content = resolveComponent("or-select-content");
-  const _component_or_floating = resolveComponent("or-floating");
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(["or-select-main", {
-      open: _ctx.isOpen
-    }])
-  }, [createVNode(_component_or_select_input, {
-    value: _ctx.value,
-    options: _ctx.options,
-    placeholder: _ctx.placeholder,
-    "is-open": _ctx.isOpen,
-    "is-multi-select": _ctx.isMultiSelect,
-    "is-top": _ctx.isFlipped,
-    "is-disabled": _ctx.isDisabled,
-    "is-invalid": _ctx.isInvalid,
-    onToggleContent: _cache[0] || (_cache[0] = $event => _ctx.isOpen = !_ctx.isOpen),
-    onDeleteValue: _ctx.handleDeleteValue
-  }, {
-    "input-value": withCtx(scope => [renderSlot(_ctx.$slots, "input-value", normalizeProps(guardReactiveProps(scope)))]),
-    _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["value", "options", "placeholder", "is-open", "is-multi-select", "is-top", "is-disabled", "is-invalid", "onDeleteValue"]), _ctx.isOpen ? (openBlock(), createBlock(_component_or_floating, {
-    key: 0,
-    ref: "floating",
-    trigger: _ctx.root,
-    placement: "bottom",
-    "is-inheriting-width": "",
-    "is-using-flip": "",
-    "hide-strategy": "escaped",
-    "z-index-offset": 10
-  }, {
-    default: withCtx(() => [createVNode(_component_or_select_content, {
-      ref: "content",
-      class: normalizeClass({
-        'top': _ctx.isFlipped
-      }),
-      value: _ctx.value,
-      options: _ctx.contentOptions,
-      "use-search": _ctx.useSearch,
-      "is-multi-select": _ctx.isMultiSelect,
-      "is-loading": _ctx.isLoading,
-      "is-top": _ctx.isFlipped,
-      "no-results-title": _ctx.noResultsTitle,
-      "no-results-start-text": _ctx.noResultsStartText,
-      "no-results-end-text": _ctx.noResultsEndText,
-      "update-search-text": _ctx.updateSearchText,
-      onSelectOption: _ctx.handleOptionSelect,
-      onSearchChange: _cache[1] || (_cache[1] = $event => _ctx.$emit('search-change', $event))
-    }, {
-      "empty-options": withCtx(scope => [renderSlot(_ctx.$slots, "empty-options", normalizeProps(guardReactiveProps(scope)))]),
-      "content-option": withCtx(scope => [renderSlot(_ctx.$slots, "content-option", normalizeProps(guardReactiveProps(scope)))]),
-      "content-options": withCtx(scope => [renderSlot(_ctx.$slots, "content-options", normalizeProps(guardReactiveProps(scope)))]),
-      _: 3 /* FORWARDED */
-    }, 8 /* PROPS */, ["class", "value", "options", "use-search", "is-multi-select", "is-loading", "is-top", "no-results-title", "no-results-start-text", "no-results-end-text", "update-search-text", "onSelectOption"])]),
-    _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["trigger"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
-}
-
-var css_248z = "/**\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-639de411 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-639de411 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-main[data-v-639de411] {\n  position: relative;\n}\n.or-select-main .or-select-input[data-v-639de411] {\n  position: relative;\n}\n.or-floating .or-select-content[data-v-639de411] {\n  width: 100%;\n}\n.or-floating .or-select-content[data-v-639de411]:not(.top) {\n  border-top: none;\n}\n.or-floating .or-select-content.top[data-v-639de411] {\n  border-bottom: none;\n}";
-styleInject(css_248z);
-
-script$1.render = render;
-script$1.__scopeId = "data-v-639de411";
-script$1.__file = "src/components/or-select/OrSelectMain.vue";
-
-var script = defineComponent({
-  name: 'OrSelect',
-  components: {
-    OrSelectMain: script$1,
-    OrLabel: script$e,
-    OrError: script$f
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
-  props: {
-    /** Values are displayed as is, when there are no matching options */
-    modelValue: OR_SELECT_VALUE_PROP,
-    /**
-     * Options visible by default, when search options are empty.
-     * In order to display labels for values, we need options that match them by ID.
-     */
-    options: OR_SELECT_OPTIONS_PROP,
-    /**
-     * User can override list of options visible in dropdown content,
-     * for example when displaying search results.
-     * Does't work when search function is provided.
-     */
-    searchOptions: OR_SELECT_SEARCH_OPTIONS_PROP,
-    placeholder: OR_SELECT_PLACEHOLDER_PROP,
-    label: COMMON_STRING_PROP,
-    error: COMMON_STRING_PROP,
-    /**
-     * Enables search textbox, but does nothing by default.
-     * User has either to listen to 'search-change' event, or provide search function.
-     */
-    useSearch: Boolean,
-    isMultiSelect: Boolean,
-    /** Ignored when search function is provided */
-    isLoading: Boolean,
-    isRequired: Boolean,
-    isDisabled: Boolean,
-    isInvalid: Boolean,
-    ignoreClickOutside: Boolean,
-    /**
-     * When search function is provided, make component self-managed,
-     * and ignore props like "searchOptions" and "isLoading".
-     */
-    searchFunction: SEARCH_OPTIONS_FUNCTION_PROP,
-    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: ['update:modelValue', 'open', 'close', 'search-change'],
-  data() {
-    return {
-      localIsLoading: null,
-      localContentOptions: null
-    };
-  },
-  computed: {
-    /**
-     * When component is self-managed - local options override everything else.
-     * Otherwise user can override options with a different list.
-     */
-    contentOptions() {
-      return this.localContentOptions || this.searchOptions || this.options;
-    },
-    isContentLoading() {
-      var _a;
-      return (_a = this.localIsLoading) !== null && _a !== void 0 ? _a : this.isLoading;
-    }
-  },
-  methods: {
-    async handleSearchChange(search) {
-      /* If component is managed by parent,
-         simply emit event and let parent provide search results. */
-      if (!this.searchFunction) {
-        this.$emit('search-change', search);
-        return;
-      }
-      /* Search function is applied to non-zero search values,
-         since original options are displayed by default. */
-      if (!search) {
-        this.localContentOptions = this.options;
-      }
-      const searchResult = this.searchFunction({
-        search
-      });
-      const searchResultPromise = searchResult;
-      /* Automatically manage loading state, when search function return promise */
-      if (!searchResultPromise.then) {
-        this.localContentOptions = searchResult;
-        return;
-      }
-      try {
-        this.localIsLoading = true;
-        this.localContentOptions = await searchResultPromise;
-      } finally {
-        this.localIsLoading = false;
-      }
-    }
-  }
-});
-
-export { script as s };