@onereach/ui-components 8.4.1-beta.3657.0 → 8.5.0

package/dist/bundled/v2/components/OrIcon/index.js

@@ -1,2 +1,178 @@
-export { default as OrIcon } from './OrIcon.js';
-export { OrIconColors, OrIconType } from './constants.js';
+import { defineComponent, ref } from 'vue-demi';
+import { p as pxToRem } from '../OrBottomSheetV3-022aa5f7.js';
+import { OrTooltipContent as __vue_component__$1 } from '../OrTooltip/index.js';
+import { _ as __vue_component__$2, O as OrFloatingPlacements } from '../OrFloating-22e3d64d.js';
+import { s as styleInject, n as normalizeComponent } from '../OrAvatar-7d519020.js';
+
+var OrIconColors;
+(function (OrIconColors) {
+  OrIconColors["primary"] = "primary";
+  OrIconColors["error"] = "error";
+  OrIconColors["warning"] = "warning";
+  OrIconColors["success"] = "success";
+  OrIconColors["neutral-0"] = "neutral-0";
+  OrIconColors["neutral-1"] = "neutral-1";
+  OrIconColors["neutral-2"] = "neutral-2";
+  OrIconColors["neutral-3"] = "neutral-3";
+  OrIconColors["neutral-4"] = "neutral-4";
+  OrIconColors["neutral-5"] = "neutral-5";
+  OrIconColors["neutral-6"] = "neutral-6";
+})(OrIconColors || (OrIconColors = {}));
+var OrIconType;
+(function (OrIconType) {
+  OrIconType["outline"] = "outlined";
+  OrIconType["filled"] = "filled";
+  OrIconType["rounded"] = "round";
+  OrIconType["sharp"] = "sharp";
+  OrIconType["two-tone"] = "two-tone";
+})(OrIconType || (OrIconType = {}));
+
+var script = defineComponent({
+  name: 'OrIcon',
+  components: {
+    OrTooltipContent: __vue_component__$1,
+    OrFloating: __vue_component__$2
+  },
+  inheritAttrs: false,
+  props: {
+    iconType: {
+      type: String,
+      default: OrIconType.filled,
+      required: false
+    },
+    icon: {
+      type: String,
+      default: '',
+      required: false
+    },
+    color: {
+      type: String,
+      default: '',
+      required: false
+    },
+    tooltipText: {
+      type: String,
+      default: null,
+      required: false
+    },
+    tooltipPlacement: {
+      type: String,
+      default: OrFloatingPlacements.TOP,
+      required: false
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    size: {
+      type: Number,
+      default: null
+    }
+  },
+  setup() {
+    const tooltipTrigger = ref();
+    return {
+      tooltipTrigger
+    };
+  },
+  data() {
+    return {
+      tooltipIsShown: false
+    };
+  },
+  computed: {
+    iconClasses() {
+      return ['or-icon', `material-icons${this.iconType === OrIconType.filled ? '' : `-${this.iconType}`}`, {
+        'is-disabled': this.isDisabled,
+        [`is-${this.color}-color`]: !!this.color,
+        'with-tooltip': !!this.tooltipText
+      }];
+    },
+    fontSize() {
+      return Number.isInteger(this.size) ? {
+        fontSize: pxToRem(this.size)
+      } : null;
+    },
+    rootClasses() {
+      return ['or-icon-root', this.$attrs.class];
+    },
+    localAttrs() {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+      const {
+        class: _,
+        ...rest
+      } = this.$attrs;
+      return rest;
+    }
+  },
+  methods: {
+    showTooltip() {
+      this.tooltipIsShown = true;
+    },
+    hideTooltip() {
+      this.tooltipIsShown = false;
+    }
+  }
+});
+
+var css_248z = "@keyframes spinAround-data-v-7f81d526{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-7f81d526{from{opacity:1}to{opacity:0}}.or-icon-root[data-v-7f81d526]{position:relative;display:inline-flex}.or-icon[data-v-7f81d526]{display:inline-flex;font-size:1.25rem;color:inherit;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition-timing-function:var(--t-func);transition-duration:var(--t-duration);transition-property:color}.or-icon.with-tooltip[data-v-7f81d526]{cursor:pointer}.or-icon.is-primary-color[data-v-7f81d526]{color:var(--c-primary)}.or-icon.is-warning-color[data-v-7f81d526]{color:var(--c-warning)}.or-icon.is-success-color[data-v-7f81d526]{color:var(--c-success)}.or-icon.is-error-color[data-v-7f81d526]{color:var(--c-error)}.or-icon.is-neutral-0-color[data-v-7f81d526]{color:var(--c-neutral-0)}.or-icon.is-neutral-1-color[data-v-7f81d526]{color:var(--c-neutral-1)}.or-icon.is-neutral-2-color[data-v-7f81d526]{color:var(--c-neutral-2)}.or-icon.is-neutral-3-color[data-v-7f81d526]{color:var(--c-neutral-3)}.or-icon.is-neutral-4-color[data-v-7f81d526]{color:var(--c-neutral-4)}.or-icon.is-neutral-5-color[data-v-7f81d526]{color:var(--c-neutral-5)}.or-icon.is-neutral-6-color[data-v-7f81d526]{color:var(--c-neutral-6)}.or-icon.is-disabled[data-v-7f81d526],.or-icon[data-v-7f81d526]:disabled{cursor:not-allowed}";
+styleInject(css_248z);
+
+/* script */
+const __vue_script__ = script;
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('span', {
+    class: _vm.rootClasses
+  }, [_c('span', _vm._b({
+    ref: "tooltipTrigger",
+    class: _vm.iconClasses,
+    style: _vm.fontSize,
+    on: {
+      "mouseover": _vm.showTooltip,
+      "mouseleave": _vm.hideTooltip
+    }
+  }, 'span', _vm.localAttrs, false), [_vm._t("default", function () {
+    return [_vm._v(_vm._s(_vm.icon))];
+  })], 2), _vm._v(" "), _vm.tooltipText && _vm.tooltipIsShown ? _c('or-floating', {
+    attrs: {
+      "trigger": _vm.tooltipTrigger,
+      "placement": _vm.tooltipPlacement,
+      "is-using-shift": "",
+      "is-using-flip": "",
+      "offset": 8
+    }
+  }, [_c('or-tooltip-content', {
+    attrs: {
+      "content": _vm.tooltipText,
+      "placement": _vm.tooltipPlacement,
+      "is-shown": _vm.tooltipIsShown
+    }
+  })], 1) : _vm._e()], 1);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = "data-v-7f81d526";
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  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 OrIcon, OrIconColors, OrIconType };

