@onereach/ui-components 8.1.0 → 8.1.1-beta.3637.0

package/dist/bundled/v3/{useFocusTrap-aa5b17f6.js → useFocusTrap-5ec18c69.js}

@@ -1,6 +1,6 @@
-import { l as unrefElement } from './index-c5cda763.js';
+import { l as unrefElement } from './index-ba131271.js';
 import { ref, watch } from 'vue-demi';
-import { d as tryOnScopeDispose } from './index-6cbf1493.js';
+import { e as tryOnScopeDispose } from './index-8d86c3d5.js';
 
 /*!
 * tabbable 6.2.0

package/dist/esm/v2/{OrCardCollection-4f935beb.js → OrCardCollection-4f58feec.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, ref, watch } from 'vue-demi';
-import { _ as __vue_component__$2 } from './OrIconButton-29a22ef8.js';
-import { _ as __vue_component__$4 } from './OrSearch-de426be1.js';
+import { _ as __vue_component__$2 } from './OrIconButton-2db42d48.js';
+import { _ as __vue_component__$4 } from './OrSearch-be3a4cba.js';
 import './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';
 import { _ as __vue_component__$3 } from './OrSorting-e6ce767f.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/esm/v2/{OrCode-f3dafa98.js → OrCode-46aecdc3.js}

@@ -10,8 +10,8 @@ import { basicSetup } from 'codemirror';
 import { keymap, EditorView } from '@codemirror/view';
 import { indentWithTab } from '@codemirror/commands';
 import { Compartment, EditorState } from '@codemirror/state';
-import { _ as __vue_component__$7 } from './OrIconButton-29a22ef8.js';
-import { _ as __vue_component__$6 } from './OrModal-56ca48ea.js';
+import { _ as __vue_component__$7 } from './OrIconButton-2db42d48.js';
+import { _ as __vue_component__$6 } from './OrModal-edb71805.js';
 import { _ as __vue_component__$2 } from './OrError-916e928e.js';
 import { _ as __vue_component__$3 } from './OrHint-1220face.js';
 import { _ as __vue_component__$4 } from './OrInputBox-c586fe8d.js';

package/dist/esm/v2/{OrConfirm-839d062b.js → OrConfirm-3a814917.js}

@@ -6,7 +6,7 @@ import { u as usePopoverState } from './usePopoverState-b92c698b.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { _ as __vue_component__$2, a as ButtonColor } from './OrButton-78336f88.js';
-import { _ as __vue_component__$3 } from './OrInput-7ebbe4f7.js';
+import { _ as __vue_component__$3 } from './OrInput-1d972fe9.js';
 import { _ as __vue_component__$1 } from './OrOverlay-868d1120.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrDateFormat-f93befcf.js → OrDateFormat-056b8678.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import './OrDateTimePicker.vue_rollup-plugin-vue_script-079e9ca8.js';
-import './OrDateTimePickerTimeSelect-ef6deb1f.js';
+import './OrDateTimePicker.vue_rollup-plugin-vue_script-0c83ece6.js';
+import './OrDateTimePickerTimeSelect-fa1826f6.js';
 import { f as formatDate } from './getTimePlaceholder-8f786f44.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrDatePicker-f8184317.js → OrDatePicker-00c91208.js}

@@ -5,13 +5,13 @@ 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-079e9ca8.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 } from './OrDateTimePickerTimeSelect-ef6deb1f.js';
+import './OrDateTimePicker.vue_rollup-plugin-vue_script-0c83ece6.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 } from './OrDateTimePickerTimeSelect-fa1826f6.js';
 import './getTimePlaceholder-8f786f44.js';
 import { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 import { _ as __vue_component__$7 } from './OrError-916e928e.js';
 import { _ as __vue_component__$8 } from './OrHint-1220face.js';
-import { _ as __vue_component__$a } from './OrIconButton-29a22ef8.js';
+import { _ as __vue_component__$a } from './OrIconButton-2db42d48.js';
 import { _ as __vue_component__$9 } from './OrIcon-0343b3d8.js';
 import { _ as __vue_component__$b } from './OrInputBox-c586fe8d.js';
 import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';

package/dist/esm/v2/{OrDateRangePicker-4cbbc104.js → OrDateRangePicker-6ed80a50.js}

@@ -5,14 +5,14 @@ import './dom-aecadd9a.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import { u as useResponsive } from './useResponsive-5c8291da.js';
 import '@onereach/styles/tailwind.config.json';
-import './OrDateTimePicker.vue_rollup-plugin-vue_script-079e9ca8.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 } from './OrDateTimePickerTimeSelect-ef6deb1f.js';
+import './OrDateTimePicker.vue_rollup-plugin-vue_script-0c83ece6.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 } from './OrDateTimePickerTimeSelect-fa1826f6.js';
 import './getTimePlaceholder-8f786f44.js';
 import { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 import { g as getNextMonthDate } from './getNextMonthDate-00c47169.js';
 import { _ as __vue_component__$7 } from './OrError-916e928e.js';
 import { _ as __vue_component__$8 } from './OrHint-1220face.js';
-import { _ as __vue_component__$a } from './OrIconButton-29a22ef8.js';
+import { _ as __vue_component__$a } from './OrIconButton-2db42d48.js';
 import { _ as __vue_component__$9 } from './OrIcon-0343b3d8.js';
 import { _ as __vue_component__$b } from './OrInputBox-c586fe8d.js';
 import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';

package/dist/esm/v2/{OrDateTimeFormat-073ab1fa.js → OrDateTimeFormat-13b41ebc.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import './OrDateTimePicker.vue_rollup-plugin-vue_script-079e9ca8.js';
-import './OrDateTimePickerTimeSelect-ef6deb1f.js';
+import './OrDateTimePicker.vue_rollup-plugin-vue_script-0c83ece6.js';
+import './OrDateTimePickerTimeSelect-fa1826f6.js';
 import { D as DateTimePickerTimeFormat, f as formatDate, a as formatTime } from './getTimePlaceholder-8f786f44.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrDateTimePicker-a63a9b17.js → OrDateTimePicker-a3a52b7a.js}

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

package/dist/esm/v2/{OrDateTimePicker.vue_rollup-plugin-vue_script-079e9ca8.js → OrDateTimePicker.vue_rollup-plugin-vue_script-0c83ece6.js}

@@ -7,13 +7,13 @@ import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { _ as __vue_component__$8 } from './OrError-916e928e.js';
 import { _ as __vue_component__$9 } from './OrHint-1220face.js';
-import { _ as __vue_component__$b } from './OrIconButton-29a22ef8.js';
+import { _ as __vue_component__$b } from './OrIconButton-2db42d48.js';
 import { _ as __vue_component__$a } from './OrIcon-0343b3d8.js';
 import { _ as __vue_component__$c } from './OrInputBox-c586fe8d.js';
 import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';
 import { _ as __vue_component__$d } from './OrLabel-b465bc0b.js';
 import { _ as __vue_component__$e } from './OrPopover-2ced765c.js';
-import { _ as __vue_component__, a as __vue_component__$1, b as __vue_component__$2, c as __vue_component__$3, d as __vue_component__$4, e as __vue_component__$5, f as __vue_component__$6, g as __vue_component__$7 } from './OrDateTimePickerTimeSelect-ef6deb1f.js';
+import { _ as __vue_component__, a as __vue_component__$1, b as __vue_component__$2, c as __vue_component__$3, d as __vue_component__$4, e as __vue_component__$5, f as __vue_component__$6, g as __vue_component__$7 } from './OrDateTimePickerTimeSelect-fa1826f6.js';
 import { D as DateTimePickerTimeFormat } from './getTimePlaceholder-8f786f44.js';
 import { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 

package/dist/esm/v2/{OrDateTimePickerTimeSelect-ef6deb1f.js → OrDateTimePickerTimeSelect-fa1826f6.js}

@@ -8,7 +8,7 @@ import { g as getDatePlaceholder, f as formatDate, D as DateTimePickerTimeFormat
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 import { _ as __vue_component__$8 } from './OrButton-78336f88.js';
 import { _ as __vue_component__$9 } from './OrLabel-b465bc0b.js';
-import { _ as __vue_component__$b } from './OrIconButton-29a22ef8.js';
+import { _ as __vue_component__$b } from './OrIconButton-2db42d48.js';
 import { _ as __vue_component__$a } from './OrIcon-0343b3d8.js';
 import { _ as __vue_component__$d } from './OrMenuItem-f377dc2d.js';
 import { _ as __vue_component__$c } from './OrMenu-3d8e70c1.js';

package/dist/esm/v2/{OrIconButton-29a22ef8.js → OrIconButton-2db42d48.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, toRefs, computed, isVue3 } from 'vue-demi';
 import { _ as __vue_component__$1, I as IconSize, a as IconVariant } from './OrIcon-0343b3d8.js';
-import { _ as __vue_component__$2 } from './OrTooltip-b01c6ab1.js';
+import { _ as __vue_component__$2 } from './OrTooltip-c54fc57e.js';
 import './OrPopover-2ced765c.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrInlineInput-fe9b2fa6.js → OrInlineInput-dc2c598a.js}

@@ -8,7 +8,7 @@ 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-29a22ef8.js';
+import { _ as __vue_component__$3 } from './OrIconButton-2db42d48.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';

package/dist/esm/v2/{OrInlineTextarea-7a6ad8b5.js → OrInlineTextarea-def8d633.js}

@@ -8,7 +8,7 @@ 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-29a22ef8.js';
+import { _ as __vue_component__$3 } from './OrIconButton-2db42d48.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';

package/dist/esm/v2/{OrInput-7ebbe4f7.js → OrInput-1d972fe9.js}

@@ -8,7 +8,7 @@ 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__$4 } from './OrIconButton-29a22ef8.js';
+import { _ as __vue_component__$4 } from './OrIconButton-2db42d48.js';
 import { _ as __vue_component__$3 } from './OrIcon-0343b3d8.js';
 import { _ as __vue_component__$5 } from './OrInputBox-c586fe8d.js';
 import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';

package/dist/esm/v2/{OrList-7678b975.js → OrList-eb8cc568.js}

@@ -6,7 +6,7 @@ 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 './OrIconButton-29a22ef8.js';
+import { _ as __vue_component__$1 } from './OrIconButton-2db42d48.js';
 import { _ as __vue_component__$2 } from './OrLabel-b465bc0b.js';
 import { _ as __vue_component__$3 } from './OrListItem-534e8e9d.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/esm/v2/{OrModal-56ca48ea.js → OrModal-edb71805.js}

@@ -6,7 +6,7 @@ import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { _ as __vue_component__$5 } from './OrOverlay-868d1120.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-import { _ as __vue_component__$4 } from './OrIconButton-29a22ef8.js';
+import { _ as __vue_component__$4 } from './OrIconButton-2db42d48.js';
 
 const ModalContent = [
 // Overflow

package/dist/esm/v2/{OrNotification-d2b752b9.js → OrNotification-40f7f38f.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { _ as __vue_component__$2 } from './OrIconButton-29a22ef8.js';
+import { _ as __vue_component__$2 } from './OrIconButton-2db42d48.js';
 import { _ as __vue_component__$1 } from './OrIcon-0343b3d8.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/OrRangeSlider-b843752c.js

@@ -0,0 +1,341 @@
+import { useElementBounding, useDraggable, clamp } from '@vueuse/core';
+import { defineComponent, ref, computed, toRef } 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-c54fc57e.js';
+import './OrPopover-2ced765c.js';
+import { a as SliderOrientation, S as SliderColor } from './OrSlider.vue_rollup-plugin-vue_script-dbe5af31.js';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+const RangeSlider = [
+// Interactivity
+'interactivity-default'];
+const RangeSliderOrientations = {
+  [SliderOrientation.Horizontal]: [
+  // Layout
+  'layout-column',
+  // Box
+  'w-full'],
+  [SliderOrientation.Vertical]: [
+  // Layout
+  'layout-row',
+  // Box
+  'h-full']
+};
+const RangeSliderRail = [
+// Interactivity
+'interactivity-click',
+// Shape
+'rounded-full',
+// Theme
+'theme-background-disabled', 'dark:theme-background-disabled-dark'];
+const RangeSliderRailOrientations = {
+  [SliderOrientation.Horizontal]: [
+  // Layout
+  'layout-row',
+  // Box
+  'w-full', 'h-xs', 'mx-none', 'my-md+'],
+  [SliderOrientation.Vertical]: [
+  // Layout
+  'layout-column-reverse items-center', 'w-xs', 'h-full', 'mx-md+', 'my-none']
+};
+const RangeSliderOffset = [];
+const RangeSliderOffsetOrientations = {
+  [SliderOrientation.Horizontal]: [],
+  [SliderOrientation.Vertical]: []
+};
+const RangeSliderTrack = [
+// Box
+'w-full', 'h-full',
+// Shape
+'rounded-full'];
+const RangeSliderTrackColors = {
+  [SliderColor.Primary]: [
+  // Theme
+  'theme-background-primary', 'dark:theme-background-primary-dark'],
+  [SliderColor.Secondary]: [
+  // Theme
+  'theme-background-secondary', 'dark:theme-background-secondary-dark']
+};
+const RangeSliderThumb = [
+// Layout
+'shrink-0',
+// Box
+'w-[20px]', 'h-[20px]', '-mx-[10px]', '-my-[10px]',
+// Shape
+'rounded-full',
+// Theme
+'theme-background-base', 'dark:theme-background-base-dark'];
+const RangeSliderThumbColors = {
+  [SliderColor.Primary]: [
+  // Theme
+  '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-10-primary', 'dark:active:theme-outline-10-primary-dark'],
+  [SliderColor.Secondary]: [
+  // Theme
+  '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-10-secondary', 'dark:active:theme-outline-10-secondary-dark']
+};
+const RangeSliderLabel = [];
+const RangeSliderLabelOrientations = {
+  [SliderOrientation.Horizontal]: [
+  // Layout
+  'layout-row',
+  // Box
+  'w-full'],
+  [SliderOrientation.Vertical]: [
+  // Layout
+  'layout-column-reverse items-center',
+  // Box
+  'h-full']
+};
+const RangeSliderLabelMark = [
+// Typography
+'typography-caption-regular',
+// Theme
+'theme-foreground-default', 'dark:theme-foreground-default-dark'];
+
+var script = defineComponent({
+  components: {
+    OrTooltip: __vue_component__$1
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Object,
+      default: undefined
+    },
+    minValue: {
+      type: Number,
+      default: 0
+    },
+    maxValue: {
+      type: Number,
+      default: 100
+    },
+    steps: {
+      type: Number,
+      default: undefined
+    },
+    color: {
+      type: String,
+      default: SliderColor.Primary
+    },
+    orientation: {
+      type: String,
+      default: SliderOrientation.Horizontal
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue'],
+  expose: ['root'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    const rail = ref();
+    const thumbFrom = ref();
+    const thumbTo = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-range-slider-v3', ...RangeSlider, ...RangeSliderOrientations[props.orientation]]);
+    const railStyles = computed(() => [...RangeSliderRail, ...RangeSliderRailOrientations[props.orientation]]);
+    const offsetStyles = computed(() => [...RangeSliderOffset, ...RangeSliderOffsetOrientations[props.orientation]]);
+    const offsetComputedStyles = computed(() => ({
+      [props.orientation === SliderOrientation.Horizontal ? 'width' : 'height']: `${internalModelValueFrom.value * 100}%`
+    }));
+    const trackStyles = computed(() => [...RangeSliderTrack, ...RangeSliderTrackColors[props.color]]);
+    const trackComputedStyles = computed(() => ({
+      [props.orientation === SliderOrientation.Horizontal ? 'width' : 'height']: `${(internalModelValueTo.value - internalModelValueFrom.value) * 100}%`
+    }));
+    const thumbStyles = computed(() => [...RangeSliderThumb, ...RangeSliderThumbColors[props.color]]);
+    const labelStyles = computed(() => [...RangeSliderLabel, ...RangeSliderLabelOrientations[props.orientation]]);
+    const labelMarkStyles = computed(() => [...RangeSliderLabelMark]);
+    // State
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const internalModelValueFrom = computed({
+      get: () => {
+        if (!proxyModelValue.value) {
+          return props.minValue;
+        }
+        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 internalModelValueTo = computed({
+      get: () => {
+        if (!proxyModelValue.value) {
+          return props.maxValue;
+        }
+        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 railBoundingBox = useElementBounding(rail);
+    // Handlers
+    function onDragFrom(position, event) {
+      if (props.disabled) {
+        return;
+      }
+      const totalWidth = railBoundingBox.width.value;
+      const totalHeight = railBoundingBox.height.value;
+      internalModelValueFrom.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, 0, internalModelValueTo.value * totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, internalModelValueTo.value * totalHeight) / totalHeight;
+    }
+    function onDragTo(position, event) {
+      if (props.disabled) {
+        return;
+      }
+      const totalWidth = railBoundingBox.width.value;
+      const totalHeight = railBoundingBox.height.value;
+      internalModelValueTo.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, internalModelValueFrom.value * totalWidth, totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), internalModelValueFrom.value * totalHeight, totalHeight) / totalHeight;
+    }
+    // Effects
+    const {
+      isDragging: isDraggingFrom
+    } = useDraggable(rail, {
+      handle: thumbFrom,
+      onStart: onDragFrom,
+      onMove: onDragFrom,
+      onEnd: onDragFrom
+    });
+    const {
+      isDragging: isDraggingTo
+    } = useDraggable(rail, {
+      handle: thumbTo,
+      onStart: onDragTo,
+      onMove: onDragTo,
+      onEnd: onDragTo
+    });
+    return {
+      root,
+      rail,
+      thumbFrom,
+      thumbTo,
+      rootStyles,
+      railStyles,
+      offsetStyles,
+      offsetComputedStyles,
+      trackStyles,
+      trackComputedStyles,
+      thumbStyles,
+      labelStyles,
+      labelMarkStyles,
+      proxyModelValue,
+      internalModelValueFrom,
+      internalModelValueTo,
+      isDraggingFrom,
+      isDraggingTo
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles,
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }, [_c('div', {
+    ref: "rail",
+    class: _vm.railStyles,
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }, [_c('div', {
+    class: _vm.offsetStyles,
+    style: _vm.offsetComputedStyles,
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }), _vm._v(" "), _c('OrTooltip', {
+    class: ['relative', 'z-1'],
+    attrs: {
+      "is-open": _vm.isDraggingFrom,
+      "content": _vm.proxyModelValue && String(_vm.proxyModelValue[0]),
+      "placement": _vm.orientation === 'horizontal' ? 'top' : 'right',
+      "offset": 8,
+      "external-control": true
+    }
+  }, [_c('div', {
+    ref: "thumbFrom",
+    class: _vm.thumbStyles,
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  })]), _vm._v(" "), _c('div', {
+    class: _vm.trackStyles,
+    style: _vm.trackComputedStyles,
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }), _vm._v(" "), _c('OrTooltip', {
+    class: ['relative', 'z-1'],
+    attrs: {
+      "is-open": _vm.isDraggingTo,
+      "content": _vm.proxyModelValue && String(_vm.proxyModelValue[1]),
+      "placement": _vm.orientation === 'horizontal' ? 'top' : 'right',
+      "offset": 8,
+      "external-control": true
+    }
+  }, [_c('div', {
+    ref: "thumbTo",
+    class: _vm.thumbStyles,
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  })])], 1), _vm._v(" "), _c('div', {
+    class: _vm.labelStyles
+  }, [_c('div', {
+    class: _vm.labelMarkStyles
+  }, [_vm._v("\n      " + _vm._s(_vm.minValue) + "\n    ")]), _vm._v(" "), _c('div', {
+    class: ['grow']
+  }), _vm._v(" "), _c('div', {
+    class: _vm.labelMarkStyles
+  }, [_vm._v("\n      " + _vm._s(_vm.maxValue) + "\n    ")])])]);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { __vue_component__ as _ };

package/dist/esm/v2/{OrResizeablePanel-8627b248.js → OrResizeablePanel-af5459a9.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-29a22ef8.js';
+import { _ as __vue_component__$1 } from './OrIconButton-2db42d48.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var ResizeablePanelPadding;

package/dist/esm/v2/{OrRichTextEditor-f973f577.js → OrRichTextEditor-2db5b205.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-29a22ef8.js';
+import { _ as __vue_component__$1 } from './OrIconButton-2db42d48.js';
 import { _ as __vue_component__$2 } from './OrLabel-b465bc0b.js';
 import { _ as __vue_component__$4 } from './OrMenu-3d8e70c1.js';
 import { _ as __vue_component__$8 } from './OrPopover-2ced765c.js';
 import { _ as __vue_component__$3 } from './OrMenuItem-f377dc2d.js';
-import { _ as __vue_component__$5 } from './OrModal-56ca48ea.js';
-import { _ as __vue_component__$6 } from './OrInput-7ebbe4f7.js';
+import { _ as __vue_component__$5 } from './OrModal-edb71805.js';
+import { _ as __vue_component__$6 } from './OrInput-1d972fe9.js';
 import { _ as __vue_component__$7 } from './OrButton-78336f88.js';
 import _ from 'lodash';
 import { Node, Editor, mergeAttributes } from '@tiptap/core';

package/dist/esm/v2/{OrSearch-de426be1.js → OrSearch-be3a4cba.js}

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

package/dist/esm/v2/{OrSelect-3a3e9081.js → OrSelect-a04bfc21.js}

@@ -10,16 +10,16 @@ import { _ as __vue_component__$3 } from './OrCheckbox-6177b03e.js';
 import { _ as __vue_component__$4 } from './OrError-916e928e.js';
 import { _ as __vue_component__$5 } from './OrExpansionPanel-ed96bdde.js';
 import { _ as __vue_component__$6 } from './OrHint-1220face.js';
-import { _ as __vue_component__$8 } from './OrIconButton-29a22ef8.js';
+import { _ as __vue_component__$8 } from './OrIconButton-2db42d48.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-7ebbe4f7.js';
+import { _ as __vue_component__$9 } from './OrInput-1d972fe9.js';
 import { _ as __vue_component__$b } from './OrLabel-b465bc0b.js';
 import { _ as __vue_component__$c } from './OrMenuItem-f377dc2d.js';
 import { _ as __vue_component__$d } from './OrPopover-2ced765c.js';
-import { T as TagsOverflow } from './OrTags-8609e9b4.js';
-import { _ as __vue_component__$1 } from './OrSelectMultipleControl-2888ac2d.js';
+import { T as TagsOverflow } from './OrTags-ae6da8ac.js';
+import { _ as __vue_component__$1 } from './OrSelectMultipleControl-fcc98cac.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-2888ac2d.js → OrSelectMultipleControl-fcc98cac.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-8609e9b4.js';
+import { _ as __vue_component__$3, T as TagsOverflow } from './OrTags-ae6da8ac.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-9f429d6b.js → OrSidebar-cda262d8.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-8627b248.js';
+import { R as ResizeablePanelPadding, _ as __vue_component__$1 } from './OrResizeablePanel-af5459a9.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var SidebarPlacement;