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

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

@@ -0,0 +1,181 @@
+import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, mergeProps, toHandlers, createBlock, createCommentVNode, renderSlot } from 'vue';
+import { s as styleInject } from '../OrAvatar-bfa6fd65.js';
+import { defineComponent, isVue3, h } from 'vue-demi';
+import { OrTooltip as script$2 } from '../OrTooltip/index.js';
+import { O as OrFloatingPlacements } from '../OrFloating-3ae45ca5.js';
+import { I as ICON_BUTTON_TYPE, H as HTML_BUTTON_TYPE, a as BUTTON_SIZE, B as BUTTON_COLOR } from '../OrButtonV2-723fa64f.js';
+import { OrIcon as script$3 } from '../OrIcon/index.js';
+import { OrLoader as script$4 } from '../OrLoader/index.js';
+
+/** Acts as pseudo "v-if" between <template /> and <or-tooltip /> */
+var script$1 = defineComponent({
+  props: {
+    tooltipText: {
+      type: String,
+      default: ''
+    },
+    tooltipPlacement: {
+      type: String,
+      default: OrFloatingPlacements.TOP
+    }
+  },
+  ...(isVue3 ? {
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      const content = slots.default;
+      if (!props.tooltipText) {
+        return content;
+      }
+      const tooltipProps = {
+        content: props.tooltipText,
+        placement: props.tooltipPlacement
+      };
+      return () => h(script$2, tooltipProps, content);
+    }
+  } : {
+    render() {
+      const content = this.$slots.default;
+      if (!this.tooltipText) {
+        return content;
+      }
+      const props = {
+        content: this.$props.tooltipText,
+        placement: this.$props.tooltipPlacement
+      };
+      return h(script$2, {
+        props
+      }, content);
+    }
+  })
+});
+
+script$1.__file = "src/components/or-icon-button-v2/partials/OrTooltipWrapper.vue";
+
+var script = defineComponent({
+  name: 'OrIconButton',
+  components: {
+    OrIcon: script$3,
+    OrLoader: script$4,
+    OrTooltipWrapper: script$1
+  },
+  props: {
+    icon: {
+      type: String,
+      required: true
+    },
+    color: {
+      type: String,
+      default: null
+    },
+    iconColor: {
+      type: String,
+      default: null
+    },
+    bgColor: {
+      type: String,
+      default: null
+    },
+    type: {
+      type: String,
+      default: ICON_BUTTON_TYPE.ICON
+    },
+    htmlButtonType: {
+      type: String,
+      default: HTML_BUTTON_TYPE.BUTTON,
+      required: false
+    },
+    tooltipText: {
+      type: String,
+      default: ''
+    },
+    tooltipPlacement: {
+      type: String,
+      default: OrFloatingPlacements.TOP
+    },
+    isLoading: Boolean,
+    isDisabled: Boolean,
+    size: {
+      type: String,
+      default: BUTTON_SIZE.DEFAULT
+    }
+  },
+  emits: ['click', 'focus', 'blur'],
+  setup() {
+    return {
+      isVue3
+    };
+  },
+  computed: {
+    buttonClasses() {
+      var _a;
+      return {
+        [(_a = this.color) !== null && _a !== void 0 ? _a : BUTTON_COLOR.PRIMARY]: true,
+        [this.type]: true,
+        [`is-${this.iconColor}-icon-color`]: !!this.iconColor,
+        [`is-${this.bgColor}-bg-color`]: !!this.bgColor,
+        [`size-${this.size}`]: true,
+        loading: this.isLoading,
+        disabled: this.isDisabled
+      };
+    }
+  },
+  watch: {
+    color: {
+      handler(val) {
+        if (!val) return;
+        console.warn('OrIconButton color is being deprecated, consider using iconColor and bgColor.');
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleButtonClick(event) {
+      if (!this.isLoading && !this.isDisabled) {
+        this.$emit('click', event);
+      }
+    }
+  }
+});
+
+const _hoisted_1 = {
+  class: "or-icon-button-root"
+};
+const _hoisted_2 = ["disabled", "type"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_loader = resolveComponent("or-loader");
+  const _component_or_icon = resolveComponent("or-icon");
+  const _component_or_tooltip_wrapper = resolveComponent("or-tooltip-wrapper");
+  return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(_component_or_tooltip_wrapper, {
+    "tooltip-text": _ctx.tooltipText,
+    "tooltip-placement": _ctx.tooltipPlacement
+  }, {
+    default: withCtx(() => [createElementVNode("button", mergeProps({
+      class: ["or-icon-button", _ctx.buttonClasses],
+      disabled: _ctx.isDisabled,
+      type: _ctx.htmlButtonType
+    }, toHandlers({
+      ...(_ctx.isVue3 ? {} : _ctx.$listeners),
+      click: e => _ctx.handleButtonClick(e),
+      focus: e => _ctx.$emit('focus', e),
+      blur: e => _ctx.$emit('blur', e)
+    }, true)), [_ctx.isLoading ? (openBlock(), createBlock(_component_or_loader, {
+      key: 0
+    })) : createCommentVNode("v-if", true), !_ctx.isLoading ? renderSlot(_ctx.$slots, "default", {
+      key: 1
+    }, () => [createVNode(_component_or_icon, {
+      icon: _ctx.icon
+    }, null, 8 /* PROPS */, ["icon"])]) : createCommentVNode("v-if", true)], 16 /* FULL_PROPS */, _hoisted_2)]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["tooltip-text", "tooltip-placement"])]);
+}
+
+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-94138700 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-94138700 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n/** \"Contained\" and \"Floating Icon\" buttons have the same color scheme  */\n/** \"Outline\" button has some styles copy-pasted from \"Contained\" button */\n/** \"Text\", \"Inline\" and \"Icon\" buttons have the same color scheme */\n.or-icon-button[data-v-94138700] {\n  --or-icon-button-font-size: 1.25rem;\n  --or-icon-button-loader-size: 1.25rem;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  outline: none;\n}\n.or-icon-button-root[data-v-94138700] {\n  display: inline-flex;\n  width: -moz-fit-content;\n  width: fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\n}\n.or-icon-button.disabled[data-v-94138700] {\n  cursor: not-allowed;\n}\n.or-icon-button.loading[data-v-94138700] {\n  cursor: progress;\n}\n.or-icon-button.size-small[data-v-94138700] {\n  --or-icon-button-size: 1.75rem;\n  --or-icon-button-font-size: 0.875rem;\n  --or-icon-button-loader-size: 0.875rem;\n  min-width: auto;\n}\n.or-icon-button.icon[data-v-94138700] .or-icon {\n  font-size: var(--or-icon-button-font-size);\n}\n.or-icon-button.icon.primary[data-v-94138700] {\n  color: var(--c-primary);\n}\n.or-icon-button.icon.primary[data-v-94138700] .or-icon {\n  color: var(--c-primary);\n}\n.or-icon-button.icon.primary[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  color: var(--c-primary-darken-20);\n}\n.or-icon-button.icon.primary[data-v-94138700]:hover:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-primary-darken-20);\n}\n.or-icon-button.icon.primary[data-v-94138700]:active:not(.disabled):not(.loading) {\n  color: var(--c-primary-darken-25);\n}\n.or-icon-button.icon.primary[data-v-94138700]:active:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-primary-darken-25);\n}\n.or-icon-button.icon.primary .or-loader[data-v-94138700]::after {\n  color: var(--c-primary);\n}\n.or-icon-button.icon.primary.disabled[data-v-94138700], .or-icon-button.icon.primary.loading[data-v-94138700] {\n  color: var(--c-primary-lighten-20);\n}\n.or-icon-button.icon.primary.disabled[data-v-94138700] .or-icon, .or-icon-button.icon.primary.loading[data-v-94138700] .or-icon {\n  color: var(--c-primary-lighten-20);\n}\n.or-icon-button.icon.success[data-v-94138700] {\n  color: var(--c-success);\n}\n.or-icon-button.icon.success[data-v-94138700] .or-icon {\n  color: var(--c-success);\n}\n.or-icon-button.icon.success[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  color: var(--c-success-darken-20);\n}\n.or-icon-button.icon.success[data-v-94138700]:hover:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-success-darken-20);\n}\n.or-icon-button.icon.success[data-v-94138700]:active:not(.disabled):not(.loading) {\n  color: var(--c-success-darken-25);\n}\n.or-icon-button.icon.success[data-v-94138700]:active:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-success-darken-25);\n}\n.or-icon-button.icon.success .or-loader[data-v-94138700]::after {\n  color: var(--c-success);\n}\n.or-icon-button.icon.success.disabled[data-v-94138700], .or-icon-button.icon.success.loading[data-v-94138700] {\n  color: var(--c-success-lighten-20);\n}\n.or-icon-button.icon.success.disabled[data-v-94138700] .or-icon, .or-icon-button.icon.success.loading[data-v-94138700] .or-icon {\n  color: var(--c-success-lighten-20);\n}\n.or-icon-button.icon.warning[data-v-94138700] {\n  color: var(--c-warning);\n}\n.or-icon-button.icon.warning[data-v-94138700] .or-icon {\n  color: var(--c-warning);\n}\n.or-icon-button.icon.warning[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  color: var(--c-warning-darken-20);\n}\n.or-icon-button.icon.warning[data-v-94138700]:hover:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-warning-darken-20);\n}\n.or-icon-button.icon.warning[data-v-94138700]:active:not(.disabled):not(.loading) {\n  color: var(--c-warning-darken-25);\n}\n.or-icon-button.icon.warning[data-v-94138700]:active:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-warning-darken-25);\n}\n.or-icon-button.icon.warning .or-loader[data-v-94138700]::after {\n  color: var(--c-warning);\n}\n.or-icon-button.icon.warning.disabled[data-v-94138700], .or-icon-button.icon.warning.loading[data-v-94138700] {\n  color: var(--c-warning-lighten-20);\n}\n.or-icon-button.icon.warning.disabled[data-v-94138700] .or-icon, .or-icon-button.icon.warning.loading[data-v-94138700] .or-icon {\n  color: var(--c-warning-lighten-20);\n}\n.or-icon-button.icon.error[data-v-94138700] {\n  color: var(--c-error);\n}\n.or-icon-button.icon.error[data-v-94138700] .or-icon {\n  color: var(--c-error);\n}\n.or-icon-button.icon.error[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  color: var(--c-error-darken-20);\n}\n.or-icon-button.icon.error[data-v-94138700]:hover:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-error-darken-20);\n}\n.or-icon-button.icon.error[data-v-94138700]:active:not(.disabled):not(.loading) {\n  color: var(--c-error-darken-25);\n}\n.or-icon-button.icon.error[data-v-94138700]:active:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-error-darken-25);\n}\n.or-icon-button.icon.error .or-loader[data-v-94138700]::after {\n  color: var(--c-error);\n}\n.or-icon-button.icon.error.disabled[data-v-94138700], .or-icon-button.icon.error.loading[data-v-94138700] {\n  color: var(--c-error-lighten-20);\n}\n.or-icon-button.icon.error.disabled[data-v-94138700] .or-icon, .or-icon-button.icon.error.loading[data-v-94138700] .or-icon {\n  color: var(--c-error-lighten-20);\n}\n.or-icon-button.icon.neutral-0[data-v-94138700] {\n  color: var(--c-neutral-0);\n}\n.or-icon-button.icon.neutral-0[data-v-94138700] .or-icon {\n  color: var(--c-neutral-0);\n}\n.or-icon-button.icon.neutral-0[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  color: var(--c-neutral-0-darken-20);\n}\n.or-icon-button.icon.neutral-0[data-v-94138700]:hover:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-neutral-0-darken-20);\n}\n.or-icon-button.icon.neutral-0[data-v-94138700]:active:not(.disabled):not(.loading) {\n  color: var(--c-neutral-0-darken-25);\n}\n.or-icon-button.icon.neutral-0[data-v-94138700]:active:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-neutral-0-darken-25);\n}\n.or-icon-button.icon.neutral-0 .or-loader[data-v-94138700]::after {\n  color: var(--c-neutral-0);\n}\n.or-icon-button.icon.neutral-0.disabled[data-v-94138700], .or-icon-button.icon.neutral-0.loading[data-v-94138700] {\n  color: var(--c-neutral-0-lighten-20);\n}\n.or-icon-button.icon.neutral-0.disabled[data-v-94138700] .or-icon, .or-icon-button.icon.neutral-0.loading[data-v-94138700] .or-icon {\n  color: var(--c-neutral-0-lighten-20);\n}\n.or-icon-button.icon.neutral-3[data-v-94138700] {\n  color: var(--c-neutral-3);\n}\n.or-icon-button.icon.neutral-3[data-v-94138700] .or-icon {\n  color: var(--c-neutral-3);\n}\n.or-icon-button.icon.neutral-3[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  color: var(--c-neutral-3-darken-20);\n}\n.or-icon-button.icon.neutral-3[data-v-94138700]:hover:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-neutral-3-darken-20);\n}\n.or-icon-button.icon.neutral-3[data-v-94138700]:active:not(.disabled):not(.loading) {\n  color: var(--c-neutral-3-darken-25);\n}\n.or-icon-button.icon.neutral-3[data-v-94138700]:active:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-neutral-3-darken-25);\n}\n.or-icon-button.icon.neutral-3 .or-loader[data-v-94138700]::after {\n  color: var(--c-neutral-3);\n}\n.or-icon-button.icon.neutral-3.disabled[data-v-94138700], .or-icon-button.icon.neutral-3.loading[data-v-94138700] {\n  color: var(--c-neutral-3-lighten-20);\n}\n.or-icon-button.icon.neutral-3.disabled[data-v-94138700] .or-icon, .or-icon-button.icon.neutral-3.loading[data-v-94138700] .or-icon {\n  color: var(--c-neutral-3-lighten-20);\n}\n.or-icon-button.icon.neutral-4[data-v-94138700] {\n  color: var(--c-neutral-4);\n}\n.or-icon-button.icon.neutral-4[data-v-94138700] .or-icon {\n  color: var(--c-neutral-4);\n}\n.or-icon-button.icon.neutral-4[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  color: var(--c-neutral-4-darken-20);\n}\n.or-icon-button.icon.neutral-4[data-v-94138700]:hover:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-neutral-4-darken-20);\n}\n.or-icon-button.icon.neutral-4[data-v-94138700]:active:not(.disabled):not(.loading) {\n  color: var(--c-neutral-4-darken-25);\n}\n.or-icon-button.icon.neutral-4[data-v-94138700]:active:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-neutral-4-darken-25);\n}\n.or-icon-button.icon.neutral-4 .or-loader[data-v-94138700]::after {\n  color: var(--c-neutral-4);\n}\n.or-icon-button.icon.neutral-4.disabled[data-v-94138700], .or-icon-button.icon.neutral-4.loading[data-v-94138700] {\n  color: var(--c-neutral-4-lighten-20);\n}\n.or-icon-button.icon.neutral-4.disabled[data-v-94138700] .or-icon, .or-icon-button.icon.neutral-4.loading[data-v-94138700] .or-icon {\n  color: var(--c-neutral-4-lighten-20);\n}\n.or-icon-button.icon.neutral-5[data-v-94138700] {\n  color: var(--c-neutral-5);\n}\n.or-icon-button.icon.neutral-5[data-v-94138700] .or-icon {\n  color: var(--c-neutral-5);\n}\n.or-icon-button.icon.neutral-5[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  color: var(--c-neutral-5-darken-20);\n}\n.or-icon-button.icon.neutral-5[data-v-94138700]:hover:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-neutral-5-darken-20);\n}\n.or-icon-button.icon.neutral-5[data-v-94138700]:active:not(.disabled):not(.loading) {\n  color: var(--c-neutral-5-darken-25);\n}\n.or-icon-button.icon.neutral-5[data-v-94138700]:active:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-neutral-5-darken-25);\n}\n.or-icon-button.icon.neutral-5 .or-loader[data-v-94138700]::after {\n  color: var(--c-neutral-5);\n}\n.or-icon-button.icon.neutral-5.disabled[data-v-94138700], .or-icon-button.icon.neutral-5.loading[data-v-94138700] {\n  color: var(--c-neutral-5-lighten-20);\n}\n.or-icon-button.icon.neutral-5.disabled[data-v-94138700] .or-icon, .or-icon-button.icon.neutral-5.loading[data-v-94138700] .or-icon {\n  color: var(--c-neutral-5-lighten-20);\n}\n.or-icon-button.icon.neutral-6[data-v-94138700] {\n  color: var(--c-neutral-6);\n}\n.or-icon-button.icon.neutral-6[data-v-94138700] .or-icon {\n  color: var(--c-neutral-6);\n}\n.or-icon-button.icon.neutral-6[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  color: var(--c-neutral-6-darken-20);\n}\n.or-icon-button.icon.neutral-6[data-v-94138700]:hover:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-neutral-6-darken-20);\n}\n.or-icon-button.icon.neutral-6[data-v-94138700]:active:not(.disabled):not(.loading) {\n  color: var(--c-neutral-6-darken-25);\n}\n.or-icon-button.icon.neutral-6[data-v-94138700]:active:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-neutral-6-darken-25);\n}\n.or-icon-button.icon.neutral-6 .or-loader[data-v-94138700]::after {\n  color: var(--c-neutral-6);\n}\n.or-icon-button.icon.neutral-6.disabled[data-v-94138700], .or-icon-button.icon.neutral-6.loading[data-v-94138700] {\n  color: var(--c-neutral-6-lighten-20);\n}\n.or-icon-button.icon.neutral-6.disabled[data-v-94138700] .or-icon, .or-icon-button.icon.neutral-6.loading[data-v-94138700] .or-icon {\n  color: var(--c-neutral-6-lighten-20);\n}\n.or-icon-button.floating[data-v-94138700] {\n  width: var(--or-icon-button-size);\n  height: var(--or-icon-button-size);\n  border-radius: var(--or-icon-button-size);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n  color: var(--c-white);\n}\n.or-icon-button.floating[data-v-94138700]:not(.size-small) {\n  --or-icon-button-font-size: 1.5rem;\n  --or-icon-button-loader-size: 1.25rem;\n  --or-icon-button-size: 3.5rem;\n}\n.or-icon-button.floating[data-v-94138700] .or-icon {\n  font-size: var(--or-icon-button-font-size);\n}\n.or-icon-button.floating .or-loader[data-v-94138700]::after,\n.or-icon-button.floating[data-v-94138700] .or-icon {\n  color: var(--c-white);\n}\n.or-icon-button.floating.primary[data-v-94138700] {\n  background-color: var(--c-primary);\n}\n.or-icon-button.floating.primary[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-primary-darken-3);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.2);\n}\n.or-icon-button.floating.primary[data-v-94138700]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-primary-darken-5);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.1);\n}\n.or-icon-button.floating.primary.disabled[data-v-94138700], .or-icon-button.floating.primary.loading[data-v-94138700] {\n  background-color: var(--c-primary-lighten-20);\n}\n.or-icon-button.floating.success[data-v-94138700] {\n  background-color: var(--c-success);\n}\n.or-icon-button.floating.success[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-success-darken-3);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.2);\n}\n.or-icon-button.floating.success[data-v-94138700]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-success-darken-5);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.1);\n}\n.or-icon-button.floating.success.disabled[data-v-94138700], .or-icon-button.floating.success.loading[data-v-94138700] {\n  background-color: var(--c-success-lighten-20);\n}\n.or-icon-button.floating.warning[data-v-94138700] {\n  background-color: var(--c-warning);\n}\n.or-icon-button.floating.warning[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-warning-darken-3);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.2);\n}\n.or-icon-button.floating.warning[data-v-94138700]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-warning-darken-5);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.1);\n}\n.or-icon-button.floating.warning.disabled[data-v-94138700], .or-icon-button.floating.warning.loading[data-v-94138700] {\n  background-color: var(--c-warning-lighten-20);\n}\n.or-icon-button.floating.error[data-v-94138700] {\n  background-color: var(--c-error);\n}\n.or-icon-button.floating.error[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-error-darken-3);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.2);\n}\n.or-icon-button.floating.error[data-v-94138700]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-error-darken-5);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.1);\n}\n.or-icon-button.floating.error.disabled[data-v-94138700], .or-icon-button.floating.error.loading[data-v-94138700] {\n  background-color: var(--c-error-lighten-20);\n}\n.or-icon-button.floating.neutral-0[data-v-94138700] {\n  background-color: var(--c-neutral-0);\n}\n.or-icon-button.floating.neutral-0[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-0-darken-3);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.2);\n}\n.or-icon-button.floating.neutral-0[data-v-94138700]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-0-darken-5);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.1);\n}\n.or-icon-button.floating.neutral-0.disabled[data-v-94138700], .or-icon-button.floating.neutral-0.loading[data-v-94138700] {\n  background-color: var(--c-neutral-0-lighten-20);\n}\n.or-icon-button.floating.neutral-3[data-v-94138700] {\n  background-color: var(--c-neutral-3);\n}\n.or-icon-button.floating.neutral-3[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-3-darken-3);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.2);\n}\n.or-icon-button.floating.neutral-3[data-v-94138700]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-3-darken-5);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.1);\n}\n.or-icon-button.floating.neutral-3.disabled[data-v-94138700], .or-icon-button.floating.neutral-3.loading[data-v-94138700] {\n  background-color: var(--c-neutral-3-lighten-20);\n}\n.or-icon-button.floating.neutral-4[data-v-94138700] {\n  background-color: var(--c-neutral-4);\n}\n.or-icon-button.floating.neutral-4[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-4-darken-3);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.2);\n}\n.or-icon-button.floating.neutral-4[data-v-94138700]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-4-darken-5);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.1);\n}\n.or-icon-button.floating.neutral-4.disabled[data-v-94138700], .or-icon-button.floating.neutral-4.loading[data-v-94138700] {\n  background-color: var(--c-neutral-4-lighten-20);\n}\n.or-icon-button.floating.neutral-5[data-v-94138700] {\n  background-color: var(--c-neutral-5);\n}\n.or-icon-button.floating.neutral-5[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-5-darken-3);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.2);\n}\n.or-icon-button.floating.neutral-5[data-v-94138700]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-5-darken-5);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.1);\n}\n.or-icon-button.floating.neutral-5.disabled[data-v-94138700], .or-icon-button.floating.neutral-5.loading[data-v-94138700] {\n  background-color: var(--c-neutral-5-lighten-20);\n}\n.or-icon-button.floating.neutral-6[data-v-94138700] {\n  background-color: var(--c-neutral-6);\n}\n.or-icon-button.floating.neutral-6[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-6-darken-3);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.2);\n}\n.or-icon-button.floating.neutral-6[data-v-94138700]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-6-darken-5);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.1);\n}\n.or-icon-button.floating.neutral-6.disabled[data-v-94138700], .or-icon-button.floating.neutral-6.loading[data-v-94138700] {\n  background-color: var(--c-neutral-6-lighten-20);\n}\n.or-icon-button.floating.is-primary-bg-color[data-v-94138700] {\n  background-color: var(--c-primary) !important;\n}\n.or-icon-button.floating.is-primary-bg-color[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-primary-darken-3) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.2) !important;\n}\n.or-icon-button.floating.is-primary-bg-color[data-v-94138700]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-primary-darken-5) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.1) !important;\n}\n.or-icon-button.floating.is-primary-bg-color.disabled[data-v-94138700], .or-icon-button.floating.is-primary-bg-color.loading[data-v-94138700] {\n  background-color: var(--c-primary-lighten-20) !important;\n}\n.or-icon-button.floating.is-success-bg-color[data-v-94138700] {\n  background-color: var(--c-success) !important;\n}\n.or-icon-button.floating.is-success-bg-color[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-success-darken-3) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.2) !important;\n}\n.or-icon-button.floating.is-success-bg-color[data-v-94138700]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-success-darken-5) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.1) !important;\n}\n.or-icon-button.floating.is-success-bg-color.disabled[data-v-94138700], .or-icon-button.floating.is-success-bg-color.loading[data-v-94138700] {\n  background-color: var(--c-success-lighten-20) !important;\n}\n.or-icon-button.floating.is-warning-bg-color[data-v-94138700] {\n  background-color: var(--c-warning) !important;\n}\n.or-icon-button.floating.is-warning-bg-color[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-warning-darken-3) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.2) !important;\n}\n.or-icon-button.floating.is-warning-bg-color[data-v-94138700]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-warning-darken-5) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.1) !important;\n}\n.or-icon-button.floating.is-warning-bg-color.disabled[data-v-94138700], .or-icon-button.floating.is-warning-bg-color.loading[data-v-94138700] {\n  background-color: var(--c-warning-lighten-20) !important;\n}\n.or-icon-button.floating.is-error-bg-color[data-v-94138700] {\n  background-color: var(--c-error) !important;\n}\n.or-icon-button.floating.is-error-bg-color[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-error-darken-3) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.2) !important;\n}\n.or-icon-button.floating.is-error-bg-color[data-v-94138700]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-error-darken-5) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.1) !important;\n}\n.or-icon-button.floating.is-error-bg-color.disabled[data-v-94138700], .or-icon-button.floating.is-error-bg-color.loading[data-v-94138700] {\n  background-color: var(--c-error-lighten-20) !important;\n}\n.or-icon-button.floating.is-neutral-0-bg-color[data-v-94138700] {\n  background-color: var(--c-neutral-0) !important;\n}\n.or-icon-button.floating.is-neutral-0-bg-color[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-0-darken-3) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.2) !important;\n}\n.or-icon-button.floating.is-neutral-0-bg-color[data-v-94138700]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-0-darken-5) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.1) !important;\n}\n.or-icon-button.floating.is-neutral-0-bg-color.disabled[data-v-94138700], .or-icon-button.floating.is-neutral-0-bg-color.loading[data-v-94138700] {\n  background-color: var(--c-neutral-0-lighten-20) !important;\n}\n.or-icon-button.floating.is-neutral-3-bg-color[data-v-94138700] {\n  background-color: var(--c-neutral-3) !important;\n}\n.or-icon-button.floating.is-neutral-3-bg-color[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-3-darken-3) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.2) !important;\n}\n.or-icon-button.floating.is-neutral-3-bg-color[data-v-94138700]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-3-darken-5) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.1) !important;\n}\n.or-icon-button.floating.is-neutral-3-bg-color.disabled[data-v-94138700], .or-icon-button.floating.is-neutral-3-bg-color.loading[data-v-94138700] {\n  background-color: var(--c-neutral-3-lighten-20) !important;\n}\n.or-icon-button.floating.is-neutral-4-bg-color[data-v-94138700] {\n  background-color: var(--c-neutral-4) !important;\n}\n.or-icon-button.floating.is-neutral-4-bg-color[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-4-darken-3) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.2) !important;\n}\n.or-icon-button.floating.is-neutral-4-bg-color[data-v-94138700]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-4-darken-5) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.1) !important;\n}\n.or-icon-button.floating.is-neutral-4-bg-color.disabled[data-v-94138700], .or-icon-button.floating.is-neutral-4-bg-color.loading[data-v-94138700] {\n  background-color: var(--c-neutral-4-lighten-20) !important;\n}\n.or-icon-button.floating.is-neutral-5-bg-color[data-v-94138700] {\n  background-color: var(--c-neutral-5) !important;\n}\n.or-icon-button.floating.is-neutral-5-bg-color[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-5-darken-3) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.2) !important;\n}\n.or-icon-button.floating.is-neutral-5-bg-color[data-v-94138700]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-5-darken-5) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.1) !important;\n}\n.or-icon-button.floating.is-neutral-5-bg-color.disabled[data-v-94138700], .or-icon-button.floating.is-neutral-5-bg-color.loading[data-v-94138700] {\n  background-color: var(--c-neutral-5-lighten-20) !important;\n}\n.or-icon-button.floating.is-neutral-6-bg-color[data-v-94138700] {\n  background-color: var(--c-neutral-6) !important;\n}\n.or-icon-button.floating.is-neutral-6-bg-color[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-6-darken-3) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.2) !important;\n}\n.or-icon-button.floating.is-neutral-6-bg-color[data-v-94138700]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-6-darken-5) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.1) !important;\n}\n.or-icon-button.floating.is-neutral-6-bg-color.disabled[data-v-94138700], .or-icon-button.floating.is-neutral-6-bg-color.loading[data-v-94138700] {\n  background-color: var(--c-neutral-6-lighten-20) !important;\n}\n.or-icon-button.is-primary-icon-color[data-v-94138700] {\n  color: var(--c-primary) !important;\n}\n.or-icon-button.is-primary-icon-color[data-v-94138700] .or-icon {\n  color: var(--c-primary) !important;\n}\n.or-icon-button.is-primary-icon-color[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  color: var(--c-primary-darken-3) !important;\n}\n.or-icon-button.is-primary-icon-color[data-v-94138700]:hover:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-primary-darken-3) !important;\n}\n.or-icon-button.is-primary-icon-color[data-v-94138700]:active:not(.disabled):not(.loading) {\n  color: var(--c-primary-darken-5) !important;\n}\n.or-icon-button.is-primary-icon-color[data-v-94138700]:active:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-primary-darken-5) !important;\n}\n.or-icon-button.is-primary-icon-color .or-loader[data-v-94138700]::after {\n  color: var(--c-primary) !important;\n}\n.or-icon-button.is-primary-icon-color.disabled[data-v-94138700], .or-icon-button.is-primary-icon-color.loading[data-v-94138700] {\n  color: var(--c-primary-lighten-20) !important;\n}\n.or-icon-button.is-primary-icon-color.disabled[data-v-94138700] .or-icon, .or-icon-button.is-primary-icon-color.loading[data-v-94138700] .or-icon {\n  color: var(--c-primary-lighten-20) !important;\n}\n.or-icon-button.is-success-icon-color[data-v-94138700] {\n  color: var(--c-success) !important;\n}\n.or-icon-button.is-success-icon-color[data-v-94138700] .or-icon {\n  color: var(--c-success) !important;\n}\n.or-icon-button.is-success-icon-color[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  color: var(--c-success-darken-3) !important;\n}\n.or-icon-button.is-success-icon-color[data-v-94138700]:hover:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-success-darken-3) !important;\n}\n.or-icon-button.is-success-icon-color[data-v-94138700]:active:not(.disabled):not(.loading) {\n  color: var(--c-success-darken-5) !important;\n}\n.or-icon-button.is-success-icon-color[data-v-94138700]:active:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-success-darken-5) !important;\n}\n.or-icon-button.is-success-icon-color .or-loader[data-v-94138700]::after {\n  color: var(--c-success) !important;\n}\n.or-icon-button.is-success-icon-color.disabled[data-v-94138700], .or-icon-button.is-success-icon-color.loading[data-v-94138700] {\n  color: var(--c-success-lighten-20) !important;\n}\n.or-icon-button.is-success-icon-color.disabled[data-v-94138700] .or-icon, .or-icon-button.is-success-icon-color.loading[data-v-94138700] .or-icon {\n  color: var(--c-success-lighten-20) !important;\n}\n.or-icon-button.is-warning-icon-color[data-v-94138700] {\n  color: var(--c-warning) !important;\n}\n.or-icon-button.is-warning-icon-color[data-v-94138700] .or-icon {\n  color: var(--c-warning) !important;\n}\n.or-icon-button.is-warning-icon-color[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  color: var(--c-warning-darken-3) !important;\n}\n.or-icon-button.is-warning-icon-color[data-v-94138700]:hover:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-warning-darken-3) !important;\n}\n.or-icon-button.is-warning-icon-color[data-v-94138700]:active:not(.disabled):not(.loading) {\n  color: var(--c-warning-darken-5) !important;\n}\n.or-icon-button.is-warning-icon-color[data-v-94138700]:active:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-warning-darken-5) !important;\n}\n.or-icon-button.is-warning-icon-color .or-loader[data-v-94138700]::after {\n  color: var(--c-warning) !important;\n}\n.or-icon-button.is-warning-icon-color.disabled[data-v-94138700], .or-icon-button.is-warning-icon-color.loading[data-v-94138700] {\n  color: var(--c-warning-lighten-20) !important;\n}\n.or-icon-button.is-warning-icon-color.disabled[data-v-94138700] .or-icon, .or-icon-button.is-warning-icon-color.loading[data-v-94138700] .or-icon {\n  color: var(--c-warning-lighten-20) !important;\n}\n.or-icon-button.is-error-icon-color[data-v-94138700] {\n  color: var(--c-error) !important;\n}\n.or-icon-button.is-error-icon-color[data-v-94138700] .or-icon {\n  color: var(--c-error) !important;\n}\n.or-icon-button.is-error-icon-color[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  color: var(--c-error-darken-3) !important;\n}\n.or-icon-button.is-error-icon-color[data-v-94138700]:hover:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-error-darken-3) !important;\n}\n.or-icon-button.is-error-icon-color[data-v-94138700]:active:not(.disabled):not(.loading) {\n  color: var(--c-error-darken-5) !important;\n}\n.or-icon-button.is-error-icon-color[data-v-94138700]:active:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-error-darken-5) !important;\n}\n.or-icon-button.is-error-icon-color .or-loader[data-v-94138700]::after {\n  color: var(--c-error) !important;\n}\n.or-icon-button.is-error-icon-color.disabled[data-v-94138700], .or-icon-button.is-error-icon-color.loading[data-v-94138700] {\n  color: var(--c-error-lighten-20) !important;\n}\n.or-icon-button.is-error-icon-color.disabled[data-v-94138700] .or-icon, .or-icon-button.is-error-icon-color.loading[data-v-94138700] .or-icon {\n  color: var(--c-error-lighten-20) !important;\n}\n.or-icon-button.is-neutral-0-icon-color[data-v-94138700] {\n  color: var(--c-neutral-0) !important;\n}\n.or-icon-button.is-neutral-0-icon-color[data-v-94138700] .or-icon {\n  color: var(--c-neutral-0) !important;\n}\n.or-icon-button.is-neutral-0-icon-color[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  color: var(--c-neutral-0-darken-3) !important;\n}\n.or-icon-button.is-neutral-0-icon-color[data-v-94138700]:hover:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-neutral-0-darken-3) !important;\n}\n.or-icon-button.is-neutral-0-icon-color[data-v-94138700]:active:not(.disabled):not(.loading) {\n  color: var(--c-neutral-0-darken-5) !important;\n}\n.or-icon-button.is-neutral-0-icon-color[data-v-94138700]:active:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-neutral-0-darken-5) !important;\n}\n.or-icon-button.is-neutral-0-icon-color .or-loader[data-v-94138700]::after {\n  color: var(--c-neutral-0) !important;\n}\n.or-icon-button.is-neutral-0-icon-color.disabled[data-v-94138700], .or-icon-button.is-neutral-0-icon-color.loading[data-v-94138700] {\n  color: var(--c-neutral-0-lighten-20) !important;\n}\n.or-icon-button.is-neutral-0-icon-color.disabled[data-v-94138700] .or-icon, .or-icon-button.is-neutral-0-icon-color.loading[data-v-94138700] .or-icon {\n  color: var(--c-neutral-0-lighten-20) !important;\n}\n.or-icon-button.is-neutral-3-icon-color[data-v-94138700] {\n  color: var(--c-neutral-3) !important;\n}\n.or-icon-button.is-neutral-3-icon-color[data-v-94138700] .or-icon {\n  color: var(--c-neutral-3) !important;\n}\n.or-icon-button.is-neutral-3-icon-color[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  color: var(--c-neutral-3-darken-3) !important;\n}\n.or-icon-button.is-neutral-3-icon-color[data-v-94138700]:hover:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-neutral-3-darken-3) !important;\n}\n.or-icon-button.is-neutral-3-icon-color[data-v-94138700]:active:not(.disabled):not(.loading) {\n  color: var(--c-neutral-3-darken-5) !important;\n}\n.or-icon-button.is-neutral-3-icon-color[data-v-94138700]:active:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-neutral-3-darken-5) !important;\n}\n.or-icon-button.is-neutral-3-icon-color .or-loader[data-v-94138700]::after {\n  color: var(--c-neutral-3) !important;\n}\n.or-icon-button.is-neutral-3-icon-color.disabled[data-v-94138700], .or-icon-button.is-neutral-3-icon-color.loading[data-v-94138700] {\n  color: var(--c-neutral-3-lighten-20) !important;\n}\n.or-icon-button.is-neutral-3-icon-color.disabled[data-v-94138700] .or-icon, .or-icon-button.is-neutral-3-icon-color.loading[data-v-94138700] .or-icon {\n  color: var(--c-neutral-3-lighten-20) !important;\n}\n.or-icon-button.is-neutral-4-icon-color[data-v-94138700] {\n  color: var(--c-neutral-4) !important;\n}\n.or-icon-button.is-neutral-4-icon-color[data-v-94138700] .or-icon {\n  color: var(--c-neutral-4) !important;\n}\n.or-icon-button.is-neutral-4-icon-color[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  color: var(--c-neutral-4-darken-3) !important;\n}\n.or-icon-button.is-neutral-4-icon-color[data-v-94138700]:hover:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-neutral-4-darken-3) !important;\n}\n.or-icon-button.is-neutral-4-icon-color[data-v-94138700]:active:not(.disabled):not(.loading) {\n  color: var(--c-neutral-4-darken-5) !important;\n}\n.or-icon-button.is-neutral-4-icon-color[data-v-94138700]:active:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-neutral-4-darken-5) !important;\n}\n.or-icon-button.is-neutral-4-icon-color .or-loader[data-v-94138700]::after {\n  color: var(--c-neutral-4) !important;\n}\n.or-icon-button.is-neutral-4-icon-color.disabled[data-v-94138700], .or-icon-button.is-neutral-4-icon-color.loading[data-v-94138700] {\n  color: var(--c-neutral-4-lighten-20) !important;\n}\n.or-icon-button.is-neutral-4-icon-color.disabled[data-v-94138700] .or-icon, .or-icon-button.is-neutral-4-icon-color.loading[data-v-94138700] .or-icon {\n  color: var(--c-neutral-4-lighten-20) !important;\n}\n.or-icon-button.is-neutral-5-icon-color[data-v-94138700] {\n  color: var(--c-neutral-5) !important;\n}\n.or-icon-button.is-neutral-5-icon-color[data-v-94138700] .or-icon {\n  color: var(--c-neutral-5) !important;\n}\n.or-icon-button.is-neutral-5-icon-color[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  color: var(--c-neutral-5-darken-3) !important;\n}\n.or-icon-button.is-neutral-5-icon-color[data-v-94138700]:hover:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-neutral-5-darken-3) !important;\n}\n.or-icon-button.is-neutral-5-icon-color[data-v-94138700]:active:not(.disabled):not(.loading) {\n  color: var(--c-neutral-5-darken-5) !important;\n}\n.or-icon-button.is-neutral-5-icon-color[data-v-94138700]:active:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-neutral-5-darken-5) !important;\n}\n.or-icon-button.is-neutral-5-icon-color .or-loader[data-v-94138700]::after {\n  color: var(--c-neutral-5) !important;\n}\n.or-icon-button.is-neutral-5-icon-color.disabled[data-v-94138700], .or-icon-button.is-neutral-5-icon-color.loading[data-v-94138700] {\n  color: var(--c-neutral-5-lighten-20) !important;\n}\n.or-icon-button.is-neutral-5-icon-color.disabled[data-v-94138700] .or-icon, .or-icon-button.is-neutral-5-icon-color.loading[data-v-94138700] .or-icon {\n  color: var(--c-neutral-5-lighten-20) !important;\n}\n.or-icon-button.is-neutral-6-icon-color[data-v-94138700] {\n  color: var(--c-neutral-6) !important;\n}\n.or-icon-button.is-neutral-6-icon-color[data-v-94138700] .or-icon {\n  color: var(--c-neutral-6) !important;\n}\n.or-icon-button.is-neutral-6-icon-color[data-v-94138700]:hover:not(.disabled):not(.loading) {\n  color: var(--c-neutral-6-darken-3) !important;\n}\n.or-icon-button.is-neutral-6-icon-color[data-v-94138700]:hover:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-neutral-6-darken-3) !important;\n}\n.or-icon-button.is-neutral-6-icon-color[data-v-94138700]:active:not(.disabled):not(.loading) {\n  color: var(--c-neutral-6-darken-5) !important;\n}\n.or-icon-button.is-neutral-6-icon-color[data-v-94138700]:active:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-neutral-6-darken-5) !important;\n}\n.or-icon-button.is-neutral-6-icon-color .or-loader[data-v-94138700]::after {\n  color: var(--c-neutral-6) !important;\n}\n.or-icon-button.is-neutral-6-icon-color.disabled[data-v-94138700], .or-icon-button.is-neutral-6-icon-color.loading[data-v-94138700] {\n  color: var(--c-neutral-6-lighten-20) !important;\n}\n.or-icon-button.is-neutral-6-icon-color.disabled[data-v-94138700] .or-icon, .or-icon-button.is-neutral-6-icon-color.loading[data-v-94138700] .or-icon {\n  color: var(--c-neutral-6-lighten-20) !important;\n}\n.or-icon-button .or-loader[data-v-94138700]::after {\n  width: var(--or-icon-button-loader-size);\n  height: var(--or-icon-button-loader-size);\n}";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-94138700";
+script.__file = "src/components/or-icon-button-v2/OrIconButton.vue";
+
+export { script as default };

