@onereach/ui-components 5.0.2-beta.3147.0 → 5.0.2-beta.3148.0

package/dist/esm/v3/{OrLabel-d4c46bb6.js → OrLabel-4da56db0.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 {
@@ -83,13 +72,12 @@ var script = defineComponent({
   }
 });
 
-const _hoisted_1 = ["selected", "disabled"];
+const _hoisted_1 = ["disabled"];
 const _hoisted_2 = ["for", "required", "disabled"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: "root",
     class: normalizeClass(_ctx.rootStyles),
-    selected: _ctx.selected ? '' : null,
     disabled: _ctx.disabled ? '' : null
   }, [createElementVNode("label", {
     class: normalizeClass(_ctx.textStyles),

package/dist/esm/v3/{OrMenu-7943ee1f.js → OrMenu-a0c0e2db.js}

@@ -3,7 +3,7 @@ import '@vueuse/core';
 import { u as usePopoverState } from './usePopoverState-b92c698b.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
-import { s as script$1, P as PopoverPlacement } from './OrPopover-466a8297.js';
+import { s as script$1, P as PopoverPlacement } from './OrPopover-7ebafc52.js';
 import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, withModifiers, renderSlot } from 'vue';
 
 const Menu = [

package/dist/esm/v3/{OrModal-fb598e97.js → OrModal-98d05f94.js}

@@ -5,7 +5,7 @@ import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { s as script$5 } from './OrOverlay-99e696e8.js';
 import { openBlock, createElementBlock, normalizeClass, renderSlot, resolveComponent, createElementVNode, createVNode, withModifiers, createBlock, withCtx, mergeProps, createCommentVNode } from 'vue';
-import { s as script$4 } from './OrIconButton-65b1a004.js';
+import { s as script$4 } from './OrIconButton-ed3ca1f4.js';
 
 const ModalContent = [
 // Overflow

package/dist/esm/v3/{OrNotification-a1de8289.js → OrNotification-13e23a58.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { s as script$2 } from './OrIconButton-65b1a004.js';
+import { s as script$2 } from './OrIconButton-ed3ca1f4.js';
 import { s as script$1 } from './OrIcon-62793572.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, renderSlot, createBlock, withModifiers, createCommentVNode } from 'vue';
 

package/dist/esm/v3/{OrPagination-0dd5c8f0.js → OrPagination-5813b0b9.js}

@@ -7,8 +7,8 @@ import 'tailwindcss/resolveConfig';
 import { s as script$1 } from './OrButton-4a3c3e7b.js';
 import { s as script$2 } from './OrIcon-62793572.js';
 import { s as script$4 } from './OrMenuItem-54062d59.js';
-import { s as script$3 } from './OrMenu-7943ee1f.js';
-import './OrPopover-466a8297.js';
+import { s as script$3 } from './OrMenu-a0c0e2db.js';
+import './OrPopover-7ebafc52.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withModifiers, withCtx, Fragment, renderList, createBlock, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 
 const PaginationRoot = [

package/dist/esm/v3/{OrPopover-466a8297.js → OrPopover-7ebafc52.js}

@@ -6,7 +6,7 @@ import { u as usePopoverState } from './usePopoverState-b92c698b.js';
 import { u as useResponsive } from './useResponsive-a02e95b7.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
-import { s as script$1 } from './OrBottomSheet-98aec82b.js';
+import { s as script$1 } from './OrBottomSheet-ebfaa41b.js';
 import { s as script$2 } from './OrTeleport.vue3-8099178c.js';
 import { resolveComponent, openBlock, createBlock, withCtx, withDirectives, createElementVNode, createElementBlock, mergeProps, renderSlot, normalizeClass, createCommentVNode, vShow } from 'vue';
 

package/dist/esm/v3/{OrRadio-48cd02a9.js → OrRadio-7b722b16.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 { s as script$1, L as LabelVariant } from './OrLabel-d4c46bb6.js';
+import { s as script$1, L as LabelVariant } from './OrLabel-4da56db0.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, withDirectives, createElementVNode, mergeProps, vModelRadio, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 

package/dist/esm/v3/{OrRadioGroup-82d10aa8.js → OrRadioGroup-58c0214c.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 { s as script$1 } from './OrFormGroup-c4631ef0.js';
-import { s as script$2 } from './OrRadio-48cd02a9.js';
+import { s as script$1 } from './OrFormGroup-9f581536.js';
+import { s as script$2 } from './OrRadio-7b722b16.js';
 import { resolveComponent, openBlock, createBlock, withCtx, renderSlot, createElementBlock, Fragment, renderList } from 'vue';
 
 var script = defineComponent({

package/dist/esm/v3/{OrSearch-998e4390.js → OrSearch-f9e99142.js}

@@ -1,6 +1,6 @@
 import { debouncedWatch } from '@vueuse/core';
 import { defineComponent, ref, computed, watch } from 'vue-demi';
-import { s as script$1 } from './OrInput-487c7632.js';
+import { s as script$1 } from './OrInput-e9ec0f43.js';
 import { I as InputBoxSize } from './OrInputBox-912a6254.js';
 import { resolveComponent, openBlock, createBlock, normalizeClass } from 'vue';
 

package/dist/esm/v3/{OrSelect-e1886d74.js → OrSelect-a2992cc5.js}

@@ -1,27 +1,26 @@
 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 { s as script$1 } from './OrCheckbox-a571fc90.js';
+import { s as script$1 } from './OrCheckbox-09f62aab.js';
 import { s as script$2 } from './OrError-c01d0c29.js';
 import { s as script$3 } from './OrExpansionPanel-891154e6.js';
 import { s as script$4 } from './OrHint-06ab89d7.js';
-import { s as script$6 } from './OrIconButton-65b1a004.js';
+import { s as script$6 } from './OrIconButton-ed3ca1f4.js';
 import { s as script$5 } from './OrIcon-62793572.js';
 import { s as script$8, I as InputBoxSize } from './OrInputBox-912a6254.js';
-import { s as script$7 } from './OrInput-487c7632.js';
-import { s as script$9 } from './OrLabel-d4c46bb6.js';
+import { s as script$7 } from './OrInput-e9ec0f43.js';
+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-466a8297.js';
-import { s as script$c } from './OrTag-8fede185.js';
+import { s as script$b } from './OrPopover-7ebafc52.js';
+import { s as script$c } from './OrTag-89409786.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, withModifiers, createVNode, vShow } from 'vue';
 
-const Select = [
+const SelectRoot = [
 // Layout
 'layout-column',
 // Spacing
@@ -37,11 +36,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',
@@ -66,11 +60,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',
@@ -82,6 +71,7 @@ const SelectNoSearchResults = [
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
 var script = defineComponent({
+  name: 'OrSelect',
   components: {
     OrCheckbox: script$1,
     OrError: script$2,
@@ -190,7 +180,6 @@ var script = defineComponent({
       return (_a = inputBox.value) === null || _a === void 0 ? void 0 : _a.root;
     });
     const control = ref();
-    const searchControl = ref();
     const popover = ref();
     const popoverRoot = computed(() => {
       var _a;
@@ -201,15 +190,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());
@@ -226,7 +213,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);
     });
@@ -286,39 +273,22 @@ var script = defineComponent({
         proxyModelValue.value = modelValue.filter(value => value !== option.value);
       }
     }
-    function clearSearchControl() {
-      searchText.value = '';
-    }
     const {
       innerItems,
       outerItems
     } = useOverflow(control);
-    // Utils
-    const {
-      isDesktop,
-      isMobile
-    } = useResponsive();
-    // Effects
-    watch(searchControl, control => {
-      setTimeout(() => {
-        control === null || control === void 0 ? void 0 : control.focus();
-      });
-    });
     return {
       root,
       inputBox,
       inputBoxRoot,
       control,
-      searchControl,
       popover,
       popoverRoot,
       popoverState,
       rootStyles,
       controlStyles,
-      searchControlStyles,
       placeholderStyles,
       dropdownStyles,
-      dropdownItemStyles,
       noSearchResultsStyles,
       controlId,
       proxyModelValue,
@@ -332,36 +302,31 @@ var script = defineComponent({
       toggle,
       close,
       deselect,
-      clearSearchControl,
       innerItems,
-      outerItems,
-      isDesktop,
-      isMobile
+      outerItems
     };
   }
 });
 
 const _hoisted_1 = ["id", "tabindex", "disabled"];
-const _hoisted_2 = ["disabled"];
-const _hoisted_3 = {
+const _hoisted_2 = {
   class: "truncate"
 };
-const _hoisted_4 = ["disabled"];
-const _hoisted_5 = {
+const _hoisted_3 = {
   class: /*#__PURE__*/normalizeClass(['layout-inline-row', 'gap-sm'])
 };
-const _hoisted_6 = {
+const _hoisted_4 = {
   class: /*#__PURE__*/normalizeClass(['contents'])
 };
-const _hoisted_7 = {
+const _hoisted_5 = {
   class: /*#__PURE__*/normalizeClass(['contents'])
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrLabel = resolveComponent("OrLabel");
   const _component_OrTag = resolveComponent("OrTag");
-  const _component_OrInput = resolveComponent("OrInput");
   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");
@@ -400,17 +365,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(_ctx.controlStyles),
       tabindex: !_ctx.disabled ? 0 : null,
       disabled: _ctx.disabled,
-      onFocus: _cache[6] || (_cache[6] = $event => _ctx.$emit('focus', $event)),
-      onBlur: _cache[7] || (_cache[7] = $event => _ctx.$emit('blur', $event))
+      onFocus: _cache[0] || (_cache[0] = $event => _ctx.$emit('focus', $event)),
+      onBlur: _cache[1] || (_cache[1] = $event => _ctx.$emit('blur', $event))
     }, [_ctx.multiple ? (openBlock(), createElementBlock(Fragment, {
       key: 0
-    }, [!_ctx.isEmptyModelValue ? (openBlock(), createElementBlock(Fragment, {
-      key: 0
-    }, [renderSlot(_ctx.$slots, "valueTemplate", {
+    }, [_ctx.proxyModelValue && _ctx.proxyModelValue.length > 0 ? renderSlot(_ctx.$slots, "valueTemplate", {
+      key: 0,
       model: _ctx.proxyModelValue
-    }, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.selection, option => {
+    }, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.selection, (option, i) => {
       return openBlock(), createBlock(_component_OrTag, {
-        key: option.value,
+        key: i,
         variant: 'reset',
         disabled: _ctx.disabled || _ctx.readonly,
         onReset: $event => _ctx.deselect(option)
@@ -419,64 +383,25 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
         _: 2 /* DYNAMIC */
       }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["disabled", "onReset"]);
-    }), 128 /* KEYED_FRAGMENT */))]), _ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isDesktop ? (openBlock(), createBlock(_component_OrInput, {
-      key: 0,
-      ref: "searchControl",
-      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"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock(Fragment, {
-      key: 1
-    }, [_ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isDesktop ? (openBlock(), createBlock(_component_OrInput, {
-      key: 0,
-      ref: "searchControl",
-      modelValue: _ctx.searchText,
-      "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.searchText = $event),
-      class: normalizeClass(_ctx.searchControlStyles),
-      type: 'search',
-      placeholder: 'Search',
-      size: _ctx.size,
-      "disable-default-styles": true,
-      onClick: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"]))
-    }, null, 8 /* PROPS */, ["modelValue", "class", "size"])) : (openBlock(), createElementBlock("span", {
+    }), 128 /* KEYED_FRAGMENT */))]) : (openBlock(), createElementBlock("span", {
       key: 1,
-      class: normalizeClass(_ctx.placeholderStyles),
-      disabled: _ctx.disabled ? '' : null
-    }, toDisplayString(_ctx.placeholder), 11 /* TEXT, CLASS, PROPS */, _hoisted_2))], 64 /* STABLE_FRAGMENT */))], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock(Fragment, {
-      key: 1
-    }, [_ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isDesktop ? (openBlock(), createBlock(_component_OrInput, {
-      key: 0,
-      ref: "searchControl",
-      modelValue: _ctx.searchText,
-      "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => _ctx.searchText = $event),
-      class: normalizeClass(_ctx.searchControlStyles),
-      type: 'search',
-      placeholder: 'Search',
-      size: _ctx.size,
-      "disable-default-styles": true,
-      onClick: _cache[5] || (_cache[5] = withModifiers(() => {}, ["stop"]))
-    }, null, 8 /* PROPS */, ["modelValue", "class", "size"])) : (openBlock(), createElementBlock(Fragment, {
+      class: normalizeClass(_ctx.placeholderStyles)
+    }, toDisplayString(_ctx.placeholder), 3 /* TEXT, CLASS */))], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock(Fragment, {
       key: 1
     }, [!_ctx.isEmptyModelValue ? renderSlot(_ctx.$slots, "valueTemplate", {
       key: 0,
       model: _ctx.proxyModelValue
-    }, () => [createElementVNode("span", _hoisted_3, toDisplayString(_ctx.selection && _ctx.selection.label), 1 /* TEXT */)]) : (openBlock(), createElementBlock("span", {
+    }, () => [createElementVNode("span", _hoisted_2, toDisplayString(_ctx.selection && _ctx.selection.label), 1 /* TEXT */)]) : (openBlock(), createElementBlock("span", {
       key: 1,
-      class: normalizeClass(_ctx.placeholderStyles),
-      disabled: _ctx.disabled ? '' : null
-    }, toDisplayString(_ctx.placeholder), 11 /* TEXT, CLASS, PROPS */, _hoisted_4))], 64 /* STABLE_FRAGMENT */))], 64 /* STABLE_FRAGMENT */))], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1), _ctx.multiple && _ctx.outerItems.length > 0 ? (openBlock(), createElementBlock(Fragment, {
+      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, {
       key: 0
-    }, [createTextVNode(" +" + toDisplayString(_ctx.outerItems.length), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_5, [!_ctx.isEmptyModelValue && _ctx.popoverState === 'closed' ? (openBlock(), createBlock(_component_OrIconButton, {
+    }, [createTextVNode(" +" + toDisplayString(_ctx.outerItems.length), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_3, [!_ctx.multiple && _ctx.proxyModelValue ? (openBlock(), createBlock(_component_OrIconButton, {
       key: 0,
       icon: 'close',
       color: 'inherit',
       disabled: _ctx.readonly || _ctx.disabled,
-      onClick: _cache[8] || (_cache[8] = withModifiers($event => _ctx.$emit('update:modelValue', _ctx.multiple ? [] : undefined), ["stop"]))
+      onClick: _cache[2] || (_cache[2] = 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'
@@ -487,18 +412,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       placement: 'bottom',
       "full-width": true,
       "custom-styles": _ctx.dropdownStyles,
-      "disable-default-styles": true,
-      onClose: _cache[12] || (_cache[12] = $event => _ctx.clearSearchControl())
+      "disable-default-styles": true
     }, {
-      default: withCtx(() => [_ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isMobile ? (openBlock(), createBlock(_component_OrInput, {
+      default: withCtx(() => [_ctx.enableSearch ? (openBlock(), createBlock(_component_OrInput, {
         key: 0,
-        ref: "searchControl",
         modelValue: _ctx.searchText,
-        "onUpdate:modelValue": _cache[9] || (_cache[9] = $event => _ctx.searchText = $event),
-        class: normalizeClass(_ctx.searchControlStyles),
+        "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => _ctx.searchText = $event),
         type: 'search',
-        placeholder: 'Search'
-      }, null, 8 /* PROPS */, ["modelValue", "class"])) : createCommentVNode("v-if", true), _ctx.resolvedSearchOptions.length > 0 ? (openBlock(), createElementBlock(Fragment, {
+        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
       }, [_ctx.groupByFunction ? (openBlock(true), createElementBlock(Fragment, {
         key: 0
@@ -511,28 +435,25 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             key: 0
           }, renderList(group, (option, i) => {
             return openBlock(), createBlock(_component_OrMenuItem, {
-              key: i,
-              selected: _ctx.proxyModelValue && _ctx.proxyModelValue.includes(option.value)
+              key: i
             }, {
               default: withCtx(() => [renderSlot(_ctx.$slots, "optionTemplate", {
                 model: _ctx.proxyModelValue,
                 option: option
               }, () => [createVNode(_component_OrCheckbox, {
                 modelValue: _ctx.proxyModelValue,
-                "onUpdate:modelValue": _cache[10] || (_cache[10] = $event => _ctx.proxyModelValue = $event),
+                "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => _ctx.proxyModelValue = $event),
                 value: option.value,
                 label: option.label,
-                "label-variant": 'menu-item'
+                "label-variant": 'input'
               }, null, 8 /* PROPS */, ["modelValue", "value", "label"])])]),
               _: 2 /* DYNAMIC */
-            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["selected"]);
+            }, 1024 /* DYNAMIC_SLOTS */);
           }), 128 /* KEYED_FRAGMENT */)) : (openBlock(true), createElementBlock(Fragment, {
             key: 1
           }, renderList(group, (option, i) => {
             return openBlock(), createBlock(_component_OrMenuItem, {
               key: i,
-              class: normalizeClass(_ctx.dropdownItemStyles),
-              selected: _ctx.proxyModelValue === option.value,
               onClick: withModifiers($event => {
                 _ctx.proxyModelValue = option.value;
                 _ctx.close();
@@ -544,7 +465,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               }, () => [createTextVNode(toDisplayString(option.label), 1 /* TEXT */)])]),
 
               _: 2 /* DYNAMIC */
-            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "selected", "onClick"]);
+            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]);
           }), 128 /* KEYED_FRAGMENT */))]),
 
           _: 2 /* DYNAMIC */
@@ -555,15 +476,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0
       }, renderList(_ctx.resolvedSearchOptions, (option, i) => {
         return openBlock(), createBlock(_component_OrMenuItem, {
-          key: i,
-          selected: _ctx.proxyModelValue && _ctx.proxyModelValue.includes(option.value)
+          key: i
         }, {
           default: withCtx(() => [createVNode(_component_OrCheckbox, {
             modelValue: _ctx.proxyModelValue,
-            "onUpdate:modelValue": _cache[11] || (_cache[11] = $event => _ctx.proxyModelValue = $event),
+            "onUpdate:modelValue": _cache[5] || (_cache[5] = $event => _ctx.proxyModelValue = $event),
             value: option.value,
             label: option.label,
-            "label-variant": 'menu-item'
+            "label-variant": 'input'
           }, {
             default: withCtx(() => [renderSlot(_ctx.$slots, "optionTemplate", {
               model: _ctx.proxyModelValue,
@@ -572,14 +492,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             _: 2 /* DYNAMIC */
           }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "value", "label"])]),
           _: 2 /* DYNAMIC */
-        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["selected"]);
+        }, 1024 /* DYNAMIC_SLOTS */);
       }), 128 /* KEYED_FRAGMENT */)) : (openBlock(true), createElementBlock(Fragment, {
         key: 1
       }, renderList(_ctx.resolvedSearchOptions, (option, i) => {
         return openBlock(), createBlock(_component_OrMenuItem, {
           key: i,
-          class: normalizeClass(_ctx.dropdownItemStyles),
-          selected: _ctx.proxyModelValue === option.value,
           onClick: withModifiers($event => {
             _ctx.proxyModelValue = option.value;
             _ctx.close();
@@ -591,7 +509,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, () => [createTextVNode(toDisplayString(option.label), 1 /* TEXT */)])]),
 
           _: 2 /* DYNAMIC */
-        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "selected", "onClick"]);
+        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]);
       }), 128 /* KEYED_FRAGMENT */))], 64 /* STABLE_FRAGMENT */))], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("div", {
         key: 2,
         class: normalizeClass(_ctx.noSearchResultsStyles)
@@ -600,14 +518,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       _: 3 /* FORWARDED */
     }, 8 /* PROPS */, ["trigger", "custom-styles"])]),
     _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["class", "variant", "size", "invalid", "readonly", "disabled"])), [[_directive_dropdown_open, _ctx.toggle], [_directive_dropdown_close, _ctx.close]]), withDirectives(createElementVNode("div", _hoisted_6, [_ctx.hint ? (openBlock(), createBlock(_component_OrHint, {
+  }, 8 /* PROPS */, ["class", "variant", "size", "invalid", "readonly", "disabled"])), [[_directive_dropdown_open, _ctx.toggle], [_directive_dropdown_close, _ctx.close]]), withDirectives(createElementVNode("div", _hoisted_4, [_ctx.hint ? (openBlock(), createBlock(_component_OrHint, {
     key: 0,
     disabled: _ctx.disabled
   }, {
     default: withCtx(() => [createTextVNode(toDisplayString(_ctx.hint), 1 /* TEXT */)]),
 
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */), [[vShow, !_ctx.error]]), withDirectives(createElementVNode("div", _hoisted_7, [createVNode(_component_OrError, {
+  }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */), [[vShow, !_ctx.error]]), withDirectives(createElementVNode("div", _hoisted_5, [createVNode(_component_OrError, {
     disabled: _ctx.disabled
   }, {
     default: withCtx(() => [createTextVNode(toDisplayString(_ctx.error), 1 /* TEXT */)]),

package/dist/esm/v3/{OrSidebar-d8e70813.js → OrSidebar-6d907fe1.js}

@@ -1,6 +1,6 @@
 import { useDraggable, useElementBounding } from '@vueuse/core';
 import { defineComponent, ref, computed, useSlots, watch } from 'vue-demi';
-import { s as script$1, O as OrSidebarPlacement } from './OrSidebarCollapseButton-7a9f76cf.js';
+import { s as script$1, O as OrSidebarPlacement } from './OrSidebarCollapseButton-673f0fd8.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createElementVNode, normalizeStyle, createBlock, withDirectives, vShow } from 'vue';
 
 const SidebarRoot = [

package/dist/esm/v3/{OrSidebarCollapseButton-7a9f76cf.js → OrSidebarCollapseButton-673f0fd8.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { s as script$1 } from './OrIconButton-65b1a004.js';
+import { s as script$1 } from './OrIconButton-ed3ca1f4.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withModifiers } from 'vue';
 
 var OrSidebarPlacement;

package/dist/esm/v3/{OrSorting-d5f3e077.js → OrSorting-2138609c.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, toRef, computed } from 'vue-demi';
-import { s as script$1 } from './OrMenu-7943ee1f.js';
-import './OrPopover-466a8297.js';
+import { s as script$1 } from './OrMenu-a0c0e2db.js';
+import './OrPopover-7ebafc52.js';
 import { s as script$2 } from './OrMenuItem-54062d59.js';
 import { s as script$3 } from './OrButton-4a3c3e7b.js';
 import { s as script$4 } from './OrIcon-62793572.js';

package/dist/esm/v3/{OrSwitch-f4d9e196.js → OrSwitch-a6efd081.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 { s as script$1, L as LabelVariant } from './OrLabel-d4c46bb6.js';
+import { s as script$1, L as LabelVariant } from './OrLabel-4da56db0.js';
 import { s as script$2 } from './OrLoader-b79022da.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, withDirectives, mergeProps, vModelCheckbox, createVNode, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';

package/dist/esm/v3/{OrTabs-83e4477c.js → OrTabs-d4e4b241.js}

@@ -5,8 +5,8 @@ import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { s as script$1 } from './OrIcon-62793572.js';
 import { s as script$3 } from './OrMenuItem-54062d59.js';
-import { s as script$2 } from './OrMenu-7943ee1f.js';
-import './OrPopover-466a8297.js';
+import { s as script$2 } from './OrMenu-a0c0e2db.js';
+import './OrPopover-7ebafc52.js';
 import { s as script$4 } from './OrTab-2d567d8e.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString, createVNode, createCommentVNode, renderSlot } from 'vue';
 

package/dist/esm/v3/{OrTag-8fede185.js → OrTag-89409786.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, watchPostEffect, unref } from 'vue-demi';
-import { s as script$1 } from './OrIconButton-65b1a004.js';
+import { s as script$1 } from './OrIconButton-ed3ca1f4.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, withModifiers, createCommentVNode } from 'vue';
 
 var TagVariant;

package/dist/esm/v3/{OrTagInput-65e725b0.js → OrTagInput-fefa4042.js}

@@ -7,10 +7,10 @@ import 'tailwindcss/resolveConfig';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { s as script$1 } from './OrError-c01d0c29.js';
 import { s as script$2 } from './OrHint-06ab89d7.js';
-import { s as script$3 } from './OrIconButton-65b1a004.js';
+import { s as script$3 } from './OrIconButton-ed3ca1f4.js';
 import { s as script$4, I as InputBoxSize } from './OrInputBox-912a6254.js';
-import { s as script$5 } from './OrLabel-d4c46bb6.js';
-import { s as script$6 } from './OrTags-5feb7c2d.js';
+import { s as script$5 } from './OrLabel-4da56db0.js';
+import { s as script$6 } from './OrTags-4ed528cc.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, withModifiers, withDirectives, createElementVNode, mergeProps, withKeys, vModelDynamic, createSlots, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';