@onereach/ui-components 4.3.2-beta.2618.0 → 4.3.3-beta.2627.0

package/dist/esm/v3/OrIconButton-049a3bd2.js

@@ -0,0 +1,223 @@
+import { defineComponent, isVue3, h } from 'vue-demi';
+import { s as script$3 } from './OrIcon-b566a871.js';
+import { s as script$4 } from './OrLoader-15174477.js';
+import { s as script$2 } from './OrTooltip-89ce98e8.js';
+import './OrTooltipContent-37a5f562.js';
+import { O as OrFloatingPlacements } from './OrFloating-291c7653.js';
+import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, mergeProps, toHandlers, createBlock, createCommentVNode, renderSlot } from 'vue';
+import { s as styleInject } from './style-inject.es-4c6f2515.js';
+
+var ICON_BUTTON_TYPE;
+(function (ICON_BUTTON_TYPE) {
+  ICON_BUTTON_TYPE["ICON"] = "icon";
+  ICON_BUTTON_TYPE["FLOATING"] = "floating";
+})(ICON_BUTTON_TYPE || (ICON_BUTTON_TYPE = {}));
+var BUTTON_TYPE;
+(function (BUTTON_TYPE) {
+  BUTTON_TYPE["CONTAINED"] = "contained";
+  BUTTON_TYPE["OUTLINE"] = "outline";
+  BUTTON_TYPE["OUTLINED"] = "outlined";
+  BUTTON_TYPE["TEXT"] = "text";
+  BUTTON_TYPE["INLINE"] = "inline";
+})(BUTTON_TYPE || (BUTTON_TYPE = {}));
+var HTML_BUTTON_TYPE;
+(function (HTML_BUTTON_TYPE) {
+  HTML_BUTTON_TYPE["BUTTON"] = "button";
+  HTML_BUTTON_TYPE["SUBMIT"] = "submit";
+  HTML_BUTTON_TYPE["RESET"] = "reset";
+})(HTML_BUTTON_TYPE || (HTML_BUTTON_TYPE = {}));
+var BUTTON_SIZE;
+(function (BUTTON_SIZE) {
+  BUTTON_SIZE["DEFAULT"] = "default";
+  BUTTON_SIZE["SMALL"] = "small";
+})(BUTTON_SIZE || (BUTTON_SIZE = {}));
+var BUTTON_LOADER_TYPE;
+(function (BUTTON_LOADER_TYPE) {
+  BUTTON_LOADER_TYPE["DEFAULT"] = "default";
+  BUTTON_LOADER_TYPE["TEXT"] = "text";
+})(BUTTON_LOADER_TYPE || (BUTTON_LOADER_TYPE = {}));
+var BUTTON_COLOR;
+(function (BUTTON_COLOR) {
+  BUTTON_COLOR["PRIMARY"] = "primary";
+  BUTTON_COLOR["SUCCESS"] = "success";
+  BUTTON_COLOR["WARNING"] = "warning";
+  BUTTON_COLOR["ERROR"] = "error";
+  BUTTON_COLOR["NEUTRAL_0"] = "neutral-0";
+  BUTTON_COLOR["NEUTRAL_3"] = "neutral-3";
+  BUTTON_COLOR["NEUTRAL_4"] = "neutral-4";
+  BUTTON_COLOR["NEUTRAL_5"] = "neutral-5";
+  BUTTON_COLOR["NEUTRAL_6"] = "neutral-6";
+})(BUTTON_COLOR || (BUTTON_COLOR = {}));
+
+/** 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: 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 { BUTTON_TYPE as B, HTML_BUTTON_TYPE as H, ICON_BUTTON_TYPE as I, BUTTON_COLOR as a, BUTTON_SIZE as b, BUTTON_LOADER_TYPE as c, script as s };

package/dist/esm/v3/{OrInlineInput-63b1d245.js → OrInlineInput-11ed65f7.js}

@@ -4,7 +4,7 @@ import '@vueuse/core';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { s as script$1 } from './OrError-c01d0c29.js';
 import { s as script$2 } from './OrHint-06ab89d7.js';
-import { s as script$3 } from './OrIconButton-46b3c1e2.js';
+import { s as script$3 } from './OrIconButton-025fb2de.js';
 import { s as script$4, I as InlineInputBoxSize } from './OrInlineInputBox-01fb2cb2.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, withDirectives, mergeProps, vModelDynamic, withModifiers, createCommentVNode, createBlock, createSlots, createTextVNode, toDisplayString, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
@@ -207,8 +207,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       activated: _ctx.activated ? '' : null,
       onKeydown: _cache[1] || (_cache[1] = $event => _ctx.$emit('keydown', $event)),
       onKeyup: _cache[2] || (_cache[2] = $event => _ctx.$emit('keyup', $event)),
-      onFocus: _cache[3] || (_cache[3] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)),
-      onBlur: _cache[4] || (_cache[4] = (...args) => _ctx.onBlur && _ctx.onBlur(...args))
+      onFocus: _cache[3] || (_cache[3] = function () {
+        return _ctx.onFocus && _ctx.onFocus(...arguments);
+      }),
+      onBlur: _cache[4] || (_cache[4] = function () {
+        return _ctx.onBlur && _ctx.onBlur(...arguments);
+      })
     }), null, 16 /* FULL_PROPS */, _hoisted_2), [[vModelDynamic, _ctx.draftModelValue]])]),
     _: 1 /* STABLE */
   }, 8 /* PROPS */, ["size", "invalid"]), _ctx.activated && !_ctx.saveOnBlur ? (openBlock(), createElementBlock("div", {

package/dist/esm/v3/{OrInlineTextEdit-6f97629f.js → OrInlineTextEdit-4f4ecba4.js}

@@ -1,8 +1,8 @@
 import { defineComponent, ref, getCurrentInstance } from 'vue-demi';
-import { s as script$1 } from './OrCollapse-37a52e8f.js';
+import { s as script$1 } from './OrCollapse-2b31de04.js';
 import { s as script$2 } from './OrError-f90296db.js';
-import './OrButton-f8b10d79.js';
-import { s as script$3 } from './OrIconButton-5387fd59.js';
+import './OrButton-d6834ea0.js';
+import { s as script$3 } from './OrIconButton-049a3bd2.js';
 import { useVModel } from '@vueuse/core';
 import { s as setStyle, r as requestAF, d as getCS, a as reflow, c as cancelAF } from './dom-7a41831b.js';
 import { p as pxToRem } from './px-to-rem-0b26b83e.js';
@@ -85,9 +85,10 @@ var script = defineComponent({
     }
   },
   emits: ['focus', 'blur', 'update:modelValue', 'input', 'save', 'clear'],
-  setup(props, {
-    emit
-  }) {
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
     var _a;
     const inputRef = ref();
     const localValue = useVModel(props, 'modelValue', emit);
@@ -276,10 +277,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     readonly: _ctx.isReadonly,
     class: normalizeClass(_ctx.inputClasses),
     placeholder: _ctx.placeholder,
-    onInput: _cache[1] || (_cache[1] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
-    onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)),
-    onBlur: _cache[3] || (_cache[3] = (...args) => _ctx.onBlur && _ctx.onBlur(...args)),
-    onKeyup: _cache[4] || (_cache[4] = withKeys((...args) => _ctx.onEnter && _ctx.onEnter(...args), ["enter"]))
+    onInput: _cache[1] || (_cache[1] = function () {
+      return _ctx.onInput && _ctx.onInput(...arguments);
+    }),
+    onFocus: _cache[2] || (_cache[2] = function () {
+      return _ctx.onFocus && _ctx.onFocus(...arguments);
+    }),
+    onBlur: _cache[3] || (_cache[3] = function () {
+      return _ctx.onBlur && _ctx.onBlur(...arguments);
+    }),
+    onKeyup: _cache[4] || (_cache[4] = withKeys(function () {
+      return _ctx.onEnter && _ctx.onEnter(...arguments);
+    }, ["enter"]))
   }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_3)), [[vModelText, _ctx.localValue]]) : createCommentVNode("v-if", true), _ctx.isTextareaType && _ctx.isEditing ? withDirectives((openBlock(), createElementBlock("textarea", {
     key: 1,
     id: _ctx.localId,
@@ -289,13 +298,21 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     readonly: _ctx.isReadonly,
     class: normalizeClass(_ctx.inputClasses),
     placeholder: _ctx.placeholder,
-    onInput: _cache[6] || (_cache[6] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
-    onFocus: _cache[7] || (_cache[7] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)),
-    onBlur: _cache[8] || (_cache[8] = (...args) => _ctx.onBlur && _ctx.onBlur(...args))
+    onInput: _cache[6] || (_cache[6] = function () {
+      return _ctx.onInput && _ctx.onInput(...arguments);
+    }),
+    onFocus: _cache[7] || (_cache[7] = function () {
+      return _ctx.onFocus && _ctx.onFocus(...arguments);
+    }),
+    onBlur: _cache[8] || (_cache[8] = function () {
+      return _ctx.onBlur && _ctx.onBlur(...arguments);
+    })
   }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_4)), [[vModelText, _ctx.localValue]]) : createCommentVNode("v-if", true), !_ctx.isEditing ? (openBlock(), createElementBlock("span", {
     key: 2,
     class: normalizeClass(["or-inline-text-edit-text", _ctx.textClasses]),
-    onClick: _cache[9] || (_cache[9] = (...args) => _ctx.onFocus && _ctx.onFocus(...args))
+    onClick: _cache[9] || (_cache[9] = function () {
+      return _ctx.onFocus && _ctx.onFocus(...arguments);
+    })
   }, [createElementVNode("span", _hoisted_5, toDisplayString(_ctx.textStart), 1 /* TEXT */), createElementVNode("span", _hoisted_6, toDisplayString(_ctx.textEnd), 1 /* TEXT */)], 2 /* CLASS */)) : createCommentVNode("v-if", true), _ctx.isEditing ? (openBlock(), createBlock(_component_or_icon_button, {
     key: 3,
     icon: "check",

package/dist/esm/v3/{OrInlineTextarea-d03f81c4.js → OrInlineTextarea-05769204.js}

@@ -4,7 +4,7 @@ import '@vueuse/core';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { s as script$1 } from './OrError-c01d0c29.js';
 import { s as script$2 } from './OrHint-06ab89d7.js';
-import { s as script$3 } from './OrIconButton-46b3c1e2.js';
+import { s as script$3 } from './OrIconButton-025fb2de.js';
 import { s as script$4 } from './OrInlineInputBox-01fb2cb2.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, withDirectives, mergeProps, vModelText, withModifiers, createCommentVNode, createBlock, createSlots, createTextVNode, toDisplayString, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
@@ -184,8 +184,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       activated: _ctx.activated ? '' : null,
       onKeydown: _cache[1] || (_cache[1] = $event => _ctx.$emit('keydown', $event)),
       onKeyup: _cache[2] || (_cache[2] = $event => _ctx.$emit('keyup', $event)),
-      onFocus: _cache[3] || (_cache[3] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)),
-      onBlur: _cache[4] || (_cache[4] = (...args) => _ctx.onBlur && _ctx.onBlur(...args))
+      onFocus: _cache[3] || (_cache[3] = function () {
+        return _ctx.onFocus && _ctx.onFocus(...arguments);
+      }),
+      onBlur: _cache[4] || (_cache[4] = function () {
+        return _ctx.onBlur && _ctx.onBlur(...arguments);
+      })
     }), null, 16 /* FULL_PROPS */, _hoisted_2), [[vModelText, _ctx.draftModelValue]])]),
     _: 1 /* STABLE */
   }, 8 /* PROPS */, ["invalid"]), _ctx.activated && !_ctx.saveOnBlur ? (openBlock(), createElementBlock("div", {

package/dist/esm/v3/{OrInput-0dbd5a01.js → OrInput-53a32706.js}

@@ -4,7 +4,7 @@ import { s as setStyle, r as requestAF, d as getCS, a as reflow, c as cancelAF }
 import { s as script$1 } from './OrLabel-876f8729.js';
 import { s as script$2 } from './OrHint-1414c530.js';
 import { s as script$3 } from './OrError-f90296db.js';
-import { s as script$4 } from './OrCollapse-37a52e8f.js';
+import { s as script$4 } from './OrCollapse-2b31de04.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createCommentVNode, renderSlot, createElementVNode, createBlock, withCtx, createTextVNode, toDisplayString, mergeProps, createVNode, Transition } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
@@ -238,9 +238,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     readonly: _ctx.isReadonly,
     class: _ctx.inputClasses,
     placeholder: _ctx.placeholder,
-    onInput: _cache[0] || (_cache[0] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
-    onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)),
-    onBlur: _cache[2] || (_cache[2] = (...args) => _ctx.onBlur && _ctx.onBlur(...args)),
+    onInput: _cache[0] || (_cache[0] = function () {
+      return _ctx.onInput && _ctx.onInput(...arguments);
+    }),
+    onFocus: _cache[1] || (_cache[1] = function () {
+      return _ctx.onFocus && _ctx.onFocus(...arguments);
+    }),
+    onBlur: _cache[2] || (_cache[2] = function () {
+      return _ctx.onBlur && _ctx.onBlur(...arguments);
+    }),
     onKeypress: _cache[3] || (_cache[3] = $event => _ctx.$emit('keypress', $event)),
     onKeyup: _cache[4] || (_cache[4] = $event => _ctx.$emit('keyup', $event)),
     onKeydown: _cache[5] || (_cache[5] = $event => _ctx.$emit('keydown', $event))

package/dist/esm/v3/{OrInput-cc1991ff.js → OrInput-c7763e63.js}

@@ -5,7 +5,7 @@ import { u as useResponsive } from './useResponsive-a02e95b7.js';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { s as script$1 } from './OrError-c01d0c29.js';
 import { s as script$2 } from './OrHint-06ab89d7.js';
-import { s as script$4 } from './OrIconButton-46b3c1e2.js';
+import { s as script$4 } from './OrIconButton-025fb2de.js';
 import { s as script$3 } from './OrIcon-62793572.js';
 import { s as script$5, I as InputBoxSize } from './OrInputBox-ba40bbdf.js';
 import { s as script$6 } from './OrLabel-4da56db0.js';

package/dist/esm/v3/{OrList-b8799cf4.js → OrList-0543a645.js}

@@ -2,9 +2,9 @@ import { defineComponent } from 'vue-demi';
 import _ from 'lodash';
 import { v4 } from 'uuid';
 import { s as script$2 } from './OrLabel-876f8729.js';
-import { s as script$3 } from './OrButton-f8b10d79.js';
-import { s as script$4 } from './OrIconButton-5387fd59.js';
-import { s as script$5 } from './OrIcon-925c5413.js';
+import { s as script$3 } from './OrButton-d6834ea0.js';
+import { s as script$4 } from './OrIconButton-049a3bd2.js';
+import { s as script$5 } from './OrIcon-b566a871.js';
 import { s as script$1 } from './OrError-f90296db.js';
 import Sortable from 'sortablejs';
 import { resolveComponent, openBlock, createElementBlock, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createVNode, withCtx, Fragment, renderList, createBlock, createElementVNode, withModifiers } from 'vue';
@@ -161,10 +161,11 @@ var script = defineComponent({
       this.$emit('item-deleted', result);
       this.items = result;
     },
-    onUpdate({
-      oldIndex,
-      newIndex
-    }) {
+    onUpdate(_ref) {
+      let {
+        oldIndex,
+        newIndex
+      } = _ref;
       if (this.isDisabled) return;
       this.$emit('item-before-move', this.items);
       const result = _.cloneDeep(this.items);

package/dist/esm/v3/{OrListOfInputs-16ba8358.js → OrListOfInputs-2fc8087c.js}

@@ -1,10 +1,10 @@
 import { defineComponent } from 'vue-demi';
 import _ from 'lodash';
-import { s as script$1 } from './OrList-b8799cf4.js';
-import { s as script$2 } from './OrInput-0dbd5a01.js';
-import { s as script$3 } from './OrIcon-925c5413.js';
-import './OrButton-f8b10d79.js';
-import { s as script$4 } from './OrIconButton-5387fd59.js';
+import { s as script$1 } from './OrList-0543a645.js';
+import { s as script$2 } from './OrInput-53a32706.js';
+import { s as script$3 } from './OrIcon-b566a871.js';
+import './OrButton-d6834ea0.js';
+import { s as script$4 } from './OrIconButton-049a3bd2.js';
 import { resolveComponent, openBlock, createBlock, withCtx, renderSlot, normalizeProps, guardReactiveProps, createVNode, mergeProps, createSlots, normalizeStyle } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
@@ -103,53 +103,62 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     onItemBeforeDelete: _cache[3] || (_cache[3] = $event => _ctx.$emit('item-before-delete', $event)),
     onItemDeleted: _cache[4] || (_cache[4] = $event => _ctx.$emit('item-deleted', $event))
   }, {
-    header: withCtx(({
-      deleteItem,
-      addItem
-    }) => [renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps({
-      deleteItem: deleteItem,
-      addItem: addItem
-    })))]),
-    default: withCtx(({
-      props,
-      index,
-      deleteItem
-    }) => [createVNode(_component_or_input, mergeProps({
-      modelValue: props.value,
-      "onUpdate:modelValue": $event => props.value = $event
-    }, props), createSlots({
-      _: 2 /* DYNAMIC */
-    }, [_ctx.canDrag && _ctx.listOfInputs.length > 1 ? {
-      name: "prepend",
-      fn: withCtx(() => [createVNode(_component_or_icon, {
-        style: normalizeStyle(_ctx.isDisabled ? {
-          cursor: 'disabled'
-        } : {
-          cursor: 'move'
-        }),
-        color: "neutral-3",
-        class: "drag-handle",
-        icon: "drag_handle"
-      }, null, 8 /* PROPS */, ["style"])]),
-      key: "0"
-    } : undefined, _ctx.canDelete ? {
-      name: "append",
-      fn: withCtx(() => [createVNode(_component_or_icon_button, {
-        class: "or-list-of-inputs--delete-button",
-        "is-disabled": _ctx.isDisabled,
-        icon: "delete",
-        "icon-color": "neutral-3",
-        onClick: $event => deleteItem(index)
-      }, null, 8 /* PROPS */, ["is-disabled", "onClick"])]),
-      key: "1"
-    } : undefined]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["modelValue", "onUpdate:modelValue"])]),
-    footer: withCtx(({
-      deleteItem,
-      addItem
-    }) => [renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps({
-      deleteItem: deleteItem,
-      addItem: addItem
-    })))]),
+    header: withCtx(_ref => {
+      let {
+        deleteItem,
+        addItem
+      } = _ref;
+      return [renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps({
+        deleteItem: deleteItem,
+        addItem: addItem
+      })))];
+    }),
+    default: withCtx(_ref2 => {
+      let {
+        props,
+        index,
+        deleteItem
+      } = _ref2;
+      return [createVNode(_component_or_input, mergeProps({
+        modelValue: props.value,
+        "onUpdate:modelValue": $event => props.value = $event
+      }, props), createSlots({
+        _: 2 /* DYNAMIC */
+      }, [_ctx.canDrag && _ctx.listOfInputs.length > 1 ? {
+        name: "prepend",
+        fn: withCtx(() => [createVNode(_component_or_icon, {
+          style: normalizeStyle(_ctx.isDisabled ? {
+            cursor: 'disabled'
+          } : {
+            cursor: 'move'
+          }),
+          color: "neutral-3",
+          class: "drag-handle",
+          icon: "drag_handle"
+        }, null, 8 /* PROPS */, ["style"])]),
+        key: "0"
+      } : undefined, _ctx.canDelete ? {
+        name: "append",
+        fn: withCtx(() => [createVNode(_component_or_icon_button, {
+          class: "or-list-of-inputs--delete-button",
+          "is-disabled": _ctx.isDisabled,
+          icon: "delete",
+          "icon-color": "neutral-3",
+          onClick: $event => deleteItem(index)
+        }, null, 8 /* PROPS */, ["is-disabled", "onClick"])]),
+        key: "1"
+      } : undefined]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["modelValue", "onUpdate:modelValue"])];
+    }),
+    footer: withCtx(_ref3 => {
+      let {
+        deleteItem,
+        addItem
+      } = _ref3;
+      return [renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps({
+        deleteItem: deleteItem,
+        addItem: addItem
+      })))];
+    }),
     _: 3 /* FORWARDED */
   }, 8 /* PROPS */, ["model-value", "label", "can-drag", "item-props", "is-disabled", "button-label"]);
 }