@onereach/ui-components 4.19.0-beta.3138.0 → 5.0.0

package/dist/bundled/v3/{isArrayLike-e46b8eac.js → isArrayLike-acf249e3.js}

@@ -1,4 +1,4 @@
-import { i as isFunction_1 } from './eq-95cd2573.js';
+import { i as isFunction_1 } from './eq-fa566495.js';
 
 /** Used as references for various `Number` constants. */
 var MAX_SAFE_INTEGER$1 = 9007199254740991;

package/dist/bundled/v3/{isEqual-44382965.js → isEqual-881b7bb5.js}

@@ -1,4 +1,4 @@
-import { a as _baseIsEqual } from './_baseIsEqual-a1cc156c.js';
+import { a as _baseIsEqual } from './_baseIsEqual-82d7a339.js';
 
 var baseIsEqual = _baseIsEqual;
 

package/dist/bundled/{v2/isObject-fe8b81fd.js → v3/isObject-3a5b854d.js}

@@ -1,4 +1,4 @@
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+import { c as commonjsGlobal } from './_commonjsHelpers-48a9cab9.js';
 
 /**
  * Checks if `value` is object-like. A value is object-like if it's not `null`

package/dist/bundled/{v2/range-6f26eda4.js → v3/range-c87289f7.js}

@@ -1,7 +1,7 @@
-import { e as eq_1 } from './eq-95cd2573.js';
-import { i as isArrayLike_1, _ as _isIndex } from './isArrayLike-e46b8eac.js';
-import { i as isObject_1 } from './isObject-fe8b81fd.js';
-import { a as toFinite_1 } from './toFinite-74227610.js';
+import { e as eq_1 } from './eq-fa566495.js';
+import { i as isArrayLike_1, _ as _isIndex } from './isArrayLike-acf249e3.js';
+import { i as isObject_1 } from './isObject-3a5b854d.js';
+import { a as toFinite_1 } from './toFinite-021b0c50.js';
 
 /* Built-in method references for those with the same name as other `lodash` methods. */
 var nativeCeil = Math.ceil,

package/dist/bundled/{v2/round-f34440f4.js → v3/round-136c7e43.js}

@@ -1,7 +1,7 @@
-import { _ as _root } from './isObject-fe8b81fd.js';
-import { t as toInteger_1 } from './toInteger-2fd112a9.js';
-import { t as toNumber_1 } from './toFinite-74227610.js';
-import { t as toString_1 } from './toString-f3196832.js';
+import { _ as _root } from './isObject-3a5b854d.js';
+import { t as toInteger_1 } from './toInteger-db8a475d.js';
+import { t as toNumber_1 } from './toFinite-021b0c50.js';
+import { t as toString_1 } from './toString-47fa81b4.js';
 
 var root = _root,
   toInteger = toInteger_1,

package/dist/bundled/{v2/toFinite-74227610.js → v3/toFinite-021b0c50.js}

@@ -1,4 +1,4 @@
-import { i as isObject_1, d as isSymbol_1 } from './isObject-fe8b81fd.js';
+import { i as isObject_1, d as isSymbol_1 } from './isObject-3a5b854d.js';
 
 /** Used to match a single whitespace character. */
 var reWhitespace = /\s/;

package/dist/bundled/v3/{toInteger-2fd112a9.js → toInteger-db8a475d.js}

@@ -1,4 +1,4 @@
-import { a as toFinite_1 } from './toFinite-74227610.js';
+import { a as toFinite_1 } from './toFinite-021b0c50.js';
 
 var toFinite = toFinite_1;
 

package/dist/bundled/{v2/toString-f3196832.js → v3/toString-47fa81b4.js}

