@onereach/ui-components 10.3.4 → 10.3.5-beta.4335.0

package/dist/esm/v2/types/index.d.ts

@@ -1,4 +1,9 @@
 export * from './DateFormat';
 export * from './FilterFunction';
+export * from './Group';
+export * from './GroupFunction';
+export * from './Item';
 export * from './Locale';
+export * from './ModelValue';
+export * from './SearchFunction';
 export * from './TimeFormat';

package/dist/esm/v2/{types-8b80518c.js → types-a3470d9a.js}

@@ -1,13 +1,13 @@
 import { useToggle } from '@vueuse/core';
 import { defineComponent, ref, computed, onBeforeMount, onBeforeUnmount, nextTick } from 'vue-demi';
-import { u as useElevation } from './useElevation-37722ead.js';
+import { u as useElevation } from './useElevation-e69d969b.js';
 import './dom-53c9635b.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import './TimeFormat-a7f5565b.js';
 import { _ as __vue_component__$4 } from './OrTeleport.vue2-424c7f33.js';
 import { T as ToastType, P as PositionsX, b as PositionsY, c as TransitionType, d as useToastEventBus, a as useQueue } from './useToast-5aa9dc05.js';
-import { _ as __vue_component__$2 } from './OrIconButton-f98bac24.js';
+import { _ as __vue_component__$2 } from './OrIconButton-ec4a913b.js';
 import { _ as __vue_component__$3 } from './OrLoader-4ac49224.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/esm/v2/{useElevation-37722ead.js → useElevation-e69d969b.js}

@@ -1,6 +1,6 @@
 import { isRef, ref, watch } from 'vue-demi';
 import './dom-53c9635b.js';
-import { i as isVisible } from './isVisible-cfd61ef8.js';
+import { i as isVisible } from './isVisible-d1e49905.js';
 
 function useElevation(element, trigger) {
   const elementRef = isRef(element) ? element : ref(element);

package/dist/esm/{v3/useTimeMask-f2a4d09f.js → v2/useTimeMask-7a7246c1.js}

@@ -20,7 +20,7 @@ function useDateMask(format, locale) {
             case 'long':
               return mask + 'MMMM';
             default:
-              throw new Error();
+              throw new Error('[useDateMask]: `format` has an invalid value.');
           }
         case 'day':
           return mask + part.value.replace(/^\d{1}$/, 'D').replace(/^\d{2}$/, 'DD');

package/dist/esm/v2/utils/exclude.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns a copy of the `items` array, excluding the `value`.
+ */
+export declare const exclude: <T>(value: T, items: T[]) => T[];

package/dist/esm/v2/utils/include.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns a copy of the `items` array, including the `value`.
+ */
+export declare const include: <T>(value: T, items: T[]) => T[];

package/dist/esm/v2/utils/index.d.ts

@@ -2,12 +2,14 @@ export * from './constants/color';
 export * from './constants/key-codes';
 export * from './constants/poper';
 export * from './constants/regex';
+export * from './exclude';
 export * from './functions/color';
 export * from './functions/dom';
 export * from './functions/flattenDeep';
 export * from './functions/hash';
 export * from './functions/px-to-rem';
 export * from './functions/text';
+export * from './include';
 export * from './isAncestor';
 export * from './isArray';
 export * from './isDescendant';
@@ -20,3 +22,4 @@ export * from './isObject';
 export * from './isString';
 export * from './isUndefined';
 export * from './isVisible';
+export * from './toArray';

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

@@ -1,11 +1,16 @@
-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, w as isNumber } from '../isNumber-5fb80127.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-e5b0b579.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, w as isNumber } from '../isNumber-ef303deb.js';
+export { e as exclude, i as include } from '../include-2a81e823.js';
 export { M as MutationObs, f as addClass, c as cancelAF, e as contains, l as getAttr, q as getBCR, g as getById, t as getCS, w as getMaxZIndex, p as getStyle, m as hasAttr, i as hasClass, u as offset, v as position, b as reflow, k as removeAttr, h as removeClass, a as removeNode, o as removeStyle, r as requestAF, d as select, s as selectAll, j as setAttr, n as setStyle } from '../dom-53c9635b.js';
 export { p as pxToRem } from '../px-to-rem-0b26b83e.js';
