@onereach/ui-components 4.15.2 → 4.15.3-beta.3053.0

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

@@ -1,6 +1,6 @@
 import { defineComponent, getCurrentInstance, ref, computed, toRef, onMounted, watch } from 'vue-demi';
 import { isEmptyValue } from '../../utils/isEmptyValue.js';
-import { SelectRoot, SelectControl, SelectPlaceholder, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectNoSearchResults } from './styles.js';
+import { SelectRoot, SelectControl, SelectSearchControl, SelectPlaceholder, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectNoSearchResults } from './styles.js';
 import __vue_component__$1 from '../OrCheckboxV3/OrCheckbox.js';
 import __vue_component__$2 from '../OrErrorV3/OrError.js';
 import __vue_component__$3 from '../OrExpansionPanelV3/OrExpansionPanel.js';
@@ -184,6 +184,7 @@ var script = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-select-v3', ...SelectRoot]);
     const controlStyles = computed(() => [...SelectControl]);
+    const searchControlStyles = computed(() => [...SelectSearchControl]);
     const placeholderStyles = computed(() => [...SelectPlaceholder]);
     const dropdownStyles = computed(() => {
       var _a;
@@ -279,6 +280,7 @@ var script = defineComponent({
       popoverState,
       rootStyles,
       controlStyles,
+      searchControlStyles,
       placeholderStyles,
       dropdownStyles,
       noSearchResultsStyles,
@@ -346,7 +348,27 @@ var __vue_render__ = function () {
       "readonly": _vm.readonly,
       "disabled": _vm.disabled
     }
-  }, [_c('div', {
+  }, [_vm.popoverState === 'open' && _vm.enableSearch ? [_c('OrInput', {
+    class: _vm.searchControlStyles,
+    attrs: {
+      "type": 'search',
+      "placeholder": 'Search',
+      "size": _vm.size,
+      "disable-default-styles": true
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+      }
+    },
+    model: {
+      value: _vm.searchText,
+      callback: function ($$v) {
+        _vm.searchText = $$v;
+      },
+      expression: "searchText"
+    }
+  })] : [_c('div', {
     ref: "control",
     class: _vm.controlStyles,
     attrs: {
@@ -363,9 +385,9 @@ var __vue_render__ = function () {
       }
     }
   }, [_vm.multiple ? [_vm.proxyModelValue && _vm.proxyModelValue.length > 0 ? [_vm._t("valueTemplate", function () {
-    return _vm._l(_vm.selection, function (option, i) {
+    return _vm._l(_vm.selection, function (option) {
       return _c('OrTag', {
-        key: i,
+        key: option.value,
         attrs: {
           "variant": 'reset',
           "disabled": _vm.disabled || _vm.readonly
@@ -375,7 +397,7 @@ var __vue_render__ = function () {
             return _vm.deselect(option);
           }
         }
-      }, [_vm._v("\n              " + _vm._s(option.label) + "\n            ")]);
+      }, [_vm._v("\n                " + _vm._s(option.label) + "\n              ")]);
     });
   }, {
     "model": _vm.proxyModelValue
@@ -384,12 +406,12 @@ var __vue_render__ = function () {
   }, [_vm._v(_vm._s(_vm.placeholder))])]] : [!_vm.isEmptyModelValue ? [_vm._t("valueTemplate", function () {
     return [_c('span', {
       staticClass: "truncate"
-    }, [_vm._v("\n              " + _vm._s(_vm.selection && _vm.selection.label) + "\n            ")])];
+    }, [_vm._v("\n                " + _vm._s(_vm.selection.label) + "\n              ")])];
   }, {
     "model": _vm.proxyModelValue
   })] : [_c('span', {
     class: _vm.placeholderStyles
-  }, [_vm._v(_vm._s(_vm.placeholder))])]]], 2), _vm._v(" "), _vm.multiple && _vm.outerItems.length > 0 ? [_vm._v("\n      +" + _vm._s(_vm.outerItems.length) + "\n    ")] : _vm._e(), _vm._v(" "), _c('div', {
+  }, [_vm._v(_vm._s(_vm.placeholder))])]]], 2), _vm._v(" "), _vm.multiple && _vm.outerItems.length > 0 ? [_vm._v("\n        +" + _vm._s(_vm.outerItems.length) + "\n      ")] : _vm._e(), _vm._v(" "), _c('div', {
     class: ['layout-inline-row', 'gap-sm']
   }, [!_vm.multiple && _vm.proxyModelValue ? [_c('OrIconButton', {
     attrs: {
@@ -408,7 +430,7 @@ var __vue_render__ = function () {
       "icon": _vm.popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down',
       "variant": 'outlined'
     }
-  })], 2), _vm._v(" "), _c('OrPopover', {
+  })], 2)], _vm._v(" "), _c('OrPopover', {
     ref: "popover",
     attrs: {
       "variant": 'auto',
@@ -418,21 +440,7 @@ var __vue_render__ = function () {
       "custom-styles": _vm.dropdownStyles,
       "disable-default-styles": true
     }
-  }, [_vm.enableSearch ? [_c('OrInput', {
-    attrs: {
-      "type": 'search',
-      "placeholder": 'Search',
-      "size": 's',
-      "disable-default-styles": true
-    },
-    model: {
-      value: _vm.searchText,
-      callback: function ($$v) {
-        _vm.searchText = $$v;
-      },
-      expression: "searchText"
-    }
-  })] : _vm._e(), _vm._v(" "), _vm.resolvedSearchOptions.length > 0 ? [_vm.groupByFunction ? _vm._l(_vm.groupedOptions, function (group, groupName) {
+  }, [_vm.resolvedSearchOptions.length > 0 ? [_vm.groupByFunction ? _vm._l(_vm.groupedOptions, function (group, groupName) {
     return _c('OrExpansionPanel', {
       key: groupName,
       attrs: {

package/dist/bundled/v2/components/OrSelectV3/OrSelect.vue.d.ts

@@ -19,6 +19,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     popoverState: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    searchControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
     placeholderStyles: import("@vue/composition-api").ComputedRef<string[]>;
     dropdownStyles: import("@vue/composition-api").ComputedRef<string[]>;
     noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;
@@ -206,6 +207,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     popoverState: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    searchControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
     placeholderStyles: import("@vue/composition-api").ComputedRef<string[]>;
     dropdownStyles: import("@vue/composition-api").ComputedRef<string[]>;
     noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;

package/dist/bundled/v2/components/OrSelectV3/styles.d.ts

@@ -1,5 +1,6 @@
 export declare const SelectRoot: string[];
 export declare const SelectControl: string[];
+export declare const SelectSearchControl: string[];
 export declare const SelectPlaceholder: string[];
 export declare const SelectDropdown: string[];
 export declare const SelectDropdownDefault: string[];

package/dist/bundled/v2/components/OrSelectV3/styles.js

@@ -14,6 +14,11 @@ const SelectControl = [
 'gap-xs',
 // Typography
 'typography-inherit'];
+const SelectSearchControl = [
+// Box
+'w-full',
+// Spacing
+'!mx-none', '!my-none'];
 const SelectPlaceholder = [
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
@@ -48,4 +53,4 @@ const SelectNoSearchResults = [
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
-export { SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectNoSearchResults, SelectPlaceholder, SelectRoot };
+export { SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectNoSearchResults, SelectPlaceholder, SelectRoot, SelectSearchControl };

package/dist/bundled/v3/{OrSelect.vue_vue_type_script_lang-a9bc810d.js → OrSelect.vue_vue_type_script_lang-c70d3f4e.js}

@@ -1,6 +1,6 @@
 import { defineComponent, getCurrentInstance, ref, computed, toRef, onMounted, watch } from 'vue-demi';
 import { isEmptyValue } from './utils/isEmptyValue.js';
-import { SelectRoot, SelectControl, SelectPlaceholder, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectNoSearchResults } from './components/OrSelectV3/styles.js';
+import { SelectRoot, SelectControl, SelectSearchControl, SelectPlaceholder, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectNoSearchResults } from './components/OrSelectV3/styles.js';
 import './components/OrCheckboxV3/OrCheckbox.js';
 import './components/OrErrorV3/OrError.js';
 import './components/OrExpansionPanelV3/OrExpansionPanel.js';
@@ -153,6 +153,7 @@ var script = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-select-v3', ...SelectRoot]);
     const controlStyles = computed(() => [...SelectControl]);
+    const searchControlStyles = computed(() => [...SelectSearchControl]);
     const placeholderStyles = computed(() => [...SelectPlaceholder]);
     const dropdownStyles = computed(() => {
       var _a;
@@ -248,6 +249,7 @@ var script = defineComponent({
       popoverState,
       rootStyles,
       controlStyles,
+      searchControlStyles,
       placeholderStyles,
       dropdownStyles,
       noSearchResultsStyles,

package/dist/bundled/v3/components/OrSelectV3/OrSelect.js

@@ -1,6 +1,6 @@
-import { s as script } from '../../OrSelect.vue_vue_type_script_lang-a9bc810d.js';
-export { s as default } from '../../OrSelect.vue_vue_type_script_lang-a9bc810d.js';
-import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, withModifiers, createVNode, vShow } from 'vue';
+import { s as script } from '../../OrSelect.vue_vue_type_script_lang-c70d3f4e.js';
+export { s as default } from '../../OrSelect.vue_vue_type_script_lang-c70d3f4e.js';
+import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, Fragment, createElementVNode, renderList, createVNode, vShow } from 'vue';
 import 'vue-demi';
 import '../../utils/isEmptyValue.js';
 import './styles.js';
@@ -95,10 +95,10 @@ const _hoisted_5 = {
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrLabel = resolveComponent("OrLabel");
+  const _component_OrInput = resolveComponent("OrInput");
   const _component_OrTag = resolveComponent("OrTag");
   const _component_OrIconButton = resolveComponent("OrIconButton");
   const _component_OrIcon = resolveComponent("OrIcon");
-  const _component_OrInput = resolveComponent("OrInput");
   const _component_OrCheckbox = resolveComponent("OrCheckbox");
   const _component_OrMenuItem = resolveComponent("OrMenuItem");
   const _component_OrExpansionPanel = resolveComponent("OrExpansionPanel");
@@ -131,22 +131,34 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     readonly: _ctx.readonly,
     disabled: _ctx.disabled
   }, {
-    default: withCtx(() => [createElementVNode("div", {
+    default: withCtx(() => [_ctx.popoverState === 'open' && _ctx.enableSearch ? (openBlock(), createBlock(_component_OrInput, {
+      key: 0,
+      modelValue: _ctx.searchText,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.searchText = $event),
+      class: normalizeClass(_ctx.searchControlStyles),
+      type: 'search',
+      placeholder: 'Search',
+      size: _ctx.size,
+      "disable-default-styles": true,
+      onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
+    }, null, 8 /* PROPS */, ["modelValue", "class", "size"])) : (openBlock(), createElementBlock(Fragment, {
+      key: 1
+    }, [createElementVNode("div", {
       id: _ctx.controlId,
       ref: "control",
       class: normalizeClass(_ctx.controlStyles),
       tabindex: !_ctx.disabled ? 0 : null,
       disabled: _ctx.disabled,
-      onFocus: _cache[0] || (_cache[0] = $event => _ctx.$emit('focus', $event)),
-      onBlur: _cache[1] || (_cache[1] = $event => _ctx.$emit('blur', $event))
+      onFocus: _cache[2] || (_cache[2] = $event => _ctx.$emit('focus', $event)),
+      onBlur: _cache[3] || (_cache[3] = $event => _ctx.$emit('blur', $event))
     }, [_ctx.multiple ? (openBlock(), createElementBlock(Fragment, {
       key: 0
     }, [_ctx.proxyModelValue && _ctx.proxyModelValue.length > 0 ? renderSlot(_ctx.$slots, "valueTemplate", {
       key: 0,
       model: _ctx.proxyModelValue
-    }, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.selection, (option, i) => {
+    }, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.selection, option => {
       return openBlock(), createBlock(_component_OrTag, {
-        key: i,
+        key: option.value,
         variant: 'reset',
         disabled: _ctx.disabled || _ctx.readonly,
         onReset: $event => _ctx.deselect(option)
@@ -163,7 +175,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, [!_ctx.isEmptyModelValue ? renderSlot(_ctx.$slots, "valueTemplate", {
       key: 0,
       model: _ctx.proxyModelValue
-    }, () => [createElementVNode("span", _hoisted_2, toDisplayString(_ctx.selection && _ctx.selection.label), 1 /* TEXT */)]) : (openBlock(), createElementBlock("span", {
+    }, () => [createElementVNode("span", _hoisted_2, toDisplayString(_ctx.selection.label), 1 /* TEXT */)]) : (openBlock(), createElementBlock("span", {
       key: 1,
       class: normalizeClass(_ctx.placeholderStyles)
     }, toDisplayString(_ctx.placeholder), 3 /* TEXT, CLASS */))], 64 /* STABLE_FRAGMENT */))], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1), _ctx.multiple && _ctx.outerItems.length > 0 ? (openBlock(), createElementBlock(Fragment, {
@@ -173,11 +185,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       icon: 'close',
       color: 'inherit',
       disabled: _ctx.readonly || _ctx.disabled,
-      onClick: _cache[2] || (_cache[2] = withModifiers($event => _ctx.$emit('update:modelValue', undefined), ["stop"]))
+      onClick: _cache[4] || (_cache[4] = withModifiers($event => _ctx.$emit('update:modelValue', undefined), ["stop"]))
     }, null, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true), createVNode(_component_OrIcon, {
       icon: _ctx.popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down',
       variant: 'outlined'
-    }, null, 8 /* PROPS */, ["icon"])]), createVNode(_component_OrPopover, {
+    }, null, 8 /* PROPS */, ["icon"])])], 64 /* STABLE_FRAGMENT */)), createVNode(_component_OrPopover, {
       ref: "popover",
       variant: 'auto',
       trigger: _ctx.inputBoxRoot,
@@ -186,16 +198,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       "custom-styles": _ctx.dropdownStyles,
       "disable-default-styles": true
     }, {
-      default: withCtx(() => [_ctx.enableSearch ? (openBlock(), createBlock(_component_OrInput, {
-        key: 0,
-        modelValue: _ctx.searchText,
-        "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => _ctx.searchText = $event),
-        type: 'search',
-        placeholder: 'Search',
-        size: 's',
-        "disable-default-styles": true
-      }, null, 8 /* PROPS */, ["modelValue"])) : createCommentVNode("v-if", true), _ctx.resolvedSearchOptions.length > 0 ? (openBlock(), createElementBlock(Fragment, {
-        key: 1
+      default: withCtx(() => [_ctx.resolvedSearchOptions.length > 0 ? (openBlock(), createElementBlock(Fragment, {
+        key: 0
       }, [_ctx.groupByFunction ? (openBlock(true), createElementBlock(Fragment, {
         key: 0
       }, renderList(_ctx.groupedOptions, (group, groupName) => {
@@ -214,7 +218,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 option: option
               }, () => [createVNode(_component_OrCheckbox, {
                 modelValue: _ctx.proxyModelValue,
-                "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => _ctx.proxyModelValue = $event),
+                "onUpdate:modelValue": _cache[5] || (_cache[5] = $event => _ctx.proxyModelValue = $event),
                 value: option.value,
                 label: option.label,
                 "label-variant": 'input'
@@ -252,7 +256,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         }, {
           default: withCtx(() => [createVNode(_component_OrCheckbox, {
             modelValue: _ctx.proxyModelValue,
-            "onUpdate:modelValue": _cache[5] || (_cache[5] = $event => _ctx.proxyModelValue = $event),
+            "onUpdate:modelValue": _cache[6] || (_cache[6] = $event => _ctx.proxyModelValue = $event),
             value: option.value,
             label: option.label,
             "label-variant": 'input'
@@ -283,7 +287,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           _: 2 /* DYNAMIC */
         }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]);
       }), 128 /* KEYED_FRAGMENT */))], 64 /* STABLE_FRAGMENT */))], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("div", {
-        key: 2,
+        key: 1,
         class: normalizeClass(_ctx.noSearchResultsStyles)
       }, [renderSlot(_ctx.$slots, "noSearchResultsTemplate", {}, () => [createTextVNode(" No results ")])], 2 /* CLASS */))]),
 

package/dist/bundled/v3/components/OrSelectV3/OrSelect.vue.d.ts

@@ -76,6 +76,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     popoverState: import("vue-demi").ComputedRef<any>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
     controlStyles: import("vue-demi").ComputedRef<string[]>;
+    searchControlStyles: import("vue-demi").ComputedRef<string[]>;
     placeholderStyles: import("vue-demi").ComputedRef<string[]>;
     dropdownStyles: import("vue-demi").ComputedRef<string[]>;
     noSearchResultsStyles: import("vue-demi").ComputedRef<string[]>;

package/dist/bundled/v3/components/OrSelectV3/index.js

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect.vue_vue_type_script_lang-a9bc810d.js';
+export { s as OrSelectV3 } from '../../OrSelect.vue_vue_type_script_lang-c70d3f4e.js';
 export { InputBoxSize as SelectSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import '../../utils/isEmptyValue.js';

package/dist/bundled/v3/components/OrSelectV3/styles.d.ts

@@ -1,5 +1,6 @@
 export declare const SelectRoot: string[];
 export declare const SelectControl: string[];
+export declare const SelectSearchControl: string[];
 export declare const SelectPlaceholder: string[];
 export declare const SelectDropdown: string[];
 export declare const SelectDropdownDefault: string[];

package/dist/bundled/v3/components/OrSelectV3/styles.js

@@ -14,6 +14,11 @@ const SelectControl = [
 'gap-xs',
 // Typography
 'typography-inherit'];
+const SelectSearchControl = [
+// Box
+'w-full',
+// Spacing
+'!mx-none', '!my-none'];
 const SelectPlaceholder = [
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
@@ -48,4 +53,4 @@ const SelectNoSearchResults = [
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
-export { SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectNoSearchResults, SelectPlaceholder, SelectRoot };
+export { SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectNoSearchResults, SelectPlaceholder, SelectRoot, SelectSearchControl };

package/dist/bundled/v3/components/index.js

@@ -114,7 +114,7 @@ export { s as OrSearchV3 } from '../OrSearch.vue_vue_type_script_lang-8c2943c2.j
 export { s as OrSegmentedControlV3 } from '../OrSegmentedControl.vue_vue_type_script_lang-3a7df112.js';
 export { SegmentedControlSize } from './OrSegmentedControlV3/props.js';
 export { s as OrSelect } from '../OrSelect.vue_vue_type_script_lang-b8b014f6.js';
-export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-a9bc810d.js';
+export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-c70d3f4e.js';
 export { s as OrSidebar } from '../OrSidebar.vue_vue_type_script_lang-cac8e5b7.js';
 export { OrSidebarSide } from './OrSidebar/constants.js';
 export { s as OrSidebarV3 } from '../OrSidebar.vue_vue_type_script_lang-a79c5901.js';

package/dist/bundled/v3/index.js

@@ -76,7 +76,7 @@ export { s as OrSegmentedControlV3 } from './OrSegmentedControl.vue_vue_type_scr
 import './components/OrSelect/OrSelect.js';
 export { s as OrSelect } from './OrSelect.vue_vue_type_script_lang-b8b014f6.js';
 import './components/OrSelectV3/OrSelect.js';
-export { s as OrSelectV3 } from './OrSelect.vue_vue_type_script_lang-a9bc810d.js';
+export { s as OrSelectV3 } from './OrSelect.vue_vue_type_script_lang-c70d3f4e.js';
 import './components/OrSidebar/OrSidebar.js';
 export { s as OrSidebar } from './OrSidebar.vue_vue_type_script_lang-cac8e5b7.js';
 import './components/OrSidebarV3/OrSidebar.js';

package/dist/esm/v2/{OrSelect-87c52f1f.js → OrSelect-5b9b51e3.js}

@@ -36,6 +36,11 @@ const SelectControl = [
 'gap-xs',
 // Typography
 'typography-inherit'];
+const SelectSearchControl = [
+// Box
+'w-full',
+// Spacing
+'!mx-none', '!my-none'];
 const SelectPlaceholder = [
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
@@ -192,6 +197,7 @@ var script = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-select-v3', ...SelectRoot]);
     const controlStyles = computed(() => [...SelectControl]);
+    const searchControlStyles = computed(() => [...SelectSearchControl]);
     const placeholderStyles = computed(() => [...SelectPlaceholder]);
     const dropdownStyles = computed(() => {
       var _a;
@@ -287,6 +293,7 @@ var script = defineComponent({
       popoverState,
       rootStyles,
       controlStyles,
+      searchControlStyles,
       placeholderStyles,
       dropdownStyles,
       noSearchResultsStyles,
@@ -354,7 +361,27 @@ var __vue_render__ = function () {
       "readonly": _vm.readonly,
       "disabled": _vm.disabled
     }
-  }, [_c('div', {
+  }, [_vm.popoverState === 'open' && _vm.enableSearch ? [_c('OrInput', {
+    class: _vm.searchControlStyles,
+    attrs: {
+      "type": 'search',
+      "placeholder": 'Search',
+      "size": _vm.size,
+      "disable-default-styles": true
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+      }
+    },
+    model: {
+      value: _vm.searchText,
+      callback: function ($$v) {
+        _vm.searchText = $$v;
+      },
+      expression: "searchText"
+    }
+  })] : [_c('div', {
     ref: "control",
     class: _vm.controlStyles,
     attrs: {
@@ -371,9 +398,9 @@ var __vue_render__ = function () {
       }
     }
   }, [_vm.multiple ? [_vm.proxyModelValue && _vm.proxyModelValue.length > 0 ? [_vm._t("valueTemplate", function () {
-    return _vm._l(_vm.selection, function (option, i) {
+    return _vm._l(_vm.selection, function (option) {
       return _c('OrTag', {
-        key: i,
+        key: option.value,
         attrs: {
           "variant": 'reset',
           "disabled": _vm.disabled || _vm.readonly
@@ -383,7 +410,7 @@ var __vue_render__ = function () {
             return _vm.deselect(option);
           }
         }
-      }, [_vm._v("\n              " + _vm._s(option.label) + "\n            ")]);
+      }, [_vm._v("\n                " + _vm._s(option.label) + "\n              ")]);
     });
   }, {
     "model": _vm.proxyModelValue
@@ -392,12 +419,12 @@ var __vue_render__ = function () {
   }, [_vm._v(_vm._s(_vm.placeholder))])]] : [!_vm.isEmptyModelValue ? [_vm._t("valueTemplate", function () {
     return [_c('span', {
       staticClass: "truncate"
-    }, [_vm._v("\n              " + _vm._s(_vm.selection && _vm.selection.label) + "\n            ")])];
+    }, [_vm._v("\n                " + _vm._s(_vm.selection.label) + "\n              ")])];
   }, {
     "model": _vm.proxyModelValue
   })] : [_c('span', {
     class: _vm.placeholderStyles
-  }, [_vm._v(_vm._s(_vm.placeholder))])]]], 2), _vm._v(" "), _vm.multiple && _vm.outerItems.length > 0 ? [_vm._v("\n      +" + _vm._s(_vm.outerItems.length) + "\n    ")] : _vm._e(), _vm._v(" "), _c('div', {
+  }, [_vm._v(_vm._s(_vm.placeholder))])]]], 2), _vm._v(" "), _vm.multiple && _vm.outerItems.length > 0 ? [_vm._v("\n        +" + _vm._s(_vm.outerItems.length) + "\n      ")] : _vm._e(), _vm._v(" "), _c('div', {
     class: ['layout-inline-row', 'gap-sm']
   }, [!_vm.multiple && _vm.proxyModelValue ? [_c('OrIconButton', {
     attrs: {
@@ -416,7 +443,7 @@ var __vue_render__ = function () {
       "icon": _vm.popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down',
       "variant": 'outlined'
     }
-  })], 2), _vm._v(" "), _c('OrPopover', {
+  })], 2)], _vm._v(" "), _c('OrPopover', {
     ref: "popover",
     attrs: {
       "variant": 'auto',
@@ -426,21 +453,7 @@ var __vue_render__ = function () {
       "custom-styles": _vm.dropdownStyles,
       "disable-default-styles": true
     }
-  }, [_vm.enableSearch ? [_c('OrInput', {
-    attrs: {
-      "type": 'search',
-      "placeholder": 'Search',
-      "size": 's',
-      "disable-default-styles": true
-    },
-    model: {
-      value: _vm.searchText,
-      callback: function ($$v) {
-        _vm.searchText = $$v;
-      },
-      expression: "searchText"
-    }
-  })] : _vm._e(), _vm._v(" "), _vm.resolvedSearchOptions.length > 0 ? [_vm.groupByFunction ? _vm._l(_vm.groupedOptions, function (group, groupName) {
+  }, [_vm.resolvedSearchOptions.length > 0 ? [_vm.groupByFunction ? _vm._l(_vm.groupedOptions, function (group, groupName) {
     return _c('OrExpansionPanel', {
       key: groupName,
       attrs: {

package/dist/esm/v2/components/index.js

@@ -78,7 +78,7 @@ export { _ as OrSearch } from '../OrSearch-e2941d35.js';
 export { _ as OrSearchV3 } from '../OrSearch-07d9774c.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-d4e32f80.js';
 export { _ as OrSelect } from '../OrSelect-49239b74.js';
-export { _ as OrSelectV3 } from '../OrSelect-87c52f1f.js';
+export { _ as OrSelectV3 } from '../OrSelect-5b9b51e3.js';
 export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-c56a9221.js';
 export { _ as OrSidebarV3 } from '../OrSidebar-41c869c1.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-0d2e41c8.js';

package/dist/esm/v2/components/or-select-v3/OrSelect.vue.d.ts

@@ -19,6 +19,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     popoverState: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    searchControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
     placeholderStyles: import("@vue/composition-api").ComputedRef<string[]>;
     dropdownStyles: import("@vue/composition-api").ComputedRef<string[]>;
     noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;
@@ -206,6 +207,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     popoverState: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    searchControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
     placeholderStyles: import("@vue/composition-api").ComputedRef<string[]>;
     dropdownStyles: import("@vue/composition-api").ComputedRef<string[]>;
     noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;

package/dist/esm/v2/components/or-select-v3/index.js

@@ -1,4 +1,4 @@
-export { _ as OrSelectV3 } from '../../OrSelect-87c52f1f.js';
+export { _ as OrSelectV3 } from '../../OrSelect-5b9b51e3.js';
 export { I as SelectSize } from '../../OrInputBox.vue_rollup-plugin-vue_script-1715021a.js';
 import 'vue-demi';
 import '../../dropdown-open-e1f90e0a.js';

package/dist/esm/v2/components/or-select-v3/styles.d.ts

@@ -1,5 +1,6 @@
 export declare const SelectRoot: string[];
 export declare const SelectControl: string[];
+export declare const SelectSearchControl: string[];
 export declare const SelectPlaceholder: string[];
 export declare const SelectDropdown: string[];
 export declare const SelectDropdownDefault: string[];

package/dist/esm/v2/index.js

@@ -78,7 +78,7 @@ export { _ as OrSearch } from './OrSearch-e2941d35.js';
 export { _ as OrSearchV3 } from './OrSearch-07d9774c.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-d4e32f80.js';
 export { _ as OrSelect } from './OrSelect-49239b74.js';
-export { _ as OrSelectV3 } from './OrSelect-87c52f1f.js';
+export { _ as OrSelectV3 } from './OrSelect-5b9b51e3.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-c56a9221.js';
 export { _ as OrSidebarV3 } from './OrSidebar-41c869c1.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-0d2e41c8.js';

package/dist/esm/v3/{OrSelect-38aea86a.js → OrSelect-97cccfd0.js}

@@ -17,7 +17,7 @@ import { s as script$9 } from './OrLabel-4da56db0.js';
 import { s as script$a } from './OrMenuItem-54062d59.js';
 import { s as script$b } from './OrPopover-94dc1203.js';
 import { s as script$c } from './OrTag-d882091d.js';
-import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, withModifiers, createVNode, vShow } from 'vue';
+import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, Fragment, createElementVNode, renderList, createVNode, vShow } from 'vue';
 
 const SelectRoot = [
 // Layout
@@ -35,6 +35,11 @@ const SelectControl = [
 'gap-xs',
 // Typography
 'typography-inherit'];
+const SelectSearchControl = [
+// Box
+'w-full',
+// Spacing
+'!mx-none', '!my-none'];
 const SelectPlaceholder = [
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
@@ -191,6 +196,7 @@ var script = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-select-v3', ...SelectRoot]);
     const controlStyles = computed(() => [...SelectControl]);
+    const searchControlStyles = computed(() => [...SelectSearchControl]);
     const placeholderStyles = computed(() => [...SelectPlaceholder]);
     const dropdownStyles = computed(() => {
       var _a;
@@ -286,6 +292,7 @@ var script = defineComponent({
       popoverState,
       rootStyles,
       controlStyles,
+      searchControlStyles,
       placeholderStyles,
       dropdownStyles,
       noSearchResultsStyles,
@@ -322,10 +329,10 @@ const _hoisted_5 = {
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrLabel = resolveComponent("OrLabel");
+  const _component_OrInput = resolveComponent("OrInput");
   const _component_OrTag = resolveComponent("OrTag");
   const _component_OrIconButton = resolveComponent("OrIconButton");
   const _component_OrIcon = resolveComponent("OrIcon");
-  const _component_OrInput = resolveComponent("OrInput");
   const _component_OrCheckbox = resolveComponent("OrCheckbox");
   const _component_OrMenuItem = resolveComponent("OrMenuItem");
   const _component_OrExpansionPanel = resolveComponent("OrExpansionPanel");
@@ -358,22 +365,34 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     readonly: _ctx.readonly,
     disabled: _ctx.disabled
   }, {
-    default: withCtx(() => [createElementVNode("div", {
+    default: withCtx(() => [_ctx.popoverState === 'open' && _ctx.enableSearch ? (openBlock(), createBlock(_component_OrInput, {
+      key: 0,
+      modelValue: _ctx.searchText,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.searchText = $event),
+      class: normalizeClass(_ctx.searchControlStyles),
+      type: 'search',
+      placeholder: 'Search',
+      size: _ctx.size,
+      "disable-default-styles": true,
+      onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
+    }, null, 8 /* PROPS */, ["modelValue", "class", "size"])) : (openBlock(), createElementBlock(Fragment, {
+      key: 1
+    }, [createElementVNode("div", {
       id: _ctx.controlId,
       ref: "control",
       class: normalizeClass(_ctx.controlStyles),
       tabindex: !_ctx.disabled ? 0 : null,
       disabled: _ctx.disabled,
-      onFocus: _cache[0] || (_cache[0] = $event => _ctx.$emit('focus', $event)),
-      onBlur: _cache[1] || (_cache[1] = $event => _ctx.$emit('blur', $event))
+      onFocus: _cache[2] || (_cache[2] = $event => _ctx.$emit('focus', $event)),
+      onBlur: _cache[3] || (_cache[3] = $event => _ctx.$emit('blur', $event))
     }, [_ctx.multiple ? (openBlock(), createElementBlock(Fragment, {
       key: 0
     }, [_ctx.proxyModelValue && _ctx.proxyModelValue.length > 0 ? renderSlot(_ctx.$slots, "valueTemplate", {
       key: 0,
       model: _ctx.proxyModelValue
-    }, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.selection, (option, i) => {
+    }, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.selection, option => {
       return openBlock(), createBlock(_component_OrTag, {
-        key: i,
+        key: option.value,
         variant: 'reset',
         disabled: _ctx.disabled || _ctx.readonly,
         onReset: $event => _ctx.deselect(option)
@@ -390,7 +409,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, [!_ctx.isEmptyModelValue ? renderSlot(_ctx.$slots, "valueTemplate", {
       key: 0,
       model: _ctx.proxyModelValue
-    }, () => [createElementVNode("span", _hoisted_2, toDisplayString(_ctx.selection && _ctx.selection.label), 1 /* TEXT */)]) : (openBlock(), createElementBlock("span", {
+    }, () => [createElementVNode("span", _hoisted_2, toDisplayString(_ctx.selection.label), 1 /* TEXT */)]) : (openBlock(), createElementBlock("span", {
       key: 1,
       class: normalizeClass(_ctx.placeholderStyles)
     }, toDisplayString(_ctx.placeholder), 3 /* TEXT, CLASS */))], 64 /* STABLE_FRAGMENT */))], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1), _ctx.multiple && _ctx.outerItems.length > 0 ? (openBlock(), createElementBlock(Fragment, {
@@ -400,11 +419,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       icon: 'close',
       color: 'inherit',
       disabled: _ctx.readonly || _ctx.disabled,
-      onClick: _cache[2] || (_cache[2] = withModifiers($event => _ctx.$emit('update:modelValue', undefined), ["stop"]))
+      onClick: _cache[4] || (_cache[4] = withModifiers($event => _ctx.$emit('update:modelValue', undefined), ["stop"]))
     }, null, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true), createVNode(_component_OrIcon, {
       icon: _ctx.popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down',
       variant: 'outlined'
-    }, null, 8 /* PROPS */, ["icon"])]), createVNode(_component_OrPopover, {
+    }, null, 8 /* PROPS */, ["icon"])])], 64 /* STABLE_FRAGMENT */)), createVNode(_component_OrPopover, {
       ref: "popover",
       variant: 'auto',
       trigger: _ctx.inputBoxRoot,
@@ -413,16 +432,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       "custom-styles": _ctx.dropdownStyles,
       "disable-default-styles": true
     }, {
-      default: withCtx(() => [_ctx.enableSearch ? (openBlock(), createBlock(_component_OrInput, {
-        key: 0,
-        modelValue: _ctx.searchText,
-        "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => _ctx.searchText = $event),
-        type: 'search',
-        placeholder: 'Search',
-        size: 's',
-        "disable-default-styles": true
-      }, null, 8 /* PROPS */, ["modelValue"])) : createCommentVNode("v-if", true), _ctx.resolvedSearchOptions.length > 0 ? (openBlock(), createElementBlock(Fragment, {
-        key: 1
+      default: withCtx(() => [_ctx.resolvedSearchOptions.length > 0 ? (openBlock(), createElementBlock(Fragment, {
+        key: 0
       }, [_ctx.groupByFunction ? (openBlock(true), createElementBlock(Fragment, {
         key: 0
       }, renderList(_ctx.groupedOptions, (group, groupName) => {
@@ -441,7 +452,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 option: option
               }, () => [createVNode(_component_OrCheckbox, {
                 modelValue: _ctx.proxyModelValue,
-                "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => _ctx.proxyModelValue = $event),
+                "onUpdate:modelValue": _cache[5] || (_cache[5] = $event => _ctx.proxyModelValue = $event),
                 value: option.value,
                 label: option.label,
                 "label-variant": 'input'
@@ -479,7 +490,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         }, {
           default: withCtx(() => [createVNode(_component_OrCheckbox, {
             modelValue: _ctx.proxyModelValue,
-            "onUpdate:modelValue": _cache[5] || (_cache[5] = $event => _ctx.proxyModelValue = $event),
+            "onUpdate:modelValue": _cache[6] || (_cache[6] = $event => _ctx.proxyModelValue = $event),
             value: option.value,
             label: option.label,
             "label-variant": 'input'
@@ -510,7 +521,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           _: 2 /* DYNAMIC */
         }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]);
       }), 128 /* KEYED_FRAGMENT */))], 64 /* STABLE_FRAGMENT */))], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("div", {
-        key: 2,
+        key: 1,
         class: normalizeClass(_ctx.noSearchResultsStyles)
       }, [renderSlot(_ctx.$slots, "noSearchResultsTemplate", {}, () => [createTextVNode(" No results ")])], 2 /* CLASS */))]),
 

package/dist/esm/v3/components/index.js

@@ -75,7 +75,7 @@ export { s as OrSearch } from '../OrSearch-d0c8aca7.js';
 export { s as OrSearchV3 } from '../OrSearch-e268ceb2.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-c8eb217d.js';
 export { s as OrSelect } from '../OrSelect-60205145.js';
-export { s as OrSelectV3 } from '../OrSelect-38aea86a.js';
+export { s as OrSelectV3 } from '../OrSelect-97cccfd0.js';
 export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar-aaf73310.js';
 export { s as OrSidebarV3 } from '../OrSidebar-fadc2431.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-e0cbeaa5.js';

package/dist/esm/v3/components/or-select-v3/OrSelect.vue.d.ts

@@ -76,6 +76,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     popoverState: import("vue-demi").ComputedRef<any>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
     controlStyles: import("vue-demi").ComputedRef<string[]>;
+    searchControlStyles: import("vue-demi").ComputedRef<string[]>;
     placeholderStyles: import("vue-demi").ComputedRef<string[]>;
     dropdownStyles: import("vue-demi").ComputedRef<string[]>;
     noSearchResultsStyles: import("vue-demi").ComputedRef<string[]>;

package/dist/esm/v3/components/or-select-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect-38aea86a.js';
+export { s as OrSelectV3 } from '../../OrSelect-97cccfd0.js';
 export { I as SelectSize } from '../../OrInputBox-32b37b17.js';
 import 'vue-demi';
 import '../../dropdown-open-e1f90e0a.js';

package/dist/esm/v3/components/or-select-v3/styles.d.ts

@@ -1,5 +1,6 @@
 export declare const SelectRoot: string[];
 export declare const SelectControl: string[];
+export declare const SelectSearchControl: string[];
 export declare const SelectPlaceholder: string[];
 export declare const SelectDropdown: string[];
 export declare const SelectDropdownDefault: string[];

package/dist/esm/v3/index.js

@@ -75,7 +75,7 @@ export { s as OrSearch } from './OrSearch-d0c8aca7.js';
 export { s as OrSearchV3 } from './OrSearch-e268ceb2.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-c8eb217d.js';
 export { s as OrSelect } from './OrSelect-60205145.js';
-export { s as OrSelectV3 } from './OrSelect-38aea86a.js';
+export { s as OrSelectV3 } from './OrSelect-97cccfd0.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-aaf73310.js';
 export { s as OrSidebarV3 } from './OrSidebar-fadc2431.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-e0cbeaa5.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "4.15.2",
+  "version": "4.15.3-beta.3053.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -153,6 +153,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "667546ace3a445e5e0bb0193d617c7214fa1471a"
+  }
 }

package/src/components/or-select-v3/OrSelect.vue

@@ -29,75 +29,89 @@
       :readonly="readonly"
       :disabled="disabled"
     >
-      <div
-        :id="controlId"
-        ref="control"
-        :class="controlStyles"
-        :tabindex="!disabled ? 0 : null"
-        :disabled="disabled"
-        @focus="$emit('focus', $event)"
-        @blur="$emit('blur', $event)"
-      >
-        <template v-if="multiple">
-          <template v-if="proxyModelValue && proxyModelValue.length > 0">
-            <slot
-              name="valueTemplate"
-              :model="proxyModelValue"
-            >
-              <OrTag
-                v-for="(option, i) in selection"
-                :key="i"
-                :variant="'reset'"
-                :disabled="disabled || readonly"
-                @reset="deselect(option)"
+      <template v-if="popoverState === 'open' && enableSearch">
+        <OrInput
+          v-model="searchText"
+          :class="searchControlStyles"
+          :type="'search'"
+          :placeholder="'Search'"
+          :size="size"
+          :disable-default-styles="true"
+          @click.stop
+        />
+      </template>
+
+      <template v-else>
+        <div
+          :id="controlId"
+          ref="control"
+          :class="controlStyles"
+          :tabindex="!disabled ? 0 : null"
+          :disabled="disabled"
+          @focus="$emit('focus', $event)"
+          @blur="$emit('blur', $event)"
+        >
+          <template v-if="multiple">
+            <template v-if="proxyModelValue && proxyModelValue.length > 0">
+              <slot
+                name="valueTemplate"
+                :model="proxyModelValue"
               >
-                {{ option.label }}
-              </OrTag>
-            </slot>
+                <OrTag
+                  v-for="option in selection"
+                  :key="option.value"
+                  :variant="'reset'"
+                  :disabled="disabled || readonly"
+                  @reset="deselect(option)"
+                >
+                  {{ option.label }}
+                </OrTag>
+              </slot>
+            </template>
+
+            <template v-else>
+              <span :class="placeholderStyles">{{ placeholder }}</span>
+            </template>
           </template>
 
           <template v-else>
-            <span :class="placeholderStyles">{{ placeholder }}</span>
-          </template>
-        </template>
+            <template v-if="!isEmptyModelValue">
+              <slot
+                name="valueTemplate"
+                :model="proxyModelValue"
+              >
+                <span class="truncate">
+                  {{ selection.label }}
+                </span>
+              </slot>
+            </template>
 
-        <template v-else>
-          <template v-if="!isEmptyModelValue">
-            <slot
-              name="valueTemplate"
-              :model="proxyModelValue"
-            >
-              <span class="truncate">
-                {{ selection && selection.label }}
-              </span>
-            </slot>
+            <template v-else>
+              <span :class="placeholderStyles">{{ placeholder }}</span>
+            </template>
           </template>
+        </div>
 
-          <template v-else>
-            <span :class="placeholderStyles">{{ placeholder }}</span>
-          </template>
+        <template v-if="multiple && outerItems.length > 0">
+          +{{ outerItems.length }}
         </template>
-      </div>
 
-      <template v-if="multiple && outerItems.length > 0">
-        +{{ outerItems.length }}
-      </template>
+        <div :class="['layout-inline-row', 'gap-sm']">
+          <template v-if="!multiple && proxyModelValue">
+            <OrIconButton
+              :icon="'close'"
+              :color="'inherit'"
+              :disabled="readonly || disabled"
+              @click.stop="$emit('update:modelValue', undefined)"
+            />
+          </template>
 
-      <div :class="['layout-inline-row', 'gap-sm']">
-        <template v-if="!multiple && proxyModelValue">
-          <OrIconButton
-            :icon="'close'"
-            :color="'inherit'"
-            :disabled="readonly || disabled"
-            @click.stop="$emit('update:modelValue', undefined)"
+          <OrIcon
+            :icon="popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'"
+            :variant="'outlined'"
           />
-        </template>
-
-        <OrIcon
-          :icon="popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'"
-          :variant="'outlined'"
-        />
-      </div>
+        </div>
+      </template>
 
       <OrPopover
         ref="popover"
@@ -108,16 +122,6 @@
         :custom-styles="dropdownStyles"
         :disable-default-styles="true"
       >
-        <template v-if="enableSearch">
-          <OrInput
-            v-model="searchText"
-            :type="'search'"
-            :placeholder="'Search'"
-            :size="'s'"
-            :disable-default-styles="true"
-          />
-        </template>
-
         <template v-if="resolvedSearchOptions.length > 0">
           <template v-if="groupByFunction">
             <OrExpansionPanel
@@ -252,7 +256,7 @@ import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import { OrTagV3 as OrTag } from '../or-tag-v3';
 import { SelectSize } from './props';
-import { SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectNoSearchResults, SelectPlaceholder, SelectRoot } from './styles';
+import { SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectNoSearchResults, SelectPlaceholder, SelectRoot, SelectSearchControl } from './styles';
 import { SelectGroupByFunction, SelectOption, SelectSearchFunction } from './types';
 
 export default defineComponent({
@@ -406,6 +410,10 @@ export default defineComponent({
       ...SelectControl,
     ]);
 
+    const searchControlStyles = computed(() => [
+      ...SelectSearchControl,
+    ]);
+
     const placeholderStyles = computed(() => [
       ...SelectPlaceholder,
     ]);
@@ -533,6 +541,7 @@ export default defineComponent({
       popoverState,
       rootStyles,
       controlStyles,
+      searchControlStyles,
       placeholderStyles,
       dropdownStyles,
       noSearchResultsStyles,

package/src/components/or-select-v3/styles.ts

@@ -23,6 +23,15 @@ export const SelectControl: string[] = [
   'typography-inherit',
 ];
 
+export const SelectSearchControl: string[] = [
+  // Box
+  'w-full',
+
+  // Spacing
+  '!mx-none',
+  '!my-none',
+];
+
 export const SelectPlaceholder: string[] = [
   // Theme
   'theme-foreground-outline',