@onereach/ui-components 4.10.4-beta.2956.0 → 4.10.4

package/dist/bundled/{v2/range-6f26eda4.js → v3/range-c87289f7.js}

@@ -1,7 +1,7 @@
-import { e as eq_1 } from './eq-95cd2573.js';
-import { i as isArrayLike_1, _ as _isIndex } from './isArrayLike-e46b8eac.js';
-import { i as isObject_1 } from './isObject-fe8b81fd.js';
-import { a as toFinite_1 } from './toFinite-74227610.js';
+import { e as eq_1 } from './eq-fa566495.js';
+import { i as isArrayLike_1, _ as _isIndex } from './isArrayLike-acf249e3.js';
+import { i as isObject_1 } from './isObject-3a5b854d.js';
+import { a as toFinite_1 } from './toFinite-021b0c50.js';
 
 /* Built-in method references for those with the same name as other `lodash` methods. */
 var nativeCeil = Math.ceil,

package/dist/bundled/v3/{round-f34440f4.js → round-136c7e43.js}

@@ -1,7 +1,7 @@
-import { _ as _root } from './isObject-fe8b81fd.js';
-import { t as toInteger_1 } from './toInteger-2fd112a9.js';
-import { t as toNumber_1 } from './toFinite-74227610.js';
-import { t as toString_1 } from './toString-f3196832.js';
+import { _ as _root } from './isObject-3a5b854d.js';
+import { t as toInteger_1 } from './toInteger-db8a475d.js';
+import { t as toNumber_1 } from './toFinite-021b0c50.js';
+import { t as toString_1 } from './toString-47fa81b4.js';
 
 var root = _root,
   toInteger = toInteger_1,

package/dist/bundled/{v2/toFinite-74227610.js → v3/toFinite-021b0c50.js}

@@ -1,4 +1,4 @@
-import { i as isObject_1, d as isSymbol_1 } from './isObject-fe8b81fd.js';
+import { i as isObject_1, d as isSymbol_1 } from './isObject-3a5b854d.js';
 
 /** Used to match a single whitespace character. */
 var reWhitespace = /\s/;

package/dist/bundled/v3/{toInteger-2fd112a9.js → toInteger-db8a475d.js}

@@ -1,4 +1,4 @@
-import { a as toFinite_1 } from './toFinite-74227610.js';
+import { a as toFinite_1 } from './toFinite-021b0c50.js';
 
 var toFinite = toFinite_1;
 

package/dist/bundled/{v2/toString-f3196832.js → v3/toString-47fa81b4.js}

