@onereach/ui-components 8.5.0 → 8.5.1-beta.3662.0

package/dist/bundled/v3/components/OrTabV3-2de446b8.js

@@ -0,0 +1,60 @@
+import { openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
+import { defineComponent, ref, computed } from 'vue-demi';
+
+const TabRoot = [
+// Layout
+'layout-inline-row justify-center',
+// Spacing
+'py-[6px]',
+// Interactivity
+'interactivity-click',
+// Typography
+'typography-body-2-bold',
+// Theme
+'theme-foreground-secondary', 'dark:theme-foreground-secondary-dark', 'theme-border-underline', 'theme-border-2-transparent', 'dark:theme-border-2-transparent',
+// Theme (hover)
+'hover:md:theme-foreground-default', 'dark:hover:md:theme-foreground-default-dark',
+// Theme (active)
+'active:theme-foreground-default', 'dark:active:theme-foreground-default-dark', 'active:theme-border-underline', 'active:theme-border-2-current', 'dark:active:theme-border-2-current',
+// Theme (selected)
+'selected:theme-foreground-default', 'dark:selected:theme-foreground-default-dark', 'selected:theme-border-underline', 'selected:theme-border-2-current', 'dark:selected:theme-border-2-current'];
+
+var script = defineComponent({
+  name: 'OrTab',
+  props: {
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['click', 'focus', 'blur'],
+  expose: ['root'],
+  setup() {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-tab-v3', ...TabRoot]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+const _hoisted_1 = ["selected"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles),
+    tabindex: 0,
+    selected: _ctx.selected ? '' : null,
+    onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('click', $event)),
+    onFocus: _cache[1] || (_cache[1] = $event => _ctx.$emit('focus', $event)),
+    onBlur: _cache[2] || (_cache[2] = $event => _ctx.$emit('blur', $event))
+  }, [renderSlot(_ctx.$slots, "default")], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1);
+}
+
+script.render = render;
+script.__file = "src/components/or-tab-v3/OrTab.vue";
+
+export { TabRoot as T, script as s };

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

@@ -0,0 +1,86 @@
+import { resolveComponent, openBlock, createElementBlock, createCommentVNode, createElementVNode, Fragment, renderList, createBlock, mergeProps, normalizeStyle, renderSlot } from 'vue';
+import { s as styleInject } from '../OrAvatar-bfa6fd65.js';
+import { defineComponent } from 'vue-demi';
+import script$1 from '../OrTabHeaderItem/OrTabHeaderItem.js';
+
+var script = defineComponent({
+  name: 'OrTabs',
+  components: {
+    OrTabHeaderItem: script$1
+  },
+  provide() {
+    return {
+      tabsInstance: this
+    };
+  },
+  emits: ['selected'],
+  data() {
+    return {
+      tabs: [],
+      indicatorWidth: 0,
+      indicatorTransformX: 0,
+      activeIndex: 0
+    };
+  },
+  methods: {
+    changeActiveIndex(index) {
+      this.activeIndex = index;
+    },
+    setIndicatorStyles(_ref) {
+      let {
+        clientWidth,
+        offsetLeft
+      } = _ref;
+      this.indicatorWidth = clientWidth;
+      this.indicatorTransformX = offsetLeft;
+    },
+    onSelect(el, index) {
+      this.setIndicatorStyles(el);
+      this.$emit('selected', {
+        index,
+        title: this.tabs[index].title
+      });
+    }
+  }
+});
+
+const _hoisted_1 = {
+  class: "or-tabs"
+};
+const _hoisted_2 = {
+  class: "or-tabs--header"
+};
+const _hoisted_3 = {
+  class: "or-tabs--tabs"
+};
+const _hoisted_4 = {
+  class: "or-tabs--body"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_tab_header_item = resolveComponent("or-tab-header-item");
+  return openBlock(), createElementBlock("div", _hoisted_1, [createCommentVNode("  Header  "), createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tabs, (tab, index) => {
+    return openBlock(), createBlock(_component_or_tab_header_item, mergeProps({
+      key: index
+    }, tab.$props, {
+      "is-active": index === _ctx.activeIndex,
+      role: "tab",
+      onClick: $event => _ctx.changeActiveIndex(index),
+      onSelect: $event => _ctx.onSelect($event, index)
+    }), null, 16 /* FULL_PROPS */, ["is-active", "onClick", "onSelect"]);
+  }), 128 /* KEYED_FRAGMENT */))]), createElementVNode("div", {
+    style: normalizeStyle({
+      width: `${_ctx.indicatorWidth}px`,
+      transform: `translateX(${_ctx.indicatorTransformX}px)`
+    }),
+    class: "or-tabs--indicator"
+  }, null, 4 /* STYLE */)]), createCommentVNode("  Body  "), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "body")])])]);
+}
+
+var css_248z = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-6825dcf8 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-6825dcf8 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-tabs[data-v-6825dcf8] {\n  width: 100%;\n  overflow: hidden;\n}\n.or-tabs--header[data-v-6825dcf8] {\n  position: relative;\n  padding: 0 var(--s-4) var(--s-3);\n  border-bottom: 1px solid var(--c-neutral-2);\n}\n.or-tabs--tabs[data-v-6825dcf8] {\n  display: flex;\n  width: 100%;\n}\n.or-tabs--indicator[data-v-6825dcf8] {\n  position: absolute;\n  bottom: -1px;\n  left: 0;\n  z-index: 1;\n  width: auto;\n  height: 0.125rem;\n  background-color: var(--c-neutral-6);\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: transform, width;\n}";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-6825dcf8";
+script.__file = "src/components/or-tabs/OrTabs.vue";
+
+export { script as default };

