@onereach/ui-components 2.70.0-beta.2102.0 → 2.70.0-beta.2121.0

package/dist/esm/v2/index.js

@@ -1,61 +1,61 @@
-export { O as OR_AVATAR_SIZE, _ as OrAvatar } from './OrAvatar-c6a1fdf2.js';
+export { O as OR_AVATAR_SIZE, _ as OrAvatar } from './OrAvatar-4824c57f.js';
 export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from './OrAvatar-0afdef36.js';
 export { _ as OrBottomSheetV3 } from './OrBottomSheet-16c2e610.js';
 export { _ as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonViews } from './OrButton-2ca1c3d6.js';
-export { _ as OrButtonV2 } from './OrButton-2f25c464.js';
-export { _ as OrIconButton, _ as OrIconButtonV2 } from './OrIconButton-967a1c67.js';
-export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTTON_TYPE, I as ICON_BUTTON_TYPE } from './OrIconButton.vue_rollup-plugin-vue_script-23fca939.js';
+export { _ as OrButtonV2 } from './OrButton-c4f9955b.js';
+export { _ as OrIconButton } from './OrIconButton-014e86a7.js';
+export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTTON_TYPE, I as ICON_BUTTON_TYPE } from './OrIconButton.vue_rollup-plugin-vue_script-9fb7b7ab.js';
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, _ as OrButtonV3 } from './OrButton-357a5756.js';
 export { _ as OrCard } from './OrCard-b7268256.js';
-export { C as CARD_COLLECTION_LAYOUT, _ as OrCardCollection } from './OrCardCollection-8a41899e.js';
+export { C as CARD_COLLECTION_LAYOUT, _ as OrCardCollection } from './OrCardCollection-f6b07557.js';
 export { C as CardCollectionView, _ as OrCardCollectionV3 } from './OrCardCollection-4f001551.js';
 export { _ as OrCardV3 } from './OrCard-de799db0.js';
-export { a as OrCarousel, _ as OrCarouselItem } from './OrCarouselItem-b88f64f5.js';
-export { _ as OrCheckbox } from './OrCheckbox-f621a60f.js';
+export { a as OrCarousel, _ as OrCarouselItem } from './OrCarouselItem-4e2cf3d8.js';
+export { _ as OrCheckbox } from './OrCheckbox-915f1f0a.js';
 export { _ as OrCheckboxV3 } from './OrCheckbox-567e387c.js';
