@central-design-system/components 3.0.0-beta.9 → 3.0.0-rc.1

package/dist/themes/colors.d.ts

@@ -0,0 +1,458 @@
+/**
+ * Automatically generated by CDS CLI from CDS Server
+ * Generated on 1/27/2025, 7:21:39 AM
+ * Updated on 2024-12-25T14:30:52.638Z
+ **/
+declare const _default: {
+    red: Readonly<{
+        light10: "#FFE9E3";
+        light50: "#FFD1C6";
+        light100: "#FEC0B2";
+        light200: "#FFAE9E";
+        light300: "#FE9585";
+        light400: "#FE8071";
+        light500: "#F46A5D";
+        light600: "#E4594F";
+        light700: "#D1453F";
+        light800: "#9D2124";
+        light900: "#831118";
+        light950: "#470500";
+        dark10: "#4C1715";
+        dark50: "#822825";
+        dark100: "#A5302F";
+        dark200: "#B8423D";
+        dark300: "#D15850";
+        dark400: "#DF655C";
+        dark500: "#F0786D";
+        dark600: "#F9887C";
+        dark700: "#FF9E92";
+        dark800: "#FFC4BA";
+        dark900: "#FFD2CC";
+        dark950: "#FFE8E4";
+    }>;
+    chocolate: Readonly<{
+        light10: "#FAEBDF";
+        light50: "#E7D9CC";
+        light100: "#E0CBBB";
+        light200: "#D8BEA9";
+        light300: "#CDAD93";
+        light400: "#C4A082";
+        light500: "#B78F6D";
+        light600: "#AC7F58";
+        light700: "#9E6D41";
+        light800: "#7F470D";
+        light900: "#693803";
+        light950: "#361D01";
+        dark10: "#3F2301";
+        dark50: "#6E3B01";
+        dark100: "#874E0A";
+        dark200: "#985E1F";
+        dark300: "#AF7134";
+        dark400: "#BB7F42";
+        dark500: "#CA915C";
+        dark600: "#D49E6D";
+        dark700: "#E1AE7F";
+        dark800: "#F1CBA7";
+        dark900: "#F4D8BE";
+        dark950: "#FAEADB";
+    }>;
+    orange: Readonly<{
+        light10: "#FEEAD9";
+        light50: "#FBD5B5";
+        light100: "#FBC398";
+        light200: "#FBB27C";
+        light300: "#FB9A57";
+        light400: "#F38A4A";
+        light500: "#E17B44";
+        light600: "#D16C39";
+        light700: "#BD5B2D";
+        light800: "#8F3810";
+        light900: "#782A0A";
+        light950: "#431502";
+        dark10: "#471D07";
+        dark50: "#793213";
+        dark100: "#9A3F15";
+        dark200: "#AC5025";
+        dark300: "#C36438";
+        dark400: "#D27144";
+        dark500: "#E48255";
+        dark600: "#EE9165";
+        dark700: "#F5A57F";
+        dark800: "#FAC7B0";
+        dark900: "#FBD5C4";
+        dark950: "#FEE8DE";
+    }>;
+    yellow: Readonly<{
+        light10: "#FBEDBE";
+        light50: "#F2DB82";
+        light100: "#EACD60";
+        light200: "#DEC048";
+        light300: "#D1AF30";
+        light400: "#C6A221";
+        light500: "#B69210";
+        light600: "#A6840A";
+        light700: "#937305";
+        light800: "#6B5100";
+        light900: "#584001";
+        light950: "#312300";
+        dark10: "#382601";
+        dark50: "#614301";
+        dark100: "#785501";
+        dark200: "#8A6502";
+        dark300: "#A07914";
+        dark400: "#AE8624";
+        dark500: "#BE9737";
+        dark600: "#C9A449";
+        dark700: "#D4B56A";
+        dark800: "#E5D0A0";
+        dark900: "#EADBBA";
+        dark950: "#F4EBD9";
+    }>;
+    lemon: Readonly<{
+        light10: "#F4EFBE";
+        light50: "#E6DF83";
+        light100: "#D8D268";
+        light200: "#CBC65F";
+        light300: "#BAB726";
+        light400: "#ADAB26";
+        light500: "#9D9B25";
+        light600: "#8E8C23";
+        light700: "#7D7A1F";
+        light800: "#5A571C";
+        light900: "#494619";
+        light950: "#282601";
+        dark10: "#2A2C01";
+        dark50: "#484C01";
+        dark100: "#5C6101";
+        dark200: "#6A7100";
+        dark300: "#7F8505";
+        dark400: "#8C921D";
+        dark500: "#9DA235";
+        dark600: "#ABAE48";
+        dark700: "#BBBD6A";
+        dark800: "#D6D5A1";
+        dark900: "#E0DFBA";
+        dark950: "#EEEED9";
+    }>;
+    lime: Readonly<{
+        light10: "#EAF2C4";
+        light50: "#D4E490";
+        light100: "#C4D878";
+        light200: "#B6CC65";
+        light300: "#A1BE40";
+        light400: "#93B230";
+        light500: "#85A12D";
+        light600: "#78922C";
+        light700: "#6A8029";
+        light800: "#4C5B21";
+        light900: "#3E4A1D";
+        light950: "#202901";
+        dark10: "#242D01";
+        dark50: "#3D4F00";
+        dark100: "#4E6401";
+        dark200: "#5B7400";
+        dark300: "#6E8913";
+        dark400: "#7C9624";
+        dark500: "#8DA63B";
+        dark600: "#9BB24D";
+        dark700: "#AEC06D";
+        dark800: "#CDD7A3";
+        dark900: "#D9E0BB";
+        dark950: "#EBEED8";
+    }>;
+    green: Readonly<{
+        light10: "#DCF5D0";
+        light50: "#BCE8AB";
+        light100: "#A5DD98";
+        light200: "#97D283";
+        light300: "#7DC470";
+        light400: "#6EB85A";
+        light500: "#50A946";
+        light600: "#3C9C2C";
+        light700: "#2C8926";
+        light800: "#026309";
+        light900: "#005005";
+        light950: "#0B2C01";
+        dark10: "#093107";
+        dark50: "#0D5512";
+        dark100: "#016B12";
+        dark200: "#1F7C22";
+        dark300: "#399136";
+        dark400: "#479E43";
+        dark500: "#5DAF55";
+        dark600: "#6EBA66";
+        dark700: "#89C880";
+        dark800: "#B6DCAF";
+        dark900: "#CAE4C4";
+        dark950: "#E1F1DE";
+    }>;
+    cyan: Readonly<{
+        light10: "#D4F5EC";
+        light50: "#9FEBD8";
+        light100: "#6FE3CA";
+        light200: "#58D8BE";
+        light300: "#51C5AE";
+        light400: "#4FB9A3";
+        light500: "#48A692";
+        light600: "#439786";
+        light700: "#3C8475";
+        light800: "#2A5F54";
+        light900: "#204D44";
+        light950: "#052B24";
+        dark10: "#013126";
+        dark50: "#005348";
+        dark100: "#026959";
+        dark200: "#067A69";
+        dark300: "#04917C";
+        dark400: "#029E88";
+        dark500: "#0AB098";
+        dark600: "#0ABEA3";
+        dark700: "#45CCB2";
+        dark800: "#96E0CE";
+        dark900: "#B6E7DB";
+        dark950: "#D5F3EB";
+    }>;
+    teal: Readonly<{
+        light10: "#D4F4F7";
+        light50: "#A1E9E9";
+        light100: "#74DFE3";
+        light200: "#48D6DB";
+        light300: "#44C4CC";
+        light400: "#41B7BF";
+        light500: "#3CA5AD";
+        light600: "#3A969E";
+        light700: "#34838A";
+        light800: "#2A5D62";
+        light900: "#254C50";
+        light950: "#022B2F";
+        dark10: "#012F37";
+        dark50: "#04525B";
+        dark100: "#046672";
+        dark200: "#007886";
+        dark300: "#028D9C";
+        dark400: "#059BAC";
+        dark500: "#01ACBF";
+        dark600: "#0ABACE";
+        dark700: "#31C9DD";
+        dark800: "#91DEEB";
+        dark900: "#B3E6EF";
+        dark950: "#D4F2F7";
+    }>;
+    sky: Readonly<{
+        light10: "#E2EFFF";
+        light50: "#C3DFFF";
+        light100: "#A9D3FF";
+        light200: "#90C8FF";
+        light300: "#71B7F7";
+        light400: "#4CAEF8";
+        light500: "#2B9DE9";
+        light600: "#198FD8";
+        light700: "#1D7DBC";
+        light800: "#06598B";
+        light900: "#004871";
+        light950: "#012740";
+        dark10: "#002D47";
+        dark50: "#014F77";
+        dark100: "#016193";
+        dark200: "#0172AC";
+        dark300: "#0287CA";
+        dark400: "#0394DD";
+        dark500: "#0EA4F8";
+        dark600: "#4DB1FF";
+        dark700: "#77BEFE";
+        dark800: "#B0D6FF";
+        dark900: "#C7E0FF";
+        dark950: "#E2EEFE";
+    }>;
+    blue: Readonly<{
+        light10: "#E6EEFF";
+        light50: "#CBDDFD";
+        light100: "#B6D0FD";
+        light200: "#A4C5FE";
+        light300: "#85B4FB";
+        light400: "#6EA9FC";
+        light500: "#4D98F9";
+        light600: "#3D8AEC";
+        light700: "#2978D4";
+        light800: "#14559C";
+        light900: "#11447D";
+        light950: "#072649";
+        dark10: "#142955";
+        dark50: "#1D4790";
+        dark100: "#1159B5";
+        dark200: "#3368C8";
+        dark300: "#417FE1";
+        dark400: "#4A8DEF";
+        dark500: "#5D9DFC";
+        dark600: "#76ABFF";
+        dark700: "#92BAFE";
+        dark800: "#BBD4FE";
+        dark900: "#CDDEFF";
+        dark950: "#E4EDFE";
+    }>;
+    indigo: Readonly<{
+        light10: "#EEECFF";
+        light50: "#DDD9FC";
+        light100: "#CFCAF7";
+        light200: "#C3BDF9";
+        light300: "#B1ABF1";
+        light400: "#A49FF1";
+        light500: "#918DEC";
+        light600: "#807EEC";
+        light700: "#6B6CD8";
+        light800: "#4649AF";
+        light900: "#353799";
+        light950: "#1F1F55";
+        dark10: "#212753";
+        dark50: "#40428D";
+        dark100: "#5350B0";
+        dark200: "#6362C5";
+        dark300: "#7477DC";
+        dark400: "#7E83EA";
+        dark500: "#8B95F9";
+        dark600: "#96A4FF";
+        dark700: "#A6B5FE";
+        dark800: "#C7D0FE";
+        dark900: "#D7DBFE";
+        dark950: "#EBEBFF";
+    }>;
+    purple: Readonly<{
+        light10: "#F5E9FE";
+        light50: "#E8D5F6";
+        light100: "#DEC5F1";
+        light200: "#D6B8EF";
+        light300: "#C9A4E9";
+        light400: "#C195E7";
+        light500: "#B381E1";
+        light600: "#A96FDE";
+        light700: "#955EC8";
+        light800: "#6D3BA0";
+        light900: "#59288A";
+        light950: "#2F0F50";
+        dark10: "#31224F";
+        dark50: "#5E3882";
+        dark100: "#7346A5";
+        dark200: "#8457B8";
+        dark300: "#946DD2";
+        dark400: "#9D7AE0";
+        dark500: "#AE8BEE";
+        dark600: "#B79AF5";
+        dark700: "#C0AEF8";
+        dark800: "#D7CCFA";
+        dark900: "#E1D8FC";
+        dark950: "#F3E9FE";
+    }>;
+    pink: Readonly<{
+        light10: "#F7E9FF";
+        light50: "#F8D1F2";
+        light100: "#F6BEEC";
+        light200: "#F3ACE7";
+        light300: "#F094DF";
+        light400: "#ED81D8";
+        light500: "#DB70C4";
+        light600: "#D25CB8";
+        light700: "#BD49A2";
+        light800: "#941A79";
+        light900: "#7C0164";
+        light950: "#420D35";
+        dark10: "#47173D";
+        dark50: "#7A2869";
+        dark100: "#992F84";
+        dark200: "#AC4296";
+        dark300: "#C358AB";
+        dark400: "#D164B8";
+        dark500: "#E078C7";
+        dark600: "#E889D1";
+        dark700: "#ECA1D8";
+        dark800: "#F4C5E7";
+        dark900: "#F7D3EC";
+        dark950: "#FDE6F6";
+    }>;
+    silver: Readonly<{
+        light10: "#ECEEF2";
+        light50: "#DADDE2";
+        light100: "#CCCFD6";
+        light200: "#C0C3CB";
+        light300: "#AFB3BD";
+        light400: "#A3A7B2";
+        light500: "#9298A4";
+        light600: "#828A97";
+        light700: "#727987";
+        light800: "#4F5666";
+        light900: "#404653";
+        light950: "#212631";
+        dark10: "#272A30";
+        dark50: "#454951";
+        dark100: "#565D67";
+        dark200: "#666C79";
+        dark300: "#7A808E";
+        dark400: "#868C99";
+        dark500: "#989DA8";
+        dark600: "#A5A9B2";
+        dark700: "#B5B7C0";
+        dark800: "#CFD2D7";
+        dark900: "#DCDDE3";
+        dark950: "#ECECEF";
+        dark25: "#33373F";
+    }>;
+    gray: Readonly<{
+        light10: "#EEEEEE";
+        light50: "#DCDCDC";
+        light100: "#CFCFCF";
+        light200: "#C3C3C3";
+        light300: "#B3B3B3";
+        light400: "#A7A7A7";
+        light500: "#989898";
+        light600: "#898989";
+        light700: "#797979";
+        light800: "#565656";
+        light900: "#454545";
+        light950: "#262626";
+        dark10: "#2A2A2A";
+        dark50: "#494949";
+        dark100: "#5C5C5C";
+        dark200: "#6C6C6C";
+        dark300: "#808080";
+        dark400: "#8C8C8C";
+        dark500: "#9D9D9D";
+        dark600: "#A9A9A9";
+        dark700: "#B8B8B8";
+        dark800: "#D2D2D2";
+        dark900: "#DDDDDD";
+        dark950: "#ECECEC";
+        light0: "#FFFFFF";
+        light1000: "#000000";
+        dark0: "#1A1A1A";
+        dark1000: "#F9F9FC";
+    }>;
+    alpha: Readonly<{
+        dark500: "#272A3080";
+        dark400: "#272A3066";
+        dark300: "#272A304D";
+        dark200: "#272A3033";
+        dark100: "#272A301A";
+        light100: "#FFFFFF1A";
+        light200: "#FFFFFF33";
+        light300: "#FFFFFF4D";
+        light400: "#FFFFFF66";
+        light500: "#FFFFFF80";
+        silver100: "#828A971A";
+        silver200: "#828A9733";
+        silver300: "#828A974D";
+        silver400: "#828A9766";
+        silver500: "#828A9780";
+        light0: "#FFFFFF00";
+        dark0: "#272A3000";
+        silver0: "#828A9700";
+        dark600: "#272A3099";
+        dark700: "#272A30B2";
+        dark800: "#272A30CC";
+        silver600: "#828A9799";
+        silver700: "#828A97B2";
+        silver800: "#828A97CC";
+        light600: "#FFFFFF99";
+        light700: "#FFFFFFB2";
+        light800: "#FFFFFFCC";
+    }>;
+};
+export default _default;

