@onereach/ui-components 8.22.1 → 8.22.2

package/dist/esm/v2/{OrSelect-83aff1e9.js → OrSelect-e10fb4a5.js}

@@ -1,4 +1,4 @@
-import { defineComponent, getCurrentInstance, ref, computed, toRefs, onMounted, watch } from 'vue-demi';
+import { defineComponent, getCurrentInstance, ref, computed, toRefs, watch } from 'vue-demi';
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
 import '@vueuse/core';
 import './dom-aecadd9a.js';
@@ -18,8 +18,8 @@ import { _ as __vue_component__$9 } from './OrInput-7d24e514.js';
 import { _ as __vue_component__$b } from './OrLabel-6637774a.js';
 import { _ as __vue_component__$c } from './OrMenuItem-fbe3e8e4.js';
 import { _ as __vue_component__$d } from './OrPopover-9471c7ea.js';
-import { T as TagsOverflow } from './OrTags-93fff411.js';
-import { _ as __vue_component__$1 } from './OrSelectMultipleControl-300ba243.js';
+import { T as TagsOverflow } from './OrTags-1acb6cde.js';
+import { _ as __vue_component__$1, c as castToMultipleValue } from './OrSelectMultipleControl-b449de97.js';
 import { _ as __vue_component__$2 } from './OrSelectSingleControl-6804ef1b.js';
 import './OrSelectPlaceholder-d03c1076.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -233,11 +233,6 @@ var script = defineComponent({
     const showClear = computed(() => {
       return enableClear.value && !isEmptyModelValue.value;
     });
