@onereach/ui-components 2.65.0-beta.1953.0 → 2.65.0

package/dist/v3/OrModal-83614157.js

@@ -0,0 +1,130 @@
+import { defineComponent, ref, computed, watch } from 'vue-demi';
+import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
+import '@vueuse/core';
+import { s as script$2 } from './OrIconButton-e486d6df.js';
+import { s as script$1 } from './OrOverlay-27050c19.js';
+import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, normalizeClass, renderSlot, createVNode, withModifiers, createCommentVNode } from 'vue';
+
+var ModalSize;
+(function (ModalSize) {
+  ModalSize["L"] = "l";
+  ModalSize["M"] = "m";
+  ModalSize["S"] = "s";
+})(ModalSize || (ModalSize = {}));
+
+const ModalRoot = [
+// Layout
+'flex', 'flex-col',
+// Box
+'w-full', 'h-full', 'md:rounded-md',
+// Sizing
+'px-lg', 'py-lg', 'gap-md md:gap-lg',
+// Typography
+'typography-body-2-regular',
+// Theme
+'theme-background-default', 'dark:theme-background-default-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark', 'shadow-modal', 'dark:shadow-modal-dark'];
+const ModalRootSizes = {
+  'l': [
+  // Box
+  'md:w-[1050px]', 'md:h-auto'],
+  'm': [
+  // Box
+  'md:w-[700px]', 'md:h-auto'],
+  's': [
+  // Box
+  'md:w-[480px]', 'md:h-auto']
+};
+const ModalHeader = [
+// Layouot
+'flex', 'items-center',
+// Typography
+'typography-headline-2'];
+const ModalCloseButton = [
+// Theme
+'text-outline', 'dark:text-outline-dark'];
+
+var script = defineComponent({
+  name: 'OrModal',
+  components: {
+    OrOverlay: script$1,
+    OrIconButton: script$2
+  },
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: String,
+      default: ModalSize.M
+    }
+  },
+  emits: ['open', 'close'],
+  expose: ['root', 'isActive', 'open', 'close'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    // Styles
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-modal', ...ModalRoot, ...ModalRootSizes[props.size], classAttribute.value]);
+    const headerStyles = computed(() => [...ModalHeader]);
+    const closeButtonStyles = computed(() => [...ModalCloseButton]);
+    // State
+    const isActive = ref(false);
+    // Events
+    watch(isActive, value => {
+      context.emit(value ? 'open' : 'close');
+    });
+    // Methods
+    function open() {
+      isActive.value = true;
+    }
+    function close() {
+      isActive.value = false;
+    }
+    return {
+      root,
+      rootStyles,
+      headerStyles,
+      closeButtonStyles,
+      isActive,
+      open,
+      close
+    };
+  }
+});
+
+const _hoisted_1 = {
+  class: /*#__PURE__*/normalizeClass(['grow'])
+};
+const _hoisted_2 = {
+  class: /*#__PURE__*/normalizeClass(['grow', 'overflow-y-auto'])
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrIconButton = resolveComponent("OrIconButton");
+  const _component_OrOverlay = resolveComponent("OrOverlay");
+  return _ctx.isActive ? (openBlock(), createBlock(_component_OrOverlay, {
+    key: 0,
+    fullscreen: true
+  }, {
+    default: withCtx(() => [createElementVNode("div", mergeProps({
+      ref: "root"
+    }, _ctx.$attrs, {
+      class: _ctx.rootStyles
+    }), [createElementVNode("div", {
+      class: normalizeClass(_ctx.headerStyles)
+    }, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "header")]), createElementVNode("div", {
+      class: normalizeClass(_ctx.closeButtonStyles)
+    }, [createVNode(_component_OrIconButton, {
+      icon: {
+        icon: 'close',
+        size: 'l'
+      },
+      onClick: withModifiers(_ctx.close, ["stop"])
+    }, null, 8 /* PROPS */, ["onClick"])], 2 /* CLASS */)], 2 /* CLASS */), createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")]), renderSlot(_ctx.$slots, "footer")], 16 /* FULL_PROPS */)]),
+
+    _: 3 /* FORWARDED */
+  })) : createCommentVNode("v-if", true);
+}
+
+script.render = render;
+script.__file = "src/components/or-modal-v3/OrModal.vue";
+
+export { ModalSize as M, script as s };