-export { i as isAncestor } from '../isAncestor-9e33bd15.js';
-export { i as isArray, a as isNil, b as isNull, c as isUndefined } from '../isNil-33299e1d.js';
-export { i as isEmpty, a as isObject, b as isString } from '../isEmpty-181a6611.js';
-export { i as isEqual } from '../isEqual-9004fb92.js';
-export { i as isVisible } from '../isVisible-cfd61ef8.js';
+export { i as isAncestor } from '../isAncestor-a446b32f.js';
+export { i as isArray } from '../isArray-8eeb52b9.js';
+export { i as isEmpty, a as isString } from '../isString-cf957a95.js';
+export { i as isEqual } from '../isEqual-15f4b2f5.js';
+export { i as isNil, a as isNull } from '../isNull-7ae26d1d.js';
+export { i as isObject } from '../isObject-4d5300e9.js';
+export { i as isUndefined } from '../isUndefined-3eca6e32.js';
+export { i as isVisible } from '../isVisible-d1e49905.js';
+export { t as toArray } from '../toArray-93b84b21.js';
 import 'lodash/get';
 import 'lodash/isElement';

package/dist/esm/v2/utils/isAncestor.d.ts

@@ -1 +1,4 @@
-export declare function isAncestor(element: Element, reference: Element): boolean;
+/**
+ * Determines whether the `a` element is an ancestor of the `b` element.
+ */
+export declare const isAncestor: (a: Element, b: Element) => boolean;

package/dist/esm/v2/utils/isArray.d.ts

@@ -1 +1,4 @@
-export declare function isArray(value: unknown): value is Array<unknown>;
+/**
+ * Determines whether the `value` is an array literal.
+ */
+export declare const isArray: (value: unknown) => value is unknown[];

package/dist/esm/v2/utils/isDescendant.d.ts

@@ -1 +1,4 @@
-export declare function isDescendant(element: Element, reference: Element): boolean;
+/**
+ * Determines whether the `a` element is a descendant of the `b` element.
+ */
+export declare const isDescendant: (a: Element, b: Element) => boolean;

package/dist/esm/v2/utils/isEmpty.d.ts

@@ -1 +1,4 @@
-export declare function isEmpty(value: unknown): boolean;
+/**
+ * Determines whether the `value` is an empty object, an empty array, a zero-length string, `null`, or `undefined`.
+ */
+export declare const isEmpty: (value: unknown) => boolean;

package/dist/esm/v2/utils/isEqual.d.ts

@@ -1 +1,4 @@
-export declare function isEqual(a: unknown, b: unknown): boolean;
+/**
+ * Determines whether `a` and `b` are the same value (makes shallow comparison of arrays and objects).
+ */
+export declare const isEqual: (a: unknown, b: unknown) => boolean;

package/dist/esm/v2/utils/isNil.d.ts

@@ -1 +1,4 @@
-export declare function isNil(value: unknown): value is null | undefined;
+/**
+ * Determines whether the `value` is `null` or `undefined`.
+ */
+export declare const isNil: (value: unknown) => value is null | undefined;

package/dist/esm/v2/utils/isNull.d.ts

@@ -1 +1,4 @@
-export declare function isNull(value: unknown): value is null;
+/**
+ * Determines whether the `value` is `null`.
+ */
+export declare const isNull: (value: unknown) => value is null;

package/dist/esm/v2/utils/isNumber.d.ts

@@ -1 +1,4 @@
-export declare function isNumber(value: unknown): value is number;
+/**
+ * Determines whether the `value` is a number.
+ */
+export declare const isNumber: (value: unknown) => value is number;

package/dist/esm/v2/utils/isObject.d.ts

@@ -1 +1,4 @@
-export declare function isObject(value: unknown): value is Record<PropertyKey, unknown>;
+/**
+ * Determines whether the `value` is an object literal.
+ */
+export declare const isObject: (value: unknown) => value is Record<PropertyKey, unknown>;

package/dist/esm/v2/utils/isString.d.ts

@@ -1 +1,4 @@
-export declare function isString(value: unknown): value is string;
+/**
+ * Determines whether the `value` is a string.
+ */
+export declare const isString: (value: unknown) => value is string;

package/dist/esm/v2/utils/isUndefined.d.ts

@@ -1 +1,4 @@
-export declare function isUndefined(value: unknown): value is undefined;
+/**
+ * Determines whether the `value` is `undefined`.
+ */
+export declare const isUndefined: (value: unknown) => value is undefined;

