@onereach/ui-components 5.0.1-beta.3131.0 → 5.0.1

package/dist/esm/v2/{OrCardCollection-10ae5e3a.js → OrCardCollection-9aaa7a3c.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, ref, watch } from 'vue-demi';
 import { _ as __vue_component__$2 } from './OrIconButton-311050dc.js';
-import { _ as __vue_component__$4 } from './OrSearch-598dee09.js';
+import { _ as __vue_component__$4 } from './OrSearch-f49e5f70.js';
 import './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
 import { _ as __vue_component__$3 } from './OrSorting-fad7928f.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/esm/v2/{OrCheckbox-ae903071.js → OrCheckbox-db66b4ea.js}

@@ -5,7 +5,7 @@ import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { i as isEmptyValue } from './isEmptyValue-fd56a6e4.js';
-import { _ as __vue_component__$1, L as LabelVariant } from './OrLabel-4a3d8904.js';
+import { _ as __vue_component__$1, L as LabelVariant } from './OrLabel-63380256.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
@@ -133,7 +133,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-9968416e]{appearance:none;line-height:0}";
+var css_248z = "input[data-v-07623e1e]{appearance:none;line-height:0}";
 styleInject(css_248z);
 
 /* script */
@@ -174,7 +174,6 @@ var __vue_render__ = function () {
     attrs: {
       "control-id": _vm.controlAttributes.id,
       "variant": _vm.labelVariant,
-      "selected": _vm.isChecked,
       "required": _vm.required,
       "disabled": _vm.disabled
     },
@@ -194,7 +193,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-9968416e";
+const __vue_scope_id__ = "data-v-07623e1e";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v2/{OrCheckboxGroup-74dc7c1d.js → OrCheckboxGroup-a04f27fe.js}

@@ -3,8 +3,8 @@ import '@vueuse/core';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
-import { _ as __vue_component__$1 } from './OrCheckboxTree-19f5d69b.js';
-import { _ as __vue_component__$2, F as FormGroupDirection } from './OrFormGroup-9000fcdf.js';
+import { _ as __vue_component__$1 } from './OrCheckboxTree-f48db82f.js';
+import { _ as __vue_component__$2, F as FormGroupDirection } from './OrFormGroup-29a514db.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var script = defineComponent({

package/dist/esm/v2/{OrCheckboxTree-19f5d69b.js → OrCheckboxTree-f48db82f.js}

@@ -4,7 +4,7 @@ import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { _ as __vue_component__$3 } from './OrButton-a23ee9f0.js';
-import { _ as __vue_component__$2 } from './OrCheckbox-ae903071.js';
+import { _ as __vue_component__$2 } from './OrCheckbox-db66b4ea.js';
 import { _ as __vue_component__$1 } from './OrIcon-d35a84d8.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrCode-65f78f9f.js → OrCode-dd915faf.js}

@@ -18,7 +18,7 @@ import { _ as __vue_component__$2 } from './OrHint-aa221198.js';
 import { _ as __vue_component__$3 } from './OrIconButton-311050dc.js';
 import { _ as __vue_component__$4 } from './OrInputBox-7dc5b9e9.js';
 import './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
-import { _ as __vue_component__$5 } from './OrLabel-4a3d8904.js';
+import { _ as __vue_component__$5 } from './OrLabel-63380256.js';
 import { _ as __vue_component__$6 } from './OrModal-3dafa3ce.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrCombinedInput-2639e3e1.js → OrCombinedInput-45187323.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { _ as __vue_component__$1 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$2 } from './OrHint-aa221198.js';
-import { _ as __vue_component__$3 } from './OrLabel-4a3d8904.js';
+import { _ as __vue_component__$3 } from './OrLabel-63380256.js';
 import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrConfirm-d2ae622a.js → OrConfirm-a0875502.js}

@@ -5,7 +5,7 @@ import { u as usePopoverState } from './usePopoverState-b92c698b.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { _ as __vue_component__$2, a as ButtonColor } from './OrButton-a23ee9f0.js';
-import { _ as __vue_component__$3 } from './OrInput-fbed0b61.js';
+import { _ as __vue_component__$3 } from './OrInput-99ccfff7.js';
 import { _ as __vue_component__$1 } from './OrOverlay-f819eff9.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrDatePicker-3eef3059.js → OrDatePicker-0b119ef4.js}

