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

package/dist/bundled/v3/{OrPopover.vue_vue_type_script_lang-8422f18e.js → OrPopover.vue_vue_type_script_lang-dd8b8839.js}

@@ -1,14 +1,14 @@
 import { o as offset, s as shift, f as flip, h as hide, b as size, a as autoUpdate } from './floating-ui.dom-d9ef0d1f.js';
-import { o as onClickOutside } from './index-c5cda763.js';
+import { o as onClickOutside } from './index-ba131271.js';
 import { defineComponent, ref, computed, toRefs, toRef } from 'vue-demi';
-import { useFloating } from './components/OrPopoverV3/hooks/useFloating.js';
 import { PopoverVariant, PopoverPlacement } from './components/OrPopoverV3/props.js';
 import { Popover, PopoverBody, PopoverBodyPlacements } from './components/OrPopoverV3/styles.js';
+import { useFloating } from './components/OrPopoverV3/hooks/useFloating.js';
 import './components/OrBottomSheetV3/OrBottomSheet.js';
-import { s as script$1 } from './OrBottomSheet.vue_vue_type_script_lang-39b7912c.js';
+import { s as script$1 } from './OrBottomSheet.vue_vue_type_script_lang-3a69daf9.js';
 import './components/OrTeleportV3/OrTeleport.js';
 import useResponsive from './hooks/useResponsive/useResponsive.js';
-import { s as script$2 } from './OrTeleport.vue3.vue_vue_type_script_lang-dfc6301c.js';
+import { s as script$2 } from './OrTeleport.vue3.vue_vue_type_script_lang-a6ce162e.js';
 import { usePopoverState } from './hooks/usePopoverState.js';
 import { useElevation } from './hooks/useElevation.js';
 