package/dist/esm/v2/utils/isVisible.d.ts

@@ -1 +1 @@
-export declare function isVisible(element: Element): boolean;
+export declare const isVisible: (element: Element) => boolean;

package/dist/esm/v2/utils/toArray.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Converts the `value` to an array literal.
+ */
+export declare const toArray: <T>(value: T | T[]) => T[];

package/dist/esm/v3/OrAutocomplete-16d62e2c.js

@@ -0,0 +1,402 @@
+import { computedAsync } from '@vueuse/core';
+import { defineComponent, reactive, ref, computed, toRef } from 'vue-demi';
+import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
+import { i as include, e as exclude } from './include-2a81e823.js';
+import './dom-53c9635b.js';
+import { i as isNil } from './isNull-7ae26d1d.js';
+import { t as toArray } from './toArray-93b84b21.js';
+import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
+import { u as useResponsive } from './useResponsive-1baf3485.js';
+import '@onereach/styles/tailwind.config.json';
+import './TimeFormat-a7f5565b.js';
+import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
+import { s as script$1 } from './OrError-331220bc.js';
+import { s as script$2 } from './OrHint-262c8217.js';
+import { s as script$3 } from './OrIconButton-76b101dc.js';
+import { s as script$4, a as InputBoxSize } from './OrInputBox-287f97ba.js';
+import { s as script$5 } from './OrLabel-4abbce6e.js';
+import { s as script$6 } from './OrLoader-5e2f359b.js';
+import { s as script$7 } from './OrMenuItem-b5789563.js';
+import { s as script$8 } from './OrPopover-92d5273a.js';
+import { s as script$9 } from './OrTagInput-c5892de5.js';
+import { T as TagsOverflow } from './OrTags-a242cea3.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createSlots, createElementVNode, mergeProps, createVNode, Fragment, renderList, withDirectives, vShow } from 'vue';
+
+const Autocomplete = [
+// Layout
+'layout-column',
+// Spacing
+'gap-xs'];
+const AutocompleteControl = [
+// Box
+'w-full',
+// Typography
+'typography-inherit',
+// Theme
+'theme-background-transparent', 'dark:theme-background-transparent-dark', 'outline-none',
+// Theme (placeholder)
+'placeholder:theme-foreground-outline', 'dark:placeholder:theme-foreground-outline-dark'];
+const AutocompleteDropdown = [
+// Overflow
+'overflow-y-auto',
+// Box
+'max-h-[340px]',
+// Theme
+'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-1-outline', 'dark:theme-border-1-outline-dark'];
+const AutocompleteDropdownDefault = [
+// Shape
+'rounded-b-md',
+// Theme
+'!border-t-0'];
+const AutocompleteDropdownFlipped = [
+// Shape
+'rounded-t-md',
+// Theme
+'!border-b-0'];
+const AutocompleteDropdownItem = [
+// Typography
+'!typography-body-2-regular'];
+
+var script = defineComponent({
+  name: 'OrAutocomplete',
+  components: {
+    OrError: script$1,
+    OrHint: script$2,
+    OrIconButton: script$3,
+    OrInputBox: script$4,
+    OrLabel: script$5,
+    OrLoader: script$6,
+    OrMenuItem: script$7,
+    OrPopover: script$8,
+    OrTagInput: script$9
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: undefined,
+      default: undefined
+    },
+    items: {
+      type: Array,
+      default: []
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    overflow: {
+      type: String,
+      default: () => TagsOverflow.Hidden
+    },
+    size: {
+      type: String,
+      default: () => InputBoxSize.M
+    },
+    label: {
+      type: String,
+      default: undefined
+    },
+    placeholder: {
+      type: String,
+      default: undefined
+    },
+    hint: {
+      type: String,
+      default: undefined
+    },
+    error: {
+      type: [String, Boolean],
+      default: undefined
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    disableDefaultStyles: {
+      type: Boolean,
+      default: false
+    },
+    enableClear: {
+      type: Boolean,
+      default: false
+    },
+    searchFunction: {
+      type: Function,
+      default: async (value, items) => {
+        return value.length > 0 ? items.filter(item => new RegExp(value, 'i').test(item)) : [];
+      }
+    }
+  },
+  emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
+  expose: ['root', 'reset', 'clear', 'focus', 'blur'],
+  setup(props, context) {
+    const attributes = reactive({
+      id: useIdAttribute(),
+      ...useControlAttributes(),
+      ...useValidationAttributes()
+    });
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-autocomplete-v3', ...Autocomplete]);
+    const tagInput = ref();
+    const tagInputRoot = computed(() => {
+      var _a;
+      return (_a = tagInput.value) === null || _a === void 0 ? void 0 : _a.root;
+    });
+    const inputBox = ref();
+    const inputBoxRoot = computed(() => {
+      var _a;
+      return (_a = inputBox.value) === null || _a === void 0 ? void 0 : _a.root;
+    });
+    const control = ref();
+    const controlStyles = computed(() => [...AutocompleteControl]);
+    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;
+    });
+    const dropdownStyles = computed(() => {
+      var _a;
+      return ['or-autocomplete-popover-v3', ...AutocompleteDropdown, ...(((_a = popover.value) === null || _a === void 0 ? void 0 : _a.isFlipped) ? AutocompleteDropdownFlipped : AutocompleteDropdownDefault)];
+    });
+    const dropdownItemStyles = computed(() => [...AutocompleteDropdownItem]);
+    // State
+    const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const searchText = ref('');
+    const filteredItems = computedAsync(async () => {
+      return searchText.value.length > 0 ? (await props.searchFunction(searchText.value, props.items)).filter(item => {
+        var _a;
+        return !((_a = model.value) === null || _a === void 0 ? void 0 : _a.includes(item));
+      }) : [];
+    }, []);
+    // Handlers
+    function onInput(event) {
+      searchText.value = event.target.value;
+    }
+    // Methods
+    function add(value) {
+      if (props.multiple) {
+        model.value = include(value, isNil(model.value) ? [] : toArray(model.value));
+      } else {
+        model.value = value;
+      }
+      clear();
+    }
+    function remove(value) {
+      model.value = exclude(value, isNil(model.value) ? [] : toArray(model.value));
+    }
+    function reset() {
+      model.value = undefined;
+      clear();
+    }
+    function clear() {
+      var _a;
+      searchText.value = '';
+      ((_a = tagInput.value) === null || _a === void 0 ? void 0 : _a.clear)();
+    }
+    function focus() {
+      var _a;
+      (_a = control.value) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function blur() {
+      var _a;
+      (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    // Helpers
+    const {
+      isMobile
+    } = useResponsive();
+    return {
+      attributes,
+      root,
+      rootStyles,
+      tagInput,
+      tagInputRoot,
+      inputBox,
+      inputBoxRoot,
+      control,
+      controlStyles,
+      popover,
+      popoverRoot,
+      popoverState,
+      dropdownStyles,
+      dropdownItemStyles,
+      model,
+      searchText,
+      filteredItems,
+      onInput,
+      add,
+      remove,
+      reset,
+      clear,
+      focus,
+      blur,
+      isMobile
+    };
+  }
+});
+
+const _hoisted_1 = ["value", "placeholder", "required", "readonly", "disabled"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrLabel = resolveComponent("OrLabel");
+  const _component_OrTagInput = resolveComponent("OrTagInput");
+  const _component_OrLoader = resolveComponent("OrLoader");
+  const _component_OrIconButton = resolveComponent("OrIconButton");
+  const _component_OrInputBox = resolveComponent("OrInputBox");
+  const _component_OrMenuItem = resolveComponent("OrMenuItem");
+  const _component_OrPopover = resolveComponent("OrPopover");
+  const _component_OrHint = resolveComponent("OrHint");
+  const _component_OrError = resolveComponent("OrError");
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [_ctx.$slots.label || _ctx.$slots.addon || _ctx.label ? (openBlock(), createBlock(_component_OrLabel, {
+    key: 0,
+    "control-id": _ctx.attributes.id,
+    variant: 'input',
+    required: _ctx.required,
+    disabled: _ctx.disabled
+  }, {
+    addon: withCtx(() => [renderSlot(_ctx.$slots, "addon")]),
+    default: withCtx(() => [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(_ctx.label), 1 /* TEXT */)])]),
+
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["control-id", "required", "disabled"])) : createCommentVNode("v-if", true), _ctx.multiple ? (openBlock(), createBlock(_component_OrTagInput, {
+    key: 1,
+    ref: 'tagInput',
+    modelValue: _ctx.model,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.model = $event),
+    overflow: _ctx.overflow,
+    placeholder: _ctx.placeholder,
+    required: _ctx.required,
+    readonly: _ctx.readonly,
+    disabled: _ctx.disabled,
+    "disable-default-styles": _ctx.disableDefaultStyles,
+    "enable-clear": _ctx.enableClear,
+    onInput: _cache[1] || (_cache[1] = $event => _ctx.onInput($event))
+  }, {
+    tag: withCtx(_ref => {
+      let {
+        item
+      } = _ref;
+      return [renderSlot(_ctx.$slots, "tag", {
+        item: item
+      }, () => [createTextVNode(toDisplayString(item.label), 1 /* TEXT */)])];
+    }),
+
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["modelValue", "overflow", "placeholder", "required", "readonly", "disabled", "disable-default-styles", "enable-clear"])) : (openBlock(), createBlock(_component_OrInputBox, {
+    key: 2,
+    ref: 'inputBox',
+    class: normalizeClass([_ctx.popoverState === 'open' && (_ctx.popover && _ctx.popover.isFlipped ? 'rounded-t-0' : 'rounded-b-0')]),
+    variant: _ctx.disableDefaultStyles ? 'unstyled' : 'styled',
+    size: _ctx.size,
+    invalid: !!_ctx.error,
+    readonly: _ctx.readonly,
+    disabled: _ctx.disabled
+  }, createSlots({
+    default: withCtx(() => [createElementVNode("input", mergeProps({
+      ref: 'сontrol'
+    }, _ctx.attributes, {
+      class: _ctx.controlStyles,
+      type: 'text',
+      value: _ctx.searchText || _ctx.model,
+      autocomplete: 'off',
+      placeholder: _ctx.placeholder,
+      required: _ctx.required,
+      readonly: _ctx.readonly,
+      disabled: _ctx.disabled,
+      onInput: _cache[2] || (_cache[2] = $event => {
+        _ctx.$emit('input', $event);
+        _ctx.onInput($event);
+        _ctx.model = _ctx.searchText;
+      }),
+      onKeydown: _cache[3] || (_cache[3] = $event => _ctx.$emit('keydown', $event)),
+      onKeyup: _cache[4] || (_cache[4] = $event => _ctx.$emit('keyup', $event)),
+      onFocus: _cache[5] || (_cache[5] = $event => _ctx.$emit('focus', $event)),
+      onBlur: _cache[6] || (_cache[6] = $event => _ctx.$emit('blur', $event))
+    }), null, 16 /* FULL_PROPS */, _hoisted_1)]),
+    _: 2 /* DYNAMIC */
+  }, [_ctx.loading ? {
+    name: "addon",
+    fn: withCtx(() => [createVNode(_component_OrLoader, {
+      variant: 'circular',
+      color: _ctx.error ? 'danger' : 'primary',
+      size: _ctx.isMobile ? 'm' : 's'
+    }, null, 8 /* PROPS */, ["color", "size"])]),
+    key: "0"
+  } : _ctx.enableClear && !_ctx.readonly && !_ctx.disabled ? {
+    name: "addon",
+    fn: withCtx(() => [_ctx.model && _ctx.model.length > 0 ? (openBlock(), createBlock(_component_OrIconButton, {
+      key: 0,
+      icon: 'close',
+      color: 'inherit',
+      onClick: _cache[7] || (_cache[7] = $event => _ctx.reset())
+    })) : createCommentVNode("v-if", true)]),
+    key: "1"
+  } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "variant", "size", "invalid", "readonly", "disabled"])), createVNode(_component_OrPopover, {
+    ref: 'popover',
+    class: normalizeClass(_ctx.dropdownStyles),
+    "custom-styles": _ctx.dropdownStyles,
+    "is-open": _ctx.filteredItems.length > 0,
+    variant: 'auto',
+    trigger: _ctx.tagInputRoot || _ctx.inputBoxRoot,
+    placement: 'bottom',
+    offset: 0,
+    "full-width": true,
+    "disable-default-styles": true
+  }, {
+    default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.filteredItems, (item, i) => {
+      return openBlock(), createBlock(_component_OrMenuItem, {
+        key: i,
+        class: normalizeClass(_ctx.dropdownItemStyles),
+        onClick: $event => _ctx.add(item)
+      }, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "item", {
+          item: item
+        }, () => [createTextVNode(toDisplayString(item), 1 /* TEXT */)])]),
+
+        _: 2 /* DYNAMIC */
+      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "onClick"]);
+    }), 128 /* KEYED_FRAGMENT */))]),
+
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["class", "custom-styles", "is-open", "trigger"]), _ctx.$slots.hint || _ctx.hint ? withDirectives((openBlock(), createBlock(_component_OrHint, {
+    key: 3,
+    disabled: _ctx.disabled
+  }, {
+    default: withCtx(() => [renderSlot(_ctx.$slots, "hint", {}, () => [createTextVNode(toDisplayString(_ctx.hint), 1 /* TEXT */)])]),
+
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["disabled"])), [[vShow, !_ctx.error]]) : createCommentVNode("v-if", true), withDirectives(createVNode(_component_OrError, {
+    disabled: _ctx.disabled
+  }, {
+    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.error), 1 /* TEXT */)]),
+
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["disabled"]), [[vShow, typeof _ctx.error === 'string' && _ctx.error.length > 0]])], 2 /* CLASS */);
+}
+
+script.render = render;
+script.__file = "src/components/or-autocomplete-v3/OrAutocomplete.vue";
+
+export { script as s };

