@onereach/ui-components 4.15.5-beta.3075.0 → 4.16.0

package/dist/esm/v3/{OrBottomSheet-9f663614.js → OrBottomSheet-2d3d91ef.js}

@@ -74,7 +74,6 @@ var script = defineComponent({
     // Refs
     const root = ref();
     const content = ref();
-    const rootInlineStyles = ref();
     // Styles
     const rootStyles = computed(() => ['or-bottom-sheet-v3', ...BottomSheet, ...BottomSheetVariants[props.variant]]);
     const handleStyles = computed(() => [...BottomSheetHandle]);
@@ -105,11 +104,11 @@ var script = defineComponent({
         }
         if (props.variant === BottomSheetVariant.Advanced) {
           const rootElement = unref(root);
-          rootInlineStyles.value = {
+          Object.assign(rootElement.style, {
             transitionProperty: 'none',
             minHeight: `${rootElement.clientHeight - event.offsetY}px`,
             maxHeight: `${rootElement.clientHeight - event.offsetY}px`
-          };
+          });
         }
       },
       onSwipeEnd(event, direction) {
@@ -117,21 +116,22 @@ var script = defineComponent({
           return;
         }
         if (props.variant === BottomSheetVariant.Advanced) {
+          const rootElement = unref(root);
           switch (direction) {
             case SwipeDirection.UP:
-              rootInlineStyles.value = {
+              Object.assign(rootElement.style, {
                 transitionProperty: 'min-height, max-height',
                 minHeight: '100%',
                 maxHeight: '100%'
-              };
+              });
               fullscreen.value = true;
               break;
             case SwipeDirection.DOWN:
-              rootInlineStyles.value = {
+              Object.assign(rootElement.style, {
                 transitionProperty: 'min-height, max-height',
                 minHeight: '0',
                 maxHeight: '50%'
-              };
+              });
               if (fullscreen.value) {
                 fullscreen.value = false;
               } else {
@@ -161,7 +161,6 @@ var script = defineComponent({
       root,
       content,
       rootStyles,
-      rootInlineStyles,
       handleStyles,
       headerStyles,
       state,
@@ -182,8 +181,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [createElementVNode("div", mergeProps({
       ref: "root"
     }, _ctx.$attrs, {
-      class: _ctx.rootStyles,
-      style: _ctx.rootInlineStyles
+      class: _ctx.rootStyles
     }), [_ctx.variant === 'advanced' ? (openBlock(), createElementBlock("div", {
       key: 0,
       class: normalizeClass(_ctx.handleStyles)

package/dist/esm/v3/{OrCardCollection-64853f72.js → OrCardCollection-6352565a.js}

@@ -1,9 +1,9 @@
 import { defineComponent, computed, ref, watch } from 'vue-demi';
-import { s as script$2 } from './OrIconButton-d930ee31.js';
-import { s as script$4 } from './OrSearch-8e9c11bd.js';
-import './OrInputBox-32b37b17.js';
+import { s as script$2 } from './OrIconButton-81bade23.js';
+import { s as script$4 } from './OrSearch-47b052ea.js';
+import './OrInputBox-912a6254.js';
 import { openBlock, createElementBlock, normalizeClass, Fragment, renderList, renderSlot, mergeProps, createTextVNode, toDisplayString, resolveComponent, createElementVNode, createBlock, createCommentVNode, createVNode, normalizeProps, guardReactiveProps, withCtx } from 'vue';
-import { s as script$3 } from './OrSorting-166509ca.js';
+import { s as script$3 } from './OrSorting-a4247ad1.js';
 
 const CardCollectionRoot = [
 // Layout

package/dist/esm/v3/{OrCode-171d8120.js → OrCode-e01f4dc0.js}

@@ -15,10 +15,10 @@ import { u as useTheme } from './useTheme-e23d13c8.js';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { s as script$1 } from './OrError-c01d0c29.js';
 import { s as script$2 } from './OrHint-06ab89d7.js';
-import { s as script$3 } from './OrIconButton-d930ee31.js';
-import { s as script$4 } from './OrInputBox-32b37b17.js';
+import { s as script$3 } from './OrIconButton-81bade23.js';
+import { s as script$4 } from './OrInputBox-912a6254.js';
 import { s as script$5 } from './OrLabel-4da56db0.js';
-import { s as script$6 } from './OrModal-ae0cd492.js';
+import { s as script$6 } from './OrModal-d2038c15.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, createElementVNode, renderSlot, createVNode, withModifiers, createTextVNode, toDisplayString, createCommentVNode, withDirectives, vShow } from 'vue';
 
 var CodeLanguage;

package/dist/esm/v3/{OrCombinedInput-e3891038.js → OrCombinedInput-2800ee8b.js}

@@ -2,7 +2,7 @@ import { defineComponent, ref, computed } from 'vue-demi';
 import { s as script$1 } from './OrError-c01d0c29.js';
 import { s as script$2 } from './OrHint-06ab89d7.js';
 import { s as script$3 } from './OrLabel-4da56db0.js';
-import { I as InputBoxSize } from './OrInputBox-32b37b17.js';
+import { I as InputBoxSize } from './OrInputBox-912a6254.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, withDirectives, vShow, createVNode } from 'vue';
 
 const CombinedInputRoot = [

package/dist/esm/v3/{OrConfirm-ef4ce673.js → OrConfirm-646b9ec3.js}

@@ -5,7 +5,7 @@ import { u as usePopoverState } from './usePopoverState-b92c698b.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { s as script$2, a as ButtonColor } from './OrButton-c2b6aa9e.js';
-import { s as script$3 } from './OrInput-927d0ca3.js';
+import { s as script$3 } from './OrInput-eb04fa3a.js';
 import { s as script$1 } from './OrOverlay-489fdf76.js';
 import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, normalizeClass, renderSlot, createTextVNode, toDisplayString, createElementBlock, createVNode, createCommentVNode } from 'vue';
 

package/dist/esm/v3/{OrDatePicker-00f28098.js → OrDatePicker-6349f608.js}

@@ -4,14 +4,14 @@ import '@vueuse/core';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
-import { s as script$1, a as script$2, b as script$3, c as script$4, d as script$5, e as script$6, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-d2ab6359.js';
+import { s as script$1, a as script$2, b as script$3, c as script$4, d as script$5, e as script$6, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-3c26fc72.js';
 import { s as script$7 } from './OrError-c01d0c29.js';
 import { s as script$8 } from './OrHint-06ab89d7.js';
-import { s as script$a } from './OrIconButton-d930ee31.js';
+import { s as script$a } from './OrIconButton-81bade23.js';
 import { s as script$9 } from './OrIcon-62793572.js';
-import { s as script$b, I as InputBoxSize } from './OrInputBox-32b37b17.js';
+import { s as script$b, I as InputBoxSize } from './OrInputBox-912a6254.js';
 import { s as script$c } from './OrLabel-4da56db0.js';
-import { s as script$d } from './OrPopover-a90e564c.js';
+import { s as script$d } from './OrPopover-56ba40ab.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, createVNode, Fragment, createElementVNode } from 'vue';
 
 const DatePicker = [

package/dist/esm/v3/{OrDateTimePicker-d52e42b8.js → OrDateTimePicker-d843ed5f.js}

@@ -6,12 +6,12 @@ import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { s as script$a } from './OrError-c01d0c29.js';
 import { s as script$b } from './OrHint-06ab89d7.js';
-import { s as script$d } from './OrIconButton-d930ee31.js';
+import { s as script$d } from './OrIconButton-81bade23.js';
 import { s as script$c } from './OrIcon-62793572.js';
-import { s as script$e, I as InputBoxSize } from './OrInputBox-32b37b17.js';
+import { s as script$e, I as InputBoxSize } from './OrInputBox-912a6254.js';
 import { s as script$f } from './OrLabel-4da56db0.js';
-import { s as script$g } from './OrPopover-a90e564c.js';
-import { s as script$4, a as script$5, b as script$6, c as script$7, d as script$8, e as script$9, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-d2ab6359.js';
+import { s as script$g } from './OrPopover-56ba40ab.js';
+import { s as script$4, a as script$5, b as script$6, c as script$7, d as script$8, e as script$9, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-3c26fc72.js';
 import { openBlock, createElementBlock, normalizeClass, Fragment, createTextVNode, toDisplayString, resolveComponent, createElementVNode, renderList, createBlock, withModifiers, withCtx, createVNode, createCommentVNode, resolveDirective, renderSlot, withDirectives } from 'vue';
 import { s as script$3 } from './OrButton-c2b6aa9e.js';
 

package/dist/esm/v3/{OrDateTimePickerPopoverHeader-d2ab6359.js → OrDateTimePickerPopoverHeader-3c26fc72.js}

@@ -6,11 +6,11 @@ import 'tailwindcss/resolveConfig';
 import { openBlock, createElementBlock, normalizeClass, Fragment, createTextVNode, toDisplayString, resolveComponent, createElementVNode, renderList, createBlock, withModifiers, withCtx, createVNode, renderSlot } from 'vue';
 import { s as script$6 } from './OrButton-c2b6aa9e.js';
 import { s as script$7 } from './OrLabel-4da56db0.js';
-import { s as script$9 } from './OrIconButton-d930ee31.js';
+import { s as script$9 } from './OrIconButton-81bade23.js';
 import { s as script$8 } from './OrIcon-62793572.js';
 import { s as script$b } from './OrMenuItem-54062d59.js';
-import { s as script$a } from './OrMenu-1ff268d9.js';
-import './OrPopover-a90e564c.js';
+import { s as script$a } from './OrMenu-eff42b15.js';
+import './OrPopover-56ba40ab.js';
 
 function useCurrentDate() {
   const currentDate = new Date();

package/dist/esm/v3/{OrIconButton-d930ee31.js → OrIconButton-81bade23.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, isVue3 } from 'vue-demi';
 import { s as script$1, I as IconSize } from './OrIcon-62793572.js';
-import { s as script$2 } from './OrTooltip-9e6caae1.js';
-import './OrPopover-a90e564c.js';
+import { s as script$2 } from './OrTooltip-bd35ec20.js';
+import './OrPopover-56ba40ab.js';
 import { resolveComponent, openBlock, createBlock, normalizeProps, guardReactiveProps, withCtx, createElementVNode, mergeProps, toHandlers, createVNode } from 'vue';
 
 var IconButtonColor;

package/dist/esm/v3/{OrInlineInput-3e2f8deb.js → OrInlineInput-42f6e95a.js}

@@ -7,7 +7,7 @@ import 'tailwindcss/resolveConfig';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { s as script$1 } from './OrError-c01d0c29.js';
 import { s as script$2 } from './OrHint-06ab89d7.js';
-import { s as script$3 } from './OrIconButton-d930ee31.js';
+import { s as script$3 } from './OrIconButton-81bade23.js';
 import { s as script$4, I as InlineInputBoxSize } from './OrInlineInputBox-01fb2cb2.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, withDirectives, mergeProps, vModelDynamic, withModifiers, createCommentVNode, createBlock, createSlots, createTextVNode, toDisplayString, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';

package/dist/esm/v3/{OrInlineTextarea-668100b5.js → OrInlineTextarea-651c67e6.js}

@@ -7,7 +7,7 @@ import 'tailwindcss/resolveConfig';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { s as script$1 } from './OrError-c01d0c29.js';
 import { s as script$2 } from './OrHint-06ab89d7.js';
-import { s as script$3 } from './OrIconButton-d930ee31.js';
+import { s as script$3 } from './OrIconButton-81bade23.js';
 import { s as script$4 } from './OrInlineInputBox-01fb2cb2.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, withDirectives, mergeProps, vModelText, withModifiers, createCommentVNode, createBlock, createSlots, createTextVNode, toDisplayString, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';

package/dist/esm/v3/{OrInput-927d0ca3.js → OrInput-eb04fa3a.js}

@@ -8,9 +8,9 @@ import 'tailwindcss/resolveConfig';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { s as script$1 } from './OrError-c01d0c29.js';
 import { s as script$2 } from './OrHint-06ab89d7.js';
-import { s as script$4 } from './OrIconButton-d930ee31.js';
+import { s as script$4 } from './OrIconButton-81bade23.js';
 import { s as script$3 } from './OrIcon-62793572.js';
-import { s as script$5, I as InputBoxSize } from './OrInputBox-32b37b17.js';
+import { s as script$5, I as InputBoxSize } from './OrInputBox-912a6254.js';
 import { s as script$6 } from './OrLabel-4da56db0.js';
 import { s as script$7 } from './OrLoader-b79022da.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, Fragment, withModifiers, withDirectives, createElementVNode, mergeProps, vModelDynamic, createSlots, vShow } from 'vue';

package/dist/esm/v3/{OrInputBox-32b37b17.js → OrInputBox-912a6254.js}

@@ -8,7 +8,6 @@ const InputBoxAddon = [
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
 var script$1 = defineComponent({
-  name: 'OrInputBoxAddon',
   props: {
     invalid: {
       type: Boolean,
@@ -61,7 +60,7 @@ var InputBoxSize;
   InputBoxSize["S"] = "s";
 })(InputBoxSize || (InputBoxSize = {}));
 
-const InputBoxRoot = [
+const InputBox = [
 // Layout
 'layout-row',
 // Overflow
@@ -72,8 +71,8 @@ const InputBoxRoot = [
 'rounded-md',
 // Theme (children)
 'children:outline-none'];
-const InputBoxRootVariants = {
-  'styled': [
+const InputBoxVariants = {
+  [InputBoxVariant.Styled]: [
   // Theme
   'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark', 'theme-border-1-outline', 'dark:theme-border-1-outline-dark', 'theme-outline-2-transparent', 'dark:theme-outline-2-transparent',
   // Theme (focus)
@@ -86,19 +85,19 @@ const InputBoxRootVariants = {
   'invalid:focus-within:theme-background-error-translucent', 'dark:invalid:focus-within:theme-background-error-translucent-dark', 'invalid:focus-within:theme-border-1-error', 'dark:invalid:focus-within:theme-border-1-error-dark', 'invalid:focus-within:theme-outline-2-error', 'dark:invalid:focus-within:theme-outline-2-error-dark',
   // Theme (invalid, read-only)
   'invalid:read-only:bg-error-opacity-0-08', 'dark:invalid:read-only:bg-error-opacity-0-08-dark', 'invalid:read-only:!border-transparent', 'dark:invalid:read-only:!border-transparent'],
-  'unstyled': [
+  [InputBoxVariant.Unstyled]: [
   // Theme (disabled)
   'disabled:theme-foreground-disabled', 'dark:disabled:theme-foreground-disabled-dark']
 };
-const InputBoxRootSizes = {
-  'm': [
+const InputBoxSizes = {
+  [InputBoxSize.M]: [
   // Box
   'children:min-h-[46px] children:md:min-h-[34px]',
   // Spacing
   'first-child:ml-md first-child:md:ml-sm+', 'last-child:mr-md last-child:md:mr-sm+', 'gap-sm+ md:gap-sm',
   // Typography
   'typography-body-2-regular'],
-  's': [
+  [InputBoxSize.S]: [
   // Box
   'children:min-h-[30px]',
   // Spacing
@@ -108,7 +107,6 @@ const InputBoxRootSizes = {
 };
 
 var script = defineComponent({
-  name: 'OrInputBox',
   components: {
     OrInputBoxAddon: script$1
   },
@@ -139,7 +137,7 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-input-box-v3', ...InputBoxRoot, ...InputBoxRootVariants[props.variant], ...InputBoxRootSizes[props.size]]);
+    const rootStyles = computed(() => ['or-input-box-v3', ...InputBox, ...InputBoxVariants[props.variant], ...InputBoxSizes[props.size]]);
     return {
       root,
       rootStyles

package/dist/esm/v3/{OrMenu-1ff268d9.js → OrMenu-eff42b15.js}

@@ -3,17 +3,16 @@ import '@vueuse/core';
 import { u as usePopoverState } from './usePopoverState-b92c698b.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
-import { s as script$1, P as PopoverPlacement } from './OrPopover-a90e564c.js';
+import { s as script$1, P as PopoverPlacement } from './OrPopover-56ba40ab.js';
 import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, withModifiers, renderSlot } from 'vue';
 
-const MenuRoot = [
+const Menu = [
 // Layout
 'overflow-y-auto',
 // Box
 'min-w-[160px]', 'md:max-w-[256px]', 'max-h-[340px]'];
 
 var script = defineComponent({
-  name: 'OrMenu',
   components: {
     OrPopover: script$1
   },
@@ -30,6 +29,10 @@ var script = defineComponent({
     placement: {
       type: String,
       default: PopoverPlacement.Bottom
+    },
+    offset: {
+      type: [Number, Object, Function],
+      default: undefined
     }
   },
   emits: ['update:state', 'open', 'close'],
@@ -38,7 +41,7 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-menu-v3', ...MenuRoot]);
+    const rootStyles = computed(() => ['or-menu-v3', ...Menu]);
     // State
     const {
       state,
@@ -77,21 +80,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     variant: 'auto',
     trigger: _ctx.trigger,
     placement: _ctx.placement,
-    "full-width": false,
-    "disable-default-styles": false,
+    offset: _ctx.offset,
     "onUpdate:state": _cache[1] || (_cache[1] = $event => _ctx.state = $event)
   }, {
     default: withCtx(() => [createElementVNode("div", mergeProps({
       ref: "root"
     }, _ctx.$attrs, {
       class: _ctx.rootStyles,
-      onClick: _cache[0] || (_cache[0] = withModifiers(function () {
-        return _ctx.onClick && _ctx.onClick(...arguments);
-      }, ["stop"]))
+      onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.onClick($event), ["stop"]))
     }), [renderSlot(_ctx.$slots, "default")], 16 /* FULL_PROPS */)]),
 
     _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["is-open", "trigger", "placement"]);
+  }, 8 /* PROPS */, ["is-open", "trigger", "placement", "offset"]);
 }
 
 script.render = render;

package/dist/esm/v3/{OrModal-ae0cd492.js → OrModal-d2038c15.js}

@@ -5,7 +5,7 @@ import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { s as script$5 } from './OrOverlay-489fdf76.js';
 import { openBlock, createElementBlock, normalizeClass, renderSlot, resolveComponent, createElementVNode, createVNode, withModifiers, createBlock, withCtx, mergeProps, createCommentVNode } from 'vue';
-import { s as script$4 } from './OrIconButton-d930ee31.js';
+import { s as script$4 } from './OrIconButton-81bade23.js';
 
 const ModalContent = [
 // Layout

package/dist/esm/v3/{OrNotification-1d71812d.js → OrNotification-ec688496.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { s as script$2 } from './OrIconButton-d930ee31.js';
+import { s as script$2 } from './OrIconButton-81bade23.js';
 import { s as script$1 } from './OrIcon-62793572.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, renderSlot, createBlock, withModifiers, createCommentVNode } from 'vue';
 

package/dist/esm/v3/{OrPagination-7dbed059.js → OrPagination-7168b18f.js}

@@ -7,8 +7,8 @@ import 'tailwindcss/resolveConfig';
 import { s as script$1 } from './OrButton-c2b6aa9e.js';
 import { s as script$2 } from './OrIcon-62793572.js';
 import { s as script$4 } from './OrMenuItem-54062d59.js';
-import { s as script$3 } from './OrMenu-1ff268d9.js';
-import './OrPopover-a90e564c.js';
+import { s as script$3 } from './OrMenu-eff42b15.js';
+import './OrPopover-56ba40ab.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withModifiers, withCtx, Fragment, renderList, createBlock, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 
 const PaginationRoot = [

package/dist/esm/v3/{OrPopover-a90e564c.js → OrPopover-56ba40ab.js}

@@ -1,4 +1,4 @@
-import { autoUpdate, computePosition, shift, flip, hide } from '@floating-ui/dom';
+import { autoUpdate, computePosition, offset, shift, flip, hide } from '@floating-ui/dom';
 import { onClickOutside } from '@vueuse/core';
 import { defineComponent, ref, computed, toRef, watchPostEffect, unref } from 'vue-demi';
 import { u as useElevation } from './useElevation-a50ec347.js';
@@ -6,7 +6,7 @@ import { u as usePopoverState } from './usePopoverState-b92c698b.js';
 import { u as useResponsive } from './useResponsive-a02e95b7.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
-import { s as script$1 } from './OrBottomSheet-9f663614.js';
+import { s as script$1 } from './OrBottomSheet-2d3d91ef.js';
 import { s as script$2 } from './OrTeleport.vue3-8099178c.js';
 import { resolveComponent, openBlock, createBlock, withCtx, withDirectives, createElementVNode, createElementBlock, mergeProps, renderSlot, normalizeClass, createCommentVNode, vShow } from 'vue';
 
@@ -32,7 +32,7 @@ var PopoverPlacement;
   PopoverPlacement["RightEnd"] = "right-end";
 })(PopoverPlacement || (PopoverPlacement = {}));
 
-const PopoverRoot = [
+const Popover = [
 // Position
 'absolute'];
 const PopoverBody = [
@@ -45,38 +45,37 @@ const PopoverBody = [
 // Elevation
 'shadow-contextual', 'dark:shadow-contextual-dark'];
 const PopoverBodyPlacements = {
-  'top': [],
-  'top-start': [
+  [PopoverPlacement.Top]: [],
+  [PopoverPlacement.TopStart]: [
   // Spacing
   'ml-none'],
-  'top-end': [
+  [PopoverPlacement.TopEnd]: [
   // Spacing
   'mr-none'],
-  'bottom': [],
-  'bottom-start': [
+  [PopoverPlacement.Bottom]: [],
+  [PopoverPlacement.BottomStart]: [
   // Spacing
   'ml-none'],
-  'bottom-end': [
+  [PopoverPlacement.BottomEnd]: [
   // Spacing
   'mr-none'],
-  'left': [],
-  'left-start': [
+  [PopoverPlacement.Left]: [],
+  [PopoverPlacement.LeftStart]: [
   // Spacing
   'mt-none'],
-  'left-end': [
+  [PopoverPlacement.LeftEnd]: [
   // Spacing
   'mb-none'],
-  'right': [],
-  'right-start': [
+  [PopoverPlacement.Right]: [],
+  [PopoverPlacement.RightStart]: [
   // Spacing
   'mt-none'],
-  'right-end': [
+  [PopoverPlacement.RightEnd]: [
   // Spacing
   'mb-none']
 };
 
 var script = defineComponent({
-  name: 'OrPopover',
   components: {
     OrBottomSheet: script$1,
     OrTeleport: script$2
@@ -103,6 +102,10 @@ var script = defineComponent({
       type: String,
       default: PopoverPlacement.Bottom
     },
+    offset: {
+      type: [Number, Object, Function],
+      default: undefined
+    },
     fullWidth: {
       type: Boolean,
       default: false
@@ -131,7 +134,7 @@ var script = defineComponent({
       return (_a = bottomSheet.value) === null || _a === void 0 ? void 0 : _a.root;
     });
     // Styles
-    const rootStyles = computed(() => ['or-popover-v3', ...PopoverRoot, ...props.customStyles]);
+    const rootStyles = computed(() => ['or-popover-v3', ...Popover, ...props.customStyles]);
     const bodyStyles = computed(() => [...PopoverBody, ...PopoverBodyPlacements[props.placement]]);
     // State
     const {
@@ -159,7 +162,7 @@ var script = defineComponent({
               middlewareData
             } = await computePosition(trigger, rootElement, {
               placement,
-              middleware: [shift(), flip(), hide()]
+              middleware: [offset(props.offset), shift(), flip(), hide()]
             });
             Object.assign(rootElement.style, {
               left: `${x}px`,

package/dist/esm/v3/{OrSearch-8e9c11bd.js → OrSearch-47b052ea.js}

@@ -1,7 +1,7 @@
 import { debouncedWatch } from '@vueuse/core';
 import { defineComponent, ref, computed, watch } from 'vue-demi';
-import { s as script$1 } from './OrInput-927d0ca3.js';
-import { I as InputBoxSize } from './OrInputBox-32b37b17.js';
+import { s as script$1 } from './OrInput-eb04fa3a.js';
+import { I as InputBoxSize } from './OrInputBox-912a6254.js';
 import { resolveComponent, openBlock, createBlock, normalizeClass } from 'vue';
 
 var script = defineComponent({

package/dist/esm/v3/{OrSelect-c9b645a5.js → OrSelect-a75320da.js}

@@ -9,14 +9,14 @@ import { s as script$1, i as isEmptyValue } from './OrCheckbox-494a8d9e.js';
 import { s as script$2 } from './OrError-c01d0c29.js';
 import { s as script$3 } from './OrExpansionPanel-891154e6.js';
 import { s as script$4 } from './OrHint-06ab89d7.js';
-import { s as script$6 } from './OrIconButton-d930ee31.js';
+import { s as script$6 } from './OrIconButton-81bade23.js';
 import { s as script$5 } from './OrIcon-62793572.js';
-import { s as script$8, I as InputBoxSize } from './OrInputBox-32b37b17.js';
-import { s as script$7 } from './OrInput-927d0ca3.js';
+import { s as script$8, I as InputBoxSize } from './OrInputBox-912a6254.js';
+import { s as script$7 } from './OrInput-eb04fa3a.js';
 import { s as script$9 } from './OrLabel-4da56db0.js';
 import { s as script$a } from './OrMenuItem-54062d59.js';
-import { s as script$b } from './OrPopover-a90e564c.js';
-import { s as script$c } from './OrTag-95173b6e.js';
+import { s as script$b } from './OrPopover-56ba40ab.js';
+import { s as script$c } from './OrTag-8f452a85.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, withModifiers, createVNode, vShow } from 'vue';
 
 const SelectRoot = [

package/dist/esm/v3/{OrSidebar-b0edfcb8.js → OrSidebar-9281e0d5.js}

@@ -1,6 +1,6 @@
 import { useDraggable, useElementBounding } from '@vueuse/core';
 import { defineComponent, ref, computed, useSlots, watch } from 'vue-demi';
-import { s as script$1, O as OrSidebarPlacement } from './OrSidebarCollapseButton-ac26afbc.js';
+import { s as script$1, O as OrSidebarPlacement } from './OrSidebarCollapseButton-69e7cc73.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createElementVNode, normalizeStyle, createBlock, withDirectives, vShow } from 'vue';
 
 const SidebarRoot = [

package/dist/esm/v3/{OrSidebarCollapseButton-ac26afbc.js → OrSidebarCollapseButton-69e7cc73.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { s as script$1 } from './OrIconButton-d930ee31.js';
+import { s as script$1 } from './OrIconButton-81bade23.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withModifiers } from 'vue';
 
 var OrSidebarPlacement;

package/dist/esm/v3/{OrSorting-166509ca.js → OrSorting-a4247ad1.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, toRef, computed } from 'vue-demi';
-import { s as script$1 } from './OrMenu-1ff268d9.js';
-import './OrPopover-a90e564c.js';
+import { s as script$1 } from './OrMenu-eff42b15.js';
+import './OrPopover-56ba40ab.js';
 import { s as script$2 } from './OrMenuItem-54062d59.js';
 import { s as script$3 } from './OrButton-c2b6aa9e.js';
 import { s as script$4 } from './OrIcon-62793572.js';
@@ -74,7 +74,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrMenuItem = resolveComponent("OrMenuItem");
   const _component_OrMenu = resolveComponent("OrMenu");
   return openBlock(), createElementBlock("div", {
-    ref: _ctx.root,
+    ref: "root",
     class: normalizeClass(_ctx.rootStyles)
   }, [createVNode(_component_OrButton, {
     ref: "sortButton",

package/dist/esm/v3/{OrTabs-6f4de2af.js → OrTabs-78f2d777.js}

@@ -5,8 +5,8 @@ import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { s as script$1 } from './OrIcon-62793572.js';
 import { s as script$3 } from './OrMenuItem-54062d59.js';
-import { s as script$2 } from './OrMenu-1ff268d9.js';
-import './OrPopover-a90e564c.js';
+import { s as script$2 } from './OrMenu-eff42b15.js';
+import './OrPopover-56ba40ab.js';
 import { s as script$4 } from './OrTab-2d567d8e.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString, createVNode, createCommentVNode, renderSlot } from 'vue';
 

package/dist/esm/v3/{OrTag-95173b6e.js → OrTag-8f452a85.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, watchPostEffect, unref } from 'vue-demi';
-import { s as script$1 } from './OrIconButton-d930ee31.js';
+import { s as script$1 } from './OrIconButton-81bade23.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, withModifiers, createCommentVNode } from 'vue';
 
 var TagVariant;

package/dist/esm/v3/{OrTagInput-0a0135f6.js → OrTagInput-d6794a18.js}

@@ -7,10 +7,10 @@ import 'tailwindcss/resolveConfig';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { s as script$1 } from './OrError-c01d0c29.js';
 import { s as script$2 } from './OrHint-06ab89d7.js';
-import { s as script$3 } from './OrIconButton-d930ee31.js';
-import { s as script$4, I as InputBoxSize } from './OrInputBox-32b37b17.js';
+import { s as script$3 } from './OrIconButton-81bade23.js';
+import { s as script$4, I as InputBoxSize } from './OrInputBox-912a6254.js';
 import { s as script$5 } from './OrLabel-4da56db0.js';
-import { s as script$6 } from './OrTags-3ed0a1c0.js';
+import { s as script$6 } from './OrTags-77d33257.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, withModifiers, withDirectives, createElementVNode, mergeProps, withKeys, vModelDynamic, createSlots, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 

package/dist/esm/v3/{OrTags-3ed0a1c0.js → OrTags-77d33257.js}

@@ -4,8 +4,8 @@ import '@vueuse/core';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { s as script$1 } from './OrButton-c2b6aa9e.js';
-import { s as script$2 } from './OrPopover-a90e564c.js';
-import { s as script$3 } from './OrTag-95173b6e.js';
+import { s as script$2 } from './OrPopover-56ba40ab.js';
+import { s as script$3 } from './OrTag-8f452a85.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, createBlock, mergeProps, withCtx, createTextVNode, toDisplayString, createVNode, withModifiers, createCommentVNode } from 'vue';
 
 const Tags = [

package/dist/esm/v3/{OrTextarea-6202e867.js → OrTextarea-6c471ccd.js}

@@ -7,7 +7,7 @@ import 'tailwindcss/resolveConfig';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { s as script$1 } from './OrError-c01d0c29.js';
 import { s as script$2 } from './OrHint-06ab89d7.js';
-import { s as script$3, I as InputBoxSize } from './OrInputBox-32b37b17.js';
+import { s as script$3, I as InputBoxSize } from './OrInputBox-912a6254.js';
 import { s as script$4 } from './OrLabel-4da56db0.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, withDirectives, createElementVNode, mergeProps, vModelText, createSlots, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';