@onereach/ui-components 4.18.2 → 4.18.3-beta.3120.0

package/dist/bundled/v2/components/OrAvatarV3/OrAvatar.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watchPostEffect } from 'vue-demi';
 import { hslToColorString, generateHslFromString } from '../../utils/functions/color.js';
 import { AvatarSize, AvatarColor } from './props.js';
-import { AvatarRoot, AvatarRootSizes, AvatarRootColors, AvatarRootAbbreviationSizes, AvatarRootIconSizes, AvatarImage } from './styles.js';
+import { Avatar, AvatarSizes, AvatarIconSizes, AvatarTextSizes, AvatarColors } from './styles.js';
 import __vue_component__$1 from '../OrIconV3/OrIcon.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../../utils/constants/regex.js';
@@ -20,50 +20,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
     };
   }
 });
@@ -80,18 +73,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/bundled/v2/components/OrAvatarV3/OrAvatar.vue.d.ts

@@ -3,74 +3,68 @@ import { AvatarColor, AvatarSize } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    imageStyles: import("@vue/composition-api").ComputedRef<string[]>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     src: {
         type: StringConstructor;
         default: undefined;
     };
-    size: {
-        type: PropType<AvatarSize>;
-        default: AvatarSize;
-    };
     icon: {
         type: StringConstructor;
         default: undefined;
     };
+    size: {
+        type: PropType<"xl" | "l" | "m" | "s" | "xs">;
+        default: AvatarSize;
+    };
     color: {
-        type: PropType<AvatarColor>;
+        type: PropType<"auto" | "blue" | "grey" | "green" | "yellow" | "red">;
         default: AvatarColor;
-        required: false;
     };
     colorSalt: {
         type: StringConstructor;
         default: undefined;
-        required: false;
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
     src: {
         type: StringConstructor;
         default: undefined;
     };
-    size: {
-        type: PropType<AvatarSize>;
-        default: AvatarSize;
-    };
     icon: {
         type: StringConstructor;
         default: undefined;
     };
+    size: {
+        type: PropType<"xl" | "l" | "m" | "s" | "xs">;
+        default: AvatarSize;
+    };
     color: {
-        type: PropType<AvatarColor>;
+        type: PropType<"auto" | "blue" | "grey" | "green" | "yellow" | "red">;
         default: AvatarColor;
-        required: false;
     };
     colorSalt: {
         type: StringConstructor;
         default: undefined;
-        required: false;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     src: string;
-    size: AvatarSize;
     icon: string;
-    color: AvatarColor;
+    size: "xl" | "l" | "m" | "s" | "xs";
+    color: "auto" | "blue" | "grey" | "green" | "yellow" | "red";
     colorSalt: string;
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    imageStyles: import("@vue/composition-api").ComputedRef<string[]>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
     src: string;
-    size: AvatarSize;
     icon: string;
-    color: AvatarColor;
+    size: "xl" | "l" | "m" | "s" | "xs";
+    color: "auto" | "blue" | "grey" | "green" | "yellow" | "red";
     colorSalt: string;
 } & {}, {
     src: string;
-    size: AvatarSize;
     icon: string;
-    color: AvatarColor;
+    size: "xl" | "l" | "m" | "s" | "xs";
+    color: "auto" | "blue" | "grey" | "green" | "yellow" | "red";
     colorSalt: string;
 }, true>);
 export default _default;

package/dist/bundled/v2/components/OrAvatarV3/props.d.ts

@@ -6,10 +6,10 @@ export declare enum AvatarSize {
     XS = "xs"
 }
 export declare enum AvatarColor {
-    blue = "blue",
-    yellow = "yellow",
-    red = "red",
-    green = "green",
-    grey = "grey",
-    auto = "auto"
+    Auto = "auto",
+    Blue = "blue",
+    Grey = "grey",
+    Green = "green",
+    Yellow = "yellow",
+    Red = "red"
 }

package/dist/bundled/v2/components/OrAvatarV3/props.js

@@ -8,12 +8,12 @@ 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 = {}));
 
 export { AvatarColor, AvatarSize };

package/dist/bundled/v2/components/OrAvatarV3/styles.d.ts

@@ -1,7 +1,6 @@
 import { AvatarColor, AvatarSize } from './props';
