@onereach/ui-components 4.3.4-beta.2631.0 → 4.3.5-beta.2633.0

package/dist/bundled/v2/components/OrToastContainerV3/OrToastContainer.js

@@ -1,11 +1,12 @@
 import { useToggle } from '@vueuse/core';
-import { defineComponent, computed, onBeforeMount, onBeforeUnmount, nextTick } from 'vue-demi';
+import { defineComponent, ref, computed, onBeforeMount, onBeforeUnmount, nextTick } from 'vue-demi';
 import useQueue from '../OrToastV3/composable/useQueue.js';
 import useToastEventBus from '../OrToastV3/composable/useToastEventBus.js';
 import __vue_component__$2 from '../OrToastV3/OrToast.js';
 import { P as PositionsX, a as PositionsY, T as TransitionType } from '../../props-7be029c7.js';
 import { ToastContainer, ToastContainerPositions } from '../OrToastV3/styles.js';
 import __vue_component__$1 from '../OrTeleportV3/OrTeleport.js';
+import { useElevation } from '../../hooks/useElevation.js';
 import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../OrIconButtonV3/OrIconButton.js';
@@ -24,13 +25,12 @@ import '../OrBottomSheetV3/OrBottomSheet.js';
 import '../OrBottomSheetV3/styles.js';
 import '../OrOverlayV3/OrOverlay.js';
 import '../OrOverlayV3/styles.js';
-import '../../hooks/useElevation.js';
-import '../../utils/isVisible.js';
 import '../../hooks/useResponsive/useResponsive.js';
 import '../OrLoaderV3/OrLoader.js';
 import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';
 import 'portal-vue';
+import '../../utils/isVisible.js';
 
 var script = defineComponent({
   name: 'OrToastContainer',
@@ -56,6 +56,8 @@ var script = defineComponent({
     }
   },
   setup(props) {
+    // Refs
+    const root = ref();
     const {
       on,
       off
@@ -145,6 +147,7 @@ var script = defineComponent({
       off('toastUpdate', toastUpdate);
       off('toastCloseAll', clearAll);
     });
+    useElevation(root, isActive);
     return {
       on,
       off,
@@ -157,6 +160,7 @@ var script = defineComponent({
       clearAll,
       getItem,
       queue,
+      root,
       createToast,
       toastUpdate,
       toastRemove,
@@ -168,7 +172,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = ".or-toast-container[data-v-0eb6626c]{z-index:26}.or-toast--transition-slide-enter-active[data-v-0eb6626c],.or-toast--transition-slide-leave-active[data-v-0eb6626c]{transition:transform .4s ease}.or-toast--transition-slide-enter-from.or-toast--position-right[data-v-0eb6626c],.or-toast--transition-slide-leave-to.or-toast--position-right[data-v-0eb6626c]{transform:translateX(999px)}.or-toast--transition-slide-enter-from.or-toast--position-left[data-v-0eb6626c],.or-toast--transition-slide-leave-to.or-toast--position-left[data-v-0eb6626c]{transform:translateX(-999px)}.or-toast--transition-fade-enter-active[data-v-0eb6626c],.or-toast--transition-fade-leave-active[data-v-0eb6626c]{transition:opacity .4s ease}.or-toast--transition-fade-enter-from[data-v-0eb6626c],.or-toast--transition-fade-leave-to[data-v-0eb6626c]{opacity:0}";
+var css_248z = ".or-toast--transition-slide-enter-active[data-v-9c5633de],.or-toast--transition-slide-leave-active[data-v-9c5633de]{transition:transform .4s ease}.or-toast--transition-slide-enter-from.or-toast--position-right[data-v-9c5633de],.or-toast--transition-slide-leave-to.or-toast--position-right[data-v-9c5633de]{transform:translateX(999px)}.or-toast--transition-slide-enter-from.or-toast--position-left[data-v-9c5633de],.or-toast--transition-slide-leave-to.or-toast--position-left[data-v-9c5633de]{transform:translateX(-999px)}.or-toast--transition-fade-enter-active[data-v-9c5633de],.or-toast--transition-fade-leave-active[data-v-9c5633de]{transition:opacity .4s ease}.or-toast--transition-fade-enter-from[data-v-9c5633de],.or-toast--transition-fade-leave-to[data-v-9c5633de]{opacity:0}";
 styleInject(css_248z);
 
 /* script */
@@ -178,10 +182,14 @@ var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _vm.isActive ? _c('OrTeleport', [_c('div', {
+  return _c('OrTeleport', {
+    attrs: {
+      "disabled": _vm.isActive
+    }
+  }, [_c('div', {
+    ref: "root",
     class: _vm.classes
   }, [_c('TransitionGroup', {
-    class: ['contents'],
     attrs: {
       "name": _vm.transitionName
     },
@@ -206,14 +214,14 @@ var __vue_render__ = function () {
         }
       }
     }, 'OrToast', toastConfiguration.toastProps, false));
-  }), 1)], 1)]) : _vm._e();
+  }), 1)], 1)]);
 };
 var __vue_staticRenderFns__ = [];
 
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-0eb6626c";
+const __vue_scope_id__ = "data-v-9c5633de";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/bundled/v2/components/OrToastContainerV3/OrToastContainer.vue.d.ts

