@onereach/ui-components 2.65.2-beta.1975.0 → 2.66.0

package/dist/bundled/v3/OrIcon.vue_vue_type_script_lang-41a6a57a.js

@@ -0,0 +1,96 @@
+import { defineComponent, ref, computed } from 'vue';
+import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
+
+var IconVariant;
+(function (IconVariant) {
+  IconVariant["Outlined"] = "outlined";
+  IconVariant["OutlinedBold"] = "outlined-bold";
+  IconVariant["Filled"] = "filled";
+  IconVariant["FilledBold"] = "filled-bold";
+  IconVariant["Inherit"] = "inherit";
+})(IconVariant || (IconVariant = {}));
+var IconSize;
+(function (IconSize) {
+  IconSize["XL"] = "xl";
+  IconSize["L"] = "l";
+  IconSize["M"] = "m";
+  IconSize["Inherit"] = "inherit";
+})(IconSize || (IconSize = {}));
+
+const IconRoot = [
+// Layout
+'inline-flex', 'items-center', 'justify-center',
+// Typography
+'align-bottom'];
+const IconRootVariants = {
+  'outlined': [
+  // Iconography
+  'iconography-outlined'],
+  'outlined-bold': [
+  // Iconography
+  'iconography-outlined-bold'],
+  'filled': [
+  // Iconography
+  'iconography-filled'],
+  'filled-bold': [
+  // Iconography
+  'iconography-filled-bold'],
+  'inherit': [
+  // Iconography
+  'iconography-inherit']
+};
+const IconRootSizes = {
+  'xl': [
+  // Box
+  'w-[36px] md:w-[32px]', 'h-[36px] md:h-[32px]',
+  // Typography
+  'text-[32px] md:text-[28px]'],
+  'l': [
+  // Box
+  'w-[28px] md:w-[24px]', 'h-[28px] md:h-[24px]',
+  // Typography
+  'text-[24px] md:text-[20px]'],
+  'm': [
+  // Box
+  'w-[24px] md:w-[20px]', 'h-[24px] md:h-[20px]',
+  // Typography
+  'text-[20px] md:text-[16px]'],
+  'inherit': [
+  // Box
+  'w-full', 'h-full',
+  // Typography
+  'text-inherit']
+};
+
+var script = defineComponent({
+  name: 'OrIcon',
+  inheritAttrs: false,
+  props: {
+    icon: {
+      type: String,
+      required: true
+    },
+    variant: {
+      type: String,
+      default: IconVariant.Outlined
+    },
+    size: {
+      type: String,
+      default: IconSize.M
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs
+    const root = ref();
+    // Styles
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-icon', ...IconRoot, ...IconRootVariants[props.variant], ...IconRootSizes[props.size], classAttribute.value]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+export { IconVariant as I, IconSize as a, script as s };

package/dist/bundled/v3/OrIcon.vue_vue_type_script_lang-7e3a17fe.js

@@ -0,0 +1,115 @@
+import { defineComponent, ref } from 'vue';
+import _ from 'lodash';
+import { p as pxToRem } from './px-to-rem-0b26b83e.js';
+import { s as script$1 } from './OrTooltipContent-b0dcb862.js';
+import './OrFloating-b6672a37.js';
+import { s as script$2, O as OrFloatingPlacements } from './OrFloating.vue_vue_type_script_lang-8bf2b7ae.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: script$1,
+    OrFloating: script$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() {
+      return _.omit(this.$attrs, 'class');
+    }
+  },
+  methods: {
+    showTooltip() {
+      this.tooltipIsShown = true;
+    },
+    hideTooltip() {
+      this.tooltipIsShown = false;
+    }
+  }
+});
+
+export { OrIconColors as O, OrIconType as a, script as s };

package/dist/bundled/v3/OrIconButton-60d6d892.js

@@ -0,0 +1,30 @@
+import { s as script } from './OrIconButton.vue_vue_type_script_lang-0453a94c.js';
+import { resolveComponent, openBlock, createBlock, normalizeProps, guardReactiveProps, withCtx, createElementVNode, mergeProps, createVNode } from 'vue';
+
+const _hoisted_1 = ["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' ? {
+    text: _ctx.tooltip
+  } : _ctx.tooltip)), {
+    default: withCtx(() => [createElementVNode("button", mergeProps({
+      ref: "root"
+    }, _ctx.$attrs, {
+      class: _ctx.rootStyles,
+      type: 'button',
+      disabled: _ctx.disabled,
+      onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('click', $event)),
+      onFocus: _cache[1] || (_cache[1] = $event => _ctx.$emit('focus', $event)),
+      onBlur: _cache[2] || (_cache[2] = $event => _ctx.$emit('blur', $event))
+    }), [createVNode(_component_OrIcon, mergeProps({
+      variant: 'inherit'
+    }, typeof _ctx.icon === 'string' ? {
+      icon: _ctx.icon
+    } : _ctx.icon), null, 16 /* FULL_PROPS */)], 16 /* FULL_PROPS */, _hoisted_1)]),
+    _: 1 /* STABLE */
+  }, 16 /* FULL_PROPS */);
+}
+
+script.render = render;
+script.__file = "src/components/or-icon-button-v3/OrIconButton.vue";

package/dist/bundled/v3/OrIconButton-e637158e.js