package/dist/themes/index.d.ts

@@ -1,5 +1,6 @@
 export * from './themes.d';
-export { default as cds } from './cds';
-export { default as b2b } from './b2b';
-export { default as dark } from './dark';
-export { default as promo } from './promo';
+export { default as cdsLight } from './cdsLight';
+export { default as cdsDark } from './cdsDark';
+export { default as b2bLight } from './b2bLight';
+export { default as b2bDark } from './b2bDark';
+export { default as colors } from './colors';

package/dist/themes/themes.d.ts

@@ -1,10 +1,10 @@
 import type { ThemeDefinition } from '../composable';
 
 export interface IThemes {
-  cds: ThemeDefinition;
-  b2b: ThemeDefinition;
-  promo: ThemeDefinition;
-  dark: ThemeDefinition;
+  cdsLight: ThemeDefinition;
+  cdsDark: ThemeDefinition;
+  b2bLight: ThemeDefinition;
+  b2bDark: ThemeDefinition;
 }
 
 export type TThemes = keyof IThemes;

package/dist/transitions/collapseTransition.d.ts

@@ -0,0 +1,11 @@
+export declare const CdsTransitionCollapse: (name?: string, appear?: boolean) => {
+    name: string;
+    appear: boolean;
+    css: boolean;
+    onBeforeEnter: (node: HTMLDivElement) => void;
+    onEnter: (node: HTMLDivElement) => void;
+    onAfterEnter: (node: HTMLDivElement) => void;
+    onBeforeLeave: (node: HTMLDivElement) => void;
+    onLeave: (node: HTMLDivElement) => void;
+    onAfterLeave: (node: HTMLDivElement) => void;
+};

