@onereach/ui-components 4.18.2-beta.3104.0 → 4.18.2-beta.3109.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 { Avatar, AvatarSizes, AvatarIconSizes, AvatarTextSizes, AvatarColors } from './styles.js';
+import { AvatarRoot, AvatarRootSizes, AvatarRootColors, AvatarRootAbbreviationSizes, AvatarRootIconSizes, AvatarImage } 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,43 +20,50 @@ var script = defineComponent({
       type: String,
       default: undefined
     },
-    icon: {
-      type: String,
-      default: undefined
-    },
     size: {
       type: String,
       default: AvatarSize.M
     },
+    icon: {
+      type: String,
+      default: undefined
+    },
     color: {
       type: String,
-      default: AvatarColor.Auto
+      default: AvatarColor.auto,
+      required: false
     },
     colorSalt: {
       type: String,
-      default: undefined
+      default: undefined,
+      required: false
     }
   },
   expose: ['root'],
   setup(props) {
     // Refs
     const root = ref();
+    const isIcon = computed(() => {
+      return !props.icon;
+    });
     // Styles
-    const rootStyles = computed(() => ['or-avatar-v3', ...Avatar, ...AvatarSizes[props.size], ...(props.icon ? AvatarIconSizes[props.size] : AvatarTextSizes[props.size]), ...AvatarColors[props.color]]);
+    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]);
     // 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, {
-          color: props.color,
-          background: hslToColorString(generateHslFromString((_a = props.colorSalt) !== null && _a !== void 0 ? _a : ''))
+          background: hslToColorString(generateHslFromString((_a = props.colorSalt) !== null && _a !== void 0 ? _a : '')),
+          color: props.color
         });
       }
     });
     return {
       root,
-      rootStyles
+      rootStyles,
+      imageStyles
     };
   }
 });