@@ -0,0 +1,40 @@
+import { s as script } from './OrIconButton.vue_vue_type_script_lang-40547ab0.js';
+import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, normalizeClass, createBlock, createCommentVNode, renderSlot } from 'vue';
+import { s as styleInject } from './style-inject.es-4c6f2515.js';
+
+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", {
+      class: normalizeClass(["or-icon-button", _ctx.buttonClasses]),
+      disabled: _ctx.isDisabled,
+      type: _ctx.htmlButtonType,
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleButtonClick && _ctx.handleButtonClick(...args)),
+      onFocus: _cache[1] || (_cache[1] = $event => _ctx.$emit('focus', $event)),
+      onBlur: _cache[2] || (_cache[2] = $event => _ctx.$emit('blur', $event))
+    }, [_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)], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _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-32fab2d0 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-32fab2d0 {\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-32fab2d0] {\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-32fab2d0] {\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-32fab2d0] {\n  cursor: not-allowed;\n}\n.or-icon-button.loading[data-v-32fab2d0] {\n  cursor: progress;\n}\n.or-icon-button.size-small[data-v-32fab2d0] {\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-32fab2d0] .or-icon {\n  font-size: var(--or-icon-button-font-size);\n}\n.or-icon-button.icon.primary[data-v-32fab2d0] {\n  color: var(--c-primary);\n}\n.or-icon-button.icon.primary[data-v-32fab2d0] .or-icon {\n  color: var(--c-primary);\n}\n.or-icon-button.icon.primary[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  color: var(--c-primary-darken-20);\n}\n.or-icon-button.icon.primary[data-v-32fab2d0]:hover:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-primary-darken-20);\n}\n.or-icon-button.icon.primary[data-v-32fab2d0]:active:not(.disabled):not(.loading) {\n  color: var(--c-primary-darken-25);\n}\n.or-icon-button.icon.primary[data-v-32fab2d0]: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-32fab2d0]::after {\n  color: var(--c-primary);\n}\n.or-icon-button.icon.primary.disabled[data-v-32fab2d0], .or-icon-button.icon.primary.loading[data-v-32fab2d0] {\n  color: var(--c-primary-lighten-20);\n}\n.or-icon-button.icon.primary.disabled[data-v-32fab2d0] .or-icon, .or-icon-button.icon.primary.loading[data-v-32fab2d0] .or-icon {\n  color: var(--c-primary-lighten-20);\n}\n.or-icon-button.icon.success[data-v-32fab2d0] {\n  color: var(--c-success);\n}\n.or-icon-button.icon.success[data-v-32fab2d0] .or-icon {\n  color: var(--c-success);\n}\n.or-icon-button.icon.success[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  color: var(--c-success-darken-20);\n}\n.or-icon-button.icon.success[data-v-32fab2d0]:hover:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-success-darken-20);\n}\n.or-icon-button.icon.success[data-v-32fab2d0]:active:not(.disabled):not(.loading) {\n  color: var(--c-success-darken-25);\n}\n.or-icon-button.icon.success[data-v-32fab2d0]: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-32fab2d0]::after {\n  color: var(--c-success);\n}\n.or-icon-button.icon.success.disabled[data-v-32fab2d0], .or-icon-button.icon.success.loading[data-v-32fab2d0] {\n  color: var(--c-success-lighten-20);\n}\n.or-icon-button.icon.success.disabled[data-v-32fab2d0] .or-icon, .or-icon-button.icon.success.loading[data-v-32fab2d0] .or-icon {\n  color: var(--c-success-lighten-20);\n}\n.or-icon-button.icon.warning[data-v-32fab2d0] {\n  color: var(--c-warning);\n}\n.or-icon-button.icon.warning[data-v-32fab2d0] .or-icon {\n  color: var(--c-warning);\n}\n.or-icon-button.icon.warning[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  color: var(--c-warning-darken-20);\n}\n.or-icon-button.icon.warning[data-v-32fab2d0]:hover:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-warning-darken-20);\n}\n.or-icon-button.icon.warning[data-v-32fab2d0]:active:not(.disabled):not(.loading) {\n  color: var(--c-warning-darken-25);\n}\n.or-icon-button.icon.warning[data-v-32fab2d0]: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-32fab2d0]::after {\n  color: var(--c-warning);\n}\n.or-icon-button.icon.warning.disabled[data-v-32fab2d0], .or-icon-button.icon.warning.loading[data-v-32fab2d0] {\n  color: var(--c-warning-lighten-20);\n}\n.or-icon-button.icon.warning.disabled[data-v-32fab2d0] .or-icon, .or-icon-button.icon.warning.loading[data-v-32fab2d0] .or-icon {\n  color: var(--c-warning-lighten-20);\n}\n.or-icon-button.icon.error[data-v-32fab2d0] {\n  color: var(--c-error);\n}\n.or-icon-button.icon.error[data-v-32fab2d0] .or-icon {\n  color: var(--c-error);\n}\n.or-icon-button.icon.error[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  color: var(--c-error-darken-20);\n}\n.or-icon-button.icon.error[data-v-32fab2d0]:hover:not(.disabled):not(.loading) .or-icon {\n  color: var(--c-error-darken-20);\n}\n.or-icon-button.icon.error[data-v-32fab2d0]:active:not(.disabled):not(.loading) {\n  color: var(--c-error-darken-25);\n}\n.or-icon-button.icon.error[data-v-32fab2d0]: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-32fab2d0]::after {\n  color: var(--c-error);\n}\n.or-icon-button.icon.error.disabled[data-v-32fab2d0], .or-icon-button.icon.error.loading[data-v-32fab2d0] {\n  color: var(--c-error-lighten-20);\n}\n.or-icon-button.icon.error.disabled[data-v-32fab2d0] .or-icon, .or-icon-button.icon.error.loading[data-v-32fab2d0] .or-icon {\n  color: var(--c-error-lighten-20);\n}\n.or-icon-button.icon.neutral-0[data-v-32fab2d0] {\n  color: var(--c-neutral-0);\n}\n.or-icon-button.icon.neutral-0[data-v-32fab2d0] .or-icon {\n  color: var(--c-neutral-0);\n}\n.or-icon-button.icon.neutral-0[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  color: var(--c-neutral-0-darken-20);\n}\n.or-icon-button.icon.neutral-0[data-v-32fab2d0]: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-32fab2d0]:active:not(.disabled):not(.loading) {\n  color: var(--c-neutral-0-darken-25);\n}\n.or-icon-button.icon.neutral-0[data-v-32fab2d0]: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-32fab2d0]::after {\n  color: var(--c-neutral-0);\n}\n.or-icon-button.icon.neutral-0.disabled[data-v-32fab2d0], .or-icon-button.icon.neutral-0.loading[data-v-32fab2d0] {\n  color: var(--c-neutral-0-lighten-20);\n}\n.or-icon-button.icon.neutral-0.disabled[data-v-32fab2d0] .or-icon, .or-icon-button.icon.neutral-0.loading[data-v-32fab2d0] .or-icon {\n  color: var(--c-neutral-0-lighten-20);\n}\n.or-icon-button.icon.neutral-3[data-v-32fab2d0] {\n  color: var(--c-neutral-3);\n}\n.or-icon-button.icon.neutral-3[data-v-32fab2d0] .or-icon {\n  color: var(--c-neutral-3);\n}\n.or-icon-button.icon.neutral-3[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  color: var(--c-neutral-3-darken-20);\n}\n.or-icon-button.icon.neutral-3[data-v-32fab2d0]: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-32fab2d0]:active:not(.disabled):not(.loading) {\n  color: var(--c-neutral-3-darken-25);\n}\n.or-icon-button.icon.neutral-3[data-v-32fab2d0]: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-32fab2d0]::after {\n  color: var(--c-neutral-3);\n}\n.or-icon-button.icon.neutral-3.disabled[data-v-32fab2d0], .or-icon-button.icon.neutral-3.loading[data-v-32fab2d0] {\n  color: var(--c-neutral-3-lighten-20);\n}\n.or-icon-button.icon.neutral-3.disabled[data-v-32fab2d0] .or-icon, .or-icon-button.icon.neutral-3.loading[data-v-32fab2d0] .or-icon {\n  color: var(--c-neutral-3-lighten-20);\n}\n.or-icon-button.icon.neutral-4[data-v-32fab2d0] {\n  color: var(--c-neutral-4);\n}\n.or-icon-button.icon.neutral-4[data-v-32fab2d0] .or-icon {\n  color: var(--c-neutral-4);\n}\n.or-icon-button.icon.neutral-4[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  color: var(--c-neutral-4-darken-20);\n}\n.or-icon-button.icon.neutral-4[data-v-32fab2d0]: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-32fab2d0]:active:not(.disabled):not(.loading) {\n  color: var(--c-neutral-4-darken-25);\n}\n.or-icon-button.icon.neutral-4[data-v-32fab2d0]: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-32fab2d0]::after {\n  color: var(--c-neutral-4);\n}\n.or-icon-button.icon.neutral-4.disabled[data-v-32fab2d0], .or-icon-button.icon.neutral-4.loading[data-v-32fab2d0] {\n  color: var(--c-neutral-4-lighten-20);\n}\n.or-icon-button.icon.neutral-4.disabled[data-v-32fab2d0] .or-icon, .or-icon-button.icon.neutral-4.loading[data-v-32fab2d0] .or-icon {\n  color: var(--c-neutral-4-lighten-20);\n}\n.or-icon-button.icon.neutral-5[data-v-32fab2d0] {\n  color: var(--c-neutral-5);\n}\n.or-icon-button.icon.neutral-5[data-v-32fab2d0] .or-icon {\n  color: var(--c-neutral-5);\n}\n.or-icon-button.icon.neutral-5[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  color: var(--c-neutral-5-darken-20);\n}\n.or-icon-button.icon.neutral-5[data-v-32fab2d0]: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-32fab2d0]:active:not(.disabled):not(.loading) {\n  color: var(--c-neutral-5-darken-25);\n}\n.or-icon-button.icon.neutral-5[data-v-32fab2d0]: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-32fab2d0]::after {\n  color: var(--c-neutral-5);\n}\n.or-icon-button.icon.neutral-5.disabled[data-v-32fab2d0], .or-icon-button.icon.neutral-5.loading[data-v-32fab2d0] {\n  color: var(--c-neutral-5-lighten-20);\n}\n.or-icon-button.icon.neutral-5.disabled[data-v-32fab2d0] .or-icon, .or-icon-button.icon.neutral-5.loading[data-v-32fab2d0] .or-icon {\n  color: var(--c-neutral-5-lighten-20);\n}\n.or-icon-button.icon.neutral-6[data-v-32fab2d0] {\n  color: var(--c-neutral-6);\n}\n.or-icon-button.icon.neutral-6[data-v-32fab2d0] .or-icon {\n  color: var(--c-neutral-6);\n}\n.or-icon-button.icon.neutral-6[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  color: var(--c-neutral-6-darken-20);\n}\n.or-icon-button.icon.neutral-6[data-v-32fab2d0]: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-32fab2d0]:active:not(.disabled):not(.loading) {\n  color: var(--c-neutral-6-darken-25);\n}\n.or-icon-button.icon.neutral-6[data-v-32fab2d0]: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-32fab2d0]::after {\n  color: var(--c-neutral-6);\n}\n.or-icon-button.icon.neutral-6.disabled[data-v-32fab2d0], .or-icon-button.icon.neutral-6.loading[data-v-32fab2d0] {\n  color: var(--c-neutral-6-lighten-20);\n}\n.or-icon-button.icon.neutral-6.disabled[data-v-32fab2d0] .or-icon, .or-icon-button.icon.neutral-6.loading[data-v-32fab2d0] .or-icon {\n  color: var(--c-neutral-6-lighten-20);\n}\n.or-icon-button.floating[data-v-32fab2d0] {\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-32fab2d0]: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-32fab2d0] .or-icon {\n  font-size: var(--or-icon-button-font-size);\n}\n.or-icon-button.floating .or-loader[data-v-32fab2d0]::after,\n.or-icon-button.floating[data-v-32fab2d0] .or-icon {\n  color: var(--c-white);\n}\n.or-icon-button.floating.primary[data-v-32fab2d0] {\n  background-color: var(--c-primary);\n}\n.or-icon-button.floating.primary[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-primary-darken-3);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.2);\n}\n.or-icon-button.floating.primary[data-v-32fab2d0]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-primary-darken-5);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.1);\n}\n.or-icon-button.floating.primary.disabled[data-v-32fab2d0], .or-icon-button.floating.primary.loading[data-v-32fab2d0] {\n  background-color: var(--c-primary-lighten-20);\n}\n.or-icon-button.floating.success[data-v-32fab2d0] {\n  background-color: var(--c-success);\n}\n.or-icon-button.floating.success[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-success-darken-3);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.2);\n}\n.or-icon-button.floating.success[data-v-32fab2d0]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-success-darken-5);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.1);\n}\n.or-icon-button.floating.success.disabled[data-v-32fab2d0], .or-icon-button.floating.success.loading[data-v-32fab2d0] {\n  background-color: var(--c-success-lighten-20);\n}\n.or-icon-button.floating.warning[data-v-32fab2d0] {\n  background-color: var(--c-warning);\n}\n.or-icon-button.floating.warning[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-warning-darken-3);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.2);\n}\n.or-icon-button.floating.warning[data-v-32fab2d0]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-warning-darken-5);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.1);\n}\n.or-icon-button.floating.warning.disabled[data-v-32fab2d0], .or-icon-button.floating.warning.loading[data-v-32fab2d0] {\n  background-color: var(--c-warning-lighten-20);\n}\n.or-icon-button.floating.error[data-v-32fab2d0] {\n  background-color: var(--c-error);\n}\n.or-icon-button.floating.error[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-error-darken-3);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.2);\n}\n.or-icon-button.floating.error[data-v-32fab2d0]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-error-darken-5);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.1);\n}\n.or-icon-button.floating.error.disabled[data-v-32fab2d0], .or-icon-button.floating.error.loading[data-v-32fab2d0] {\n  background-color: var(--c-error-lighten-20);\n}\n.or-icon-button.floating.neutral-0[data-v-32fab2d0] {\n  background-color: var(--c-neutral-0);\n}\n.or-icon-button.floating.neutral-0[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-0-darken-3);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.2);\n}\n.or-icon-button.floating.neutral-0[data-v-32fab2d0]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-0-darken-5);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.1);\n}\n.or-icon-button.floating.neutral-0.disabled[data-v-32fab2d0], .or-icon-button.floating.neutral-0.loading[data-v-32fab2d0] {\n  background-color: var(--c-neutral-0-lighten-20);\n}\n.or-icon-button.floating.neutral-3[data-v-32fab2d0] {\n  background-color: var(--c-neutral-3);\n}\n.or-icon-button.floating.neutral-3[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-3-darken-3);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.2);\n}\n.or-icon-button.floating.neutral-3[data-v-32fab2d0]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-3-darken-5);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.1);\n}\n.or-icon-button.floating.neutral-3.disabled[data-v-32fab2d0], .or-icon-button.floating.neutral-3.loading[data-v-32fab2d0] {\n  background-color: var(--c-neutral-3-lighten-20);\n}\n.or-icon-button.floating.neutral-4[data-v-32fab2d0] {\n  background-color: var(--c-neutral-4);\n}\n.or-icon-button.floating.neutral-4[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-4-darken-3);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.2);\n}\n.or-icon-button.floating.neutral-4[data-v-32fab2d0]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-4-darken-5);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.1);\n}\n.or-icon-button.floating.neutral-4.disabled[data-v-32fab2d0], .or-icon-button.floating.neutral-4.loading[data-v-32fab2d0] {\n  background-color: var(--c-neutral-4-lighten-20);\n}\n.or-icon-button.floating.neutral-5[data-v-32fab2d0] {\n  background-color: var(--c-neutral-5);\n}\n.or-icon-button.floating.neutral-5[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-5-darken-3);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.2);\n}\n.or-icon-button.floating.neutral-5[data-v-32fab2d0]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-5-darken-5);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.1);\n}\n.or-icon-button.floating.neutral-5.disabled[data-v-32fab2d0], .or-icon-button.floating.neutral-5.loading[data-v-32fab2d0] {\n  background-color: var(--c-neutral-5-lighten-20);\n}\n.or-icon-button.floating.neutral-6[data-v-32fab2d0] {\n  background-color: var(--c-neutral-6);\n}\n.or-icon-button.floating.neutral-6[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-6-darken-3);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.2);\n}\n.or-icon-button.floating.neutral-6[data-v-32fab2d0]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-neutral-6-darken-5);\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.1);\n}\n.or-icon-button.floating.neutral-6.disabled[data-v-32fab2d0], .or-icon-button.floating.neutral-6.loading[data-v-32fab2d0] {\n  background-color: var(--c-neutral-6-lighten-20);\n}\n.or-icon-button.floating.is-primary-bg-color[data-v-32fab2d0] {\n  background-color: var(--c-primary) !important;\n}\n.or-icon-button.floating.is-primary-bg-color[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-primary-darken-3) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.2) !important;\n}\n.or-icon-button.floating.is-primary-bg-color[data-v-32fab2d0]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-primary-darken-5) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.1) !important;\n}\n.or-icon-button.floating.is-primary-bg-color.disabled[data-v-32fab2d0], .or-icon-button.floating.is-primary-bg-color.loading[data-v-32fab2d0] {\n  background-color: var(--c-primary-lighten-20) !important;\n}\n.or-icon-button.floating.is-success-bg-color[data-v-32fab2d0] {\n  background-color: var(--c-success) !important;\n}\n.or-icon-button.floating.is-success-bg-color[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-success-darken-3) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.2) !important;\n}\n.or-icon-button.floating.is-success-bg-color[data-v-32fab2d0]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-success-darken-5) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.1) !important;\n}\n.or-icon-button.floating.is-success-bg-color.disabled[data-v-32fab2d0], .or-icon-button.floating.is-success-bg-color.loading[data-v-32fab2d0] {\n  background-color: var(--c-success-lighten-20) !important;\n}\n.or-icon-button.floating.is-warning-bg-color[data-v-32fab2d0] {\n  background-color: var(--c-warning) !important;\n}\n.or-icon-button.floating.is-warning-bg-color[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-warning-darken-3) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.2) !important;\n}\n.or-icon-button.floating.is-warning-bg-color[data-v-32fab2d0]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-warning-darken-5) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.1) !important;\n}\n.or-icon-button.floating.is-warning-bg-color.disabled[data-v-32fab2d0], .or-icon-button.floating.is-warning-bg-color.loading[data-v-32fab2d0] {\n  background-color: var(--c-warning-lighten-20) !important;\n}\n.or-icon-button.floating.is-error-bg-color[data-v-32fab2d0] {\n  background-color: var(--c-error) !important;\n}\n.or-icon-button.floating.is-error-bg-color[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  background-color: var(--c-error-darken-3) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.2) !important;\n}\n.or-icon-button.floating.is-error-bg-color[data-v-32fab2d0]:active:not(.disabled):not(.loading) {\n  background-color: var(--c-error-darken-5) !important;\n  box-shadow: 0 0.0625rem 0.125rem 0 hsla(0deg, 0%, 0%, 0.1) !important;\n}\n.or-icon-button.floating.is-error-bg-color.disabled[data-v-32fab2d0], .or-icon-button.floating.is-error-bg-color.loading[data-v-32fab2d0] {\n  background-color: var(--c-error-lighten-20) !important;\n}\n.or-icon-button.floating.is-neutral-0-bg-color[data-v-32fab2d0] {\n  background-color: var(--c-neutral-0) !important;\n}\n.or-icon-button.floating.is-neutral-0-bg-color[data-v-32fab2d0]: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(0deg, 0%, 0%, 0.2) !important;\n}\n.or-icon-button.floating.is-neutral-0-bg-color[data-v-32fab2d0]: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(0deg, 0%, 0%, 0.1) !important;\n}\n.or-icon-button.floating.is-neutral-0-bg-color.disabled[data-v-32fab2d0], .or-icon-button.floating.is-neutral-0-bg-color.loading[data-v-32fab2d0] {\n  background-color: var(--c-neutral-0-lighten-20) !important;\n}\n.or-icon-button.floating.is-neutral-3-bg-color[data-v-32fab2d0] {\n  background-color: var(--c-neutral-3) !important;\n}\n.or-icon-button.floating.is-neutral-3-bg-color[data-v-32fab2d0]: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(0deg, 0%, 0%, 0.2) !important;\n}\n.or-icon-button.floating.is-neutral-3-bg-color[data-v-32fab2d0]: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(0deg, 0%, 0%, 0.1) !important;\n}\n.or-icon-button.floating.is-neutral-3-bg-color.disabled[data-v-32fab2d0], .or-icon-button.floating.is-neutral-3-bg-color.loading[data-v-32fab2d0] {\n  background-color: var(--c-neutral-3-lighten-20) !important;\n}\n.or-icon-button.floating.is-neutral-4-bg-color[data-v-32fab2d0] {\n  background-color: var(--c-neutral-4) !important;\n}\n.or-icon-button.floating.is-neutral-4-bg-color[data-v-32fab2d0]: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(0deg, 0%, 0%, 0.2) !important;\n}\n.or-icon-button.floating.is-neutral-4-bg-color[data-v-32fab2d0]: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(0deg, 0%, 0%, 0.1) !important;\n}\n.or-icon-button.floating.is-neutral-4-bg-color.disabled[data-v-32fab2d0], .or-icon-button.floating.is-neutral-4-bg-color.loading[data-v-32fab2d0] {\n  background-color: var(--c-neutral-4-lighten-20) !important;\n}\n.or-icon-button.floating.is-neutral-5-bg-color[data-v-32fab2d0] {\n  background-color: var(--c-neutral-5) !important;\n}\n.or-icon-button.floating.is-neutral-5-bg-color[data-v-32fab2d0]: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(0deg, 0%, 0%, 0.2) !important;\n}\n.or-icon-button.floating.is-neutral-5-bg-color[data-v-32fab2d0]: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(0deg, 0%, 0%, 0.1) !important;\n}\n.or-icon-button.floating.is-neutral-5-bg-color.disabled[data-v-32fab2d0], .or-icon-button.floating.is-neutral-5-bg-color.loading[data-v-32fab2d0] {\n  background-color: var(--c-neutral-5-lighten-20) !important;\n}\n.or-icon-button.floating.is-neutral-6-bg-color[data-v-32fab2d0] {\n  background-color: var(--c-neutral-6) !important;\n}\n.or-icon-button.floating.is-neutral-6-bg-color[data-v-32fab2d0]: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(0deg, 0%, 0%, 0.2) !important;\n}\n.or-icon-button.floating.is-neutral-6-bg-color[data-v-32fab2d0]: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(0deg, 0%, 0%, 0.1) !important;\n}\n.or-icon-button.floating.is-neutral-6-bg-color.disabled[data-v-32fab2d0], .or-icon-button.floating.is-neutral-6-bg-color.loading[data-v-32fab2d0] {\n  background-color: var(--c-neutral-6-lighten-20) !important;\n}\n.or-icon-button.is-primary-icon-color[data-v-32fab2d0] {\n  color: var(--c-primary) !important;\n}\n.or-icon-button.is-primary-icon-color[data-v-32fab2d0] .or-icon {\n  color: var(--c-primary) !important;\n}\n.or-icon-button.is-primary-icon-color[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  color: var(--c-primary-darken-3) !important;\n}\n.or-icon-button.is-primary-icon-color[data-v-32fab2d0]: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-32fab2d0]:active:not(.disabled):not(.loading) {\n  color: var(--c-primary-darken-5) !important;\n}\n.or-icon-button.is-primary-icon-color[data-v-32fab2d0]: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-32fab2d0]::after {\n  color: var(--c-primary) !important;\n}\n.or-icon-button.is-primary-icon-color.disabled[data-v-32fab2d0], .or-icon-button.is-primary-icon-color.loading[data-v-32fab2d0] {\n  color: var(--c-primary-lighten-20) !important;\n}\n.or-icon-button.is-primary-icon-color.disabled[data-v-32fab2d0] .or-icon, .or-icon-button.is-primary-icon-color.loading[data-v-32fab2d0] .or-icon {\n  color: var(--c-primary-lighten-20) !important;\n}\n.or-icon-button.is-success-icon-color[data-v-32fab2d0] {\n  color: var(--c-success) !important;\n}\n.or-icon-button.is-success-icon-color[data-v-32fab2d0] .or-icon {\n  color: var(--c-success) !important;\n}\n.or-icon-button.is-success-icon-color[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  color: var(--c-success-darken-3) !important;\n}\n.or-icon-button.is-success-icon-color[data-v-32fab2d0]: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-32fab2d0]:active:not(.disabled):not(.loading) {\n  color: var(--c-success-darken-5) !important;\n}\n.or-icon-button.is-success-icon-color[data-v-32fab2d0]: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-32fab2d0]::after {\n  color: var(--c-success) !important;\n}\n.or-icon-button.is-success-icon-color.disabled[data-v-32fab2d0], .or-icon-button.is-success-icon-color.loading[data-v-32fab2d0] {\n  color: var(--c-success-lighten-20) !important;\n}\n.or-icon-button.is-success-icon-color.disabled[data-v-32fab2d0] .or-icon, .or-icon-button.is-success-icon-color.loading[data-v-32fab2d0] .or-icon {\n  color: var(--c-success-lighten-20) !important;\n}\n.or-icon-button.is-warning-icon-color[data-v-32fab2d0] {\n  color: var(--c-warning) !important;\n}\n.or-icon-button.is-warning-icon-color[data-v-32fab2d0] .or-icon {\n  color: var(--c-warning) !important;\n}\n.or-icon-button.is-warning-icon-color[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  color: var(--c-warning-darken-3) !important;\n}\n.or-icon-button.is-warning-icon-color[data-v-32fab2d0]: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-32fab2d0]:active:not(.disabled):not(.loading) {\n  color: var(--c-warning-darken-5) !important;\n}\n.or-icon-button.is-warning-icon-color[data-v-32fab2d0]: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-32fab2d0]::after {\n  color: var(--c-warning) !important;\n}\n.or-icon-button.is-warning-icon-color.disabled[data-v-32fab2d0], .or-icon-button.is-warning-icon-color.loading[data-v-32fab2d0] {\n  color: var(--c-warning-lighten-20) !important;\n}\n.or-icon-button.is-warning-icon-color.disabled[data-v-32fab2d0] .or-icon, .or-icon-button.is-warning-icon-color.loading[data-v-32fab2d0] .or-icon {\n  color: var(--c-warning-lighten-20) !important;\n}\n.or-icon-button.is-error-icon-color[data-v-32fab2d0] {\n  color: var(--c-error) !important;\n}\n.or-icon-button.is-error-icon-color[data-v-32fab2d0] .or-icon {\n  color: var(--c-error) !important;\n}\n.or-icon-button.is-error-icon-color[data-v-32fab2d0]:hover:not(.disabled):not(.loading) {\n  color: var(--c-error-darken-3) !important;\n}\n.or-icon-button.is-error-icon-color[data-v-32fab2d0]: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-32fab2d0]:active:not(.disabled):not(.loading) {\n  color: var(--c-error-darken-5) !important;\n}\n.or-icon-button.is-error-icon-color[data-v-32fab2d0]: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-32fab2d0]::after {\n  color: var(--c-error) !important;\n}\n.or-icon-button.is-error-icon-color.disabled[data-v-32fab2d0], .or-icon-button.is-error-icon-color.loading[data-v-32fab2d0] {\n  color: var(--c-error-lighten-20) !important;\n}\n.or-icon-button.is-error-icon-color.disabled[data-v-32fab2d0] .or-icon, .or-icon-button.is-error-icon-color.loading[data-v-32fab2d0] .or-icon {\n  color: var(--c-error-lighten-20) !important;\n}\n.or-icon-button.is-neutral-0-icon-color[data-v-32fab2d0] {\n  color: var(--c-neutral-0) !important;\n}\n.or-icon-button.is-neutral-0-icon-color[data-v-32fab2d0] .or-icon {\n  color: var(--c-neutral-0) !important;\n}\n.or-icon-button.is-neutral-0-icon-color[data-v-32fab2d0]: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-32fab2d0]: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-32fab2d0]: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-32fab2d0]: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-32fab2d0]::after {\n  color: var(--c-neutral-0) !important;\n}\n.or-icon-button.is-neutral-0-icon-color.disabled[data-v-32fab2d0], .or-icon-button.is-neutral-0-icon-color.loading[data-v-32fab2d0] {\n  color: var(--c-neutral-0-lighten-20) !important;\n}\n.or-icon-button.is-neutral-0-icon-color.disabled[data-v-32fab2d0] .or-icon, .or-icon-button.is-neutral-0-icon-color.loading[data-v-32fab2d0] .or-icon {\n  color: var(--c-neutral-0-lighten-20) !important;\n}\n.or-icon-button.is-neutral-3-icon-color[data-v-32fab2d0] {\n  color: var(--c-neutral-3) !important;\n}\n.or-icon-button.is-neutral-3-icon-color[data-v-32fab2d0] .or-icon {\n  color: var(--c-neutral-3) !important;\n}\n.or-icon-button.is-neutral-3-icon-color[data-v-32fab2d0]: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-32fab2d0]: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-32fab2d0]: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-32fab2d0]: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-32fab2d0]::after {\n  color: var(--c-neutral-3) !important;\n}\n.or-icon-button.is-neutral-3-icon-color.disabled[data-v-32fab2d0], .or-icon-button.is-neutral-3-icon-color.loading[data-v-32fab2d0] {\n  color: var(--c-neutral-3-lighten-20) !important;\n}\n.or-icon-button.is-neutral-3-icon-color.disabled[data-v-32fab2d0] .or-icon, .or-icon-button.is-neutral-3-icon-color.loading[data-v-32fab2d0] .or-icon {\n  color: var(--c-neutral-3-lighten-20) !important;\n}\n.or-icon-button.is-neutral-4-icon-color[data-v-32fab2d0] {\n  color: var(--c-neutral-4) !important;\n}\n.or-icon-button.is-neutral-4-icon-color[data-v-32fab2d0] .or-icon {\n  color: var(--c-neutral-4) !important;\n}\n.or-icon-button.is-neutral-4-icon-color[data-v-32fab2d0]: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-32fab2d0]: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-32fab2d0]: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-32fab2d0]: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-32fab2d0]::after {\n  color: var(--c-neutral-4) !important;\n}\n.or-icon-button.is-neutral-4-icon-color.disabled[data-v-32fab2d0], .or-icon-button.is-neutral-4-icon-color.loading[data-v-32fab2d0] {\n  color: var(--c-neutral-4-lighten-20) !important;\n}\n.or-icon-button.is-neutral-4-icon-color.disabled[data-v-32fab2d0] .or-icon, .or-icon-button.is-neutral-4-icon-color.loading[data-v-32fab2d0] .or-icon {\n  color: var(--c-neutral-4-lighten-20) !important;\n}\n.or-icon-button.is-neutral-5-icon-color[data-v-32fab2d0] {\n  color: var(--c-neutral-5) !important;\n}\n.or-icon-button.is-neutral-5-icon-color[data-v-32fab2d0] .or-icon {\n  color: var(--c-neutral-5) !important;\n}\n.or-icon-button.is-neutral-5-icon-color[data-v-32fab2d0]: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-32fab2d0]: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-32fab2d0]: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-32fab2d0]: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-32fab2d0]::after {\n  color: var(--c-neutral-5) !important;\n}\n.or-icon-button.is-neutral-5-icon-color.disabled[data-v-32fab2d0], .or-icon-button.is-neutral-5-icon-color.loading[data-v-32fab2d0] {\n  color: var(--c-neutral-5-lighten-20) !important;\n}\n.or-icon-button.is-neutral-5-icon-color.disabled[data-v-32fab2d0] .or-icon, .or-icon-button.is-neutral-5-icon-color.loading[data-v-32fab2d0] .or-icon {\n  color: var(--c-neutral-5-lighten-20) !important;\n}\n.or-icon-button.is-neutral-6-icon-color[data-v-32fab2d0] {\n  color: var(--c-neutral-6) !important;\n}\n.or-icon-button.is-neutral-6-icon-color[data-v-32fab2d0] .or-icon {\n  color: var(--c-neutral-6) !important;\n}\n.or-icon-button.is-neutral-6-icon-color[data-v-32fab2d0]: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-32fab2d0]: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-32fab2d0]: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-32fab2d0]: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-32fab2d0]::after {\n  color: var(--c-neutral-6) !important;\n}\n.or-icon-button.is-neutral-6-icon-color.disabled[data-v-32fab2d0], .or-icon-button.is-neutral-6-icon-color.loading[data-v-32fab2d0] {\n  color: var(--c-neutral-6-lighten-20) !important;\n}\n.or-icon-button.is-neutral-6-icon-color.disabled[data-v-32fab2d0] .or-icon, .or-icon-button.is-neutral-6-icon-color.loading[data-v-32fab2d0] .or-icon {\n  color: var(--c-neutral-6-lighten-20) !important;\n}\n.or-icon-button .or-loader[data-v-32fab2d0]::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-32fab2d0";
+script.__file = "src/components/or-button-v2/OrIconButton.vue";