@@ -1,4 +1,4 @@
-import { a as _Symbol, d as isSymbol_1 } from './isObject-fe8b81fd.js';
+import { a as _Symbol, d as isSymbol_1 } from './isObject-3a5b854d.js';
 
 /**
  * Checks if `value` is classified as an `Array` object.

package/dist/bundled/v3/utils/functions/dom.js

@@ -1,5 +1,6 @@
-export { M as MutationObs, f as addClass, c as cancelAF, e as contains, m as getAttr, t as getBCR, g as getById, u as getCS, x as getMaxZIndex, q as getStyle, n as hasAttr, j as hasClass, i as isVisible, v as offset, w as position, b as reflow, l as removeAttr, h as removeClass, a as removeNode, p as removeStyle, r as requestAF, d as select, s as selectAll, k as setAttr, o as setStyle } from '../../dom-bb55b42a.js';
-import '../../get-ab1b7d93.js';
-import '../../isObject-fe8b81fd.js';
-import '../../toString-f3196832.js';
-import '../../eq-95cd2573.js';
+export { M as MutationObs, f as addClass, c as cancelAF, e as contains, m as getAttr, t as getBCR, g as getById, u as getCS, x as getMaxZIndex, q as getStyle, n as hasAttr, j as hasClass, i as isVisible, v as offset, w as position, b as reflow, l as removeAttr, h as removeClass, a as removeNode, p as removeStyle, r as requestAF, d as select, s as selectAll, k as setAttr, o as setStyle } from '../../dom-59ac8636.js';
+import '../../get-73ac2f59.js';
+import '../../isObject-3a5b854d.js';
+import '../../_commonjsHelpers-48a9cab9.js';
+import '../../toString-47fa81b4.js';
+import '../../eq-fa566495.js';

package/dist/bundled/v3/utils/index.js

@@ -3,13 +3,14 @@ export { CODE_BACKSPACE, CODE_BREAK, CODE_DELETE, CODE_DOWN, CODE_END, CODE_ENTE
 export { PLACEMENT_BOTTOM_END, PLACEMENT_BOTTOM_START, PLACEMENT_LEFT_END, PLACEMENT_LEFT_START, PLACEMENT_RIGHT_END, PLACEMENT_RIGHT_START, PLACEMENT_TOP_END, PLACEMENT_TOP_START } from './constants/poper.js';
 export { RX_ABBREVIATION_FROM_STRING, RX_ARRAY_NOTATION, RX_BV_PREFIX, RX_DATE, RX_DATE_SPLIT, RX_DIGITS, RX_ENCODED_COMMA, RX_ENCODE_REVERSE, RX_EXTENSION, RX_HASH, RX_HASH_ID, RX_HREF, RX_HTML_TAGS, RX_HYPHENATE, RX_LONG_COLOR, RX_LOWER_UPPER, RX_NUMBER, RX_PLUS, RX_QUERY_START, RX_REGEXP_REPLACE, RX_SHORT_COLOR, RX_SPACES, RX_SPACE_SPLIT, RX_STAR, RX_START_SPACE_WORD, RX_TIME, RX_TRIM_LEFT, RX_TRIM_RIGHT, RX_UNDERSCORE, RX_UN_KEBAB } from './constants/regex.js';
 export { generateHslFromString, hexToRgb, hslToColorString, rgbToHex } from './functions/color.js';
-export { M as MutationObs, f as addClass, c as cancelAF, e as contains, m as getAttr, t as getBCR, g as getById, u as getCS, x as getMaxZIndex, q as getStyle, n as hasAttr, j as hasClass, i as isVisible, v as offset, w as position, b as reflow, l as removeAttr, h as removeClass, a as removeNode, p as removeStyle, r as requestAF, d as select, s as selectAll, k as setAttr, o as setStyle } from '../dom-bb55b42a.js';
+export { M as MutationObs, f as addClass, c as cancelAF, e as contains, m as getAttr, t as getBCR, g as getById, u as getCS, x as getMaxZIndex, q as getStyle, n as hasAttr, j as hasClass, i as isVisible, v as offset, w as position, b as reflow, l as removeAttr, h as removeClass, a as removeNode, p as removeStyle, r as requestAF, d as select, s as selectAll, k as setAttr, o as setStyle } from '../dom-59ac8636.js';
 export { getHashOfString, normalize } from './functions/hash.js';
 export { pxToRem } from './functions/px-to-rem.js';
 export { getAbbreviation } from './functions/text.js';
 export { isEmpty } from './isEmpty.js';
 export { isEmptyValue } from './isEmptyValue.js';
-import '../isObject-fe8b81fd.js';
-import '../get-ab1b7d93.js';
-import '../toString-f3196832.js';
-import '../eq-95cd2573.js';
+import '../isObject-3a5b854d.js';
+import '../_commonjsHelpers-48a9cab9.js';
+import '../get-73ac2f59.js';
+import '../toString-47fa81b4.js';
+import '../eq-fa566495.js';

package/dist/esm/v2/{OrAvatar-d1c82ab9.js → OrAvatar-dd0e1e3b.js}

@@ -13,74 +13,93 @@ var AvatarSize;
 })(AvatarSize || (AvatarSize = {}));
 var AvatarColor;
 (function (AvatarColor) {
-  AvatarColor["blue"] = "blue";
-  AvatarColor["yellow"] = "yellow";
-  AvatarColor["red"] = "red";
-  AvatarColor["green"] = "green";
-  AvatarColor["grey"] = "grey";
-  AvatarColor["auto"] = "auto";
+  AvatarColor["Auto"] = "auto";
+  AvatarColor["Blue"] = "blue";
+  AvatarColor["Grey"] = "grey";
+  AvatarColor["Green"] = "green";
+  AvatarColor["Yellow"] = "yellow";
+  AvatarColor["Red"] = "red";
 })(AvatarColor || (AvatarColor = {}));
 
-const AvatarRoot = [
+const Avatar = [
 // Layout
-'flex', 'items-center', 'justify-center', 'overflow-hidden',
-// Box
-'rounded-full',
+'layout-inline-row justify-center',
+// Overflow
+'overflow-hidden',
 // Interactivity
-'interactivity-none'];
-const AvatarImage = [
-// Box
-'w-full', 'h-full', 'object-cover'];
-const AvatarRootSizes = {
-  'xl': [
+'interactivity-none',
+// Shape
+'rounded-full'];
+const AvatarSizes = {
+  [AvatarSize.XL]: [
   // Box
   'w-[80px]', 'h-[80px]'],
-  'l': [
+  [AvatarSize.L]: [
   // Box
   'w-[64px]', 'h-[64px]'],
-  'm': [
+  [AvatarSize.M]: [
   // Box
   'w-[40px]', 'h-[40px]'],
-  's': [
+  [AvatarSize.S]: [
   // Box
   'w-[32px]', 'h-[32px]'],
-  'xs': [
+  [AvatarSize.XS]: [
   // Box
   'w-[24px]', 'h-[24px]']
 };
-const AvatarRootColors = {
-  [AvatarColor.blue]: [
+const AvatarIconSizes = {
+  [AvatarSize.XL]: [
+  // Typography
+  'text-[40px]'],
+  [AvatarSize.L]: [
+  // Typography
+  'text-[32px]'],
+  [AvatarSize.M]: [
+  // Typography
+  'text-[20px]'],
+  [AvatarSize.S]: [
+  // Typography
+  'text-[16px]'],
+  [AvatarSize.XS]: [
+  // Typography
+  'text-[16px]']
+};
+const AvatarTextSizes = {
+  [AvatarSize.XL]: [
+  // Typography
+  'typography-headline-1'],
+  [AvatarSize.L]: [
+  // Typography
+  'typography-headline-1'],
+  [AvatarSize.M]: [
+  // Typography
+  'typography-body-1-bold'],
+  [AvatarSize.S]: [
+  // Typography
+  'typography-body-1-bold'],
+  [AvatarSize.XS]: [
+  // Typography
+  'typography-caption-semibold']
+};
+const AvatarColors = {
+  [AvatarColor.Auto]: [
   // Theme
-  'theme-preset-1-primary', 'dark:theme-preset-1-primary-dark'],
-  [AvatarColor.yellow]: [
+  'theme-foreground-base', 'dark:theme-foreground-base-dark'],
+  [AvatarColor.Blue]: [
   // Theme
-  'theme-preset-1-warning', 'dark:theme-preset-1-warning-dark'],
-  [AvatarColor.red]: [
+  'theme-preset-1-primary', 'dark:theme-preset-1-primary-dark'],
+  [AvatarColor.Grey]: [
   // Theme
-  'theme-preset-1-error', 'dark:theme-preset-1-error-dark'],
-  [AvatarColor.green]: [
+  'theme-preset-1-secondary', 'dark:theme-preset-1-secondary-dark'],
+  [AvatarColor.Green]: [
   // Theme
   'theme-preset-1-success', 'dark:theme-preset-1-success-dark'],
-  [AvatarColor.grey]: [
+  [AvatarColor.Yellow]: [
   // Theme
-  'theme-preset-1-secondary', 'dark:theme-preset-1-secondary-dark'],
-  [AvatarColor.auto]: [
+  'theme-preset-1-warning', 'dark:theme-preset-1-warning-dark'],
+  [AvatarColor.Red]: [
   // Theme
-  'text-white', 'dark:text-overlay-dark']
-};
-const AvatarRootAbbreviationSizes = {
-  'xl': ['typography-headline-1'],
-  'l': ['typography-headline-1'],
-  'm': ['typography-body-1-bold'],
-  's': ['typography-body-1-bold'],
-  'xs': ['typography-caption-semibold']
-};
-const AvatarRootIconSizes = {
-  'xl': ['text-[40px]'],
-  'l': ['text-[32px]'],
-  'm': ['text-[20px]'],
-  's': ['text-[16px]'],
-  'xs': ['text-[16px]']
+  'theme-preset-1-error', 'dark:theme-preset-1-error-dark']
 };
 
 var script = defineComponent({
@@ -93,50 +112,43 @@ var script = defineComponent({
       type: String,
       default: undefined
     },
-    size: {
-      type: String,
-      default: AvatarSize.M
-    },
     icon: {
       type: String,
       default: undefined
     },
+    size: {
+      type: String,
+      default: AvatarSize.M
+    },
     color: {
       type: String,
-      default: AvatarColor.auto,
-      required: false
+      default: AvatarColor.Auto
     },
     colorSalt: {
       type: String,
-      default: undefined,
-      required: false
+      default: undefined
     }
   },
   expose: ['root'],
   setup(props) {
     // Refs
     const root = ref();
-    const isIcon = computed(() => {
-      return !props.icon;
-    });
     // Styles
-    const rootStyles = computed(() => ['or-avatar-v3', ...AvatarRoot, ...AvatarRootSizes[props.size], ...AvatarRootColors[props.color], ...(isIcon.value ? AvatarRootAbbreviationSizes[props.size] : AvatarRootIconSizes[props.size])]);
-    const imageStyles = computed(() => [...AvatarImage]);
+    const rootStyles = computed(() => ['or-avatar-v3', ...Avatar, ...AvatarSizes[props.size], ...(props.icon ? AvatarIconSizes[props.size] : AvatarTextSizes[props.size]), ...AvatarColors[props.color]]);
     // Effects
     watchPostEffect(() => {
       var _a;
       const rootElement = root.value;
-      if (rootElement && !props.src && props.color === AvatarColor.auto) {
+      if (rootElement && !props.src && props.color === AvatarColor.Auto) {
         Object.assign(rootElement.style, {
-          background: hslToColorString(generateHslFromString((_a = props.colorSalt) !== null && _a !== void 0 ? _a : '')),
-          color: props.color
+          color: props.color,
+          background: hslToColorString(generateHslFromString((_a = props.colorSalt) !== null && _a !== void 0 ? _a : ''))
         });
       }
     });
     return {
       root,
-      rootStyles,
-      imageStyles
+      rootStyles
     };
   }
 });
@@ -153,18 +165,18 @@ var __vue_render__ = function () {
     ref: "root",
     class: _vm.rootStyles
   }, [_vm._t("default", function () {
-    return [_vm.src ? _c('img', {
-      class: _vm.imageStyles,
+    return [_vm.src ? [_c('img', {
+      class: ['w-full', 'h-full', 'object-cover'],
       attrs: {
         "src": _vm.src,
         "alt": ''
       }
-    }) : _vm.icon ? _c('or-icon', {
+    })] : _vm.icon ? [_c('OrIcon', {
       attrs: {
         "icon": _vm.icon,
-        "size": "inherit"
+        "size": 'inherit'
       }
-    }) : _vm._e()];
+    })] : _vm._e()];
   })], 2);
 };
 var __vue_staticRenderFns__ = [];

package/dist/esm/v2/{OrBottomSheet-f709280c.js → OrBottomSheet-a4ee4b0e.js}

@@ -1,9 +1,10 @@
 import { usePointerSwipe, SwipeDirection, onClickOutside } from '@vueuse/core';
 import { ref, unref, computed, defineComponent, toRef, watch } from 'vue-demi';
 import { u as usePopoverState } from './usePopoverState-b92c698b.js';
-import '@onereach/styles/tailwind.config.json';
-import { _ as __vue_component__$1 } from './OrOverlay-b39af8c7.js';
-import { u as useTheme } from './useTheme-e8494a32.js';
+import '@onereach/styles/tailwind.config';
+import 'tailwindcss/resolveConfig';
+import { _ as __vue_component__$1 } from './OrOverlay-f819eff9.js';
+import { u as useTheme } from './useTheme-e23d13c8.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var BottomSheetVariant;
@@ -12,47 +13,6 @@ var BottomSheetVariant;
   BottomSheetVariant["Advanced"] = "advanced";
 })(BottomSheetVariant || (BottomSheetVariant = {}));
 
-const BottomSheet = [
-// Position
-'fixed', 'left-none', 'right-none', 'bottom-none',
-// Layout
-'layout-column',
-// Shape
-'rounded-t-lg',
-// Theme
-'theme-background-base', 'dark:theme-background-base-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark',
-// Elevation
-'shadow-contextual', 'dark:shadow-contextual-dark'];
-const BottomSheetVariants = {
-  'basic': [],
-  'advanced': [
-  // Box
-  'max-h-[50%]',
-  // Animation
-  'transition-[min-height]', 'transition-[max-height]']
-};
-const BottomSheetHandle = [
-// Layout
-'layout-row justify-center',
-// Box
-'after:w-2xl', 'after:h-xs',
-// Shape
-'after:rounded-full',
-// Spacing
-'px-sm', 'py-sm',
-// Interactivity
-'cursor-grab',
-// Theme
-'after:bg-outline', 'after:dark:bg-outline'];
-const BottomSheetHeader = [
-// Layout
-'empty:hidden',
-// Spacing
-'px-lg', 'py-md',
-// Typography
-'typography-headline-3'];
-const BottomSheetContent = ['grow'];
-
 function useBottomSheetSwipeState(root, content, fullscreen, variant, close) {
   const inlineSwipingStyles = ref({});
   const skipSwipe = ref(false);
@@ -118,6 +78,48 @@ function useBottomSheetSwipeState(root, content, fullscreen, variant, close) {
   };
 }
 
+const BottomSheet = [
+// Position
+'fixed', 'left-none', 'right-none', 'bottom-none',
+// Layout
+'layout-column',
+// Shape
+'rounded-t-lg',
+// Elevation
+'shadow-contextual', 'dark:shadow-contextual-dark',
+// Typography
+'typography-body-2-regular',
+// Theme
+'theme-background-base', 'dark:theme-background-base-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark'];
+const BottomSheetVariants = {
+  [BottomSheetVariant.Basic]: [],
+  [BottomSheetVariant.Advanced]: [
+  // Box
+  'max-h-[50%]',
+  // Transition
+  'transition-[min-height]', 'transition-[max-height]']
+};
+const BottomSheetHandle = [
+// Layout
+'layout-row justify-center',
+// Interactivity
+'interactivity-auto !cursor-grab',
+// Box
+'after:w-2xl', 'after:h-xs',
+// Spacing
+'px-sm', 'py-sm',
+// Shape
+'after:rounded-full',
+// Theme
+'after:bg-outline', 'after:dark:bg-outline'];
+const BottomSheetHeader = [
+// Layout (empty)
+'empty:hidden',
+// Spacing
+'px-lg', 'py-md',
+// Typography
+'typography-headline-3'];
+
 var script = defineComponent({
   name: 'OrBottomSheet',
   components: {
@@ -140,6 +142,10 @@ var script = defineComponent({
     // Refs
     const root = ref();
     const content = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-bottom-sheet-v3', ...BottomSheet, ...BottomSheetVariants[props.variant]]);
+    const handleStyles = computed(() => [...BottomSheetHandle]);
+    const headerStyles = computed(() => [...BottomSheetHeader]);
     // State
     const {
       state,
@@ -172,17 +178,11 @@ var script = defineComponent({
       }
     });
     // #endregion
-    // Styles
-    const rootStyles = computed(() => ['or-bottom-sheet-v3', ...BottomSheet, ...BottomSheetVariants[props.variant]]);
-    const handleStyles = computed(() => [...BottomSheetHandle]);
-    const headerStyles = computed(() => [...BottomSheetHeader]);
-    const contentStyles = computed(() => [...BottomSheetContent, fullscreen.value || props.variant === BottomSheetVariant.Basic ? 'overflow-y-auto' : 'overflow-hidden']);
     return {
       root,
       content,
       rootStyles,
       rootInlineStyles,
-      contentStyles,
       handleStyles,
       headerStyles,
       state,
@@ -216,7 +216,7 @@ var __vue_render__ = function () {
     class: _vm.headerStyles
   }, [_vm._t("header")], 2), _vm._v(" "), _c('div', {
     ref: "content",
-    class: _vm.contentStyles
+    class: ['grow', _vm.fullscreen || _vm.variant === 'basic' ? 'overflow-y-auto' : 'overflow-hidden']
   }, [_vm._t("default")], 2)], 2)]) : _vm._e();
 };
 var __vue_staticRenderFns__ = [];

package/dist/esm/v2/{OrButton-9622e713.js → OrButton-a23ee9f0.js}

@@ -22,38 +22,40 @@ var ButtonType;
   ButtonType["Reset"] = "reset";
 })(ButtonType || (ButtonType = {}));
 
-const ButtonRoot = [
+const Button = [
 // Layout
 'layout-inline-row justify-center',
-// Shape
-'rounded-md',
+// Overflow
+'overflow-hidden',
 // Interactivity
 'interactivity-auto',
+// Shape
+'rounded-md',
 // Typography
 'typography-button'];
-const ButtonRootVariants = {
-  'contained': [
+const ButtonVariants = {
+  [ButtonVariant.Contained]: [
   // Box
   'min-w-[96px]',
   // Spacing
   'px-md md:px-md', 'py-sm+ md:py-sm', 'gap-sm+ md:gap-sm',
-  // Theme
+  // Elevation (enabled)
   'enabled:shadow-button', 'dark:enabled:shadow-button-dark'],
-  'outlined': [
+  [ButtonVariant.Outlined]: [
   // Box
   'min-w-[96px]',
   // Spacing
   'px-md* md:px-md*', 'py-sm+* md:py-sm*', 'gap-sm+ md:gap-sm'],
-  'text': [
+  [ButtonVariant.Text]: [
   // Box
   'min-w-[96px]',
   // Spacing
   'px-md md:px-md', 'py-sm+ md:py-sm', 'gap-sm+ md:gap-sm'],
-  'link': [
+  [ButtonVariant.Link]: [
   // Spacing
   'gap-xs']
 };
-const ButtonRootColors = {
+const ButtonColors = {
   'primary-contained': [
   // Theme
   'theme-preset-1-primary', 'dark:theme-preset-1-primary-dark'],
@@ -133,7 +135,7 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-button-v3', ...ButtonRoot, ...ButtonRootVariants[props.variant], ...ButtonRootColors[`${props.color}-${props.variant}`], props.loading && 'interactivity-none']);
+    const rootStyles = computed(() => ['or-button-v3', ...Button, ...ButtonVariants[props.variant], ...ButtonColors[`${props.color}-${props.variant}`], props.loading && 'interactivity-none']);
     return {
       root,
       rootStyles,

package/dist/esm/v2/{OrCardCollection-285d2c6a.js → OrCardCollection-9aaa7a3c.js}

@@ -1,15 +1,32 @@
 import { defineComponent, computed, ref, watch } from 'vue-demi';
-import { _ as __vue_component__$2 } from './OrIconButton-9ed73ef0.js';
-import { _ as __vue_component__$4 } from './OrSearch-f4a106cb.js';
+import { _ as __vue_component__$2 } from './OrIconButton-311050dc.js';
+import { _ as __vue_component__$4 } from './OrSearch-f49e5f70.js';
 import './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
+import { _ as __vue_component__$3 } from './OrSorting-fad7928f.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-import { _ as __vue_component__$3 } from './OrSorting-98a3ed19.js';
 
-const CardCollectionRoot = [
+var CardCollectionView;
+(function (CardCollectionView) {
+  CardCollectionView["Grid"] = "grid";
+  CardCollectionView["List"] = "list";
+})(CardCollectionView || (CardCollectionView = {}));
+const gridView = {
+  view: CardCollectionView.Grid,
+  icon: 'grid_view'
+};
+const listView = {
+  view: CardCollectionView.List,
+  icon: 'view_agenda'
+};
+const defaultViewModes = [gridView, listView];
+
+const CardCollection = [
 // Layout
 'layout-column',
+// Box
+'max-h-full',
 // Spacing
-'gap-md', 'max-h-full'];
+'gap-md'];
 const CardCollectionToolbar = [
 // Layout
 'layout-row justify-between',
@@ -25,15 +42,17 @@ const CardCollectionToolbarPanel = [
 const CardCollectionContent = [
 // Layout
 'grid',
-// Spacing
-'gap-sm md:gap-md',
 // Overflow
-'overflow-y-auto', 'p-xs*', '-m-xs*', '-mr-[7px]'];
+'overflow-auto',
+// Spacing
+'-mx-sm', '-my-sm', '-mr-[calc(theme(spacing.sm) * 2)]', 'px-sm', 'py-sm', 'gap-sm md:gap-md'];
 const CardCollectionContentViews = {
-  'grid': [
+  [CardCollectionView.Grid]: [
+  // Layout
+  'grid-cols-1 md:grid-cols-5'],
+  [CardCollectionView.List]: [
   // Layout
-  'grid-cols-1', 'md:grid-cols-5'],
-  'list': ['grid-cols-1']
+  'grid-cols-1']
 };
 
 var script$1 = defineComponent({
@@ -49,9 +68,10 @@ var script$1 = defineComponent({
     }
   },
   setup(props) {
-    const contentStyles = computed(() => [...CardCollectionContent, ...CardCollectionContentViews[props.mode]]);
+    // Styles
+    const rootStyles = computed(() => [...CardCollectionContent, ...CardCollectionContentViews[props.mode]]);
     return {
-      contentStyles
+      rootStyles
     };
   }
 });
@@ -65,7 +85,7 @@ var __vue_render__$1 = function () {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c('div', {
-    class: _vm.contentStyles
+    class: _vm.rootStyles
   }, [_vm._l(_vm.items, function (item) {
     return _vm._t("item", function () {
       return [_vm._v("\n    " + _vm._s(item.key) + "\n  ")];
@@ -96,21 +116,6 @@ const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
   staticRenderFns: __vue_staticRenderFns__$1
 }, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
 
-var DefaultCardCollectionViews;
-(function (DefaultCardCollectionViews) {
-  DefaultCardCollectionViews["Grid"] = "grid";
-  DefaultCardCollectionViews["List"] = "list";
-})(DefaultCardCollectionViews || (DefaultCardCollectionViews = {}));
-const gridView = {
-  view: DefaultCardCollectionViews.Grid,
-  icon: 'grid_view'
-};
-const listView = {
-  view: DefaultCardCollectionViews.List,
-  icon: 'view_agenda'
-};
-const defaultViewModes = [gridView, listView];
-
 var script = defineComponent({
   name: 'OrCardCollection',
   components: {
@@ -159,7 +164,7 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-card-collection-v3', ...CardCollectionRoot]);
+    const rootStyles = computed(() => ['or-card-collection-v3', ...CardCollection]);
     const toolbarStyles = computed(() => [...CardCollectionToolbar]);
     const toolbarPanelStyles = computed(() => [...CardCollectionToolbarPanel]);
     // State
@@ -298,4 +303,4 @@ const __vue_component__ = /*#__PURE__*/normalizeComponent({
   staticRenderFns: __vue_staticRenderFns__
 }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
 
-export { DefaultCardCollectionViews as D, __vue_component__ as _, defaultViewModes as d, gridView as g, listView as l };
+export { CardCollectionView as C, __vue_component__ as _, defaultViewModes as d, gridView as g, listView as l };