package/dist/esm/v3/{OrAvatar-8befdf0c.js → OrAvatar-1cbce1de.js}

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

package/dist/esm/v3/{OrBottomSheet-7b272f2a.js → OrBottomSheet-f0f6e264.js}

@@ -5,7 +5,7 @@ import { u as usePopoverState } from './usePopoverState-5033b9cb.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import './TimeFormat-a7f5565b.js';
-import { s as script$1 } from './OrOverlay-19f08ea8.js';
+import { s as script$1 } from './OrOverlay-b452613a.js';
 import { u as useTheme } from './useTheme-0ef25778.js';
 import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, createElementBlock, normalizeClass, createCommentVNode, renderSlot } from 'vue';
 

package/dist/esm/v3/{OrButton-4dbf8f5a.js → OrButton-c05bdda7.js}

@@ -1,5 +1,5 @@
 import { defineComponent, computed } from 'vue-demi';
-import { s as script$1, L as LoaderViews } from './OrLoader-b1290a56.js';
+import { s as script$1, L as LoaderViews } from './OrLoader-d5a5b426.js';
 import { resolveComponent, openBlock, createElementBlock, mergeProps, createVNode, Transition, withCtx, withDirectives, vShow, createElementVNode, renderSlot, createCommentVNode, createTextVNode, toDisplayString } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 