package/dist/v3/OrNotification-38664729.js

@@ -0,0 +1,114 @@
+import { defineComponent } from 'vue-demi';
+import { s as script$1 } from './OrIcon-e23028f8.js';
+import { a as script$2 } from './OrIconButton-f72cb8d9.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, Fragment, createTextVNode, toDisplayString, createCommentVNode, createBlock } from 'vue';
+import { s as styleInject } from './style-inject.es-4c6f2515.js';
+
+var OR_NOTIFICATION_TYPE;
+(function (OR_NOTIFICATION_TYPE) {
+  OR_NOTIFICATION_TYPE["INFO"] = "info";
+  OR_NOTIFICATION_TYPE["ERROR"] = "error";
+  OR_NOTIFICATION_TYPE["WARNING"] = "warning";
+  OR_NOTIFICATION_TYPE["SUCCESS"] = "success";
+})(OR_NOTIFICATION_TYPE || (OR_NOTIFICATION_TYPE = {}));
+var OR_NOTIFICATION_SIZE;
+(function (OR_NOTIFICATION_SIZE) {
+  OR_NOTIFICATION_SIZE["DEFAULT"] = "default";
+  OR_NOTIFICATION_SIZE["INLINE"] = "inline";
+})(OR_NOTIFICATION_SIZE || (OR_NOTIFICATION_SIZE = {}));
+
+/** HTML links are styled by default to match notification type */
+var script = defineComponent({
+  name: 'OrNotification',
+  components: {
+    OrIcon: script$1,
+    OrIconButton: script$2
+  },
+  props: {
+    /** A simple text content can be provided as a prop */
+    content: {
+      type: String,
+      default: ''
+    },
+    /** Icon can be overridden with prop or slot regardless of notification type */
+    icon: {
+      type: String,
+      default: ''
+    },
+    /** Type can be a blank value, for black and white notification */
+    type: {
+      type: String,
+      default: OR_NOTIFICATION_TYPE.INFO
+    },
+    size: {
+      type: String,
+      default: OR_NOTIFICATION_SIZE.DEFAULT
+    },
+    canDelete: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['close'],
+  computed: {
+    states() {
+      /* This type has no styles but is present on the element for user customization */
+      const BLANK_TYPE = 'blank';
+      return [`is-type-${this.type || BLANK_TYPE}`, `is-size-${this.size}`];
+    },
+    iconByType() {
+      const DEFAULT_ICON = 'info';
+      const TYPE_TO_ICON_MAP = {
+        [OR_NOTIFICATION_TYPE.INFO]: 'info',
+        [OR_NOTIFICATION_TYPE.ERROR]: 'error',
+        [OR_NOTIFICATION_TYPE.WARNING]: 'warning',
+        [OR_NOTIFICATION_TYPE.SUCCESS]: 'check_circle'
+      };
+      return this.icon || TYPE_TO_ICON_MAP[this.type] || DEFAULT_ICON;
+    },
+    iconColorByType() {
+      const DEFAULT_COLOR = 'black';
+      const COLOR_TO_ICON_MAP = {
+        [OR_NOTIFICATION_TYPE.INFO]: 'primary',
+        [OR_NOTIFICATION_TYPE.ERROR]: 'error',
+        [OR_NOTIFICATION_TYPE.WARNING]: 'warning',
+        [OR_NOTIFICATION_TYPE.SUCCESS]: 'success'
+      };
+      return COLOR_TO_ICON_MAP[this.type] || DEFAULT_COLOR;
+    }
+  }
+});
+
+const _hoisted_1 = {
+  class: "or-notification--icon"
+};
+const _hoisted_2 = {
+  class: "or-notification--content"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_icon = resolveComponent("or-icon");
+  const _component_or_icon_button = resolveComponent("or-icon-button");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["or-notification", _ctx.states])
+  }, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_component_or_icon, {
+    icon: _ctx.iconByType,
+    color: _ctx.iconColorByType
+  }, null, 8 /* PROPS */, ["icon", "color"])])]), createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default"), !_ctx.$slots.default ? (openBlock(), createElementBlock(Fragment, {
+    key: 0
+  }, [createTextVNode(toDisplayString(_ctx.content), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)]), _ctx.canDelete ? (openBlock(), createBlock(_component_or_icon_button, {
+    key: 0,
+    icon: "close",
+    "icon-color": "neutral-6",
+    class: "or-notification--close",
+    onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('close'))
+  })) : 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-2a8b1558 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-2a8b1558 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-notification[data-v-2a8b1558] {\n  /** TODO: Override when mobile design is ready to guarantee alignment of icons with first text row */\n  --alignment-height: var(--lh-1);\n  display: flex;\n  align-items: flex-start;\n  width: 100%;\n  padding: var(--s-4);\n  background-color: var(--c-white);\n  border-radius: 0.25rem;\n  box-shadow: 0 0.0625rem 0.25rem 0.0625rem rgba(0, 0, 0, 0.08);\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: background-color;\n}\n.or-notification.is-size-default[data-v-2a8b1558] {\n  max-width: 48rem;\n}\n.or-notification.is-size-inline[data-v-2a8b1558] {\n  max-width: 27.875rem;\n}\n.or-notification a[data-v-2a8b1558] {\n  font-weight: var(--fw-2);\n  color: var(--c-black);\n}\n.or-notification--icon[data-v-2a8b1558] {\n  display: flex;\n  align-items: center;\n  min-height: var(--alignment-height);\n  margin-right: var(--s-4);\n}\n.or-notification--icon[data-v-2a8b1558] .or-icon {\n  font-size: 1rem;\n}\n.or-notification--content[data-v-2a8b1558] {\n  flex: 1 1 100%;\n  word-break: break-word;\n}\n.or-notification--close[data-v-2a8b1558] {\n  display: flex;\n  height: var(--alignment-height);\n  margin-left: 1rem;\n}\n.or-notification--close[data-v-2a8b1558] .or-icon {\n  font-size: 1rem !important;\n}\n.or-notification.is-type-info[data-v-2a8b1558] {\n  background-color: var(--c-primary-lighten-45);\n}\n.or-notification.is-type-info a[data-v-2a8b1558] {\n  color: var(--c-primary);\n}\n.or-notification.is-type-error[data-v-2a8b1558] {\n  background-color: var(--c-error-lighten-45);\n}\n.or-notification.is-type-error a[data-v-2a8b1558] {\n  color: var(--c-error);\n}\n.or-notification.is-type-warning[data-v-2a8b1558] {\n  background-color: var(--c-warning-lighten-45);\n}\n.or-notification.is-type-warning a[data-v-2a8b1558] {\n  color: var(--c-warning);\n}\n.or-notification.is-type-success[data-v-2a8b1558] {\n  background-color: var(--c-success-lighten-45);\n}\n.or-notification.is-type-success a[data-v-2a8b1558] {\n  color: var(--c-success);\n}";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-2a8b1558";
+script.__file = "src/components/or-notification/OrNotification.vue";
+
+export { OR_NOTIFICATION_TYPE as O, OR_NOTIFICATION_SIZE as a, script as s };