@@ -1,17 +1,17 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
-import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
+import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
 import '@vueuse/core';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
-import { _ as __vue_component__$1, a as __vue_component__$2, b as __vue_component__$3, c as __vue_component__$4, d as __vue_component__$5, e as __vue_component__$6, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-83eb5ad1.js';
+import { _ as __vue_component__$1, a as __vue_component__$2, b as __vue_component__$3, c as __vue_component__$4, d as __vue_component__$5, e as __vue_component__$6, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-30ec0bf4.js';
 import { _ as __vue_component__$7 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$8 } from './OrHint-aa221198.js';
 import { _ as __vue_component__$a } from './OrIconButton-311050dc.js';
 import { _ as __vue_component__$9 } from './OrIcon-d35a84d8.js';
 import { _ as __vue_component__$b } from './OrInputBox-7dc5b9e9.js';
 import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
-import { _ as __vue_component__$c } from './OrLabel-4a3d8904.js';
+import { _ as __vue_component__$c } from './OrLabel-63380256.js';
 import { _ as __vue_component__$d } from './OrPopover-36e2fc9f.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrDateTimePicker-aeebd5ea.js → OrDateTimePicker-061c7472.js}

@@ -1,4 +1,4 @@
-import { s as script } from './OrDateTimePicker.vue_rollup-plugin-vue_script-5044ee23.js';
+import { s as script } from './OrDateTimePicker.vue_rollup-plugin-vue_script-18dea32e.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 /* script */

package/dist/esm/v2/{OrDateTimePicker.vue_rollup-plugin-vue_script-5044ee23.js → OrDateTimePicker.vue_rollup-plugin-vue_script-18dea32e.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
-import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
+import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
 import '@vueuse/core';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind.config';
@@ -10,9 +10,9 @@ import { _ as __vue_component__$c } from './OrIconButton-311050dc.js';
 import { _ as __vue_component__$b } from './OrIcon-d35a84d8.js';
 import { _ as __vue_component__$d } from './OrInputBox-7dc5b9e9.js';
 import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
-import { _ as __vue_component__$e } from './OrLabel-4a3d8904.js';
+import { _ as __vue_component__$e } from './OrLabel-63380256.js';
 import { _ as __vue_component__$f } from './OrPopover-36e2fc9f.js';
-import { _ as __vue_component__$3, a as __vue_component__$4, b as __vue_component__$5, c as __vue_component__$6, d as __vue_component__$7, e as __vue_component__$8, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-83eb5ad1.js';
+import { _ as __vue_component__$3, a as __vue_component__$4, b as __vue_component__$5, c as __vue_component__$6, d as __vue_component__$7, e as __vue_component__$8, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-30ec0bf4.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 import { _ as __vue_component__$2 } from './OrButton-a23ee9f0.js';
 

package/dist/esm/v2/{OrDateTimePickerPopoverHeader-83eb5ad1.js → OrDateTimePickerPopoverHeader-30ec0bf4.js}

@@ -5,7 +5,7 @@ import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 import { _ as __vue_component__$6 } from './OrButton-a23ee9f0.js';
-import { _ as __vue_component__$7 } from './OrLabel-4a3d8904.js';
+import { _ as __vue_component__$7 } from './OrLabel-63380256.js';
 import { _ as __vue_component__$9 } from './OrIconButton-311050dc.js';
 import { _ as __vue_component__$8 } from './OrIcon-d35a84d8.js';
 import { _ as __vue_component__$b } from './OrMenuItem-c1c97ebe.js';

package/dist/esm/v2/{OrFormGroup-9000fcdf.js → OrFormGroup-29a514db.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { _ as __vue_component__$1 } from './OrLabel-4a3d8904.js';
+import { _ as __vue_component__$1 } from './OrLabel-63380256.js';
 import { _ as __vue_component__$2 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$3 } from './OrHint-aa221198.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/esm/v2/{OrInput-fbed0b61.js → OrInput-99ccfff7.js}

@@ -12,7 +12,7 @@ import { _ as __vue_component__$4 } from './OrIconButton-311050dc.js';
 import { _ as __vue_component__$3 } from './OrIcon-d35a84d8.js';
 import { _ as __vue_component__$5 } from './OrInputBox-7dc5b9e9.js';
 import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
-import { _ as __vue_component__$6 } from './OrLabel-4a3d8904.js';
+import { _ as __vue_component__$6 } from './OrLabel-63380256.js';
 import { _ as __vue_component__$7 } from './OrLoader-b0c381f9.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -158,7 +158,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-fea72d76]{min-width:0;background:0 0;outline:0}input[type=number][data-v-fea72d76]::-webkit-inner-spin-button{display:none}input[type=search][data-v-fea72d76]::-webkit-search-cancel-button{display:none}";
+var css_248z = "input[data-v-76960543]{min-width:0;background:0 0;outline:0}input[type=number][data-v-76960543]::-webkit-inner-spin-button{display:none}input[type=search][data-v-76960543]::-webkit-search-cancel-button{display:none}";
 styleInject(css_248z);
 
 /* script */
@@ -418,7 +418,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-fea72d76";
+const __vue_scope_id__ = "data-v-76960543";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v2/{OrLabel-4a3d8904.js → OrLabel-63380256.js}

@@ -5,31 +5,23 @@ var LabelVariant;
 (function (LabelVariant) {
   LabelVariant["Input"] = "input";
   LabelVariant["Toggle"] = "toggle";
-  LabelVariant["MenuItem"] = "menu-item";
 })(LabelVariant || (LabelVariant = {}));
 
-const Label = [
+const LabelRoot = [
 // Layout
 'layout-row justify-between',
 // Spacing
 'gap-sm'];
-const LabelVariants = {
-  [LabelVariant.Input]: [
+const LabelRootVariants = {
+  'input': [
   // Typography
   'typography-caption-regular',
   // Theme
   'theme-foreground-outline', 'dark:theme-foreground-outline-dark'],
-  [LabelVariant.Toggle]: [
+  'toggle': [
   // Typography
   'typography-body-2-regular',
   // Theme
-  'theme-foreground-default', 'dark:theme-foreground-default-dark'],
-  [LabelVariant.MenuItem]: [
-  // Typography
-  'typography-body-2-regular',
-  // Typography (selected)
-  'selected:typography-body-2-semibold',
-  // Theme
   'theme-foreground-default', 'dark:theme-foreground-default-dark']
 };
 const LabelText = [
@@ -44,6 +36,7 @@ const LabelAddon = [
 'whitespace-nowrap'];
 
 var script = defineComponent({
+  name: 'OrLabel',
   props: {
     controlId: {
       type: String,
@@ -53,10 +46,6 @@ var script = defineComponent({
       type: String,
       default: LabelVariant.Input
     },
-    selected: {
-      type: Boolean,
-      default: false
-    },
     required: {
       type: Boolean,
       default: false
@@ -71,7 +60,7 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-label-v3', ...Label, ...LabelVariants[props.variant]]);
+    const rootStyles = computed(() => ['or-label-v3', ...LabelRoot, ...LabelRootVariants[props.variant]]);
     const textStyles = computed(() => [...LabelText]);
     const addonStyles = computed(() => [...LabelAddon]);
     return {
@@ -95,7 +84,6 @@ var __vue_render__ = function () {
     ref: "root",
     class: _vm.rootStyles,
     attrs: {
-      "selected": _vm.selected ? '' : null,
       "disabled": _vm.disabled ? '' : null
     }
   }, [_c('label', {

package/dist/esm/v2/{OrRadio-0fc3ae14.js → OrRadio-b32dfbfe.js}

@@ -4,7 +4,7 @@ import '@vueuse/core';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
-import { _ as __vue_component__$1, L as LabelVariant } from './OrLabel-4a3d8904.js';
+import { _ as __vue_component__$1, L as LabelVariant } from './OrLabel-63380256.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrRadioGroup-1108883d.js → OrRadioGroup-d1c2e460.js}

@@ -3,8 +3,8 @@ import '@vueuse/core';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
-import { _ as __vue_component__$1 } from './OrFormGroup-9000fcdf.js';
-import { _ as __vue_component__$2 } from './OrRadio-0fc3ae14.js';
+import { _ as __vue_component__$1 } from './OrFormGroup-29a514db.js';
+import { _ as __vue_component__$2 } from './OrRadio-b32dfbfe.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var script = defineComponent({

package/dist/esm/v2/{OrSearch-598dee09.js → OrSearch-f49e5f70.js}

@@ -1,6 +1,6 @@
 import { debouncedWatch } from '@vueuse/core';
 import { defineComponent, ref, computed, watch } from 'vue-demi';
-import { _ as __vue_component__$1 } from './OrInput-fbed0b61.js';
+import { _ as __vue_component__$1 } from './OrInput-99ccfff7.js';
 import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrSelect-36461157.js → OrSelect-5e9508c9.js}

@@ -1,13 +1,12 @@
 import { defineComponent, getCurrentInstance, ref, computed, toRef, onMounted, watch } from 'vue-demi';
-import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
+import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
 import { u as useOverflow } from './useOverflow-c856b7b7.js';
 import '@vueuse/core';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
-import { u as useResponsive } from './useResponsive-a02e95b7.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { i as isEmptyValue } from './isEmptyValue-fd56a6e4.js';
-import { _ as __vue_component__$1 } from './OrCheckbox-ae903071.js';
+import { _ as __vue_component__$1 } from './OrCheckbox-db66b4ea.js';
 import { _ as __vue_component__$2 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$3 } from './OrExpansionPanel-f1d8fcc9.js';
 import { _ as __vue_component__$4 } from './OrHint-aa221198.js';
@@ -15,14 +14,14 @@ import { _ as __vue_component__$6 } from './OrIconButton-311050dc.js';
 import { _ as __vue_component__$5 } from './OrIcon-d35a84d8.js';
 import { _ as __vue_component__$8 } from './OrInputBox-7dc5b9e9.js';
 import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
-import { _ as __vue_component__$7 } from './OrInput-fbed0b61.js';
-import { _ as __vue_component__$9 } from './OrLabel-4a3d8904.js';
+import { _ as __vue_component__$7 } from './OrInput-99ccfff7.js';
+import { _ as __vue_component__$9 } from './OrLabel-63380256.js';
 import { _ as __vue_component__$a } from './OrMenuItem-c1c97ebe.js';
 import { _ as __vue_component__$b } from './OrPopover-36e2fc9f.js';
 import { _ as __vue_component__$c } from './OrTag-d21ee9c1.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
-const Select = [
+const SelectRoot = [
 // Layout
 'layout-column',
 // Spacing
@@ -38,11 +37,6 @@ const SelectControl = [
 'gap-xs',
 // Typography
 'typography-inherit'];
-const SelectSearchControl = [
-// Layout
-'grow',
-// Spacing
-'!mx-lg md:!mx-none', '!my-sm md:!my-none'];
 const SelectPlaceholder = [
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
@@ -67,11 +61,6 @@ const SelectDropdownFlipped = [
 'rounded-t-md',
 // Theme
 '!border-b-0'];
-const SelectDropdownItem = [
-// Typography
-'!typography-body-2-regular',
-// Typography (selected)
-'selected:!typography-body-2-semibold'];
 const SelectNoSearchResults = [
 // Layout
 'layout-row justify-center',
@@ -83,6 +72,7 @@ const SelectNoSearchResults = [
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
 var script = defineComponent({
+  name: 'OrSelect',
   components: {
     OrCheckbox: __vue_component__$1,
     OrError: __vue_component__$2,
@@ -191,8 +181,6 @@ var script = defineComponent({
       return (_a = inputBox.value) === null || _a === void 0 ? void 0 : _a.root;
     });
     const control = ref();
-    const searchControl = ref();
-    const mobileSearchControl = ref();
     const popover = ref();
     const popoverRoot = computed(() => {
       var _a;
@@ -203,15 +191,13 @@ var script = defineComponent({
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
     // Styles
-    const rootStyles = computed(() => ['or-select-v3', ...Select]);
+    const rootStyles = computed(() => ['or-select-v3', ...SelectRoot]);
     const controlStyles = computed(() => [...SelectControl]);
-    const searchControlStyles = computed(() => [...SelectSearchControl]);
     const placeholderStyles = computed(() => [...SelectPlaceholder]);
     const dropdownStyles = computed(() => {
       var _a;
       return [...SelectDropdown, ...(((_a = popover.value) === null || _a === void 0 ? void 0 : _a.isFlipped) ? SelectDropdownFlipped : SelectDropdownDefault)];
     });
-    const dropdownItemStyles = computed(() => [...SelectDropdownItem]);
     const noSearchResultsStyles = computed(() => [...SelectNoSearchResults]);
     // State
     const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
@@ -228,7 +214,7 @@ var script = defineComponent({
     const selection = computed(() => {
       const modelValue = proxyModelValue.value;
       if (Array.isArray(modelValue)) {
-        return modelValue.map(value => props.options.find(option => option.value === value)).filter(value => !!value);
+        return modelValue.map(value => props.options.find(option => option.value === value));
       }
       return props.options.find(option => option.value === modelValue);
     });
@@ -288,43 +274,22 @@ var script = defineComponent({
         proxyModelValue.value = modelValue.filter(value => value !== option.value);
       }
     }
-    function focusSearchControl() {
-      setTimeout(() => {
-        var _a, _b;
-        if (isMobile.value) {
-          (_a = mobileSearchControl.value) === null || _a === void 0 ? void 0 : _a.focus();
-        } else {
-          (_b = searchControl.value) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-      });
-    }
-    function clearSearchControl() {
-      searchText.value = '';
-    }
     const {
       innerItems,
       outerItems
     } = useOverflow(control);
-    // Utils
-    const {
-      isMobile
-    } = useResponsive();
     return {
       root,
       inputBox,
       inputBoxRoot,
       control,
-      searchControl,
-      mobileSearchControl,
       popover,
       popoverRoot,
       popoverState,
       rootStyles,
       controlStyles,
-      searchControlStyles,
       placeholderStyles,
       dropdownStyles,
-      dropdownItemStyles,
       noSearchResultsStyles,
       controlId,
       proxyModelValue,
@@ -338,11 +303,8 @@ var script = defineComponent({
       toggle,
       close,
       deselect,
-      focusSearchControl,
-      clearSearchControl,
       innerItems,
-      outerItems,
-      isMobile
+      outerItems
     };
   }
 });
@@ -409,10 +371,10 @@ var __vue_render__ = function () {
         return _vm.$emit('blur', $event);
       }
     }
-  }, [_vm.multiple ? [!_vm.isEmptyModelValue ? [_vm._t("valueTemplate", function () {
-    return _vm._l(_vm.selection, function (option) {
+  }, [_vm.multiple ? [_vm.proxyModelValue && _vm.proxyModelValue.length > 0 ? [_vm._t("valueTemplate", function () {
+    return _vm._l(_vm.selection, function (option, i) {
       return _c('OrTag', {
-        key: option.value,
+        key: i,
         attrs: {
           "variant": 'reset',
           "disabled": _vm.disabled || _vm.readonly
@@ -426,88 +388,19 @@ var __vue_render__ = function () {
     });
   }, {
     "model": _vm.proxyModelValue
-  }), _vm._v(" "), _vm.popoverState === 'open' && _vm.enableSearch ? [_c('OrInput', {
-    ref: "searchControl",
-    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"
-    }
-  })] : _vm._e()] : [_vm.popoverState === 'open' && _vm.enableSearch ? [_c('OrInput', {
-    ref: "searchControl",
-    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('span', {
-    class: _vm.placeholderStyles,
-    attrs: {
-      "disabled": _vm.disabled ? '' : null
-    }
-  }, [_vm._v("\n              " + _vm._s(_vm.placeholder) + "\n            ")])]]] : [_vm.popoverState === 'open' && _vm.enableSearch ? [_c('OrInput', {
-    ref: "searchControl",
-    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"
-    }
-  })] : [!_vm.isEmptyModelValue ? [_vm._t("valueTemplate", function () {
+    class: _vm.placeholderStyles
+  }, [_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 && _vm.selection.label) + "\n            ")])];
   }, {
     "model": _vm.proxyModelValue
   })] : [_c('span', {
-    class: _vm.placeholderStyles,
-    attrs: {
-      "disabled": _vm.disabled ? '' : null
-    }
-  }, [_vm._v("\n              " + _vm._s(_vm.placeholder) + "\n            ")])]]]], 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: _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', {
     class: ['layout-inline-row', 'gap-sm']
-  }, [_vm.proxyModelValue && _vm.popoverState === 'closed' ? [_c('OrIconButton', {
+  }, [!_vm.multiple && _vm.proxyModelValue ? [_c('OrIconButton', {
     attrs: {
       "icon": 'close',
       "color": 'inherit',
@@ -516,7 +409,7 @@ var __vue_render__ = function () {
     on: {
       "click": function ($event) {
         $event.stopPropagation();
-        return _vm.$emit('update:modelValue', _vm.multiple ? [] : undefined);
+        return _vm.$emit('update:modelValue', undefined);
       }
     }
   })] : _vm._e(), _vm._v(" "), _c('OrIcon', {
@@ -533,21 +426,13 @@ var __vue_render__ = function () {
       "full-width": true,
       "custom-styles": _vm.dropdownStyles,
       "disable-default-styles": true
-    },
-    on: {
-      "open": function ($event) {
-        return _vm.focusSearchControl();
-      },
-      "close": function ($event) {
-        return _vm.clearSearchControl();
-      }
     }
-  }, [_vm.isMobile ? [_c('OrInput', {
-    ref: "mobileSearchControl",
-    class: _vm.searchControlStyles,
+  }, [_vm.enableSearch ? [_c('OrInput', {
     attrs: {
       "type": 'search',
-      "placeholder": 'Search'
+      "placeholder": 'Search',
+      "size": 's',
+      "disable-default-styles": true
     },
     model: {
       value: _vm.searchText,
@@ -564,16 +449,13 @@ var __vue_render__ = function () {
       }
     }, [_vm.multiple ? _vm._l(group, function (option, i) {
       return _c('OrMenuItem', {
-        key: i,
-        attrs: {
-          "selected": _vm.proxyModelValue && _vm.proxyModelValue.includes(option.value)
-        }
+        key: i
       }, [_vm._t("optionTemplate", function () {
         return [_c('OrCheckbox', {
           attrs: {
             "value": option.value,
             "label": option.label,
-            "label-variant": 'menu-item'
+            "label-variant": 'input'
           },
           model: {
             value: _vm.proxyModelValue,
@@ -590,10 +472,6 @@ var __vue_render__ = function () {
     }) : _vm._l(group, function (option, i) {
       return _c('OrMenuItem', {
         key: i,
-        class: _vm.dropdownItemStyles,
-        attrs: {
-          "selected": _vm.proxyModelValue === option.value
-        },
         on: {
           "click": function ($event) {
             $event.stopPropagation();
@@ -610,15 +488,12 @@ var __vue_render__ = function () {
     })], 2);
   }) : [_vm.multiple ? _vm._l(_vm.resolvedSearchOptions, function (option, i) {
     return _c('OrMenuItem', {
-      key: i,
-      attrs: {
-        "selected": _vm.proxyModelValue && _vm.proxyModelValue.includes(option.value)
-      }
+      key: i
     }, [_c('OrCheckbox', {
       attrs: {
         "value": option.value,
         "label": option.label,
-        "label-variant": 'menu-item'
+        "label-variant": 'input'
       },
       model: {
         value: _vm.proxyModelValue,
@@ -634,10 +509,6 @@ var __vue_render__ = function () {
   }) : _vm._l(_vm.resolvedSearchOptions, function (option, i) {
     return _c('OrMenuItem', {
       key: i,
-      class: _vm.dropdownItemStyles,
-      attrs: {
-        "selected": _vm.proxyModelValue === option.value
-      },
       on: {
         "click": function ($event) {
           $event.stopPropagation();