@onereach/ui-components 4.6.1-beta.2771.0 → 4.6.1

package/dist/esm/v2/{OrInlineTextarea-bbbb2b82.js → OrInlineTextarea-7cc45396.js}

@@ -4,7 +4,7 @@ import '@vueuse/core';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { _ as __vue_component__$1 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$2 } from './OrHint-aa221198.js';
-import { _ as __vue_component__$3 } from './OrIconButton-4fdb749c.js';
+import { _ as __vue_component__$3 } from './OrIconButton-ee747c71.js';
 import { _ as __vue_component__$4 } from './OrInlineInputBox-19b49ee6.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/esm/v2/{OrInput-bc2371b6.js → OrInput-014d2e47.js}

@@ -1,10 +1,10 @@
 import { defineComponent, ref, getCurrentInstance } from 'vue-demi';
 import { p as pxToRem } from './px-to-rem-0b26b83e.js';
-import { s as setStyle, r as requestAF, d as getCS, a as reflow, c as cancelAF } from './dom-7a41831b.js';
-import { _ as __vue_component__$1 } from './OrLabel-931394a5.js';
-import { _ as __vue_component__$2 } from './OrHint-fe65fbe6.js';
+import { s as setStyle, r as requestAF, d as getCS, a as reflow, c as cancelAF } from './dom-f1d55b67.js';
+import { _ as __vue_component__$1 } from './OrLabel-fcceec1b.js';
+import { _ as __vue_component__$2 } from './OrHint-7eadc91e.js';
 import { _ as __vue_component__$3 } from './OrError-efc74907.js';
-import { _ as __vue_component__$4 } from './OrCollapse-57c64292.js';
+import { _ as __vue_component__$4 } from './OrCollapse-9b5d590f.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrInput-166bf64a.js → OrInput-8c7b3cce.js}

@@ -5,7 +5,7 @@ import { u as useResponsive } from './useResponsive-a02e95b7.js';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { _ as __vue_component__$1 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$2 } from './OrHint-aa221198.js';
-import { _ as __vue_component__$4 } from './OrIconButton-4fdb749c.js';
+import { _ as __vue_component__$4 } from './OrIconButton-ee747c71.js';
 import { _ as __vue_component__$3 } from './OrIcon-d35a84d8.js';
 import { _ as __vue_component__$5 } from './OrInputBox-d36b1323.js';
 import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-fe250f7a.js';

package/dist/esm/v2/{OrLabel-931394a5.js → OrLabel-fcceec1b.js}

@@ -1,5 +1,4 @@
 import { defineComponent } from 'vue-demi';
-import _ from 'lodash';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
@@ -31,12 +30,17 @@ var script = defineComponent({
       }, this.$attrs.class];
     },
     localAttrs() {
-      return _.omit(this.$attrs, 'class');
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+      const {
+        class: _,
+        ...rest
+      } = this.$attrs;
+      return rest;
     }
   }
 });
 
-var css_248z = "@keyframes spinAround-data-v-6ae86761{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-6ae86761{from{opacity:1}to{opacity:0}}.or-label[data-v-6ae86761]{width:100%;font-size:var(--fs-0);line-height:var(--lh-0);color:var(--c-neutral-4)}.or-label-content[data-v-6ae86761]{display:block;overflow:hidden;text-overflow:ellipsis;word-break:break-all;white-space:nowrap}.or-label .or-icon[data-v-6ae86761]{font-size:var(--fs-1)}.or-label.has-slot[data-v-6ae86761]{display:flex;align-items:center}.or-label.has-slot .or-label-content[data-v-6ae86761]{margin-right:auto}";
+var css_248z = "@keyframes spinAround-data-v-4e92a5c3{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-4e92a5c3{from{opacity:1}to{opacity:0}}.or-label[data-v-4e92a5c3]{width:100%;font-size:var(--fs-0);line-height:var(--lh-0);color:var(--c-neutral-4)}.or-label-content[data-v-4e92a5c3]{display:block;overflow:hidden;text-overflow:ellipsis;word-break:break-all;white-space:nowrap}.or-label .or-icon[data-v-4e92a5c3]{font-size:var(--fs-1)}.or-label.has-slot[data-v-4e92a5c3]{display:flex;align-items:center}.or-label.has-slot .or-label-content[data-v-4e92a5c3]{margin-right:auto}";
 styleInject(css_248z);
 
 /* script */