package/dist/v3/OrNotification-91a86ade.js

@@ -0,0 +1,140 @@
+import { defineComponent, ref, computed } from 'vue-demi';
+import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
+import '@vueuse/core';
+import { s as script$2 } from './OrIconButton-e486d6df.js';
+import { s as script$1 } from './OrIcon-e2fa4cf8.js';
+import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, normalizeClass, createVNode, renderSlot, withModifiers } from 'vue';
+
+var NotificationVariant;
+(function (NotificationVariant) {
+  NotificationVariant["Success"] = "success";
+  NotificationVariant["Warning"] = "warning";
+  NotificationVariant["Error"] = "error";
+  NotificationVariant["Info"] = "info";
+})(NotificationVariant || (NotificationVariant = {}));
+
+const NotificationRoot = [
+// Layout
+'flex', 'items-start',
+// Box
+'rounded-md',
+// Sizing
+'px-md', 'py-md', 'gap-md',
+// Typography
+'typography-body-2-regular',
+// Typography (links)
+'links:typography-body-2-bold',
+// Theme
+'theme-foreground-default', 'dark:theme-foreground-default-dark', 'shadow-contextual', 'dark:shadow-contextual-dark'];
+const NotificationRootVariants = {
+  'success': [
+  // Theme
+  'theme-background-success-container', 'dark:theme-background-success-container-dark',
+  // Theme (links)
+  'links:theme-foreground-success', 'dark:links:theme-foreground-success-dark'],
+  'warning': [
+  // Theme
+  'theme-background-warning-container', 'dark:theme-background-warning-container-dark',
+  // Theme (links)
+  'links:theme-foreground-warning', 'dark:links:theme-foreground-warning-dark'],
+  'error': [
+  // Theme
+  'theme-background-error-container', 'dark:theme-background-error-container-dark',
+  // Theme (links)
+  'links:theme-foreground-error', 'dark:links:theme-foreground-error-dark'],
+  'info': [
+  // Theme
+  'theme-background-primary-container', 'dark:theme-background-primary-container-dark',
+  // Theme (links)
+  'links:theme-foreground-primary', 'dark:links:theme-foreground-primary-dark']
+};
+const NotificationIconVariants = {
+  'success': [
+  // Theme
+  'theme-foreground-success', 'dark:theme-foreground-success-dark'],
+  'warning': [
+  // Theme
+  'theme-foreground-warning', 'dark:theme-foreground-warning-dark'],
+  'error': [
+  // Theme
+  'theme-foreground-error', 'dark:theme-foreground-error-dark'],
+  'info': [
+  // Theme
+  'theme-foreground-primary', 'dark:theme-foreground-primary-dark']
+};
+const NotificationAction = [
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+
+var script = defineComponent({
+  name: 'OrNotification',
+  components: {
+    OrIcon: script$1,
+    OrIconButton: script$2
+  },
+  inheritAttrs: false,
+  props: {
+    variant: {
+      type: String,
+      default: NotificationVariant.Info
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs
+    const root = ref();
+    // Styles
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-notification', ...NotificationRoot, ...NotificationRootVariants[props.variant], classAttribute.value]);
+    const iconStyles = computed(() => [...NotificationIconVariants[props.variant]]);
+    const actionStyles = computed(() => [...NotificationAction]);
+    // State
+    const icon = computed(() => {
+      switch (props.variant) {
+        case 'success':
+          return 'check_circle';
+        case 'warning':
+          return 'warning';
+        case 'error':
+          return 'error';
+        case 'info':
+          return 'info';
+      }
+    });
+    return {
+      root,
+      rootStyles,
+      iconStyles,
+      actionStyles,
+      icon
+    };
+  }
+});
+
+const _hoisted_1 = {
+  class: /*#__PURE__*/normalizeClass(['grow'])
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrIcon = resolveComponent("OrIcon");
+  const _component_OrIconButton = resolveComponent("OrIconButton");
+  return openBlock(), createElementBlock("div", mergeProps({
+    ref: "root"
+  }, _ctx.$attrs, {
+    class: _ctx.rootStyles
+  }), [createElementVNode("div", {
+    class: normalizeClass(_ctx.iconStyles)
+  }, [createVNode(_component_OrIcon, {
+    icon: _ctx.icon,
+    variant: 'filled-bold'
+  }, null, 8 /* PROPS */, ["icon"])], 2 /* CLASS */), createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")]), createElementVNode("div", {
+    class: normalizeClass(_ctx.actionStyles)
+  }, [createVNode(_component_OrIconButton, {
+    icon: 'close',
+    onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.$emit('close'), ["stop"]))
+  })], 2 /* CLASS */)], 16 /* FULL_PROPS */);
+}
+
+script.render = render;
+script.__file = "src/components/or-notification-v3/OrNotification.vue";
+
+export { NotificationVariant as N, script as s };

