@onereach/ui-components 5.0.2 → 5.1.0

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

package/dist/esm/v3/{OrSearch-e6f6573f.js → OrSearch-9c694c80.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-41b40eee.js';
+import { s as script$1 } from './OrInput-8463ca1d.js';
 import { I as InputBoxSize } from './OrInputBox-912a6254.js';
 import { resolveComponent, openBlock, createBlock, normalizeClass } from 'vue';
 

package/dist/esm/v3/{OrSelect-db90c428.js → OrSelect-3a39f89e.js}

@@ -1,26 +1,27 @@
 import { defineComponent, getCurrentInstance, ref, computed, toRef, onMounted, watch } from 'vue-demi';
-import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
+import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.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-09f62aab.js';
+import { s as script$1 } from './OrCheckbox-a571fc90.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-de8b6cd0.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-41b40eee.js';
-import { s as script$9 } from './OrLabel-4da56db0.js';
+import { s as script$7 } from './OrInput-8463ca1d.js';
+import { s as script$9 } from './OrLabel-d4c46bb6.js';
 import { s as script$a } from './OrMenuItem-54062d59.js';
 import { s as script$b } from './OrPopover-84f83a8c.js';
 import { s as script$c } from './OrTag-9494f132.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, withModifiers, createVNode, vShow } from 'vue';
 
-const SelectRoot = [
+const Select = [
 // Layout
 'layout-column',
 // Spacing
@@ -28,14 +29,19 @@ const SelectRoot = [
 const SelectControl = [
 // Layout
 'layout-row',
-// Box
-'w-full',
+// Layout (empty)
+'empty:hidden',
 // Overflow
 'overflow-hidden',
 // Spacing
 'gap-xs',
 // Typography
 'typography-inherit'];
+const SelectSearchControl = [
+// Layout
+'grow',
+// Spacing
+'!mx-lg md:!-mx-sm+', '!my-sm md:!my-none'];
 const SelectPlaceholder = [
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
@@ -60,6 +66,11 @@ 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',
@@ -71,7 +82,6 @@ const SelectNoSearchResults = [
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
 var script = defineComponent({
-  name: 'OrSelect',
   components: {
     OrCheckbox: script$1,
     OrError: script$2,
@@ -123,6 +133,10 @@ var script = defineComponent({
       type: String,
       default: undefined
     },
+    searchPlaceholder: {
+      type: String,
+      default: undefined
+    },
     hint: {
       type: String,
       default: undefined
@@ -180,6 +194,7 @@ 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;
@@ -190,13 +205,15 @@ var script = defineComponent({
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
     // Styles
-    const rootStyles = computed(() => ['or-select-v3', ...SelectRoot]);
+    const rootStyles = computed(() => ['or-select-v3', ...Select]);
     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());
@@ -213,7 +230,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));
+        return modelValue.map(value => props.options.find(option => option.value === value)).filter(value => !!value);
       }
       return props.options.find(option => option.value === modelValue);
     });
@@ -273,22 +290,39 @@ 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,
@@ -302,31 +336,40 @@ var script = defineComponent({
       toggle,
       close,
       deselect,
+      clearSearchControl,
       innerItems,
-      outerItems
+      outerItems,
+      isDesktop,
+      isMobile
     };
   }
 });
 
 const _hoisted_1 = ["id", "tabindex", "disabled"];
-const _hoisted_2 = {
+const _hoisted_2 = ["disabled"];
+const _hoisted_3 = {
   class: "truncate"
 };
-const _hoisted_3 = {
+const _hoisted_4 = ["disabled"];
+const _hoisted_5 = {
+  key: 2,
+  class: /*#__PURE__*/normalizeClass(['grow'])
+};
+const _hoisted_6 = {
   class: /*#__PURE__*/normalizeClass(['layout-inline-row', 'gap-sm'])
 };
-const _hoisted_4 = {
+const _hoisted_7 = {
   class: /*#__PURE__*/normalizeClass(['contents'])
 };
-const _hoisted_5 = {
+const _hoisted_8 = {
   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");
@@ -369,12 +412,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       onBlur: _cache[1] || (_cache[1] = $event => _ctx.$emit('blur', $event))
     }, [_ctx.multiple ? (openBlock(), createElementBlock(Fragment, {
       key: 0
-    }, [_ctx.proxyModelValue && _ctx.proxyModelValue.length > 0 ? renderSlot(_ctx.$slots, "valueTemplate", {
+    }, [!_ctx.isEmptyModelValue ? 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)
@@ -383,25 +426,38 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
         _: 2 /* DYNAMIC */
       }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["disabled", "onReset"]);
-    }), 128 /* KEYED_FRAGMENT */))]) : (openBlock(), createElementBlock("span", {
+    }), 128 /* KEYED_FRAGMENT */))]) : _ctx.popoverState === 'closed' || !_ctx.enableSearch ? (openBlock(), createElementBlock("span", {
       key: 1,
-      class: normalizeClass(_ctx.placeholderStyles)
-    }, toDisplayString(_ctx.placeholder), 3 /* TEXT, CLASS */))], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock(Fragment, {
+      class: normalizeClass(_ctx.placeholderStyles),
+      disabled: _ctx.disabled ? '' : null
+    }, toDisplayString(_ctx.placeholder), 11 /* TEXT, CLASS, PROPS */, _hoisted_2)) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock(Fragment, {
       key: 1
     }, [!_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_3, toDisplayString(_ctx.selection && _ctx.selection.label), 1 /* TEXT */)]) : _ctx.popoverState === 'closed' || !_ctx.enableSearch ? (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, {
+      class: normalizeClass(_ctx.placeholderStyles),
+      disabled: _ctx.disabled ? '' : null
+    }, toDisplayString(_ctx.placeholder), 11 /* TEXT, CLASS, PROPS */, _hoisted_4)) : createCommentVNode("v-if", true)], 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_3, [!_ctx.multiple && _ctx.proxyModelValue ? (openBlock(), createBlock(_component_OrIconButton, {
+    }, [createTextVNode(" +" + toDisplayString(_ctx.outerItems.length), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), _ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isDesktop ? (openBlock(), createBlock(_component_OrInput, {
+      key: 1,
+      ref: "searchControl",
+      modelValue: _ctx.searchText,
+      "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.searchText = $event),
+      class: normalizeClass([..._ctx.searchControlStyles, _ctx.isEmptyModelValue && 'md:!ml-none']),
+      type: 'search',
+      placeholder: _ctx.searchPlaceholder,
+      size: _ctx.size,
+      "disable-default-styles": true,
+      onClick: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"]))
+    }, null, 8 /* PROPS */, ["modelValue", "class", "placeholder", "size"])) : (openBlock(), createElementBlock("div", _hoisted_5)), createElementVNode("div", _hoisted_6, [_ctx.popoverState === 'closed' && !_ctx.isEmptyModelValue ? (openBlock(), createBlock(_component_OrIconButton, {
       key: 0,
       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', _ctx.multiple ? [] : 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'
@@ -412,17 +468,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       placement: 'bottom',
       "full-width": true,
       "custom-styles": _ctx.dropdownStyles,
-      "disable-default-styles": true
+      "disable-default-styles": true,
+      onClose: _cache[8] || (_cache[8] = $event => _ctx.clearSearchControl())
     }, {
-      default: withCtx(() => [_ctx.enableSearch ? (openBlock(), createBlock(_component_OrInput, {
+      default: withCtx(() => [_ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isMobile ? (openBlock(), createBlock(_component_OrInput, {
         key: 0,
+        ref: "searchControl",
         modelValue: _ctx.searchText,
-        "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => _ctx.searchText = $event),
+        "onUpdate:modelValue": _cache[5] || (_cache[5] = $event => _ctx.searchText = $event),
+        class: normalizeClass(_ctx.searchControlStyles),
         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, {
+        placeholder: _ctx.searchPlaceholder
+      }, null, 8 /* PROPS */, ["modelValue", "class", "placeholder"])) : createCommentVNode("v-if", true), _ctx.resolvedSearchOptions.length > 0 ? (openBlock(), createElementBlock(Fragment, {
         key: 1
       }, [_ctx.groupByFunction ? (openBlock(true), createElementBlock(Fragment, {
         key: 0
@@ -435,25 +492,28 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             key: 0
           }, renderList(group, (option, i) => {
             return openBlock(), createBlock(_component_OrMenuItem, {
-              key: i
+              key: i,
+              selected: _ctx.proxyModelValue && _ctx.proxyModelValue.includes(option.value)
             }, {
               default: withCtx(() => [renderSlot(_ctx.$slots, "optionTemplate", {
                 model: _ctx.proxyModelValue,
                 option: option
               }, () => [createVNode(_component_OrCheckbox, {
                 modelValue: _ctx.proxyModelValue,
-                "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => _ctx.proxyModelValue = $event),
+                "onUpdate:modelValue": _cache[6] || (_cache[6] = $event => _ctx.proxyModelValue = $event),
                 value: option.value,
                 label: option.label,
-                "label-variant": 'input'
+                "label-variant": 'menu-item'
               }, null, 8 /* PROPS */, ["modelValue", "value", "label"])])]),
               _: 2 /* DYNAMIC */
-            }, 1024 /* DYNAMIC_SLOTS */);
+            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["selected"]);
           }), 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();
@@ -465,7 +525,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               }, () => [createTextVNode(toDisplayString(option.label), 1 /* TEXT */)])]),
 
               _: 2 /* DYNAMIC */
-            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]);
+            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "selected", "onClick"]);
           }), 128 /* KEYED_FRAGMENT */))]),
 
           _: 2 /* DYNAMIC */
@@ -476,14 +536,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0
       }, renderList(_ctx.resolvedSearchOptions, (option, i) => {
         return openBlock(), createBlock(_component_OrMenuItem, {
-          key: i
+          key: i,
+          selected: _ctx.proxyModelValue && _ctx.proxyModelValue.includes(option.value)
         }, {
           default: withCtx(() => [createVNode(_component_OrCheckbox, {
             modelValue: _ctx.proxyModelValue,
-            "onUpdate:modelValue": _cache[5] || (_cache[5] = $event => _ctx.proxyModelValue = $event),
+            "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => _ctx.proxyModelValue = $event),
             value: option.value,
             label: option.label,
-            "label-variant": 'input'
+            "label-variant": 'menu-item'
           }, {
             default: withCtx(() => [renderSlot(_ctx.$slots, "optionTemplate", {
               model: _ctx.proxyModelValue,
@@ -492,12 +553,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             _: 2 /* DYNAMIC */
           }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "value", "label"])]),
           _: 2 /* DYNAMIC */
-        }, 1024 /* DYNAMIC_SLOTS */);
+        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["selected"]);
       }), 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();
@@ -509,7 +572,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, () => [createTextVNode(toDisplayString(option.label), 1 /* TEXT */)])]),
 
           _: 2 /* DYNAMIC */
-        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]);
+        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "selected", "onClick"]);
       }), 128 /* KEYED_FRAGMENT */))], 64 /* STABLE_FRAGMENT */))], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("div", {
         key: 2,
         class: normalizeClass(_ctx.noSearchResultsStyles)
@@ -518,14 +581,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_4, [_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_7, [_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_5, [createVNode(_component_OrError, {
+  }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */), [[vShow, !_ctx.error]]), withDirectives(createElementVNode("div", _hoisted_8, [createVNode(_component_OrError, {
     disabled: _ctx.disabled
   }, {
     default: withCtx(() => [createTextVNode(toDisplayString(_ctx.error), 1 /* TEXT */)]),

package/dist/esm/v3/{OrSwitch-a6efd081.js → OrSwitch-f4d9e196.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-4da56db0.js';
+import { s as script$1, L as LabelVariant } from './OrLabel-d4c46bb6.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/{OrTagInput-f11a2d68.js → OrTagInput-8cc92992.js}

@@ -9,7 +9,7 @@ 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-de8b6cd0.js';
 import { s as script$4, I as InputBoxSize } from './OrInputBox-912a6254.js';
-import { s as script$5 } from './OrLabel-4da56db0.js';
+import { s as script$5 } from './OrLabel-d4c46bb6.js';
 import { s as script$6 } from './OrTags-cec632b8.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';

package/dist/esm/v3/{OrTextarea-6c471ccd.js → OrTextarea-f3412790.js}

@@ -8,7 +8,7 @@ import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34
 import { s as script$1 } from './OrError-c01d0c29.js';
 import { s as script$2 } from './OrHint-06ab89d7.js';
 import { s as script$3, I as InputBoxSize } from './OrInputBox-912a6254.js';
-import { s as script$4 } from './OrLabel-4da56db0.js';
+import { s as script$4 } from './OrLabel-d4c46bb6.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, withDirectives, createElementVNode, mergeProps, vModelText, createSlots, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 

package/dist/esm/v3/{OrTimePicker-b1ff46c1.js → OrTimePicker-e3b5ef7f.js}

@@ -1,17 +1,17 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
-import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
+import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
 import '@vueuse/core';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
-import { b as script$1, d as script$2, e as script$3, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-3c371f05.js';
-import { a as script$4, b as script$5, D as DateTimePickerTimeFormat } from './OrDateTimePicker-3d4aeabe.js';
+import { b as script$1, d as script$2, e as script$3, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-8f0408b2.js';
+import { a as script$4, b as script$5, D as DateTimePickerTimeFormat } from './OrDateTimePicker-888a2f98.js';
 import { s as script$6 } from './OrError-c01d0c29.js';
 import { s as script$7 } from './OrHint-06ab89d7.js';
 import { s as script$9 } from './OrIconButton-de8b6cd0.js';
 import { s as script$8 } from './OrIcon-62793572.js';
 import { s as script$a, I as InputBoxSize } from './OrInputBox-912a6254.js';
-import { s as script$b } from './OrLabel-4da56db0.js';
+import { s as script$b } from './OrLabel-d4c46bb6.js';
 import { s as script$c } from './OrPopover-84f83a8c.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, createVNode, Fragment, createElementVNode } from 'vue';
 

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

@@ -7,25 +7,25 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from '../OrButton-4a3c3e7b.js';
 export { s as OrCard } from '../OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from '../OrCardCollection-8c81a2d5.js';
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollection-a03fe4ee.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollection-e4a72381.js';
 export { s as OrCardV3 } from '../OrCard-cc82902c.js';
 export { s as OrCheckbox } from '../OrCheckbox-5666c954.js';
-export { s as OrCheckboxGroupV3 } from '../OrCheckboxGroup-6c054793.js';
-export { s as OrCheckboxTreeV3 } from '../OrCheckboxTree-bb32455e.js';
-export { s as OrCheckboxV3 } from '../OrCheckbox-09f62aab.js';
+export { s as OrCheckboxGroupV3 } from '../OrCheckboxGroup-7fe25d85.js';
+export { s as OrCheckboxTreeV3 } from '../OrCheckboxTree-bea23696.js';
+export { s as OrCheckboxV3 } from '../OrCheckbox-a571fc90.js';
 export { s as OrChip } from '../OrChip-74e27265.js';
 export { s as OrChips } from '../OrChips-348b13e4.js';
 export { s as OrCode, O as OrCodeLanguages } from '../OrCode-0aadc737.js';
-export { C as CodeLanguage, s as OrCodeV3 } from '../OrCode-e0046019.js';
+export { C as CodeLanguage, s as OrCodeV3 } from '../OrCode-efdc9eee.js';
 export { s as OrCollapse } from '../OrCollapse-d7c0afae.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from '../OrColorPicker-252f482b.js';
-export { s as OrCombinedInputV3 } from '../OrCombinedInput-2800ee8b.js';
+export { s as OrCombinedInputV3 } from '../OrCombinedInput-6dd0f75d.js';
 export { I as CombinedInputSize, I as DatePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, s as OrInputBoxV3, I as SearchSize, I as SelectSize, I as TagInputSize, I as TextareaSize, I as TimePickerSize } from '../OrInputBox-912a6254.js';
 export { s as OrConfirm } from '../OrConfirm-97ab80b9.js';
-export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-fd33e48c.js';
-export { s as OrDatePickerV3 } from '../OrDatePicker-dae900de.js';
+export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-fa35ffd0.js';
+export { s as OrDatePickerV3 } from '../OrDatePicker-40e867e5.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-4bfefbcd.js';
-export { D as DateTimePickerTimeFormat, s as OrDateTimePickerV3, D as TimePickerFormat } from '../OrDateTimePicker-3d4aeabe.js';
+export { D as DateTimePickerTimeFormat, s as OrDateTimePickerV3, D as TimePickerFormat } from '../OrDateTimePicker-888a2f98.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from '../OrEmptyState-5349a1f9.js';
 export { s as OrError } from '../OrError-f90296db.js';
 export { s as OrErrorTagV3 } from '../OrErrorTag-ade9192b.js';
@@ -33,7 +33,7 @@ export { s as OrErrorV3 } from '../OrError-c01d0c29.js';
 export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../OrExpansionPanel-891154e6.js';
 export { F as FabColor, s as OrFabV3 } from '../OrFab-83cd7ed7.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from '../OrFloating-052ede5f.js';
-export { F as FormGroupDirection, s as OrFormGroupV3 } from '../OrFormGroup-9f581536.js';
+export { F as FormGroupDirection, s as OrFormGroupV3 } from '../OrFormGroup-c4631ef0.js';
 export { s as OrHint } from '../OrHint-8822005b.js';
 export { s as OrHintV3 } from '../OrHint-06ab89d7.js';
 export { s as OrIcon, O as OrIconColors, a as OrIconType } from '../OrIcon-f7130a5c.js';
@@ -44,9 +44,9 @@ export { I as InlineInputType, s as OrInlineInputV3 } from '../OrInlineInput-0b0
 export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInlineTextEdit } from '../OrInlineTextEdit-a3c4c7dc.js';
 export { s as OrInlineTextareaV3 } from '../OrInlineTextarea-2c54367e.js';
 export { s as OrInput } from '../OrInput-2c3111c2.js';
-export { I as InputType, s as OrInputV3 } from '../OrInput-41b40eee.js';
+export { I as InputType, s as OrInputV3 } from '../OrInput-8463ca1d.js';
 export { s as OrLabel } from '../OrLabel-a7d99df4.js';
-export { L as LabelVariant, s as OrLabelV3 } from '../OrLabel-4da56db0.js';
+export { L as LabelVariant, s as OrLabelV3 } from '../OrLabel-d4c46bb6.js';
 export { L as LinkColor, s as OrLinkV3 } from '../OrLink-dcae31fb.js';
 export { s as OrList } from '../OrList-aa7b5ef9.js';
 export { s as OrListOfInputs } from '../OrListOfInputs-f8740785.js';
@@ -69,13 +69,13 @@ export { s as OrProgress, O as OrProgressColors, a as OrProgressTypes } from '..
 export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from '../OrProgress-a54a42c0.js';
 export { s as OrRadio } from '../OrRadio-40bf2c87.js';
 export { s as OrRadioGroup } from '../OrRadioGroup-00785e41.js';
-export { s as OrRadioGroupV3 } from '../OrRadioGroup-58c0214c.js';
-export { s as OrRadioV3 } from '../OrRadio-7b722b16.js';
+export { s as OrRadioGroupV3 } from '../OrRadioGroup-82d10aa8.js';
+export { s as OrRadioV3 } from '../OrRadio-48cd02a9.js';
 export { s as OrSearch } from '../OrSearch-2800e9bf.js';
-export { s as OrSearchV3 } from '../OrSearch-e6f6573f.js';
+export { s as OrSearchV3 } from '../OrSearch-9c694c80.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-c8eb217d.js';
 export { s as OrSelect } from '../OrSelect-9520d6e6.js';
-export { s as OrSelectV3 } from '../OrSelect-db90c428.js';
+export { s as OrSelectV3 } from '../OrSelect-3a39f89e.js';
 export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar-aaf73310.js';
 export { s as OrSidebarV3 } from '../OrSidebar-34492810.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-f6f5ec80.js';
@@ -90,23 +90,23 @@ export { s as OrSlider } from '../OrSlider-b7bd588e.js';
 export { s as OrSortingV3 } from '../OrSorting-dc01b9de.js';
 export { s as OrStepper } from '../OrStepper-4943002c.js';
 export { s as OrSwitch } from '../OrSwitch-fb864132.js';
-export { s as OrSwitchV3 } from '../OrSwitch-a6efd081.js';
+export { s as OrSwitchV3 } from '../OrSwitch-f4d9e196.js';
 export { s as OrTab } from '../OrTab-d8d4e871.js';
 export { s as OrTabHeaderItem } from '../OrTabHeaderItem-c2af7ca3.js';
 export { s as OrTabV3 } from '../OrTab-2d567d8e.js';
 export { s as OrTabs } from '../OrTabs-3da3ea89.js';
 export { s as OrTabsV3, T as TabsVariant } from '../OrTabs-3fa4a344.js';
 export { s as OrTag } from '../OrTag-1b3b1296.js';
-export { s as OrTagInputV3 } from '../OrTagInput-f11a2d68.js';
+export { s as OrTagInputV3 } from '../OrTagInput-8cc92992.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-9494f132.js';
 export { s as OrTagsV3 } from '../OrTags-cec632b8.js';
 export { s as OrTeleport } from '../OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from '../OrTeleport.vue3-8099178c.js';
 export { s as OrTextV3 } from '../OrText-d54c951d.js';
 export { s as OrTextarea } from '../OrTextarea-7a753c1a.js';
-export { s as OrTextareaV3 } from '../OrTextarea-6c471ccd.js';
+export { s as OrTextareaV3 } from '../OrTextarea-f3412790.js';
 export { s as OrTextbox, T as TextboxTypes } from '../OrTextbox-fe62c6c3.js';
-export { s as OrTimePickerV3 } from '../OrTimePicker-b1ff46c1.js';
+export { s as OrTimePickerV3 } from '../OrTimePicker-e3b5ef7f.js';
 export { s as OrToast, a as OrToastContainer } from '../OrToastContainer-d6f117e2.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from '../useToast-05a9c81b.js';
 export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from '../types-93e80c1b.js';
@@ -144,8 +144,8 @@ import '../dom-aecadd9a.js';
 import 'lodash/isElement';
 import 'lodash/get';
 import '@vueuse/math';
-import '../dropdown-open-e1f90e0a.js';
-import '../OrDateTimePickerPopoverHeader-3c371f05.js';
+import '../dropdown-open-06d651cf.js';
+import '../OrDateTimePickerPopoverHeader-8f0408b2.js';
 import 'lodash/padStart';
 import '@floating-ui/dom';
 import '../useResponsive-a02e95b7.js';

package/dist/esm/v3/components/or-card-collection-v3/index.js

@@ -1,4 +1,4 @@
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../../OrCardCollection-a03fe4ee.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../../OrCardCollection-e4a72381.js';
 import 'vue-demi';
 import '../../OrIconButton-de8b6cd0.js';
 import '../../OrIcon-62793572.js';
@@ -16,15 +16,15 @@ import '../../OrBottomSheet-20ba316c.js';
 import '../../OrOverlay-99e696e8.js';
 import '../../OrTeleport.vue3-8099178c.js';
 import '../../useTheme-e23d13c8.js';
-import '../../OrSearch-e6f6573f.js';
-import '../../OrInput-41b40eee.js';
+import '../../OrSearch-9c694c80.js';
+import '../../OrInput-8463ca1d.js';
 import '../../useIdAttribute-859439f0.js';
 import '../../useProxyModelValue-940010d2.js';
 import '../../useValidationAttributes-d1abbe34.js';
 import '../../OrError-c01d0c29.js';
 import '../../OrHint-06ab89d7.js';
 import '../../OrInputBox-912a6254.js';
-import '../../OrLabel-4da56db0.js';
+import '../../OrLabel-d4c46bb6.js';
 import '../../OrLoader-b79022da.js';
 import '../../style-inject.es-4c6f2515.js';
 import '../../OrSorting-dc01b9de.js';