@onereach/ui-components 2.68.0-beta.2085.0 → 2.68.0-beta.2104.0

package/dist/esm/v3/OrStepper-f19b4eac.js

@@ -0,0 +1,426 @@
+import { defineComponent } from 'vue-demi';
+import { s as script$6 } from './OrIconButton-8be9c89f.js';
+import { resolveComponent, openBlock, createElementBlock, renderSlot, createBlock, createCommentVNode, normalizeClass, createElementVNode, toDisplayString, createVNode, withCtx, normalizeProps, guardReactiveProps, Fragment, renderList, resolveDynamicComponent } from 'vue';
+import { s as styleInject } from './style-inject.es-4c6f2515.js';
+
+var script$5 = defineComponent({
+  name: 'OrStepperButtonOptions',
+  components: {
+    OrButton: script$6
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => ({})
+    },
+    hasConfirmButton: {
+      type: Boolean,
+      default: true
+    },
+    hasSkipButton: {
+      type: Boolean,
+      default: true
+    },
+    hasPreviousButton: {
+      type: Boolean,
+      default: true
+    },
+    completeIndex: {
+      type: Number,
+      default: 0
+    }
+  }
+});
+
+const _hoisted_1$5 = {
+  class: "text-right pt-md"
+};
+function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_button = resolveComponent("or-button");
+  return openBlock(), createElementBlock("div", _hoisted_1$5, [renderSlot(_ctx.$slots, "buttons", {
+    option: _ctx.option,
+    onConfirm: () => _ctx.$emit('confirm'),
+    onPrevious: () => _ctx.$emit('previous'),
+    onSkip: () => _ctx.$emit('skip')
+  }, () => [_ctx.completeIndex !== 0 && _ctx.hasPreviousButton ? (openBlock(), createBlock(_component_or_button, {
+    key: 0,
+    content: "previous",
+    size: "small",
+    onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('previous'))
+  })) : createCommentVNode("v-if", true), _ctx.hasSkipButton ? (openBlock(), createBlock(_component_or_button, {
+    key: 1,
+    content: "skip",
+    type: "outline",
+    size: "small",
+    onClick: _cache[1] || (_cache[1] = $event => _ctx.$emit('skip'))
+  })) : createCommentVNode("v-if", true), _ctx.hasConfirmButton ? (openBlock(), createBlock(_component_or_button, {
+    key: 2,
+    content: "confirm",
+    size: "small",
+    onClick: _cache[2] || (_cache[2] = $event => _ctx.$emit('confirm'))
+  })) : createCommentVNode("v-if", true)])]);
+}
+
+script$5.render = render$5;
+script$5.__file = "src/components/or-stepper/OrStepperButtonOptions.vue";
+
+var script$4 = defineComponent({
+  name: 'StatusIcon',
+  props: {
+    statusType: {
+      type: String,
+      default: 'active'
+    }
+  },
+  computed: {
+    materialIcon() {
+      switch (this.statusType) {
+        case 'failed':
+          return 'close';
+        case 'done':
+          return 'done';
+        default:
+          return '';
+      }
+    }
+  }
+});
+
+const _hoisted_1$4 = {
+  class: "material-icons icon"
+};
+function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(['indication', _ctx.statusType])
+  }, [createElementVNode("span", _hoisted_1$4, toDisplayString(_ctx.materialIcon), 1 /* TEXT */)], 2 /* CLASS */);
+}
+
+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-20db3473 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-20db3473 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.indication[data-v-20db3473] {\n  display: flex;\n  height: var(--s-4);\n  width: var(--s-4);\n  border-radius: var(--s-3);\n}\n.indication.ready[data-v-20db3473] {\n  border: 1px solid var(--c-primary);\n  background-color: var(--c-neutral-1);\n}\n.indication.active[data-v-20db3473] {\n  border: 3px solid var(--c-primary);\n  background-color: var(--c-neutral-0);\n}\n.indication.selected[data-v-20db3473] {\n  background-color: var(--c-primary);\n}\n.indication.done[data-v-20db3473] {\n  border: 1px solid var(--c-primary);\n  background-color: var(--c-neutral-1);\n}\n.indication.done .icon[data-v-20db3473] {\n  padding: 1px;\n  font-size: var(--fs-0);\n  color: var(--c-primary);\n}\n.indication.failed[data-v-20db3473] {\n  background-color: var(--c-error);\n}\n.indication.failed .icon[data-v-20db3473] {\n  color: var(--c-neutral-0);\n  padding: var(--s-1);\n  font-size: var(--fs-0);\n}";
+styleInject(css_248z);
+
+script$4.render = render$4;
+script$4.__scopeId = "data-v-20db3473";
+script$4.__file = "src/components/or-stepper/StatusIcon.vue";
+
+var script$3 = defineComponent({
+  name: 'OrStepperTitle',
+  components: {
+    StatusIcon: script$4
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => ({})
+    },
+    completeIndex: {
+      type: Number,
+      default: 0
+    },
+    type: {
+      type: String,
+      default: 'vertical'
+    },
+    index: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    statusType() {
+      if (this.index === this.completeIndex) return 'active';
+      if (this.index < this.completeIndex) return 'done';
+      return 'ready';
+    }
+  }
+});
+
+const _hoisted_1$3 = {
+  key: 0,
+  class: "flex-1 border-t-1 border-dashed border-y-primary bottom-8 group-first:hidden"
+};
+const _hoisted_2$1 = {
+  key: 1,
+  class: "flex-1 mr-2xs border-t-1 border-dashed border-y-primary group-last:hidden"
+};
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_status_icon = resolveComponent("status-icon");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(['flex w-full gap-xs items-center', {
+      'justify-around group': _ctx.type === 'horizontal'
+    }])
+  }, [_ctx.type === 'horizontal' ? (openBlock(), createElementBlock("hr", _hoisted_1$3)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_component_status_icon, {
+    "status-type": _ctx.statusType
+  }, null, 8 /* PROPS */, ["status-type"])]), createElementVNode("div", null, [renderSlot(_ctx.$slots, "label", {}, () => [createElementVNode("p", {
+    class: normalizeClass({
+      'font-bold': _ctx.completeIndex === _ctx.index
+    })
+  }, toDisplayString(_ctx.option.label), 3 /* TEXT, CLASS */)])]), _ctx.type === 'horizontal' ? (openBlock(), createElementBlock("hr", _hoisted_2$1)) : createCommentVNode("v-if", true)], 2 /* CLASS */);
+}
+
+script$3.render = render$3;
+script$3.__file = "src/components/or-stepper/OrStepperTitle.vue";
+
+var script$2 = defineComponent({
+  name: 'OrStepperOptionVertical',
+  components: {
+    OrStepperButtonOptions: script$5,
+    OrStepperTitle: script$3
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'vertical'
+    },
+    completeIndex: {
+      type: Number,
+      default: 0
+    },
+    index: {
+      type: Number,
+      default: 0
+    },
+    hasSkipButton: {
+      type: Boolean,
+      default: true
+    },
+    hasConfirmButton: {
+      type: Boolean,
+      default: true
+    },
+    hasPreviousButton: {
+      type: Boolean,
+      default: true
+    },
+    option: {
+      type: Object,
+      default: () => ({})
+    },
+    isReadOnly: {
+      type: Boolean,
+      default: false
+    }
+  }
+});
+
+const _hoisted_1$2 = {
+  class: "group"
+};
+const _hoisted_2 = {
+  class: "min-h-[32px] w-full border-l-1 border-dashed border-x-primary ml-sm group-last:border-none"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "px-sm"
+};
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_stepper_title = resolveComponent("or-stepper-title");
+  const _component_or_stepper_button_options = resolveComponent("or-stepper-button-options");
+  return openBlock(), createElementBlock("li", _hoisted_1$2, [createVNode(_component_or_stepper_title, {
+    option: _ctx.option,
+    "complete-index": _ctx.completeIndex,
+    index: _ctx.index
+  }, {
+    icon: withCtx(scope => [renderSlot(_ctx.$slots, "icon", normalizeProps(guardReactiveProps(scope)))]),
+    label: withCtx(scope => [renderSlot(_ctx.$slots, "label", normalizeProps(guardReactiveProps(scope)))]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["option", "complete-index", "index"]), createElementVNode("div", _hoisted_2, [_ctx.completeIndex === _ctx.index ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, `content-${_ctx.index}`, {
+    option: _ctx.option
+  }), !_ctx.isReadOnly ? (openBlock(), createBlock(_component_or_stepper_button_options, {
+    key: 0,
+    option: _ctx.option,
+    "has-confirm-button": _ctx.hasConfirmButton,
+    "has-skip-button": _ctx.hasSkipButton,
+    "has-previous-button": _ctx.hasPreviousButton,
+    "complete-index": _ctx.completeIndex,
+    onConfirm: _cache[0] || (_cache[0] = $event => _ctx.$emit('confirm')),
+    onPrevious: _cache[1] || (_cache[1] = $event => _ctx.$emit('previous')),
+    onSkip: _cache[2] || (_cache[2] = $event => _ctx.$emit('skip'))
+  }, {
+    buttons: withCtx(scope => [renderSlot(_ctx.$slots, "buttons", normalizeProps(guardReactiveProps(scope)))]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["option", "has-confirm-button", "has-skip-button", "has-previous-button", "complete-index"])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)])]);
+}
+
+script$2.render = render$2;
+script$2.__file = "src/components/or-stepper/OrStepperOptionVertical.vue";
+
+var script$1 = defineComponent({
+  name: 'OrStepperOptionHorizontal',
+  components: {
+    OrStepperButtonOptions: script$5
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'vertical'
+    },
+    completeIndex: {
+      type: Number,
+      default: 0
+    },
+    index: {
+      type: Number,
+      default: 0
+    },
+    hasSkipButton: {
+      type: Boolean,
+      default: true
+    },
+    hasConfirmButton: {
+      type: Boolean,
+      default: true
+    },
+    hasPreviousButton: {
+      type: Boolean,
+      default: true
+    },
+    option: {
+      type: Object,
+      default: () => ({})
+    },
+    isReadOnly: {
+      type: Boolean,
+      default: false
+    }
+  }
+});
+
+const _hoisted_1$1 = {
+  key: 0,
+  class: "py-md px-lg w-full"
+};
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_stepper_button_options = resolveComponent("or-stepper-button-options");
+  return _ctx.completeIndex === _ctx.index ? (openBlock(), createElementBlock("li", _hoisted_1$1, [renderSlot(_ctx.$slots, `content-${_ctx.index}`, {
+    option: _ctx.option
+  }), !_ctx.isReadOnly ? (openBlock(), createBlock(_component_or_stepper_button_options, {
+    key: 0,
+    option: _ctx.option,
+    "has-confirm-button": _ctx.hasConfirmButton,
+    "has-skip-button": _ctx.hasSkipButton,
+    "has-previous-button": _ctx.hasPreviousButton,
+    "complete-index": _ctx.completeIndex,
+    onConfirm: _cache[0] || (_cache[0] = $event => _ctx.$emit('confirm')),
+    onPrevious: _cache[1] || (_cache[1] = $event => _ctx.$emit('previous')),
+    onSkip: _cache[2] || (_cache[2] = $event => _ctx.$emit('skip'))
+  }, null, 8 /* PROPS */, ["option", "has-confirm-button", "has-skip-button", "has-previous-button", "complete-index"])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true);
+}
+
+script$1.render = render$1;
+script$1.__file = "src/components/or-stepper/OrStepperOptionHorizontal.vue";
+
+var script = defineComponent({
+  name: 'OrStepper',
+  components: {
+    OrStepperOptionVertical: script$2,
+    OrStepperOptionHorizontal: script$1,
+    OrStepperTitle: script$3
+  },
+  props: {
+    isReadOnly: {
+      type: Boolean,
+      default: true
+    },
+    type: {
+      type: String,
+      default: 'vertical'
+    },
+    hasConfirmButton: {
+      type: Boolean,
+      default: true
+    },
+    hasSkipButton: {
+      type: Boolean,
+      default: true
+    },
+    hasPreviousButton: {
+      type: Boolean,
+      default: true
+    },
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ['confirm', 'previous', 'skip'],
+  data() {
+    return {
+      completeIndex: 0
+    };
+  },
+  computed: {
+    optionComponent() {
+      return this.type === 'vertical' ? script$2 : script$1;
+    }
+  },
+  methods: {
+    updateCompleteIndex(index) {
+      if (index < 0) return;
+      this.completeIndex = index;
+    },
+    handlePrevious() {
+      this.updateCompleteIndex(this.completeIndex - 1);
+      this.$emit('previous', this.completeIndex);
+    },
+    handleConfirm() {
+      this.updateCompleteIndex(this.completeIndex + 1);
+      this.$emit('confirm', this.completeIndex);
+    },
+    handleSkip() {
+      this.updateCompleteIndex(this.completeIndex + 1);
+      this.$emit('skip', this.completeIndex);
+    }
+  }
+});
+
+const _hoisted_1 = {
+  key: 0,
+  class: "w-full flex flex-row flex-1"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_stepper_title = resolveComponent("or-stepper-title");
+  return openBlock(), createElementBlock("div", null, [_ctx.type === 'horizontal' ? (openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option, index) => {
+    return openBlock(), createBlock(_component_or_stepper_title, {
+      key: option.label,
+      index: index,
+      option: option,
+      "complete-index": _ctx.completeIndex,
+      type: _ctx.type,
+      onClick: $event => _ctx.$emit('click', index)
+    }, {
+      icon: withCtx(scope => [renderSlot(_ctx.$slots, "icon", normalizeProps(guardReactiveProps(scope)))]),
+      label: withCtx(scope => [renderSlot(_ctx.$slots, "label", normalizeProps(guardReactiveProps(scope)))]),
+      _: 2 /* DYNAMIC */
+    }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["index", "option", "complete-index", "type", "onClick"]);
+  }), 128 /* KEYED_FRAGMENT */))])) : createCommentVNode("v-if", true), createElementVNode("ol", {
+    class: normalizeClass(["h-full w-full overflow-y-auto overflow-x-hidden", {
+      'flex ': _ctx.type === 'horizontal'
+    }])
+  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option, index) => {
+    return openBlock(), createBlock(resolveDynamicComponent(_ctx.optionComponent), {
+      key: option.label,
+      index: index,
+      option: option,
+      "complete-index": _ctx.completeIndex,
+      "is-read-only": _ctx.isReadOnly,
+      "has-confirm-button": _ctx.hasConfirmButton,
+      "has-skip-button": _ctx.hasSkipButton,
+      "has-previous-button": _ctx.hasPreviousButton,
+      onConfirm: _ctx.handleConfirm,
+      onPrevious: _ctx.handlePrevious,
+      onSkip: _ctx.handleSkip,
+      onClick: $event => _ctx.$emit('click', index)
+    }, {
+      [`content-${index}`]: withCtx(scope => [renderSlot(_ctx.$slots, `content-${index}`, normalizeProps(guardReactiveProps(scope)))]),
+      buttons: withCtx(scope => [renderSlot(_ctx.$slots, "buttons", normalizeProps(guardReactiveProps(scope)))]),
+      icon: withCtx(scope => [renderSlot(_ctx.$slots, "icon", normalizeProps(guardReactiveProps(scope)))]),
+      label: withCtx(scope => [renderSlot(_ctx.$slots, "label", normalizeProps(guardReactiveProps(scope)))]),
+      _: 2 /* DYNAMIC */
+    }, 1064 /* PROPS, HYDRATE_EVENTS, DYNAMIC_SLOTS */, ["index", "option", "complete-index", "is-read-only", "has-confirm-button", "has-skip-button", "has-previous-button", "onConfirm", "onPrevious", "onSkip", "onClick"]);
+  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */)]);
+}
+
+script.render = render;
+script.__file = "src/components/or-stepper/OrStepper.vue";
+
+export { script as s };