-    onMounted(() => {
-      if (!proxyModelValue.value && props.multiple) {
-        proxyModelValue.value = [];
-      }
-    });
     const focused = computed(() => {
       var _a, _b;
       if (multiple.value) {
@@ -322,11 +317,11 @@ var script = defineComponent({
     }
     function toggleOption(option) {
       const modelValue = proxyModelValue.value;
-      if (Array.isArray(modelValue)) {
-        if (modelValue.includes(option)) {
+      if (multiple.value) {
+        if (modelValue && Array.isArray(modelValue) && modelValue.includes(option)) {
           deselect(option);
         } else {
-          proxyModelValue.value = [...modelValue, option];
+          proxyModelValue.value = [...castToMultipleValue(modelValue), option];
         }
       } else {
         proxyModelValue.value = option;
@@ -457,6 +452,15 @@ var __vue_render__ = function () {
       on: {
         "reset": _vm.deselect
       },
+      scopedSlots: _vm._u([{
+        key: "tag",
+        fn: function (ref) {
+          var item = ref.item;
+          return [_vm._t("tag", null, {
+            "item": item
+          })];
+        }
+      }], null, true),
       model: {
         value: _vm.searchText,
         callback: function ($$v) {

package/dist/esm/v2/{OrSelectMultipleControl-300ba243.js → OrSelectMultipleControl-b449de97.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-93fff411.js';
+import { _ as __vue_component__$3, T as TagsOverflow } from './OrTags-1acb6cde.js';
 import { _ as __vue_component__$2 } from './OrSelectControlInput-d968f1b8.js';
 import { _ as __vue_component__$1 } from './OrSelectPlaceholder-d03c1076.js';
 import { i as isEmptyValue } from './isEmptyValue-fd56a6e4.js';
@@ -167,7 +167,17 @@ var __vue_render__ = function () {
         return _vm.$emit('reset', $event);
       }
     },
-    scopedSlots: _vm._u([_vm.enableSearch ? {
+    scopedSlots: _vm._u([{
+      key: "tag",
+      fn: function (ref) {
+        var item = ref.item;
+        return [_vm._t("tag", function () {
+          return [_vm._v("\n        " + _vm._s(item.label) + "\n      ")];
+        }, {
+          "item": item
+        })];
+      }
+    }, _vm.enableSearch ? {
       key: "tail",
       fn: function () {
         return [_c('div', {
@@ -217,4 +227,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 { __vue_component__ as _ };
+export { __vue_component__ as _, castToMultipleValue as c };

package/dist/esm/v2/{OrTag-ce728fad.js → OrTag-53599b71.js}

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue-demi';
 import { _ as __vue_component__$1 } from './OrIcon-69c5cadc.js';
-import { D as hexToRgb } from './color-6b0fc765.js';
+import { D as hexToRgb } from './color-911f1122.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrTagInput-1589f828.js → OrTagInput-18665ac7.js}

@@ -13,7 +13,7 @@ import { _ as __vue_component__$4 } from './OrInputBox-f3dd826e.js';
 import './OrInputBox.vue_rollup-plugin-vue_script-e9b6fa51.js';
 import { _ as __vue_component__$5 } from './OrLabel-6637774a.js';
 import { a as TagColor } from './OrTag-b8b933b5.js';
-import { _ as __vue_component__$6, T as TagsOverflow } from './OrTags-93fff411.js';
+import { _ as __vue_component__$6, T as TagsOverflow } from './OrTags-1acb6cde.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
@@ -235,7 +235,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-a10dd832]{min-width:0;background:0 0;outline:0}";
+var css_248z = "input[data-v-85ccf734]{min-width:0;background:0 0;outline:0}";
 styleInject(css_248z);
 
 /* script */
@@ -308,7 +308,17 @@ var __vue_render__ = function () {
         return _vm.remove($event);
       }
     },
-    scopedSlots: _vm._u([_vm.showControl ? {
+    scopedSlots: _vm._u([{
+      key: "tag",
+      fn: function (ref) {
+        var item = ref.item;
+        return [_vm._t("tag", function () {
+          return [_vm._v("\n          " + _vm._s(item.label) + "\n        ")];
+        }, {
+          "item": item
+        })];
+      }
+    }, _vm.showControl ? {
       key: "tail",
       fn: function () {
         return [_c('div', {
@@ -410,7 +420,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-a10dd832";
+const __vue_scope_id__ = "data-v-85ccf734";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v2/{OrTags-93fff411.js → OrTags-1acb6cde.js}

@@ -199,7 +199,11 @@ var __vue_render__ = function () {
           return _vm.$emit('reset', item.value);
         }
       }
-    }, 'OrTag', Object.assign({}, _vm.tagProps, item.tagProps), false), [_vm._v("\n      " + _vm._s(item.label) + "\n    ")]);
+    }, 'OrTag', Object.assign({}, _vm.tagProps, item.tagProps), false), [_vm._t("tag", function () {
+      return [_vm._v("\n        " + _vm._s(item.label) + "\n      ")];
+    }, {
+      "item": item
+    })], 2);
   }), _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,
@@ -232,7 +236,11 @@ var __vue_render__ = function () {
           return _vm.$emit('reset', item.value);
         }
       }
-    }, 'OrTag', Object.assign({}, _vm.tagProps, item.tagProps), false), [_vm._v("\n          " + _vm._s(item.label) + "\n        ")]);
+    }, 'OrTag', Object.assign({}, _vm.tagProps, item.tagProps), false), [_vm._t("tag", function () {
+      return [_vm._v("\n            " + _vm._s(item.label) + "\n          ")];
+    }, {
+      "item": item
+    })], 2);
   }), 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/{color-6b0fc765.js → color-911f1122.js}

@@ -102,5 +102,9 @@ function generateHslFromString(str) {
 function hslToColorString(hsl) {
   return `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
 }
+function generateColorFromString(str) {
+  let limits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : HSL_LIMITS;
+  return hslToColorString(generateHslFromString(str, limits));
+}
 
-export { RX_QUERY_START as A, RX_SHORT_COLOR as B, RX_LONG_COLOR as C, hexToRgb as D, rgbToHex as E, generateHslFromString as F, hslToColorString as G, HSL_LIMITS as H, getHashOfString as I, normalize as J, RX_ARRAY_NOTATION as R, RX_BV_PREFIX as a, RX_DIGITS as b, RX_EXTENSION as c, RX_HASH as d, RX_HASH_ID as e, RX_HTML_TAGS as f, RX_HYPHENATE as g, RX_LOWER_UPPER as h, RX_NUMBER as i, RX_PLUS as j, RX_REGEXP_REPLACE as k, RX_SPACES as l, RX_SPACE_SPLIT as m, RX_STAR as n, RX_START_SPACE_WORD as o, RX_TRIM_LEFT as p, RX_TRIM_RIGHT as q, RX_UNDERSCORE as r, RX_UN_KEBAB as s, RX_ABBREVIATION_FROM_STRING as t, RX_DATE as u, RX_DATE_SPLIT as v, RX_TIME as w, RX_HREF as x, RX_ENCODED_COMMA as y, RX_ENCODE_REVERSE as z };
+export { RX_QUERY_START as A, RX_SHORT_COLOR as B, RX_LONG_COLOR as C, hexToRgb as D, rgbToHex as E, generateHslFromString as F, hslToColorString as G, HSL_LIMITS as H, generateColorFromString as I, getHashOfString as J, normalize as K, RX_ARRAY_NOTATION as R, RX_BV_PREFIX as a, RX_DIGITS as b, RX_EXTENSION as c, RX_HASH as d, RX_HASH_ID as e, RX_HTML_TAGS as f, RX_HYPHENATE as g, RX_LOWER_UPPER as h, RX_NUMBER as i, RX_PLUS as j, RX_REGEXP_REPLACE as k, RX_SPACES as l, RX_SPACE_SPLIT as m, RX_STAR as n, RX_START_SPACE_WORD as o, RX_TRIM_LEFT as p, RX_TRIM_RIGHT as q, RX_UNDERSCORE as r, RX_UN_KEBAB as s, RX_ABBREVIATION_FROM_STRING as t, RX_DATE as u, RX_DATE_SPLIT as v, RX_TIME as w, RX_HREF as x, RX_ENCODED_COMMA as y, RX_ENCODE_REVERSE as z };

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

@@ -1,5 +1,5 @@
 export { O as OR_AVATAR_SIZE, _ as OrAvatar } from '../OrAvatar-fb7beb01.js';
-export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from '../OrAvatar-9d0217f7.js';
+export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from '../OrAvatar-62fcfe74.js';
 export { B as BottomSheetVariant, _ as OrBottomSheetV3 } from '../OrBottomSheet-d17c8327.js';
 export { _ as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonViews } from '../OrButton-9e5affac.js';
 export { _ as OrButtonGroupV3 } from '../OrButtonGroup-2ede0e49.js';
@@ -105,7 +105,7 @@ export { _ as OrSearch } from '../OrSearch-525e988d.js';
 export { _ as OrSearchV3 } from '../OrSearch-cf9140ac.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-ef70b1d7.js';
 export { _ as OrSelect } from '../OrSelect-2808e01d.js';
-export { _ as OrSelectV3 } from '../OrSelect-83aff1e9.js';
+export { _ as OrSelectV3 } from '../OrSelect-e10fb4a5.js';
 export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-054b26c6.js';
 export { S as OrSidebarPlacement, _ as OrSidebarV3, S as SidebarPlacement } from '../OrSidebar-6e76cdfc.js';
 export { _ as OrSkeletonCircle } from '../OrSkeletonCircle-c4bf0e34.js';
@@ -126,10 +126,10 @@ export { _ as OrTabHeaderItem } from '../OrTabHeaderItem-424f2986.js';
 export { _ as OrTabV3 } from '../OrTab-a989b4fd.js';
 export { _ as OrTabs } from '../OrTabs-62e7e478.js';
 export { _ as OrTabsV3, T as TabsVariant } from '../OrTabs-9706cf47.js';
-export { _ as OrTag } from '../OrTag-ce728fad.js';
-export { _ as OrTagInputV3 } from '../OrTagInput-1589f828.js';
+export { _ as OrTag } from '../OrTag-53599b71.js';
+export { _ as OrTagInputV3 } from '../OrTagInput-18665ac7.js';
 export { _ as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-b8b933b5.js';
-export { _ as OrTagsV3, T as TagsOverflow } from '../OrTags-93fff411.js';
+export { _ as OrTagsV3, T as TagsOverflow } from '../OrTags-1acb6cde.js';
 export { _ as OrTeleport } from '../OrTeleport.vue2-f0c16c71.js';
 export { _ as OrTeleportV3 } from '../OrTeleport.vue2-9eb0eaee.js';
 export { _ as OrTextV3 } from '../OrText-44449e7b.js';
@@ -150,7 +150,7 @@ export { _ as OrTreeV3, T as TreeNodeDropPosition } from '../OrTree-43e91d82.js'
 import 'vue-demi';
 import '../style-inject.es-4c6f2515.js';
 import '../normalize-component-6e8e3d80.js';
-import '../color-6b0fc765.js';
+import '../color-911f1122.js';
 import '@vueuse/core';
 import '../dom-aecadd9a.js';
 import 'lodash/isElement';
@@ -212,7 +212,7 @@ import '../codemirrorView-020fe885.js';
 import 'prosemirror-state';
 import 'prosemirror-commands';
 import 'lodash/keyBy';
-import '../OrSelectMultipleControl-300ba243.js';
+import '../OrSelectMultipleControl-b449de97.js';
 import '../isEqualValue-f8bf73d9.js';
 import '../OrSelectControlInput-d968f1b8.js';
 import '../OrSelectPlaceholder-d03c1076.js';

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

@@ -1,5 +1,5 @@
-export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from '../../OrAvatar-9d0217f7.js';
+export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from '../../OrAvatar-62fcfe74.js';
 import 'vue-demi';
-import '../../color-6b0fc765.js';
+import '../../color-911f1122.js';
 import '../../OrIcon-3f99ef27.js';
 import '../../normalize-component-6e8e3d80.js';

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

@@ -1,4 +1,4 @@
-export { _ as OrSelectV3 } from '../../OrSelect-83aff1e9.js';
+export { _ as OrSelectV3 } from '../../OrSelect-e10fb4a5.js';
 export { I as SelectSize } from '../../OrInputBox.vue_rollup-plugin-vue_script-e9b6fa51.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';
@@ -38,12 +38,12 @@ import '../../OrInput-7d24e514.js';
 import '../../useValidationAttributes-d1abbe34.js';
 import '../../OrLoader-784e2060.js';
 import '../../OrMenuItem-fbe3e8e4.js';
-import '../../OrTags-93fff411.js';
+import '../../OrTags-1acb6cde.js';
 import '../../useOverflow-e91d2314.js';
 import '../../OrButton-f489e6b3.js';
 import '../../OrButton.vue_rollup-plugin-vue_script-ec8cfaee.js';
 import '../../OrTag-b8b933b5.js';
-import '../../OrSelectMultipleControl-300ba243.js';
+import '../../OrSelectMultipleControl-b449de97.js';
 import '../../isEqualValue-f8bf73d9.js';
 import '../../OrSelectControlInput-d968f1b8.js';
 import '../../OrSelectPlaceholder-d03c1076.js';

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

@@ -1,4 +1,4 @@
-export { _ as OrSelectMultipleControl } from '../../../OrSelectMultipleControl-300ba243.js';
+export { _ as OrSelectMultipleControl } from '../../../OrSelectMultipleControl-b449de97.js';
 export { _ as OrSelectSingleControl } from '../../../OrSelectSingleControl-6804ef1b.js';
 export { _ as OrSelectPlaceholder } from '../../../OrSelectPlaceholder-d03c1076.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-93fff411.js';
+import '../../../OrTags-1acb6cde.js';
 import '../../../useOverflow-e91d2314.js';
 import '../../../OrButton-f489e6b3.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-300ba243.js';
+export { _ as OrSelectMultipleControl } from '../../../../OrSelectMultipleControl-b449de97.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-93fff411.js';
+import '../../../../OrTags-1acb6cde.js';
 import '../../../../useOverflow-e91d2314.js';
 import '../../../../OrButton-f489e6b3.js';
 import '../../../../OrButton.vue_rollup-plugin-vue_script-ec8cfaee.js';

package/dist/esm/v2/components/or-select-v3/utils/castToMultipleValue.d.ts

@@ -0,0 +1,2 @@
+import { SelectValue } from '../types';
+export declare function castToMultipleValue(value: SelectValue): SelectValue[];

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

@@ -1,4 +1,4 @@
-export { _ as OrTag } from '../../OrTag-ce728fad.js';
+export { _ as OrTag } from '../../OrTag-53599b71.js';
 import 'vue-demi';
 import '../../OrIcon-69c5cadc.js';
 import '../../OrTooltip.vue_rollup-plugin-vue_styles.0-b9697924.js';
@@ -14,4 +14,4 @@ import '../../dom-aecadd9a.js';
 import 'lodash/isElement';
 import 'lodash/get';
 import '../../px-to-rem-0b26b83e.js';
-import '../../color-6b0fc765.js';
+import '../../color-911f1122.js';

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

@@ -54,7 +54,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: PropType<string[]>;
-        default: () => never[];
+        default: () => [];
     };
     label: {
         type: StringConstructor;
@@ -103,7 +103,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
         type: PropType<string[]>;
-        default: () => never[];
+        default: () => [];
     };
     label: {
         type: StringConstructor;

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

@@ -1,4 +1,4 @@
-export { _ as OrTagInputV3 } from '../../OrTagInput-1589f828.js';
+export { _ as OrTagInputV3 } from '../../OrTagInput-18665ac7.js';
 export { I as TagInputSize } from '../../OrInputBox.vue_rollup-plugin-vue_script-e9b6fa51.js';
 import '@vueuse/core';
 import 'vue-demi';
@@ -31,7 +31,7 @@ import '../../isAncestor-9acec98b.js';
 import '../../OrInputBox-f3dd826e.js';
 import '../../OrLabel-6637774a.js';
 import '../../OrTag-b8b933b5.js';
-import '../../OrTags-93fff411.js';
+import '../../OrTags-1acb6cde.js';
 import '../../useOverflow-e91d2314.js';
 import '../../OrButton-f489e6b3.js';
 import '../../OrButton.vue_rollup-plugin-vue_script-ec8cfaee.js';

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

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

package/dist/esm/v2/components/or-text-v3/OrText.vue.d.ts

@@ -3,7 +3,7 @@
  * Ellipsis can be placed in the end or in the middle of the text. Convenient for displaying long labels,
  * that have same beginning and differ in the ending part.
  */
-declare const _default: import("vue2").ComponentOptions<import("vue2").default, import("@vue/composition-api").ShallowUnwrapRef<{
+declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     mainTextStyles: import("@vue/composition-api").ComputedRef<string[]>;
@@ -48,7 +48,7 @@ declare const _default: import("vue2").ComponentOptions<import("vue2").default,
         type: NumberConstructor;
         default: number;
     };
-}>> & Omit<import("vue2").VueConstructor<import("vue2").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     text: string;
     sliceIndex: number;
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<{

package/dist/esm/v2/index.js

@@ -1,5 +1,5 @@
 export { O as OR_AVATAR_SIZE, _ as OrAvatar } from './OrAvatar-fb7beb01.js';
-export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from './OrAvatar-9d0217f7.js';
+export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from './OrAvatar-62fcfe74.js';
 export { B as BottomSheetVariant, _ as OrBottomSheetV3 } from './OrBottomSheet-d17c8327.js';
 export { _ as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonViews } from './OrButton-9e5affac.js';
 export { _ as OrButtonGroupV3 } from './OrButtonGroup-2ede0e49.js';
@@ -105,7 +105,7 @@ export { _ as OrSearch } from './OrSearch-525e988d.js';
 export { _ as OrSearchV3 } from './OrSearch-cf9140ac.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-ef70b1d7.js';
 export { _ as OrSelect } from './OrSelect-2808e01d.js';
-export { _ as OrSelectV3 } from './OrSelect-83aff1e9.js';
+export { _ as OrSelectV3 } from './OrSelect-e10fb4a5.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-054b26c6.js';
 export { S as OrSidebarPlacement, _ as OrSidebarV3, S as SidebarPlacement } from './OrSidebar-6e76cdfc.js';
 export { _ as OrSkeletonCircle } from './OrSkeletonCircle-c4bf0e34.js';
@@ -126,10 +126,10 @@ export { _ as OrTabHeaderItem } from './OrTabHeaderItem-424f2986.js';
 export { _ as OrTabV3 } from './OrTab-a989b4fd.js';
 export { _ as OrTabs } from './OrTabs-62e7e478.js';
 export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-9706cf47.js';
-export { _ as OrTag } from './OrTag-ce728fad.js';
-export { _ as OrTagInputV3 } from './OrTagInput-1589f828.js';
+export { _ as OrTag } from './OrTag-53599b71.js';
+export { _ as OrTagInputV3 } from './OrTagInput-18665ac7.js';
 export { _ as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-b8b933b5.js';
-export { _ as OrTagsV3, T as TagsOverflow } from './OrTags-93fff411.js';
+export { _ as OrTagsV3, T as TagsOverflow } from './OrTags-1acb6cde.js';
 export { _ as OrTeleport } from './OrTeleport.vue2-f0c16c71.js';
 export { _ as OrTeleportV3 } from './OrTeleport.vue2-9eb0eaee.js';
 export { _ as OrTextV3 } from './OrText-44449e7b.js';
@@ -157,8 +157,8 @@ export { u as useResponsive } from './useResponsive-1baf3485.js';
 export { u as useTheme } from './useTheme-0ef25778.js';
 export { u as useToggle } from './useToggle-c04fc920.js';
 export { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
-export { H as HSL_LIMITS, t as RX_ABBREVIATION_FROM_STRING, R as RX_ARRAY_NOTATION, a as RX_BV_PREFIX, u as RX_DATE, v as RX_DATE_SPLIT, b as RX_DIGITS, y as RX_ENCODED_COMMA, z as RX_ENCODE_REVERSE, c as RX_EXTENSION, d as RX_HASH, e as RX_HASH_ID, x as RX_HREF, f as RX_HTML_TAGS, g as RX_HYPHENATE, C as RX_LONG_COLOR, h as RX_LOWER_UPPER, i as RX_NUMBER, j as RX_PLUS, A as RX_QUERY_START, k as RX_REGEXP_REPLACE, B as RX_SHORT_COLOR, l as RX_SPACES, m as RX_SPACE_SPLIT, n as RX_STAR, o as RX_START_SPACE_WORD, w as RX_TIME, p as RX_TRIM_LEFT, q as RX_TRIM_RIGHT, r as RX_UNDERSCORE, s as RX_UN_KEBAB, F as generateHslFromString, I as getHashOfString, D as hexToRgb, G as hslToColorString, J as normalize, E as rgbToHex } from './color-6b0fc765.js';
-export { C as CODE_BACKSPACE, a as CODE_BREAK, b as CODE_DELETE, c as CODE_DOWN, d as CODE_END, e as CODE_ENTER, f as CODE_ESC, g as CODE_HOME, h as CODE_LEFT, i as CODE_PAGEDOWN, j as CODE_PAGEUP, k as CODE_RIGHT, l as CODE_SPACE, m as CODE_UP, p as PLACEMENT_BOTTOM_END, o as PLACEMENT_BOTTOM_START, t as PLACEMENT_LEFT_END, s as PLACEMENT_LEFT_START, r as PLACEMENT_RIGHT_END, q as PLACEMENT_RIGHT_START, n as PLACEMENT_TOP_END, P as PLACEMENT_TOP_START, u as getAbbreviation, v as isDescendant } from './isDescendant-61c67ccc.js';
+export { H as HSL_LIMITS, t as RX_ABBREVIATION_FROM_STRING, R as RX_ARRAY_NOTATION, a as RX_BV_PREFIX, u as RX_DATE, v as RX_DATE_SPLIT, b as RX_DIGITS, y as RX_ENCODED_COMMA, z as RX_ENCODE_REVERSE, c as RX_EXTENSION, d as RX_HASH, e as RX_HASH_ID, x as RX_HREF, f as RX_HTML_TAGS, g as RX_HYPHENATE, C as RX_LONG_COLOR, h as RX_LOWER_UPPER, i as RX_NUMBER, j as RX_PLUS, A as RX_QUERY_START, k as RX_REGEXP_REPLACE, B as RX_SHORT_COLOR, l as RX_SPACES, m as RX_SPACE_SPLIT, n as RX_STAR, o as RX_START_SPACE_WORD, w as RX_TIME, p as RX_TRIM_LEFT, q as RX_TRIM_RIGHT, r as RX_UNDERSCORE, s as RX_UN_KEBAB, I as generateColorFromString, F as generateHslFromString, J as getHashOfString, D as hexToRgb, G as hslToColorString, K as normalize, E as rgbToHex } from './color-911f1122.js';
+export { C as CODE_BACKSPACE, a as CODE_BREAK, b as CODE_DELETE, c as CODE_DOWN, d as CODE_END, e as CODE_ENTER, f as CODE_ESC, g as CODE_HOME, h as CODE_LEFT, i as CODE_PAGEDOWN, j as CODE_PAGEUP, k as CODE_RIGHT, l as CODE_SPACE, m as CODE_UP, p as PLACEMENT_BOTTOM_END, o as PLACEMENT_BOTTOM_START, t as PLACEMENT_LEFT_END, s as PLACEMENT_LEFT_START, r as PLACEMENT_RIGHT_END, q as PLACEMENT_RIGHT_START, n as PLACEMENT_TOP_END, P as PLACEMENT_TOP_START, u as getAbbreviation, v as isDescendant } from './isDescendant-4434a968.js';
 export { M as MutationObs, f as addClass, c as cancelAF, e as contains, m as getAttr, t as getBCR, g as getById, u as getCS, x as getMaxZIndex, q as getStyle, n as hasAttr, j as hasClass, i as isVisible, v as offset, w as position, b as reflow, l as removeAttr, h as removeClass, a as removeNode, p as removeStyle, r as requestAF, d as select, s as selectAll, k as setAttr, o as setStyle } from './dom-aecadd9a.js';
 export { p as pxToRem } from './px-to-rem-0b26b83e.js';
 export { i as isAncestor } from './isAncestor-9acec98b.js';
@@ -214,7 +214,7 @@ import './codemirrorView-020fe885.js';
 import 'prosemirror-state';
 import 'prosemirror-commands';
 import 'lodash/keyBy';
-import './OrSelectMultipleControl-300ba243.js';
+import './OrSelectMultipleControl-b449de97.js';
 import './OrSelectControlInput-d968f1b8.js';
 import './OrSelectPlaceholder-d03c1076.js';
 import './OrSelectSingleControl-6804ef1b.js';

package/dist/esm/v2/{isDescendant-61c67ccc.js → isDescendant-4434a968.js}

@@ -1,4 +1,4 @@
-import { t as RX_ABBREVIATION_FROM_STRING } from './color-6b0fc765.js';
+import { t as RX_ABBREVIATION_FROM_STRING } from './color-911f1122.js';
 
 const CODE_BACKSPACE = 8;
 const CODE_BREAK = 19;

package/dist/esm/v2/utils/functions/color.d.ts

@@ -17,3 +17,7 @@ export declare function hslToColorString(hsl: {
     s: number;
     l: number;
 }): string;
+export declare function generateColorFromString(str: string, limits?: Partial<Record<'h' | 's' | 'l', {
+    min: number;
+    max: number;
+}>>): string;

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

@@ -1,5 +1,5 @@
-export { H as HSL_LIMITS, t as RX_ABBREVIATION_FROM_STRING, R as RX_ARRAY_NOTATION, a as RX_BV_PREFIX, u as RX_DATE, v as RX_DATE_SPLIT, b as RX_DIGITS, y as RX_ENCODED_COMMA, z as RX_ENCODE_REVERSE, c as RX_EXTENSION, d as RX_HASH, e as RX_HASH_ID, x as RX_HREF, f as RX_HTML_TAGS, g as RX_HYPHENATE, C as RX_LONG_COLOR, h as RX_LOWER_UPPER, i as RX_NUMBER, j as RX_PLUS, A as RX_QUERY_START, k as RX_REGEXP_REPLACE, B as RX_SHORT_COLOR, l as RX_SPACES, m as RX_SPACE_SPLIT, n as RX_STAR, o as RX_START_SPACE_WORD, w as RX_TIME, p as RX_TRIM_LEFT, q as RX_TRIM_RIGHT, r as RX_UNDERSCORE, s as RX_UN_KEBAB, F as generateHslFromString, I as getHashOfString, D as hexToRgb, G as hslToColorString, J as normalize, E as rgbToHex } from '../color-6b0fc765.js';
-export { C as CODE_BACKSPACE, a as CODE_BREAK, b as CODE_DELETE, c as CODE_DOWN, d as CODE_END, e as CODE_ENTER, f as CODE_ESC, g as CODE_HOME, h as CODE_LEFT, i as CODE_PAGEDOWN, j as CODE_PAGEUP, k as CODE_RIGHT, l as CODE_SPACE, m as CODE_UP, p as PLACEMENT_BOTTOM_END, o as PLACEMENT_BOTTOM_START, t as PLACEMENT_LEFT_END, s as PLACEMENT_LEFT_START, r as PLACEMENT_RIGHT_END, q as PLACEMENT_RIGHT_START, n as PLACEMENT_TOP_END, P as PLACEMENT_TOP_START, u as getAbbreviation, v as isDescendant } from '../isDescendant-61c67ccc.js';
+export { H as HSL_LIMITS, t as RX_ABBREVIATION_FROM_STRING, R as RX_ARRAY_NOTATION, a as RX_BV_PREFIX, u as RX_DATE, v as RX_DATE_SPLIT, b as RX_DIGITS, y as RX_ENCODED_COMMA, z as RX_ENCODE_REVERSE, c as RX_EXTENSION, d as RX_HASH, e as RX_HASH_ID, x as RX_HREF, f as RX_HTML_TAGS, g as RX_HYPHENATE, C as RX_LONG_COLOR, h as RX_LOWER_UPPER, i as RX_NUMBER, j as RX_PLUS, A as RX_QUERY_START, k as RX_REGEXP_REPLACE, B as RX_SHORT_COLOR, l as RX_SPACES, m as RX_SPACE_SPLIT, n as RX_STAR, o as RX_START_SPACE_WORD, w as RX_TIME, p as RX_TRIM_LEFT, q as RX_TRIM_RIGHT, r as RX_UNDERSCORE, s as RX_UN_KEBAB, I as generateColorFromString, F as generateHslFromString, J as getHashOfString, D as hexToRgb, G as hslToColorString, K as normalize, E as rgbToHex } from '../color-911f1122.js';
+export { C as CODE_BACKSPACE, a as CODE_BREAK, b as CODE_DELETE, c as CODE_DOWN, d as CODE_END, e as CODE_ENTER, f as CODE_ESC, g as CODE_HOME, h as CODE_LEFT, i as CODE_PAGEDOWN, j as CODE_PAGEUP, k as CODE_RIGHT, l as CODE_SPACE, m as CODE_UP, p as PLACEMENT_BOTTOM_END, o as PLACEMENT_BOTTOM_START, t as PLACEMENT_LEFT_END, s as PLACEMENT_LEFT_START, r as PLACEMENT_RIGHT_END, q as PLACEMENT_RIGHT_START, n as PLACEMENT_TOP_END, P as PLACEMENT_TOP_START, u as getAbbreviation, v as isDescendant } from '../isDescendant-4434a968.js';
 export { M as MutationObs, f as addClass, c as cancelAF, e as contains, m as getAttr, t as getBCR, g as getById, u as getCS, x as getMaxZIndex, q as getStyle, n as hasAttr, j as hasClass, i as isVisible, v as offset, w as position, b as reflow, l as removeAttr, h as removeClass, a as removeNode, p as removeStyle, r as requestAF, d as select, s as selectAll, k as setAttr, o as setStyle } from '../dom-aecadd9a.js';
 export { p as pxToRem } from '../px-to-rem-0b26b83e.js';
 export { i as isAncestor } from '../isAncestor-9acec98b.js';

package/dist/esm/v3/{OrAvatar-b0179873.js → OrAvatar-ae032fe2.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { G as hslToColorString, F as generateHslFromString } from './color-6b0fc765.js';
+import { G as hslToColorString, F as generateHslFromString } from './color-911f1122.js';
 import { s as script$1 } from './OrIcon-b2e2d0aa.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createBlock, createCommentVNode } from 'vue';
 

package/dist/esm/v3/{OrSelect-7e9a8fa9.js → OrSelect-78a9da6c.js}

@@ -1,4 +1,4 @@
-import { defineComponent, getCurrentInstance, ref, computed, toRefs, onMounted, watch } from 'vue-demi';
+import { defineComponent, getCurrentInstance, ref, computed, toRefs, watch } from 'vue-demi';
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
 import '@vueuse/core';
 import './dom-aecadd9a.js';
@@ -17,8 +17,8 @@ import { s as script$9 } from './OrInput-c92be458.js';
 import { s as script$b } from './OrLabel-6c83afe4.js';
 import { s as script$c } from './OrMenuItem-2928ba60.js';
 import { s as script$d } from './OrPopover-1c87b4ed.js';
-import { T as TagsOverflow } from './OrTags-b5c62b28.js';
-import { s as script$1 } from './OrSelectMultipleControl-6476e58b.js';
+import { T as TagsOverflow } from './OrTags-b5aea0be.js';
+import { s as script$1, c as castToMultipleValue } from './OrSelectMultipleControl-9d33a012.js';
 import { s as script$2 } from './OrSelectSingleControl-384d4b45.js';
 import './OrSelectPlaceholder-fc5a2dbf.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, withModifiers, createVNode, Fragment, renderList, vShow } from 'vue';
@@ -232,11 +232,6 @@ var script = defineComponent({
     const showClear = computed(() => {
       return enableClear.value && !isEmptyModelValue.value;
     });
-    onMounted(() => {
-      if (!proxyModelValue.value && props.multiple) {
-        proxyModelValue.value = [];
-      }
-    });
     const focused = computed(() => {
       var _a, _b;
       if (multiple.value) {
@@ -321,11 +316,11 @@ var script = defineComponent({
     }
     function toggleOption(option) {
       const modelValue = proxyModelValue.value;
-      if (Array.isArray(modelValue)) {
-        if (modelValue.includes(option)) {
+      if (multiple.value) {
+        if (modelValue && Array.isArray(modelValue) && modelValue.includes(option)) {
           deselect(option);
         } else {
-          proxyModelValue.value = [...modelValue, option];
+          proxyModelValue.value = [...castToMultipleValue(modelValue), option];
         }
       } else {
         proxyModelValue.value = option;
@@ -452,7 +447,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       "enable-search": _ctx.enableSearch,
       "is-open": _ctx.popoverState === 'open',
       onReset: _ctx.deselect
-    }, null, 8 /* PROPS */, ["modelValue", "model", "options", "overflow", "placeholder", "readonly", "disabled", "enable-search", "is-open", "onReset"])) : (openBlock(), createBlock(_component_OrSelectSingleControl, {
+    }, {
+      tag: withCtx(_ref => {
+        let {
+          item
+        } = _ref;
+        return [renderSlot(_ctx.$slots, "tag", {
+          item: item
+        })];
+      }),
+      _: 3 /* FORWARDED */
+    }, 8 /* PROPS */, ["modelValue", "model", "options", "overflow", "placeholder", "readonly", "disabled", "enable-search", "is-open", "onReset"])) : (openBlock(), createBlock(_component_OrSelectSingleControl, {
       key: 1,
       ref: "singleControl",
       modelValue: _ctx.searchText,

package/dist/esm/v3/{OrSelectMultipleControl-6476e58b.js → OrSelectMultipleControl-9d33a012.js}

@@ -5,11 +5,11 @@ 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 { s as script$3, T as TagsOverflow } from './OrTags-b5c62b28.js';
+import { s as script$3, T as TagsOverflow } from './OrTags-b5aea0be.js';
 import { s as script$2 } from './OrSelectControlInput-266e9375.js';
 import { s as script$1 } from './OrSelectPlaceholder-fc5a2dbf.js';
 import { i as isEmptyValue } from './isEmptyValue-fd56a6e4.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, withDirectives, createVNode, createSlots, withCtx, createElementVNode, vShow, createBlock, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, withDirectives, createVNode, createSlots, withCtx, renderSlot, createTextVNode, toDisplayString, createElementVNode, vShow, createBlock, createCommentVNode } from 'vue';
 
 const SelectMultipleControlRoot = [
 // Layout
@@ -155,6 +155,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     overflow: _ctx.overflow,
     onReset: _cache[1] || (_cache[1] = $event => _ctx.$emit('reset', $event))
   }, createSlots({
+    tag: withCtx(_ref => {
+      let {
+        item
+      } = _ref;
+      return [renderSlot(_ctx.$slots, "tag", {
+        item: item
+      }, () => [createTextVNode(toDisplayString(item.label), 1 /* TEXT */)])];
+    }),
+
     _: 2 /* DYNAMIC */
   }, [_ctx.enableSearch ? {
     name: "tail",
@@ -180,4 +189,4 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 script.render = render;
 script.__file = "src/components/or-select-v3/partials/or-select-multiple-control/OrSelectMultipleControl.vue";
 
-export { script as s };
+export { castToMultipleValue as c, script as s };

package/dist/esm/v3/{OrTag-bc8177a4.js → OrTag-04abf6a7.js}

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue-demi';
 import { s as script$1 } from './OrIcon-eb0a5aa2.js';
-import { D as hexToRgb } from './color-6b0fc765.js';
+import { D as hexToRgb } from './color-911f1122.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createVNode, createElementVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 

package/dist/esm/v3/{OrTagInput-c9eefc97.js → OrTagInput-dfa119ea.js}

@@ -12,7 +12,7 @@ import { s as script$3 } from './OrIconButton-836a0621.js';
 import { s as script$4 } from './OrInputBox-be83fe16.js';
 import { s as script$5 } from './OrLabel-6c83afe4.js';
 import { a as TagColor } from './OrTag-1b111af7.js';
-import { s as script$6, T as TagsOverflow } from './OrTags-b5c62b28.js';
+import { s as script$6, T as TagsOverflow } from './OrTags-b5aea0be.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, createSlots, createElementVNode, withDirectives, mergeProps, withKeys, vModelDynamic, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
@@ -285,6 +285,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       overflow: _ctx.overflow,
       onReset: _cache[5] || (_cache[5] = $event => _ctx.remove($event))
     }, createSlots({
+      tag: withCtx(_ref => {
+        let {
+          item
+        } = _ref;
+        return [renderSlot(_ctx.$slots, "tag", {
+          item: item
+        }, () => [createTextVNode(toDisplayString(item.label), 1 /* TEXT */)])];
+      }),
+
       _: 2 /* DYNAMIC */
     }, [_ctx.showControl ? {
       name: "tail",