@onereach/ui-components 4.11.0-beta.2941.0 → 4.11.0

package/dist/esm/v3/{OrExpansionPanel-df527763.js → OrExpansionPanel-af3a0d63.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, toRef } from 'vue-demi';
 import '@vueuse/core';
-import { u as usePopoverState } from './usePopoverState-8a95a300.js';
+import { u as usePopoverState } from './usePopoverState-b92c698b.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { s as script$1 } from './OrIcon-62793572.js';
@@ -133,7 +133,7 @@ var script = defineComponent({
       open,
       close,
       toggle
-    } = usePopoverState(toRef(props, 'isOpen'), context);
+    } = usePopoverState(toRef(props, 'isOpen'), context.emit);
     return {
       root,
       rootStyles,

package/dist/esm/v3/{OrIconButton-0aaadc68.js → OrIconButton-00f8f0c7.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, isVue3 } from 'vue-demi';
 import { s as script$1, I as IconSize } from './OrIcon-62793572.js';
-import { s as script$2 } from './OrTooltip-3025564a.js';
-import './OrPopover-337df396.js';
+import { s as script$2 } from './OrTooltip-d7d40e38.js';
+import './OrPopover-94dc1203.js';
 import { resolveComponent, openBlock, createBlock, normalizeProps, guardReactiveProps, withCtx, createElementVNode, mergeProps, toHandlers, createVNode } from 'vue';
 
 var IconButtonColor;

package/dist/esm/v3/{OrInlineInput-a6c33dc0.js → OrInlineInput-4d47d731.js}

@@ -1,12 +1,13 @@
-import { defineComponent, ref, computed, reactive, watch } from 'vue-demi';
+import { defineComponent, ref, computed, reactive, toRef, watch } from 'vue-demi';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 import '@vueuse/core';
+import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind.config';
 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-0aaadc68.js';
+import { s as script$3 } from './OrIconButton-00f8f0c7.js';
 import { s as script$4, I as InlineInputBoxSize } from './OrInlineInputBox-01fb2cb2.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, withDirectives, mergeProps, vModelDynamic, withModifiers, createCommentVNode, createBlock, createSlots, createTextVNode, toDisplayString, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
@@ -103,13 +104,11 @@ var script = defineComponent({
       ...useControlAttributes(),
       ...useValidationAttributes()
     });
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-      set: value => {
-        context.emit('update:modelValue', value);
-      }
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const draftModelValue = ref(proxyModelValue.value);
+    watch(proxyModelValue, value => {
+      draftModelValue.value = value;
     });
-    const draftModelValue = ref('');
     const currentLength = computed(() => {
       var _a, _b;
       return (_b = (_a = draftModelValue.value) === null || _a === void 0 ? void 0 : _a.toString().length) !== null && _b !== void 0 ? _b : 0;
@@ -143,18 +142,11 @@ var script = defineComponent({
       activated.value = false;
     }
     function reset() {
-      var _a;
       if (draftModelValue.value !== proxyModelValue.value) {
-        draftModelValue.value = (_a = proxyModelValue.value) !== null && _a !== void 0 ? _a : '';
+        draftModelValue.value = proxyModelValue.value;
       }
       activated.value = false;
     }
-    // Effects
-    watch(proxyModelValue, value => {
-      draftModelValue.value = value !== null && value !== void 0 ? value : '';
-    }, {
-      immediate: true
-    });
     return {
       root,
       control,

package/dist/esm/v3/{OrInlineTextarea-f060dab5.js → OrInlineTextarea-1415bed9.js}

@@ -1,12 +1,13 @@
-import { defineComponent, ref, computed, reactive, watch } from 'vue-demi';
+import { defineComponent, ref, computed, reactive, toRef, watch } from 'vue-demi';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 import '@vueuse/core';
+import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind.config';
 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-0aaadc68.js';
+import { s as script$3 } from './OrIconButton-00f8f0c7.js';
 import { s as script$4 } from './OrInlineInputBox-01fb2cb2.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, withDirectives, mergeProps, vModelText, withModifiers, createCommentVNode, createBlock, createSlots, createTextVNode, toDisplayString, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
@@ -81,13 +82,11 @@ var script = defineComponent({
       ...useControlAttributes(),
       ...useValidationAttributes()
     });
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-      set: value => {
-        context.emit('update:modelValue', value);
-      }
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const draftModelValue = ref(proxyModelValue.value);
+    watch(proxyModelValue, value => {
+      draftModelValue.value = value;
     });
-    const draftModelValue = ref('');
     const currentLength = computed(() => {
       var _a, _b;
       return (_b = (_a = draftModelValue.value) === null || _a === void 0 ? void 0 : _a.toString().length) !== null && _b !== void 0 ? _b : 0;
@@ -127,12 +126,6 @@ var script = defineComponent({
       }
       activated.value = false;
     }
-    // Effects
-    watch(proxyModelValue, value => {
-      draftModelValue.value = value !== null && value !== void 0 ? value : '';
-    }, {
-      immediate: true
-    });
     return {
       root,
       control,

package/dist/esm/v3/{OrInput-c653aedb.js → OrInput-f0e12c81.js}

@@ -1,13 +1,14 @@
-import { defineComponent, ref, computed, reactive } from 'vue-demi';
+import { defineComponent, ref, computed, reactive, toRef } from 'vue-demi';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.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 { 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$4 } from './OrIconButton-0aaadc68.js';
+import { s as script$4 } from './OrIconButton-00f8f0c7.js';
 import { s as script$3 } from './OrIcon-62793572.js';
 import { s as script$5, I as InputBoxSize } from './OrInputBox-32b37b17.js';
 import { s as script$6 } from './OrLabel-4da56db0.js';
@@ -120,12 +121,7 @@ var script = defineComponent({
       ...useControlAttributes(),
       ...useValidationAttributes()
     });
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-      set: value => {
-        context.emit('update:modelValue', value);
-      }
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const currentLength = computed(() => {
       var _a, _b;
       return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.toString().length) !== null && _b !== void 0 ? _b : 0;

package/dist/esm/v3/{OrMenu-9659b8eb.js → OrMenu-dbe1db1e.js}

@@ -1,9 +1,9 @@
 import { defineComponent, ref, computed, toRef } from 'vue-demi';
 import '@vueuse/core';
-import { u as usePopoverState } from './usePopoverState-8a95a300.js';
+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-337df396.js';
+import { s as script$1, P as PopoverPlacement } from './OrPopover-94dc1203.js';
 import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, withModifiers, renderSlot } from 'vue';
 
 const MenuRoot = [
@@ -45,7 +45,7 @@ var script = defineComponent({
       open,
       close,
       toggle
-    } = usePopoverState(toRef(props, 'isOpen'), context);
+    } = usePopoverState(toRef(props, 'isOpen'), context.emit);
     // Handlers
     function onClick(event) {
       const path = event.composedPath();

package/dist/esm/v3/{OrModal-cabce172.js → OrModal-6a90ea79.js}

@@ -1,11 +1,11 @@
 import { defineComponent, ref, computed, toRef } from 'vue-demi';
 import '@vueuse/core';
-import { u as usePopoverState } from './usePopoverState-8a95a300.js';
+import { u as usePopoverState } from './usePopoverState-b92c698b.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { s as script$5 } from './OrOverlay-489fdf76.js';
 import { openBlock, createElementBlock, normalizeClass, renderSlot, resolveComponent, createElementVNode, createVNode, withModifiers, createBlock, withCtx, mergeProps, createCommentVNode } from 'vue';
-import { s as script$4 } from './OrIconButton-0aaadc68.js';
+import { s as script$4 } from './OrIconButton-00f8f0c7.js';
 
 const ModalContent = [
 // Layout
@@ -179,7 +179,7 @@ var script = defineComponent({
       state,
       open,
       close
-    } = usePopoverState(toRef(props, 'isOpen'), context);
+    } = usePopoverState(toRef(props, 'isOpen'), context.emit);
     return {
       root,
       rootStyles,

package/dist/esm/v3/{OrNotification-cbcb0b4a.js → OrNotification-117f2dcb.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { s as script$2 } from './OrIconButton-0aaadc68.js';
+import { s as script$2 } from './OrIconButton-00f8f0c7.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-38067570.js → OrPagination-858337d1.js}

@@ -1,13 +1,14 @@
-import { defineComponent, ref, computed } from 'vue-demi';
+import { defineComponent, ref, computed, toRef } from 'vue-demi';
 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 { s as script$1 } from './OrButton-c2b6aa9e.js';
 import { s as script$2 } from './OrIcon-62793572.js';
 import { s as script$4 } from './OrMenuItem-dbee450f.js';
-import { s as script$3 } from './OrMenu-9659b8eb.js';
-import './OrPopover-337df396.js';
+import { s as script$3 } from './OrMenu-dbe1db1e.js';
+import './OrPopover-94dc1203.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withModifiers, withCtx, Fragment, renderList, createBlock, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 
 const PaginationRoot = [
@@ -86,12 +87,7 @@ var script = defineComponent({
     const limitControlStyles = computed(() => [...PaginationLimitControl]);
     const itemStyles = computed(() => [...PaginationItem]);
     // State
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-      set: value => {
-        context.emit('update:modelValue', value);
-      }
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const currentLimit = computed({
       get: () => {
         var _a, _b;

package/dist/esm/v3/{OrPopover-337df396.js → OrPopover-94dc1203.js}

@@ -2,11 +2,11 @@ import { autoUpdate, computePosition, shift, flip, hide } from '@floating-ui/dom
 import { onClickOutside } from '@vueuse/core';
 import { defineComponent, ref, computed, toRef, watchPostEffect, unref } from 'vue-demi';
 import { u as useElevation } from './useElevation-a50ec347.js';
-import { u as usePopoverState } from './usePopoverState-8a95a300.js';
+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-f2f3aef9.js';
+import { s as script$1 } from './OrBottomSheet-79db2626.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';
 
@@ -139,7 +139,7 @@ var script = defineComponent({
       open,
       close,
       toggle
-    } = usePopoverState(toRef(props, 'isOpen'), context);
+    } = usePopoverState(toRef(props, 'isOpen'), context.emit);
     const isFlipped = ref(false);
     const isHidden = ref(false);
     // Effects

package/dist/esm/v3/{OrRadio-4f0026c9.js → OrRadio-7b722b16.js}

@@ -1,6 +1,7 @@
-import { defineComponent, ref, computed, reactive } from 'vue-demi';
+import { defineComponent, ref, computed, reactive, toRef } from 'vue-demi';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 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';
@@ -86,12 +87,7 @@ var script = defineComponent({
       id: useIdAttribute(),
       ...useControlAttributes()
     });
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-      set: value => {
-        context.emit('update:modelValue', value);
-      }
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     // Methods
     function focus() {
       var _a;

package/dist/esm/v3/{OrRadioGroup-d215409c.js → OrRadioGroup-58c0214c.js}

@@ -1,7 +1,10 @@
-import { defineComponent } from 'vue-demi';
-import { useVModel } from '@vueuse/core';
+import { defineComponent, toRef } from 'vue-demi';
+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-4f0026c9.js';
+import { s as script$2 } from './OrRadio-7b722b16.js';
 import { resolveComponent, openBlock, createBlock, withCtx, renderSlot, createElementBlock, Fragment, renderList } from 'vue';
 
 var script = defineComponent({
@@ -44,11 +47,8 @@ var script = defineComponent({
       default: false
     }
   },
-  setup(props, _ref) {
-    let {
-      emit
-    } = _ref;
-    const proxyModelValue = useVModel(props, 'modelValue', emit);
+  setup(props, context) {
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     return {
       proxyModelValue
     };

package/dist/esm/v3/{OrSearch-b945651d.js → OrSearch-051adc07.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-c653aedb.js';
+import { s as script$1 } from './OrInput-f0e12c81.js';
 import { I as InputBoxSize } from './OrInputBox-32b37b17.js';
 import { resolveComponent, openBlock, createBlock, normalizeClass } from 'vue';
 

package/dist/esm/v3/{OrSegmentedControl-359fbf3a.js → OrSegmentedControl-c8eb217d.js}

@@ -1,4 +1,8 @@
-import { defineComponent, ref, computed, isVue2 } from 'vue-demi';
+import { defineComponent, ref, computed, isVue2, toRef } from 'vue-demi';
+import '@vueuse/core';
+import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
+import '@onereach/styles/tailwind.config';
+import 'tailwindcss/resolveConfig';
 import { openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, resolveComponent, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString } from 'vue';
 
 const SegmentedControlItemRoot = [
@@ -140,12 +144,7 @@ var script = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-segmented-control-v3', ...SegmentedControlRoot, ...SegmentedControlRootSizes[props.size]]);
     // State
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-      set: value => {
-        context.emit('update:modelValue', value);
-      }
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     return {
       root,
       rootStyles,

package/dist/esm/v3/{OrSelect-5a2c078d.js → OrSelect-b3885148.js}

@@ -1,20 +1,21 @@
-import { defineComponent, getCurrentInstance, ref, computed, onMounted, watch } from 'vue-demi';
+import { defineComponent, getCurrentInstance, ref, computed, toRef, onMounted, watch } from 'vue-demi';
 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 '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
-import { s as script$1, i as isEmptyValue } from './OrCheckbox-2194e473.js';
+import { s as script$1, i as isEmptyValue } from './OrCheckbox-bb06af0f.js';
 import { s as script$2 } from './OrError-c01d0c29.js';
-import { s as script$3 } from './OrExpansionPanel-df527763.js';
+import { s as script$3 } from './OrExpansionPanel-af3a0d63.js';
 import { s as script$4 } from './OrHint-06ab89d7.js';
 import { s as script$5 } from './OrIcon-62793572.js';
 import { s as script$7, I as InputBoxSize } from './OrInputBox-32b37b17.js';
-import { s as script$6 } from './OrInput-c653aedb.js';
+import { s as script$6 } from './OrInput-f0e12c81.js';
 import { s as script$8 } from './OrLabel-4da56db0.js';
 import { s as script$9 } from './OrMenuItem-dbee450f.js';
-import { s as script$a } from './OrPopover-337df396.js';
-import { s as script$b } from './OrTag-fbeca419.js';
+import { s as script$a } from './OrPopover-94dc1203.js';
+import { s as script$b } from './OrTag-9adef1cd.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, createVNode, withModifiers, vShow } from 'vue';
 
 const SelectRoot = [
@@ -196,12 +197,7 @@ var script = defineComponent({
     const noSearchResultsStyles = computed(() => [...SelectNoSearchResults]);
     // State
     const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-      set: value => {
-        context.emit('update:modelValue', value);
-      }
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const isEmptyModelValue = computed(() => {
       return Array.isArray(proxyModelValue.value) ? proxyModelValue.value.length === 0 : isEmptyValue(proxyModelValue.value);
     });

package/dist/esm/v3/{OrSidebar-7f5795da.js → OrSidebar-47f9d02a.js}

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

package/dist/esm/v3/{OrSidebarCollapseButton-5fb7a6a1.js → OrSidebarCollapseButton-86dafbbc.js}

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

package/dist/esm/v3/{OrSortHeader-54d85a25.js → OrSortHeader-21a443f9.js}

@@ -1,4 +1,8 @@
-import { defineComponent, ref, computed } from 'vue-demi';
+import { defineComponent, ref, computed, toRef } from 'vue-demi';
+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 './OrIcon-62793572.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, withModifiers, renderSlot, createBlock, createCommentVNode } from 'vue';
 
@@ -43,12 +47,7 @@ var script = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-sort-header-v3', ...SortHeaderRoot]);
     // State
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-      set: value => {
-        context.emit('update:modelValue', value);
-      }
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const activated = computed(() => {
       var _a;
       return ((_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.column) === props.value;

package/dist/esm/v3/{OrSwitch-ed9868db.js → OrSwitch-a6efd081.js}

@@ -1,6 +1,7 @@
-import { defineComponent, ref, computed, reactive } from 'vue-demi';
+import { defineComponent, ref, computed, reactive, toRef } from 'vue-demi';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 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';
@@ -113,12 +114,7 @@ var script = defineComponent({
       id: useIdAttribute(),
       ...useControlAttributes()
     });
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-      set: value => {
-        context.emit('update:modelValue', value);
-      }
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     // Methods
     function focus() {
       var _a;

package/dist/esm/v3/{OrTabs-9e741419.js → OrTabs-52e49d84.js}

@@ -1,9 +1,12 @@
 import { useResizeObserver } from '@vueuse/core';
-import { defineComponent, ref, computed, reactive, watch, nextTick, onMounted } from 'vue-demi';
+import { defineComponent, ref, computed, reactive, toRef, watch, nextTick, onMounted } from 'vue-demi';
+import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
+import '@onereach/styles/tailwind.config';
+import 'tailwindcss/resolveConfig';
 import { s as script$1 } from './OrIcon-62793572.js';
 import { s as script$3 } from './OrMenuItem-dbee450f.js';
-import { s as script$2 } from './OrMenu-9659b8eb.js';
-import './OrPopover-337df396.js';
+import { s as script$2 } from './OrMenu-dbe1db1e.js';
+import './OrPopover-94dc1203.js';
 import { s as script$4 } from './OrTab-f7e51ffb.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString, createVNode, createCommentVNode, renderSlot } from 'vue';
 
@@ -86,12 +89,7 @@ var script = defineComponent({
       normal: [],
       hidden: []
     });
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-      set: value => {
-        context.emit('update:modelValue', value);
-      }
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const activeTab = computed(() => props.items.find(_ref => {
       let {
         value

package/dist/esm/v3/{OrTag-fbeca419.js → OrTag-9adef1cd.js}

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

package/dist/esm/v3/{OrTagInput-6a6d1365.js → OrTagInput-63d0f5fb.js}

@@ -1,15 +1,16 @@
-import { defineComponent, ref, computed, reactive } from 'vue-demi';
+import { defineComponent, ref, computed, reactive, toRef } from 'vue-demi';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 import '@vueuse/core';
+import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind.config';
 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-0aaadc68.js';
+import { s as script$3 } from './OrIconButton-00f8f0c7.js';
 import { s as script$4, I as InputBoxSize } from './OrInputBox-32b37b17.js';
 import { s as script$5 } from './OrLabel-4da56db0.js';
-import { s as script$6 } from './OrTags-1621cbb9.js';
+import { s as script$6 } from './OrTags-d7a90658.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';
 
@@ -101,12 +102,7 @@ var script = defineComponent({
       ...useControlAttributes(),
       ...useValidationAttributes()
     });
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-      set: value => {
-        context.emit('update:modelValue', value);
-      }
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const draftModelValue = ref();
     const currentLength = computed(() => {
       var _a, _b;

package/dist/esm/v3/{OrTags-1621cbb9.js → OrTags-d7a90658.js}

@@ -4,8 +4,8 @@ import '@vueuse/core';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { s as script$1 } from './OrButton-c2b6aa9e.js';
-import { s as script$2 } from './OrPopover-337df396.js';
-import { s as script$3 } from './OrTag-fbeca419.js';
+import { s as script$2 } from './OrPopover-94dc1203.js';
+import { s as script$3 } from './OrTag-9adef1cd.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, createBlock, mergeProps, withCtx, createTextVNode, toDisplayString, createVNode, withModifiers, createCommentVNode } from 'vue';
 
 const Tags = [

package/dist/esm/v3/{OrTextarea-1e19417a.js → OrTextarea-6202e867.js}

@@ -1,6 +1,7 @@
-import { defineComponent, ref, computed, reactive } from 'vue-demi';
+import { defineComponent, ref, computed, reactive, toRef } from 'vue-demi';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 import '@vueuse/core';
+import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
@@ -91,12 +92,7 @@ var script = defineComponent({
       ...useControlAttributes(),
       ...useValidationAttributes()
     });
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-      set: value => {
-        context.emit('update:modelValue', value);
-      }
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const currentLength = computed(() => {
       var _a, _b;
       return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.toString().length) !== null && _b !== void 0 ? _b : 0;

package/dist/esm/v3/{OrTimePicker-67f75e85.js → OrTimePicker-98c00a9b.js}

@@ -1,14 +1,18 @@
-import { defineComponent, ref, computed, watch } from 'vue-demi';
+import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
-import { b as script$1, d as script$2, e as script$3, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-bc8e0bcf.js';
-import { a as script$4, b as script$5, D as DateTimePickerTimeFormat } from './OrDateTimePicker-0a4d194e.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-96a38b4b.js';
+import { a as script$4, b as script$5, D as DateTimePickerTimeFormat } from './OrDateTimePicker-546c15ec.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-0aaadc68.js';
+import { s as script$9 } from './OrIconButton-00f8f0c7.js';
 import { s as script$8 } from './OrIcon-62793572.js';
 import { s as script$a, I as InputBoxSize } from './OrInputBox-32b37b17.js';
 import { s as script$b } from './OrLabel-4da56db0.js';
-import { s as script$c } from './OrPopover-337df396.js';
+import { s as script$c } from './OrPopover-94dc1203.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, createVNode, Fragment, createElementVNode } from 'vue';
 
 const TimePicker = [
@@ -112,17 +116,10 @@ var script = defineComponent({
     const popoverStyles = computed(() => [...TimePickerPopover]);
     // State
     const initialModelValue = useCurrentDate();
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-      set: value => {
-        context.emit('update:modelValue', value);
-      }
-    });
-    const draftModelValue = ref();
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const draftModelValue = ref(proxyModelValue.value);
     watch(proxyModelValue, value => {
       draftModelValue.value = value;
-    }, {
-      immediate: true
     });
     const isInvalidDraftModelValue = computed(() => {
       if (draftModelValue.value) {