@@ -15,6 +15,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     clearAll: () => void;
     getItem: (condition: (i: ToastConfiguration, index: number, queue: import("@vue/composition-api").Ref<ToastConfiguration>[]) => boolean) => import("@vue/composition-api").Ref<ToastConfiguration>;
     queue: import("@vue/composition-api").ComputedRef<ToastConfiguration[]>;
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     createToast: (toastConfiguration: ToastConfiguration) => void;
     toastUpdate: (toast: ToastConfiguration) => void;
     toastRemove: (toast: ToastConfiguration) => void;
@@ -66,6 +67,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     clearAll: () => void;
     getItem: (condition: (i: ToastConfiguration, index: number, queue: import("@vue/composition-api").Ref<ToastConfiguration>[]) => boolean) => import("@vue/composition-api").Ref<ToastConfiguration>;
     queue: import("@vue/composition-api").ComputedRef<ToastConfiguration[]>;
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     createToast: (toastConfiguration: ToastConfiguration) => void;
     toastUpdate: (toast: ToastConfiguration) => void;
     toastRemove: (toast: ToastConfiguration) => void;

package/dist/bundled/v3/{OrToastContainer.vue_vue_type_script_lang-16a49a54.js → OrToastContainer.vue_vue_type_script_lang-16a4b52c.js}

@@ -1,11 +1,12 @@
 import { useToggle } from '@vueuse/core';
-import { defineComponent, computed, onBeforeMount, onBeforeUnmount, nextTick } from 'vue-demi';
+import { defineComponent, ref, computed, onBeforeMount, onBeforeUnmount, nextTick } from 'vue-demi';
 import useQueue from './components/OrToastV3/composable/useQueue.js';
 import useToastEventBus from './components/OrToastV3/composable/useToastEventBus.js';
 import script$2 from './components/OrToastV3/OrToast.js';
 import { P as PositionsX, a as PositionsY, T as TransitionType } from './props-7be029c7.js';
 import { ToastContainer, ToastContainerPositions } from './components/OrToastV3/styles.js';
 import './components/OrTeleportV3/OrTeleport.js';