package/dist/bundled/v3/components/OrIconButtonV2/OrIconButton.vue.d.ts

@@ -0,0 +1,106 @@
+import { PropType } from 'vue-demi';
+import { OrFloatingPlacements } from '../or-floating';
+import { BUTTON_COLOR, BUTTON_SIZE, HTML_BUTTON_TYPE, ICON_BUTTON_TYPE } from '../or-button-v2/constants';
+declare const _default: import("vue-demi").DefineComponent<{
+    icon: {
+        type: StringConstructor;
+        required: true;
+    };
+    color: {
+        type: PropType<BUTTON_COLOR>;
+        default: null;
+    };
+    iconColor: {
+        type: PropType<BUTTON_COLOR>;
+        default: null;
+    };
+    bgColor: {
+        type: PropType<BUTTON_COLOR>;
+        default: null;
+    };
+    type: {
+        type: PropType<ICON_BUTTON_TYPE>;
+        default: ICON_BUTTON_TYPE;
+    };
+    htmlButtonType: {
+        type: PropType<HTML_BUTTON_TYPE>;
+        default: HTML_BUTTON_TYPE;
+        required: false;
+    };
+    tooltipText: {
+        type: StringConstructor;
+        default: string;
+    };
+    tooltipPlacement: {
+        type: PropType<OrFloatingPlacements>;
+        default: OrFloatingPlacements;
+    };
+    isLoading: BooleanConstructor;
+    isDisabled: BooleanConstructor;
+    size: {
+        type: PropType<BUTTON_SIZE>;
+        default: BUTTON_SIZE;
+    };
+}, {
+    isVue3: boolean;
+}, unknown, {
+    buttonClasses(): Record<string, boolean>;
+}, {
+    handleButtonClick(event: MouseEvent): void;
+}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("click" | "focus" | "blur")[], "click" | "focus" | "blur", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+        required: true;
+    };
+    color: {
+        type: PropType<BUTTON_COLOR>;
+        default: null;
+    };
+    iconColor: {
+        type: PropType<BUTTON_COLOR>;
+        default: null;
+    };
+    bgColor: {
+        type: PropType<BUTTON_COLOR>;
+        default: null;
+    };
+    type: {
+        type: PropType<ICON_BUTTON_TYPE>;
+        default: ICON_BUTTON_TYPE;
+    };
+    htmlButtonType: {
+        type: PropType<HTML_BUTTON_TYPE>;
+        default: HTML_BUTTON_TYPE;
+        required: false;
+    };
+    tooltipText: {
+        type: StringConstructor;
+        default: string;
+    };
+    tooltipPlacement: {
+        type: PropType<OrFloatingPlacements>;
+        default: OrFloatingPlacements;
+    };
+    isLoading: BooleanConstructor;
+    isDisabled: BooleanConstructor;
+    size: {
+        type: PropType<BUTTON_SIZE>;
+        default: BUTTON_SIZE;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+}, {
+    color: BUTTON_COLOR;
+    iconColor: BUTTON_COLOR;
+    bgColor: BUTTON_COLOR;
+    type: ICON_BUTTON_TYPE;
+    htmlButtonType: HTML_BUTTON_TYPE;
+    tooltipText: string;
+    tooltipPlacement: OrFloatingPlacements;
+    isLoading: boolean;
+    isDisabled: boolean;
+    size: BUTTON_SIZE;
+}>;
+export default _default;

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

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

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

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

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