package/dist/esm/v3/OrTag-1b5e43fa.js

@@ -0,0 +1,86 @@
+import { defineComponent } from 'vue-demi';
+import { s as script$1 } from './OrIcon-669503c3.js';
+import { a as hexToRgb } from './color-1f348774.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';
+
+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] = (...args) => _ctx.handleDeleteClick && _ctx.handleDeleteClick(...args))
+  }, [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  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 s };

package/dist/esm/v3/OrTag-6c3717e0.js

@@ -0,0 +1,125 @@
+import { defineComponent, ref, computed, watchPostEffect, unref } from 'vue-demi';
+import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
+import '@vueuse/core';
+import { s as script$1 } from './OrIconButton-85abafab.js';
+import { resolveComponent, openBlock, createElementBlock, mergeProps, renderSlot, createBlock, normalizeClass, withModifiers, createCommentVNode } from 'vue';
+
+var TagVariant;
+(function (TagVariant) {
+  TagVariant["Tag"] = "tag";
+  TagVariant["Button"] = "button";
+  TagVariant["Reset"] = "reset";
+})(TagVariant || (TagVariant = {}));
+var TagColor;
+(function (TagColor) {
+  TagColor["Primary"] = "primary";
+  TagColor["Danger"] = "danger";
+})(TagColor || (TagColor = {}));
+
+const TagRoot = [
+// Layout
+'flex', 'items-center', 'justify-center',
+// Box
+'max-w-max', 'rounded-full',
+// Sizing
+'px-sm+ md:px-sm', 'py-sm md:py-xs', 'gap-sm md:gap-xs',
+// Typography
+'typography-caption-regular',
+// Theme
+'disabled:!bg-disabled', 'dark:disabled:!bg-disabled-dark', 'disabled:!text-on-disabled', 'dark:disabled:!text-on-disabled-dark'];
+const TagRootVariants = {
+  'tag': [
+  // Interactivity
+  'interactivity-none'],
+  'button': [
+  // Interactivity
+  'interactivity-auto'],
+  'reset': [
+  // Interactivity
+  'interactivity-none']
+};
+const TagRootColors = {
+  'primary': [
+  // Theme
+  'theme-preset-2-primary', 'dark:theme-preset-2-primary-dark'],
+  'danger': [
+  // Theme
+  'theme-preset-2-error', 'dark:theme-preset-2-error-dark']
+};
+
+var script = defineComponent({
+  name: 'OrTag',
+  components: {
+    OrIconButton: script$1
+  },
+  inheritAttrs: false,
+  props: {
+    variant: {
+      type: String,
+      default: TagVariant.Tag
+    },
+    color: {
+      type: String,
+      default: TagColor.Primary
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['click', 'focus', 'blur', 'reset'],
+  expose: ['root'],
+  setup(props) {
+    // Refs
+    const root = ref();
+    // Styles
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-tag', ...TagRoot, ...TagRootVariants[props.variant], ...(!custom.value ? TagRootColors[props.color] : []), classAttribute.value]);
+    // State
+    const custom = computed(() => {
+      return !['primary', 'danger'].includes(props.color);
+    });
+    // Effects
+    watchPostEffect(() => {
+      const rootElement = unref(root);
+      if (rootElement) {
+        Object.assign(rootElement.style, {
+          backgroundColor: custom.value ? `${props.color}1f` : '',
+          color: custom.value ? props.color : ''
+        });
+      }
+    });
+    return {
+      root,
+      rootStyles,
+      custom
+    };
+  }
+});
+
+const _hoisted_1 = ["tabindex", "disabled"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrIconButton = resolveComponent("OrIconButton");
+  return openBlock(), createElementBlock("div", mergeProps({
+    ref: "root"
+  }, _ctx.$attrs, {
+    class: _ctx.rootStyles,
+    tabindex: !_ctx.disabled && _ctx.variant === 'button' ? 0 : null,
+    disabled: _ctx.disabled ? '' : null,
+    onClick: _cache[1] || (_cache[1] = $event => _ctx.$emit('click', $event)),
+    onFocus: _cache[2] || (_cache[2] = $event => _ctx.$emit('focus', $event)),
+    onBlur: _cache[3] || (_cache[3] = $event => _ctx.$emit('blur', $event))
+  }), [renderSlot(_ctx.$slots, "default"), _ctx.variant === 'reset' ? (openBlock(), createBlock(_component_OrIconButton, {
+    key: 0,
+    class: normalizeClass(['-m-xs', 'ml-none']),
+    icon: 'close',
+    color: !_ctx.custom ? _ctx.color : 'inherit',
+    disabled: _ctx.disabled,
+    onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.$emit('reset'), ["stop"]))
+  }, null, 8 /* PROPS */, ["color", "disabled"])) : createCommentVNode("v-if", true)], 16 /* FULL_PROPS */, _hoisted_1);
+}
+
+script.render = render;
+script.__file = "src/components/or-tag-v3/OrTag.vue";
+
+export { TagVariant as T, TagColor as a, script as s };

package/dist/esm/v3/OrTextarea-98895b2a.js

@@ -3,7 +3,7 @@ import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
 import { s as script$1 } from './OrError-19a62a18.js';
 import { s as script$2 } from './OrHint-73835593.js';
-import { s as script$3, a as InputBoxSize } from './OrInputBox-542d2f2c.js';
+import { s as script$3, a as InputBoxSize } from './OrInputBox-634230b1.js';
 import { s as script$4 } from './OrLabel-7d4fe80b.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, withDirectives, createElementVNode, mergeProps, vModelText, Fragment, createSlots } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';