package/dist/bundled/v3/components/OrTabs/OrTabs.vue.d.ts

@@ -0,0 +1,13 @@
+declare const _default: import("vue-demi").DefineComponent<{}, {}, {
+    tabs: any;
+    indicatorWidth: number;
+    indicatorTransformX: number;
+    activeIndex: number;
+}, {}, {
+    changeActiveIndex(index: number): void;
+    setIndicatorStyles({ clientWidth, offsetLeft }: HTMLElement): void;
+    onSelect(el: HTMLElement, index: number): void;
+}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "selected"[], "selected", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{}>> & {
+    onSelected?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _default;

package/dist/bundled/v3/components/OrTabs/index.d.ts

@@ -0,0 +1 @@
+export { default as OrTabs } from './OrTabs.vue';

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

@@ -0,0 +1 @@
+export { default as OrTabs } from './OrTabs.js';

package/dist/bundled/v3/components/OrTabsV3/OrTabs.js

@@ -0,0 +1 @@
+export { s as default } from '../OrTabsV3-de5abf65.js';

package/dist/bundled/v3/components/OrTabsV3/OrTabs.vue.d.ts

@@ -0,0 +1,57 @@
+import { PropType } from 'vue-demi';
+import { TabsVariant } from './props';
+import { TabsItem } from './types';
+declare const _default: import("vue-demi").DefineComponent<{
+    items: {
+        type: PropType<TabsItem[]>;
+        required: true;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    variant: {
+        type: PropType<"default" | "fitted">;
+        default: TabsVariant;
+    };
+}, {
+    root: import("vue-demi").Ref<HTMLElement | undefined>;
+    overflowTab: import("vue-demi").Ref<any>;
+    overflowTabRoot: import("vue-demi").ComputedRef<any>;
+    overflowMenu: import("vue-demi").Ref<any>;
+    overflowMenuRoot: import("vue-demi").ComputedRef<any>;
+    rootStyles: import("vue-demi").ComputedRef<string[]>;
+    containerStyles: import("vue-demi").ComputedRef<string[]>;
+    contentStyles: import("vue-demi").ComputedRef<string[]>;
+    tabs: {
+        normal: {
+            value: string | number;
+            label: string;
+        }[];
+        hidden: {
+            value: string | number;
+            label: string;
+        }[];
+    };
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | undefined>;
+    activeTab: import("vue-demi").ComputedRef<TabsItem>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    items: {
+        type: PropType<TabsItem[]>;
+        required: true;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    variant: {
+        type: PropType<"default" | "fitted">;
+        default: TabsVariant;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: string | number;
+    variant: "default" | "fitted";
+}>;
+export default _default;

package/dist/bundled/v3/components/OrTabsV3/index.d.ts

@@ -0,0 +1,3 @@
+export { default as OrTabsV3 } from './OrTabs.vue';
+export * from './props';
+export * from './types';

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

@@ -0,0 +1 @@
+export { s as OrTabsV3, T as TabsVariant } from '../OrTabsV3-de5abf65.js';

package/dist/bundled/v3/components/OrTabsV3/props.d.ts

@@ -0,0 +1,4 @@
+export declare enum TabsVariant {
+    Default = "default",
+    Fitted = "fitted"
+}

package/dist/bundled/v3/components/OrTabsV3/props.js

@@ -0,0 +1 @@
+export { T as TabsVariant } from '../OrTabsV3-de5abf65.js';

package/dist/bundled/v3/components/OrTabsV3/styles.d.ts

@@ -0,0 +1,5 @@
+import { TabsVariant } from './props';
+export declare const TabsRoot: string[];
+export declare const TabsRootVariants: Record<TabsVariant, string[]>;
+export declare const TabsContainer: string[];
+export declare const TabsContent: string[];

package/dist/bundled/v3/components/OrTabsV3/styles.js

@@ -0,0 +1 @@
+export { c as TabsContainer, d as TabsContent, a as TabsRoot, b as TabsRootVariants } from '../OrTabsV3-de5abf65.js';

package/dist/bundled/v3/components/OrTabsV3/types.d.ts

@@ -0,0 +1,4 @@
+export interface TabsItem {
+    value: string | number;
+    label: string;
+}

package/dist/bundled/v3/components/OrTabsV3-de5abf65.js

@@ -0,0 +1,226 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, Fragment, renderList, createBlock, withModifiers, withCtx, renderSlot, createTextVNode, toDisplayString, createVNode, createCommentVNode } from 'vue';
+import { u as useProxyModelValue, a5 as useResizeObserver } from './OrBottomSheetV3-199292db.js';
+import { defineComponent, ref, computed, reactive, toRef, watch, nextTick, onMounted } from 'vue-demi';
+import { s as script$1 } from './OrIconV3-85d7d26b.js';
+import { s as script$2 } from './OrMenuV3-c69db72f.js';
+import { s as script$3 } from './OrMenuItemV3-44a04ccd.js';
+import { s as script$4 } from './OrTabV3-2de446b8.js';
+
+var TabsVariant;
+(function (TabsVariant) {
+  TabsVariant["Default"] = "default";
+  TabsVariant["Fitted"] = "fitted";
+})(TabsVariant || (TabsVariant = {}));
+
+const TabsRoot = [
+// Layout
+'grid', 'grid-flow-col', 'items-center',
+// Box
+'shrink-0',
+// Spacing
+'gap-lg',
+// Theme
+'theme-border-underline', 'theme-border-1-outline', 'dark:theme-border-1-outline'];
+const TabsRootVariants = {
+  'default': [
+  // Layout
+  'auto-cols-max'],
+  'fitted': [
+  // Layout
+  'auto-cols-auto']
+};
+const TabsContainer = [
+// Layout
+'layout-column',
+// Box
+'h-full',
+// Spacing
+'gap-lg'];
+const TabsContent = [
+// Layout
+'grow',
+// box
+'h-full', 'overflow-auto'];
+
+var script = defineComponent({
+  name: 'OrTabs',
+  components: {
+    OrIcon: script$1,
+    OrMenu: script$2,
+    OrMenuItem: script$3,
+    OrTab: script$4
+  },
+  inheritAttrs: false,
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    modelValue: {
+      type: [String, Number],
+      default: undefined
+    },
+    variant: {
+      type: String,
+      default: TabsVariant.Default
+    }
+  },
+  emits: ['update:modelValue'],
+  expose: ['root'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    const overflowTab = ref();
+    const overflowTabRoot = computed(() => {
+      var _a;
+      return (_a = overflowTab.value) === null || _a === void 0 ? void 0 : _a.root;
+    });
+    const overflowMenu = ref();
+    const overflowMenuRoot = computed(() => {
+      var _a;
+      return (_a = overflowMenu.value) === null || _a === void 0 ? void 0 : _a.root;
+    });
+    // Styles
+    const rootStyles = computed(() => ['or-tabs-v3', ...TabsRoot, ...TabsRootVariants[props.variant]]);
+    const containerStyles = computed(() => [...TabsContainer]);
+    const contentStyles = computed(() => [...TabsContent]);
+    // State
+    const tabs = reactive({
+      normal: [],
+      hidden: []
+    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const activeTab = computed(() => props.items.find(_ref => {
+      let {
+        value
+      } = _ref;
+      return value === proxyModelValue.value;
+    }));
+    // Methods
+    function rearrangeTabs(items, activeTab, rootElement) {
+      const {
+        children
+      } = rootElement;
+      const nextNormalTabs = [...items];
+      const nextHiddenTabs = [];
+      let currentWidth = rootElement.scrollWidth;
+      [...children].reverse().forEach(element => {
+        if (currentWidth > rootElement.clientWidth) {
+          nextHiddenTabs.unshift(nextNormalTabs.pop());
+          currentWidth -= element.clientWidth + 16;
+        }
+      });
+      if (nextHiddenTabs.includes(activeTab)) {
+        nextHiddenTabs.unshift(nextNormalTabs.pop());
+        nextNormalTabs.push(...nextHiddenTabs.splice(nextHiddenTabs.indexOf(activeTab), 1));
+      }
+      return {
+        normal: nextNormalTabs,
+        hidden: nextHiddenTabs
+      };
+    }
+    // Effects
+    watch([() => props.items, activeTab, root], _ref2 => {
+      let [items, activeTab, rootElement] = _ref2;
+      tabs.normal = items;
+      nextTick(() => {
+        Object.assign(tabs, rearrangeTabs(items, activeTab, rootElement));
+      });
+    });
+    // #region Resize
+    useResizeObserver(root, () => {
+      tabs.normal = props.items;
+      nextTick(() => {
+        Object.assign(tabs, rearrangeTabs(props.items, activeTab.value, root.value));
+      });
+    });
+    // #endregion
+    onMounted(() => {
+      var _a;
+      if (!proxyModelValue.value) {
+        proxyModelValue.value = (_a = props.items[0]) === null || _a === void 0 ? void 0 : _a.value;
+      }
+    });
+    return {
+      root,
+      overflowTab,
+      overflowTabRoot,
+      overflowMenu,
+      overflowMenuRoot,
+      rootStyles,
+      containerStyles,
+      contentStyles,
+      tabs,
+      proxyModelValue,
+      activeTab
+    };
+  }
+});
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrTab = resolveComponent("OrTab");
+  const _component_OrIcon = resolveComponent("OrIcon");
+  const _component_OrMenuItem = resolveComponent("OrMenuItem");
+  const _component_OrMenu = resolveComponent("OrMenu");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.containerStyles)
+  }, [createElementVNode("div", mergeProps({
+    ref: "root"
+  }, _ctx.$attrs, {
+    class: _ctx.rootStyles
+  }), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tabs.normal, tab => {
+    return openBlock(), createBlock(_component_OrTab, {
+      key: tab.value,
+      selected: tab.value === _ctx.proxyModelValue,
+      onClick: withModifiers($event => _ctx.proxyModelValue = tab.value, ["stop"])
+    }, {
+      default: withCtx(() => [renderSlot(_ctx.$slots, "tab", {
+        tab: tab,
+        activeTab: _ctx.activeTab
+      }, () => [createTextVNode(toDisplayString(tab.label), 1 /* TEXT */)])]),
+
+      _: 2 /* DYNAMIC */
+    }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["selected", "onClick"]);
+  }), 128 /* KEYED_FRAGMENT */)), _ctx.tabs.hidden.length > 0 ? (openBlock(), createElementBlock(Fragment, {
+    key: 0
+  }, [createVNode(_component_OrTab, {
+    ref: "overflowTab",
+    onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.overflowMenu && _ctx.overflowMenu.open(), ["stop"]))
+  }, {
+    default: withCtx(() => [createVNode(_component_OrIcon, {
+      icon: 'more_horiz',
+      variant: 'filled-bold'
+    })]),
+    _: 1 /* STABLE */
+  }, 512 /* NEED_PATCH */), createVNode(_component_OrMenu, {
+    ref: "overflowMenu",
+    trigger: _ctx.overflowTabRoot
+  }, {
+    default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tabs.hidden, tab => {
+      return openBlock(), createBlock(_component_OrMenuItem, {
+        key: tab.value,
+        onClick: withModifiers($event => {
+          _ctx.proxyModelValue = tab.value;
+          _ctx.overflowMenu && _ctx.overflowMenu.close();
+        }, ["stop"])
+      }, {
+        default: withCtx(() => [createTextVNode(toDisplayString(tab.label), 1 /* TEXT */)]),
+
+        _: 2 /* DYNAMIC */
+      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]);
+    }), 128 /* KEYED_FRAGMENT */))]),
+
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["trigger"])], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)], 16 /* FULL_PROPS */), createElementVNode("div", {
+    class: normalizeClass(_ctx.contentStyles)
+  }, [renderSlot(_ctx.$slots, String(_ctx.proxyModelValue))], 2 /* CLASS */)], 2 /* CLASS */);
+}
+
+script.render = render;
+script.__file = "src/components/or-tabs-v3/OrTabs.vue";
+
+export { TabsVariant as T, TabsRoot as a, TabsRootVariants as b, TabsContainer as c, TabsContent as d, script as s };

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