package/dist/bundled/v3/OrIconButton.vue_vue_type_script_lang-0453a94c.js

@@ -0,0 +1,108 @@
+import { resolveComponent, openBlock, createElementBlock, mergeProps, renderSlot, createBlock, withCtx, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, defineComponent, ref, computed } from 'vue';
+import './OrIcon-3a514933.js';
+import { s as script$2 } from './OrIcon.vue_vue_type_script_lang-41a6a57a.js';
+import { s as script$1 } from './OrTooltip.vue_vue_type_script_lang-d8bca183.js';
+import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrPopover = resolveComponent("OrPopover");
+  return openBlock(), createElementBlock("div", mergeProps({
+    ref: "root"
+  }, _ctx.$attrs, {
+    class: _ctx.rootStyles
+  }), [renderSlot(_ctx.$slots, "default"), _ctx.text ? (openBlock(), createBlock(_component_OrPopover, {
+    key: 0,
+    ref: "popover",
+    variant: 'popover',
+    trigger: _ctx.root,
+    placement: _ctx.placement,
+    "full-width": false,
+    "disable-default-styles": true,
+    "onUpdate:state": _cache[0] || (_cache[0] = $event => _ctx.$emit('update:state', $event))
+  }, {
+    default: withCtx(() => [createElementVNode("div", {
+      class: normalizeClass(_ctx.bodyStyles)
+    }, toDisplayString(_ctx.text), 3 /* TEXT, CLASS */)]),
+
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["trigger", "placement"])) : createCommentVNode("v-if", true)], 16 /* FULL_PROPS */);
+}
+
+script$1.render = render;
+script$1.__file = "src/components/or-tooltip-v3/OrTooltip.vue";
+
+var IconButtonColor;
+(function (IconButtonColor) {
+  IconButtonColor["Primary"] = "primary";
+  IconButtonColor["Danger"] = "danger";
+  IconButtonColor["Inherit"] = "inherit";
+})(IconButtonColor || (IconButtonColor = {}));
+
+const IconButtonRoot = [
+// Layout
+'flex', 'items-center', 'justify-center',
+// Box
+'max-w-max', 'rounded-full',
+// Interactivity
+'interactivity-auto',
+// Typography
+'typography-button',
+// Iconography
+'iconography-outlined',
+// Iconography (hover)
+'hover:iconography-filled',
+// Iconography (focus)
+'focus:iconography-filled'];
+const IconButtonRootColors = {
+  'primary': [
+  // Theme
+  'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark'],
+  'danger': [
+  // Theme
+  'theme-preset-3-error', 'dark:theme-preset-3-error-dark'],
+  'inherit': [
+  // Theme
+  'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-foreground-inherit', 'dark:theme-foreground-inherit']
+};
+
+var script = defineComponent({
+  name: 'OrIconButton',
+  components: {
+    OrIcon: script$2,
+    OrTooltip: script$1
+  },
+  inheritAttrs: false,
+  props: {
+    icon: {
+      type: [String, Object],
+      required: true
+    },
+    color: {
+      type: String,
+      default: IconButtonColor.Inherit
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    tooltip: {
+      type: [String, Object],
+      default: undefined
+    }
+  },
+  emits: ['click', 'focus', 'blur'],
+  expose: ['root'],
+  setup(props) {
+    // Refs
+    const root = ref();
+    // Styles
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-icon-button', ...IconButtonRoot, ...IconButtonRootColors[props.color], classAttribute.value]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+export { IconButtonColor as I, script as s };

package/dist/bundled/v3/OrIconButton.vue_vue_type_script_lang-40547ab0.js

@@ -0,0 +1,163 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createBlock, withCtx, createVNode, normalizeProps, guardReactiveProps, createCommentVNode, defineComponent, h } from 'vue';
+import { s as script$2 } from './OrTooltip.vue_vue_type_script_lang-fa52d391.js';
+import { s as styleInject } from './style-inject.es-4c6f2515.js';
+import { O as OrFloatingPlacements } from './OrFloating.vue_vue_type_script_lang-8bf2b7ae.js';
+import { I as ICON_BUTTON_TYPE, H as HTML_BUTTON_TYPE, b as BUTTON_SIZE, a as BUTTON_COLOR } from './constants-c5d1139f.js';
+import './OrIcon-1cae8a64.js';
+import './OrLoader-ee97fef4.js';
+import { s as script$3 } from './OrIcon.vue_vue_type_script_lang-7e3a17fe.js';
+import { s as script$4 } from './OrLoader.vue_vue_type_script_lang-1378ab8e.js';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_tooltip_content = resolveComponent("or-tooltip-content");
+  const _component_or_floating = resolveComponent("or-floating");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["tooltip-container", {
+      'fill-parent': _ctx.triggerOnParent
+    }])
+  }, [createElementVNode("div", {
+    ref: "trigger",
+    class: normalizeClass(["trigger", {
+      'fill-parent': _ctx.triggerOnParent
+    }]),
+    onMouseover: _cache[0] || (_cache[0] = (...args) => _ctx.show && _ctx.show(...args)),
+    onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.hide && _ctx.hide(...args))
+  }, [renderSlot(_ctx.$slots, "default")], 34 /* CLASS, HYDRATE_EVENTS */), _ctx.isShown ? (openBlock(), createBlock(_component_or_floating, {
+    key: 0,
+    trigger: _ctx.trigger,
+    placement: _ctx.placement,
+    offset: 8,
+    "is-using-shift": "",
+    "is-using-flip": ""
+  }, {
+    default: withCtx(() => [createVNode(_component_or_tooltip_content, {
+      placement: "custom",
+      content: _ctx.content
+    }, {
+      default: withCtx(scope => [renderSlot(_ctx.$slots, "content", normalizeProps(guardReactiveProps(scope)))]),
+      _: 3 /* FORWARDED */
+    }, 8 /* PROPS */, ["content"])]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["trigger", "placement"])) : createCommentVNode("v-if", true)], 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-20a861cc {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-20a861cc {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.fill-parent[data-v-20a861cc] {\n  width: 100% !important;\n  height: 100% !important;\n}\n.tooltip-container[data-v-20a861cc] {\n  position: relative;\n  display: inline-block;\n  width: -moz-fit-content;\n  width: fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\n}\n.tooltip-container.fill-parent[data-v-20a861cc] {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n.tooltip-container .trigger[data-v-20a861cc] {\n  cursor: pointer;\n}";
+styleInject(css_248z);
+
+script$2.render = render;
+script$2.__scopeId = "data-v-20a861cc";
+script$2.__file = "src/components/or-tooltip/OrTooltip.vue";
+
+/** 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
+    }
+  },
+  ...({
+    setup(props, {
+      slots
+    }) {
+      const content = slots.default;
+      if (!props.tooltipText) {
+        return content;
+      }
+      const tooltipProps = {
+        content: props.tooltipText,
+        placement: props.tooltipPlacement
+      };
+      return () => h(script$2, tooltipProps, content);
+    }
+  } )
+});
+
+script$1.__file = "src/components/or-button-v2/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'],
+  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);
+      }
+    }
+  }
+});
+
+export { script as s };