@@ -73,18 +80,18 @@ var __vue_render__ = function () {
     ref: "root",
     class: _vm.rootStyles
   }, [_vm._t("default", function () {
-    return [_vm.src ? [_c('img', {
-      class: ['w-full', 'h-full', 'object-cover'],
+    return [_vm.src ? _c('img', {
+      class: _vm.imageStyles,
       attrs: {
         "src": _vm.src,
         "alt": ''
       }
-    })] : _vm.icon ? [_c('OrIcon', {
+    }) : _vm.icon ? _c('or-icon', {
       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,68 +3,74 @@ 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<"auto" | "blue" | "grey" | "green" | "yellow" | "red">;
+        type: PropType<AvatarColor>;
         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<"auto" | "blue" | "grey" | "green" | "yellow" | "red">;
+        type: PropType<AvatarColor>;
         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;
-    size: "xl" | "l" | "m" | "s" | "xs";
-    color: "auto" | "blue" | "grey" | "green" | "yellow" | "red";
+    color: AvatarColor;
     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;
-    size: "xl" | "l" | "m" | "s" | "xs";
-    color: "auto" | "blue" | "grey" | "green" | "yellow" | "red";
+    color: AvatarColor;
     colorSalt: string;
 } & {}, {
     src: string;
+    size: AvatarSize;
     icon: string;
-    size: "xl" | "l" | "m" | "s" | "xs";
-    color: "auto" | "blue" | "grey" | "green" | "yellow" | "red";
+    color: AvatarColor;
     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 {
-    Auto = "auto",
-    Blue = "blue",
-    Grey = "grey",
-    Green = "green",
-    Yellow = "yellow",
-    Red = "red"
+    blue = "blue",
+    yellow = "yellow",
+    red = "red",
+    green = "green",
+    grey = "grey",
+    auto = "auto"
 }

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

@@ -8,12 +8,12 @@ var AvatarSize;
 })(AvatarSize || (AvatarSize = {}));
 var AvatarColor;
 (function (AvatarColor) {
-  AvatarColor["Auto"] = "auto";
-  AvatarColor["Blue"] = "blue";
-  AvatarColor["Grey"] = "grey";
-  AvatarColor["Green"] = "green";
-  AvatarColor["Yellow"] = "yellow";
-  AvatarColor["Red"] = "red";
+  AvatarColor["blue"] = "blue";
+  AvatarColor["yellow"] = "yellow";
+  AvatarColor["red"] = "red";
+  AvatarColor["green"] = "green";
+  AvatarColor["grey"] = "grey";
+  AvatarColor["auto"] = "auto";
 })(AvatarColor || (AvatarColor = {}));
 
 export { AvatarColor, AvatarSize };

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

@@ -1,6 +1,7 @@
 import { AvatarColor, AvatarSize } from './props';
-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[]>;
+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[]>;

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

@@ -1,84 +1,65 @@
-import { AvatarSize, AvatarColor } from './props.js';
+import { AvatarColor } from './props.js';
 
-const Avatar = [
+const AvatarRoot = [
 // Layout
-'layout-inline-row justify-center',
-// Overflow
-'overflow-hidden',
+'flex', 'items-center', 'justify-center', 'overflow-hidden',
+// Box
+'rounded-full',
 // Interactivity
-'interactivity-none',
-// Shape
-'rounded-full'];
-const AvatarSizes = {
-  [AvatarSize.XL]: [
+'interactivity-none'];
+const AvatarImage = [
+// Box
+'w-full', 'h-full', 'object-cover'];
+const AvatarRootSizes = {
+  'xl': [
   // Box
   'w-[80px]', 'h-[80px]'],
-  [AvatarSize.L]: [
+  'l': [
   // Box
   'w-[64px]', 'h-[64px]'],
-  [AvatarSize.M]: [
+  'm': [
   // Box
   'w-[40px]', 'h-[40px]'],
-  [AvatarSize.S]: [
+  's': [
   // Box
   'w-[32px]', 'h-[32px]'],
-  [AvatarSize.XS]: [
+  'xs': [
   // Box
   'w-[24px]', 'h-[24px]']
 };
-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-foreground-base', 'dark:theme-foreground-base-dark'],
-  [AvatarColor.Blue]: [
+const AvatarRootColors = {
+  [AvatarColor.blue]: [
   // Theme
   'theme-preset-1-primary', 'dark:theme-preset-1-primary-dark'],
-  [AvatarColor.Grey]: [
+  [AvatarColor.yellow]: [
   // Theme
-  'theme-preset-1-secondary', 'dark:theme-preset-1-secondary-dark'],
-  [AvatarColor.Green]: [
+  'theme-preset-1-warning', 'dark:theme-preset-1-warning-dark'],
+  [AvatarColor.red]: [
+  // Theme
+  'theme-preset-1-error', 'dark:theme-preset-1-error-dark'],
+  [AvatarColor.green]: [
   // Theme
   'theme-preset-1-success', 'dark:theme-preset-1-success-dark'],
-  [AvatarColor.Yellow]: [
+  [AvatarColor.grey]: [
   // Theme
-  'theme-preset-1-warning', 'dark:theme-preset-1-warning-dark'],
-  [AvatarColor.Red]: [
+  'theme-preset-1-secondary', 'dark:theme-preset-1-secondary-dark'],
+  [AvatarColor.auto]: [
   // Theme
-  'theme-preset-1-error', 'dark:theme-preset-1-error-dark']
+  '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]']
 };
 
-export { Avatar, AvatarColors, AvatarIconSizes, AvatarSizes, AvatarTextSizes };
+export { AvatarImage, AvatarRoot, AvatarRootAbbreviationSizes, AvatarRootColors, AvatarRootIconSizes, AvatarRootSizes };

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

@@ -1,8 +1,8 @@
 import { o as onClickOutside } from '../../index-509d77a1.js';
-import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
-import useBottomSheetSwipeState from './hooks/useBottomSheetSwipeState.js';
+import { defineComponent, ref, toRef, watch, computed } from 'vue-demi';
 import { BottomSheetVariant } from './props.js';
-import { BottomSheet, BottomSheetVariants, BottomSheetHandle, BottomSheetHeader } from './styles.js';
+import { BottomSheet, BottomSheetVariants, BottomSheetHandle, BottomSheetHeader, BottomSheetContent } from './styles.js';
+import useBottomSheetSwipeState from './hooks/useBottomSheetSwipeState.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,10 +39,6 @@ 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,
@@ -75,11 +71,17 @@ 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,
@@ -113,7 +115,7 @@ var __vue_render__ = function () {
     class: _vm.headerStyles
   }, [_vm._t("header")], 2), _vm._v(" "), _c('div', {
     ref: "content",
-    class: ['grow', _vm.fullscreen || _vm.variant === 'basic' ? 'overflow-y-auto' : 'overflow-hidden']
+    class: _vm.contentStyles
   }, [_vm._t("default")], 2)], 2)]) : _vm._e();
 };
 var __vue_staticRenderFns__ = [];

package/dist/bundled/v2/components/OrBottomSheetV3/OrBottomSheet.vue.d.ts

@@ -529,6 +529,7 @@ 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">;
@@ -1088,6 +1089,7 @@ 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,3 +3,4 @@ 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,49 +1,42 @@
-import { BottomSheetVariant } from './props.js';
-
 const BottomSheet = [
 // Position
 'fixed', 'left-none', 'right-none', 'bottom-none',
 // Layout
 'layout-column',
-// Overflow
-'overflow-hidden',
-// Interactivity
-'interactivity-none',
 // 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'];
+'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 = {
-  [BottomSheetVariant.Basic]: [],
-  [BottomSheetVariant.Advanced]: [
+  'basic': [],
+  'advanced': [
   // Box
   'max-h-[50%]',
-  // Transition
+  // Animation
   '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',
+// Spacing
+'px-sm', 'py-sm',
+// Interactivity
+'cursor-grab',
 // Theme
 'after:bg-outline', 'after:dark:bg-outline'];
 const BottomSheetHeader = [
-// Layout (empty)
+// Layout
 'empty:hidden',
 // Spacing
 'px-lg', 'py-md',
 // Typography
 'typography-headline-3'];
+const BottomSheetContent = ['grow'];
 
-export { BottomSheet, BottomSheetHandle, BottomSheetHeader, BottomSheetVariants };
+export { BottomSheet, BottomSheetContent, 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 { Button, ButtonVariants, ButtonColors } from './styles.js';
+import { ButtonRoot, ButtonRootVariants, ButtonRootColors } 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', ...Button, ...ButtonVariants[props.variant], ...ButtonColors[`${props.color}-${props.variant}`], props.loading && 'interactivity-none']);
+    const rootStyles = computed(() => ['or-button-v3', ...ButtonRoot, ...ButtonRootVariants[props.variant], ...ButtonRootColors[`${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 Button: string[];
-export declare const ButtonVariants: Record<ButtonVariant, string[]>;
-export declare const ButtonColors: Record<`${ButtonColor}-${ButtonVariant}`, string[]>;
+export declare const ButtonRoot: string[];
+export declare const ButtonRootVariants: Record<ButtonVariant, string[]>;
+export declare const ButtonRootColors: Record<`${ButtonColor}-${ButtonVariant}`, string[]>;

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

@@ -1,39 +1,35 @@
-import { ButtonVariant } from './props.js';
-
-const Button = [
+const ButtonRoot = [
 // Layout
 'layout-inline-row justify-center',
-// Overflow
-'overflow-hidden',
-// Interactivity
-'interactivity-auto',
 // Shape
 'rounded-md',
+// Interactivity
+'interactivity-auto',
 // Typography
 'typography-button'];
-const ButtonVariants = {
-  [ButtonVariant.Contained]: [
+const ButtonRootVariants = {
+  'contained': [
   // Box
   'min-w-[96px]',
   // Spacing
   'px-md md:px-md', 'py-sm+ md:py-sm', 'gap-sm+ md:gap-sm',
-  // Elevation (enabled)
+  // Theme
   'enabled:shadow-button', 'dark:enabled:shadow-button-dark'],
-  [ButtonVariant.Outlined]: [
+  'outlined': [
   // Box
   'min-w-[96px]',
   // Spacing
   'px-md* md:px-md*', 'py-sm+* md:py-sm*', 'gap-sm+ md:gap-sm'],
-  [ButtonVariant.Text]: [
+  'text': [
   // Box
   'min-w-[96px]',
   // Spacing
   'px-md md:px-md', 'py-sm+ md:py-sm', 'gap-sm+ md:gap-sm'],
-  [ButtonVariant.Link]: [
+  'link': [
   // Spacing
   'gap-xs']
 };
-const ButtonColors = {
+const ButtonRootColors = {
   'primary-contained': [
   // Theme
   'theme-preset-1-primary', 'dark:theme-preset-1-primary-dark'],
@@ -72,4 +68,4 @@ const ButtonColors = {
   'activated:theme-foreground-default', 'dark:activated:theme-foreground-default-dark']
 };
 
-export { Button, ButtonColors, ButtonVariants };
+export { ButtonRoot, ButtonRootColors, ButtonRootVariants };

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

@@ -1,5 +1,5 @@
 import { defineComponent, computed, ref, watch } from 'vue-demi';
-import { CardCollectionContent, CardCollectionContentViews, CardCollection, CardCollectionToolbar, CardCollectionToolbarPanel } from './styles.js';
+import { CardCollectionContent, CardCollectionContentViews, CardCollectionRoot, 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/hooks/useBottomSheetSwipeState.js';
 import '../OrBottomSheetV3/props.js';
+import '../OrBottomSheetV3/styles.js';
+import '../OrBottomSheetV3/hooks/useBottomSheetSwipeState.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,10 +77,9 @@ var script$1 = defineComponent({
     }
   },
   setup(props) {
-    // Styles
-    const rootStyles = computed(() => [...CardCollectionContent, ...CardCollectionContentViews[props.mode]]);
+    const contentStyles = computed(() => [...CardCollectionContent, ...CardCollectionContentViews[props.mode]]);
     return {
-      rootStyles
+      contentStyles
     };
   }
 });
@@ -94,7 +93,7 @@ var __vue_render__$1 = function () {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c('div', {
-    class: _vm.rootStyles
+    class: _vm.contentStyles
   }, [_vm._l(_vm.items, function (item) {
     return _vm._t("item", function () {
       return [_vm._v("\n    " + _vm._s(item.key) + "\n  ")];
@@ -174,7 +173,7 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-card-collection-v3', ...CardCollection]);
+    const rootStyles = computed(() => ['or-card-collection-v3', ...CardCollectionRoot]);
     const toolbarStyles = computed(() => [...CardCollectionToolbar]);
     const toolbarPanelStyles = computed(() => [...CardCollectionToolbarPanel]);
     // State