package/dist/transitions/index.d.ts

@@ -13,6 +13,7 @@ export declare const CdsTransitionExpandX: import("vue").DefineComponent<{
     mode: import("vue").Prop<"default" | "in-out" | "out-in", "default" | "in-out" | "out-in">;
 }>>, {}>;
 export { CdsTransitionModal } from './modalTransition';
+export { CdsTransitionCollapse } from './collapseTransition';
 export declare const CdsTransitionFade: import("vue").DefineComponent<{
     group: import("vue").PropType<boolean>;
     hideOnLeave: import("vue").PropType<boolean>;

package/dist/utils/colorsUtils/utils.d.ts

@@ -39,3 +39,4 @@ export declare function HSLtoRGB(hsla: HSL): RGB;
  */
 export declare function getLuma(color: Color): number;
 export declare function getForeground(color: Color): "#fff" | "#000";
+export declare function rgbToColorString(color: RGB): string;

package/dist/utils/date/date.d.ts

@@ -18,6 +18,7 @@ export declare type TDateLocale = {
     months: string[];
     monthsLong: string[];
     monthsShort: string[];
+    today: string;
     firstDayOfWeek: number;
     format24h: boolean;
     pluralDay: (day?: number) => string;

package/dist/utils/dom/bindProps.d.ts

@@ -0,0 +1,2 @@
+export declare function bindProps(el: HTMLElement, props: Record<string, any>): void;
+export declare function unbindProps(el: HTMLElement, props: Record<string, any>): void;

package/dist/utils/dom/box.d.ts

@@ -24,3 +24,4 @@ export declare function getOverflow(a: Box, b: Box): {
         after: number;
     };
 };
+export declare function getTargetBox(target: HTMLElement | [x: number, y: number]): Box;

package/dist/utils/helpers.d.ts

@@ -1,5 +1,6 @@
-import type { ComponentPublicInstance, ComponentInternalInstance, ComputedGetter, InjectionKey, PropType, Ref, ToRefs, VNodeProps, VNodeChild, AllowedComponentProps, Component } from 'vue';
+import { type VNode } from 'vue';
 import type { TItemKey } from '../composable';
+import type { ComponentPublicInstance, ComponentInternalInstance, ComputedGetter, InjectionKey, PropType, Ref, ToRefs, VNodeProps, VNodeChild, AllowedComponentProps, Component } from 'vue';
 export declare const preventedScrollClass = "cds-scroll-blocked";
 export declare const keyNames: Readonly<{
     enter: "Enter";
@@ -99,6 +100,22 @@ export declare function getNestedValue(obj: any, path: (string | number)[], fall
  * @param fallback
  */
 export declare function getObjectValueByPath(obj: any, path: string, fallback?: any): any;
+/**
+ * This function is used to get the value of a property from an item. The property can be a string, an array, a function, or a boolean.
+ * If the property is a string, it will be used as a path to retrieve the value from the item.
+ * If the property is an array, it will be used as a nested path to retrieve the value from the item.
+ * If the property is a function, it will be called with the item and the fallback value as arguments, and its return value will be used.
+ * If the property is a boolean, and it's true, the item itself will be returned.
+ * If the property is null, undefined, or a boolean that's not true, the fallback value will be returned.
+ * If the item is not an object, and the property is not a function, the fallback value will be returned.
+ * If the property is not a string, an array, or a function, the fallback value will be returned.
+ * If the value retrieved from the item is undefined, the fallback value will be returned.
+ *
+ * @param item - The item from which to get the property value.
+ * @param property - The property to get from the item. Can be a string, an array, a function, or a boolean.
+ * @param fallback - The value to return if the property is not found or its value is undefined.
+ * @returns The value of the property from the item, or the fallback value.
+ */
 export declare function getPropertyFromItem(item: any, property: SelectItemKey, fallback?: any): any;
 /**
  * This function is used to return the scroll position of the given element.
@@ -123,6 +140,7 @@ export declare function destructComputed<T extends object>(getter: ComputedGette
  * @param val
  */
 export declare function includes(arr: readonly any[], val: any): boolean;
+export declare function eventName(propName: string): string;
 export declare function convertToUnit(str: number, unit?: string): string;
 export declare function convertToUnit(str: string | number | null | undefined, unit?: string): string | undefined;
 export declare function convertRemToPx(value: string): number;
@@ -134,10 +152,6 @@ export declare function convertRemToPx(value: string): number;
  */
 export declare function clamp(value: number, min?: number, max?: number): number;
 export declare function createRange(length: number, start?: number): number[];
-/**
- * Is value an like event
- * @param key
- */
 export declare const isOn: (key: string) => boolean;
 export declare const EventProp: PropType<(...args: any[]) => any>;
 export declare function isComponentInstance(obj: any): obj is ComponentPublicInstance;
@@ -145,7 +159,7 @@ export declare function isFixedPosition(el?: HTMLElement): boolean;
 export declare function padEnd(str: string, length: number, char?: string): string;
 export declare function padStart(string: number | string, targetLength: number, padString: string): string;
 export declare function pad(n: string | number, length?: number): string;
-export declare function refElement<T extends Record<string, any> | undefined>(obj: T): Exclude<T, ComponentPublicInstance> | HTMLElement;
+export declare function refElement(obj: ComponentPublicInstance<any> | HTMLElement): HTMLElement | undefined;
 export declare function omit<T extends object, K extends keyof T>(obj: T, fields: K[]): Omit<T, K>;
 export declare function findChildrenWithProvide(key: InjectionKey<any> | symbol, vnode?: VNodeChild | {
     [key: string]: any;
@@ -176,11 +190,15 @@ export declare function plurals(n: number, opts: string[]): string;
  * @param size
  */
 export declare function chunk(str: string, size?: number): string[];
+export declare function defer(timeout: number, cb: () => void): () => void;
+export declare function isValidElement(element: any): any;
 export declare function noop(): void;
 /**
  * Types
  */
 export declare type MaybeRef<T> = T | Ref<T>;
+declare type VNodeChildAtom = VNode | string | number | boolean | null | undefined | void;
+export declare type VueNode = VNodeChildAtom | VNodeChildAtom[] | JSX.Element;
 export declare type SelectItemKey = TItemKey;
 export declare type MaybePick<T extends object, U extends Extract<keyof T, string>> = Record<string, unknown> extends T ? Partial<Pick<T, U>> : Pick<T, U>;
 export declare type EventProp<T = (...args: any[]) => any> = T;

package/dist/utils/index.d.ts

@@ -6,6 +6,8 @@ export * from './use/eagerComputed';
 export * from './use/pickAttrs';
 export * from './use/cache';
 export * from './use/copyToClipboard';
+export * from './use/flattenChildren';
+export * from './use/listener';
 export * from './changeCase/noCase';
 export * from './changeCase/lowerCase';
 export * from './changeCase/pascalCase';
@@ -22,5 +24,5 @@ export * from './dom/wrapperRaf';
 export * from './dom/warn';
 export * from './dom/classNames';
 export * from './dom/hRender';
+export * from './dom/bindProps';
 export * from './colorsUtils';
-export { default as colors } from './colors';

package/dist/utils/propsFactory.d.ts

@@ -1,5 +1,5 @@
-import type { PropType } from 'vue';
 import type { Prop, ComponentObjectPropsOptions } from '../shims-vue';
+import type { PropType } from 'vue';
 /**
  * Creates a factory function for props definitions.
  * This is used to define props in a composable then override

package/dist/utils/use/flattenChildren.d.ts

@@ -0,0 +1,3 @@
+export declare function flattenChildren(children?: any[], filterEmpty?: boolean): any[];
+export declare function filterEmpty(children?: any[]): any[];
+export declare function isEmptyElement(c: Record<string, any>): boolean | undefined;

package/nuxt.js

@@ -1,6 +1,7 @@
-import { defineNuxtModule } from '@nuxt/kit';
 import { fileURLToPath } from 'node:url';
 
+import { defineNuxtModule } from '@nuxt/kit';
+
 export default defineNuxtModule({
   hooks: {
     'components:dirs'(dirs) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@central-design-system/components",
-  "version": "3.0.0-beta.9",
+  "version": "3.0.0-rc.1",
   "description": "Central Design System on the Vue 3.0 and TypeScript",
   "author": "magersoft",
   "license": "ISC",
@@ -26,6 +26,7 @@
   "files": [
     "dist",
     "src/scss",
+    "src/themes",
     "nuxt.js"
   ],
   "types": "./dist/cds.d.ts",
@@ -52,5 +53,8 @@
     "vue": "3.2.47",
     "vue-router": "4.1.6",
     "vue-tsc": "1.0.9"
+  },
+  "dependencies": {
+    "resize-observer-polyfill": "1.5.1"
   }
 }

package/src/scss/index.scss

@@ -1,10 +1,8 @@
-@import 'modules/variables';
 @import 'modules/reset';
 @import 'modules/transition';
 @import 'modules/typography';
 @import 'modules/grid';
 @import 'utility';
 
-@include variables;
 @include reset;
 @include typography;