@onereach/ui-components 8.16.5-beta.3876.0 → 8.17.0

package/dist/esm/v2/{OrCode-4c7bbbd2.js → OrCode-c37dabe7.js}

@@ -7,9 +7,9 @@ import '@onereach/styles/tailwind/plugins/core';
 import { u as useTheme } from './useTheme-0ef25778.js';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { basicSetup } from 'codemirror';
+import { keymap, EditorView } from '@codemirror/view';
 import { indentWithTab } from '@codemirror/commands';
 import { Compartment, EditorState } from '@codemirror/state';
-import { keymap, EditorView } from '@codemirror/view';
 import { _ as __vue_component__$7 } from './OrIconButton-edff56d4.js';
 import { _ as __vue_component__$6 } from './OrModal-b191f8c8.js';
 import { _ as __vue_component__$2 } from './OrError-916e928e.js';
@@ -19,6 +19,16 @@ import './OrInputBox.vue_rollup-plugin-vue_script-65ebcf4d.js';
 import { _ as __vue_component__$5 } from './OrLabel-caf02dc4.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
+var CodeLanguage;
+(function (CodeLanguage) {
+  CodeLanguage["HTML"] = "html";
+  CodeLanguage["CSS"] = "css";
+  CodeLanguage["JS"] = "js";
+  CodeLanguage["TS"] = "ts";
+  CodeLanguage["JSON"] = "json";
+  CodeLanguage["MD"] = "md";
+})(CodeLanguage || (CodeLanguage = {}));
+
 const Code = [
 // Layout
 'layout-column',
@@ -194,16 +204,6 @@ const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
   staticRenderFns: __vue_staticRenderFns__$1
 }, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
 
