@onereach/ui-components 2.72.2-beta.2257.0 → 2.72.2-beta.2260.0

package/dist/esm/v2/index.js

@@ -8,7 +8,7 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, _ as OrButtonV3 } from './OrButton-66964360.js';
 export { _ as OrCard } from './OrCard-b7268256.js';
 export { C as CARD_COLLECTION_LAYOUT, _ as OrCardCollection } from './OrCardCollection-19582949.js';
-export { D as DefaultCardCollectionViews, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-4f8957aa.js';
+export { D as DefaultCardCollectionViews, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-251ab033.js';
 export { _ as OrCardV3 } from './OrCard-e89c44ef.js';
 export { a as OrCarousel, _ as OrCarouselItem } from './OrCarouselItem-4e2cf3d8.js';
 export { _ as OrCheckbox } from './OrCheckbox-915f1f0a.js';
@@ -19,7 +19,7 @@ export { _ as OrCode, O as OrCodeLanguages } from './OrCode-d4400b42.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-ede619eb.js';
-export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-d87f2ae9.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-9dbdedd7.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-80f82cdf.js';
@@ -37,8 +37,8 @@ export { I as InlineInputBoxSize, I as InlineInputSize, _ as OrInlineInputBoxV3
 export { I as InlineInputType, _ as OrInlineInputV3 } from './OrInlineInput-b85b84b4.js';
 export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, _ as OrInlineTextEdit } from './OrInlineTextEdit-b47cfc2d.js';
 export { _ as OrInlineTextareaV3 } from './OrInlineTextarea-afd33047.js';
-export { a as InputBoxSize, I as InputBoxVariant, a as InputSize, _ as OrInputBoxV3, a as SearchSize, a as SelectSize, a as TextareaSize } from './OrInputBox-1a8887df.js';
-export { I as InputType, _ as OrInputV3 } from './OrInput-cf2900cd.js';
+export { a as InputBoxSize, I as InputBoxVariant, a as InputSize, _ as OrInputBoxV3, a as SearchSize, a as SelectSize, a as TextareaSize } from './OrInputBox-9ceb9fc4.js';
+export { I as InputType, _ as OrInputV3 } from './OrInput-59a15d80.js';
 export { _ as OrInput } from './OrInput-6e6cfd11.js';
 export { _ as OrLabel } from './OrLabel-33b41516.js';
 export { L as LabelVariant, _ as OrLabelV3 } from './OrLabel-0945a4d9.js';
@@ -66,12 +66,13 @@ export { _ as OrRadio } from './OrRadio-e4198532.js';
 export { _ as OrRadioGroup } from './OrRadioGroup-d9d32cba.js';
 export { _ as OrRadioV3 } from './OrRadio-87a4d226.js';
 export { _ as OrSearch } from './OrSearch-b4f4d59b.js';
-export { _ as OrSearchV3 } from './OrSearch-3e058ad4.js';
+export { _ as OrSearchV3 } from './OrSearch-f42d588d.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-7486115b.js';
 export { _ as OrSelect } from './OrSelect-dae2b069.js';
-export { _ as OrSelectV3 } from './OrSelect-bf21fff7.js';
+export { _ as OrSelectV3 } from './OrSelect-e31d1c8b.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-7d6125bb.js';
-export { O as OrSidebarPlacement, _ as OrSidebarV3 } from './OrSidebar-fabc7bc9.js';
+export { _ as OrSidebarV3 } from './OrSidebar-a10424d2.js';
+export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-3b461dfe.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-6ee72718.js';
 export { _ as OrSlider } from './OrSlider-f7b9c7c2.js';
@@ -90,7 +91,7 @@ export { _ as OrTeleport } from './OrTeleportVue2-8ef4ceca.js';
 export { _ as OrTeleportV3 } from './OrTeleport.vue2-fb92f29f.js';
 export { _ as OrTextV3 } from './OrText-b12d0682.js';
 export { _ as OrTextarea } from './OrTextarea-91a95068.js';
-export { _ as OrTextareaV3 } from './OrTextarea-2ec6facd.js';
+export { _ as OrTextareaV3 } from './OrTextarea-a5a3572b.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';

package/dist/esm/v3/{OrCardCollection-ab9b6d70.js → OrCardCollection-8b8e3745.js}

@@ -5,8 +5,8 @@ import { s as script$6 } from './OrIcon-34f59f73.js';
 import { s as script$5 } from './OrMenuItem-58707d47.js';
 import { s as script$4 } from './OrMenu-7f3ea117.js';
 import './OrPopover-40217b49.js';
-import { s as script$7 } from './OrSearch-100ed7c8.js';
-import './OrInputBox-74646840.js';
+import { s as script$7 } from './OrSearch-4c5c44f2.js';
+import './OrInputBox-e16ade90.js';
 import { openBlock, createElementBlock, normalizeClass, Fragment, renderList, renderSlot, mergeProps, createTextVNode, toDisplayString, resolveComponent, createElementVNode, createVNode, withCtx, createBlock, createCommentVNode, normalizeProps, guardReactiveProps } from 'vue';
 
 const CardCollectionRoot = [

package/dist/esm/v3/{OrConfirm-223b1303.js → OrConfirm-37454a63.js}

@@ -2,7 +2,7 @@ import { useMagicKeys, whenever, onClickOutside } from '@vueuse/core';
 import { logicAnd } from '@vueuse/math';
 import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { s as script$2, a as ButtonColor } from './OrButton-c56998e7.js';
-import { s as script$3 } from './OrInput-5afc20da.js';
+import { s as script$3 } from './OrInput-bd054213.js';
 import { s as script$1 } from './OrOverlay-afad3aa4.js';
 import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, normalizeClass, renderSlot, createTextVNode, toDisplayString, createElementBlock, createVNode, createCommentVNode } from 'vue';
 

package/dist/esm/v3/{OrInput-5afc20da.js → OrInput-bd054213.js}

@@ -1,16 +1,14 @@
 import { defineComponent, ref, computed, reactive } from 'vue-demi';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 import '@vueuse/core';
-import { u as useResponsive } from './useResponsive-a02e95b7.js';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { s as script$1 } from './OrError-19198748.js';
 import { s as script$2 } from './OrHint-6863124f.js';
 import { s as script$4 } from './OrIconButton-2dcfb83e.js';
 import { s as script$3 } from './OrIcon-34f59f73.js';
-import { s as script$5, a as InputBoxSize } from './OrInputBox-74646840.js';
+import { s as script$5, a as InputBoxSize } from './OrInputBox-e16ade90.js';
 import { s as script$6 } from './OrLabel-f700f9fb.js';
-import { s as script$7 } from './OrLoader-a53d2edf.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, withDirectives, createElementVNode, mergeProps, vModelDynamic, Fragment, withModifiers, createSlots } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, withDirectives, createElementVNode, mergeProps, vModelDynamic, withModifiers, Fragment, createSlots } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
 var InputType;
@@ -42,8 +40,7 @@ var script = defineComponent({
     OrIcon: script$3,
     OrIconButton: script$4,
     OrInputBox: script$5,
-    OrLabel: script$6,
-    OrLoader: script$7
+    OrLabel: script$6
   },
   model: {
     prop: 'modelValue',
@@ -78,10 +75,6 @@ var script = defineComponent({
       type: String,
       default: undefined
     },
-    loading: {
-      type: Boolean,
-      default: false
-    },
     required: {
       type: Boolean,
       default: false
@@ -127,9 +120,6 @@ var script = defineComponent({
     const maxLength = computed(() => controlAttributes.maxlength);
     const invalid = computed(() => !!props.error);
     const disclosed = ref(false);
-    const {
-      isMobile
-    } = useResponsive();
     // Methods
     function focus() {
       var _a;
@@ -150,7 +140,6 @@ var script = defineComponent({
       maxLength,
       invalid,
       disclosed,
-      isMobile,
       focus,
       blur
     };
@@ -163,7 +152,6 @@ const _hoisted_2 = {
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrLabel = resolveComponent("OrLabel");
-  const _component_OrLoader = resolveComponent("OrLoader");
   const _component_OrIconButton = resolveComponent("OrIconButton");
   const _component_OrIcon = resolveComponent("OrIcon");
   const _component_OrInputBox = resolveComponent("OrInputBox");
@@ -187,7 +175,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     variant: _ctx.disableDefaultStyles ? 'unstyled' : 'styled',
     size: _ctx.size,
     invalid: _ctx.invalid,
-    readonly: _ctx.readonly || _ctx.loading,
+    readonly: _ctx.readonly,
     disabled: _ctx.disabled
   }, {
     default: withCtx(() => [withDirectives(createElementVNode("input", mergeProps({
@@ -198,20 +186,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       type: _ctx.type === 'password' && _ctx.disclosed ? 'text' : _ctx.type,
       placeholder: _ctx.placeholder,
       required: _ctx.required,
-      readonly: _ctx.readonly || _ctx.loading,
+      readonly: _ctx.readonly,
       disabled: _ctx.disabled,
       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] = $event => _ctx.$emit('focus', $event)),
       onBlur: _cache[4] || (_cache[4] = $event => _ctx.$emit('blur', $event))
-    }), null, 16 /* FULL_PROPS */, _hoisted_1), [[vModelDynamic, _ctx.proxyModelValue]]), createElementVNode("div", _hoisted_2, [_ctx.loading ? (openBlock(), createBlock(_component_OrLoader, {
-      key: 0,
-      variant: 'circular',
-      color: 'primary',
-      size: _ctx.isMobile ? 'm' : 's'
-    }, null, 8 /* PROPS */, ["size"])) : (openBlock(), createElementBlock(Fragment, {
-      key: 1
-    }, [_ctx.type === 'password' ? (openBlock(), createBlock(_component_OrIconButton, {
+    }), null, 16 /* FULL_PROPS */, _hoisted_1), [[vModelDynamic, _ctx.proxyModelValue]]), createElementVNode("div", _hoisted_2, [_ctx.type === 'password' ? (openBlock(), createBlock(_component_OrIconButton, {
       key: 0,
       icon: {
         icon: _ctx.disclosed ? 'visibility_off' : 'visibility',
@@ -232,8 +213,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       key: 1,
       icon: 'search',
       variant: 'outlined'
-    }))], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */))])]),
-
+    }))], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)])]),
     _: 1 /* STABLE */
   }, 8 /* PROPS */, ["variant", "size", "invalid", "readonly", "disabled"]), !_ctx.invalid ? (openBlock(), createElementBlock(Fragment, {
     key: 1

package/dist/esm/v3/{OrInputBox-74646840.js → OrInputBox-e16ade90.js}

@@ -51,7 +51,7 @@ const InputBoxRootSizes = {
   // Box
   'children:min-h-[30px]',
   // Spacing
-  'first-child:pl-md first-child:md:pl-sm+', 'last-child:pr-md last-child:md:pr-sm+', 'children:py-[6px]', 'gap-[6px]',
+  'first-child:pl-sm', 'last-child:pr-sm', 'children:py-[6px]', 'gap-[6px]',
   // Typography
   'typography-caption-regular']
 };

package/dist/esm/v3/{OrSearch-100ed7c8.js → OrSearch-4c5c44f2.js}

@@ -1,7 +1,7 @@
 import { debouncedWatch } from '@vueuse/core';
 import { defineComponent, ref, computed, watch } from 'vue-demi';
-import { s as script$1 } from './OrInput-5afc20da.js';
-import { a as InputBoxSize } from './OrInputBox-74646840.js';
+import { s as script$1 } from './OrInput-bd054213.js';
+import { a as InputBoxSize } from './OrInputBox-e16ade90.js';
 import { resolveComponent, openBlock, createBlock, normalizeClass } from 'vue';
 
 var script = defineComponent({

package/dist/esm/v3/{OrSelect-f1a2a55d.js → OrSelect-466e50ca.js}

@@ -7,8 +7,8 @@ import { s as script$2 } from './OrError-19198748.js';
 import { s as script$3 } from './OrExpansionPanel-3a4282da.js';
 import { s as script$4 } from './OrHint-6863124f.js';
 import { s as script$5 } from './OrIcon-34f59f73.js';
-import { s as script$7, a as InputBoxSize } from './OrInputBox-74646840.js';
-import { s as script$6 } from './OrInput-5afc20da.js';
+import { s as script$7, a as InputBoxSize } from './OrInputBox-e16ade90.js';
+import { s as script$6 } from './OrInput-bd054213.js';
 import { s as script$8 } from './OrLabel-f700f9fb.js';
 import { s as script$9 } from './OrMenuItem-58707d47.js';
 import { s as script$a } from './OrPopover-40217b49.js';

package/dist/esm/v3/{OrSidebar-a62972f5.js → OrSidebar-3be35e8d.js}

@@ -1,92 +1,28 @@
 import { useDraggable, useElementBounding } from '@vueuse/core';
 import _ from 'lodash';
-import { defineComponent, ref, computed, watch } from 'vue-demi';
-import { openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createCommentVNode } from 'vue';
-
-var OrSidebarPlacement;
-(function (OrSidebarPlacement) {
-  OrSidebarPlacement["left"] = "left";
-  OrSidebarPlacement["right"] = "right";
-})(OrSidebarPlacement || (OrSidebarPlacement = {}));
-
-const SidebarRoot = [
-// Position
-'relative',
-// Layout
-'flex', 'flex-col', 'shrink-0',
-// Box
-'min-h-0', 'p-0'];
-const SidebarRootSides = {
-  [OrSidebarPlacement.left]: [
-  // Borders
-  'border-r-[1px]', 'border-r-solid', 'border-r-secondary dark:border-r-secondary-dark'],
-  [OrSidebarPlacement.right]: [
-  // Borders
-  'border-l-[1px]', 'border-l-solid', 'border-l-secondary dark:border-l-secondary-dark']
-};
-const SidebarResize = [
-// Position
-'absolute', 'inset-y-none', 'z-[1]',
-// Box
-'w-[12px]', 'h-[100%]',
-// Cursor
-'cursor-ew-resize'];
-const SidebarResizeSides = {
-  [OrSidebarPlacement.left]: [
-  // Position
-  '-right-[1px]',
-  // Borders
-  'hover:border-r-2', 'hover:border-r-primary hover:dark:border-r-primary-dark',
-  // Transition
-  'transition-[border-right]'],
-  [OrSidebarPlacement.right]: [
-  // Position
-  '-left-[1px]',
-  // Borders
-  'hover:border-l-2', 'hover:border-l-primary hover:dark:border-l-primary-dark',
-  // Transition
-  'transition-[border-left]']
-};
-const SidebarResizingSides = {
-  [OrSidebarPlacement.left]: [
-  // Borders
-  'border-r-2', 'border-r-primary dark:border-r-primary-dark'],
-  [OrSidebarPlacement.right]: [
-  // Borders
-  'border-l-2', 'border-l-primary dark:border-l-primary-dark']
-};
-const SidebarMain = [
-// Layout
-'flex', 'flex-col', 'grow',
-// Box
-'min-h-0'];
-const SidebarHeader = [
-// Sizing
-'p-md'];
-const SidebarContent = [
-// Layout
-'grow', 'overflow-auto',
-// Sizing
-'p-md'];
-const SidebarFooter = [
-// Sizing
-'p-md',
-// Borders
-'border-t-[1px]', 'border-t-solid', 'border-t-secondary dark:border-t-secondary-dark'];
+import { defineComponent, ref, computed, useSlots, watch } from 'vue-demi';
+import { s as script$1, O as OrSidebarPlacement, S as SidebarRoot, a as SidebarBar, b as SidebarSides, c as SidebarToolbar, C as CollapsibleSidebarToolbar, d as SidebarToolbarSides, e as SidebarResize, f as SidebarResizeSides, g as SidebarResizingSides, h as SidebarCollapseButton, i as SidebarCollapseButtonSides, j as SidebarMain, k as SidebarHeader, l as SidebarContent, m as SidebarFooter } from './OrSidebarCollapseButton-30d0033b.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createElementVNode, normalizeStyle, createBlock, withDirectives, vShow } from 'vue';
 
 var script = defineComponent({
   name: 'OrSidebar',
+  components: {
+    OrSidebarCollapseButton: script$1
+  },
   props: {
     width: {
       type: Number,
-      required: false,
-      default: 0,
+      default: 320,
       validator: value => _.isNumber(value) && value >= 0
     },
     minimumWidth: {
       type: Number,
-      required: false,
-      default: 350,
+      default: 256,
+      validator: value => _.isNumber(value) && value >= 0
+    },
+    maximumWidth: {
+      type: Number,
+      default: 384,
       validator: value => _.isNumber(value) && value >= 0
     },
     /**
@@ -100,9 +36,18 @@ var script = defineComponent({
       type: String,
       default: OrSidebarPlacement.right,
       validator: value => _.includes(_.values(OrSidebarPlacement), value)
+    },
+    draggable: {
+      type: Boolean,
+      default: true
+    },
+    collapsible: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ['change:width'],
+  emits: ['change:width', 'open', 'close'],
+  expose: ['root', 'open', 'close'],
   setup(props, {
     emit
   }) {
@@ -113,16 +58,26 @@ var script = defineComponent({
       var _a;
       return (_a = root.value) === null || _a === void 0 ? void 0 : _a.parentElement;
     });
+    // Slots
+    const {
+      toolbar: toolbarSlot
+    } = useSlots();
     // State
     const startPositionX = ref(0);
     const isResizing = ref(false);
+    const isCollapsed = ref(false);
+    const maximumWidth = ref(props.maximumWidth || 384);
     const localWidth = ref(props.width >= props.minimumWidth ? props.width : props.minimumWidth);
+    const isShowingToolbar = computed(() => !!toolbarSlot);
     // Styles
     const sidebarStyle = computed(() => ({
-      width: localWidth.value + 'px'
+      width: (isCollapsed.value ? 16 : localWidth.value) + 'px'
     }));
-    const rootStyles = computed(() => ['or-sidebar', ...SidebarRoot, ...SidebarRootSides[props.side]]);
+    const rootStyles = computed(() => ['or-sidebar', ...SidebarRoot]);
+    const sidebarStyles = computed(() => [...SidebarBar, ...SidebarSides[props.side]]);
+    const toolbarStyles = computed(() => [...SidebarToolbar, ...(props.collapsible ? CollapsibleSidebarToolbar : []), ...SidebarToolbarSides[props.side]]);
     const resizeStyles = computed(() => [...SidebarResize, ...SidebarResizeSides[props.side], ...(isResizing.value ? SidebarResizingSides[props.side] : [])]);
+    const collapsibleButtonStyles = computed(() => [...SidebarCollapseButton, ...SidebarCollapseButtonSides[props.side]]);
     const mainStyles = computed(() => [...SidebarMain]);
     const headerStyles = computed(() => [...SidebarHeader]);
     const contentStyles = computed(() => [...SidebarContent]);
@@ -148,8 +103,15 @@ var script = defineComponent({
         isResizing.value = false;
       }
     });
+    // Methods
+    function open() {
+      isCollapsed.value = false;
+    }
+    function close() {
+      isCollapsed.value = true;
+    }
     const {
-      width: maximumWidth
+      width: containerWidth
     } = useElementBounding(parentContainer);
     watch(() => props.width, newValue => {
       if (newValue !== localWidth.value) {
@@ -159,48 +121,78 @@ var script = defineComponent({
     watch(() => props.minimumWidth, newMinimum => {
       if (newMinimum > localWidth.value) localWidth.value = newMinimum;
     });
+    watch(() => props.maximumWidth, newMaximum => {
+      if (newMaximum < maximumWidth.value) maximumWidth.value = newMaximum;
+    });
+    watch(containerWidth, newMaximum => {
+      if (newMaximum < maximumWidth.value) maximumWidth.value = newMaximum;
+    });
     watch(maximumWidth, newMaximum => {
       if (newMaximum < localWidth.value) localWidth.value = newMaximum;
     });
     watch(localWidth, val => emit('change:width', val));
+    watch(isCollapsed, val => emit(val ? 'close' : 'open'));
     return {
       root,
       resizeBar,
       isResizing,
+      isCollapsed,
       localWidth,
+      isShowingToolbar,
       sidebarStyle,
       rootStyles,
+      sidebarStyles,
+      toolbarStyles,
       resizeStyles,
+      collapsibleButtonStyles,
       mainStyles,
       headerStyles,
       contentStyles,
-      footerStyles
+      footerStyles,
+      open,
+      close
     };
   }
 });
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_sidebar_collapse_button = resolveComponent("or-sidebar-collapse-button");
   return openBlock(), createElementBlock("aside", {
     ref: "root",
-    class: normalizeClass(_ctx.rootStyles),
+    class: normalizeClass(_ctx.rootStyles)
+  }, [_ctx.side === 'right' && _ctx.isShowingToolbar ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    class: normalizeClass(_ctx.toolbarStyles)
+  }, [renderSlot(_ctx.$slots, "toolbar")], 2 /* CLASS */)) : createCommentVNode("v-if", true), createElementVNode("div", {
+    class: normalizeClass(_ctx.sidebarStyles),
     style: normalizeStyle(_ctx.sidebarStyle)
-  }, [createElementVNode("div", {
+  }, [_ctx.draggable && !_ctx.isCollapsed ? (openBlock(), createElementBlock("div", {
+    key: 0,
     ref: "resizeBar",
     class: normalizeClass(_ctx.resizeStyles)
-  }, null, 2 /* CLASS */), createElementVNode("div", {
+  }, null, 2 /* CLASS */)) : createCommentVNode("v-if", true), _ctx.collapsible ? (openBlock(), createBlock(_component_or_sidebar_collapse_button, {
+    key: 1,
+    modelValue: _ctx.isCollapsed,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.isCollapsed = $event),
+    class: normalizeClass(_ctx.collapsibleButtonStyles),
+    side: _ctx.side
+  }, null, 8 /* PROPS */, ["modelValue", "class", "side"])) : createCommentVNode("v-if", true), withDirectives(createElementVNode("div", {
     class: normalizeClass(_ctx.mainStyles)
   }, [_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
     key: 0,
     class: normalizeClass(_ctx.headerStyles)
   }, [renderSlot(_ctx.$slots, "header")], 2 /* CLASS */)) : createCommentVNode("v-if", true), createElementVNode("div", {
     class: normalizeClass(_ctx.contentStyles)
-  }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */)], 2 /* CLASS */), _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
-    key: 0,
+  }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */)], 2 /* CLASS */), [[vShow, !_ctx.isCollapsed]]), _ctx.$slots.footer ? withDirectives((openBlock(), createElementBlock("div", {
+    key: 2,
     class: normalizeClass(_ctx.footerStyles)
-  }, [renderSlot(_ctx.$slots, "footer")], 2 /* CLASS */)) : createCommentVNode("v-if", true)], 6 /* CLASS, STYLE */);
+  }, [renderSlot(_ctx.$slots, "footer")], 2 /* CLASS */)), [[vShow, !_ctx.isCollapsed]]) : createCommentVNode("v-if", true)], 6 /* CLASS, STYLE */), _ctx.side === 'left' && _ctx.isShowingToolbar ? (openBlock(), createElementBlock("div", {
+    key: 1,
+    class: normalizeClass(_ctx.toolbarStyles)
+  }, [renderSlot(_ctx.$slots, "toolbar")], 2 /* CLASS */)) : createCommentVNode("v-if", true)], 2 /* CLASS */);
 }
 
 script.render = render;
 script.__file = "src/components/or-sidebar-v3/OrSidebar.vue";
 
-export { OrSidebarPlacement as O, script as s };
+export { script as s };