-export declare const AvatarRoot: string[];
-export declare const AvatarImage: string[];
-export declare const AvatarRootSizes: Record<AvatarSize, string[]>;
-export declare const AvatarRootColors: Record<AvatarColor, string[]>;
-export declare const AvatarRootAbbreviationSizes: Record<AvatarSize, string[]>;
-export declare const AvatarRootIconSizes: Record<AvatarSize, string[]>;
+export declare const Avatar: string[];
+export declare const AvatarSizes: Record<AvatarSize, string[]>;
+export declare const AvatarIconSizes: Record<AvatarSize, string[]>;
+export declare const AvatarTextSizes: Record<AvatarSize, string[]>;
+export declare const AvatarColors: Record<AvatarColor, string[]>;

package/dist/bundled/v2/components/OrAvatarV3/styles.js

@@ -1,65 +1,84 @@
-import { AvatarColor } from './props.js';
+import { AvatarSize, AvatarColor } from './props.js';
 
-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']
 };
 
-export { AvatarImage, AvatarRoot, AvatarRootAbbreviationSizes, AvatarRootColors, AvatarRootIconSizes, AvatarRootSizes };
+export { Avatar, AvatarColors, AvatarIconSizes, AvatarSizes, AvatarTextSizes };

package/dist/bundled/v2/components/OrBottomSheetV3/OrBottomSheet.js

@@ -1,8 +1,8 @@
 import { o as onClickOutside } from '../../index-509d77a1.js';
-import { defineComponent, ref, toRef, watch, computed } from 'vue-demi';
-import { BottomSheetVariant } from './props.js';
-import { BottomSheet, BottomSheetVariants, BottomSheetHandle, BottomSheetHeader, BottomSheetContent } from './styles.js';
+import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import useBottomSheetSwipeState from './hooks/useBottomSheetSwipeState.js';
+import { BottomSheetVariant } from './props.js';
+import { BottomSheet, BottomSheetVariants, BottomSheetHandle, BottomSheetHeader } from './styles.js';
 import __vue_component__$1 from '../OrOverlayV3/OrOverlay.js';
 import { usePopoverState } from '../../hooks/usePopoverState.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
@@ -39,6 +39,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,
@@ -71,17 +75,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,
@@ -115,7 +113,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/bundled/v2/components/OrBottomSheetV3/OrBottomSheet.vue.d.ts

@@ -529,7 +529,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         setProperty?: ((property: string, value: string | null, priority?: string | undefined) => void) | undefined;
         [Symbol.iterator]?: (() => IterableIterator<string>) | undefined;
     }>;
-    contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
     handleStyles: import("@vue/composition-api").ComputedRef<string[]>;
     headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     state: import("@vue/composition-api").Ref<"open" | "closed">;
@@ -1089,7 +1088,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         setProperty?: ((property: string, value: string | null, priority?: string | undefined) => void) | undefined;
         [Symbol.iterator]?: (() => IterableIterator<string>) | undefined;
     }>;
-    contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
     handleStyles: import("@vue/composition-api").ComputedRef<string[]>;
     headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     state: import("@vue/composition-api").Ref<"open" | "closed">;

package/dist/bundled/v2/components/OrBottomSheetV3/index.js

@@ -3,12 +3,12 @@ export { BottomSheetVariant } from './props.js';
 import '../../index-509d77a1.js';
 import '../../index-ec92055d.js';
 import 'vue-demi';
-import './styles.js';
 import './hooks/useBottomSheetSwipeState.js';
 import '../../hooks/useTheme.js';
 import '../../_commonjsHelpers-48a9cab9.js';
 import 'node:tty';
 import 'node:util';
+import './styles.js';
 import '../OrOverlayV3/OrOverlay.js';
 import '../OrOverlayV3/styles.js';
 import '../OrTeleportV3/OrTeleport.js';

package/dist/bundled/v2/components/OrBottomSheetV3/styles.d.ts

@@ -3,4 +3,3 @@ export declare const BottomSheet: string[];
 export declare const BottomSheetVariants: Record<BottomSheetVariant, string[]>;
 export declare const BottomSheetHandle: string[];
 export declare const BottomSheetHeader: string[];
-export declare const BottomSheetContent: string[];

package/dist/bundled/v2/components/OrBottomSheetV3/styles.js