@@ -1,4 +1,4 @@
-import { a as _Symbol, d as isSymbol_1 } from './isObject-fe8b81fd.js';
+import { a as _Symbol, d as isSymbol_1 } from './isObject-3a5b854d.js';
 
 /**
  * Checks if `value` is classified as an `Array` object.

package/dist/bundled/v3/utils/functions/dom.js

@@ -1,5 +1,6 @@
-export { M as MutationObs, b as addClass, c as cancelAF, m as contains, t as getAttr, f as getBCR, n as getById, g as getCS, h as getMaxZIndex, v as getStyle, u as hasAttr, o as hasClass, j as isVisible, w as offset, x as position, a as reflow, q as removeAttr, d as removeClass, i as removeNode, e as removeStyle, r as requestAF, l as select, k as selectAll, p as setAttr, s as setStyle } from '../../dom-700444b4.js';
-import '../../get-ab1b7d93.js';
-import '../../isObject-fe8b81fd.js';
-import '../../toString-f3196832.js';
-import '../../eq-95cd2573.js';
+export { M as MutationObs, b as addClass, c as cancelAF, m as contains, t as getAttr, f as getBCR, n as getById, g as getCS, h as getMaxZIndex, v as getStyle, u as hasAttr, o as hasClass, j as isVisible, w as offset, x as position, a as reflow, q as removeAttr, d as removeClass, i as removeNode, e as removeStyle, r as requestAF, l as select, k as selectAll, p as setAttr, s as setStyle } from '../../dom-571739a2.js';
+import '../../get-73ac2f59.js';
+import '../../isObject-3a5b854d.js';
+import '../../_commonjsHelpers-48a9cab9.js';
+import '../../toString-47fa81b4.js';
+import '../../eq-fa566495.js';

package/dist/esm/v2/{OrBottomSheet-6bc632c4.js → OrBottomSheet-af25c131.js}

@@ -1,6 +1,6 @@
 import { usePointerSwipe, onClickOutside, SwipeDirection } from '@vueuse/core';
 import { defineComponent, ref, computed, toRef, watch, unref } from 'vue-demi';
-import { u as usePopoverState } from './usePopoverState-b92c698b.js';
+import { u as usePopoverState } from './usePopoverState-8a95a300.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { _ as __vue_component__$1 } from './OrOverlay-948346df.js';
@@ -83,7 +83,7 @@ var script = defineComponent({
       open,
       close,
       toggle
-    } = usePopoverState(toRef(props, 'isOpen'), context.emit);
+    } = usePopoverState(toRef(props, 'isOpen'), context);
     const fullscreen = ref(false);
     watch(state, value => {
       if (value === 'closed') {

package/dist/esm/v2/{OrCardCollection-779ba7ca.js → OrCardCollection-79b90811.js}

@@ -1,11 +1,11 @@
 import { defineComponent, computed, ref, watch } from 'vue-demi';
 import { _ as __vue_component__$3 } from './OrButton-9622e713.js';
-import { _ as __vue_component__$2 } from './OrIconButton-2ab8fa02.js';
+import { _ as __vue_component__$2 } from './OrIconButton-ab726d49.js';
 import { _ as __vue_component__$6 } from './OrIcon-d35a84d8.js';
 import { _ as __vue_component__$5 } from './OrMenuItem-6f9b8a93.js';
-import { _ as __vue_component__$4 } from './OrMenu-6b3de1c1.js';
-import './OrPopover-71380b24.js';
-import { _ as __vue_component__$7 } from './OrSearch-879c7656.js';
+import { _ as __vue_component__$4 } from './OrMenu-d03831b0.js';
+import './OrPopover-ef16a904.js';
+import { _ as __vue_component__$7 } from './OrSearch-33e3b0e4.js';
 import './OrInputBox.vue_rollup-plugin-vue_script-1715021a.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrCheckbox-43615f70.js → OrCheckbox-41f2822d.js}

@@ -1,7 +1,6 @@
-import { defineComponent, ref, computed, reactive, toRef } from 'vue-demi';
+import { defineComponent, ref, computed, reactive } from 'vue-demi';
+import { useVModel } from '@vueuse/core';
 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 { _ as __vue_component__$1, L as LabelVariant } from './OrLabel-63380256.js';
@@ -83,7 +82,10 @@ var script = defineComponent({
   },
   emits: ['update:modelValue', 'click', 'focus', 'blur'],
   expose: ['root', 'focus', 'blur'],
-  setup(props, context) {
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
     // Refs
     const root = ref();
     const control = ref();
@@ -95,7 +97,7 @@ var script = defineComponent({
       id: useIdAttribute(),
       ...useControlAttributes()
     });
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const proxyModelValue = useVModel(props, 'modelValue', emit);
     const isChecked = computed(() => {
       if (Array.isArray(proxyModelValue.value)) {
         return !isEmptyValue(props.value) && proxyModelValue.value.includes(props.value);
@@ -136,7 +138,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-253d17d5]{appearance:none;line-height:0}";
+var css_248z = "input[data-v-35085ade]{appearance:none;line-height:0}";
 styleInject(css_248z);
 
 /* script */
@@ -197,7 +199,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-253d17d5";
+const __vue_scope_id__ = "data-v-35085ade";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v2/{OrCheckboxGroup-4e6dbdd3.js → OrCheckboxGroup-97cfcbda.js}

@@ -1,10 +1,7 @@
-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 { _ as __vue_component__$1 } from './OrCheckboxTree-ba023624.js';
+import { defineComponent } from 'vue-demi';
+import { useVModel } from '@vueuse/core';
 import { _ as __vue_component__$2, F as FormGroupDirection } from './OrFormGroup-29a514db.js';
+import { _ as __vue_component__$1 } from './OrCheckboxTree-a7dc126c.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var script = defineComponent({
@@ -47,8 +44,11 @@ var script = defineComponent({
       default: false
     }
   },