package/dist/esm/v3/{OrButton-8e2c399f.js → OrButton-f5de246c.js}

@@ -1,7 +1,7 @@
 import { defineComponent, isVue3 } from 'vue-demi';
 import { s as script$1 } from './OrIcon-b9c3dfd2.js';
-import { s as script$2, L as LoaderViews } from './OrLoader-b1290a56.js';
-import { B as BUTTON_TYPE, a as BUTTON_COLOR, b as BUTTON_SIZE, H as HTML_BUTTON_TYPE } from './OrIconButton-d493432f.js';
+import { s as script$2, L as LoaderViews } from './OrLoader-d5a5b426.js';
+import { B as BUTTON_TYPE, a as BUTTON_COLOR, b as BUTTON_SIZE, H as HTML_BUTTON_TYPE } from './OrIconButton-746a7058.js';
 import { resolveComponent, openBlock, createElementBlock, mergeProps, toHandlers, createBlock, createCommentVNode, createElementVNode, normalizeStyle, renderSlot, createTextVNode, toDisplayString } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 

package/dist/esm/v3/{OrCardCollection-0b7cb661.js → OrCardCollection-6ee44732.js}

@@ -1,9 +1,9 @@
 import { defineComponent, ref } from 'vue-demi';
 import { s as script$1 } from './OrCard-e3a5aea4.js';
 import { s as script$2 } from './OrIcon-b9c3dfd2.js';
-import { s as script$3 } from './OrSearch-948c7f78.js';
-import './OrButton-8e2c399f.js';
-import { s as script$4 } from './OrIconButton-d493432f.js';
+import { s as script$3 } from './OrSearch-740f931b.js';
+import './OrButton-f5de246c.js';
+import { s as script$4 } from './OrIconButton-746a7058.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, toDisplayString, createVNode, withCtx, createTextVNode, createCommentVNode, renderSlot, createBlock, normalizeProps, guardReactiveProps } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';