@@ -1,3 +1,5 @@
+import { BottomSheetVariant } from './props.js';
+
 const BottomSheet = [
 // Position
 'fixed', 'left-none', 'right-none', 'bottom-none',
@@ -5,38 +7,39 @@ const BottomSheet = [
 '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'];
+'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 = {
-  'basic': [],
-  'advanced': [
+  [BottomSheetVariant.Basic]: [],
+  [BottomSheetVariant.Advanced]: [
   // Box
   'max-h-[50%]',
-  // Animation
+  // 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',
-// Shape
-'after:rounded-full',
 // Spacing
 'px-sm', 'py-sm',
-// Interactivity
-'cursor-grab',
+// Shape
+'after:rounded-full',
 // Theme
 'after:bg-outline', 'after:dark:bg-outline'];
 const BottomSheetHeader = [
-// Layout
+// Layout (empty)
 'empty:hidden',
 // Spacing
 'px-lg', 'py-md',
 // Typography
 'typography-headline-3'];
-const BottomSheetContent = ['grow'];
 
-export { BottomSheet, BottomSheetContent, BottomSheetHandle, BottomSheetHeader, BottomSheetVariants };
+export { BottomSheet, BottomSheetHandle, BottomSheetHeader, BottomSheetVariants };

package/dist/bundled/v2/components/OrButtonV3/OrButton.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, isVue3 } from 'vue-demi';
 import { ButtonType, ButtonVariant, ButtonColor } from './props.js';
-import { ButtonRoot, ButtonRootVariants, ButtonRootColors } from './styles.js';
+import { Button, ButtonVariants, ButtonColors } from './styles.js';
 import __vue_component__$1 from '../OrLoaderV3/OrLoader.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../../index-509d77a1.js';
@@ -49,7 +49,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/bundled/v2/components/OrButtonV3/styles.d.ts

@@ -1,4 +1,4 @@
 import { ButtonColor, ButtonVariant } from './props';
-export declare const ButtonRoot: string[];
-export declare const ButtonRootVariants: Record<ButtonVariant, string[]>;
-export declare const ButtonRootColors: Record<`${ButtonColor}-${ButtonVariant}`, string[]>;
+export declare const Button: string[];
+export declare const ButtonVariants: Record<ButtonVariant, string[]>;
+export declare const ButtonColors: Record<`${ButtonColor}-${ButtonVariant}`, string[]>;

package/dist/bundled/v2/components/OrButtonV3/styles.js

@@ -1,35 +1,39 @@
-const ButtonRoot = [
+import { ButtonVariant } from './props.js';
+
+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'],
@@ -68,4 +72,4 @@ const ButtonRootColors = {
   'activated:theme-foreground-default', 'dark:activated:theme-foreground-default-dark']
 };
 
-export { ButtonRoot, ButtonRootColors, ButtonRootVariants };
+export { Button, ButtonColors, ButtonVariants };

package/dist/bundled/v2/components/OrCardCollectionV3/OrCardCollection.js

@@ -1,5 +1,5 @@
 import { defineComponent, computed, ref, watch } from 'vue-demi';
-import { CardCollectionContent, CardCollectionContentViews, CardCollectionRoot, CardCollectionToolbar, CardCollectionToolbarPanel } from './styles.js';
+import { CardCollectionContent, CardCollectionContentViews, CardCollection, CardCollectionToolbar, CardCollectionToolbarPanel } from './styles.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import { gridView, defaultViewModes } from './props.js';
 import __vue_component__$2 from '../OrIconButtonV3/OrIconButton.js';
@@ -19,13 +19,13 @@ import '../../index-ec92055d.js';
 import '../OrPopoverV3/props.js';
 import '../OrPopoverV3/styles.js';
 import '../OrBottomSheetV3/OrBottomSheet.js';
-import '../OrBottomSheetV3/props.js';
-import '../OrBottomSheetV3/styles.js';
 import '../OrBottomSheetV3/hooks/useBottomSheetSwipeState.js';
+import '../OrBottomSheetV3/props.js';
 import '../../hooks/useTheme.js';
 import '../../_commonjsHelpers-48a9cab9.js';
 import 'node:tty';
 import 'node:util';
+import '../OrBottomSheetV3/styles.js';
 import '../OrOverlayV3/OrOverlay.js';
 import '../OrOverlayV3/styles.js';
 import '../OrTeleportV3/OrTeleport.js';
@@ -77,9 +77,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
     };
   }
 });
@@ -93,7 +94,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  ")];
@@ -173,7 +174,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