@@ -0,0 +1,88 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createVNode, createElementVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
+import { s as styleInject } from '../OrAvatar-bfa6fd65.js';
+import { defineComponent } from 'vue-demi';
+import { D as hexToRgb } from '../OrAvatarV3-fad0711b.js';
+import { OrIcon as script$1 } from '../OrIcon/index.js';
+
+const TAG_DEFAULT_COLOR = '#91969d'; // neutral-4
+var script = defineComponent({
+  name: 'OrTag',
+  components: {
+    OrIcon: script$1
+  },
+  props: {
+    content: {
+      type: String,
+      required: true
+    },
+    color: {
+      type: String,
+      required: false,
+      default: TAG_DEFAULT_COLOR
+    },
+    canDelete: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isDisabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ['delete'],
+  computed: {
+    rootClasses() {
+      return {
+        disabled: this.isDisabled
+      };
+    },
+    rootStyles() {
+      var _a;
+      const rgb = (_a = hexToRgb(this.color)) !== null && _a !== void 0 ? _a : hexToRgb(TAG_DEFAULT_COLOR);
+      return {
+        'color': this.color,
+        'background-color': `rgba(${rgb.r},${rgb.g},${rgb.b},0.2)`
+      };
+    }
+  },
+  methods: {
+    handleDeleteClick(event) {
+      if (!this.isDisabled) {
+        this.$emit('delete', event);
+      }
+    }
+  }
+});
+
+const _hoisted_1 = {
+  class: "or-tag-text"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_icon = resolveComponent("or-icon");
+  return openBlock(), createElementBlock("span", {
+    class: normalizeClass(["or-tag", _ctx.rootClasses]),
+    style: normalizeStyle(_ctx.rootStyles)
+  }, [createVNode(_component_or_icon, {
+    class: "or-tag-dot",
+    icon: "fiber_manual_record"
+  }), createElementVNode("span", _hoisted_1, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(_ctx.content), 1 /* TEXT */)])]), _ctx.canDelete ? (openBlock(), createElementBlock("span", {
+    key: 0,
+    class: "or-tag-button",
+    onClick: _cache[0] || (_cache[0] = function () {
+      return _ctx.handleDeleteClick && _ctx.handleDeleteClick(...arguments);
+    })
+  }, [createVNode(_component_or_icon, {
+    icon: "close"
+  })])) : createCommentVNode("v-if", true)], 6 /* CLASS, STYLE */);
+}
+
+var css_248z = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-4d586ef0 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-4d586ef0 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-tag[data-v-4d586ef0] {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--s-1);\n  max-width: 100%;\n  padding: 0.28125rem 0.4375rem 0.28125rem 0.25rem;\n  overflow: hidden;\n  font-size: var(--fs-0);\n  line-height: var(--lh-0);\n  border-radius: 0.71875rem;\n}\n.or-tag.disabled[data-v-4d586ef0] {\n  opacity: 0.75;\n}\n.or-tag.disabled .or-tag-button[data-v-4d586ef0] {\n  cursor: inherit;\n}\n.or-tag-text[data-v-4d586ef0] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: var(--fs-0);\n  line-height: 0.875rem;\n}\n.or-tag-button[data-v-4d586ef0] {\n  display: flex;\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.or-tag[data-v-4d586ef0] .or-icon {\n  font-size: var(--fs-1);\n  transition: none;\n}";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-4d586ef0";
+script.__file = "src/components/or-tag/OrTag.vue";
+
+export { script as default };

package/dist/bundled/v3/components/OrTag/OrTag.vue.d.ts

@@ -0,0 +1,54 @@
+import { PropType } from 'vue-demi';
+declare const _default: import("vue-demi").DefineComponent<{
+    content: {
+        type: StringConstructor;
+        required: true;
+    };
+    color: {
+        type: PropType<string>;
+        required: false;
+        default: string;
+    };
+    canDelete: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    isDisabled: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+}, unknown, unknown, {
+    rootClasses(): Record<string, boolean>;
+    rootStyles(): Record<string, string>;
+}, {
+    handleDeleteClick(event: MouseEvent): void;
+}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "delete"[], "delete", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    content: {
+        type: StringConstructor;
+        required: true;
+    };
+    color: {
+        type: PropType<string>;
+        required: false;
+        default: string;
+    };
+    canDelete: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    isDisabled: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+}>> & {
+    onDelete?: ((...args: any[]) => any) | undefined;
+}, {
+    color: string;
+    canDelete: boolean;
+    isDisabled: boolean;
+}>;
+export default _default;

package/dist/bundled/v3/components/OrTag/index.d.ts

@@ -0,0 +1 @@
+export { default as OrTag } from './OrTag.vue';

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

@@ -0,0 +1 @@
+export { default as OrTag } from './OrTag.js';

package/dist/bundled/v3/components/OrTagInputV3/OrTagInput.js

@@ -0,0 +1 @@
+export { s as default } from '../OrTagInputV3-293d7ddb.js';