@onereach/ui-components 8.10.0 → 8.10.1-beta.3757.0

package/dist/esm/v2/{OrRangeSlider-9a81a450.js → OrRangeSlider-d34f950b.js}

@@ -1,12 +1,12 @@
 import { useElementBounding, useElementHover, useDraggable, clamp } from '@vueuse/core';
-import { defineComponent, ref, computed, toRef } from 'vue-demi';
+import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import './dom-aecadd9a.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import { _ as __vue_component__$1 } from './OrTooltip-8be4fff2.js';
-import './OrPopover-5564b96e.js';
-import { a as SliderOrientation, S as SliderColor } from './OrSlider.vue_rollup-plugin-vue_script-2623bd60.js';
+import { _ as __vue_component__$1 } from './OrTooltip-aac08c3f.js';
+import './OrPopover-325afb44.js';
+import { a as SliderOrientation, S as SliderColor } from './OrSlider.vue_rollup-plugin-vue_script-2e53b6b1.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const RangeSlider = [
@@ -43,14 +43,18 @@ const RangeSliderRailOrientations = {
 };
 const RangeSliderOffset = [];
 const RangeSliderOffsetOrientations = {
-  [SliderOrientation.Horizontal]: [],
-  [SliderOrientation.Vertical]: []
+  [SliderOrientation.Horizontal]: [
+  // Box
+  'h-full'],
+  [SliderOrientation.Vertical]: [
+  // Box
+  'w-full']
 };
 const RangeSliderTrack = [
-// Box
-'w-full', 'h-full',
 // Shape
-'rounded-full'];
+'rounded-full',
+// Box
+'w-full', 'h-full'];
 const RangeSliderTrackColors = {
   [SliderColor.Primary]: [
   // Theme
@@ -62,27 +66,27 @@ const RangeSliderTrackColors = {
 const RangeSliderThumb = [
 // Layout
 'shrink-0',
-// Box
-'w-[20px]', 'h-[20px]', '-mx-[10px]', '-my-[10px]',
 // Shape
 'rounded-full',
+// Box
+'w-[20px]', 'h-[20px]', '-mx-[10px]', '-my-[10px]',
 // Theme
-'bg-white dark:bg-black'];
+'theme-background-base', 'dark:theme-background-base-dark'];
 const RangeSliderThumbColors = {
   [SliderColor.Primary]: [
   // Theme
   'theme-border-4-primary', 'dark:theme-border-4-primary-dark',
-  // Theme (enabled, hover)
-  'hover:enabled:theme-background-primary', 'dark:hover:enabled:theme-background-primary-dark',
-  // Theme (enabled, active)
-  'active:enabled:theme-background-primary', 'dark:active:enabled:theme-background-primary-dark', 'active:enabled:theme-outline-10-primary', 'dark:active:enabled:theme-outline-10-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-10-primary', 'dark:active:theme-outline-10-primary-dark'],
   [SliderColor.Secondary]: [
   // Theme
   'theme-border-4-secondary', 'dark:theme-border-4-secondary-dark',
-  // Theme (enabled, hover)
-  'hover:enabled:theme-background-secondary', 'dark:hover:enabled:theme-background-secondary-dark',
-  // Theme (enabled, active)
-  'active:enabled:theme-background-secondary', 'dark:active:enabled:theme-background-secondary-dark', 'active:enabled:theme-outline-10-secondary', 'dark:active:enabled:theme-outline-10-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-10-secondary', 'dark:active:theme-outline-10-secondary-dark']
 };
 const RangeSliderLabel = [];
 const RangeSliderLabelOrientations = {
@@ -128,6 +132,10 @@ var script = defineComponent({
       type: Number,
       default: 1
     },
+    breakpoints: {
+      type: Array,
+      default: () => []
+    },
     color: {
       type: String,
       default: SliderColor.Primary
@@ -147,6 +155,9 @@ var script = defineComponent({
     // Refs
     const root = ref();
     const rail = ref();
+    const offset = ref();
+    const track = ref();
+    const filler = ref();
     const thumbFrom = ref();
     const thumbTo = ref();
     // Styles
@@ -172,7 +183,10 @@ var script = defineComponent({
         return (proxyModelValue.value[0] - props.minValue) / (props.maxValue - props.minValue);
       },
       set: value => {
-        proxyModelValue.value = [Math.round(value * (props.maxValue - props.minValue) + props.minValue), Math.round(internalModelValueTo.value * (props.maxValue - props.minValue) + props.minValue)];
+        const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
+        proxyModelValue.value = [internalBreakpoints.value.reduce((a, b) => {
+          return Math.abs(a - modelValue) < Math.abs(b - modelValue) ? a : b;
+        }), internalModelValueTo.value * (props.maxValue - props.minValue) + props.minValue];
       }
     });
     const internalModelValueTo = computed({
@@ -180,9 +194,18 @@ var script = defineComponent({
         return (proxyModelValue.value[1] - props.minValue) / (props.maxValue - props.minValue);
       },
       set: value => {
-        proxyModelValue.value = [Math.round(internalModelValueFrom.value * (props.maxValue - props.minValue) + props.minValue), Math.round(value * (props.maxValue - props.minValue) + props.minValue)];
+        const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
+        proxyModelValue.value = [internalModelValueFrom.value * (props.maxValue - props.minValue) + props.minValue, internalBreakpoints.value.reduce((a, b) => {
+          return Math.abs(a - modelValue) < Math.abs(b - modelValue) ? a : b;
+        })];
       }
     });
+    const internalBreakpoints = computed(() => {
+      if (!props.step) {
+        return [props.minValue, ...props.breakpoints, props.maxValue];
+      }
+      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 railBoundingBox = useElementBounding(rail);
     const selectedControl = ref();
     // Handlers
@@ -199,7 +222,14 @@ var script = defineComponent({
       }
     }
     // Effects
-    const isHovering = useElementHover(rail);
+    const isHoveringOffset = useElementHover(offset);
+    const isHoveringTrack = useElementHover(track);
+    const isHoveringFiller = useElementHover(filler);
+    const isHoveringRail = computed(() => {
+      return isHoveringOffset.value || isHoveringTrack.value || isHoveringFiller.value;
+    });
+    const isHoveringThumbFrom = useElementHover(thumbFrom);
+    const isHoveringThumbTo = useElementHover(thumbTo);
     const {
       isDragging
     } = useDraggable(rail, {
@@ -219,9 +249,27 @@ var script = defineComponent({
       onMove: onDrag,
       onEnd: onDrag
     });
+    // Constraints
+    watch(toRef(props, 'minValue'), value => {
+      if (value >= props.maxValue) {
+        throw new Error('OrRangeSlider: `minValue` cannot be greater or equal to `maxValue`.');
+      }
+    }, {
+      immediate: true
+    });
+    watch(toRef(props, 'maxValue'), value => {
+      if (value <= props.minValue) {
+        throw new Error('OrRangeSlider: `maxValue` cannot be lesser or equal to `minValue`.');
+      }
+    }, {
+      immediate: true
+    });
     return {
       root,
       rail,
+      offset,
+      track,
+      filler,
       thumbFrom,
       thumbTo,
       rootStyles,
@@ -234,10 +282,13 @@ var script = defineComponent({
       labelStyles,
       labelMarkStyles,
       proxyModelValue,
-      internalModelValueFrom,
-      internalModelValueTo,
       selectedControl,
-      isHovering,
+      isHoveringOffset,
+      isHoveringTrack,
+      isHoveringFiller,
+      isHoveringRail,
+      isHoveringThumbFrom,
+      isHoveringThumbTo,
       isDragging
     };
   }
@@ -264,6 +315,7 @@ var __vue_render__ = function () {
       "disabled": _vm.disabled
     }
   }, [_c('div', {
+    ref: "offset",
     class: _vm.offsetStyles,
     style: _vm.offsetComputedStyles,
     attrs: {
@@ -272,10 +324,10 @@ var __vue_render__ = function () {
   }), _vm._v(" "), _c('OrTooltip', {
     class: ['relative', 'z-10'],
     attrs: {
-      "is-open": _vm.isHovering || _vm.isDragging,
+      "is-open": !_vm.isDragging && (_vm.isHoveringRail || _vm.isHoveringThumbFrom) || _vm.isDragging && _vm.selectedControl === 'from',
       "content": String(_vm.proxyModelValue[0]),
       "placement": _vm.orientation === 'horizontal' ? 'top' : 'right',
-      "offset": 8,
+      "offset": 24,
       "external-control": true
     }
   }, [_c('div', {
@@ -285,6 +337,7 @@ var __vue_render__ = function () {
       "disabled": _vm.disabled
     }
   })]), _vm._v(" "), _c('div', {
+    ref: "track",
     class: _vm.trackStyles,
     style: _vm.trackComputedStyles,
     attrs: {
@@ -293,10 +346,10 @@ var __vue_render__ = function () {
   }), _vm._v(" "), _c('OrTooltip', {
     class: ['relative', 'z-10'],
     attrs: {
-      "is-open": _vm.isHovering || _vm.isDragging,
+      "is-open": !_vm.isDragging && (_vm.isHoveringRail || _vm.isHoveringThumbTo) || _vm.isDragging && _vm.selectedControl === 'to',
       "content": String(_vm.proxyModelValue[1]),
       "placement": _vm.orientation === 'horizontal' ? 'top' : 'right',
-      "offset": 8,
+      "offset": 24,
       "external-control": true
     }
   }, [_c('div', {
@@ -305,7 +358,13 @@ var __vue_render__ = function () {
     attrs: {
       "disabled": _vm.disabled
     }
-  })])], 1), _vm._v(" "), _c('div', {
+  })]), _vm._v(" "), _c('div', {
+    ref: "filler",
+    class: ['grow'].concat(_vm.offsetStyles),
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  })], 1), _vm._v(" "), _c('div', {
     class: _vm.labelStyles
   }, [_c('div', {
     class: _vm.labelMarkStyles

package/dist/esm/v2/{OrResizeablePanel-78f29d5d.js → OrResizeablePanel-55840ae0.js}

@@ -4,7 +4,7 @@ import './dom-aecadd9a.js';
 import { u as usePopoverState } from './usePopoverState-b92c698b.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import { _ as __vue_component__$1 } from './OrIconButton-b4370da7.js';
+import { _ as __vue_component__$1 } from './OrIconButton-a1f2f761.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var ResizeablePanelPadding;

package/dist/esm/v2/{OrRichTextEditor-5d2df527.js → OrRichTextEditor-9f935e5a.js}

@@ -16,13 +16,13 @@ import Blockquote from '@tiptap/extension-blockquote';
 import Link from '@tiptap/extension-link';
 import Highlight from '@tiptap/extension-highlight';
 import Underline from '@tiptap/extension-underline';
-import { _ as __vue_component__$1 } from './OrIconButton-b4370da7.js';
+import { _ as __vue_component__$1 } from './OrIconButton-a1f2f761.js';
 import { _ as __vue_component__$2 } from './OrLabel-b465bc0b.js';
-import { _ as __vue_component__$4 } from './OrMenu-3c625d5e.js';
-import { _ as __vue_component__$8 } from './OrPopover-5564b96e.js';
+import { _ as __vue_component__$4 } from './OrMenu-8c939b09.js';
+import { _ as __vue_component__$8 } from './OrPopover-325afb44.js';
 import { _ as __vue_component__$3 } from './OrMenuItem-d204cbc7.js';
-import { _ as __vue_component__$5 } from './OrModal-87880ed7.js';
-import { _ as __vue_component__$6 } from './OrInput-b2ffcb70.js';
+import { _ as __vue_component__$5 } from './OrModal-f5cf14cb.js';
+import { _ as __vue_component__$6 } from './OrInput-cee9d98f.js';
 import { _ as __vue_component__$7 } from './OrButton-1b005dae.js';
 import './OrButton.vue_rollup-plugin-vue_script-b4424640.js';
 import { Node, Editor, mergeAttributes } from '@tiptap/core';

package/dist/esm/v2/{OrSearch-b3aa11d9.js → OrSearch-1b9ef596.js}

@@ -1,7 +1,7 @@
 import { debouncedWatch } from '@vueuse/core';
 import { defineComponent, ref, computed, reactive, watch } from 'vue-demi';
-import { _ as __vue_component__$1 } from './OrInput-b2ffcb70.js';
-import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';
+import { _ as __vue_component__$1 } from './OrInput-cee9d98f.js';
+import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-ba172f8b.js';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 import './dom-aecadd9a.js';
 import '@onereach/styles/tailwind/plugins/core';

package/dist/esm/v2/{OrSelect-e7df9dd9.js → OrSelect-77cf569c.js}

@@ -4,22 +4,22 @@ import '@vueuse/core';
 import './dom-aecadd9a.js';
 import { i as isEmptyValue } from './isEmptyValue-fd56a6e4.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
-import { u as useResponsive } from './useResponsive-5c8291da.js';
+import { u as useResponsive } from './useResponsive-1baf3485.js';
 import '@onereach/styles/tailwind.config.json';
 import { _ as __vue_component__$3 } from './OrCheckbox-83f20ca2.js';
 import { _ as __vue_component__$4 } from './OrError-916e928e.js';
 import { _ as __vue_component__$5 } from './OrExpansionPanel-3468cce1.js';
 import { _ as __vue_component__$6 } from './OrHint-1220face.js';
-import { _ as __vue_component__$8 } from './OrIconButton-b4370da7.js';
+import { _ as __vue_component__$8 } from './OrIconButton-a1f2f761.js';
 import { _ as __vue_component__$7 } from './OrIcon-0343b3d8.js';
-import { _ as __vue_component__$a } from './OrInputBox-c586fe8d.js';
-import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';
-import { _ as __vue_component__$9 } from './OrInput-b2ffcb70.js';
+import { _ as __vue_component__$a } from './OrInputBox-2ba4ae49.js';
+import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-ba172f8b.js';
+import { _ as __vue_component__$9 } from './OrInput-cee9d98f.js';
 import { _ as __vue_component__$b } from './OrLabel-b465bc0b.js';
 import { _ as __vue_component__$c } from './OrMenuItem-d204cbc7.js';
-import { _ as __vue_component__$d } from './OrPopover-5564b96e.js';
-import { T as TagsOverflow } from './OrTags-ad538883.js';
-import { _ as __vue_component__$1 } from './OrSelectMultipleControl-964fd457.js';
+import { _ as __vue_component__$d } from './OrPopover-325afb44.js';
+import { T as TagsOverflow } from './OrTags-e1143c94.js';
+import { _ as __vue_component__$1 } from './OrSelectMultipleControl-ff3e2179.js';
 import { _ as __vue_component__$2 } from './OrSelectSingleControl-8ca0d898.js';
 import './OrSelectPlaceholder-f36f4e40.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/esm/v2/{OrSelectMultipleControl-964fd457.js → OrSelectMultipleControl-ff3e2179.js}

@@ -5,7 +5,7 @@ import { i as isEqualValue } from './isEqualValue-f8bf73d9.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import { _ as __vue_component__$3, T as TagsOverflow } from './OrTags-ad538883.js';
+import { _ as __vue_component__$3, T as TagsOverflow } from './OrTags-e1143c94.js';
 import { _ as __vue_component__$1 } from './OrSelectPlaceholder-f36f4e40.js';
 import { i as isEmptyValue } from './isEmptyValue-fd56a6e4.js';
 import { _ as __vue_component__$2 } from './OrSelectControlInput-28c226f8.js';

package/dist/esm/v2/{OrSidebar-2c41b483.js → OrSidebar-583c2703.js}

@@ -4,7 +4,7 @@ import './dom-aecadd9a.js';
 import { u as usePopoverState } from './usePopoverState-b92c698b.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import { R as ResizeablePanelPadding, _ as __vue_component__$1 } from './OrResizeablePanel-78f29d5d.js';
+import { R as ResizeablePanelPadding, _ as __vue_component__$1 } from './OrResizeablePanel-55840ae0.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var SidebarPlacement;

package/dist/esm/v2/{OrSlider-f2cabfad.js → OrSlider-2217ee40.js}

@@ -1,4 +1,4 @@
-import { s as script } from './OrSlider.vue_rollup-plugin-vue_script-2623bd60.js';
+import { s as script } from './OrSlider.vue_rollup-plugin-vue_script-2e53b6b1.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 /* script */
@@ -33,7 +33,7 @@ var __vue_render__ = function () {
       "is-open": _vm.isHovering || _vm.isDragging,
       "content": String(_vm.proxyModelValue),
       "placement": _vm.orientation === 'horizontal' ? 'top' : 'right',
-      "offset": 8,
+      "offset": 24,
       "external-control": true
     }
   }, [_c('div', {

package/dist/esm/v2/{OrSlider.vue_rollup-plugin-vue_script-2623bd60.js → OrSlider.vue_rollup-plugin-vue_script-2e53b6b1.js}

@@ -1,11 +1,11 @@
 import { useElementBounding, useElementHover, useDraggable, clamp } from '@vueuse/core';
-import { defineComponent, ref, computed, toRef } from 'vue-demi';
+import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import './dom-aecadd9a.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import { _ as __vue_component__ } from './OrTooltip-8be4fff2.js';
-import './OrPopover-5564b96e.js';
+import { _ as __vue_component__ } from './OrTooltip-aac08c3f.js';
+import './OrPopover-325afb44.js';
 
 var SliderColor;
 (function (SliderColor) {
@@ -51,10 +51,10 @@ const SliderRailOrientations = {
   'layout-column-reverse items-center', 'w-xs', 'h-full', 'mx-md+', 'my-none']
 };
 const SliderTrack = [
-// Box
-'w-full', 'h-full',
 // Shape
-'rounded-full'];
+'rounded-full',
+// Box
+'w-full', 'h-full'];
 const SliderTrackColors = {
   [SliderColor.Primary]: [
   // Theme
@@ -66,27 +66,27 @@ const SliderTrackColors = {
 const SliderThumb = [
 // Layout
 'shrink-0',
-// Box
-'w-[20px]', 'h-[20px]', '-mx-[10px]', '-my-[10px]',
 // Shape
 'rounded-full',
+// Box
+'w-[20px]', 'h-[20px]', '-mx-[10px]', '-my-[10px]',
 // Theme
-'bg-white dark:bg-black'];
+'theme-background-base', 'dark:theme-background-base-dark'];
 const SliderThumbColors = {
   [SliderColor.Primary]: [
   // Theme
   'theme-border-4-primary', 'dark:theme-border-4-primary-dark',
-  // Theme (enabled, hover)
-  'hover:enabled:theme-background-primary', 'dark:hover:enabled:theme-background-primary-dark',
-  // Theme (enabled, active)
-  'active:enabled:theme-background-primary', 'dark:active:enabled:theme-background-primary-dark', 'active:enabled:theme-outline-10-primary', 'dark:active:enabled:theme-outline-10-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-10-primary', 'dark:active:theme-outline-10-primary-dark'],
   [SliderColor.Secondary]: [
   // Theme
   'theme-border-4-secondary', 'dark:theme-border-4-secondary-dark',
-  // Theme (enabled, hover)
-  'hover:enabled:theme-background-secondary', 'dark:hover:enabled:theme-background-secondary-dark',
-  // Theme (enabled, active)
-  'active:enabled:theme-background-secondary', 'dark:active:enabled:theme-background-secondary-dark', 'active:enabled:theme-outline-10-secondary', 'dark:active:enabled:theme-outline-10-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-10-secondary', 'dark:active:theme-outline-10-secondary-dark']
 };
 const SliderLabel = [];
 const SliderLabelOrientations = {
@@ -132,6 +132,10 @@ var script = defineComponent({
       type: Number,
       default: 1
     },
+    breakpoints: {
+      type: Array,
+      default: () => []
+    },
     color: {
       type: String,
       default: SliderColor.Primary
@@ -171,8 +175,17 @@ var script = defineComponent({
         return (proxyModelValue.value - props.minValue) / (props.maxValue - props.minValue);
       },
       set: value => {
-        proxyModelValue.value = Math.round(value * (props.maxValue - props.minValue) + props.minValue);
+        const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
+        proxyModelValue.value = internalBreakpoints.value.reduce((a, b) => {
+          return Math.abs(a - modelValue) < Math.abs(b - modelValue) ? a : b;
+        });
+      }
+    });
+    const internalBreakpoints = computed(() => {
+      if (!props.step) {
+        return [props.minValue, ...props.breakpoints, props.maxValue];
       }
+      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 railBoundingBox = useElementBounding(rail);
     // Handlers
@@ -193,6 +206,21 @@ var script = defineComponent({
       onMove: onDrag,
       onEnd: onDrag
     });
+    // Constraints
+    watch(toRef(props, 'minValue'), value => {
+      if (value >= props.maxValue) {
+        throw new Error('OrRangeSlider: `minValue` cannot be greater or equal to `maxValue`.');
+      }
+    }, {
+      immediate: true
+    });
+    watch(toRef(props, 'maxValue'), value => {
+      if (value <= props.minValue) {
+        throw new Error('OrRangeSlider: `maxValue` cannot be lesser or equal to `minValue`.');
+      }
+    }, {
+      immediate: true
+    });
     return {
       root,
       rail,
@@ -205,7 +233,6 @@ var script = defineComponent({
       labelStyles,
       labelMarkStyles,
       proxyModelValue,
-      internalModelValue,
       isHovering,
       isDragging
     };

package/dist/esm/v2/{OrSorting-b1eb1e6b.js → OrSorting-13b55692.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, toRef, computed } from 'vue-demi';
-import { _ as __vue_component__$1 } from './OrMenu-3c625d5e.js';
-import './OrPopover-5564b96e.js';
+import { _ as __vue_component__$1 } from './OrMenu-8c939b09.js';
+import './OrPopover-325afb44.js';
 import { _ as __vue_component__$2 } from './OrMenuItem-d204cbc7.js';
 import { _ as __vue_component__$3 } from './OrButton-1b005dae.js';
 import './OrButton.vue_rollup-plugin-vue_script-b4424640.js';

package/dist/esm/v2/{OrTab-86701135.js → OrTab-c88df1ef.js}

@@ -12,18 +12,18 @@ const Tab = [
 'typography-body-2-bold',
 // Theme
 '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-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-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 (hover)
-'hover:md:theme-foreground-default', 'dark:hover:md:theme-foreground-default-dark',
-// Theme (hover, invalid)
+// Theme (invalid/hover)
 'hover:invalid:md:theme-foreground-error-hover', 'dark:hover:invalid:md:theme-foreground-error-hover-dark',
-// Theme (active)
-'active:theme-foreground-default', 'dark:active:theme-foreground-default-dark', 'active:theme-border-underline', 'active:enabled:theme-border-2-current', 'dark:active:enabled:theme-border-2-current-dark',
-// Theme (active, invalid)
-'active:invalid:theme-foreground-error', 'dark:active:invalid:theme-foreground-error-dark', 'active:invalid:theme-border-underline', 'active:enabled:invalid:theme-border-2-current', 'dark:active:enabled:invalid:theme-border-2-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-5a974172.js → OrTabs-a653bfc3.js}

@@ -6,9 +6,9 @@ import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { _ as __vue_component__$1 } from './OrIcon-0343b3d8.js';
 import { _ as __vue_component__$3 } from './OrMenuItem-d204cbc7.js';
-import { _ as __vue_component__$2 } from './OrMenu-3c625d5e.js';
-import './OrPopover-5564b96e.js';
-import { _ as __vue_component__$4 } from './OrTab-86701135.js';
+import { _ as __vue_component__$2 } from './OrMenu-8c939b09.js';
+import './OrPopover-325afb44.js';
+import { _ as __vue_component__$4 } from './OrTab-c88df1ef.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var TabsVariant;

package/dist/esm/v2/{OrTag-8d0a3b09.js → OrTag-42113101.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, watchPostEffect, unref } from 'vue-demi';
-import { _ as __vue_component__$1 } from './OrIconButton-b4370da7.js';
+import { _ as __vue_component__$1 } from './OrIconButton-a1f2f761.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var TagVariant;

package/dist/esm/v2/{OrTagInput-e5a18fb5.js → OrTagInput-a9212e30.js}

@@ -8,11 +8,11 @@ import '@onereach/styles/tailwind.config.json';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { _ as __vue_component__$1 } from './OrError-916e928e.js';
 import { _ as __vue_component__$2 } from './OrHint-1220face.js';
-import { _ as __vue_component__$3 } from './OrIconButton-b4370da7.js';
-import { _ as __vue_component__$4 } from './OrInputBox-c586fe8d.js';
-import './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';
+import { _ as __vue_component__$3 } from './OrIconButton-a1f2f761.js';
+import { _ as __vue_component__$4 } from './OrInputBox-2ba4ae49.js';
+import './OrInputBox.vue_rollup-plugin-vue_script-ba172f8b.js';
 import { _ as __vue_component__$5 } from './OrLabel-b465bc0b.js';
-import { _ as __vue_component__$6, T as TagsOverflow } from './OrTags-ad538883.js';
+import { _ as __vue_component__$6, T as TagsOverflow } from './OrTags-e1143c94.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrTags-ad538883.js → OrTags-e1143c94.js}

@@ -5,8 +5,8 @@ import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { _ as __vue_component__$1 } from './OrButton-1b005dae.js';
 import './OrButton.vue_rollup-plugin-vue_script-b4424640.js';
-import { _ as __vue_component__$2 } from './OrPopover-5564b96e.js';
-import { _ as __vue_component__$3 } from './OrTag-8d0a3b09.js';
+import { _ as __vue_component__$2 } from './OrPopover-325afb44.js';
+import { _ as __vue_component__$3 } from './OrTag-42113101.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var TagsOverflow;

package/dist/esm/v2/{OrTextarea-02b23f55.js → OrTextarea-5ea2ace8.js}

@@ -8,8 +8,8 @@ import '@onereach/styles/tailwind.config.json';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { _ as __vue_component__$1 } from './OrError-916e928e.js';
 import { _ as __vue_component__$2 } from './OrHint-1220face.js';
-import { _ as __vue_component__$3 } from './OrInputBox-c586fe8d.js';
-import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';
+import { _ as __vue_component__$3 } from './OrInputBox-2ba4ae49.js';
+import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-ba172f8b.js';
 import { _ as __vue_component__$4 } from './OrLabel-b465bc0b.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-465a0bc0.js → OrTimeFormat-082d2250.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import './OrDateTimePicker.vue_rollup-plugin-vue_script-39366844.js';
-import './OrDateTimePickerTimeSelect-65a897a8.js';
-import { D as DateTimePickerTimeFormat, a as formatTime } from './getTimePlaceholder-8f786f44.js';
+import './OrDateTimePicker.vue_rollup-plugin-vue_script-c690cb6a.js';
+import './OrDateTimePickerTimeSelect-b26f095c.js';
+import { D as DateTimePickerTimeFormat, a as formatTime } from './getTimePlaceholder-d235490f.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const TimeFormat = [

package/dist/esm/v2/{OrTimePicker-d7102c46.js → OrTimePicker-7fdff06c.js}

@@ -5,18 +5,18 @@ import './dom-aecadd9a.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import './OrDateTimePicker.vue_rollup-plugin-vue_script-39366844.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-65a897a8.js';
-import { D as DateTimePickerTimeFormat } from './getTimePlaceholder-8f786f44.js';
+import './OrDateTimePicker.vue_rollup-plugin-vue_script-c690cb6a.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-b26f095c.js';
+import { D as DateTimePickerTimeFormat } from './getTimePlaceholder-d235490f.js';
 import { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 import { _ as __vue_component__$6 } from './OrError-916e928e.js';
 import { _ as __vue_component__$7 } from './OrHint-1220face.js';
-import { _ as __vue_component__$9 } from './OrIconButton-b4370da7.js';
+import { _ as __vue_component__$9 } from './OrIconButton-a1f2f761.js';
 import { _ as __vue_component__$8 } from './OrIcon-0343b3d8.js';
-import { _ as __vue_component__$a } from './OrInputBox-c586fe8d.js';
-import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';
+import { _ as __vue_component__$a } from './OrInputBox-2ba4ae49.js';
+import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-ba172f8b.js';
 import { _ as __vue_component__$b } from './OrLabel-b465bc0b.js';
-import { _ as __vue_component__$c } from './OrPopover-5564b96e.js';
+import { _ as __vue_component__$c } from './OrPopover-325afb44.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const TimePicker = [