+import { useElevation } from './hooks/useElevation.js';
 import { s as script$1 } from './OrTeleport.vue3.vue_vue_type_script_lang-a6ce162e.js';
 
 var script = defineComponent({
@@ -32,6 +33,8 @@ var script = defineComponent({
     }
   },
   setup(props) {
+    // Refs
+    const root = ref();
     const {
       on,
       off
@@ -121,6 +124,7 @@ var script = defineComponent({
       off('toastUpdate', toastUpdate);
       off('toastCloseAll', clearAll);
     });
+    useElevation(root, isActive);
     return {
       on,
       off,
@@ -133,6 +137,7 @@ var script = defineComponent({
       clearAll,
       getItem,
       queue,
+      root,
       createToast,
       toastUpdate,
       toastRemove,

package/dist/bundled/v3/components/OrToastContainerV3/OrToastContainer.js

@@ -1,6 +1,6 @@
-import { s as script } from '../../OrToastContainer.vue_vue_type_script_lang-16a49a54.js';
-export { s as default } from '../../OrToastContainer.vue_vue_type_script_lang-16a49a54.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, normalizeClass, createVNode, TransitionGroup, createElementBlock, Fragment, renderList, mergeProps, createCommentVNode } from 'vue';
+import { s as script } from '../../OrToastContainer.vue_vue_type_script_lang-16a4b52c.js';
+export { s as default } from '../../OrToastContainer.vue_vue_type_script_lang-16a4b52c.js';
+import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, normalizeClass, createVNode, TransitionGroup, createElementBlock, Fragment, renderList, mergeProps } from 'vue';
 import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
 import '@vueuse/core';
 import 'vue-demi';
@@ -44,14 +44,14 @@ import '../OrLoaderV3/styles.js';
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrToast = resolveComponent("OrToast");
   const _component_OrTeleport = resolveComponent("OrTeleport");
-  return _ctx.isActive ? (openBlock(), createBlock(_component_OrTeleport, {
-    key: 0
+  return openBlock(), createBlock(_component_OrTeleport, {
+    disabled: _ctx.isActive
   }, {
     default: withCtx(() => [createElementVNode("div", {
+      ref: "root",
       class: normalizeClass(_ctx.classes)
     }, [createVNode(TransitionGroup, {
       name: _ctx.transitionName,
-      class: normalizeClass(['contents']),
       onAfterLeave: _ctx.onToastHidden
     }, {
       default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.queue, toastConfiguration => {
@@ -68,10 +68,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8 /* PROPS */, ["name", "onAfterLeave"])], 2 /* CLASS */)]),
 
     _: 1 /* STABLE */
-  })) : createCommentVNode("v-if", true);
+  }, 8 /* PROPS */, ["disabled"]);
 }
 
-var css_248z = ".or-toast-container[data-v-f1d54776] {\n  z-index: 26;\n}\n.or-toast--transition-slide-enter-active[data-v-f1d54776],\n.or-toast--transition-slide-leave-active[data-v-f1d54776] {\n  transition: transform 0.4s ease;\n}\n.or-toast--transition-slide-enter-from.or-toast--position-right[data-v-f1d54776],\n.or-toast--transition-slide-leave-to.or-toast--position-right[data-v-f1d54776] {\n  transform: translateX(999px);\n}\n.or-toast--transition-slide-enter-from.or-toast--position-left[data-v-f1d54776],\n.or-toast--transition-slide-leave-to.or-toast--position-left[data-v-f1d54776] {\n  transform: translateX(-999px);\n}\n.or-toast--transition-fade-enter-active[data-v-f1d54776],\n.or-toast--transition-fade-leave-active[data-v-f1d54776] {\n  transition: opacity 0.4s ease;\n}\n.or-toast--transition-fade-enter-from[data-v-f1d54776],\n.or-toast--transition-fade-leave-to[data-v-f1d54776] {\n  opacity: 0;\n}";
+var css_248z = ".or-toast--transition-slide-enter-active[data-v-f1d54776],\n.or-toast--transition-slide-leave-active[data-v-f1d54776] {\n  transition: transform 0.4s ease;\n}\n.or-toast--transition-slide-enter-from.or-toast--position-right[data-v-f1d54776],\n.or-toast--transition-slide-leave-to.or-toast--position-right[data-v-f1d54776] {\n  transform: translateX(999px);\n}\n.or-toast--transition-slide-enter-from.or-toast--position-left[data-v-f1d54776],\n.or-toast--transition-slide-leave-to.or-toast--position-left[data-v-f1d54776] {\n  transform: translateX(-999px);\n}\n.or-toast--transition-fade-enter-active[data-v-f1d54776],\n.or-toast--transition-fade-leave-active[data-v-f1d54776] {\n  transition: opacity 0.4s ease;\n}\n.or-toast--transition-fade-enter-from[data-v-f1d54776],\n.or-toast--transition-fade-leave-to[data-v-f1d54776] {\n  opacity: 0;\n}";
 styleInject(css_248z);
 
 script.render = render;

package/dist/bundled/v3/components/OrToastContainerV3/OrToastContainer.vue.d.ts

@@ -15,6 +15,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     clearAll: () => void;
     getItem: (condition: (i: ToastConfiguration, index: number, queue: import("@vue/composition-api").Ref<ToastConfiguration>[]) => boolean) => import("@vue/composition-api").Ref<ToastConfiguration>;
     queue: import("@vue/composition-api").ComputedRef<ToastConfiguration[]>;
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     createToast: (toastConfiguration: ToastConfiguration) => void;
     toastUpdate: (toast: ToastConfiguration) => void;
     toastRemove: (toast: ToastConfiguration) => void;
@@ -66,6 +67,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     clearAll: () => void;
     getItem: (condition: (i: ToastConfiguration, index: number, queue: import("@vue/composition-api").Ref<ToastConfiguration>[]) => boolean) => import("@vue/composition-api").Ref<ToastConfiguration>;
     queue: import("@vue/composition-api").ComputedRef<ToastConfiguration[]>;
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     createToast: (toastConfiguration: ToastConfiguration) => void;
     toastUpdate: (toast: ToastConfiguration) => void;
     toastRemove: (toast: ToastConfiguration) => void;

package/dist/bundled/v3/components/OrToastContainerV3/index.js

@@ -1,6 +1,6 @@
 export { t as TypesV3 } from '../../types-668300dd.js';
 export { p as PropsV3 } from '../../props-7be029c7.js';
-export { s as OrToastContainerV3 } from '../../OrToastContainer.vue_vue_type_script_lang-16a49a54.js';
+export { s as OrToastContainerV3 } from '../../OrToastContainer.vue_vue_type_script_lang-16a4b52c.js';
 export { default as useToastV3 } from '../OrToastV3/composable/useToast.js';
 export { default as useQueueV3 } from '../OrToastV3/composable/useQueue.js';
 import '@vueuse/core';

package/dist/bundled/v3/components/OrToastV3/index.js

@@ -1,7 +1,7 @@
 export { t as TypesV3 } from '../../types-668300dd.js';
 export { p as PropsV3 } from '../../props-7be029c7.js';
 export { default as OrToastV3 } from './OrToast.js';
-export { s as OrToastContainerV3 } from '../../OrToastContainer.vue_vue_type_script_lang-16a49a54.js';
+export { s as OrToastContainerV3 } from '../../OrToastContainer.vue_vue_type_script_lang-16a4b52c.js';
 export { default as useToastV3 } from './composable/useToast.js';
 export { default as useQueueV3 } from './composable/useQueue.js';
 import 'vue-demi';

package/dist/bundled/v3/components/index.js

@@ -146,7 +146,7 @@ export { default as useToast } from './OrToast/composable/useToast.js';
 export { default as useQueue } from './OrToast/composable/useQueue.js';
 export { PositionsX, PositionsY, ToastType, TransitionType } from './OrToast/constants.js';
 export { default as OrToastV3 } from './OrToastV3/OrToast.js';
-export { s as OrToastContainerV3 } from '../OrToastContainer.vue_vue_type_script_lang-16a49a54.js';
+export { s as OrToastContainerV3 } from '../OrToastContainer.vue_vue_type_script_lang-16a4b52c.js';
 export { t as TypesV3 } from '../types-668300dd.js';
 export { p as PropsV3 } from '../props-7be029c7.js';
 export { default as useToastV3 } from './OrToastV3/composable/useToast.js';

package/dist/bundled/v3/index.js

@@ -123,7 +123,7 @@ import './components/OrToastContainer/OrToastContainer.js';
 export { s as OrToastContainer } from './OrToastContainer.vue_vue_type_script_lang-70cc38be.js';
 export { default as useToast } from './components/OrToast/composable/useToast.js';
 import './components/OrToastContainerV3/OrToastContainer.js';
-export { s as OrToastContainerV3 } from './OrToastContainer.vue_vue_type_script_lang-16a49a54.js';
+export { s as OrToastContainerV3 } from './OrToastContainer.vue_vue_type_script_lang-16a4b52c.js';
 export { default as useToastV3 } from './components/OrToastV3/composable/useToast.js';
 export { OR_AVATAR_SIZE } from './components/OrAvatar/constants.js';
 export { AvatarColor, AvatarSize } from './components/OrAvatarV3/props.js';

package/dist/esm/v2/components/index.js

@@ -105,7 +105,7 @@ export { _ as OrTextbox, T as TextboxTypes } from '../OrTextbox-0373bd6a.js';
 export { _ as OrTimePickerV3 } from '../OrTimePicker-038ceb81.js';
 export { _ as OrToast, a as OrToastContainer } from '../OrToastContainer-1625b803.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from '../useToast-4fbe0e5a.js';
-export { a as OrToastContainerV3, _ as OrToastV3, t as TypesV3 } from '../types-b674518e.js';
+export { a as OrToastContainerV3, _ as OrToastV3, t as TypesV3 } from '../types-5646f386.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../useToast-0665462d.js';
 export { _ as OrTooltip } from '../OrTooltip-97a42707.js';
 export { _ as OrTooltipContent } from '../OrTooltipContent-d85e1071.js';

package/dist/esm/v2/components/or-toast-v3/index.js

@@ -1,7 +1,8 @@
-export { a as OrToastContainerV3, _ as OrToastV3, t as TypesV3 } from '../../types-b674518e.js';
+export { a as OrToastContainerV3, _ as OrToastV3, t as TypesV3 } from '../../types-5646f386.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../../useToast-0665462d.js';
 import '@vueuse/core';
 import 'vue-demi';
+import '../../useElevation-df91fa50.js';
 import '../../OrTeleport.vue2-fb92f29f.js';
 import 'portal-vue';
 import '../../normalize-component-6e8e3d80.js';
@@ -10,7 +11,6 @@ import '../../OrIcon-d35a84d8.js';
 import '../../OrTooltip-b7290ed1.js';
 import '../../OrPopover-c902e2fd.js';
 import '@floating-ui/dom';
-import '../../useElevation-df91fa50.js';
 import '../../useResponsive-a02e95b7.js';
 import '../../OrBottomSheet-0938dbde.js';
 import '../../OrOverlay-b1609eef.js';

package/dist/esm/v2/components/or-toast-v3/or-toast-container-v3/OrToastContainer.vue.d.ts

@@ -15,6 +15,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     clearAll: () => void;
     getItem: (condition: (i: ToastConfiguration, index: number, queue: import("@vue/composition-api").Ref<ToastConfiguration>[]) => boolean) => import("@vue/composition-api").Ref<ToastConfiguration>;
     queue: import("@vue/composition-api").ComputedRef<ToastConfiguration[]>;
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     createToast: (toastConfiguration: ToastConfiguration) => void;
     toastUpdate: (toast: ToastConfiguration) => void;
     toastRemove: (toast: ToastConfiguration) => void;
@@ -66,6 +67,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     clearAll: () => void;
     getItem: (condition: (i: ToastConfiguration, index: number, queue: import("@vue/composition-api").Ref<ToastConfiguration>[]) => boolean) => import("@vue/composition-api").Ref<ToastConfiguration>;
     queue: import("@vue/composition-api").ComputedRef<ToastConfiguration[]>;
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     createToast: (toastConfiguration: ToastConfiguration) => void;
     toastUpdate: (toast: ToastConfiguration) => void;
     toastRemove: (toast: ToastConfiguration) => void;

package/dist/esm/v2/components/or-toast-v3/or-toast-container-v3/index.js

@@ -1,7 +1,8 @@
-export { a as OrToastContainerV3, t as TypesV3 } from '../../../types-b674518e.js';
+export { a as OrToastContainerV3, t as TypesV3 } from '../../../types-5646f386.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../../../useToast-0665462d.js';
 import '@vueuse/core';
 import 'vue-demi';
+import '../../../useElevation-df91fa50.js';
 import '../../../OrTeleport.vue2-fb92f29f.js';
 import 'portal-vue';
 import '../../../normalize-component-6e8e3d80.js';
@@ -10,7 +11,6 @@ import '../../../OrIcon-d35a84d8.js';
 import '../../../OrTooltip-b7290ed1.js';
 import '../../../OrPopover-c902e2fd.js';
 import '@floating-ui/dom';
-import '../../../useElevation-df91fa50.js';
 import '../../../useResponsive-a02e95b7.js';
 import '../../../OrBottomSheet-0938dbde.js';
 import '../../../OrOverlay-b1609eef.js';

package/dist/esm/v2/index.js

@@ -105,7 +105,7 @@ export { _ as OrTextbox, T as TextboxTypes } from './OrTextbox-0373bd6a.js';
 export { _ as OrTimePickerV3 } from './OrTimePicker-038ceb81.js';
 export { _ as OrToast, a as OrToastContainer } from './OrToastContainer-1625b803.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-4fbe0e5a.js';
-export { a as OrToastContainerV3, _ as OrToastV3, t as TypesV3 } from './types-b674518e.js';
+export { a as OrToastContainerV3, _ as OrToastV3, t as TypesV3 } from './types-5646f386.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-0665462d.js';
 export { _ as OrTooltip } from './OrTooltip-97a42707.js';
 export { _ as OrTooltipContent } from './OrTooltipContent-d85e1071.js';

package/dist/esm/v2/{types-b674518e.js → types-5646f386.js}

@@ -1,5 +1,6 @@
 import { useToggle } from '@vueuse/core';
 import { defineComponent, ref, computed, onBeforeMount, onBeforeUnmount, nextTick } from 'vue-demi';
+import { u as useElevation } from './useElevation-df91fa50.js';
 import { _ as __vue_component__$4 } from './OrTeleport.vue2-fb92f29f.js';
 import { T as ToastType, P as PositionsX, b as PositionsY, c as TransitionType, d as useToastEventBus, a as useQueue } from './useToast-0665462d.js';
 import { _ as __vue_component__$2 } from './OrIconButton-0ec2cda6.js';
@@ -252,6 +253,8 @@ var script = defineComponent({
     }
   },
   setup(props) {
+    // Refs
+    const root = ref();
     const {
       on,
       off
@@ -341,6 +344,7 @@ var script = defineComponent({
       off('toastUpdate', toastUpdate);
       off('toastCloseAll', clearAll);
     });
+    useElevation(root, isActive);
     return {
       on,
       off,
@@ -353,6 +357,7 @@ var script = defineComponent({
       clearAll,
       getItem,
       queue,
+      root,
       createToast,
       toastUpdate,
       toastRemove,
@@ -364,7 +369,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = ".or-toast-container[data-v-0eb6626c]{z-index:26}.or-toast--transition-slide-enter-active[data-v-0eb6626c],.or-toast--transition-slide-leave-active[data-v-0eb6626c]{transition:transform .4s ease}.or-toast--transition-slide-enter-from.or-toast--position-right[data-v-0eb6626c],.or-toast--transition-slide-leave-to.or-toast--position-right[data-v-0eb6626c]{transform:translateX(999px)}.or-toast--transition-slide-enter-from.or-toast--position-left[data-v-0eb6626c],.or-toast--transition-slide-leave-to.or-toast--position-left[data-v-0eb6626c]{transform:translateX(-999px)}.or-toast--transition-fade-enter-active[data-v-0eb6626c],.or-toast--transition-fade-leave-active[data-v-0eb6626c]{transition:opacity .4s ease}.or-toast--transition-fade-enter-from[data-v-0eb6626c],.or-toast--transition-fade-leave-to[data-v-0eb6626c]{opacity:0}";
+var css_248z = ".or-toast--transition-slide-enter-active[data-v-9c5633de],.or-toast--transition-slide-leave-active[data-v-9c5633de]{transition:transform .4s ease}.or-toast--transition-slide-enter-from.or-toast--position-right[data-v-9c5633de],.or-toast--transition-slide-leave-to.or-toast--position-right[data-v-9c5633de]{transform:translateX(999px)}.or-toast--transition-slide-enter-from.or-toast--position-left[data-v-9c5633de],.or-toast--transition-slide-leave-to.or-toast--position-left[data-v-9c5633de]{transform:translateX(-999px)}.or-toast--transition-fade-enter-active[data-v-9c5633de],.or-toast--transition-fade-leave-active[data-v-9c5633de]{transition:opacity .4s ease}.or-toast--transition-fade-enter-from[data-v-9c5633de],.or-toast--transition-fade-leave-to[data-v-9c5633de]{opacity:0}";
 styleInject(css_248z);
 
 /* script */
@@ -374,10 +379,14 @@ var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _vm.isActive ? _c('OrTeleport', [_c('div', {
+  return _c('OrTeleport', {
+    attrs: {
+      "disabled": _vm.isActive
+    }
+  }, [_c('div', {
+    ref: "root",
     class: _vm.classes
   }, [_c('TransitionGroup', {
-    class: ['contents'],
     attrs: {
       "name": _vm.transitionName
     },
@@ -402,14 +411,14 @@ var __vue_render__ = function () {
         }
       }
     }, 'OrToast', toastConfiguration.toastProps, false));
-  }), 1)], 1)]) : _vm._e();
+  }), 1)], 1)]);
 };
 var __vue_staticRenderFns__ = [];
 
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-0eb6626c";
+const __vue_scope_id__ = "data-v-9c5633de";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v3/components/index.js

@@ -103,7 +103,7 @@ export { s as OrTextbox, T as TextboxTypes } from '../OrTextbox-f7388a30.js';
 export { s as OrTimePickerV3 } from '../OrTimePicker-2fe3c573.js';
 export { s as OrToast, a as OrToastContainer } from '../OrToastContainer-94ba2803.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from '../useToast-4fbe0e5a.js';
-export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from '../types-9034029d.js';
+export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from '../types-0a697fe0.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../useToast-0665462d.js';
 export { s as OrTooltip } from '../OrTooltip-618ce7c9.js';
 export { s as OrTooltipContent } from '../OrTooltipContent-37a5f562.js';

package/dist/esm/v3/components/or-toast-v3/index.js

@@ -1,7 +1,8 @@
-export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from '../../types-9034029d.js';
+export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from '../../types-0a697fe0.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../../useToast-0665462d.js';
 import '@vueuse/core';
 import 'vue-demi';
+import '../../useElevation-df91fa50.js';
 import '../../OrTeleport.vue3-8099178c.js';
 import 'vue';
 import '../../OrIconButton-46b3c1e2.js';
@@ -9,7 +10,6 @@ import '../../OrIcon-62793572.js';
 import '../../OrTooltip-e3c85390.js';
 import '../../OrPopover-e34e8f6c.js';
 import '@floating-ui/dom';
-import '../../useElevation-df91fa50.js';
 import '../../useResponsive-a02e95b7.js';
 import '../../OrBottomSheet-6538d9c3.js';
 import '../../OrOverlay-d63d39c3.js';

package/dist/esm/v3/components/or-toast-v3/or-toast-container-v3/OrToastContainer.vue.d.ts

@@ -15,6 +15,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     clearAll: () => void;
     getItem: (condition: (i: ToastConfiguration, index: number, queue: import("@vue/composition-api").Ref<ToastConfiguration>[]) => boolean) => import("@vue/composition-api").Ref<ToastConfiguration>;
     queue: import("@vue/composition-api").ComputedRef<ToastConfiguration[]>;
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     createToast: (toastConfiguration: ToastConfiguration) => void;
     toastUpdate: (toast: ToastConfiguration) => void;
     toastRemove: (toast: ToastConfiguration) => void;
@@ -66,6 +67,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     clearAll: () => void;
     getItem: (condition: (i: ToastConfiguration, index: number, queue: import("@vue/composition-api").Ref<ToastConfiguration>[]) => boolean) => import("@vue/composition-api").Ref<ToastConfiguration>;
     queue: import("@vue/composition-api").ComputedRef<ToastConfiguration[]>;
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     createToast: (toastConfiguration: ToastConfiguration) => void;
     toastUpdate: (toast: ToastConfiguration) => void;
     toastRemove: (toast: ToastConfiguration) => void;

package/dist/esm/v3/components/or-toast-v3/or-toast-container-v3/index.js

@@ -1,7 +1,8 @@
-export { a as OrToastContainerV3, t as TypesV3 } from '../../../types-9034029d.js';
+export { a as OrToastContainerV3, t as TypesV3 } from '../../../types-0a697fe0.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../../../useToast-0665462d.js';
 import '@vueuse/core';
 import 'vue-demi';
+import '../../../useElevation-df91fa50.js';
 import '../../../OrTeleport.vue3-8099178c.js';
 import 'vue';
 import '../../../OrIconButton-46b3c1e2.js';
@@ -9,7 +10,6 @@ import '../../../OrIcon-62793572.js';
 import '../../../OrTooltip-e3c85390.js';
 import '../../../OrPopover-e34e8f6c.js';
 import '@floating-ui/dom';
-import '../../../useElevation-df91fa50.js';
 import '../../../useResponsive-a02e95b7.js';
 import '../../../OrBottomSheet-6538d9c3.js';
 import '../../../OrOverlay-d63d39c3.js';

package/dist/esm/v3/index.js

@@ -103,7 +103,7 @@ export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-f7388a30.js';
 export { s as OrTimePickerV3 } from './OrTimePicker-2fe3c573.js';
 export { s as OrToast, a as OrToastContainer } from './OrToastContainer-94ba2803.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-4fbe0e5a.js';
-export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-9034029d.js';
+export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-0a697fe0.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-0665462d.js';
 export { s as OrTooltip } from './OrTooltip-618ce7c9.js';
 export { s as OrTooltipContent } from './OrTooltipContent-37a5f562.js';

package/dist/esm/v3/{types-9034029d.js → types-0a697fe0.js}

@@ -1,5 +1,6 @@
 import { useToggle } from '@vueuse/core';
 import { defineComponent, ref, computed, onBeforeMount, onBeforeUnmount, nextTick } from 'vue-demi';
+import { u as useElevation } from './useElevation-df91fa50.js';
 import { s as script$4 } from './OrTeleport.vue3-8099178c.js';
 import { T as ToastType, P as PositionsX, b as PositionsY, c as TransitionType, d as useToastEventBus, a as useQueue } from './useToast-0665462d.js';
 import { s as script$2 } from './OrIconButton-46b3c1e2.js';
@@ -222,6 +223,8 @@ var script = defineComponent({
     }
   },
   setup(props) {
+    // Refs
+    const root = ref();
     const {
       on,
       off
@@ -311,6 +314,7 @@ var script = defineComponent({
       off('toastUpdate', toastUpdate);
       off('toastCloseAll', clearAll);
     });
+    useElevation(root, isActive);
     return {
       on,
       off,
@@ -323,6 +327,7 @@ var script = defineComponent({
       clearAll,
       getItem,
       queue,
+      root,
       createToast,
       toastUpdate,
       toastRemove,
@@ -337,14 +342,14 @@ var script = defineComponent({
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrToast = resolveComponent("OrToast");
   const _component_OrTeleport = resolveComponent("OrTeleport");
-  return _ctx.isActive ? (openBlock(), createBlock(_component_OrTeleport, {
-    key: 0
+  return openBlock(), createBlock(_component_OrTeleport, {
+    disabled: _ctx.isActive
   }, {
     default: withCtx(() => [createElementVNode("div", {
+      ref: "root",
       class: normalizeClass(_ctx.classes)
     }, [createVNode(TransitionGroup, {
       name: _ctx.transitionName,
-      class: normalizeClass(['contents']),
       onAfterLeave: _ctx.onToastHidden
     }, {
       default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.queue, toastConfiguration => {
@@ -361,10 +366,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8 /* PROPS */, ["name", "onAfterLeave"])], 2 /* CLASS */)]),
 
     _: 1 /* STABLE */
-  })) : createCommentVNode("v-if", true);
+  }, 8 /* PROPS */, ["disabled"]);
 }
 
-var css_248z = ".or-toast-container[data-v-f1d54776] {\n  z-index: 26;\n}\n.or-toast--transition-slide-enter-active[data-v-f1d54776],\n.or-toast--transition-slide-leave-active[data-v-f1d54776] {\n  transition: transform 0.4s ease;\n}\n.or-toast--transition-slide-enter-from.or-toast--position-right[data-v-f1d54776],\n.or-toast--transition-slide-leave-to.or-toast--position-right[data-v-f1d54776] {\n  transform: translateX(999px);\n}\n.or-toast--transition-slide-enter-from.or-toast--position-left[data-v-f1d54776],\n.or-toast--transition-slide-leave-to.or-toast--position-left[data-v-f1d54776] {\n  transform: translateX(-999px);\n}\n.or-toast--transition-fade-enter-active[data-v-f1d54776],\n.or-toast--transition-fade-leave-active[data-v-f1d54776] {\n  transition: opacity 0.4s ease;\n}\n.or-toast--transition-fade-enter-from[data-v-f1d54776],\n.or-toast--transition-fade-leave-to[data-v-f1d54776] {\n  opacity: 0;\n}";
+var css_248z = ".or-toast--transition-slide-enter-active[data-v-f1d54776],\n.or-toast--transition-slide-leave-active[data-v-f1d54776] {\n  transition: transform 0.4s ease;\n}\n.or-toast--transition-slide-enter-from.or-toast--position-right[data-v-f1d54776],\n.or-toast--transition-slide-leave-to.or-toast--position-right[data-v-f1d54776] {\n  transform: translateX(999px);\n}\n.or-toast--transition-slide-enter-from.or-toast--position-left[data-v-f1d54776],\n.or-toast--transition-slide-leave-to.or-toast--position-left[data-v-f1d54776] {\n  transform: translateX(-999px);\n}\n.or-toast--transition-fade-enter-active[data-v-f1d54776],\n.or-toast--transition-fade-leave-active[data-v-f1d54776] {\n  transition: opacity 0.4s ease;\n}\n.or-toast--transition-fade-enter-from[data-v-f1d54776],\n.or-toast--transition-fade-leave-to[data-v-f1d54776] {\n  opacity: 0;\n}";
 styleInject(css_248z);
 
 script.render = render;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "4.3.4-beta.2631.0",
+  "version": "4.3.5-beta.2633.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",

package/src/components/or-toast-v3/OrToast.stories3.ts

@@ -51,9 +51,9 @@ const Template: StoryFn<typeof OrToast> = (args) => ({
   },
 });
 
-export const Default = Template.bind({});
+export const Toast = Template.bind({});
 
-Default.args = {
+Toast.args = {
   messageText: Faker.lorem.words(7),
   link: {
     href: '#',

package/src/components/or-toast-v3/or-toast-container-v3/OrToastContainer.stories3.ts

@@ -2,13 +2,14 @@ import { StoryFn } from '@storybook/vue3';
 import * as Faker from 'faker';
 import { ref } from 'vue-demi';
 import { OrButtonV3 } from '../../or-button-v3';
+import { OrModalV3 } from '../../or-modal-v3';
 import OrToastContainerV3 from './OrToastContainer.vue';
-import { TypesV3, useToastV3 } from './index';
+import { useToastV3 } from './index';
 import OrToastContainerDocs from './OrToastContainer.docs.mdx';
 import { PositionsX, PositionsY, TransitionType } from '../props';
 
 export default {
-  title: 'Components/OrToastContainer',
+  title: 'Components/Toast/Container',
   component: OrToastContainerV3,
   argTypes: {
     position: {
@@ -39,15 +40,47 @@ export default {
 const Template: StoryFn<typeof OrToastContainerV3> = (args) => {
   return {
     components: {
-      OrToastContainerV3,
+      OrToastContainer: OrToastContainerV3,
       OrButton: OrButtonV3,
     },
+    setup() {
+      const { success, clearAll } = useToastV3();
+      const button = ref();
+      return {
+        args,
+        button,
+        success,
+        clearAll,
+        showToast() {
+          success({
+            messageText: Faker.lorem.words(7),
+          });
+        },
+      };
+    },
     template: `
       <div class="contents">
-        <or-toast-container-v3 v-bind="args" />
+        <or-toast-container v-bind="args" />
         <or-button @click="showToast"><span>Click me!!!</span></or-button>
       </div>
     `,
+  };
+};
+export const Container = Template.bind({});
+Container.args = {
+  position: {
+    positionX: PositionsX.Right,
+    positionY: PositionsY.Bottom,
+  },
+};
+
+const TemplateModal: StoryFn<typeof OrToastContainerV3> = (args) => {
+  return {
+    components: {
+      OrToastContainer: OrToastContainerV3,
+      OrButton: OrButtonV3,
+      OrModal: OrModalV3,
+    },
     setup() {
       const { success, clearAll } = useToastV3();
       const button = ref();
@@ -56,19 +89,29 @@ const Template: StoryFn<typeof OrToastContainerV3> = (args) => {
         button,
         success,
         clearAll,
+        showToast() {
+          success({
+            messageText: Faker.lorem.words(7),
+          });
+        },
       };
     },
-    methods: {
-      showToast() {
-        (this as any).success({
-          messageText: Faker.lorem.words(7),
-        } as TypesV3.ToastProps);
-      },
-    },
+    template: `
+      <div class="contents">
+        <or-toast-container v-bind="args" />
+        <OrModal
+          :is-open="true"
+        >
+          <or-button @click="showToast">
+            Trigger toast
+          </or-button>
+        </OrModal>
+      </div>
+    `,
   };
 };
-export const ToastDefault = Template.bind({});
-ToastDefault.args = {
+export const ContainerWithModal = TemplateModal.bind({});
+ContainerWithModal.args = {
   position: {
     positionX: PositionsX.Right,
     positionY: PositionsY.Bottom,

package/src/components/or-toast-v3/or-toast-container-v3/OrToastContainer.vue

@@ -1,9 +1,13 @@
 <template>
-  <OrTeleport v-if="isActive">
-    <div :class="classes">
+  <OrTeleport
+    :disabled="isActive"
+  >
+    <div
+      ref="root"
+      :class="classes"
+    >
       <TransitionGroup
         :name="transitionName"
-        :class="['contents']"
         @after-leave="onToastHidden"
       >
         <OrToast
@@ -22,7 +26,8 @@
 
 <script lang="ts">
 import { useToggle } from '@vueuse/core';
-import { computed, defineComponent, nextTick, onBeforeMount, onBeforeUnmount, PropType } from 'vue-demi';
+import { computed, defineComponent, nextTick, onBeforeMount, onBeforeUnmount, PropType, ref } from 'vue-demi';
+import { useElevation } from '../../../hooks';
 import { OrTeleportV3 as OrTeleport } from '../../or-teleport-v3';
 import useQueue from '../composable/useQueue';
 import useToastEventBus from '../composable/useToastEventBus';
@@ -60,6 +65,9 @@ export default defineComponent({
   },
 
   setup(props) {
+    // Refs
+    const root = ref<HTMLElement>();
+
     const { on, off } = useToastEventBus();
     const { queue: queueRef, addItem, removeItem, clearAll, getItem } = useQueue<ToastConfiguration>();
     const [isActive, toggle] = useToggle(false);
@@ -150,6 +158,8 @@ export default defineComponent({
       off('toastCloseAll', clearAll);
     });
 
+    useElevation(root, isActive);
+
     return {
       on,
       off,
@@ -162,6 +172,7 @@ export default defineComponent({
       clearAll,
       getItem,
       queue,
+      root,
       createToast,
       toastUpdate,
       toastRemove,
@@ -175,15 +186,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-$overlay-z-index: 25;
-$or-toast-z-index: $overlay-z-index + 1;
 $header-height: 48px;
 $spacing: 32px;
 
-.or-toast-container {
-  z-index: $or-toast-z-index;
-}
-
 .or-toast--transition-slide-enter-active,
 .or-toast--transition-slide-leave-active {
   transition: transform 0.4s ease;