-  setup(props, context) {
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const proxyModelValue = useVModel(props, 'modelValue', emit);
     return {
       proxyModelValue
     };

package/dist/esm/v2/{OrCheckboxTree-ba023624.js → OrCheckboxTree-a7dc126c.js}

@@ -1,18 +1,10 @@
-import { useToggle } from '@vueuse/core';
-import { defineComponent, computed, toRef, watch } from 'vue-demi';
-import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
-import '@onereach/styles/tailwind.config';
-import 'tailwindcss/resolveConfig';
-import { _ as __vue_component__$3 } from './OrButton-9622e713.js';
-import { _ as __vue_component__$2 } from './OrCheckbox-43615f70.js';
+import { defineComponent, computed, watch } from 'vue-demi';
+import { useVModel, useToggle } from '@vueuse/core';
+import { _ as __vue_component__$2 } from './OrCheckbox-41f2822d.js';
 import { _ as __vue_component__$1 } from './OrIcon-d35a84d8.js';
+import { _ as __vue_component__$3 } from './OrButton-9622e713.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
-function flattenDeep() {
-  let arr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return arr.flatMap(subArray => Array.isArray(subArray) ? flattenDeep(subArray) : subArray);
-}
-
 const CheckboxTreeRoot = [
 // Layout
 'flex', 'flex-col',
@@ -22,6 +14,11 @@ const CheckboxTreeRootParent = [
 // Layout
 'flex', 'flex-row', 'gap-xs'];
 
+function flattenDeep() {
+  let arr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return arr.flatMap(subArray => Array.isArray(subArray) ? flattenDeep(subArray) : subArray);
+}
+
 var script = defineComponent({
   name: 'OrCheckboxTree',
   components: {
@@ -56,7 +53,10 @@ var script = defineComponent({
     }
   },
   emits: ['update:modelValue'],
-  setup(props, context) {
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
     // State
     const hasChildren = computed(() => props.item.children && props.item.children.length > 0);
     const childrenValues = computed(() => {
@@ -71,7 +71,7 @@ var script = defineComponent({
       };
       return flattenDeep(getChildValues(props.item.children));
     });
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const proxyModelValue = useVModel(props, 'modelValue', emit);
     const isAnyChildrenSelected = computed(() => {
       var _a;
       return (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.some(value => {

package/dist/esm/v2/{OrConfirm-cda74328.js → OrConfirm-0b56c11f.js}

@@ -1,11 +1,11 @@
 import { useMagicKeys, whenever, onClickOutside } from '@vueuse/core';
 import { logicAnd } from '@vueuse/math';
 import { defineComponent, ref, toRef, computed, watch } from 'vue-demi';
-import { u as usePopoverState } from './usePopoverState-b92c698b.js';
+import { u as usePopoverState } from './usePopoverState-8a95a300.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { _ as __vue_component__$2, a as ButtonColor } from './OrButton-9622e713.js';
-import { _ as __vue_component__$3 } from './OrInput-dcb61699.js';
+import { _ as __vue_component__$3 } from './OrInput-2eeff16a.js';
 import { _ as __vue_component__$1 } from './OrOverlay-948346df.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
@@ -128,7 +128,7 @@ var script = defineComponent({
       state,
       open,
       close
-    } = usePopoverState(toRef(props, 'isOpen'), context.emit);
+    } = usePopoverState(toRef(props, 'isOpen'), context);
     const isInputActive = ref(false);
     const confirmationValue = ref('');
     const {

package/dist/esm/v2/{OrDatePicker-a4f95898.js → OrDatePicker-6646573e.js}

@@ -1,18 +1,14 @@
-import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
+import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
-import '@vueuse/core';
-import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
-import '@onereach/styles/tailwind.config';
-import 'tailwindcss/resolveConfig';
-import { _ as __vue_component__$1, a as __vue_component__$2, b as __vue_component__$3, c as __vue_component__$4, d as __vue_component__$5, e as __vue_component__$6, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-5fa89936.js';
+import { _ as __vue_component__$1, a as __vue_component__$2, b as __vue_component__$3, c as __vue_component__$4, d as __vue_component__$5, e as __vue_component__$6, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-fa799185.js';
 import { _ as __vue_component__$7 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$8 } from './OrHint-aa221198.js';
-import { _ as __vue_component__$a } from './OrIconButton-2ab8fa02.js';
+import { _ as __vue_component__$a } from './OrIconButton-ab726d49.js';
 import { _ as __vue_component__$9 } from './OrIcon-d35a84d8.js';
 import { _ as __vue_component__$b } from './OrInputBox-11227ecd.js';
 import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-1715021a.js';
 import { _ as __vue_component__$c } from './OrLabel-63380256.js';
-import { _ as __vue_component__$d } from './OrPopover-71380b24.js';
+import { _ as __vue_component__$d } from './OrPopover-ef16a904.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const DatePicker = [
@@ -119,10 +115,17 @@ var script = defineComponent({
     const popoverStyles = computed(() => [...DatePickerPopover]);
     // State
     const initialModelValue = useCurrentDate();
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const draftModelValue = ref(proxyModelValue.value);
+    const proxyModelValue = computed({
+      get: () => props.modelValue,
+      set: value => {
+        context.emit('update:modelValue', value);
+      }
+    });
+    const draftModelValue = ref();
     watch(proxyModelValue, value => {
       draftModelValue.value = value;
+    }, {
+      immediate: true
     });
     const isInvalidDraftModelValue = computed(() => {
       if (draftModelValue.value) {

package/dist/esm/v2/{OrDateTimePicker-99d3445b.js → OrDateTimePicker-908fbd9a.js}

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

package/dist/esm/v2/{OrDateTimePicker.vue_rollup-plugin-vue_script-729b254d.js → OrDateTimePicker.vue_rollup-plugin-vue_script-c4431300.js}

@@ -1,18 +1,14 @@
-import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
+import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
-import '@vueuse/core';
-import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
-import '@onereach/styles/tailwind.config';
-import 'tailwindcss/resolveConfig';
 import { _ as __vue_component__$9 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$a } from './OrHint-aa221198.js';
-import { _ as __vue_component__$c } from './OrIconButton-2ab8fa02.js';
+import { _ as __vue_component__$c } from './OrIconButton-ab726d49.js';
 import { _ as __vue_component__$b } from './OrIcon-d35a84d8.js';
 import { _ as __vue_component__$d } from './OrInputBox-11227ecd.js';
 import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-1715021a.js';
 import { _ as __vue_component__$e } from './OrLabel-63380256.js';
-import { _ as __vue_component__$f } from './OrPopover-71380b24.js';
-import { _ as __vue_component__$3, a as __vue_component__$4, b as __vue_component__$5, c as __vue_component__$6, d as __vue_component__$7, e as __vue_component__$8, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-5fa89936.js';
+import { _ as __vue_component__$f } from './OrPopover-ef16a904.js';
+import { _ as __vue_component__$3, a as __vue_component__$4, b as __vue_component__$5, c as __vue_component__$6, d as __vue_component__$7, e as __vue_component__$8, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-fa799185.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 import { _ as __vue_component__$2 } from './OrButton-9622e713.js';
 
@@ -79,7 +75,12 @@ var script$2 = defineComponent({
     const rootStyles = computed(() => ['or-date-time-picker-time-control-v3', ...DateTimePickerTimeControl]);
     const placeholderStyles = computed(() => [...DateTimePickerTimeControlPlaceholder]);
     // State
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const proxyModelValue = computed({
+      get: () => props.modelValue,
+      set: value => {
+        context.emit('update:modelValue', value);
+      }
+    });
     const placeholder = useTimePlaceholder(props.format !== DateTimePickerTimeFormat.Auto ? props.format : undefined);
     // Methods
     function formatModelValue(value) {
@@ -208,8 +209,14 @@ var script$1 = defineComponent({
     const buttonGroupStyles = computed(() => [...DateTimePickerTimeSelectButtonGroup]);
     const buttonGroupItemStyles = computed(() => [...DateTimePickerTimeSelectButtonGroupItem]);
     // State
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
-      defaultValue: toRef(props, 'initialValue')
+    const proxyModelValue = computed({
+      get: () => {
+        var _a;
+        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.initialValue;
+      },
+      set: value => {
+        context.emit('update:modelValue', value);
+      }
     });
     const proxyTimeFormat = computed(() => {
       if (props.format === DateTimePickerTimeFormat.Auto) {
@@ -506,10 +513,17 @@ var script = defineComponent({
     const timePopoverStyles = computed(() => [...DateTimePickerTimePopover]);
     // State
     const initialModelValue = useCurrentDate();
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const draftModelValue = ref(proxyModelValue.value);
+    const proxyModelValue = computed({
+      get: () => props.modelValue,
+      set: value => {
+        context.emit('update:modelValue', value);
+      }
+    });
+    const draftModelValue = ref();
     watch(proxyModelValue, value => {
       draftModelValue.value = value;
+    }, {
+      immediate: true
     });
     const isInvalidDraftModelValue = computed(() => {
       if (draftModelValue.value) {

package/dist/esm/v2/{OrDateTimePickerPopoverHeader-5fa89936.js → OrDateTimePickerPopoverHeader-fa799185.js}

@@ -1,16 +1,12 @@
-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 { defineComponent, ref, computed } from 'vue-demi';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 import { _ as __vue_component__$6 } from './OrButton-9622e713.js';
 import { _ as __vue_component__$7 } from './OrLabel-63380256.js';
-import { _ as __vue_component__$9 } from './OrIconButton-2ab8fa02.js';
+import { _ as __vue_component__$9 } from './OrIconButton-ab726d49.js';
 import { _ as __vue_component__$8 } from './OrIcon-d35a84d8.js';
 import { _ as __vue_component__$b } from './OrMenuItem-6f9b8a93.js';
-import { _ as __vue_component__$a } from './OrMenu-6b3de1c1.js';
-import './OrPopover-71380b24.js';
+import { _ as __vue_component__$a } from './OrMenu-d03831b0.js';
+import './OrPopover-ef16a904.js';
 
 function useCurrentDate() {
   const currentDate = new Date();
@@ -68,7 +64,12 @@ var script$5 = defineComponent({
     const rootStyles = computed(() => ['or-date-time-picker-date-control-v3', ...DateTimePickerDateControl]);
     const placeholderStyles = computed(() => [...DateTimePickerDateControlPlaceholder]);
     // State
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const proxyModelValue = computed({
+      get: () => props.modelValue,
+      set: value => {
+        context.emit('update:modelValue', value);
+      }
+    });
     const placeholder = useDatePlaceholder();
     // Methods
     function formatModelValue(value) {
@@ -202,8 +203,14 @@ var script$4 = defineComponent({
     const buttonGroupDateItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupDateItem]);
     const buttonGroupCurrentDateItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupCurrentDateItem]);
     // State
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
-      defaultValue: toRef(props, 'initialValue')
+    const proxyModelValue = computed({
+      get: () => {
+        var _a;
+        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.initialValue;
+      },
+      set: value => {
+        context.emit('update:modelValue', value);
+      }
     });
     const dayOptions = computed(() => {
       const monthStartDate = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth(), 1, proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
@@ -453,8 +460,14 @@ var script$2 = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-date-time-picker-month-select-v3', ...DateTimePickerMonthSelect]);
     // State
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
-      defaultValue: toRef(props, 'initialValue')
+    const proxyModelValue = computed({
+      get: () => {
+        var _a;
+        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.initialValue;
+      },
+      set: value => {
+        context.emit('update:modelValue', value);
+      }
     });
     const yearOptions = computed(() => {
       return Array.from({

package/dist/esm/v2/{OrExpansionPanel-acfffe82.js → OrExpansionPanel-b8411db6.js}

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

package/dist/esm/v2/{OrIconButton-2ab8fa02.js → OrIconButton-ab726d49.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, isVue3 } from 'vue-demi';
 import { _ as __vue_component__$1, I as IconSize } from './OrIcon-d35a84d8.js';
-import { _ as __vue_component__$2 } from './OrTooltip-a32c182a.js';
-import './OrPopover-71380b24.js';
+import { _ as __vue_component__$2 } from './OrTooltip-bf4c725c.js';
+import './OrPopover-ef16a904.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var IconButtonColor;

package/dist/esm/v2/{OrInlineInput-0c62b3a6.js → OrInlineInput-84a8398c.js}

@@ -1,13 +1,12 @@
-import { defineComponent, ref, computed, reactive, toRef, watch } from 'vue-demi';
+import { defineComponent, ref, computed, reactive, 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 { _ as __vue_component__$1 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$2 } from './OrHint-aa221198.js';
-import { _ as __vue_component__$3 } from './OrIconButton-2ab8fa02.js';
+import { _ as __vue_component__$3 } from './OrIconButton-ab726d49.js';
 import { _ as __vue_component__$4, I as InlineInputBoxSize } from './OrInlineInputBox-19b49ee6.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -104,11 +103,13 @@ var script = defineComponent({
       ...useControlAttributes(),
       ...useValidationAttributes()
     });
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const draftModelValue = ref(proxyModelValue.value);
-    watch(proxyModelValue, value => {
-      draftModelValue.value = value;
+    const proxyModelValue = computed({
+      get: () => props.modelValue,
+      set: value => {
+        context.emit('update:modelValue', 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;
@@ -142,11 +143,18 @@ var script = defineComponent({
       activated.value = false;
     }
     function reset() {
+      var _a;
       if (draftModelValue.value !== proxyModelValue.value) {
-        draftModelValue.value = proxyModelValue.value;
+        draftModelValue.value = (_a = proxyModelValue.value) !== null && _a !== void 0 ? _a : '';
       }
       activated.value = false;
     }
+    // Effects
+    watch(proxyModelValue, value => {
+      draftModelValue.value = value !== null && value !== void 0 ? value : '';
+    }, {
+      immediate: true
+    });
     return {
       root,
       control,
@@ -169,7 +177,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-774141fa]{min-width:0;background:0 0;outline:0}input[type=number][data-v-774141fa]::-webkit-inner-spin-button{display:none}input[type=search][data-v-774141fa]::-webkit-search-cancel-button{display:none}";
+var css_248z = "input[data-v-eaaec208]{min-width:0;background:0 0;outline:0}input[type=number][data-v-eaaec208]::-webkit-inner-spin-button{display:none}input[type=search][data-v-eaaec208]::-webkit-search-cancel-button{display:none}";
 styleInject(css_248z);
 
 /* script */
@@ -358,7 +366,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-774141fa";
+const __vue_scope_id__ = "data-v-eaaec208";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v2/{OrInlineTextarea-c24708a7.js → OrInlineTextarea-f2ecbd39.js}

@@ -1,13 +1,12 @@
-import { defineComponent, ref, computed, reactive, toRef, watch } from 'vue-demi';
+import { defineComponent, ref, computed, reactive, 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 { _ as __vue_component__$1 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$2 } from './OrHint-aa221198.js';
-import { _ as __vue_component__$3 } from './OrIconButton-2ab8fa02.js';
+import { _ as __vue_component__$3 } from './OrIconButton-ab726d49.js';
 import { _ as __vue_component__$4 } from './OrInlineInputBox-19b49ee6.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -82,11 +81,13 @@ var script = defineComponent({
       ...useControlAttributes(),
       ...useValidationAttributes()
     });
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const draftModelValue = ref(proxyModelValue.value);
-    watch(proxyModelValue, value => {
-      draftModelValue.value = value;
+    const proxyModelValue = computed({
+      get: () => props.modelValue,
+      set: value => {
+        context.emit('update:modelValue', 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;
@@ -126,6 +127,12 @@ var script = defineComponent({
       }
       activated.value = false;
     }
+    // Effects
+    watch(proxyModelValue, value => {
+      draftModelValue.value = value !== null && value !== void 0 ? value : '';
+    }, {
+      immediate: true
+    });
     return {
       root,
       control,
@@ -148,7 +155,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "textarea[data-v-284fdcf8]{min-width:0;background:0 0;outline:0}";
+var css_248z = "textarea[data-v-ed08af88]{min-width:0;background:0 0;outline:0}";
 styleInject(css_248z);
 
 /* script */
@@ -263,7 +270,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-284fdcf8";
+const __vue_scope_id__ = "data-v-ed08af88";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */