@onereach/ui-components 4.11.1 → 4.11.3-beta.2972.0

package/dist/esm/v2/{types-a74e1e20.js → types-f010f8b9.js}

@@ -5,7 +5,7 @@ import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { _ as __vue_component__$4 } from './OrTeleport.vue2-424c7f33.js';
 import { T as ToastType, P as PositionsX, b as PositionsY, c as TransitionType, d as useToastEventBus, a as useQueue } from './useToast-a1332cc2.js';
-import { _ as __vue_component__$2 } from './OrIconButton-2ab8fa02.js';
+import { _ as __vue_component__$2 } from './OrIconButton-e7517e6d.js';
 import { _ as __vue_component__$3 } from './OrLoader-b0c381f9.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/esm/v3/{OrCardCollection-4516594a.js → OrCardCollection-655431a8.js}

@@ -1,21 +1,15 @@
 import { defineComponent, computed, ref, watch } from 'vue-demi';
-import { s as script$3 } from './OrButton-c2b6aa9e.js';
-import { s as script$2 } from './OrIconButton-00f8f0c7.js';
-import { s as script$6 } from './OrIcon-62793572.js';
-import { s as script$5 } from './OrMenuItem-dbee450f.js';
-import { s as script$4 } from './OrMenu-dbe1db1e.js';
-import './OrPopover-94dc1203.js';
-import { s as script$7 } from './OrSearch-051adc07.js';
+import { s as script$2 } from './OrIconButton-0edf0894.js';
+import { s as script$4 } from './OrSearch-e690aff6.js';
 import './OrInputBox-32b37b17.js';
-import { openBlock, createElementBlock, normalizeClass, Fragment, renderList, renderSlot, mergeProps, createTextVNode, toDisplayString, resolveComponent, createElementVNode, createVNode, withCtx, createBlock, createCommentVNode, normalizeProps, guardReactiveProps } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, Fragment, renderList, renderSlot, mergeProps, createTextVNode, toDisplayString, resolveComponent, createElementVNode, createBlock, createCommentVNode, createVNode, normalizeProps, guardReactiveProps, withCtx } from 'vue';
+import { s as script$3 } from './OrSortingV3-bbf11809.js';
 
 const CardCollectionRoot = [
 // Layout
 'layout-column',
 // Spacing
-'gap-md', 'max-h-full',
-// Overflow
-'overflow-hidden'];
+'gap-md', 'max-h-full'];
 const CardCollectionToolbar = [
 // Layout
 'layout-row justify-between',
@@ -34,11 +28,14 @@ const CardCollectionContent = [
 // Spacing
 'gap-sm md:gap-md',
 // Overflow
-'overflow-auto'];
+'overflow-y-auto', 'p-xs*', '-m-xs*'
+// '-mr-sm*',
+];
+
 const CardCollectionContentViews = {
   'grid': [
   // Layout
-  'sm:grid-cols-1', 'md:grid-cols-2', 'lg:grid-cols-4', 'xl:grid-cols-6'],
+  'grid-cols-1', 'md:grid-cols-5'],
   'list': ['grid-cols-1']
 };
 
@@ -98,11 +95,8 @@ var script = defineComponent({
   components: {
     OrCardCollectionView: script$1,
     OrIconButton: script$2,
-    OrButton: script$3,
-    OrMenu: script$4,
-    OrMenuItem: script$5,
-    OrIcon: script$6,
-    OrSearch: script$7
+    OrSorting: script$3,
+    OrSearch: script$4
   },
   props: {
     items: {
@@ -143,8 +137,6 @@ var script = defineComponent({
   setup(props, context) {
     // Refs
     const root = ref();
-    const sortMenu = ref();
-    const sortButton = ref();
     // Styles
     const rootStyles = computed(() => ['or-card-collection-v3', ...CardCollectionRoot]);
     const toolbarStyles = computed(() => [...CardCollectionToolbar]);
@@ -155,15 +147,11 @@ var script = defineComponent({
     });
     // State
     const proxyView = ref(props.view);
-    const proxySort = ref(props.sort);
     const proxySearch = ref(props.search);
     // Methods
     function switchView(view) {
       proxyView.value = view;
     }
-    function handleSort(sort) {
-      proxySort.value = sort;
-    }
     function handleSearch(search) {
       proxySearch.value = search;
     }
@@ -174,12 +162,6 @@ var script = defineComponent({
     watch(proxyView, value => {
       context.emit('viewChange', value);
     });
-    watch(() => props.sort, value => {
-      proxySort.value = value;
-    });
-    watch(proxySort, value => {
-      context.emit('sortChange', value);
-    });
     watch(() => props.search, value => {
       proxySearch.value = value;
     });
@@ -188,17 +170,13 @@ var script = defineComponent({
     });
     return {
       root,
-      sortMenu,
-      sortButton,
       rootStyles,
       toolbarStyles,
       toolbarPanelStyles,
       proxyView,
-      proxySort,
       proxySearch,
       sortLabel,
       switchView,
-      handleSort,
       handleSearch
     };
   }
@@ -208,10 +186,7 @@ const _hoisted_1 = {
   class: "layout-row gap-sm"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_OrIcon = resolveComponent("OrIcon");
-  const _component_OrButton = resolveComponent("OrButton");
-  const _component_OrMenuItem = resolveComponent("OrMenuItem");
-  const _component_OrMenu = resolveComponent("OrMenu");
+  const _component_OrSorting = resolveComponent("OrSorting");
   const _component_OrSearch = resolveComponent("OrSearch");
   const _component_OrIconButton = resolveComponent("OrIconButton");
   const _component_OrCardCollectionView = resolveComponent("OrCardCollectionView");
@@ -222,55 +197,31 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass(_ctx.toolbarStyles)
   }, [createElementVNode("div", {
     class: normalizeClass(_ctx.toolbarPanelStyles)
-  }, [_ctx.sortOptions.length ? (openBlock(), createElementBlock(Fragment, {
-    key: 0
-  }, [createVNode(_component_OrButton, {
-    ref: "sortButton",
-    variant: "link",
-    color: "inherit",
-    onClick: _cache[0] || (_cache[0] = $event => _ctx.sortMenu.toggle())
-  }, {
-    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.sortLabel) + " ", 1 /* TEXT */), _ctx.sortMenu ? (openBlock(), createBlock(_component_OrIcon, {
-      key: 0,
-      icon: _ctx.sortMenu.isOpen ? 'arrow_drop_up' : 'arrow_drop_down'
-    }, null, 8 /* PROPS */, ["icon"])) : createCommentVNode("v-if", true)]),
-    _: 1 /* STABLE */
-  }, 512 /* NEED_PATCH */), createVNode(_component_OrMenu, {
-    ref: "sortMenu",
-    trigger: _ctx.sortButton && _ctx.sortButton.root
-  }, {
-    default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.sortOptions, sortItem => {
-      return openBlock(), createBlock(_component_OrMenuItem, {
-        key: sortItem,
-        onClick: $event => _ctx.handleSort(sortItem.value)
-      }, {
-        default: withCtx(() => [createTextVNode(toDisplayString(sortItem.label), 1 /* TEXT */)]),
-
-        _: 2 /* DYNAMIC */
-      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]);
-    }), 128 /* KEYED_FRAGMENT */))]),
-
-    _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["trigger"])], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)], 2 /* CLASS */), createElementVNode("div", {
+  }, [_ctx.sortOptions.length ? (openBlock(), createBlock(_component_OrSorting, {
+    key: 0,
+    sort: _ctx.sort,
+    options: _ctx.sortOptions,
+    onChange: _cache[0] || (_cache[0] = $event => _ctx.$emit('sortChange', $event))
+  }, null, 8 /* PROPS */, ["sort", "options"])) : createCommentVNode("v-if", true)], 2 /* CLASS */), createElementVNode("div", {
     class: normalizeClass(_ctx.toolbarPanelStyles)
   }, [createVNode(_component_OrSearch, {
     "model-value": _ctx.proxySearch,
     class: "md:w-[350px]",
     placeholder: _ctx.searchPlaceholder,
     debounce: _ctx.searchDebounce,
-    size: "s",
     onSearch: _ctx.handleSearch
   }, null, 8 /* PROPS */, ["model-value", "placeholder", "debounce", "onSearch"]), createElementVNode("div", _hoisted_1, [_ctx.viewModes.length > 1 ? (openBlock(true), createElementBlock(Fragment, {
     key: 0
   }, renderList(_ctx.viewModes, viewOption => {
     return openBlock(), createBlock(_component_OrIconButton, {
       key: viewOption.view,
+      size: "l",
       icon: {
-        icon: viewOption.icon,
-        variant: viewOption.view === _ctx.proxyView ? 'filled' : 'outlined'
+        icon: viewOption.icon
       },
+      selected: viewOption.view === _ctx.proxyView,
       onClick: $event => _ctx.switchView(viewOption.view)
-    }, null, 8 /* PROPS */, ["icon", "onClick"]);
+    }, null, 8 /* PROPS */, ["icon", "selected", "onClick"]);
   }), 128 /* KEYED_FRAGMENT */)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "addon")])], 2 /* CLASS */)], 2 /* CLASS */), renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps({
     items: _ctx.items,
     mode: _ctx.proxyView

package/dist/esm/v3/{OrCode-0c2310e5.js → OrCode-d36e4b44.js}

@@ -15,10 +15,10 @@ import { u as useTheme } from './useTheme-e23d13c8.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$3 } from './OrIconButton-00f8f0c7.js';
+import { s as script$3 } from './OrIconButton-0edf0894.js';
 import { s as script$4 } from './OrInputBox-32b37b17.js';
 import { s as script$5 } from './OrLabel-4da56db0.js';
-import { s as script$6 } from './OrModal-6a90ea79.js';
+import { s as script$6 } from './OrModal-53d4af81.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, createElementVNode, renderSlot, createVNode, withModifiers, createTextVNode, toDisplayString, createCommentVNode, withDirectives, vShow } from 'vue';
 
 var CodeLanguage;

package/dist/esm/v3/{OrConfirm-240cfe0a.js → OrConfirm-6c4a7b89.js}

@@ -5,7 +5,7 @@ import { u as usePopoverState } from './usePopoverState-b92c698b.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { s as script$2, a as ButtonColor } from './OrButton-c2b6aa9e.js';
-import { s as script$3 } from './OrInput-f0e12c81.js';
+import { s as script$3 } from './OrInput-1fc808c0.js';
 import { s as script$1 } from './OrOverlay-489fdf76.js';
 import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, normalizeClass, renderSlot, createTextVNode, toDisplayString, createElementBlock, createVNode, createCommentVNode } from 'vue';
 

package/dist/esm/v3/{OrDatePicker-f4470d79.js → OrDatePicker-0d01feb7.js}

@@ -4,10 +4,10 @@ import '@vueuse/core';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
-import { s as script$1, a as script$2, b as script$3, c as script$4, d as script$5, e as script$6, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-96a38b4b.js';
+import { s as script$1, a as script$2, b as script$3, c as script$4, d as script$5, e as script$6, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-774c3a4f.js';
 import { s as script$7 } from './OrError-c01d0c29.js';
 import { s as script$8 } from './OrHint-06ab89d7.js';
-import { s as script$a } from './OrIconButton-00f8f0c7.js';
+import { s as script$a } from './OrIconButton-0edf0894.js';
 import { s as script$9 } from './OrIcon-62793572.js';
 import { s as script$b, I as InputBoxSize } from './OrInputBox-32b37b17.js';
 import { s as script$c } from './OrLabel-4da56db0.js';

package/dist/esm/v3/{OrDateTimePicker-546c15ec.js → OrDateTimePicker-2c5de2e5.js}

@@ -6,12 +6,12 @@ import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { s as script$a } from './OrError-c01d0c29.js';
 import { s as script$b } from './OrHint-06ab89d7.js';
-import { s as script$d } from './OrIconButton-00f8f0c7.js';
+import { s as script$d } from './OrIconButton-0edf0894.js';
 import { s as script$c } from './OrIcon-62793572.js';
 import { s as script$e, I as InputBoxSize } from './OrInputBox-32b37b17.js';
 import { s as script$f } from './OrLabel-4da56db0.js';
 import { s as script$g } from './OrPopover-94dc1203.js';
-import { s as script$4, a as script$5, b as script$6, c as script$7, d as script$8, e as script$9, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-96a38b4b.js';
+import { s as script$4, a as script$5, b as script$6, c as script$7, d as script$8, e as script$9, u as useCurrentDate } from './OrDateTimePickerPopoverHeader-774c3a4f.js';
 import { openBlock, createElementBlock, normalizeClass, Fragment, createTextVNode, toDisplayString, resolveComponent, createElementVNode, renderList, createBlock, withModifiers, withCtx, createVNode, createCommentVNode, resolveDirective, renderSlot, withDirectives } from 'vue';
 import { s as script$3 } from './OrButton-c2b6aa9e.js';
 

package/dist/esm/v3/{OrDateTimePickerPopoverHeader-96a38b4b.js → OrDateTimePickerPopoverHeader-774c3a4f.js}

@@ -6,9 +6,9 @@ import 'tailwindcss/resolveConfig';
 import { openBlock, createElementBlock, normalizeClass, Fragment, createTextVNode, toDisplayString, resolveComponent, createElementVNode, renderList, createBlock, withModifiers, withCtx, createVNode, renderSlot } from 'vue';
 import { s as script$6 } from './OrButton-c2b6aa9e.js';
 import { s as script$7 } from './OrLabel-4da56db0.js';
-import { s as script$9 } from './OrIconButton-00f8f0c7.js';
+import { s as script$9 } from './OrIconButton-0edf0894.js';
 import { s as script$8 } from './OrIcon-62793572.js';
-import { s as script$b } from './OrMenuItem-dbee450f.js';
+import { s as script$b } from './OrMenuItem-5d14ee25.js';
 import { s as script$a } from './OrMenu-dbe1db1e.js';
 import './OrPopover-94dc1203.js';
 

package/dist/esm/v3/{OrIconButton-00f8f0c7.js → OrIconButton-0edf0894.js}

@@ -68,6 +68,11 @@ var script = defineComponent({
   },
   inheritAttrs: false,
   props: {
+    // TODO: Remove after migration to Vue 3
+    additionalStyles: {
+      type: Array,
+      default: () => []
+    },
     icon: {
       type: [String, Object],
       required: true
@@ -118,7 +123,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [createElementVNode("button", mergeProps({
       ref: "root"
     }, _ctx.$attrs, {
-      class: _ctx.rootStyles,
+      class: [_ctx.rootStyles, ..._ctx.additionalStyles],
       type: 'button',
       selected: _ctx.selected ? '' : null,
       disabled: _ctx.disabled

package/dist/esm/v3/{OrInlineInput-4d47d731.js → OrInlineInput-b88c01a6.js}

@@ -7,7 +7,7 @@ import 'tailwindcss/resolveConfig';
 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-00f8f0c7.js';
+import { s as script$3 } from './OrIconButton-0edf0894.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';

package/dist/esm/v3/{OrInlineTextarea-1415bed9.js → OrInlineTextarea-71e96e67.js}

@@ -7,7 +7,7 @@ import 'tailwindcss/resolveConfig';
 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-00f8f0c7.js';
+import { s as script$3 } from './OrIconButton-0edf0894.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';

package/dist/esm/v3/{OrInput-f0e12c81.js → OrInput-1fc808c0.js}

@@ -8,7 +8,7 @@ import 'tailwindcss/resolveConfig';
 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-00f8f0c7.js';
+import { s as script$4 } from './OrIconButton-0edf0894.js';
 import { s as script$3 } from './OrIcon-62793572.js';
 import { s as script$5, I as InputBoxSize } from './OrInputBox-32b37b17.js';
 import { s as script$6 } from './OrLabel-4da56db0.js';

package/dist/esm/v3/{OrMenuItem-dbee450f.js → OrMenuItem-5d14ee25.js}

@@ -16,7 +16,9 @@ const MenuItemRoot = [
 // Theme
 'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
 // Theme (hover)
-'hover:theme-foreground-default', 'dark:hover:theme-foreground-default-dark'];
+'hover:theme-foreground-default', 'dark:hover:theme-foreground-default-dark',
+// Typography (selected)
+'selected:text-on-background dark:selected:text-on-background-dark'];
 
 var script = defineComponent({
   name: 'OrMenuItem',

package/dist/esm/v3/{OrModal-6a90ea79.js → OrModal-53d4af81.js}

@@ -5,7 +5,7 @@ import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { s as script$5 } from './OrOverlay-489fdf76.js';
 import { openBlock, createElementBlock, normalizeClass, renderSlot, resolveComponent, createElementVNode, createVNode, withModifiers, createBlock, withCtx, mergeProps, createCommentVNode } from 'vue';
-import { s as script$4 } from './OrIconButton-00f8f0c7.js';
+import { s as script$4 } from './OrIconButton-0edf0894.js';
 
 const ModalContent = [
 // Layout

package/dist/esm/v3/{OrNotification-117f2dcb.js → OrNotification-42c3a0ec.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { s as script$2 } from './OrIconButton-00f8f0c7.js';
+import { s as script$2 } from './OrIconButton-0edf0894.js';
 import { s as script$1 } from './OrIcon-62793572.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, renderSlot, createBlock, withModifiers, createCommentVNode } from 'vue';
 

package/dist/esm/v3/{OrPagination-858337d1.js → OrPagination-98319a31.js}

@@ -6,7 +6,7 @@ import '@onereach/styles/tailwind.config';
 import 'tailwindcss/resolveConfig';
 import { s as script$1 } from './OrButton-c2b6aa9e.js';
 import { s as script$2 } from './OrIcon-62793572.js';
-import { s as script$4 } from './OrMenuItem-dbee450f.js';
+import { s as script$4 } from './OrMenuItem-5d14ee25.js';
 import { s as script$3 } from './OrMenu-dbe1db1e.js';
 import './OrPopover-94dc1203.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withModifiers, withCtx, Fragment, renderList, createBlock, createTextVNode, toDisplayString, createCommentVNode } from 'vue';

package/dist/esm/v3/{OrSearch-051adc07.js → OrSearch-e690aff6.js}

@@ -1,6 +1,6 @@
 import { debouncedWatch } from '@vueuse/core';
 import { defineComponent, ref, computed, watch } from 'vue-demi';
-import { s as script$1 } from './OrInput-f0e12c81.js';
+import { s as script$1 } from './OrInput-1fc808c0.js';
 import { I as InputBoxSize } from './OrInputBox-32b37b17.js';
 import { resolveComponent, openBlock, createBlock, normalizeClass } from 'vue';
 

package/dist/esm/v3/{OrSelect-b3885148.js → OrSelect-66a6aae2.js}

@@ -11,11 +11,11 @@ import { s as script$3 } from './OrExpansionPanel-af3a0d63.js';
 import { s as script$4 } from './OrHint-06ab89d7.js';
 import { s as script$5 } from './OrIcon-62793572.js';
 import { s as script$7, I as InputBoxSize } from './OrInputBox-32b37b17.js';
-import { s as script$6 } from './OrInput-f0e12c81.js';
+import { s as script$6 } from './OrInput-1fc808c0.js';
 import { s as script$8 } from './OrLabel-4da56db0.js';
-import { s as script$9 } from './OrMenuItem-dbee450f.js';
+import { s as script$9 } from './OrMenuItem-5d14ee25.js';
 import { s as script$a } from './OrPopover-94dc1203.js';
-import { s as script$b } from './OrTag-9adef1cd.js';
+import { s as script$b } from './OrTag-51add0ef.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, createVNode, withModifiers, vShow } from 'vue';
 
 const SelectRoot = [

package/dist/esm/v3/{OrSidebar-47f9d02a.js → OrSidebar-dd7c025b.js}

@@ -1,6 +1,6 @@
 import { useDraggable, useElementBounding } from '@vueuse/core';
 import { defineComponent, ref, computed, useSlots, watch } from 'vue-demi';
-import { O as OrSidebarPlacement, s as script$1 } from './OrSidebarCollapseButton-86dafbbc.js';
+import { s as script$1, O as OrSidebarPlacement } from './OrSidebarCollapseButton-2792a2b4.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createElementVNode, normalizeStyle, createBlock, withDirectives, vShow } from 'vue';
 
 const SidebarRoot = [
@@ -36,18 +36,18 @@ const SidebarToolbar = [
 'text-outline', 'dark:text-outline-dark'];
 const CollapsibleSidebarToolbar = ['pt-[56px]'];
 const SidebarSides = {
-  [OrSidebarPlacement.left]: [
+  'left': [
   // Borders
   'border-r-[1px]', 'border-r-solid', 'border-r-outline-variant dark:border-r-outline-variant-dark'],
-  [OrSidebarPlacement.right]: [
+  'right': [
   // Borders
   'border-l-[1px]', 'border-l-solid', 'border-l-outline-variant dark:border-l-outline-variant-dark']
 };
 const SidebarToolbarSides = {
-  [OrSidebarPlacement.left]: [
+  'left': [
   // Borders
   'border-r-[1px]', 'border-r-solid', 'border-r-outline-variant dark:border-r-outline-variant-dark'],
-  [OrSidebarPlacement.right]: [
+  'right': [
   // Borders
   'border-l-[1px]', 'border-l-solid', 'border-l-outline-variant dark:border-l-outline-variant-dark']
 };
@@ -59,14 +59,14 @@ const SidebarResize = [
 // Cursor
 'cursor-ew-resize'];
 const SidebarResizeSides = {
-  [OrSidebarPlacement.left]: [
+  'left': [
   // Position
   '-right-[1px]',
   // Borders
   'hover:border-r-2', 'hover:border-r-primary-hover hover:dark:border-r-primary-hover-dark',
   // Transition
   'transition-[border-right]'],
-  [OrSidebarPlacement.right]: [
+  'right': [
   // Position
   '-left-[1px]',
   // Borders
@@ -78,18 +78,18 @@ const SidebarCollapseButton = [
 // Position
 'absolute', 'top-md', 'inset-y-none', 'z-[1]'];
 const SidebarCollapseButtonSides = {
-  [OrSidebarPlacement.left]: [
+  'left': [
   // Position
   '-right-[12px]'],
-  [OrSidebarPlacement.right]: [
+  'right': [
   // Position
   '-left-[12px]']
 };
 const SidebarResizingSides = {
-  [OrSidebarPlacement.left]: [
+  'left': [
   // Borders
   'border-r-2', 'border-r-primary-hover dark:border-r-primary-hover-dark'],
-  [OrSidebarPlacement.right]: [
+  'right': [
   // Borders
   'border-l-2', 'border-l-primary-hover dark:border-l-primary-hover-dark']
 };
@@ -145,7 +145,7 @@ var script = defineComponent({
      */
     side: {
       type: String,
-      default: OrSidebarPlacement.right
+      default: OrSidebarPlacement.Right
     },
     draggable: {
       type: Boolean,
@@ -158,10 +158,7 @@ var script = defineComponent({
   },
   emits: ['change:width', 'open', 'close'],
   expose: ['root', 'open', 'close'],
-  setup(props, _ref) {
-    let {
-      emit
-    } = _ref;
+  setup(props, context) {
     // Refs
     const root = ref();
     const resizeBar = ref(null);
@@ -203,7 +200,7 @@ var script = defineComponent({
         isResizing.value = true;
       },
       onMove: position => {
-        const delta = (position.x - startPositionX.value) * (props.side === OrSidebarPlacement.left ? -1 : 1);
+        const delta = (position.x - startPositionX.value) * (props.side === OrSidebarPlacement.Left ? -1 : 1);
         const newWidth = localWidth.value - delta;
         localWidth.value = newWidth > maximumWidth.value ? maximumWidth.value : newWidth < props.minimumWidth ? props.minimumWidth : newWidth;
         startPositionX.value = position.x;
@@ -241,8 +238,8 @@ var script = defineComponent({
     watch(maximumWidth, newMaximum => {
       if (newMaximum < localWidth.value) localWidth.value = newMaximum;
     });
-    watch(localWidth, val => emit('change:width', val));
-    watch(isCollapsed, val => emit(val ? 'close' : 'open'));
+    watch(localWidth, val => context.emit('change:width', val));
+    watch(isCollapsed, val => context.emit(val ? 'close' : 'open'));
     return {
       root,
       resizeBar,
@@ -267,7 +264,7 @@ var script = defineComponent({
 });
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_or_sidebar_collapse_button = resolveComponent("or-sidebar-collapse-button");
+  const _component_OrSidebarCollapseButton = resolveComponent("OrSidebarCollapseButton");
   return openBlock(), createElementBlock("aside", {
     ref: "root",
     class: normalizeClass(_ctx.rootStyles)
@@ -281,7 +278,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     key: 0,
     ref: "resizeBar",
     class: normalizeClass(_ctx.resizeStyles)
-  }, null, 2 /* CLASS */)) : createCommentVNode("v-if", true), _ctx.collapsible ? (openBlock(), createBlock(_component_or_sidebar_collapse_button, {
+  }, null, 2 /* CLASS */)) : createCommentVNode("v-if", true), _ctx.collapsible ? (openBlock(), createBlock(_component_OrSidebarCollapseButton, {
     key: 1,
     modelValue: _ctx.isCollapsed,
     "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.isCollapsed = $event),

package/dist/esm/v3/{OrSidebarCollapseButton-86dafbbc.js → OrSidebarCollapseButton-2792a2b4.js}

@@ -1,19 +1,19 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { s as script$1 } from './OrIconButton-00f8f0c7.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode } from 'vue';
+import { s as script$1 } from './OrIconButton-0edf0894.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withModifiers } from 'vue';
 
 var OrSidebarPlacement;
 (function (OrSidebarPlacement) {
-  OrSidebarPlacement["left"] = "left";
-  OrSidebarPlacement["right"] = "right";
+  OrSidebarPlacement["Left"] = "left";
+  OrSidebarPlacement["Right"] = "right";
 })(OrSidebarPlacement || (OrSidebarPlacement = {}));
 
-const CollapseButtonContainer = [
+const CollapseButton = [
 // Box
 'w-[24px]', 'h-[24px]', 'rounded-full',
 // Theme
 'text-primary dark:text-primary-dark', 'bg-background dark:bg-background-dark'];
-const CollapseButton = [
+const CollapseButtonButton = [
 // Box
 'w-[24px]', 'h-[24px]', 'rounded-full',
 // Typography
@@ -50,7 +50,7 @@ var script = defineComponent({
     },
     side: {
       type: String,
-      default: OrSidebarPlacement.right
+      default: OrSidebarPlacement.Right
     }
   },
   emits: ['update:modelValue'],
@@ -58,9 +58,12 @@ var script = defineComponent({
   setup(props) {
     // Refs
     const root = ref();
-    const rootStyles = computed(() => ['or-sidebar-collapse-button-v3', ...CollapseButtonContainer]);
-    const buttonStyles = computed(() => [...CollapseButton]);
-    const icon = computed(() => props.side === OrSidebarPlacement.left !== props.modelValue ? 'keyboard_arrow_left' : 'keyboard_arrow_right');
+    const rootStyles = computed(() => ['or-sidebar-collapse-button-v3', ...CollapseButton]);
+    const buttonStyles = computed(() => [...CollapseButtonButton]);
+    // State
+    const icon = computed(() => {
+      return props.side === OrSidebarPlacement.Left !== props.modelValue ? 'keyboard_arrow_left' : 'keyboard_arrow_right';
+    });
     return {
       root,
       rootStyles,
@@ -71,19 +74,19 @@ var script = defineComponent({
 });
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_or_icon_button = resolveComponent("or-icon-button");
+  const _component_OrIconButton = resolveComponent("OrIconButton");
   return openBlock(), createElementBlock("div", {
     ref: "root",
     class: normalizeClass(_ctx.rootStyles)
-  }, [createVNode(_component_or_icon_button, {
-    class: normalizeClass(_ctx.buttonStyles),
+  }, [createVNode(_component_OrIconButton, {
+    "additional-styles": _ctx.buttonStyles,
     icon: {
       icon: _ctx.icon,
       size: 'inherit'
     },
-    color: "inherit",
-    onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('update:modelValue', !_ctx.modelValue))
-  }, null, 8 /* PROPS */, ["class", "icon"])], 2 /* CLASS */);
+    color: 'inherit',
+    onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.$emit('update:modelValue', !_ctx.modelValue), ["stop"]))
+  }, null, 8 /* PROPS */, ["additional-styles", "icon"])], 2 /* CLASS */);
 }
 
 script.render = render;