@@ -0,0 +1 @@
+export { s as default } from '../OrIconButtonV3-691e3bcd.js';

package/dist/bundled/v3/components/OrIconButtonV3/OrIconButton.vue.d.ts

@@ -0,0 +1,82 @@
+import { PropType } from 'vue-demi';
+import { IconVariant } from '../or-icon-v3';
+import { IconButtonColor, IconButtonSize } from './props';
+declare const _default: import("vue-demi").DefineComponent<{
+    additionalStyles: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    icon: {
+        type: PropType<string | Omit<any, "size">>;
+        required: true;
+    };
+    color: {
+        type: PropType<"default" | "primary" | "danger" | "inherit">;
+        default: IconButtonColor;
+    };
+    size: {
+        type: PropType<"inherit" | "xl" | "l" | "m">;
+        default: IconButtonSize;
+    };
+    selected: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltip: {
+        type: PropType<any>;
+        default: undefined;
+    };
+}, {
+    root: import("vue-demi").Ref<HTMLButtonElement | undefined>;
+    rootStyles: import("vue-demi").ComputedRef<string[]>;
+    isVue3: boolean;
+    iconProps: import("vue-demi").ComputedRef<{
+        size: "inherit" | "xl" | "l" | "m";
+        variant: IconVariant;
+    }>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("click" | "focus" | "blur")[], "click" | "focus" | "blur", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    additionalStyles: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    icon: {
+        type: PropType<string | Omit<any, "size">>;
+        required: true;
+    };
+    color: {
+        type: PropType<"default" | "primary" | "danger" | "inherit">;
+        default: IconButtonColor;
+    };
+    size: {
+        type: PropType<"inherit" | "xl" | "l" | "m">;
+        default: IconButtonSize;
+    };
+    selected: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltip: {
+        type: PropType<any>;
+        default: undefined;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+}, {
+    size: "inherit" | "xl" | "l" | "m";
+    additionalStyles: string[];
+    color: "default" | "primary" | "danger" | "inherit";
+    selected: boolean;
+    disabled: boolean;
+    tooltip: any;
+}>;
+export default _default;

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

@@ -0,0 +1,2 @@
+export { default as OrIconButtonV3 } from './OrIconButton.vue';
+export * from './props';

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

@@ -0,0 +1,2 @@
+export { I as IconButtonColor, s as OrIconButtonV3 } from '../OrIconButtonV3-691e3bcd.js';
+export { I as IconButtonSize } from '../OrIconV3-85d7d26b.js';

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

@@ -0,0 +1,7 @@
+export declare enum IconButtonColor {
+    Default = "default",
+    Primary = "primary",
+    Danger = "danger",
+    Inherit = "inherit"
+}
+export { IconSize as IconButtonSize } from '../or-icon-v3';

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

@@ -0,0 +1,2 @@
+export { I as IconButtonSize } from '../OrIconV3-85d7d26b.js';
+export { I as IconButtonColor } from '../OrIconButtonV3-691e3bcd.js';

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

@@ -0,0 +1,3 @@
+import { IconButtonColor } from './props';
+export declare const IconButton: string[];
+export declare const IconButtonColors: Record<IconButtonColor, string[]>;

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

@@ -0,0 +1 @@
+export { a as IconButton, b as IconButtonColors } from '../OrIconButtonV3-691e3bcd.js';

package/dist/bundled/v3/components/OrIconButtonV3-691e3bcd.js

@@ -0,0 +1,181 @@
+import { resolveComponent, openBlock, createBlock, normalizeProps, guardReactiveProps, createSlots, withCtx, createElementVNode, mergeProps, toHandlers, createVNode, renderSlot } from 'vue';
+import { s as script$1, I as IconSize, a as IconVariant } from './OrIconV3-85d7d26b.js';
+import { defineComponent, ref, toRefs, computed, isVue3 } from 'vue-demi';
+import { s as script$2 } from './OrTooltipV3-7d835c0c.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: script$1,
+    OrTooltip: script$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
+    };
+  }
+});
+
+const _hoisted_1 = ["selected", "disabled"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrIcon = resolveComponent("OrIcon");
+  const _component_OrTooltip = resolveComponent("OrTooltip");
+  return openBlock(), createBlock(_component_OrTooltip, normalizeProps(guardReactiveProps(typeof _ctx.tooltip === 'string' ? {
+    content: _ctx.tooltip
+  } : _ctx.tooltip)), createSlots({
+    default: withCtx(() => [createElementVNode("button", mergeProps({
+      ref: "root"
+    }, _ctx.$attrs, {
+      class: [_ctx.rootStyles, ..._ctx.additionalStyles],
+      type: 'button',
+      selected: _ctx.selected ? '' : null,
+      disabled: _ctx.disabled
+    }, toHandlers({
+      ...(_ctx.isVue3 ? {} : _ctx.$listeners),
+      click: e => _ctx.$emit('click', e),
+      focus: e => _ctx.$emit('focus', e),
+      blur: e => _ctx.$emit('blur', e)
+    }, true)), [createVNode(_component_OrIcon, normalizeProps(guardReactiveProps(_ctx.iconProps)), null, 16 /* FULL_PROPS */)], 16 /* FULL_PROPS */, _hoisted_1)]),
+    _: 2 /* DYNAMIC */
+  }, [_ctx.$slots.tooltipContent ? {
+    name: "content",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, "tooltipContent")]),
+    key: "0"
+  } : undefined]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */);
+}
+
+script.render = render;
+script.__file = "src/components/or-icon-button-v3/OrIconButton.vue";
+
+export { IconButtonColor as I, IconButton as a, IconButtonColors as b, script as s };