package/dist/bundled/v2/components/OrIconButtonV2/OrIconButton.js

@@ -1,11 +1,10 @@
 import { defineComponent, isVue3, h } from 'vue-demi';
-import __vue_component__$2 from '../OrTooltip/OrTooltip.js';
-import { OrFloatingPlacements } from '../OrFloating/constants.js';
-import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
-import { ICON_BUTTON_TYPE, HTML_BUTTON_TYPE, BUTTON_SIZE, BUTTON_COLOR } from '../OrButtonV2/constants.js';
-import __vue_component__$3 from '../OrIcon/OrIcon.js';
-import __vue_component__$4 from '../OrLoader/OrLoader.js';
-import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
+import { OrTooltip as __vue_component__$2 } from '../OrTooltip/index.js';
+import { O as OrFloatingPlacements } from '../OrFloating-22e3d64d.js';
+import { n as normalizeComponent, s as styleInject } from '../OrAvatar-7d519020.js';
+import { I as ICON_BUTTON_TYPE, H as HTML_BUTTON_TYPE, a as BUTTON_SIZE, B as BUTTON_COLOR } from '../OrButtonV2-d0c4e061.js';
+import { OrIcon as __vue_component__$3 } from '../OrIcon/index.js';
+import { OrLoader as __vue_component__$4 } from '../OrLoader/index.js';
 
 /** Acts as pseudo "v-if" between <template /> and <or-tooltip /> */
 var script$1 = defineComponent({

package/dist/bundled/v2/components/OrIconButtonV3/OrIconButton.js

@@ -1,135 +1,2 @@
-import { defineComponent, ref, toRefs, computed, isVue3 } from 'vue-demi';
-import { IconButtonColor } from './props.js';
-import { IconButton, IconButtonColors } from './styles.js';
-import __vue_component__$1 from '../OrIconV3/OrIcon.js';
-import __vue_component__$2 from '../OrTooltipV3/OrTooltip.js';
-import { IconSize, IconVariant } from '../OrIconV3/props.js';
-import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
-
-var script = defineComponent({
-  name: 'OrIconButton',
-  components: {
-    OrIcon: __vue_component__$1,
-    OrTooltip: __vue_component__$2
-  },
-  inheritAttrs: false,
-  props: {
-    // TODO: Remove after migration to Vue 3
-    additionalStyles: {
-      type: Array,
-      default: () => []
-    },
-    icon: {
-      type: [String, Object],
-      required: true
-    },
-    color: {
-      type: String,
-      default: IconButtonColor.Default
-    },
-    size: {
-      type: String,
-      default: IconSize.M
-    },
-    selected: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    tooltip: {
-      type: [String, Object],
-      default: undefined
-    }
-  },
-  emits: ['click', 'focus', 'blur'],
-  expose: ['root'],
-  setup(props) {
-    // Refs
-    const root = ref();
-    const {
-      icon,
-      size
-    } = toRefs(props);
-    const iconProps = computed(() => {
-      return {
-        size: size.value,
-        variant: IconVariant.Inherit,
-        ...(typeof icon.value === 'string' ? {
-          icon: icon.value
-        } : icon.value)
-      };
-    });
-    // Styles
-    const rootStyles = computed(() => ['or-icon-button-v3', ...IconButton, ...IconButtonColors[props.color]]);
-    return {
-      root,
-      rootStyles,
-      isVue3,
-      iconProps
-    };
-  }
-});
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('OrTooltip', _vm._b({
-    scopedSlots: _vm._u([_vm.$slots.tooltipContent ? {
-      key: "content",
-      fn: function () {
-        return [_vm._t("tooltipContent")];
-      },
-      proxy: true
-    } : null], null, true)
-  }, 'OrTooltip', typeof _vm.tooltip === 'string' ? {
-    content: _vm.tooltip
-  } : _vm.tooltip, false), [_c('button', _vm._g(_vm._b({
-    ref: "root",
-    class: [_vm.rootStyles].concat(_vm.additionalStyles),
-    attrs: {
-      "type": 'button',
-      "selected": _vm.selected ? '' : null,
-      "disabled": _vm.disabled
-    }
-  }, 'button', _vm.$attrs, false), Object.assign({}, _vm.isVue3 ? {} : _vm.$listeners, {
-    click: function (e) {
-      return _vm.$emit('click', e);
-    },
-    focus: function (e) {
-      return _vm.$emit('focus', e);
-    },
-    blur: function (e) {
-      return _vm.$emit('blur', e);
-    }
-  })), [_c('OrIcon', _vm._b({}, 'OrIcon', _vm.iconProps, false))], 1)]);
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = undefined;
-/* scoped */
-const __vue_scope_id__ = undefined;
-/* module identifier */
-const __vue_module_identifier__ = undefined;
-/* functional template */
-const __vue_is_functional_template__ = false;
-/* style inject */
-
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__,
-  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 default };
+export { _ as default } from '../OrIconButtonV3-331241ce.js';
+import '../OrAvatar-7d519020.js';

package/dist/bundled/v2/components/OrIconButtonV3/index.js

@@ -1,3 +1,2 @@
-export { default as OrIconButtonV3 } from './OrIconButton.js';
-export { IconButtonColor } from './props.js';
-export { IconSize as IconButtonSize } from '../OrIconV3/props.js';
+export { I as IconButtonColor, _ as OrIconButtonV3 } from '../OrIconButtonV3-331241ce.js';
+export { I as IconButtonSize } from '../OrIconV3-cbb77e49.js';

package/dist/bundled/v2/components/OrIconButtonV3/props.js

@@ -1,11 +1,2 @@
-export { IconSize as IconButtonSize } from '../OrIconV3/props.js';
-
-var IconButtonColor;
-(function (IconButtonColor) {
-  IconButtonColor["Default"] = "default";
-  IconButtonColor["Primary"] = "primary";
-  IconButtonColor["Danger"] = "danger";
-  IconButtonColor["Inherit"] = "inherit";
-})(IconButtonColor || (IconButtonColor = {}));
-
-export { IconButtonColor };
+export { I as IconButtonSize } from '../OrIconV3-cbb77e49.js';
+export { I as IconButtonColor } from '../OrIconButtonV3-331241ce.js';

package/dist/bundled/v2/components/OrIconButtonV3/styles.js

@@ -1,72 +1 @@
-import { IconButtonColor } from './props.js';
-
-const IconButton = [
-// Layout
-'layout-inline-row justify-center',
-// Shape
-'rounded-full',
-// Interactivity
-'interactivity-click',
-// Typography
-'typography-button',
-// Iconography
-'iconography-outlined',
-// Iconography (hover)
-'hover:md:iconography-filled',
-// Iconography (focus)
-'focus-visible:md:iconography-filled',
-// Iconography (active)
-'active:iconography-filled',
-// Theme
-'!outline outline-2 outline-transparent'];
-const IconButtonColors = {
-  [IconButtonColor.Default]: [
-  // Theme
-  'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
-  // Theme (hover)
-  'hover:md:theme-foreground-default', 'dark:hover:md:theme-foreground-default-dark', 'hover:md:outline-primary-opacity-0-08', 'dark:hover:md:outline-primary-opacity-0-08-dark',
-  // Theme (focus)
-  'focus-visible:md:theme-foreground-default', 'dark:focus-visible:md:theme-foreground-default-dark', 'focus-visible:md:outline-primary-opacity-0-08', 'dark:focus-visible:md:outline-primary-opacity-0-08-dark',
-  // Theme (active)
-  'active:theme-foreground-default', 'dark:active:theme-foreground-default-dark', 'active:outline-primary-opacity-0-08', 'dark:active:outline-primary-opacity-0-08-dark', 'active:md:outline-primary-opacity-0-16', 'dark:active:md:outline-primary-opacity-0-16-dark',
-  // Theme (selected)
-  'selected:theme-foreground-default', 'dark:selected:theme-foreground-default-dark'],
-  [IconButtonColor.Primary]: [
-  // Theme
-  'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark',
-  // Theme (hover)
-  'hover:md:outline-primary-opacity-0-08', 'dark:hover:md:outline-primary-opacity-0-08-dark',
-  // Theme (focus)
-  'focus-visible:md:outline-primary-opacity-0-08', 'dark:focus-visible:md:outline-primary-opacity-0-08-dark',
-  // Theme (active)
-  'active:outline-primary-opacity-0-08', 'dark:active:outline-primary-opacity-0-08-dark', 'active:md:outline-primary-opacity-0-16', 'dark:active:md:outline-primary-opacity-0-16-dark'],
-  [IconButtonColor.Primary]: [
-  // Theme
-  'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark',
-  // Theme (hover)
-  'hover:md:outline-primary-opacity-0-08', 'dark:hover:md:outline-primary-opacity-0-08-dark',
-  // Theme (focus)
-  'focus-visible:md:outline-primary-opacity-0-08', 'dark:focus-visible:md:outline-primary-opacity-0-08-dark',
-  // Theme (active)
-  'active:outline-primary-opacity-0-08', 'dark:active:outline-primary-opacity-0-08-dark', 'active:md:outline-primary-opacity-0-16', 'dark:active:md:outline-primary-opacity-0-16-dark'],
-  [IconButtonColor.Danger]: [
-  // Theme
-  'theme-preset-3-error', 'dark:theme-preset-3-error-dark',
-  // Theme (hover)
-  'hover:md:outline-error-opacity-0-08', 'dark:hover:md:outline-error-opacity-0-08-dark',
-  // Theme (focus)
-  'focus-visible:md:outline-error-opacity-0-08', 'dark:focus-visible:md:outline-error-opacity-0-08-dark',
-  // Theme (active)
-  'active:outline-error-opacity-0-08', 'dark:active:outline-error-opacity-0-08-dark', 'active:md:outline-error-opacity-0-16', 'dark:active:md:outline-error-opacity-0-16-dark'],
-  [IconButtonColor.Inherit]: [
-  // Theme
-  'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-foreground-inherit', 'dark:theme-foreground-inherit-dark',
-  // Theme (hover)
-  'hover:md:outline-primary-opacity-0-08', 'dark:hover:md:outline-primary-opacity-0-08-dark',
-  // Theme (focus)
-  'focus-visible:md:outline-primary-opacity-0-08', 'dark:focus-visible:md:outline-primary-opacity-0-08-dark',
-  // Theme (active)
-  'active:outline-primary-opacity-0-08', 'dark:active:outline-primary-opacity-0-08-dark', 'active:md:outline-primary-opacity-0-16', 'dark:active:md:outline-primary-opacity-0-16-dark']
-};
-
-export { IconButton, IconButtonColors };
+export { a as IconButton, b as IconButtonColors } from '../OrIconButtonV3-331241ce.js';

package/dist/bundled/v2/components/OrIconButtonV3-331241ce.js

@@ -0,0 +1,209 @@
+import { defineComponent, ref, toRefs, computed, isVue3 } from 'vue-demi';
+import { _ as __vue_component__$1, I as IconSize, a as IconVariant } from './OrIconV3-cbb77e49.js';
+import { _ as __vue_component__$2 } from './OrTooltipV3-8df03b27.js';
+import { n as normalizeComponent } from './OrAvatar-7d519020.js';
+
+var IconButtonColor;
+(function (IconButtonColor) {
+  IconButtonColor["Default"] = "default";
+  IconButtonColor["Primary"] = "primary";
+  IconButtonColor["Danger"] = "danger";
+  IconButtonColor["Inherit"] = "inherit";
+})(IconButtonColor || (IconButtonColor = {}));
+
+const IconButton = [
+// Layout
+'layout-inline-row justify-center',
+// Shape
+'rounded-full',
+// Interactivity
+'interactivity-click',
+// Typography
+'typography-button',
+// Iconography
+'iconography-outlined',
+// Iconography (hover)
+'hover:md:iconography-filled',
+// Iconography (focus)
+'focus-visible:md:iconography-filled',
+// Iconography (active)
+'active:iconography-filled',
+// Theme
+'!outline outline-2 outline-transparent'];
+const IconButtonColors = {
+  [IconButtonColor.Default]: [
+  // Theme
+  'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
+  // Theme (hover)
+  'hover:md:theme-foreground-default', 'dark:hover:md:theme-foreground-default-dark', 'hover:md:outline-primary-opacity-0-08', 'dark:hover:md:outline-primary-opacity-0-08-dark',
+  // Theme (focus)
+  'focus-visible:md:theme-foreground-default', 'dark:focus-visible:md:theme-foreground-default-dark', 'focus-visible:md:outline-primary-opacity-0-08', 'dark:focus-visible:md:outline-primary-opacity-0-08-dark',
+  // Theme (active)
+  'active:theme-foreground-default', 'dark:active:theme-foreground-default-dark', 'active:outline-primary-opacity-0-08', 'dark:active:outline-primary-opacity-0-08-dark', 'active:md:outline-primary-opacity-0-16', 'dark:active:md:outline-primary-opacity-0-16-dark',
+  // Theme (selected)
+  'selected:theme-foreground-default', 'dark:selected:theme-foreground-default-dark'],
+  [IconButtonColor.Primary]: [
+  // Theme
+  'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark',
+  // Theme (hover)
+  'hover:md:outline-primary-opacity-0-08', 'dark:hover:md:outline-primary-opacity-0-08-dark',
+  // Theme (focus)
+  'focus-visible:md:outline-primary-opacity-0-08', 'dark:focus-visible:md:outline-primary-opacity-0-08-dark',
+  // Theme (active)
+  'active:outline-primary-opacity-0-08', 'dark:active:outline-primary-opacity-0-08-dark', 'active:md:outline-primary-opacity-0-16', 'dark:active:md:outline-primary-opacity-0-16-dark'],
+  [IconButtonColor.Primary]: [
+  // Theme
+  'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark',
+  // Theme (hover)
+  'hover:md:outline-primary-opacity-0-08', 'dark:hover:md:outline-primary-opacity-0-08-dark',
+  // Theme (focus)
+  'focus-visible:md:outline-primary-opacity-0-08', 'dark:focus-visible:md:outline-primary-opacity-0-08-dark',
+  // Theme (active)
+  'active:outline-primary-opacity-0-08', 'dark:active:outline-primary-opacity-0-08-dark', 'active:md:outline-primary-opacity-0-16', 'dark:active:md:outline-primary-opacity-0-16-dark'],
+  [IconButtonColor.Danger]: [
+  // Theme
+  'theme-preset-3-error', 'dark:theme-preset-3-error-dark',
+  // Theme (hover)
+  'hover:md:outline-error-opacity-0-08', 'dark:hover:md:outline-error-opacity-0-08-dark',
+  // Theme (focus)
+  'focus-visible:md:outline-error-opacity-0-08', 'dark:focus-visible:md:outline-error-opacity-0-08-dark',
+  // Theme (active)
+  'active:outline-error-opacity-0-08', 'dark:active:outline-error-opacity-0-08-dark', 'active:md:outline-error-opacity-0-16', 'dark:active:md:outline-error-opacity-0-16-dark'],
+  [IconButtonColor.Inherit]: [
+  // Theme
+  'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-foreground-inherit', 'dark:theme-foreground-inherit-dark',
+  // Theme (hover)
+  'hover:md:outline-primary-opacity-0-08', 'dark:hover:md:outline-primary-opacity-0-08-dark',
+  // Theme (focus)
+  'focus-visible:md:outline-primary-opacity-0-08', 'dark:focus-visible:md:outline-primary-opacity-0-08-dark',
+  // Theme (active)
+  'active:outline-primary-opacity-0-08', 'dark:active:outline-primary-opacity-0-08-dark', 'active:md:outline-primary-opacity-0-16', 'dark:active:md:outline-primary-opacity-0-16-dark']
+};
+
+var script = defineComponent({
+  name: 'OrIconButton',
+  components: {
+    OrIcon: __vue_component__$1,
+    OrTooltip: __vue_component__$2
+  },
+  inheritAttrs: false,
+  props: {
+    // TODO: Remove after migration to Vue 3
+    additionalStyles: {
+      type: Array,
+      default: () => []
+    },
+    icon: {
+      type: [String, Object],
+      required: true
+    },
+    color: {
+      type: String,
+      default: IconButtonColor.Default
+    },
+    size: {
+      type: String,
+      default: IconSize.M
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    tooltip: {
+      type: [String, Object],
+      default: undefined
+    }
+  },
+  emits: ['click', 'focus', 'blur'],
+  expose: ['root'],
+  setup(props) {
+    // Refs
+    const root = ref();
+    const {
+      icon,
+      size
+    } = toRefs(props);
+    const iconProps = computed(() => {
+      return {
+        size: size.value,
+        variant: IconVariant.Inherit,
+        ...(typeof icon.value === 'string' ? {
+          icon: icon.value
+        } : icon.value)
+      };
+    });
+    // Styles
+    const rootStyles = computed(() => ['or-icon-button-v3', ...IconButton, ...IconButtonColors[props.color]]);
+    return {
+      root,
+      rootStyles,
+      isVue3,
+      iconProps
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('OrTooltip', _vm._b({
+    scopedSlots: _vm._u([_vm.$slots.tooltipContent ? {
+      key: "content",
+      fn: function () {
+        return [_vm._t("tooltipContent")];
+      },
+      proxy: true
+    } : null], null, true)
+  }, 'OrTooltip', typeof _vm.tooltip === 'string' ? {
+    content: _vm.tooltip
+  } : _vm.tooltip, false), [_c('button', _vm._g(_vm._b({
+    ref: "root",
+    class: [_vm.rootStyles].concat(_vm.additionalStyles),
+    attrs: {
+      "type": 'button',
+      "selected": _vm.selected ? '' : null,
+      "disabled": _vm.disabled
+    }
+  }, 'button', _vm.$attrs, false), Object.assign({}, _vm.isVue3 ? {} : _vm.$listeners, {
+    click: function (e) {
+      return _vm.$emit('click', e);
+    },
+    focus: function (e) {
+      return _vm.$emit('focus', e);
+    },
+    blur: function (e) {
+      return _vm.$emit('blur', e);
+    }
+  })), [_c('OrIcon', _vm._b({}, 'OrIcon', _vm.iconProps, false))], 1)]);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { IconButtonColor as I, __vue_component__ as _, IconButton as a, IconButtonColors as b };