@onereach/ui-components 10.4.5-beta.4373.0 → 10.5.0-beta.4375.0

package/dist/esm/v2/{OrSearch-7b773c73.js → OrSearch-57d7d26f.js}

@@ -1,5 +1,5 @@
 import { watchDebounced } from '@vueuse/core';
-import { defineComponent, reactive, ref, computed, toRef, 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 './dom-53c9635b.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
@@ -7,8 +7,8 @@ import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import './TimeFormat-a7f5565b.js';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
-import { a as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-770d753e.js';
-import { _ as __vue_component__$1 } from './OrInput-79028100.js';
+import { a as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-8c39b9ca.js';
+import { _ as __vue_component__$1 } from './OrInput-09971392.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var script = defineComponent({
@@ -22,8 +22,8 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: undefined,
-      default: undefined
+      type: String,
+      default: ''
     },
     size: {
       type: String,
@@ -43,41 +43,39 @@ var script = defineComponent({
     }
   },
   emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur', 'search', 'clear'],
-  expose: ['root', 'clear', 'focus', 'blur'],
+  expose: ['root', 'focus', 'blur', 'clear'],
   setup(props, context) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-search-v3']);
+    // State
     const controlAttributes = reactive({
       id: useIdAttribute(),
       ...useControlAttributes(),
       ...useValidationAttributes()
     });
-    // Refs & Styles
-    const root = ref();
-    const rootStyles = computed(() => ['or-search-v3']);
-    // State
-    const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const draft = ref(props.modelValue);
-    watch(model, value => {
-      draft.value = value;
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const draftModelValue = ref(props.modelValue);
+    watch(proxyModelValue, value => {
+      draftModelValue.value = value;
     });
-    watchDebounced(draft, value => {
-      if (value) {
-        context.emit('search', model.value = value);
+    watchDebounced(draftModelValue, value => {
+      if (value.length > 0) {
+        proxyModelValue.value = value;
+        context.emit('search', value);
       }
     }, {
       debounce: toRef(props, 'debounce')
     });
-    watch(draft, (nextValue, prevValue) => {
-      if (!nextValue && prevValue) {
-        context.emit('search', model.value = nextValue);
+    watch(draftModelValue, (nextValue, prevValue) => {
+      if (nextValue.length === 0 && prevValue.length > 0) {
+        proxyModelValue.value = nextValue;
+        context.emit('search', '');
         context.emit('clear');
       }
     });
     // Methods
-    function clear() {
-      var _a;
-      (_a = root.value) === null || _a === void 0 ? void 0 : _a.clear(); // fixes error TS2349
-    }
-
     function focus() {
       var _a;
       (_a = root.value) === null || _a === void 0 ? void 0 : _a.focus(); // fixes error TS2349
@@ -88,15 +86,18 @@ var script = defineComponent({
       (_a = root.value) === null || _a === void 0 ? void 0 : _a.blur(); // fixes error TS2349
     }
 
+    function clear() {
+      draftModelValue.value = '';
+    }
     return {
-      controlAttributes,
       root,
       rootStyles,
-      model,
-      draft,
-      clear,
+      controlAttributes,
+      proxyModelValue,
+      draftModelValue,
       focus,
-      blur
+      blur,
+      clear
     };
   }
 });
@@ -136,11 +137,11 @@ var __vue_render__ = function () {
       }
     },
     model: {
-      value: _vm.draft,
+      value: _vm.draftModelValue,
       callback: function ($$v) {
-        _vm.draft = $$v;
+        _vm.draftModelValue = typeof $$v === 'string' ? $$v.trim() : $$v;
       },
-      expression: "draft"
+      expression: "draftModelValue"
     }
   }, 'OrInput', _vm.controlAttributes, false));
 };

package/dist/esm/v2/{OrSegmentedControl-678600b6.js → OrSegmentedControl-cd16856e.js}

@@ -147,7 +147,7 @@ var script = defineComponent({
   props: {
     options: {
       type: Array,
-      default: () => []
+      default: []
     },
     modelValue: {
       type: String,

package/dist/esm/v2/{OrSelect-0222b119.js → OrSelect-b148f581.js}

@@ -10,21 +10,21 @@ import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import { u as useResponsive } from './useResponsive-1baf3485.js';
 import '@onereach/styles/tailwind.config.json';
 import './TimeFormat-a7f5565b.js';
-import { _ as __vue_component__$3 } from './OrCheckbox-3b837bc2.js';
+import { _ as __vue_component__$3 } from './OrCheckbox-9cc98c9d.js';
 import { _ as __vue_component__$4 } from './OrError-b25d782d.js';
 import { _ as __vue_component__$5 } from './OrExpansionPanel-3d1fc4f9.js';
 import { _ as __vue_component__$6 } from './OrHint-2fe1157b.js';
 import { _ as __vue_component__$8 } from './OrIconButton-09f0b0ae.js';
 import { _ as __vue_component__$7 } from './OrIcon-03e3c802.js';
-import { _ as __vue_component__$a } from './OrInputBox-e272cbb2.js';
-import { a as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-770d753e.js';
-import { _ as __vue_component__$9 } from './OrInput-79028100.js';
+import { _ as __vue_component__$a } from './OrInputBox-1a8fda9b.js';
+import { a as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-8c39b9ca.js';
+import { _ as __vue_component__$9 } from './OrInput-09971392.js';
 import { _ as __vue_component__$b } from './OrLabel-bf7e2ea2.js';
 import { _ as __vue_component__$c } from './OrMenuItem-c49f96d5.js';
 import { _ as __vue_component__$d } from './OrPopover-142b6e93.js';
-import { T as TagsOverflow } from './OrTags-28583ca0.js';
-import { _ as __vue_component__$1 } from './OrSelectMultipleControl-e185f2d0.js';
-import { _ as __vue_component__$2 } from './OrSelectSingleControl-eeaa9afa.js';
+import { T as TagsOverflow } from './OrTags-1156ae60.js';
+import { _ as __vue_component__$1 } from './OrSelectMultipleControl-b03415b4.js';
+import { _ as __vue_component__$2 } from './OrSelectSingleControl-b3bf518b.js';
 import './OrSelectPlaceholder-a6caa9e0.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
@@ -55,7 +55,7 @@ const SelectDropdown = [
 // Box
 'max-h-[340px]',
 // Theme
-'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-outline border-1', 'dark:theme-border-outline-dark'];
+'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-1-outline', 'dark:theme-border-1-outline-dark'];
 const SelectDropdownDefault = [
 // Shape
 'rounded-b-md',
@@ -113,11 +113,11 @@ var script = defineComponent({
     },
     options: {
       type: Array,
-      default: () => []
+      default: []
     },
     searchOptions: {
       type: Array,
-      default: () => []
+      default: []
     },
     multiple: {
       type: Boolean,
@@ -318,7 +318,7 @@ var script = defineComponent({
       if (props.multiple) {
         proxyModelValue.value = exclude(item.value, toArray(proxyModelValue.value));
       } else {
-        proxyModelValue.value = undefined;
+        proxyModelValue.value = null;
       }
     }
     function toggleOption(item) {
@@ -330,7 +330,7 @@ var script = defineComponent({
           proxyModelValue.value = exclude(item.value, model);
         }
       } else {
-        proxyModelValue.value = proxyModelValue.value !== item.value ? item.value : undefined;
+        proxyModelValue.value = proxyModelValue.value !== item.value ? item.value : null;
       }
       searchText.value = '';
     }

package/dist/esm/v2/{OrSelectMultipleControl-e185f2d0.js → OrSelectMultipleControl-b03415b4.js}

@@ -8,7 +8,7 @@ import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import './TimeFormat-a7f5565b.js';
-import { _ as __vue_component__$3, T as TagsOverflow } from './OrTags-28583ca0.js';
+import { _ as __vue_component__$3, T as TagsOverflow } from './OrTags-1156ae60.js';
 import { _ as __vue_component__$2 } from './OrSelectControlInput-a46941f0.js';
 import { _ as __vue_component__$1 } from './OrSelectPlaceholder-a6caa9e0.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -35,11 +35,11 @@ var script = defineComponent({
     },
     model: {
       type: undefined,
-      default: () => []
+      default: []
     },
     options: {
       type: Array,
-      default: () => []
+      default: []
     },
     overflow: {
       type: String,

package/dist/esm/v2/{OrSelectSingleControl-eeaa9afa.js → OrSelectSingleControl-b3bf518b.js}

@@ -36,7 +36,7 @@ var script = defineComponent({
     },
     options: {
       type: Array,
-      default: () => []
+      default: []
     },
     placeholder: {
       type: String,

package/dist/esm/v2/{OrSlider-be1c780e.js → OrSlider-4b3fea84.js}

@@ -1,4 +1,4 @@
-import { s as script } from './OrSlider.vue_rollup-plugin-vue_script-fc565351.js';
+import { s as script } from './OrSlider.vue_rollup-plugin-vue_script-3d19c498.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 /* script */
@@ -23,7 +23,7 @@ var __vue_render__ = function () {
     }
   }, [_c('div', {
     class: _vm.trackStyles,
-    style: _vm.trackInlineStyles,
+    style: _vm.trackComputedStyles,
     attrs: {
       "disabled": _vm.disabled
     }
@@ -79,7 +79,7 @@ var __vue_render__ = function () {
       style: _vm.getBreakpointMarkComputedStyles(breakpoint),
       attrs: {
         "disabled": _vm.disabled,
-        "force-state": _vm.highlightedBreakpoint === breakpoint ? 'hover' : undefined
+        "force-state": _vm.highlightedBreakpoint === breakpoint ? 'hover' : null
       },
       on: {
         "mouseenter": function ($event) {

package/dist/esm/v2/{OrSlider.vue_rollup-plugin-vue_script-fc565351.js → OrSlider.vue_rollup-plugin-vue_script-3d19c498.js}

@@ -111,18 +111,18 @@ const SliderThumb = [
 const SliderThumbColors = {
   [SliderColor.Primary]: [
   // Theme
-  'theme-border-primary border-4', 'dark:theme-border-primary-dark',
+  'theme-border-4-primary', 'dark:theme-border-4-primary-dark',
   // Theme (hover)
   'hover:theme-background-primary', 'dark:hover:theme-background-primary-dark',
   // Theme (active)
-  'active:theme-background-primary', 'dark:active:theme-background-primary-dark', 'active:theme-outline-primary active:outline-10', 'dark:active:theme-outline-primary-dark'],
+  'active:theme-background-primary', 'dark:active:theme-background-primary-dark', 'active:theme-outline-10-primary', 'dark:active:theme-outline-10-primary-dark'],
   [SliderColor.Secondary]: [
   // Theme
-  'theme-border-secondary border-4', 'dark:theme-border-secondary-dark',
+  'theme-border-4-secondary', 'dark:theme-border-4-secondary-dark',
   // Theme (hover)
   'hover:theme-background-secondary', 'dark:hover:theme-background-secondary-dark',
   // Theme (active)
-  'active:theme-background-secondary', 'dark:active:theme-background-secondary-dark', 'active:theme-outline-secondary active:outline-10', 'dark:active:theme-outline-secondary-dark']
+  'active:theme-background-secondary', 'dark:active:theme-background-secondary-dark', 'active:theme-outline-10-secondary', 'dark:active:theme-outline-10-secondary-dark']
 };
 const SliderBreakpointMark = [
 // Position
@@ -211,7 +211,7 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: undefined,
+      type: Number,
       default: undefined
     },
     minValue: {
@@ -228,7 +228,7 @@ var script = defineComponent({
     },
     breakpoints: {
       type: Array,
-      default: () => []
+      default: []
     },
     color: {
       type: String,
@@ -250,13 +250,15 @@ var script = defineComponent({
   emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
-    // Refs & Styles
+    // Refs
     const root = ref();
-    const rootStyles = computed(() => ['or-slider-v3', ...Slider, ...SliderOrientations[props.orientation]]);
     const rail = ref();
+    const thumb = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-slider-v3', ...Slider, ...SliderOrientations[props.orientation]]);
     const railStyles = computed(() => ['or-slider-rail-v3', ...SliderRail, ...SliderRailOrientations[props.orientation]]);
     const trackStyles = computed(() => [...SliderTrack, ...SliderTrackColors[props.color]]);
-    const trackInlineStyles = computed(() => {
+    const trackComputedStyles = computed(() => {
       switch (props.orientation) {
         case SliderOrientation.Horizontal:
         case SliderOrientation.HorizontalReversed:
@@ -270,7 +272,6 @@ var script = defineComponent({
           };
       }
     });
-    const thumb = ref();
     const thumbStyles = computed(() => ['or-slider-thumb-v3', ...SliderThumb, ...SliderThumbColors[props.color]]);
     const breakpointMarkStyles = computed(() => [...SliderBreakpointMark, ...SliderBreakpointMarkColors[props.color]]);
     const labelStyles = computed(() => [...SliderLabel, ...SliderLabelOrientations[props.orientation]]);
@@ -280,7 +281,9 @@ var script = defineComponent({
       defaultValue: toRef(props, 'minValue')
     });
     const internalModelValue = computed({
-      get: () => (proxyModelValue.value - props.minValue) / (props.maxValue - props.minValue),
+      get: () => {
+        return (proxyModelValue.value - props.minValue) / (props.maxValue - props.minValue);
+      },
       set: value => {
         const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
         proxyModelValue.value = internalBreakpoints.value.reduce((a, b) => {
@@ -292,7 +295,7 @@ var script = defineComponent({
       if (!props.step) {
         return [props.minValue, ...props.breakpoints, props.maxValue];
       }
-      return Array(Math.ceil(Math.abs(props.maxValue - props.minValue) / props.step)).fill(undefined).map((value, index) => Math.floor((props.minValue + props.step * index) * 1000) / 1000).concat(...props.breakpoints, props.maxValue).sort((a, b) => a - b);
+      return Array(Math.ceil(Math.abs(props.maxValue - props.minValue) / props.step)).fill(null).map((value, index) => Math.floor((props.minValue + props.step * index) * 1000) / 1000).concat(...props.breakpoints, props.maxValue).sort((a, b) => a - b);
     });
     const tooltipPlacement = computed(() => {
       switch (props.orientation) {
@@ -379,12 +382,12 @@ var script = defineComponent({
     });
     return {
       root,
-      rootStyles,
       rail,
+      thumb,
+      rootStyles,
       railStyles,
       trackStyles,
-      trackInlineStyles,
-      thumb,
+      trackComputedStyles,
       thumbStyles,
       breakpointMarkStyles,
       labelStyles,

package/dist/esm/v2/{OrSorting-9ea74673.js → OrSorting-65091c1d.js}

@@ -5,8 +5,8 @@ import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import './TimeFormat-a7f5565b.js';
-import { _ as __vue_component__$1 } from './OrButton-3a743a90.js';
-import './OrButton.vue_rollup-plugin-vue_script-e8900483.js';
+import { _ as __vue_component__$1 } from './OrButton-e4e85817.js';
+import './OrButton.vue_rollup-plugin-vue_script-199bb600.js';
 import { _ as __vue_component__$2 } from './OrIcon-03e3c802.js';
 import { _ as __vue_component__$4 } from './OrMenuItem-c49f96d5.js';
 import { _ as __vue_component__$3 } from './OrMenu-8db097c0.js';

package/dist/esm/v2/{OrSwitch-ff3b5a5d.js → OrSwitch-9405826a.js}

@@ -33,9 +33,9 @@ const SwitchControl = [
 // Spacing (checked)
 'checked:px-[3px]', 'active:checked:px-[2px]',
 // Theme
-'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-outline border-1', 'dark:theme-border-outline-dark',
+'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-1-outline', 'dark:theme-border-1-outline-dark',
 // Theme (focus)
-'focus-visible:theme-outline-primary focus-visible:outline-2', 'dark:focus-visible:theme-outline-primary-dark',
+'focus-visible:theme-outline-2-primary', 'dark:focus-visible:theme-outline-2-primary-dark',
 // Theme (checked)
 'checked:theme-preset-1-primary', 'dark:checked:theme-preset-1-primary-dark'];
 const SwitchControlHandle = [
@@ -53,7 +53,7 @@ const SwitchLoader = [
 // Shape
 'rounded-full',
 // Theme
-'theme-border-outline border-1', 'dark:theme-border-outline-dark'];
+'theme-border-1-outline', 'dark:theme-border-1-outline-dark'];
 const SwitchLoaderHandle = [
 // Layout
 'after:absolute',

package/dist/esm/v2/{OrTab-a878c950.js → OrTab-1b10597d.js}

@@ -11,19 +11,19 @@ const Tab = [
 // Typography
 'typography-body-2-bold',
 // Theme
-'theme-foreground-secondary', 'dark:theme-foreground-secondary-dark', 'theme-border-transparent border-b-2', 'dark:theme-border-transparent-dark',
+'theme-foreground-secondary', 'dark:theme-foreground-secondary-dark', 'theme-border-underline', 'theme-border-2-transparent', 'dark:theme-border-2-transparent-dark',
 // Theme (hover)
 'hover:md:theme-foreground-default', 'dark:hover:md:theme-foreground-default-dark',
 // Theme (active)
-'active:theme-foreground-default', 'dark:active:theme-foreground-default-dark', 'active:theme-border-current active:border-b-2', 'dark:active:theme-border-current-dark',
+'active:theme-foreground-default', 'dark:active:theme-foreground-default-dark', 'active:theme-border-underline', 'active:theme-border-2-current', 'dark:active:theme-border-2-current-dark',
 // Theme (selected)
-'selected:theme-foreground-default', 'dark:selected:theme-foreground-default-dark', 'selected:theme-border-current selected:border-b-2', 'dark:selected:theme-border-current-dark',
+'selected:theme-foreground-default', 'dark:selected:theme-foreground-default-dark', 'selected:theme-border-underline', 'selected:theme-border-2-current', 'dark:selected:theme-border-2-current-dark',
 // Theme (invalid)
 'invalid:theme-foreground-error', 'dark:invalid:theme-foreground-error-dark',
-// Theme (invalid + hover)
+// Theme (invalid/hover)
 'hover:invalid:md:theme-foreground-error-hover', 'dark:hover:invalid:md:theme-foreground-error-hover-dark',
-// Theme (invalid + active)
-'active:invalid:theme-foreground-error', 'dark:active:invalid:theme-foreground-error-dark', 'active:invalid:theme-border-current active:invalid:border-b-2', 'dark:active:invalid:theme-border-current-dark'];
+// Theme (invalid/active)
+'active:invalid:theme-foreground-error', 'dark:active:invalid:theme-foreground-error-dark', 'active:invalid:theme-border-underline', 'active:invalid:theme-border-2-current', 'dark:active:invalid:theme-border-2-current-dark'];
 
 var script = defineComponent({
   name: 'OrTab',

package/dist/esm/v2/{OrTabs-39f89dc1.js → OrTabs-ad349302.js}

@@ -8,7 +8,7 @@ import './TimeFormat-a7f5565b.js';
 import { _ as __vue_component__$1 } from './OrIcon-03e3c802.js';
 import { _ as __vue_component__$3 } from './OrMenuItem-c49f96d5.js';
 import { _ as __vue_component__$2 } from './OrMenu-8db097c0.js';
-import { _ as __vue_component__$4 } from './OrTab-a878c950.js';
+import { _ as __vue_component__$4 } from './OrTab-1b10597d.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var TabsVariant;
@@ -28,7 +28,7 @@ const Tabs = [
 // Layout
 'grid grid-flow-col items-center shrink-0',
 // Theme
-'theme-border-outline border-b-1', 'dark:theme-border-outline'];
+'theme-border-underline', 'theme-border-1-outline', 'dark:theme-border-1-outline'];
 const TabsVariants = {
   'default': [
   // Layout

package/dist/esm/v2/{OrTagInput-96a7d8b9.js → OrTagInput-659cefaf.js}

@@ -12,12 +12,12 @@ import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34
 import { _ as __vue_component__$1 } from './OrError-b25d782d.js';
 import { _ as __vue_component__$2 } from './OrHint-2fe1157b.js';
 import { _ as __vue_component__$3 } from './OrIconButton-09f0b0ae.js';
-import { _ as __vue_component__$4 } from './OrInputBox-e272cbb2.js';
-import './OrInputBox.vue_rollup-plugin-vue_script-770d753e.js';
+import { _ as __vue_component__$4 } from './OrInputBox-1a8fda9b.js';
+import './OrInputBox.vue_rollup-plugin-vue_script-8c39b9ca.js';
 import { _ as __vue_component__$5 } from './OrLabel-bf7e2ea2.js';
 import { _ as __vue_component__$6 } from './OrLoader-4ac49224.js';
 import { a as TagColor } from './OrTag-3b36d2e4.js';
-import { _ as __vue_component__$7, T as TagsOverflow } from './OrTags-28583ca0.js';
+import { _ as __vue_component__$7, T as TagsOverflow } from './OrTags-1156ae60.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
@@ -55,7 +55,7 @@ var script = defineComponent({
   props: {
     modelValue: {
       type: undefined,
-      default: () => []
+      default: []
     },
     label: {
       type: String,
@@ -136,7 +136,7 @@ var script = defineComponent({
     });
     const activated = ref(false);
     const proxyModelValue = useProxyModelValue(modelValue, context.emit);
-    const draftModelValue = ref();
+    const draftModelValue = ref('');
     const tagsItems = computed(() => {
       return toArray(proxyModelValue.value).map(item => ({
         label: item,
@@ -153,13 +153,13 @@ var script = defineComponent({
     const maxLength = computed(() => controlAttributes.maxlength);
     const controlInlineStyles = computed(() => {
       var _a, _b;
-      const chars = draftModelValue.value ? draftModelValue.value.length : currentLength.value === 0 ? (_b = (_a = placeholder.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 : 0;
+      const chars = draftModelValue.value.length > 0 ? draftModelValue.value.length : currentLength.value === 0 ? (_b = (_a = placeholder.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 : 0;
       return {
         width: `${Math.max(chars + 1 || 0, 3)}ch`
       };
     });
     const showControl = computed(() => {
-      return draftModelValue.value || currentLength.value === 0 || activated.value;
+      return draftModelValue.value.length > 0 || currentLength.value === 0 || activated.value;
     });
     const tagsProps = computed(() => ({
       variant: readonly.value || disabled.value || !activated.value ? 'tag' : 'reset',
@@ -251,7 +251,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-37594aa5]{min-width:0;background:0 0;outline:0}";
+var css_248z = "input[data-v-150fb01c]{min-width:0;background:0 0;outline:0}";
 styleInject(css_248z);
 
 /* script */
@@ -449,7 +449,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-37594aa5";
+const __vue_scope_id__ = "data-v-150fb01c";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v2/{OrTags-28583ca0.js → OrTags-1156ae60.js}

@@ -5,8 +5,8 @@ import '@vueuse/core';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import './TimeFormat-a7f5565b.js';
-import { _ as __vue_component__$1 } from './OrButton-3a743a90.js';
-import './OrButton.vue_rollup-plugin-vue_script-e8900483.js';
+import { _ as __vue_component__$1 } from './OrButton-e4e85817.js';
+import './OrButton.vue_rollup-plugin-vue_script-199bb600.js';
 import { _ as __vue_component__$2 } from './OrPopover-142b6e93.js';
 import { _ as __vue_component__$3 } from './OrTag-3b36d2e4.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/esm/v2/{OrTextarea-fa707a6a.js → OrTextarea-30fb5dcc.js}

@@ -9,8 +9,8 @@ import './TimeFormat-a7f5565b.js';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { _ as __vue_component__$1 } from './OrError-b25d782d.js';
 import { _ as __vue_component__$2 } from './OrHint-2fe1157b.js';
-import { _ as __vue_component__$3 } from './OrInputBox-e272cbb2.js';
-import { a as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-770d753e.js';
+import { _ as __vue_component__$3 } from './OrInputBox-1a8fda9b.js';
+import { a as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-8c39b9ca.js';
 import { _ as __vue_component__$4 } from './OrLabel-bf7e2ea2.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/esm/v2/{OrTimeFormat-bcb6fc46.js → OrTimeFormat-00143a1a.js}

@@ -5,8 +5,8 @@ import '@vueuse/core';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { T as TimeFormat$1 } from './TimeFormat-a7f5565b.js';
-import './OrDateTimePicker.vue_rollup-plugin-vue_script-75e52a6b.js';
-import './OrDateTimePickerTimeSelect-7b9a902e.js';
+import './OrDateTimePicker.vue_rollup-plugin-vue_script-4b3c2ccc.js';
+import './OrDateTimePickerTimeSelect-b0bd8978.js';
 import { a as formatTime } from './formatTime-fbabf53c.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrTimePicker-11b7002c.js → OrTimePicker-3cfd9812.js}

@@ -7,15 +7,15 @@ import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { T as TimeFormat } from './TimeFormat-a7f5565b.js';
-import './OrDateTimePicker.vue_rollup-plugin-vue_script-75e52a6b.js';
-import { b as __vue_component__$1, d as __vue_component__$2, e as __vue_component__$3, f as __vue_component__$4, g as __vue_component__$5 } from './OrDateTimePickerTimeSelect-7b9a902e.js';
+import './OrDateTimePicker.vue_rollup-plugin-vue_script-4b3c2ccc.js';
+import { b as __vue_component__$1, d as __vue_component__$2, e as __vue_component__$3, f as __vue_component__$4, g as __vue_component__$5 } from './OrDateTimePickerTimeSelect-b0bd8978.js';
 import { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 import { _ as __vue_component__$6 } from './OrError-b25d782d.js';
 import { _ as __vue_component__$7 } from './OrHint-2fe1157b.js';
 import { _ as __vue_component__$9 } from './OrIconButton-09f0b0ae.js';
 import { _ as __vue_component__$8 } from './OrIcon-03e3c802.js';
-import { _ as __vue_component__$a } from './OrInputBox-e272cbb2.js';
-import { a as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-770d753e.js';
+import { _ as __vue_component__$a } from './OrInputBox-1a8fda9b.js';
+import { a as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-8c39b9ca.js';
 import { _ as __vue_component__$b } from './OrLabel-bf7e2ea2.js';
 import { _ as __vue_component__$c } from './OrPopover-142b6e93.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/esm/v2/{OrTimeRangePicker-bf8c0cb8.js → OrTimeRangePicker-d646f4b3.js}

@@ -7,15 +7,15 @@ import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import { u as useResponsive } from './useResponsive-1baf3485.js';
 import '@onereach/styles/tailwind.config.json';
 import { T as TimeFormat } from './TimeFormat-a7f5565b.js';
-import './OrDateTimePicker.vue_rollup-plugin-vue_script-75e52a6b.js';
-import { b as __vue_component__$1, d as __vue_component__$2, e as __vue_component__$3, f as __vue_component__$4, g as __vue_component__$5 } from './OrDateTimePickerTimeSelect-7b9a902e.js';
+import './OrDateTimePicker.vue_rollup-plugin-vue_script-4b3c2ccc.js';
+import { b as __vue_component__$1, d as __vue_component__$2, e as __vue_component__$3, f as __vue_component__$4, g as __vue_component__$5 } from './OrDateTimePickerTimeSelect-b0bd8978.js';
 import { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 import { _ as __vue_component__$6 } from './OrError-b25d782d.js';
 import { _ as __vue_component__$7 } from './OrHint-2fe1157b.js';
 import { _ as __vue_component__$9 } from './OrIconButton-09f0b0ae.js';
 import { _ as __vue_component__$8 } from './OrIcon-03e3c802.js';
-import { _ as __vue_component__$a } from './OrInputBox-e272cbb2.js';
-import { a as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-770d753e.js';
+import { _ as __vue_component__$a } from './OrInputBox-1a8fda9b.js';
+import { a as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-8c39b9ca.js';
 import { _ as __vue_component__$b } from './OrLabel-bf7e2ea2.js';
 import { _ as __vue_component__$c } from './OrPopover-142b6e93.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -137,8 +137,8 @@ var script = defineComponent({
         return (_a = draft.value) === null || _a === void 0 ? void 0 : _a[0];
       },
       set: value => {
-        var _a;
-        draft.value = [value, (_a = draft.value) === null || _a === void 0 ? void 0 : _a[1]];
+        var _a, _b;
+        draft.value = [value !== null && value !== void 0 ? value : null, (_b = (_a = draft.value) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : null];
       }
     });
     const draftTo = computed({
@@ -147,8 +147,8 @@ var script = defineComponent({
         return (_a = draft.value) === null || _a === void 0 ? void 0 : _a[1];
       },
       set: value => {
-        var _a;
-        draft.value = [(_a = draft.value) === null || _a === void 0 ? void 0 : _a[0], value];
+        var _a, _b;
+        draft.value = [(_b = (_a = draft.value) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : null, value !== null && value !== void 0 ? value : null];
       }
     });
     const activeControl = ref('from');
@@ -164,7 +164,7 @@ var script = defineComponent({
     }
     function reset() {
       var _a;
-      draft.value = (_a = model.value) !== null && _a !== void 0 ? _a : [undefined, undefined];
+      draft.value = (_a = model.value) !== null && _a !== void 0 ? _a : [null, null];
     }
     function openPopover(control) {
       if (!props.readonly && !props.disabled) {

package/dist/esm/v2/{OrTree-0604679b.js → OrTree-0a2d5389.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watch, unref, onMounted } from 'vue-demi';
 import { useToggle } from '@vueuse/core';
-import { _ as __vue_component__$2 } from './OrButton-3a743a90.js';
-import './OrButton.vue_rollup-plugin-vue_script-e8900483.js';
+import { _ as __vue_component__$2 } from './OrButton-e4e85817.js';
+import './OrButton.vue_rollup-plugin-vue_script-199bb600.js';
 import { _ as __vue_component__$3 } from './OrIcon-03e3c802.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';