-var CodeLanguage;
-(function (CodeLanguage) {
-  CodeLanguage["HTML"] = "html";
-  CodeLanguage["CSS"] = "css";
-  CodeLanguage["JS"] = "js";
-  CodeLanguage["TS"] = "ts";
-  CodeLanguage["JSON"] = "json";
-  CodeLanguage["MD"] = "md";
-})(CodeLanguage || (CodeLanguage = {}));
-
 var script = defineComponent({
   components: {
     OrModal: __vue_component__$6,
@@ -257,7 +257,7 @@ var script = defineComponent({
       default: true
     }
   },
-  emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
+  emits: ['update:modelValue', 'keydown', 'keyup', 'focus', 'blur'],
   expose: ['root', 'editorView', 'control', 'fullscreenControl', 'modal', 'focus', 'blur'],
   setup(props, context) {
     // Refs
@@ -312,9 +312,6 @@ var script = defineComponent({
     // #region Codemirror
     const theme = useTheme();
     const defaultExtensions = [basicSetup, keymap.of([indentWithTab]), EditorState.readOnly.of(props.readonly), EditorView.editable.of(!props.disabled), EditorView.domEventHandlers({
-      input: event => {
-        context.emit('input', event);
-      },
       keydown: event => {
         context.emit('keydown', event);
       },
@@ -329,7 +326,6 @@ var script = defineComponent({
       }
     }), EditorView.theme({
       '&': {
-        overflow: 'hidden',
         color: theme.textColor['on-background'],
         backgroundColor: theme.backgroundColor['background']
       },
@@ -345,8 +341,7 @@ var script = defineComponent({
       '.cm-gutters': {
         color: theme.textColor['on-background'],
         backgroundColor: theme.backgroundColor['primary-opacity-0-12'],
-        borderColor: theme.borderColor['outline'],
-        backdropFilter: 'blur(2px)'
+        borderColor: theme.borderColor['outline']
       },
       '.cm-activeLineGutter, .cm-activeLine': {
         backgroundColor: theme.backgroundColor['primary-opacity-0-08']
@@ -422,8 +417,8 @@ var script = defineComponent({
       editorView.destroy();
     });
     return {
-      root,
       editorView,
+      root,
       control,
       fullscreenControl,
       modal,
@@ -482,8 +477,8 @@ var __vue_render__ = function () {
   }), _vm._v(" "), _c('OrModal', {
     ref: "modal",
     attrs: {
-      "additional-styles": _vm.modalStyles,
-      "size": 'l'
+      "size": "l",
+      "additional-styles": _vm.modalStyles
     },
     scopedSlots: _vm._u([{
       key: "header",

package/dist/esm/v2/{OrSelect-30f5ce68.js → OrSelect-4768c12b.js}

@@ -18,8 +18,8 @@ import { _ as __vue_component__$9 } from './OrInput-ac6484dd.js';
 import { _ as __vue_component__$b } from './OrLabel-caf02dc4.js';
 import { _ as __vue_component__$c } from './OrMenuItem-fbe3e8e4.js';
 import { _ as __vue_component__$d } from './OrPopover-07b82c80.js';
-import { T as TagsOverflow } from './OrTags-9d3cf104.js';
-import { _ as __vue_component__$1 } from './OrSelectMultipleControl-de32c83c.js';
+import { T as TagsOverflow } from './OrTags-f6434f9b.js';
+import { _ as __vue_component__$1 } from './OrSelectMultipleControl-685d5af4.js';
 import { _ as __vue_component__$2 } from './OrSelectSingleControl-8ca0d898.js';
 import './OrSelectPlaceholder-f36f4e40.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/esm/v2/{OrSelectMultipleControl-de32c83c.js → OrSelectMultipleControl-685d5af4.js}

@@ -5,7 +5,7 @@ import { i as isEqualValue } from './isEqualValue-f8bf73d9.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import { _ as __vue_component__$3, T as TagsOverflow } from './OrTags-9d3cf104.js';
+import { _ as __vue_component__$3, T as TagsOverflow } from './OrTags-f6434f9b.js';
 import { _ as __vue_component__$1 } from './OrSelectPlaceholder-f36f4e40.js';
 import { i as isEmptyValue } from './isEmptyValue-fd56a6e4.js';
 import { _ as __vue_component__$2 } from './OrSelectControlInput-28c226f8.js';

package/dist/esm/v2/{OrTagInput-2642f4d9.js → OrTagInput-c4110c0b.js}

@@ -1,5 +1,5 @@
-import { defineComponent, ref, toRefs, computed, reactive, watch, nextTick } from 'vue-demi';
 import { onClickOutside } from '@vueuse/core';
+import { defineComponent, ref, toRefs, computed, reactive, watch, nextTick } from 'vue-demi';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 import './dom-aecadd9a.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
@@ -12,7 +12,8 @@ import { _ as __vue_component__$3 } from './OrIconButton-edff56d4.js';
 import { _ as __vue_component__$4 } from './OrInputBox-140c344d.js';
 import './OrInputBox.vue_rollup-plugin-vue_script-65ebcf4d.js';
 import { _ as __vue_component__$5 } from './OrLabel-caf02dc4.js';
-import { _ as __vue_component__$6, T as TagsOverflow } from './OrTags-9d3cf104.js';
+import { a as TagColor } from './OrTag-bf15f5ad.js';
+import { _ as __vue_component__$6, T as TagsOverflow } from './OrTags-f6434f9b.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
@@ -121,6 +122,15 @@ var script = defineComponent({
     const activated = ref(false);
     const proxyModelValue = useProxyModelValue(modelValue, context.emit);
     const draftModelValue = ref('');
+    const tagsItems = computed(() => {
+      return proxyModelValue.value.map(item => ({
+        label: item,
+        value: item,
+        tagProps: {
+          color: item === draftModelValue.value ? TagColor.Danger : TagColor.Default
+        }
+      }));
+    });
     const currentLength = computed(() => {
       var _a, _b;
       return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
@@ -157,8 +167,7 @@ var script = defineComponent({
       context.emit('focus');
     }
     function add() {
-      var _a;
-      const newItem = (_a = draftModelValue.value) === null || _a === void 0 ? void 0 : _a.trim();
+      const newItem = draftModelValue.value;
       if (!newItem) return;
       if (proxyModelValue.value.includes(newItem)) return;
       if (maxLength.value && currentLength.value >= maxLength.value) return;
@@ -197,6 +206,7 @@ var script = defineComponent({
       controlAttributes,
       proxyModelValue,
       draftModelValue,
+      tagsItems,
       currentLength,
       maxLength,
       activated,
@@ -212,7 +222,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-d3bbd9d8]{min-width:0;background:0 0;outline:0}";
+var css_248z = "input[data-v-cfe6b850]{min-width:0;background:0 0;outline:0}";
 styleInject(css_248z);
 
 /* script */
@@ -241,14 +251,14 @@ var __vue_render__ = function () {
     }], null, true)
   }, [_vm._v("\n      " + _vm._s(_vm.label) + "\n\n      ")])] : _vm._e(), _vm._v(" "), _c('OrInputBox', {
     ref: "inputBox",
-    staticClass: "cursor-text",
+    class: ['interactivity-select'],
     attrs: {
       "variant": _vm.disableDefaultStyles ? 'unstyled' : 'styled',
-      "force-state": _vm.activated ? 'focus-within' : undefined,
       "invalid": !!_vm.error,
       "readonly": _vm.readonly,
       "disabled": _vm.disabled,
-      "tabindex": "0"
+      "tabindex": 0,
+      "force-state": _vm.activated ? 'focus-within' : undefined
     },
     on: {
       "focus": _vm.activate
@@ -273,9 +283,9 @@ var __vue_render__ = function () {
     } : null], null, true)
   }, [_c('OrTags', {
     ref: "tags",
-    staticClass: "grow",
+    class: ['grow'],
     attrs: {
-      "items": _vm.proxyModelValue,
+      "items": _vm.tagsItems,
       "disabled": _vm.disabled,
       "tag-props": {
         variant: _vm.readonly || _vm.disabled ? 'tag' : 'reset',
@@ -296,21 +306,24 @@ var __vue_render__ = function () {
         }, [_c('input', _vm._b({
           directives: [{
             name: "model",
-            rawName: "v-model",
+            rawName: "v-model.trim",
             value: _vm.draftModelValue,
-            expression: "draftModelValue"
+            expression: "draftModelValue",
+            modifiers: {
+              "trim": true
+            }
           }],
           ref: "control",
           class: _vm.controlStyles,
           style: _vm.controlInlineStyles,
           attrs: {
+            "type": 'text',
             "placeholder": _vm.proxyModelValue.length === 0 ? _vm.placeholder : undefined,
             "readonly": _vm.readonly,
             "disabled": _vm.disabled,
             "autocomplete": 'off',
             "minlength": undefined,
-            "maxlength": undefined,
-            "type": 'text'
+            "maxlength": undefined
           },
           domProps: {
             "value": _vm.draftModelValue
@@ -332,7 +345,10 @@ var __vue_render__ = function () {
               if ($event.target.composing) {
                 return;
               }
-              _vm.draftModelValue = $event.target.value;
+              _vm.draftModelValue = $event.target.value.trim();
+            },
+            "blur": function ($event) {
+              return _vm.$forceUpdate();
             }
           }
         }, 'input', _vm.controlAttributes, false))])];
@@ -384,7 +400,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-d3bbd9d8";
+const __vue_scope_id__ = "data-v-cfe6b850";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v2/{OrTags-9d3cf104.js → OrTags-f6434f9b.js}

@@ -192,13 +192,13 @@ var __vue_render__ = function () {
   }, [_vm._l(_vm.localItems, function (item) {
     return _c('OrTag', _vm._b({
       key: item.value,
-      staticClass: "max-w-full",
+      class: ['max-w-full'],
       on: {
         "reset": function ($event) {
           return _vm.$emit('reset', item.value);
         }
       }
-    }, 'OrTag', _vm.tagProps, false), [_vm._v("\n      " + _vm._s(item.label) + "\n    ")]);
+    }, 'OrTag', Object.assign({}, _vm.tagProps, item.tagProps), false), [_vm._v("\n      " + _vm._s(item.label) + "\n    ")]);
   }), _vm._v(" "), _vm.localOverflow === 'wrap' ? _vm._t("tail") : _vm._e()], 2) : _vm._e(), _vm._v(" "), _vm.localOverflow === 'hidden' && _vm.overflowItems.length > 0 ? [_c('OrButton', {
     ref: "overflowButton",
     class: _vm.overflowButtonStyles,
@@ -231,7 +231,7 @@ var __vue_render__ = function () {
           return _vm.$emit('reset', item.value);
         }
       }
-    }, 'OrTag', _vm.tagProps, false), [_vm._v("\n          " + _vm._s(item.label) + "\n        ")]);
+    }, 'OrTag', Object.assign({}, _vm.tagProps, item.tagProps), false), [_vm._v("\n          " + _vm._s(item.label) + "\n        ")]);
   }), 1)])] : _vm._e(), _vm._v(" "), _vm.localOverflow != 'wrap' || _vm.items.length === 0 ? _vm._t("tail") : _vm._e()], 2);
 };
 var __vue_staticRenderFns__ = [];

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

@@ -24,7 +24,7 @@ export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';
 export { html } from '@codemirror/lang-html';
-export { C as CodeLanguage, _ as OrCodeV3 } from '../OrCode-4c7bbbd2.js';
+export { C as CodeLanguage, _ as OrCodeV3 } from '../OrCode-c37dabe7.js';
 export { EditorView } from '@codemirror/view';
 export { EditorState } from '@codemirror/state';
 export { _ as OrCollapse } from '../OrCollapse-9d22b072.js';
@@ -102,7 +102,7 @@ export { _ as OrSearch } from '../OrSearch-ddf244e6.js';
 export { _ as OrSearchV3 } from '../OrSearch-2910207c.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-00583234.js';
 export { _ as OrSelect } from '../OrSelect-d271f7a3.js';
-export { _ as OrSelectV3 } from '../OrSelect-30f5ce68.js';
+export { _ as OrSelectV3 } from '../OrSelect-4768c12b.js';
 export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-054b26c6.js';
 export { S as OrSidebarPlacement, _ as OrSidebarV3, S as SidebarPlacement } from '../OrSidebar-e07d338e.js';
 export { _ as OrSkeletonCircle } from '../OrSkeletonCircle-c4bf0e34.js';
@@ -124,9 +124,9 @@ export { _ as OrTabV3 } from '../OrTab-a989b4fd.js';
 export { _ as OrTabs } from '../OrTabs-62e7e478.js';
 export { _ as OrTabsV3, T as TabsVariant } from '../OrTabs-778ce12d.js';
 export { _ as OrTag } from '../OrTag-ce728fad.js';
-export { _ as OrTagInputV3 } from '../OrTagInput-2642f4d9.js';
+export { _ as OrTagInputV3 } from '../OrTagInput-c4110c0b.js';
 export { _ as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-bf15f5ad.js';
-export { _ as OrTagsV3, T as TagsOverflow } from '../OrTags-9d3cf104.js';
+export { _ as OrTagsV3, T as TagsOverflow } from '../OrTags-f6434f9b.js';
 export { _ as OrTeleport } from '../OrTeleport.vue2-f0c16c71.js';
 export { _ as OrTeleportV3 } from '../OrTeleport.vue2-9eb0eaee.js';
 export { _ as OrTextV3 } from '../OrText-44449e7b.js';
@@ -208,7 +208,7 @@ import '../codemirrorView-020fe885.js';
 import 'prosemirror-state';
 import 'prosemirror-commands';
 import 'lodash/keyBy';
-import '../OrSelectMultipleControl-de32c83c.js';
+import '../OrSelectMultipleControl-685d5af4.js';
 import '../isEqualValue-f8bf73d9.js';
 import '../OrSelectPlaceholder-f36f4e40.js';
 import '../OrSelectControlInput-28c226f8.js';

package/dist/esm/v2/components/or-code-v3/OrCode.vue.d.ts

@@ -1,10 +1,10 @@
 import { PropType } from 'vue-demi';
-import { Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
+import { Extension } from '@codemirror/state';
 import { CodeLanguage } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
-    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     editorView: EditorView;
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     control: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -136,8 +136,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
-    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     editorView: EditorView;
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     control: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {

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

@@ -1,4 +1,4 @@
-export { C as CodeLanguage, _ as OrCodeV3 } from '../../OrCode-4c7bbbd2.js';
+export { C as CodeLanguage, _ as OrCodeV3 } from '../../OrCode-c37dabe7.js';
 export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';

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

@@ -1,4 +1,4 @@
-export { _ as OrSelectV3 } from '../../OrSelect-30f5ce68.js';
+export { _ as OrSelectV3 } from '../../OrSelect-4768c12b.js';
 export { I as SelectSize } from '../../OrInputBox.vue_rollup-plugin-vue_script-65ebcf4d.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';
@@ -36,12 +36,12 @@ import '../../OrInput-ac6484dd.js';
 import '../../useValidationAttributes-d1abbe34.js';
 import '../../OrLoader-784e2060.js';
 import '../../OrMenuItem-fbe3e8e4.js';
-import '../../OrTags-9d3cf104.js';
+import '../../OrTags-f6434f9b.js';
 import '../../useOverflow-e91d2314.js';
 import '../../OrButton-8d1efd4a.js';
 import '../../OrButton.vue_rollup-plugin-vue_script-ec8cfaee.js';
 import '../../OrTag-bf15f5ad.js';
-import '../../OrSelectMultipleControl-de32c83c.js';
+import '../../OrSelectMultipleControl-685d5af4.js';
 import '../../isEqualValue-f8bf73d9.js';
 import '../../OrSelectPlaceholder-f36f4e40.js';
 import '../../OrSelectControlInput-28c226f8.js';

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

@@ -1,4 +1,4 @@
-export { _ as OrSelectMultipleControl } from '../../../OrSelectMultipleControl-de32c83c.js';
+export { _ as OrSelectMultipleControl } from '../../../OrSelectMultipleControl-685d5af4.js';
 export { _ as OrSelectSingleControl } from '../../../OrSelectSingleControl-8ca0d898.js';
 export { _ as OrSelectPlaceholder } from '../../../OrSelectPlaceholder-f36f4e40.js';
 import 'vue-demi';
@@ -10,7 +10,7 @@ import '../../../isEqualValue-f8bf73d9.js';
 import '../../../useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import '../../../OrTags-9d3cf104.js';
+import '../../../OrTags-f6434f9b.js';
 import '../../../useOverflow-e91d2314.js';
 import '../../../OrButton-8d1efd4a.js';
 import '../../../OrButton.vue_rollup-plugin-vue_script-ec8cfaee.js';

package/dist/esm/v2/components/or-select-v3/partials/or-select-multiple-control/index.js

@@ -1,4 +1,4 @@
-export { _ as OrSelectMultipleControl } from '../../../../OrSelectMultipleControl-de32c83c.js';
+export { _ as OrSelectMultipleControl } from '../../../../OrSelectMultipleControl-685d5af4.js';
 import 'vue-demi';
 import '@vueuse/core';
 import '../../../../dom-aecadd9a.js';
@@ -8,7 +8,7 @@ import '../../../../isEqualValue-f8bf73d9.js';
 import '../../../../useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import '../../../../OrTags-9d3cf104.js';
+import '../../../../OrTags-f6434f9b.js';
 import '../../../../useOverflow-e91d2314.js';
 import '../../../../OrButton-8d1efd4a.js';
 import '../../../../OrButton.vue_rollup-plugin-vue_script-ec8cfaee.js';

package/dist/esm/v2/components/or-tag-input-v3/OrTagInput.vue.d.ts

@@ -1,5 +1,6 @@
 import { PropType } from 'vue-demi';
 import { TagsOverflow } from '../or-tags-v3';
+import { TagObject } from '../or-tags-v3/types';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     control: import("@vue/composition-api").Ref<HTMLInputElement | undefined>;
@@ -34,6 +35,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string[]>;
     draftModelValue: import("@vue/composition-api").Ref<string>;
+    tagsItems: import("@vue/composition-api").ComputedRef<TagObject[]>;
     currentLength: import("@vue/composition-api").ComputedRef<number>;
     maxLength: import("@vue/composition-api").ComputedRef<number | undefined>;
     activated: import("@vue/composition-api").Ref<boolean>;
@@ -183,6 +185,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string[]>;
     draftModelValue: import("@vue/composition-api").Ref<string>;
+    tagsItems: import("@vue/composition-api").ComputedRef<TagObject[]>;
     currentLength: import("@vue/composition-api").ComputedRef<number>;
     maxLength: import("@vue/composition-api").ComputedRef<number | undefined>;
     activated: import("@vue/composition-api").Ref<boolean>;

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

@@ -1,7 +1,7 @@
-export { _ as OrTagInputV3 } from '../../OrTagInput-2642f4d9.js';
+export { _ as OrTagInputV3 } from '../../OrTagInput-c4110c0b.js';
 export { I as TagInputSize } from '../../OrInputBox.vue_rollup-plugin-vue_script-65ebcf4d.js';
-import 'vue-demi';
 import '@vueuse/core';
+import 'vue-demi';
 import '../../useIdAttribute-859439f0.js';
 import '../../dom-aecadd9a.js';
 import 'lodash/isElement';
@@ -28,10 +28,10 @@ import 'portal-vue';
 import '../../useTheme-0ef25778.js';
 import '../../OrInputBox-140c344d.js';
 import '../../OrLabel-caf02dc4.js';
-import '../../OrTags-9d3cf104.js';
+import '../../OrTag-bf15f5ad.js';
+import '../../OrTags-f6434f9b.js';
 import '../../useOverflow-e91d2314.js';
 import '../../OrButton-8d1efd4a.js';
 import '../../OrButton.vue_rollup-plugin-vue_script-ec8cfaee.js';
 import '../../OrLoader-784e2060.js';
-import '../../OrTag-bf15f5ad.js';
 import '../../style-inject.es-4c6f2515.js';

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

@@ -1,4 +1,4 @@
-export { _ as OrTagsV3, T as TagsOverflow } from '../../OrTags-9d3cf104.js';
+export { _ as OrTagsV3, T as TagsOverflow } from '../../OrTags-f6434f9b.js';
 import 'vue-demi';
 import '../../useOverflow-e91d2314.js';
 import '@vueuse/core';

package/dist/esm/v2/components/or-tags-v3/types.d.ts

@@ -1,6 +1,7 @@
-export type SimpleTag = string;
-export type Tag = SimpleTag | TagObject;
-export interface TagObject {
+import { OrTag } from '../or-tag';
+export type Tag = string | TagObject;
+export type TagObject = {
     label: string;
     value: string | number | object;
-}
+    tagProps?: InstanceType<typeof OrTag>['$props'];
+};

package/dist/esm/v2/components/or-teleport/OrTeleport.vue2.vue.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data> & import("@vue/composition-api").Data, {}, {}, {
+declare const _default: import("vue2").ComponentOptions<import("vue2").default, import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data> & import("@vue/composition-api").Data, {}, {}, {
     to: {
         type: StringConstructor;
         required: boolean;
@@ -20,7 +20,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         required: boolean;
         default: boolean;
     };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+}>> & Omit<import("vue2").VueConstructor<import("vue2").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     to: string;
     isDisabled: boolean;
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {

package/dist/esm/v2/index.js

@@ -24,7 +24,7 @@ export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';
 export { html } from '@codemirror/lang-html';
-export { C as CodeLanguage, _ as OrCodeV3 } from './OrCode-4c7bbbd2.js';
+export { C as CodeLanguage, _ as OrCodeV3 } from './OrCode-c37dabe7.js';
 export { EditorView } from '@codemirror/view';
 export { EditorState } from '@codemirror/state';
 export { _ as OrCollapse } from './OrCollapse-9d22b072.js';
@@ -102,7 +102,7 @@ export { _ as OrSearch } from './OrSearch-ddf244e6.js';
 export { _ as OrSearchV3 } from './OrSearch-2910207c.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-00583234.js';
 export { _ as OrSelect } from './OrSelect-d271f7a3.js';
-export { _ as OrSelectV3 } from './OrSelect-30f5ce68.js';
+export { _ as OrSelectV3 } from './OrSelect-4768c12b.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-054b26c6.js';
 export { S as OrSidebarPlacement, _ as OrSidebarV3, S as SidebarPlacement } from './OrSidebar-e07d338e.js';
 export { _ as OrSkeletonCircle } from './OrSkeletonCircle-c4bf0e34.js';
@@ -124,9 +124,9 @@ export { _ as OrTabV3 } from './OrTab-a989b4fd.js';
 export { _ as OrTabs } from './OrTabs-62e7e478.js';
 export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-778ce12d.js';
 export { _ as OrTag } from './OrTag-ce728fad.js';
-export { _ as OrTagInputV3 } from './OrTagInput-2642f4d9.js';
+export { _ as OrTagInputV3 } from './OrTagInput-c4110c0b.js';
 export { _ as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-bf15f5ad.js';
-export { _ as OrTagsV3, T as TagsOverflow } from './OrTags-9d3cf104.js';
+export { _ as OrTagsV3, T as TagsOverflow } from './OrTags-f6434f9b.js';
 export { _ as OrTeleport } from './OrTeleport.vue2-f0c16c71.js';
 export { _ as OrTeleportV3 } from './OrTeleport.vue2-9eb0eaee.js';
 export { _ as OrTextV3 } from './OrText-44449e7b.js';
@@ -210,7 +210,7 @@ import './codemirrorView-020fe885.js';
 import 'prosemirror-state';
 import 'prosemirror-commands';
 import 'lodash/keyBy';
-import './OrSelectMultipleControl-de32c83c.js';
+import './OrSelectMultipleControl-685d5af4.js';
 import './OrSelectPlaceholder-f36f4e40.js';
 import './OrSelectControlInput-28c226f8.js';
 import './OrSelectSingleControl-8ca0d898.js';

package/dist/esm/v3/{OrCode-37d50c74.js → OrCode-6f8164d5.js}

@@ -7,9 +7,9 @@ import '@onereach/styles/tailwind/plugins/core';
 import { u as useTheme } from './useTheme-0ef25778.js';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { basicSetup } from 'codemirror';
+import { keymap, EditorView } from '@codemirror/view';
 import { indentWithTab } from '@codemirror/commands';
 import { Compartment, EditorState } from '@codemirror/state';
-import { keymap, EditorView } from '@codemirror/view';
 import { s as script$7 } from './OrIconButton-13fd3f96.js';
 import { s as script$6 } from './OrModal-33100f1a.js';
 import { s as script$2 } from './OrError-69bd7f6a.js';
@@ -18,6 +18,16 @@ import { s as script$4 } from './OrInputBox-8c1a29dd.js';
 import { s as script$5 } from './OrLabel-40af976e.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, renderSlot, createTextVNode, toDisplayString, createElementVNode, withDirectives, createBlock, createCommentVNode, vShow, withModifiers, createSlots } from 'vue';
 
+var CodeLanguage;
+(function (CodeLanguage) {
+  CodeLanguage["HTML"] = "html";
+  CodeLanguage["CSS"] = "css";
+  CodeLanguage["JS"] = "js";
+  CodeLanguage["TS"] = "ts";
+  CodeLanguage["JSON"] = "json";
+  CodeLanguage["MD"] = "md";
+})(CodeLanguage || (CodeLanguage = {}));
+
 const Code = [
 // Layout
 'layout-column',
@@ -166,16 +176,6 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
 script$1.render = render$1;
 script$1.__file = "src/components/or-code-v3/partials/OrCodeControl.vue";
 
-var CodeLanguage;
-(function (CodeLanguage) {
-  CodeLanguage["HTML"] = "html";
-  CodeLanguage["CSS"] = "css";
-  CodeLanguage["JS"] = "js";
-  CodeLanguage["TS"] = "ts";
-  CodeLanguage["JSON"] = "json";
-  CodeLanguage["MD"] = "md";
-})(CodeLanguage || (CodeLanguage = {}));
-
 var script = defineComponent({
   components: {
     OrModal: script$6,
@@ -229,7 +229,7 @@ var script = defineComponent({
       default: true
     }
   },
-  emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
+  emits: ['update:modelValue', 'keydown', 'keyup', 'focus', 'blur'],
   expose: ['root', 'editorView', 'control', 'fullscreenControl', 'modal', 'focus', 'blur'],
   setup(props, context) {
     // Refs
@@ -284,9 +284,6 @@ var script = defineComponent({
     // #region Codemirror
     const theme = useTheme();
     const defaultExtensions = [basicSetup, keymap.of([indentWithTab]), EditorState.readOnly.of(props.readonly), EditorView.editable.of(!props.disabled), EditorView.domEventHandlers({
-      input: event => {
-        context.emit('input', event);
-      },
       keydown: event => {
         context.emit('keydown', event);
       },
@@ -301,7 +298,6 @@ var script = defineComponent({
       }
     }), EditorView.theme({
       '&': {
-        overflow: 'hidden',
         color: theme.textColor['on-background'],
         backgroundColor: theme.backgroundColor['background']
       },
@@ -317,8 +313,7 @@ var script = defineComponent({
       '.cm-gutters': {
         color: theme.textColor['on-background'],
         backgroundColor: theme.backgroundColor['primary-opacity-0-12'],
-        borderColor: theme.borderColor['outline'],
-        backdropFilter: 'blur(2px)'
+        borderColor: theme.borderColor['outline']
       },
       '.cm-activeLineGutter, .cm-activeLine': {
         backgroundColor: theme.backgroundColor['primary-opacity-0-08']
@@ -394,8 +389,8 @@ var script = defineComponent({
       editorView.destroy();
     });
     return {
-      root,
       editorView,
+      root,
       control,
       fullscreenControl,
       modal,
@@ -438,8 +433,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3 /* FORWARDED */
   }, 8 /* PROPS */, ["control-id", "label", "hint", "error", "disabled", "readonly"]), createVNode(_component_OrModal, {
     ref: "modal",
-    "additional-styles": _ctx.modalStyles,
-    size: 'l'
+    size: "l",
+    "additional-styles": _ctx.modalStyles
   }, createSlots({
     header: withCtx(() => [createTextVNode(toDisplayString(_ctx.label), 1 /* TEXT */)]),