@@ -19,11 +19,6 @@ var script = defineComponent({
   },
   inheritAttrs: false,
   props: {
-    // @workaround for Vue 2
-    customStyles: {
-      type: Array,
-      default: () => []
-    },
     isOpen: {
       type: Boolean,
       default: false
@@ -52,6 +47,10 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
+    customStyles: {
+      type: Array,
+      default: () => []
+    },
     disableDefaultStyles: {
       type: Boolean,
       default: false
@@ -75,7 +74,7 @@ var script = defineComponent({
       fullWidth
     } = toRefs(props);
     // Styles
-    const rootStyles = computed(() => ['or-popover-v3', ...Popover, ...('class' in context.attrs ? [] : props.customStyles)]);
+    const rootStyles = computed(() => ['or-popover-v3', ...Popover, ...props.customStyles]);
     const bodyStyles = computed(() => [...PopoverBody, ...PopoverBodyPlacements[placement.value]]);
     // State
     const {

package/dist/bundled/v3/{OrProgress.vue_vue_type_script_lang-be01a967.js → OrProgress.vue_vue_type_script_lang-21e31192.js}

@@ -1,4 +1,4 @@
-import { d as useElementBounding } from './index-c5cda763.js';
+import { d as useElementBounding } from './index-ba131271.js';
 import { r as round_1 } from './round-567ede34.js';
 import { defineComponent, ref, useSlots, computed } from 'vue-demi';
 import { ProgressType, ProgressColor } from './components/OrProgressV3/props.js';

package/dist/bundled/v3/OrRangeSlider.vue_vue_type_script_lang-d1cb3766.js

@@ -0,0 +1,152 @@
+import { d as useElementBounding, e as useDraggable } from './index-ba131271.js';
+import { defineComponent, ref, computed, toRef } from 'vue-demi';
+import { RangeSlider, RangeSliderOrientations, RangeSliderRail, RangeSliderRailOrientations, RangeSliderOffset, RangeSliderOffsetOrientations, RangeSliderTrack, RangeSliderTrackColors, RangeSliderThumb, RangeSliderThumbColors, RangeSliderLabel, RangeSliderLabelOrientations, RangeSliderLabelMark } from './components/OrRangeSliderV3/styles.js';
+import './components/OrTooltipV3/OrTooltip.js';
+import { s as script$1 } from './OrTooltip.vue_vue_type_script_lang-96ee1de9.js';
+import { SliderColor, SliderOrientation } from './components/OrSliderV3/props.js';
+import { useProxyModelValue } from './hooks/useProxyModelValue.js';
+import { c as clamp } from './index-8d86c3d5.js';
+
+var script = defineComponent({
+  components: {
+    OrTooltip: script$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
+    };
+  }
+});
+
+export { script as s };

package/dist/bundled/v3/{OrResizeablePanel.vue_vue_type_script_lang-dcba3a56.js → OrResizeablePanel.vue_vue_type_script_lang-62c94016.js}

@@ -1,9 +1,9 @@
-import { g as useDraggable } from './index-c5cda763.js';
+import { e as useDraggable } from './index-ba131271.js';
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { ResizeablePanelPadding, ResizeablePanelPlacement } from './components/OrResizeablePanelV3/props.js';
 import { ResizeablePanel, ResizeablePanelPlacements, ResizeablePanelContent, ResizeablePanelContentPaddings, ResizeablePanelContentPlaceholder, ResizeablePanelContentPlaceholderPlacements, ResizeablePanelResizeBar, ResizeablePanelResizeBarPlacements, ResizeablePanelCollapseButtonContainer, ResizeablePanelCollapseButtonContainerPlacements, ResizeablePanelToolbar, ResizeablePanelToolbarPlacements } from './components/OrResizeablePanelV3/styles.js';
 import './components/OrIconButtonV3/OrIconButton.js';
-import { s as script$1 } from './OrIconButton.vue_vue_type_script_lang-58170753.js';
+import { s as script$1 } from './OrIconButton.vue_vue_type_script_lang-6960bd77.js';
 import { usePopoverState } from './hooks/usePopoverState.js';
 
 var script = defineComponent({

package/dist/bundled/v3/{OrRichTextEditor.vue_vue_type_script_lang-f88bde64.js → OrRichTextEditor.vue_vue_type_script_lang-725c9652.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue-demi';
-import { u as useFocusTrap } from './useFocusTrap-aa5b17f6.js';
-import { e as useResizeObserver, o as onClickOutside } from './index-c5cda763.js';
+import { u as useFocusTrap } from './useFocusTrap-5ec18c69.js';
+import { f as useResizeObserver, o as onClickOutside } from './index-ba131271.js';
 import { B as Blockquote, a as Bold, b as BulletList, C as CodeBlock, H as HardBreak, I as Italic, L as ListItem, O as OrderedList, P as Paragraph, S as Strike, s as serialize, d as deserialize, U as Underline, c as Link, e as Highlight } from './markdown-7d2cd3a5.js';
 import { EditorContainer, ToolbarContainer, Toolbar, ToolbarButtonFocused, ToolbarButton, EditorInput } from './components/OrRichTextEditorV3/styles.js';
 import { c as commonjsGlobal } from './_commonjsHelpers-1789f0cf.js';
@@ -16,14 +16,14 @@ import './components/OrModalV3/OrModal.js';
 import './components/OrInputV3/OrInput.js';
 import './components/OrButtonV3/OrButton.js';
 import './components/OrPopoverV3/OrPopover.js';
-import { s as script$1 } from './OrIconButton.vue_vue_type_script_lang-58170753.js';
+import { s as script$1 } from './OrIconButton.vue_vue_type_script_lang-6960bd77.js';
 import { s as script$2 } from './OrLabel.vue_vue_type_script_lang-e2bcff17.js';
 import { s as script$3 } from './OrMenuItem.vue_vue_type_script_lang-11569833.js';
-import { s as script$4 } from './OrMenu.vue_vue_type_script_lang-74df3ea9.js';
-import { s as script$5 } from './OrModal.vue_vue_type_script_lang-4f268651.js';
-import { s as script$6 } from './OrInput.vue_vue_type_script_lang-af907c8c.js';
-import { s as script$7 } from './OrButton.vue_vue_type_script_lang-0f7bda53.js';
-import { s as script$8 } from './OrPopover.vue_vue_type_script_lang-8422f18e.js';
+import { s as script$4 } from './OrMenu.vue_vue_type_script_lang-b109843f.js';
+import { s as script$5 } from './OrModal.vue_vue_type_script_lang-9283917c.js';
+import { s as script$6 } from './OrInput.vue_vue_type_script_lang-d4df6a87.js';
+import { s as script$7 } from './OrButton.vue_vue_type_script_lang-2ec4da42.js';
+import { s as script$8 } from './OrPopover.vue_vue_type_script_lang-dd8b8839.js';
 
 var lodashExports = {};
 var lodash = {

package/dist/bundled/v3/{OrSearch.vue_vue_type_script_lang-176bb9fa.js → OrSearch.vue_vue_type_script_lang-7e798a79.js}

@@ -1,11 +1,11 @@
 import { defineComponent, ref, computed, reactive, watch } from 'vue-demi';
 import './components/OrInputV3/OrInput.js';
-import { s as script$1 } from './OrInput.vue_vue_type_script_lang-af907c8c.js';
+import { s as script$1 } from './OrInput.vue_vue_type_script_lang-d4df6a87.js';
 import { InputBoxSize } from './components/OrInputBoxV3/props.js';
 import { useIdAttribute } from './hooks/useIdAttribute.js';
 import { useControlAttributes } from './hooks/useControlAttributes.js';
 import { useValidationAttributes } from './hooks/useValidationAttributes.js';
-import { a as watchDebounced } from './index-6cbf1493.js';
+import { a as watchDebounced } from './index-8d86c3d5.js';
 
 var script = defineComponent({
   name: 'OrSearch',

package/dist/bundled/v3/{OrSearch.vue_vue_type_script_lang-89527d71.js → OrSearch.vue_vue_type_script_lang-d1f7c334.js}

@@ -3,7 +3,7 @@ import './components/OrInput/OrInput.js';
 import { s as script$1 } from './OrInput.vue_vue_type_script_lang-515ff78a.js';
 import './components/OrIconButtonV2/OrIconButton.js';
 import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-f6bf7dda.js';
-import { a as watchDebounced } from './index-6cbf1493.js';
+import { a as watchDebounced } from './index-8d86c3d5.js';
 import { BUTTON_SIZE } from './components/OrButtonV2/constants.js';
 
 var script = defineComponent({

package/dist/bundled/v3/{OrSelect.vue_vue_type_script_lang-a4d17559.js → OrSelect.vue_vue_type_script_lang-95e88b3b.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref } from 'vue-demi';
-import { o as onClickOutside } from './index-c5cda763.js';
+import { o as onClickOutside } from './index-ba131271.js';
 import { isEmpty } from './utils/isEmpty.js';
 import { _ as _baseAssignValue } from './_baseAssignValue-2250dbc9.js';
 import { k as keys_1, _ as _Stack, a as _baseIsEqual, i as isArguments_1 } from './_baseIsEqual-fe2002b6.js';

package/dist/bundled/v3/{OrSelect.vue_vue_type_script_lang-58ed2384.js → OrSelect.vue_vue_type_script_lang-e018f231.js}

@@ -1,17 +1,17 @@
 import { defineComponent, ref, computed, toRefs, watch, getCurrentInstance, onMounted } from 'vue-demi';
 import { openBlock, createElementBlock, normalizeClass, renderSlot, withDirectives, normalizeStyle, vModelDynamic, resolveComponent, createVNode, createSlots, withCtx, createElementVNode, vShow, createBlock, createTextVNode, toDisplayString, createCommentVNode, Fragment } from 'vue';
 import { isEmptyValue } from './utils/isEmptyValue.js';
-import { f as useFocus } from './index-c5cda763.js';
+import { g as useFocus } from './index-ba131271.js';
 import { useProxyModelValue } from './hooks/useProxyModelValue.js';
 import './components/OrTagsV3/OrTags.js';
-import { s as script$5 } from './OrTags.vue_vue_type_script_lang-df64b42f.js';
+import { s as script$5 } from './OrTags.vue_vue_type_script_lang-5d0be4da.js';
 import { TagsOverflow } from './components/OrTagsV3/props.js';
 import { isEqualValue } from './utils/isEqualValue.js';
 import { Select, SelectControl, SelectSearchControl, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectDropdownItem, SelectNoSearchResults } from './components/OrSelectV3/styles.js';
 import './components/OrCheckboxV3/OrCheckbox.js';
 import './components/OrErrorV3/OrError.js';
 import './components/OrExpansionPanelV3/OrExpansionPanel.js';
-import { s as script$8 } from './OrExpansionPanel.vue_vue_type_script_lang-c16cf717.js';
+import { s as script$8 } from './OrExpansionPanel.vue_vue_type_script_lang-5369736c.js';
 import './components/OrHintV3/OrHint.js';
 import './components/OrIconV3/OrIcon.js';
 import './components/OrIconButtonV3/OrIconButton.js';
@@ -24,12 +24,12 @@ import { s as script$6 } from './OrCheckbox.vue_vue_type_script_lang-cdc466f7.js
 import { s as script$7 } from './OrError.vue_vue_type_script_lang-fcf91781.js';
 import { s as script$9 } from './OrHint.vue_vue_type_script_lang-0ab8b932.js';
 import { s as script$a } from './OrIcon.vue_vue_type_script_lang-db2e3f85.js';
-import { s as script$b } from './OrIconButton.vue_vue_type_script_lang-58170753.js';
-import { s as script$c } from './OrInput.vue_vue_type_script_lang-af907c8c.js';
+import { s as script$b } from './OrIconButton.vue_vue_type_script_lang-6960bd77.js';
+import { s as script$c } from './OrInput.vue_vue_type_script_lang-d4df6a87.js';
 import { s as script$d } from './OrInputBox.vue_vue_type_script_lang-989d5ee6.js';
 import { s as script$e } from './OrLabel.vue_vue_type_script_lang-e2bcff17.js';
 import { s as script$f } from './OrMenuItem.vue_vue_type_script_lang-11569833.js';
-import { s as script$g } from './OrPopover.vue_vue_type_script_lang-8422f18e.js';
+import { s as script$g } from './OrPopover.vue_vue_type_script_lang-dd8b8839.js';
 import { DropdownClose } from './directives/dropdown-close.js';
 import { DropdownOpen } from './directives/dropdown-open.js';
 import { InputBoxSize } from './components/OrInputBoxV3/props.js';
@@ -587,7 +587,7 @@ var script = defineComponent({
     const searchControlStyles = computed(() => [...SelectSearchControl]);
     const dropdownStyles = computed(() => {
       var _a;
-      return ['or-select-popover-v3', ...SelectDropdown, ...(((_a = popover.value) === null || _a === void 0 ? void 0 : _a.isFlipped) ? SelectDropdownFlipped : SelectDropdownDefault)];
+      return [...SelectDropdown, ...(((_a = popover.value) === null || _a === void 0 ? void 0 : _a.isFlipped) ? SelectDropdownFlipped : SelectDropdownDefault)];
     });
     const dropdownItemStyles = computed(() => [...SelectDropdownItem]);
     const noSearchResultsStyles = computed(() => [...SelectNoSearchResults]);

package/dist/bundled/v3/{OrSidebar.vue_vue_type_script_lang-f69f92ca.js → OrSidebar.vue_vue_type_script_lang-5cdae1e4.js}

@@ -1,4 +1,4 @@
-import { g as useDraggable } from './index-c5cda763.js';
+import { e as useDraggable } from './index-ba131271.js';
 import { defineComponent, ref } from 'vue-demi';
 import { OrSidebarSide } from './components/OrSidebar/constants.js';
 

package/dist/bundled/v3/{OrSidebar.vue_vue_type_script_lang-57ab330d.js → OrSidebar.vue_vue_type_script_lang-e9508a3c.js}

@@ -2,7 +2,7 @@ import { defineComponent, ref, computed, toRef } from 'vue-demi';
 import { SidebarPlacement } from './components/OrSidebarV3/props.js';
 import { Sidebar, SidebarHeader, SidebarHeaderPaddings, SidebarContent, SidebarContentPaddings, SidebarFooter, SidebarFooterPaddings } from './components/OrSidebarV3/styles.js';
 import './components/OrResizeablePanelV3/OrResizeablePanel.js';
-import { s as script$1 } from './OrResizeablePanel.vue_vue_type_script_lang-dcba3a56.js';
+import { s as script$1 } from './OrResizeablePanel.vue_vue_type_script_lang-62c94016.js';
 import { ResizeablePanelPadding } from './components/OrResizeablePanelV3/props.js';
 import { usePopoverState } from './hooks/usePopoverState.js';
 

package/dist/bundled/v3/OrSlider.vue_vue_type_script_lang-2d3658c0.js

@@ -0,0 +1,114 @@
+import { d as useElementBounding, e as useDraggable } from './index-ba131271.js';
+import { defineComponent, ref, computed, toRef } from 'vue-demi';
+import { SliderColor, SliderOrientation } from './components/OrSliderV3/props.js';
+import { Slider, SliderOrientations, SliderRail, SliderRailOrientations, SliderTrack, SliderTrackColors, SliderThumb, SliderThumbColors, SliderLabel, SliderLabelOrientations, SliderLabelMark } from './components/OrSliderV3/styles.js';
+import './components/OrTooltipV3/OrTooltip.js';
+import { c as clamp } from './index-8d86c3d5.js';
+import { s as script$1 } from './OrTooltip.vue_vue_type_script_lang-96ee1de9.js';
+import { useProxyModelValue } from './hooks/useProxyModelValue.js';
+
+var script = defineComponent({
+  components: {
+    OrTooltip: script$1
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Number,
+      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 thumb = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-slider-v3', ...Slider, ...SliderOrientations[props.orientation]]);
+    const railStyles = computed(() => [...SliderRail, ...SliderRailOrientations[props.orientation]]);
+    const trackStyles = computed(() => [...SliderTrack, ...SliderTrackColors[props.color]]);
+    const trackComputedStyles = computed(() => ({
+      [props.orientation === SliderOrientation.Horizontal ? 'width' : 'height']: `${internalModelValue.value * 100}%`
+    }));
+    const thumbStyles = computed(() => [...SliderThumb, ...SliderThumbColors[props.color]]);
+    const labelStyles = computed(() => [...SliderLabel, ...SliderLabelOrientations[props.orientation]]);
+    const labelMarkStyles = computed(() => [...SliderLabelMark]);
+    // State
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const internalModelValue = computed({
+      get: () => {
+        if (!proxyModelValue.value) {
+          return props.minValue;
+        }
+        return (proxyModelValue.value - props.minValue) / (props.maxValue - props.minValue);
+      },
+      set: value => {
+        proxyModelValue.value = Math.round(value * (props.maxValue - props.minValue) + props.minValue);
+      }
+    });
+    const railBoundingBox = useElementBounding(rail);
+    // Handlers
+    function onDrag(position, event) {
+      if (props.disabled) {
+        return;
+      }
+      const totalWidth = railBoundingBox.width.value;
+      const totalHeight = railBoundingBox.height.value;
+      internalModelValue.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, 0, totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, totalHeight) / totalHeight;
+    }
+    // Effects
+    const {
+      isDragging
+    } = useDraggable(rail, {
+      onStart: onDrag,
+      onMove: onDrag,
+      onEnd: onDrag
+    });
+    return {
+      root,
+      rail,
+      thumb,
+      rootStyles,
+      railStyles,
+      trackStyles,
+      trackComputedStyles,
+      thumbStyles,
+      labelStyles,
+      labelMarkStyles,
+      proxyModelValue,
+      internalModelValue,
+      isDragging
+    };
+  }
+});
+
+export { script as s };

package/dist/bundled/v3/{OrSlider.vue_vue_type_script_lang-207c0596.js → OrSlider.vue_vue_type_script_lang-777879e0.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref } from 'vue-demi';
-import { o as onClickOutside, g as useDraggable } from './index-c5cda763.js';
+import { o as onClickOutside, e as useDraggable } from './index-ba131271.js';
 import { f as addClass, h as removeClass } from './dom-cec392f3.js';
 import './components/OrIcon/OrIcon.js';
 import { s as script$1 } from './OrIcon.vue_vue_type_script_lang-f3cbff23.js';

package/dist/bundled/v3/{OrSorting.vue_vue_type_script_lang-786e3d6b.js → OrSorting.vue_vue_type_script_lang-27d19702.js}

@@ -1,11 +1,11 @@
 import { defineComponent, ref, toRef, computed } from 'vue-demi';
 import { SortingRoot, SortingLabel } from './components/OrSortingV3/styles.js';
 import './components/OrMenuV3/OrMenu.js';
-import { s as script$1 } from './OrMenu.vue_vue_type_script_lang-74df3ea9.js';
+import { s as script$1 } from './OrMenu.vue_vue_type_script_lang-b109843f.js';
 import './components/OrMenuItemV3/OrMenuItem.js';
 import { s as script$2 } from './OrMenuItem.vue_vue_type_script_lang-11569833.js';
 import './components/OrButtonV3/OrButton.js';
-import { s as script$3 } from './OrButton.vue_vue_type_script_lang-0f7bda53.js';
+import { s as script$3 } from './OrButton.vue_vue_type_script_lang-2ec4da42.js';
 import './components/OrIconV3/OrIcon.js';
 import { s as script$4 } from './OrIcon.vue_vue_type_script_lang-db2e3f85.js';
 import { useProxyModelValue } from './hooks/useProxyModelValue.js';

package/dist/bundled/v3/{OrSwitch.vue_vue_type_script_lang-032fd11a.js → OrSwitch.vue_vue_type_script_lang-c117cd4c.js}

@@ -3,7 +3,7 @@ import { SwitchRoot, SwitchControl, SwitchControlHandle, SwitchLoader, SwitchLoa
 import './components/OrLabelV3/OrLabel.js';
 import './components/OrLoaderV3/OrLoader.js';
 import { s as script$1 } from './OrLabel.vue_vue_type_script_lang-e2bcff17.js';
-import { s as script$2 } from './OrLoader.vue_vue_type_script_lang-e4fbf869.js';
+import { s as script$2 } from './OrLoader.vue_vue_type_script_lang-7459ba26.js';
 import { LabelVariant } from './components/OrLabelV3/props.js';
 import { useIdAttribute } from './hooks/useIdAttribute.js';
 import { useControlAttributes } from './hooks/useControlAttributes.js';

package/dist/bundled/v3/{OrTabs.vue_vue_type_script_lang-9c4da61c.js → OrTabs.vue_vue_type_script_lang-9d703d5b.js}

@@ -1,4 +1,4 @@
-import { e as useResizeObserver } from './index-c5cda763.js';
+import { f as useResizeObserver } from './index-ba131271.js';
 import { defineComponent, ref, computed, reactive, toRef, watch, nextTick, onMounted } from 'vue-demi';
 import { TabsVariant } from './components/OrTabsV3/props.js';
 import { TabsRoot, TabsRootVariants, TabsContainer, TabsContent } from './components/OrTabsV3/styles.js';
@@ -8,7 +8,7 @@ import './components/OrMenuItemV3/OrMenuItem.js';
 import './components/OrTabV3/OrTab.js';
 import { s as script$4 } from './OrTab.vue_vue_type_script_lang-886e334a.js';
 import { s as script$1 } from './OrIcon.vue_vue_type_script_lang-db2e3f85.js';
-import { s as script$2 } from './OrMenu.vue_vue_type_script_lang-74df3ea9.js';
+import { s as script$2 } from './OrMenu.vue_vue_type_script_lang-b109843f.js';
 import { s as script$3 } from './OrMenuItem.vue_vue_type_script_lang-11569833.js';
 import { useProxyModelValue } from './hooks/useProxyModelValue.js';
 

package/dist/bundled/v3/{OrTag.vue_vue_type_script_lang-68dfde87.js → OrTag.vue_vue_type_script_lang-721cc6ba.js}

@@ -2,7 +2,7 @@ import { defineComponent, ref, computed, watchPostEffect, unref } from 'vue-demi
 import { TagVariant, TagColor } from './components/OrTagV3/props.js';
 import { Tag, TagVariants, TagColors } from './components/OrTagV3/styles.js';
 import './components/OrIconButtonV3/OrIconButton.js';
-import { s as script$1 } from './OrIconButton.vue_vue_type_script_lang-58170753.js';
+import { s as script$1 } from './OrIconButton.vue_vue_type_script_lang-6960bd77.js';
 
 var script = defineComponent({
   name: 'OrTag',

package/dist/bundled/v3/{OrTagInput.vue_vue_type_script_lang-703ca4c0.js → OrTagInput.vue_vue_type_script_lang-0bf6a772.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, toRefs, computed, reactive, watch, nextTick } from 'vue-demi';
-import { o as onClickOutside } from './index-c5cda763.js';
+import { o as onClickOutside } from './index-ba131271.js';
 import { TagInput, TagInputControl, TagInputItem } from './components/OrTagInputV3/styles.js';
 import './components/OrErrorV3/OrError.js';
 import './components/OrHintV3/OrHint.js';
@@ -9,10 +9,10 @@ import './components/OrLabelV3/OrLabel.js';
 import './components/OrTagsV3/OrTags.js';
 import { s as script$1 } from './OrError.vue_vue_type_script_lang-fcf91781.js';
 import { s as script$2 } from './OrHint.vue_vue_type_script_lang-0ab8b932.js';
-import { s as script$3 } from './OrIconButton.vue_vue_type_script_lang-58170753.js';
+import { s as script$3 } from './OrIconButton.vue_vue_type_script_lang-6960bd77.js';
 import { s as script$4 } from './OrInputBox.vue_vue_type_script_lang-989d5ee6.js';
 import { s as script$5 } from './OrLabel.vue_vue_type_script_lang-e2bcff17.js';
-import { s as script$6 } from './OrTags.vue_vue_type_script_lang-df64b42f.js';
+import { s as script$6 } from './OrTags.vue_vue_type_script_lang-5d0be4da.js';
 import { TagsOverflow } from './components/OrTagsV3/props.js';
 import { useIdAttribute } from './hooks/useIdAttribute.js';
 import { useControlAttributes } from './hooks/useControlAttributes.js';

package/dist/bundled/v3/{OrTags.vue_vue_type_script_lang-df64b42f.js → OrTags.vue_vue_type_script_lang-5d0be4da.js}

@@ -5,10 +5,10 @@ import { castToTagObject } from './components/OrTagsV3/utils/castToTag.js';
 import './components/OrButtonV3/OrButton.js';
 import './components/OrPopoverV3/OrPopover.js';
 import './components/OrTagV3/OrTag.js';
-import { s as script$3 } from './OrTag.vue_vue_type_script_lang-68dfde87.js';
+import { s as script$3 } from './OrTag.vue_vue_type_script_lang-721cc6ba.js';
 import { useOverflow } from './hooks/useOverflow.js';
-import { s as script$1 } from './OrButton.vue_vue_type_script_lang-0f7bda53.js';
-import { s as script$2 } from './OrPopover.vue_vue_type_script_lang-8422f18e.js';
+import { s as script$1 } from './OrButton.vue_vue_type_script_lang-2ec4da42.js';
+import { s as script$2 } from './OrPopover.vue_vue_type_script_lang-dd8b8839.js';
 
 var script = defineComponent({
   name: 'OrTags',
@@ -61,7 +61,6 @@ var script = defineComponent({
     });
     // Styles
     const rootStyles = computed(() => ['or-tags-v3', ...Tags]);
-    const popoverStyles = computed(() => ['or-tags-popover-v3']);
     const containerStyles = computed(() => [...TagsContainer, ...TagsContainerOverflows[localOverflow.value]]);
     const overflowButtonStyles = computed(() => [...TagsOverflowButton]);
     const overflowPopoverStyles = computed(() => [...TagsOverflowPopover]);
@@ -101,7 +100,6 @@ var script = defineComponent({
       overflowPopover,
       overflowPopoverRoot,
       rootStyles,
-      popoverStyles,
       containerStyles,
       overflowButtonStyles,
       overflowPopoverStyles,

package/dist/bundled/v3/{OrTeleport.vue3.vue_vue_type_script_lang-dfc6301c.js → OrTeleport.vue3.vue_vue_type_script_lang-a6ce162e.js}

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue-demi';
 
 var script = defineComponent({
+  name: 'OrTeleport',
   props: {
     to: {
       type: String,

package/dist/bundled/v3/{OrTimePicker.vue_vue_type_script_lang-35091c83.js → OrTimePicker.vue_vue_type_script_lang-f979ecf1.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, watch, toRef } from 'vue-demi';
 import { TimePicker, TimePickerPopover } from './components/OrTimePickerV3/styles.js';
-import './OrDateTimePickerTimeSelect-bf55ed14.js';
+import './OrDateTimePickerTimeSelect-fa69d6bc.js';
 import './components/OrErrorV3/OrError.js';
 import './components/OrHintV3/OrHint.js';
 import './components/OrIconV3/OrIcon.js';
@@ -8,15 +8,15 @@ import './components/OrIconButtonV3/OrIconButton.js';
 import './components/OrInputBoxV3/OrInputBox.js';
 import './components/OrLabelV3/OrLabel.js';
 import './components/OrPopoverV3/OrPopover.js';
-import { s as script$1, a as script$2, b as script$3 } from './OrDateTimePickerPopoverHeader.vue_vue_type_script_lang-5a72a5a0.js';
-import { s as script$4, a as script$5 } from './OrDateTimePickerTimeSelect.vue_vue_type_script_lang-8e7b9eba.js';
+import { s as script$1, a as script$2, b as script$3 } from './OrDateTimePickerPopoverHeader.vue_vue_type_script_lang-e1e72065.js';
+import { s as script$4, a as script$5 } from './OrDateTimePickerTimeSelect.vue_vue_type_script_lang-83d6af6c.js';
 import { s as script$6 } from './OrError.vue_vue_type_script_lang-fcf91781.js';
 import { s as script$7 } from './OrHint.vue_vue_type_script_lang-0ab8b932.js';
 import { s as script$8 } from './OrIcon.vue_vue_type_script_lang-db2e3f85.js';
-import { s as script$9 } from './OrIconButton.vue_vue_type_script_lang-58170753.js';
+import { s as script$9 } from './OrIconButton.vue_vue_type_script_lang-6960bd77.js';
 import { s as script$a } from './OrInputBox.vue_vue_type_script_lang-989d5ee6.js';
 import { s as script$b } from './OrLabel.vue_vue_type_script_lang-e2bcff17.js';
-import { s as script$c } from './OrPopover.vue_vue_type_script_lang-8422f18e.js';
+import { s as script$c } from './OrPopover.vue_vue_type_script_lang-dd8b8839.js';
 import { DropdownClose } from './directives/dropdown-close.js';
 import { DropdownOpen } from './directives/dropdown-open.js';
 import { DateTimePickerTimeFormat } from './components/OrDateTimePickerV3/props.js';
@@ -115,7 +115,7 @@ var script = defineComponent({
     });
     // Styles
     const rootStyles = computed(() => ['or-time-picker-v3', ...TimePicker]);
-    const popoverStyles = computed(() => ['or-time-picker-popover-v3', ...TimePickerPopover]);
+    const popoverStyles = computed(() => [...TimePickerPopover]);
     // State
     const initialValue = ref((_a = props.modelValue) !== null && _a !== void 0 ? _a : getCurrentDate());
     watch(() => props.modelValue, value => {