-export { _ as OrChip } from './OrChips.vue_rollup-plugin-vue_script-33d7b9c1.js';
-export { _ as OrChips } from './OrChips-581e5f48.js';
-export { _ as OrCode, O as OrCodeLanguages } from './OrCode-b9fac554.js';
-export { _ as OrCollapse } from './OrCollapse-cff74fb1.js';
-export { _ as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-aa0e432f.js';
-export { _ as OrConfirm } from './OrConfirm-22efda7e.js';
-export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-a8ae3f75.js';
-export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-d302c43c.js';
+export { _ as OrChip } from './OrChips.vue_rollup-plugin-vue_script-aa8fedaa.js';
+export { _ as OrChips } from './OrChips-5e0063be.js';
+export { _ as OrCode, O as OrCodeLanguages } from './OrCode-41dd5f9b.js';
+export { _ as OrCollapse } from './OrCollapse-4d892ca3.js';
+export { _ as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-75abefdd.js';
+export { _ as OrConfirm } from './OrConfirm-d7112dd3.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-b0b2e43c.js';
+export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-349df9b2.js';
 export { _ as OrError } from './OrError-081130bb.js';
 export { _ as OrErrorTagV3 } from './OrErrorTag-782dd714.js';
 export { _ as OrErrorV3 } from './OrError-d267ee9a.js';
 export { a as ExpansionPanelColor, E as ExpansionPanelVariant, _ as OrExpansionPanelV3 } from './OrExpansionPanel-968ddc61.js';
 export { F as FabColor, _ as OrFabV3 } from './OrFab-26106618.js';
-export { _ as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-14944a18.js';
+export { _ as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-89d6582a.js';
 export { _ as OrHint } from './OrHint-c45f1e09.js';
 export { _ as OrHintV3 } from './OrHint-42dc9ebb.js';
-export { _ as OrIcon, O as OrIconColors, a as OrIconType } from './OrIcon-84b90cfe.js';
+export { _ as OrIcon, O as OrIconColors, a as OrIconType } from './OrIcon-819166f6.js';
 export { I as IconButtonColor, _ as OrIconButtonV3 } from './OrIconButton-e17e4944.js';
 export { I as IconButtonSize, I as IconSize, a as IconVariant, _ as OrIconV3 } from './OrIcon-5e394c62.js';
 export { I as InlineInputBoxSize, I as InlineInputSize, _ as OrInlineInputBoxV3 } from './OrInlineInputBox-fefd4fbd.js';
 export { I as InlineInputType, _ as OrInlineInputV3 } from './OrInlineInput-cfeeea33.js';
-export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, _ as OrInlineTextEdit } from './OrInlineTextEdit-234c431a.js';
+export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, _ as OrInlineTextEdit } from './OrInlineTextEdit-b47cfc2d.js';
 export { _ as OrInlineTextareaV3 } from './OrInlineTextarea-897b5377.js';
 export { a as InputBoxSize, I as InputBoxVariant, a as InputSize, _ as OrInputBoxV3, a as SearchSize, a as SelectSize, a as TextareaSize } from './OrInputBox-4d5a318d.js';
 export { I as InputType, _ as OrInputV3 } from './OrInput-2f16a7ac.js';
-export { a as OrNumberInput, b as OrPassword, _ as OrTextarea } from './OrPassword-732044da.js';
-export { _ as OrInput } from './OrSearch.vue_rollup-plugin-vue_script-455b796f.js';
-export { _ as OrSearch } from './OrSearch-e0123f41.js';
+export { a as OrNumberInput, b as OrPassword, _ as OrTextarea } from './OrPassword-1fa97156.js';
+export { _ as OrInput } from './OrSearch.vue_rollup-plugin-vue_script-197d77fc.js';
+export { _ as OrSearch } from './OrSearch-0589d17d.js';
 export { _ as OrLabel } from './OrLabel-33b41516.js';
 export { L as LabelVariant, _ as OrLabelV3 } from './OrLabel-2a9f1477.js';
 export { L as LinkColor, _ as OrLinkV3 } from './OrLink-80742a17.js';
-export { _ as OrList } from './OrList-06df2498.js';
-export { _ as OrListOfInputs } from './OrListOfInputs-41cd6784.js';
+export { _ as OrList } from './OrList-d4781f7b.js';
+export { _ as OrListOfInputs } from './OrListOfInputs-50aa1ef1.js';
 export { L as LoaderViews, _ as OrLoader } from './OrLoader-003941a2.js';
 export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, _ as OrLoaderV3 } from './OrLoader-f857d55b.js';
 export { _ as OrMenuItemV3 } from './OrMenuItem-c7f28480.js';
 export { _ as OrMenuV3 } from './OrMenu-df27d0ef.js';
 export { P as MenuPlacement, _ as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-9bafbdb4.js';
-export { _ as OrModal, O as OrModalSizes } from './OrModal-443c063c.js';
+export { _ as OrModal, O as OrModalSizes } from './OrModal-97e83549.js';
 export { M as ModalSize, _ as OrModalV3 } from './OrModal-5b37a50a.js';
-export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, _ as OrNotification } from './OrNotification-4da59ba1.js';
+export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, _ as OrNotification } from './OrNotification-a9231a83.js';
 export { N as NotificationVariant, _ as OrNotificationV3 } from './OrNotification-c765f111.js';
-export { _ as OrOverflowMenu } from './OrOverflowMenu-25135bf9.js';
+export { _ as OrOverflowMenu } from './OrOverflowMenu-10a4166a.js';
 export { _ as OrOverlay } from './OrOverlay-3b52865d.js';
 export { _ as OrOverlayV3 } from './OrOverlay-18ba2dc6.js';
 export { _ as OrProgress, O as OrProgressColors, a as OrProgressTypes } from './OrProgress-4ee24824.js';
@@ -65,15 +65,15 @@ export { _ as OrRadioGroup } from './OrRadioGroup-d9d32cba.js';
 export { _ as OrRadioV3 } from './OrRadio-848ce55d.js';
 export { _ as OrSearchV3 } from './OrSearch-ddb7c1fe.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-e8dce8f9.js';