package/dist/v3/OrOverflowMenu-7a177537.js

@@ -0,0 +1,185 @@
+import { defineComponent, ref } from 'vue-demi';
+import { useToggle, onClickOutside } from '@vueuse/core';
+import { s as script$2, a as script$3 } from './OrIconButton-f72cb8d9.js';
+import { resolveComponent, openBlock, createElementBlock, createVNode, withModifiers, createElementVNode, renderSlot, createBlock, withCtx, Fragment, renderList, createCommentVNode } from 'vue';
+import { s as styleInject } from './style-inject.es-4c6f2515.js';
+import { s as script$4, O as OrFloatingPlacements } from './OrFloating-3da814a2.js';
+
+var script$1 = defineComponent({
+  name: 'OrOverflowMenuItem',
+  components: {
+    OrButton: script$2
+  },
+  props: {
+    icon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    isDisabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    closeOnClick: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    handler: {
+      type: Function,
+      required: true
+    }
+  },
+  emits: ['close'],
+  methods: {
+    onClick() {
+      this.handler();
+      if (this.closeOnClick) {
+        this.$emit('close');
+      }
+    }
+  }
+});
+
+const _hoisted_1$1 = {
+  class: "or-overflow-menu-item"
+};
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_button = resolveComponent("or-button");
+  return openBlock(), createElementBlock("div", _hoisted_1$1, [createVNode(_component_or_button, {
+    type: "text",
+    color: "neutral-4",
+    icon: _ctx.icon,
+    content: _ctx.label,
+    "is-disabled": _ctx.isDisabled,
+    onClick: withModifiers(_ctx.onClick, ["prevent"])
+  }, null, 8 /* PROPS */, ["icon", "content", "is-disabled", "onClick"])]);
+}
+
+var css_248z$1 = "/**\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-27c96306 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-27c96306 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-overflow-menu-item .or-button[data-v-27c96306] {\n  justify-content: start;\n  width: 100%;\n  padding: 8px;\n  color: var(--c-neutral-4);\n  white-space: nowrap;\n}\n@media (hover: hover) and (pointer: fine) {\n.or-overflow-menu-item .or-button[data-v-27c96306]:not(:disabled):not(.or-overflow-menu-item .or-button:not(:disabled).is-loading):not(.or-overflow-menu-item .or-button:not(:disabled).is-disabled):not(.or-overflow-menu-item .or-button:not(:disabled).is-readonly):not(.or-overflow-menu-item .or-button:not(:disabled):disabled):not(.or-overflow-menu-item .or-button:not(:disabled).is-focused):not(.or-overflow-menu-item .or-button:not(:disabled):active):hover {\n    color: var(--c-neutral-6);\n}\n}\n@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n.or-overflow-menu-item .or-button[data-v-27c96306]:not(:disabled):not(.or-overflow-menu-item .or-button:not(:disabled).is-loading):not(.or-overflow-menu-item .or-button:not(:disabled).is-disabled):not(.or-overflow-menu-item .or-button:not(:disabled).is-readonly):not(.or-overflow-menu-item .or-button:not(:disabled):disabled):not(.or-overflow-menu-item .or-button:not(:disabled).is-focused):not(.or-overflow-menu-item .or-button:not(:disabled):active):hover {\n    color: var(--c-neutral-6);\n}\n}";
+styleInject(css_248z$1);
+
+script$1.render = render$1;
+script$1.__scopeId = "data-v-27c96306";
+script$1.__file = "src/components/or-overflow-menu/OrOverflowMenuItem.vue";
+
+var script = defineComponent({
+  name: 'OrOverflowMenu',
+  components: {
+    OrIconButton: script$3,
+    OrOverflowMenuItem: script$1,
+    OrFloating: script$4
+  },
+  props: {
+    closeOnClickOutside: {
+      type: Boolean,
+      default: true,
+      required: false
+    },
+    placement: {
+      type: String,
+      required: false,
+      default: OrFloatingPlacements.BOTTOM_END
+    },
+    items: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  },
+  emits: ['open', 'close'],
+  setup(props, {
+    emit
+  }) {
+    const target = ref();
+    const content = ref(null);
+    const trigger = ref();
+    const [isOpen, toggle] = useToggle();
+    const close = () => {
+      toggle(false);
+      emit('close');
+    };
+    const open = () => {
+      if (props.isDisabled) return;
+      toggle(true);
+      emit('open');
+    };
+    onClickOutside(content, evt => {
+      if (evt.composedPath().includes(target.value)) return;
+      if (isOpen.value && props.closeOnClickOutside) close();
+    });
+    return {
+      isOpen,
+      target,
+      content,
+      open,
+      close,
+      trigger
+    };
+  }
+});
+
+const _hoisted_1 = {
+  ref: "target",
+  class: "dropdown-container"
+};
+const _hoisted_2 = {
+  ref: "content",
+  class: "content"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_icon_button = resolveComponent("or-icon-button");
+  const _component_or_overflow_menu_item = resolveComponent("or-overflow-menu-item");
+  const _component_or_floating = resolveComponent("or-floating");
+  return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", {
+    ref: "trigger",
+    class: "trigger",
+    onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.isOpen ? _ctx.close() : _ctx.open(), ["prevent", "stop"]))
+  }, [renderSlot(_ctx.$slots, "trigger", {}, () => [createVNode(_component_or_icon_button, {
+    icon: "more_vert",
+    class: "more_icon",
+    "icon-color": "neutral-6",
+    "is-disabled": _ctx.isDisabled
+  }, null, 8 /* PROPS */, ["is-disabled"])])], 512 /* NEED_PATCH */), _ctx.isOpen ? (openBlock(), createBlock(_component_or_floating, {
+    key: 0,
+    trigger: _ctx.trigger,
+    placement: _ctx.placement,
+    "is-using-shift": "",
+    "is-using-flip": ""
+  }, {
+    default: withCtx(() => [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "content", {
+      close: _ctx.close
+    }, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, item => {
+      return openBlock(), createBlock(_component_or_overflow_menu_item, {
+        key: item.label,
+        handler: item.handler,
+        label: item.label,
+        icon: item.icon,
+        "close-on-click": item.closeOnClick || false,
+        "is-disabled": item.isDisabled,
+        onClose: _ctx.close
+      }, null, 8 /* PROPS */, ["handler", "label", "icon", "close-on-click", "is-disabled", "onClose"]);
+    }), 128 /* KEYED_FRAGMENT */))])], 512 /* NEED_PATCH */)]),
+
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["trigger", "placement"])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */);
+}
+
+var css_248z = ".dropdown-container[data-v-3d084a5a] {\n  position: relative;\n  width: fit-content;\n  height: fit-content;\n}\n.dropdown-container .trigger[data-v-3d084a5a] {\n  cursor: pointer;\n}\n.content[data-v-3d084a5a] {\n  right: 0;\n  z-index: 1;\n  width: fit-content;\n  height: fit-content;\n  background-color: var(--c-neutral-0);\n  border-radius: 3px;\n  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);\n}";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-3d084a5a";
+script.__file = "src/components/or-overflow-menu/OrOverflowMenu.vue";
+
+export { script as s };