@@ -59,7 +63,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-6ae86761";
+const __vue_scope_id__ = "data-v-4e92a5c3";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v2/{OrList-7de293f5.js → OrList-5ecdd0d6.js}

@@ -1,13 +1,14 @@
 import { defineComponent } from 'vue-demi';
-import _ from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';
+import isEqual from 'lodash/isEqual';
 import { v4 } from 'uuid';
-import { _ as __vue_component__$2 } from './OrLabel-931394a5.js';
-import { _ as __vue_component__$3 } from './OrButton-dbf0efe7.js';
-import { _ as __vue_component__$4 } from './OrIconButton-83608cbc.js';
-import './OrIconButton.vue_rollup-plugin-vue_styles.0-20b054cc.js';
-import { _ as __vue_component__$5 } from './OrIcon-a40e60af.js';
-import { _ as __vue_component__$1 } from './OrError-efc74907.js';
 import Sortable from 'sortablejs';
+import { _ as __vue_component__$2 } from './OrLabel-fcceec1b.js';
+import { _ as __vue_component__$3 } from './OrButton-22d9ecc5.js';
+import { _ as __vue_component__$4 } from './OrIconButton-e60f47af.js';
+import './OrIconButton.vue_rollup-plugin-vue_styles.0-8e03311b.js';
+import { _ as __vue_component__$5 } from './OrIcon-fa826b6b.js';
+import { _ as __vue_component__$1 } from './OrError-efc74907.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
@@ -33,63 +34,54 @@ var script = defineComponent({
   props: {
     modelValue: {
       type: Array,
-      required: true,
-      validator: _.isArray
+      required: true
     },
     label: {
       type: String,
       default: '',
-      required: false,
-      validator: _.isString
+      required: false
     },
     buttonLabel: {
       type: String,
       default: '',
-      required: false,
-      validator: _.isString
+      required: false
     },
     itemProps: {
       type: Object,
       default: () => ({}),
-      required: false,
-      validator: _.isObject
+      required: false
     },
     handle: {
       type: String,
       default: '',
-      required: false,
-      validator: _.isString
+      required: false
     },
     isDisabled: {
       type: Boolean,
       default: false,
-      required: false,
-      validator: _.isBoolean
+      required: false
     },
     canAdd: {
       type: Boolean,
       default: true,
-      required: false,
-      validator: _.isBoolean
+      required: false
     },
     canDelete: {
       type: Boolean,
       default: true,
-      required: false,
-      validator: _.isBoolean
+      required: false
     },
     canDrag: {
       type: Boolean,
       default: true,
-      required: false,
-      validator: _.isBoolean
+      required: false
     }
   },
   emits: ['update:modelValue', 'item-before-add', 'item-added', 'item-before-delete', 'item-deleted', 'item-before-move', 'item-move'],
   data(props) {
     return {
       sortableInstance: null,
-      items: _.cloneDeep(props.modelValue).map(getItemWithUUID)
+      items: cloneDeep(props.modelValue).map(getItemWithUUID)
     };
   },
   computed: {
@@ -109,8 +101,8 @@ var script = defineComponent({
   },
   watch: {
     modelValue(newModelValue) {
-      if (_.isEqual(newModelValue, this.items)) return;
-      this.items = _.cloneDeep(newModelValue).map(getItemWithUUID);
+      if (isEqual(newModelValue, this.items)) return;
+      this.items = cloneDeep(newModelValue).map(getItemWithUUID);
     },
     items: {
       handler(newItems) {
@@ -169,7 +161,7 @@ var script = defineComponent({
       } = _ref;
       if (this.isDisabled) return;
       this.$emit('item-before-move', this.items);
-      const result = _.cloneDeep(this.items);
+      const result = cloneDeep(this.items);
       result.splice(newIndex, 0, result.splice(oldIndex, 1)[0]);
       this.$emit('item-move', result);
       this.items = result;
@@ -177,7 +169,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "@keyframes spinAround-data-v-9b1f750a{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-9b1f750a{from{opacity:1}to{opacity:0}}.or-list[data-v-9b1f750a]{cursor:default}.or-list--header[data-v-9b1f750a]{margin-bottom:var(--s-2)}.or-list--handle[data-v-9b1f750a]{margin-right:var(--s-3);cursor:move}.or-list--add-button[data-v-9b1f750a]{min-width:0!important;height:auto!important;padding:0!important}.or-list--delete-button[data-v-9b1f750a]{margin-left:var(--s-3)}.or-list--delete-button[data-v-9b1f750a]  .or-icon{font-size:.875rem!important}.or-list--item[data-v-9b1f750a]{display:flex;align-items:center;justify-content:flex-start;width:100%;margin-bottom:var(--s-4)}.or-list--slot[data-v-9b1f750a]{width:100%}.or-list--slot>*[data-v-9b1f750a]{width:100%}.or-list.is-disabled[data-v-9b1f750a],.or-list[data-v-9b1f750a]:disabled{cursor:not-allowed}";
+var css_248z = "@keyframes spinAround-data-v-12a519d6{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-12a519d6{from{opacity:1}to{opacity:0}}.or-list[data-v-12a519d6]{cursor:default}.or-list--header[data-v-12a519d6]{margin-bottom:var(--s-2)}.or-list--handle[data-v-12a519d6]{margin-right:var(--s-3);cursor:move}.or-list--add-button[data-v-12a519d6]{min-width:0!important;height:auto!important;padding:0!important}.or-list--delete-button[data-v-12a519d6]{margin-left:var(--s-3)}.or-list--delete-button[data-v-12a519d6]  .or-icon{font-size:.875rem!important}.or-list--item[data-v-12a519d6]{display:flex;align-items:center;justify-content:flex-start;width:100%;margin-bottom:var(--s-4)}.or-list--slot[data-v-12a519d6]{width:100%}.or-list--slot>*[data-v-12a519d6]{width:100%}.or-list.is-disabled[data-v-12a519d6],.or-list[data-v-12a519d6]:disabled{cursor:not-allowed}";
 styleInject(css_248z);
 
 /* script */
@@ -278,7 +270,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-9b1f750a";
+const __vue_scope_id__ = "data-v-12a519d6";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v2/{OrListOfInputs-fa926159.js → OrListOfInputs-75414b31.js}

@@ -1,11 +1,10 @@
 import { defineComponent } from 'vue-demi';
-import _ from 'lodash';
-import { _ as __vue_component__$1 } from './OrList-7de293f5.js';
-import { _ as __vue_component__$2 } from './OrInput-bc2371b6.js';
-import { _ as __vue_component__$3 } from './OrIcon-a40e60af.js';
-import './OrButton.vue_rollup-plugin-vue_styles.0-83b5a752.js';
-import { _ as __vue_component__$4 } from './OrIconButton-83608cbc.js';
-import './OrIconButton.vue_rollup-plugin-vue_styles.0-20b054cc.js';
+import { _ as __vue_component__$1 } from './OrList-5ecdd0d6.js';
+import { _ as __vue_component__$2 } from './OrInput-014d2e47.js';
+import { _ as __vue_component__$3 } from './OrIcon-fa826b6b.js';
+import './OrButton.vue_rollup-plugin-vue_styles.0-0b3d0a46.js';
+import { _ as __vue_component__$4 } from './OrIconButton-e60f47af.js';
+import './OrIconButton.vue_rollup-plugin-vue_styles.0-8e03311b.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
@@ -25,46 +24,39 @@ var script = defineComponent({
     modelValue: {
       type: Array,
       default: () => [],
-      required: true,
-      validator: _.isArray
+      required: true
     },
     buttonLabel: {
       type: String,
       default: '',
-      required: false,
-      validator: _.isString
+      required: false
     },
     label: {
       type: String,
       default: '',
-      required: false,
-      validator: _.isString
+      required: false
     },
     inputProps: {
       type: Object,
       default: () => ({
         value: ''
       }),
-      required: false,
-      validator: _.isObject
+      required: false
     },
     canDrag: {
       type: Boolean,
       default: true,
-      required: false,
-      validator: _.isBoolean
+      required: false
     },
     canDelete: {
       type: Boolean,
       default: true,
-      required: false,
-      validator: _.isBoolean
+      required: false
     },
     isDisabled: {
       type: Boolean,
       default: false,
-      required: false,
-      validator: _.isBoolean
+      required: false
     }
   },
   emits: ['update:modelValue', 'item-before-add', 'item-added', 'item-before-delete', 'item-deleted'],
@@ -84,7 +76,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = ".or-list-of-inputs--delete-button[data-v-52af8efa]  .or-icon{font-size:.875rem!important}";
+var css_248z = ".or-list-of-inputs--delete-button[data-v-748cfd24]  .or-icon{font-size:.875rem!important}";
 styleInject(css_248z);
 
 /* script */
@@ -202,7 +194,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-52af8efa";
+const __vue_scope_id__ = "data-v-748cfd24";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v2/{OrLoader-212ef381.js → OrLoader-52bb8afa.js}

@@ -1,8 +1,9 @@
 import { defineComponent } from 'vue-demi';
-import _ from 'lodash';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
+const isEmpty = val => val == null || !(Object.keys(val) || val).length;
+
 var LoaderViews;
 (function (LoaderViews) {
   LoaderViews["default"] = "default";
@@ -45,15 +46,15 @@ var script = defineComponent({
       return this.type === LoaderViews.linear;
     },
     isEmptyLinearDescription() {
-      return _.isEmpty(this.linearDescription);
+      return isEmpty(this.linearDescription);
     },
     isEmptyLinearTitle() {
-      return _.isEmpty(this.linearTitle);
+      return isEmpty(this.linearTitle);
     }
   }
 });
 
-var css_248z = "@keyframes spinAround-data-v-50855588{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-50855588{from{opacity:1}to{opacity:0}}@keyframes loaderLinear-data-v-50855588{0%{transform:translate(-100%,0)}100%{transform:translate(100%,0)}}.or-loader[data-v-50855588]{position:relative;display:inline-flex;align-items:center;justify-content:center}.or-loader.is-default[data-v-50855588]::after{width:1.5rem;height:1.5rem;color:var(--c-primary);content:\"\";border-color:inherit;border-top:2px solid currentColor;border-right:2px solid currentColor;border-bottom:2px solid transparent!important;border-left:2px solid currentColor;border-radius:50%;animation:spinAround-data-v-50855588 .7s linear infinite;transition-timing-function:var(--t-func);transition-duration:var(--t-duration);transition-property:color}.or-loader.is-text[data-v-50855588]{color:currentColor}.or-loader.is-text>span[data-v-50855588]{display:inline-flex}.or-loader.is-text .or-loader--dot[data-v-50855588]:nth-child(0){animation:fade-data-v-50855588 1s var(--t-func) 0s infinite}.or-loader.is-text .or-loader--dot[data-v-50855588]:nth-child(1){animation:fade-data-v-50855588 1s var(--t-func) .2s infinite}.or-loader.is-text .or-loader--dot[data-v-50855588]:nth-child(2){animation:fade-data-v-50855588 1s var(--t-func) .4s infinite}.or-loader.is-text .or-loader--dot[data-v-50855588]:nth-child(3){animation:fade-data-v-50855588 1s var(--t-func) .6s infinite}.or-loader.is-linear[data-v-50855588]{width:100%}.or-loader.is-linear .or-loader--linear[data-v-50855588]{display:flex;flex-direction:column;align-items:center;width:100%}.or-loader.is-linear .or-loader--linear-title[data-v-50855588]{margin-bottom:var(--s-4);font-size:var(--fs-2);font-weight:700;color:var(--c-neutral-6);letter-spacing:-.45px}.or-loader.is-linear .or-loader--linear-loader[data-v-50855588]{position:relative;display:block;width:100%;height:.25rem;overflow:hidden;background-color:var(--c-neutral-2);border-radius:.125rem}.or-loader.is-linear .or-loader--linear-loader>span[data-v-50855588]{position:absolute;top:0;left:0;width:100%;height:100%;animation:loaderLinear-data-v-50855588 1.2s var(--t-func) infinite}.or-loader.is-linear .or-loader--linear-loader>span[data-v-50855588]::after{position:absolute;top:0;left:0;width:100%;max-width:7rem;height:100%;content:\"\";background-color:var(--c-primary);border-radius:.125rem}.or-loader.is-linear .or-loader--linear-desc[data-v-50855588]{margin-top:var(--s-4);color:var(--c-neutral-5);text-align:center}";
+var css_248z = "@keyframes spinAround-data-v-df37f65c{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-df37f65c{from{opacity:1}to{opacity:0}}@keyframes loaderLinear-data-v-df37f65c{0%{transform:translate(-100%,0)}100%{transform:translate(100%,0)}}.or-loader[data-v-df37f65c]{position:relative;display:inline-flex;align-items:center;justify-content:center}.or-loader.is-default[data-v-df37f65c]::after{width:1.5rem;height:1.5rem;color:var(--c-primary);content:\"\";border-color:inherit;border-top:2px solid currentColor;border-right:2px solid currentColor;border-bottom:2px solid transparent!important;border-left:2px solid currentColor;border-radius:50%;animation:spinAround-data-v-df37f65c .7s linear infinite;transition-timing-function:var(--t-func);transition-duration:var(--t-duration);transition-property:color}.or-loader.is-text[data-v-df37f65c]{color:currentColor}.or-loader.is-text>span[data-v-df37f65c]{display:inline-flex}.or-loader.is-text .or-loader--dot[data-v-df37f65c]:nth-child(0){animation:fade-data-v-df37f65c 1s var(--t-func) 0s infinite}.or-loader.is-text .or-loader--dot[data-v-df37f65c]:nth-child(1){animation:fade-data-v-df37f65c 1s var(--t-func) .2s infinite}.or-loader.is-text .or-loader--dot[data-v-df37f65c]:nth-child(2){animation:fade-data-v-df37f65c 1s var(--t-func) .4s infinite}.or-loader.is-text .or-loader--dot[data-v-df37f65c]:nth-child(3){animation:fade-data-v-df37f65c 1s var(--t-func) .6s infinite}.or-loader.is-linear[data-v-df37f65c]{width:100%}.or-loader.is-linear .or-loader--linear[data-v-df37f65c]{display:flex;flex-direction:column;align-items:center;width:100%}.or-loader.is-linear .or-loader--linear-title[data-v-df37f65c]{margin-bottom:var(--s-4);font-size:var(--fs-2);font-weight:700;color:var(--c-neutral-6);letter-spacing:-.45px}.or-loader.is-linear .or-loader--linear-loader[data-v-df37f65c]{position:relative;display:block;width:100%;height:.25rem;overflow:hidden;background-color:var(--c-neutral-2);border-radius:.125rem}.or-loader.is-linear .or-loader--linear-loader>span[data-v-df37f65c]{position:absolute;top:0;left:0;width:100%;height:100%;animation:loaderLinear-data-v-df37f65c 1.2s var(--t-func) infinite}.or-loader.is-linear .or-loader--linear-loader>span[data-v-df37f65c]::after{position:absolute;top:0;left:0;width:100%;max-width:7rem;height:100%;content:\"\";background-color:var(--c-primary);border-radius:.125rem}.or-loader.is-linear .or-loader--linear-desc[data-v-df37f65c]{margin-top:var(--s-4);color:var(--c-neutral-5);text-align:center}";
 styleInject(css_248z);
 
 /* script */
@@ -93,7 +94,7 @@ var __vue_staticRenderFns__ = [function () {
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-50855588";
+const __vue_scope_id__ = "data-v-df37f65c";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */
@@ -109,4 +110,4 @@ const __vue_component__ = /*#__PURE__*/normalizeComponent({
   staticRenderFns: __vue_staticRenderFns__
 }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
 
-export { LoaderViews as L, __vue_component__ as _ };
+export { LoaderViews as L, __vue_component__ as _, isEmpty as i };

package/dist/esm/v2/{OrMenu-9bd9f2fd.js → OrMenu-8b902c22.js}

@@ -1,7 +1,5 @@
-import { defineComponent, ref, computed, toRef } from 'vue-demi';
-import '@vueuse/core';
-import { u as usePopoverState } from './usePopoverState-4cb59ae5.js';
-import { _ as __vue_component__$1, P as PopoverPlacement } from './OrPopover-238620ae.js';
+import { defineComponent, ref, computed } from 'vue-demi';
+import { _ as __vue_component__$1, P as PopoverPlacement } from './OrPopover-80459663.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const MenuRoot = [
@@ -17,10 +15,6 @@ var script = defineComponent({
   },
   inheritAttrs: false,
   props: {
-    isOpen: {
-      type: Boolean,
-      default: false
-    },
     trigger: {
       type: HTMLElement,
       default: undefined
@@ -30,36 +24,68 @@ var script = defineComponent({
       default: PopoverPlacement.Bottom
     }
   },
-  emits: ['open', 'close'],
-  expose: ['root', 'open', 'close', 'toggle'],
-  setup(props, context) {
+  emits: ['update:state'],
+  expose: ['root', 'state', 'isOpen', 'open', 'close', 'toggle'],
+  setup() {
     // Refs
     const root = ref();
+    const popover = ref();
+    const popoverRoot = computed(() => {
+      var _a;
+      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.root;
+    });
+    const popoverState = computed(() => {
+      var _a;
+      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
+    });
     // Styles
     const rootStyles = computed(() => ['or-menu-v3', ...MenuRoot]);
     // State
-    const {
-      state,
-      open,
-      close,
-      toggle
-    } = usePopoverState(toRef(props, 'isOpen'), context);
+    const isOpen = computed(() => {
+      var _a;
+      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.isOpen;
+    });
+    // Methods
+    function open() {
+      const popoverInstance = popover.value;
+      if (popoverInstance) {
+        popoverInstance.open();
+      }
+    }
+    function close() {
+      const popoverInstance = popover.value;
+      if (popoverInstance) {
+        popoverInstance.close();
+      }
+    }
+    function toggle() {
+      isOpen.value ? close() : open();
+    }
     // Handlers
     function onClick(event) {
       const path = event.composedPath();
-      if (path.some(_ref => {
+      const classLists = path.filter(_ref => {
         let {
           classList
         } = _ref;
-        return classList === null || classList === void 0 ? void 0 : classList.contains('or-menu-item-v3');
-      })) {
+        return !!classList;
+      }).map(_ref2 => {
+        let {
+          classList
+        } = _ref2;
+        return classList;
+      });
+      if (classLists.some(classList => classList.contains('or-menu-item-v3'))) {
         close();
       }
     }
     return {
       root,
+      popover,
+      popoverRoot,
+      state: popoverState,
       rootStyles,
-      state,
+      isOpen,
       open,
       close,
       toggle,
@@ -77,8 +103,8 @@ var __vue_render__ = function () {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c('OrPopover', {
+    ref: "popover",
     attrs: {
-      "is-open": _vm.state === 'open',
       "variant": 'auto',
       "trigger": _vm.trigger,
       "placement": _vm.placement,
@@ -86,18 +112,18 @@ var __vue_render__ = function () {
       "disable-default-styles": false
     },
     on: {
-      "open": function ($event) {
-        return _vm.open();
-      },
-      "close": function ($event) {
-        return _vm.close();
+      "update:state": function ($event) {
+        return _vm.$emit('update:state', $event);
       }
     }
   }, [_c('div', _vm._b({
     ref: "root",
     class: _vm.rootStyles,
     on: {
-      "click": _vm.onClick
+      "click": function ($event) {
+        $event.stopPropagation();
+        return _vm.onClick.apply(null, arguments);
+      }
     }
   }, 'div', _vm.$attrs, false), [_vm._t("default")], 2)]);
 };

package/dist/esm/v2/OrModal-1f80d87f.js

@@ -0,0 +1,174 @@
+import { defineComponent, ref, computed, watch } from 'vue-demi';
+import { _ as __vue_component__$2 } from './OrIconButton-ee747c71.js';
+import { _ as __vue_component__$1 } from './OrOverlay-4c8c11e2.js';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+var ModalSize;
+(function (ModalSize) {
+  ModalSize["L"] = "l";
+  ModalSize["M"] = "m";
+  ModalSize["S"] = "s";
+})(ModalSize || (ModalSize = {}));
+
+const ModalRoot = [
+// Layout
+'layout-column',
+// Box
+'w-full', 'h-full md:h-auto md:max-h-[min(calc(100%-(2*theme(spacing.3xl))),772px)]',
+// Shape
+'md:rounded-md',
+// Spacing
+'py-md md:py-lg', 'gap-md md:gap-lg',
+// Typography
+'typography-body-2-regular',
+// Theme
+'theme-background-default', 'dark:theme-background-default-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark',
+// Elevation
+'shadow-modal', 'dark:shadow-modal-dark'];
+const ModalRootSizes = {
+  'l': [
+  // Box
+  'md:w-[1050px]'],
+  'm': [
+  // Box
+  'md:w-[700px]'],
+  's': [
+  // Box
+  'md:w-[480px]']
+};
+const ModalHeader = [
+// Layout
+'layout-row',
+// Spacing
+'px-md md:px-lg',
+// Typography
+'typography-headline-2'];
+const ModalContent = [
+// Box
+'grow', 'overflow-auto',
+// Spacing
+'px-md md:px-lg'];
+const ModalFooter = [
+// Spacing
+'px-md md:px-lg'];
+
+var script = defineComponent({
+  name: 'OrModal',
+  components: {
+    OrOverlay: __vue_component__$1,
+    OrIconButton: __vue_component__$2
+  },
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: String,
+      default: ModalSize.M
+    },
+    isOpen: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['open', 'close'],
+  expose: ['root', 'isActive', 'open', 'close'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-modal-v3', ...ModalRoot, ...ModalRootSizes[props.size]]);
+    const headerStyles = computed(() => [...ModalHeader]);
+    const contentStyles = computed(() => [...ModalContent]);
+    const footerStyles = computed(() => [...ModalFooter]);
+    // State
+    const isActive = ref(false);
+    // Events
+    watch(isActive, value => {
+      context.emit(value ? 'open' : 'close');
+    });
+    watch(() => props.isOpen, newIsOpen => {
+      if (newIsOpen) {
+        open();
+      } else {
+        close();
+      }
+    }, {
+      immediate: true
+    });
+    // Methods
+    function open() {
+      isActive.value = true;
+    }
+    function close() {
+      isActive.value = false;
+    }
+    return {
+      root,
+      rootStyles,
+      headerStyles,
+      contentStyles,
+      footerStyles,
+      isActive,
+      open,
+      close
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _vm.isActive ? _c('OrOverlay', {
+    attrs: {
+      "fullscreen": true
+    }
+  }, [_c('div', _vm._b({
+    ref: "root",
+    class: _vm.rootStyles
+  }, 'div', _vm.$attrs, false), [_c('div', {
+    class: _vm.headerStyles
+  }, [_c('div', {
+    class: ['grow']
+  }, [_vm._t("header")], 2), _vm._v(" "), _c('OrIconButton', {
+    attrs: {
+      "icon": 'close',
+      "size": 'l'
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+        return _vm.close.apply(null, arguments);
+      }
+    }
+  })], 1), _vm._v(" "), _c('div', {
+    class: _vm.contentStyles
+  }, [_vm._t("default")], 2), _vm._v(" "), _c('div', {
+    class: _vm.footerStyles
+  }, [_vm._t("footer")], 2)])]) : _vm._e();
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { ModalSize as M, __vue_component__ as _ };