-export { _ as OrSelect } from './OrSelect-666c4c2c.js';
-export { _ as OrSelectV3 } from './OrSelect-ac382aa6.js';
+export { _ as OrSelect } from './OrSelect-dae2b069.js';
+export { _ as OrSelectV3 } from './OrSelect-f0ff5a85.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-7d6125bb.js';
 export { O as OrSidebarPlacement, _ as OrSidebarV3 } from './OrSidebar-fabc7bc9.js';
 export { _ as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-cc94bdc9.js';
 export { _ as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from './OrSkeletonText-950be6a2.js';
-export { _ as OrSlider } from './OrSlider-2e956e0a.js';
+export { _ as OrSlider } from './OrSlider-f7b9c7c2.js';
 export { _ as OrSortHeaderV3 } from './OrSortHeader-19bf94ca.js';
-export { _ as OrStepper } from './OrStepper-72bb83d2.js';
+export { _ as OrStepper } from './OrStepper-4f44e7b7.js';
 export { _ as OrSwitch } from './OrSwitch-f25f27f9.js';
 export { _ as OrSwitchV3 } from './OrSwitch-13b6a7ee.js';
 export { _ as OrTab } from './OrTab-eade8ab6.js';
@@ -81,24 +81,25 @@ export { _ as OrTabHeaderItem } from './OrTabHeaderItem-d1a340d1.js';
 export { _ as OrTabV3 } from './OrTab-702e7335.js';
 export { _ as OrTabs } from './OrTabs-e1c13d41.js';
 export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-71bd3fd2.js';
-export { _ as OrTag } from './OrTag-9448145a.js';
+export { _ as OrTag } from './OrTag-c1fa6901.js';
 export { _ as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-cf9c6195.js';
 export { _ as OrTeleport } from './OrTeleportVue2-8ef4ceca.js';
 export { _ as OrTeleportV3 } from './OrTeleport.vue2-fb92f29f.js';
 export { _ as OrTextV3 } from './OrText-ba5a2b6c.js';
 export { _ as OrTextareaV3 } from './OrTextarea-6712a150.js';
-export { _ as OrTextbox, T as TextboxTypes } from './OrTextbox-0309ca15.js';
-export { _ as OrToast, a as OrToastContainer } from './OrToastContainer-e47e6cfb.js';
+export { _ as OrTextbox, T as TextboxTypes } from './OrTextbox-2594c980.js';
+export { _ as OrToast, a as OrToastContainer } from './OrToastContainer-2fbd4358.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-4fbe0e5a.js';
 export { a as OrToastContainerV3, _ as OrToastV3, t as TypesV3 } from './types-8d58d7b5.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-0665462d.js';
-export { _ as OrTooltip } from './OrTooltip-0798a371.js';
-export { _ as OrTooltipContent } from './OrTooltip.vue_rollup-plugin-vue_script-5f58106c.js';
+export { _ as OrTooltip } from './OrTooltip-614b016d.js';
+export { _ as OrTooltipContent } from './OrTooltip.vue_rollup-plugin-vue_script-63559536.js';
 export { _ as OrTooltipV3 } from './OrTooltip-513bee30.js';
+export { _ as OrRichTextEditorV3 } from './OrRichTextEditor-c14677a3.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
 export { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 export { u as useElevation } from './useElevation-31bfe1f6.js';
-export { u as useOverflow } from './useOverflow-a3dc6212.js';
+export { u as useOverflow } from './useOverflow-af6161c8.js';
 export { u as useResponsive } from './useResponsive-a02e95b7.js';
 export { u as useToggle } from './useToggle-29e4d7c7.js';
 import { R as RX_ABBREVIATION_FROM_STRING } from './color-1f348774.js';
@@ -107,7 +108,6 @@ import 'lodash';
 import './normalize-component-6e8e3d80.js';
 import './browser-82dea9ed.js';
 import '@vueuse/core';
-import './OrButton.vue_rollup-plugin-vue_script-f2c31f06.js';
 import '@splidejs/splide';
 import '@codemirror/state';
 import 'codemirror';
@@ -117,7 +117,7 @@ import '@codemirror/lang-json';
 import '@codemirror/lang-javascript';
 import '@codemirror/lang-markdown';
 import './px-to-rem-0b26b83e.js';
-import './dom-7a41831b.js';
+import './dom-3a15d036.js';
 import '@vueuse/math';
 import '@floating-ui/dom';
 import 'uuid';
@@ -125,6 +125,26 @@ import 'sortablejs';
 import '@vueuse/integrations/useFocusTrap';
 import 'portal-vue/dist/portal-vue.esm.js';
 import 'portal-vue';
+import 'prosemirror-markdown';
+import 'prosemirror-model';
+import 'marked';
+import '@tiptap/extension-paragraph';
+import '@tiptap/extension-bullet-list';
+import '@tiptap/extension-list-item';
+import '@tiptap/extension-ordered-list';
+import '@tiptap/extension-strike';
+import '@tiptap/extension-italic';
+import '@tiptap/extension-hard-break';
+import '@tiptap/extension-bold';
+import '@tiptap/extension-code-block';
+import '@tiptap/extension-blockquote';
+import '@tiptap/extension-link';
+import '@tiptap/extension-highlight';
+import '@tiptap/core';
+import '@tiptap/starter-kit';
+import '@tiptap/extension-underline';
+import '@tiptap/extension-heading';
+import '@tiptap/extension-placeholder';
 
 function getAbbreviation(text, limit) {
   var _a;

package/dist/esm/v2/useOverflow-af6161c8.js

@@ -0,0 +1,64 @@
+import { useMutationObserver, useResizeObserver } from '@vueuse/core';
+import { isRef, ref, watch } from 'vue-demi';
+
+function useOverflow(container) {
+  const containerRef = isRef(container) ? container : ref(container);
+  // State
+  const innerItemsRef = ref([]);
+  const outerItemsRef = ref([]);
+  // Functions
+  function updateState() {
+    const container = containerRef.value;
+    if (container) {
+      const update = [...container.children].reduce(({
+        innerItems,
+        outerItems
+      }, child) => {
+        const item = child;
+        const {
+          x: itemOffset,
+          width: itemWidth
+        } = item.getBoundingClientRect();
+        const {
+          x: containerOffset,
+          width: containerWidth
+        } = container.getBoundingClientRect();
+        if (itemOffset + itemWidth > containerOffset + containerWidth) {
+          item.style.setProperty('visibility', 'hidden');
+          return {
+            innerItems,
+            outerItems: [...outerItems, item]
+          };
+        } else {
+          item.style.removeProperty('visibility');
+          return {
+            innerItems: [...innerItems, item],
+            outerItems
+          };
+        }
+      }, {
+        innerItems: [],
+        outerItems: []
+      });
+      innerItemsRef.value = update.innerItems;
+      outerItemsRef.value = update.outerItems;
+    } else {
+      innerItemsRef.value = [];
+      outerItemsRef.value = [];
+    }
+  }
+  // Effects
+  watch(containerRef, updateState, {
+    immediate: true
+  });
+  useMutationObserver(containerRef, updateState, {
+    childList: true
+  });
+  useResizeObserver(containerRef, updateState);
+  return {
+    innerItems: innerItemsRef,
+    outerItems: outerItemsRef
+  };
+}
+
+export { useOverflow as u };

package/dist/esm/v3/OrAvatar-2808a314.js

@@ -0,0 +1,89 @@
+import { defineComponent } from 'vue-demi';
+import { s as script$1 } from './OrIcon-669503c3.js';
+import _ from 'lodash';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock } from 'vue';
+import { s as styleInject } from './style-inject.es-4c6f2515.js';
+
+var OR_AVATAR_SIZE;
+(function (OR_AVATAR_SIZE) {
+  OR_AVATAR_SIZE["SMALL"] = "small";
+  OR_AVATAR_SIZE["MEDIUM"] = "medium";
+  OR_AVATAR_SIZE["LARGE"] = "large";
+})(OR_AVATAR_SIZE || (OR_AVATAR_SIZE = {}));
+
+var script = defineComponent({
+  name: 'OrAvatar',
+  components: {
+    OrIcon: script$1
+  },
+  props: {
+    src: {
+      type: String,
+      default: '',
+      required: false
+    },
+    size: {
+      type: String,
+      default: OR_AVATAR_SIZE.MEDIUM,
+      required: false,
+      validator: value => _.includes(_.values(OR_AVATAR_SIZE), value)
+    },
+    icon: {
+      type: String,
+      default: 'account_circle',
+      required: false
+    }
+  },
+  data(props) {
+    return {
+      showImg: !!props.src
+    };
+  },
+  computed: {
+    avatarClasses() {
+      return ['or-avatar', {
+        [`is-${this.size}-size`]: !!this.size
+      }];
+    }
+  },
+  watch: {
+    src(val) {
+      this.showImg = !!val;
+    }
+  },
+  methods: {
+    showImage() {
+      this.showImg = true;
+    },
+    hideImage() {
+      this.showImg = false;
+    }
+  }
+});
+
+const _hoisted_1 = ["src"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_icon = resolveComponent("or-icon");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.avatarClasses)
+  }, [_ctx.showImg ? (openBlock(), createElementBlock("img", {
+    key: 0,
+    src: _ctx.src,
+    class: "image",
+    alt: "avatar",
+    onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.showImage && _ctx.showImage(...args)),
+    onError: _cache[1] || (_cache[1] = (...args) => _ctx.hideImage && _ctx.hideImage(...args))
+  }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1)) : (openBlock(), createBlock(_component_or_icon, {
+    key: 1,
+    icon: _ctx.icon
+  }, null, 8 /* PROPS */, ["icon"]))], 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-ed355150 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-ed355150 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-avatar[data-v-ed355150], .or-avatar > .image[data-v-ed355150] {\n  border-radius: 9999px;\n  object-fit: cover;\n}\n.or-avatar.is-small-size[data-v-ed355150], .or-avatar.is-small-size > .image[data-v-ed355150] {\n  width: 32px;\n  height: 32px;\n}\n.or-avatar.is-small-size[data-v-ed355150] .or-icon {\n  font-size: 2rem;\n  line-height: 2rem;\n}\n.or-avatar.is-medium-size[data-v-ed355150], .or-avatar.is-medium-size > .image[data-v-ed355150] {\n  width: 40px;\n  height: 40px;\n}\n.or-avatar.is-medium-size[data-v-ed355150] .or-icon {\n  font-size: 2.5rem;\n  line-height: 2.5rem;\n}\n.or-avatar.is-large-size[data-v-ed355150], .or-avatar.is-large-size > .image[data-v-ed355150] {\n  width: 80px;\n  height: 80px;\n}\n.or-avatar.is-large-size[data-v-ed355150] .or-icon {\n  font-size: 5rem;\n  line-height: 5rem;\n}";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-ed355150";
+script.__file = "src/components/or-avatar/OrAvatar.vue";
+
+export { OR_AVATAR_SIZE as O, script as s };

package/dist/esm/v3/OrCardCollection-a5e326ef.js

@@ -0,0 +1,189 @@
+import { defineComponent, ref } from 'vue-demi';
+import { s as script$1 } from './OrCard-e3a5aea4.js';
+import { s as script$2 } from './OrIcon-669503c3.js';
+import { d as script$3 } from './OrSearch-7cb2c91c.js';
+import { a as script$4 } from './OrIconButton-8be9c89f.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, toDisplayString, createVNode, withCtx, createTextVNode, createCommentVNode, renderSlot, createBlock, normalizeProps, guardReactiveProps } from 'vue';
+import { s as styleInject } from './style-inject.es-4c6f2515.js';
+
+var CARD_COLLECTION_LAYOUT;
+(function (CARD_COLLECTION_LAYOUT) {
+  CARD_COLLECTION_LAYOUT["GRID"] = "grid";
+  CARD_COLLECTION_LAYOUT["LIST"] = "list";
+})(CARD_COLLECTION_LAYOUT || (CARD_COLLECTION_LAYOUT = {}));
+
+var script = defineComponent({
+  name: 'OrCardCollection',
+  components: {
+    OrCard: script$1,
+    OrIcon: script$2,
+    OrSearch: script$3,
+    OrIconButton: script$4
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    activeItem: {
+      type: Object,
+      default: undefined
+    },
+    layoutOptions: {
+      type: Array,
+      default: () => [{
+        name: 'grid',
+        icon: 'apps'
+      }, {
+        name: 'list',
+        icon: 'menu'
+      }]
+    },
+    layout: {
+      type: String,
+      default: CARD_COLLECTION_LAYOUT.GRID
+    },
+    sortableColumns: {
+      type: Array,
+      default: undefined
+    },
+    filterPlaceholder: {
+      type: String,
+      default: 'Search'
+    }
+  },
+  emits: ['filter', 'sort', 'layoutChanged', 'itemClicked'],
+  setup(props, {
+    slots
+  }) {
+    var _a;
+    if (!slots.default) throw new Error('Can\'t render collection without default template for cards.');
+    const sortingDirection = ref('asc');
+    const filterValue = ref('');
+    const sortingColumn = ref(((_a = props.sortableColumns) === null || _a === void 0 ? void 0 : _a.length) ? props.sortableColumns[0].name : '');
+    const selectedLayout = ref(props.layout);
+    return {
+      sortingDirection,
+      filterValue,
+      sortingColumn,
+      selectedLayout
+    };
+  },
+  computed: {
+    rootClasses() {
+      return ['or-card-collection', `or-card-collection-${this.selectedLayout}`];
+    },
+    sortingDirectionIcon() {
+      const icon = this.sortingDirection === 'asc' ? 'arrow-upward' : 'arrow-downward';
+      return icon;
+    }
+  },
+  methods: {
+    selectSortable(column) {
+      const nextValue = this.sortingDirection === 'asc' ? 'desc' : 'asc';
+      this.sortingDirection = this.sortingColumn === column.name ? nextValue : this.sortingDirection;
+      this.sortingColumn = column.name;
+      const eventPayload = {
+        column,
+        direction: this.sortingDirection
+      };
+      this.$emit('sort', eventPayload);
+    },
+    emitFilterChange() {
+      this.$emit('filter', this.filterValue);
+    },
+    selectLayout(layout) {
+      this.selectedLayout = layout;
+      this.$emit('layoutChanged', this.selectedLayout);
+    },
+    handleClick(item) {
+      this.$emit('itemClicked', item);
+    }
+  }
+});
+
+const _hoisted_1 = {
+  class: "or-card-collection-toolbar"
+};
+const _hoisted_2 = {
+  class: "or-card-collection-sorting"
+};
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = {
+  key: 0,
+  class: "or-card-collection-sort-direction"
+};
+const _hoisted_5 = {
+  class: "or-card-collection-filter"
+};
+const _hoisted_6 = {
+  class: "or-card-collection-layout-buttons"
+};
+const _hoisted_7 = {
+  key: 0,
+  class: "or-card-collection-extra-tools"
+};
+const _hoisted_8 = {
+  class: "or-card-collection-wrapper"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_icon = resolveComponent("or-icon");
+  const _component_or_search = resolveComponent("or-search");
+  const _component_or_icon_button = resolveComponent("or-icon-button");
+  const _component_or_card = resolveComponent("or-card");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.rootClasses)
+  }, [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [_ctx.sortableColumns ? (openBlock(true), createElementBlock(Fragment, {
+    key: 0
+  }, renderList(_ctx.sortableColumns, column => {
+    return openBlock(), createElementBlock("div", {
+      key: column.name,
+      class: normalizeClass({
+        'or-card-collection-sorting-column': true,
+        'sorting-selected': _ctx.sortingColumn === column.name
+      }),
+      "class.selected": "",
+      onClick: $event => _ctx.selectSortable(column)
+    }, [createElementVNode("span", null, toDisplayString(column.label), 1 /* TEXT */), _ctx.sortingColumn === column.name ? (openBlock(), createElementBlock("span", _hoisted_4, [createVNode(_component_or_icon, null, {
+      default: withCtx(() => [createTextVNode(toDisplayString(_ctx.sortingDirection === 'asc' ? 'arrow_upward' : 'arrow_downward'), 1 /* TEXT */)]),
+
+      _: 1 /* STABLE */
+    })])) : createCommentVNode("v-if", true)], 10 /* CLASS, PROPS */, _hoisted_3);
+  }), 128 /* KEYED_FRAGMENT */)) : createCommentVNode("v-if", true)]), createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "filters", {}, () => [createVNode(_component_or_search, {
+    modelValue: _ctx.filterValue,
+    "onUpdate:modelValue": [_cache[0] || (_cache[0] = $event => _ctx.filterValue = $event), _ctx.emitFilterChange],
+    placeholder: _ctx.filterPlaceholder
+  }, null, 8 /* PROPS */, ["modelValue", "placeholder", "onUpdate:modelValue"])])]), createElementVNode("div", _hoisted_6, [renderSlot(_ctx.$slots, "layoutButtons", {}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.layoutOptions, layoutOption => {
+    return openBlock(), createBlock(_component_or_icon_button, {
+      key: layoutOption.name,
+      icon: layoutOption.icon,
+      "icon-color": _ctx.selectedLayout === layoutOption.name ? 'neutral-6' : 'neutral-4',
+      onClick: $event => _ctx.selectLayout(layoutOption.name)
+    }, null, 8 /* PROPS */, ["icon", "icon-color", "onClick"]);
+  }), 128 /* KEYED_FRAGMENT */))])]), _ctx.$slots.toolsAppend ? (openBlock(), createElementBlock("div", _hoisted_7, [renderSlot(_ctx.$slots, "toolsAppend")])) : createCommentVNode("v-if", true)]), createElementVNode("div", _hoisted_8, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (props, index) => {
+    return openBlock(), createBlock(_component_or_card, {
+      key: props.vforkey || index,
+      active: _ctx.activeItem === props,
+      onClick: $event => _ctx.handleClick(props)
+    }, {
+      default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+        props,
+        items: _ctx.items,
+        index
+      })))]),
+      _: 2 /* DYNAMIC */
+    }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["active", "onClick"]);
+  }), 128 /* KEYED_FRAGMENT */))])], 2 /* CLASS */);
+}
+
+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-059ac3e2 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-059ac3e2 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-card-collection .or-card-collection-toolbar[data-v-059ac3e2] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  column-gap: var(--s-4);\n  margin: 0 var(--s-4);\n}\n.or-card-collection .or-card-collection-toolbar .or-card-collection-sorting[data-v-059ac3e2] {\n  flex-grow: 1;\n  cursor: pointer;\n}\n.or-card-collection .or-card-collection-toolbar .or-card-collection-sorting .or-card-collection-sorting-column[data-v-059ac3e2] {\n  display: inline-flex;\n  margin: var(--s-2) var(--s-6);\n  text-transform: capitalize;\n  color: var(--c-neutral-4);\n  font-size: var(--fs-0);\n  font-weight: var(--fw-0);\n  letter-spacing: 0;\n  line-height: var(--lh-0);\n  user-select: none;\n}\n.or-card-collection .or-card-collection-toolbar .or-card-collection-sorting .or-card-collection-sorting-column.sorting-selected[data-v-059ac3e2] {\n  color: var(--c-neutral-6);\n  font-weight: bold;\n}\n.or-card-collection .or-card-collection-toolbar .or-card-collection-sorting .or-card-collection-sorting-column.sorting-selected .or-card-collection-sort-direction[data-v-059ac3e2] {\n  height: 14px;\n  width: 14px;\n  margin-left: var(--s-1);\n}\n.or-card-collection .or-card-collection-toolbar .or-card-collection-layout-buttons .or-icon-button[data-v-059ac3e2] {\n  border-radius: 0;\n}\n.or-card-collection .or-card-collection-wrapper[data-v-059ac3e2] {\n  display: flex;\n  margin-top: var(--s-5);\n}\n.or-card-collection.or-card-collection-grid .or-card-collection-wrapper[data-v-059ac3e2] {\n  flex-flow: row wrap;\n}\n.or-card-collection.or-card-collection-grid .or-card-collection-wrapper .or-card[data-v-059ac3e2] {\n  margin-right: auto;\n}\n.or-card-collection.or-card-collection-list .or-card-collection-wrapper[data-v-059ac3e2] {\n  flex-direction: column;\n}";
+styleInject(css_248z$1);
+
+var css_248z = ".or-card-collection-filter .or-textbox .or-textbox--input {\n  max-width: 256px;\n  height: 30px;\n}\n.or-card-collection-sort-direction .or-icon {\n  font-size: 1rem;\n}";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-059ac3e2";
+script.__file = "src/components/or-card-collection/OrCardCollection.vue";
+
+export { CARD_COLLECTION_LAYOUT as C, script as s };