@sk-web-gui/core 0.1.45 → 0.1.47

package/dist/types/toasted-notes/src/Message.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import POSITIONS from './Positions';
+interface MessageCallback {
+    id: string;
+    onClose: () => void;
+}
+export declare type MessageType = 'default' | 'success' | 'error';
+export declare type PositionsType = keyof typeof POSITIONS;
+export declare type MessageProp = React.ReactNode | ((callback: MessageCallback) => React.ReactNode) | string;
+export interface MessageOptions {
+    id: string;
+    duration: number | null;
+    type: MessageType;
+    onRequestRemove: () => void;
+    onRequestClose: () => void;
+    showing: boolean;
+    position: PositionsType;
+}
+interface Props extends MessageOptions {
+    message: MessageProp;
+    zIndex?: number;
+    requestClose?: boolean;
+    position: PositionsType;
+}
+export declare const Message: ({ id, message, position, onRequestRemove, requestClose, duration }: Props) => JSX.Element;
+export {};

package/dist/types/toasted-notes/src/Positions.d.ts

@@ -0,0 +1,9 @@
+declare const POSITIONS: {
+    top: string;
+    'top-left': string;
+    'top-right': string;
+    bottom: string;
+    'bottom-left': string;
+    'bottom-right': string;
+};
+export default POSITIONS;

package/dist/types/toasted-notes/src/Toast.d.ts

@@ -0,0 +1,13 @@
+import { MessageOptionalOptions } from './ToastManager';
+import { MessageProp, PositionsType } from './Message';
+declare class Toaster {
+    createNotification?: Function;
+    removeAll?: Function;
+    closeToast?: Function;
+    constructor();
+    closeAll: () => void;
+    bindNotify: (fn: Function, removeAll: Function, closeToast: Function) => void;
+    notify: (message: MessageProp, options?: MessageOptionalOptions) => any;
+    close: (id: number, position: PositionsType) => void;
+}
+export default Toaster;

package/dist/types/toasted-notes/src/ToastManager.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { PositionsType, MessageType, MessageOptions, MessageProp } from './Message';
+interface Props {
+    notify: (fn: Function, closeAll: Function, close: Function) => void;
+}
+export interface MessageOptionalOptions {
+    type?: MessageType;
+    duration?: number | null;
+    position?: PositionsType;
+}
+interface ToastArgs extends MessageOptions {
+    message: MessageProp;
+}
+declare type State = {
+    top: Array<ToastArgs>;
+    'top-left': Array<ToastArgs>;
+    'top-right': Array<ToastArgs>;
+    'bottom-left': Array<ToastArgs>;
+    bottom: Array<ToastArgs>;
+    'bottom-right': Array<ToastArgs>;
+};
+export default class ToastManager extends React.Component<Props, State> {
+    static idCounter: number;
+    state: State;
+    constructor(props: Props);
+    notify: (message: MessageProp, options: MessageOptionalOptions) => {
+        id: number;
+        position: "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    };
+    closeAll: () => void;
+    createToastState: (message: MessageProp, options: MessageOptionalOptions) => {
+        id: number;
+        message: MessageProp;
+        position: "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+        showing: boolean;
+        duration: number | null;
+        onRequestRemove: () => void;
+        type: MessageType | undefined;
+    };
+    closeToast: (id: string, position: PositionsType) => void;
+    removeToast: (id: string, position: PositionsType) => void;
+    getStyle: (position: PositionsType) => React.CSSProperties;
+    render(): JSX.Element[];
+}
+export {};

package/dist/types/toasted-notes/src/index.d.ts

@@ -0,0 +1,4 @@
+import Toaster from './Toast';
+declare const toaster: Toaster;
+export { default as Position } from './Positions';
+export { toaster };

package/dist/types/toasted-notes/src/useTimeout.d.ts

@@ -0,0 +1,3 @@
+declare type Callback = () => void;
+export declare function useTimeout(callback: Callback, delay: number | null): void;
+export {};

package/dist/types/user-menu/index.d.ts

@@ -0,0 +1 @@
+export * from './src';

package/dist/types/user-menu/src/index.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { UserMenuProps } from './user-menu';
+declare type UserMenu = React.ForwardRefExoticComponent<UserMenuProps & React.RefAttributes<HTMLDivElement>>;
+declare const UserMenu: UserMenu;
+export type { UserMenuProps };
+export { UserMenu };

package/dist/types/user-menu/src/styles.d.ts

@@ -0,0 +1 @@
+export declare const useUserMenuClass: (args?: any) => string;

package/dist/types/user-menu/src/user-menu.d.ts

@@ -0,0 +1,21 @@
+import { DefaultProps } from '@sk-web-gui/theme';
+import * as React from 'react';
+export interface MenuItemGroup {
+    label: string;
+    showLabel: boolean;
+    showOnDesktop: boolean;
+    showOnMobile: boolean;
+    elements: {
+        label: string;
+        element: (active: boolean) => JSX.Element;
+    }[];
+}
+interface IUserMenuProps extends DefaultProps {
+    menuTitle: string;
+    menuSubTitle: string;
+}
+export interface UserMenuProps extends React.HTMLAttributes<HTMLDivElement>, IUserMenuProps {
+    menuGroups: MenuItemGroup[];
+}
+export declare const UserMenu: React.ForwardRefExoticComponent<UserMenuProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/user-menu/stories/announcement.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const Announcement: ({ color, size, ...rest }: {
+    [x: string]: any;
+    color?: string | undefined;
+    size?: number | undefined;
+}) => JSX.Element;

package/dist/types/user-menu/stories/user-menu.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Basic: () => JSX.Element;

package/dist/types/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './src';

package/dist/types/utils/src/assertion.d.ts

@@ -0,0 +1,4 @@
+import { Dict } from './types';
+export declare function isArray<T>(value: any): value is Array<T>;
+export declare function isObject(value: any): value is Dict;
+export declare const __DEV__: boolean;

package/dist/types/utils/src/children.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+/**
+ * Gets only the valid children of a component,
+ * and ignores any nullish or falsy child.
+ *
+ * @param children the children
+ */
+export declare function getValidChildren(children: React.ReactNode): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

package/dist/types/utils/src/color.d.ts

@@ -0,0 +1,9 @@
+import type { Color } from 'color-string';
+export declare function hsl2rgb(h: number, s: number, l: number): [number, number, number];
+export declare function hwb2rgb(h: number, w: number, b: number): [number, number, number];
+export declare function toRGBA(color: string): Color | undefined;
+export declare function toRGB(color: string): number[] | undefined;
+export declare function toColor(colorStr: string): {
+    color: string;
+    opacity: string;
+};

package/dist/types/utils/src/index.d.ts

@@ -0,0 +1,10 @@
+import cx from 'clsx';
+export * from './types';
+export * from './color';
+export * from './assertion';
+export * from './walk-object';
+export * from './object';
+export * from './children';
+export * from './refs';
+export * from './slug';
+export { cx };

package/dist/types/utils/src/object.d.ts

@@ -0,0 +1,6 @@
+import type { Dict } from './types';
+export declare function omit<T extends Dict, K extends keyof T>(object: T, keys: K[]): Omit<T, K>;
+export declare function pick<T extends Dict, K extends keyof T>(object: T, keys: K[]): { [P in K]: T[P]; };
+export declare function deepmerge<T1, T2>(target: Partial<T1>, source: Partial<T2>, options?: {
+    clone: boolean;
+}): Partial<T1>;

package/dist/types/utils/src/refs.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+declare type ReactRef<T> = React.Ref<T> | React.RefObject<T> | React.MutableRefObject<T>;
+export declare function setRef<T = any>(ref: ReactRef<T> | undefined, value: T): void;
+export declare function useForkRef<T = any>(refA: ReactRef<T> | undefined, refB: ReactRef<T> | undefined): ((refValue: T) => void) | null;
+export {};

package/dist/types/utils/src/slug.d.ts

@@ -0,0 +1 @@
+export declare const toSlug: (str: string) => string;

package/dist/types/utils/src/types.d.ts

@@ -0,0 +1,13 @@
+export declare type Dict<T = any> = Record<string, T>;
+export declare type CSSMap = Dict<{
+    value: string;
+    var: string;
+    varRef: string;
+}>;
+export declare type WithCSSVar<T> = T & {
+    __cssVars: Dict;
+    __cssMap: CSSMap;
+};
+export declare type DeepPartial<T> = {
+    [P in keyof T]?: DeepPartial<T[P]>;
+};

package/dist/types/utils/src/walk-object.d.ts

@@ -0,0 +1,5 @@
+export declare type WalkObjectPredicate<Leaf = unknown> = (value: unknown, path: string[]) => Leaf;
+export declare type MappedLeavesObject<Obj, LeafType> = {
+    [Prop in keyof Obj]: Obj[Prop] extends Array<any> ? MappedLeavesObject<Obj[Prop][number], LeafType>[] : Obj[Prop] extends object ? MappedLeavesObject<Obj[Prop], LeafType> : LeafType;
+};
+export declare function walkObject<Target, LeafType>(target: Target, predicate: WalkObjectPredicate<LeafType>): MappedLeavesObject<Target, ReturnType<WalkObjectPredicate<LeafType>>>;

package/dist/types/visually-hidden/index.d.ts

@@ -0,0 +1 @@
+export * from './src';

package/dist/types/visually-hidden/src/index.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Welcome to @reach/visually-hidden!
+ *
+ * Provides text for screen readers that is visually hidden.
+ * It is the logical opposite of the `aria-hidden` attribute.
+ *
+ * @see https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ * @see https://a11yproject.com/posts/how-to-hide-content/
+ * @see Docs     https://reach.tech/visually-hidden
+ * @see Source   https://github.com/reach/reach-ui/tree/main/packages/visually-hidden
+ */
+import * as React from 'react';
+/**
+ * VisuallyHidden
+ *
+ * Provides text for screen readers that is visually hidden.
+ * It is the logical opposite of the `aria-hidden` attribute.
+ */
+declare const VisuallyHidden: React.ForwardRefExoticComponent<VisuallyHiddenProps & React.RefAttributes<HTMLElement>>;
+/**
+ * @see Docs https://reach.tech/visually-hidden#visuallyhidden-props
+ */
+interface VisuallyHiddenProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * @see Docs https://reach.tech/visually-hidden#visuallyhidden-children
+     */
+    children?: React.ReactNode;
+    as?: React.ElementType;
+}
+export type { VisuallyHiddenProps };
+export { VisuallyHidden };
+export default VisuallyHidden;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "0.1.45",
+  "version": "0.1.47",
   "license": "MIT",
   "main": "src/index.js",
   "files": [
@@ -31,5 +31,5 @@
     "postcss-import": "^14.0.2",
     "tailwindcss": "^2.2.4"
   },
-  "gitHead": "bf6d0f29d59737f2c9dae5a9a16e4242e6fdd761"
+  "gitHead": "a14791d11b9d1fa052b5135525d06707fc3d9e7d"
 }

package/src/colors.js

@@ -1,145 +1,145 @@
-const withOpacity = require('./with-opacity');
-
-module.exports = {
-  primary: {
-    DEFAULT: withOpacity('--vc-colors-primary-DEFAULT'),
-    dark: withOpacity('--vc-colors-primary-dark'),
-    light: withOpacity('--vc-colors-primary-light'),
-    active: withOpacity('--vc-colors-primary-active'),
-    50: withOpacity('--vc-colors-primary-DEFAULT'),
-    100: withOpacity('--vc-colors-primary-DEFAULT'),
-    200: withOpacity('--vc-colors-primary-DEFAULT'),
-    300: withOpacity('--vc-colors-primary-DEFAULT'),
-    400: withOpacity('--vc-colors-primary-DEFAULT'),
-    500: withOpacity('--vc-colors-primary-DEFAULT'),
-    600: withOpacity('--vc-colors-primary-DEFAULT'),
-    700: withOpacity('--vc-colors-primary-DEFAULT'),
-    800: withOpacity('--vc-colors-primary-DEFAULT'),
-    900: withOpacity('--vc-colors-primary-DEFAULT'),
-  },
-
-  secondary: {
-    DEFAULT: withOpacity('--vc-colors-secondary-DEFAULT'),
-    dark: withOpacity('--vc-colors-secondary-dark'),
-    light: withOpacity('--vc-colors-secondary-light'),
-    active: withOpacity('--vc-colors-secondary-active'),
-    50: withOpacity('--vc-colors-secondary-DEFAULT'),
-    100: withOpacity('--vc-colors-secondary-DEFAULT'),
-    200: withOpacity('--vc-colors-secondary-DEFAULT'),
-    300: withOpacity('--vc-colors-secondary-DEFAULT'),
-    400: withOpacity('--vc-colors-secondary-DEFAULT'),
-    500: withOpacity('--vc-colors-secondary-DEFAULT'),
-    600: withOpacity('--vc-colors-secondary-DEFAULT'),
-    700: withOpacity('--vc-colors-secondary-DEFAULT'),
-    800: withOpacity('--vc-colors-secondary-DEFAULT'),
-    900: withOpacity('--vc-colors-secondary-DEFAULT'),
-  },
-
-  success: {
-    DEFAULT: withOpacity('--vc-colors-success-DEFAULT'),
-    dark: withOpacity('--vc-colors-success-dark'),
-    light: withOpacity('--vc-colors-success-light'),
-    active: withOpacity('--vc-colors-success-active'),
-    50: withOpacity('--vc-colors-success-DEFAULT'),
-    100: withOpacity('--vc-colors-success-DEFAULT'),
-    200: withOpacity('--vc-colors-success-DEFAULT'),
-    300: withOpacity('--vc-colors-success-DEFAULT'),
-    400: withOpacity('--vc-colors-success-DEFAULT'),
-    500: withOpacity('--vc-colors-success-DEFAULT'),
-    600: withOpacity('--vc-colors-success-DEFAULT'),
-    700: withOpacity('--vc-colors-success-DEFAULT'),
-    800: withOpacity('--vc-colors-success-DEFAULT'),
-    900: withOpacity('--vc-colors-success-DEFAULT'),
-  },
-
-  info: {
-    DEFAULT: withOpacity('--vc-colors-info-DEFAULT'),
-    dark: withOpacity('--vc-colors-info-dark'),
-    light: withOpacity('--vc-colors-info-light'),
-    active: withOpacity('--vc-colors-info-active'),
-    50: withOpacity('--vc-colors-info-DEFAULT'),
-    100: withOpacity('--vc-colors-info-DEFAULT'),
-    200: withOpacity('--vc-colors-info-DEFAULT'),
-    300: withOpacity('--vc-colors-info-DEFAULT'),
-    400: withOpacity('--vc-colors-info-DEFAULT'),
-    500: withOpacity('--vc-colors-info-DEFAULT'),
-    600: withOpacity('--vc-colors-info-DEFAULT'),
-    700: withOpacity('--vc-colors-info-DEFAULT'),
-    800: withOpacity('--vc-colors-info-DEFAULT'),
-    900: withOpacity('--vc-colors-info-DEFAULT'),
-  },
-
-  warning: {
-    DEFAULT: withOpacity('--vc-colors-warning-DEFAULT'),
-    dark: withOpacity('--vc-colors-warning-dark'),
-    light: withOpacity('--vc-colors-warning-light'),
-    active: withOpacity('--vc-colors-warning-active'),
-    50: withOpacity('--vc-colors-warning-DEFAULT'),
-    100: withOpacity('--vc-colors-warning-DEFAULT'),
-    200: withOpacity('--vc-colors-warning-DEFAULT'),
-    300: withOpacity('--vc-colors-warning-DEFAULT'),
-    400: withOpacity('--vc-colors-warning-DEFAULT'),
-    500: withOpacity('--vc-colors-warning-DEFAULT'),
-    600: withOpacity('--vc-colors-warning-DEFAULT'),
-    700: withOpacity('--vc-colors-warning-DEFAULT'),
-    800: withOpacity('--vc-colors-warning-DEFAULT'),
-    900: withOpacity('--vc-colors-warning-DEFAULT'),
-  },
-
-  error: {
-    DEFAULT: withOpacity('--vc-colors-error-DEFAULT'),
-    dark: withOpacity('--vc-colors-error-dark'),
-    light: withOpacity('--vc-colors-error-light'),
-    active: withOpacity('--vc-colors-error-active'),
-    50: withOpacity('--vc-colors-error-DEFAULT'),
-    100: withOpacity('--vc-colors-error-DEFAULT'),
-    200: withOpacity('--vc-colors-error-DEFAULT'),
-    300: withOpacity('--vc-colors-error-DEFAULT'),
-    400: withOpacity('--vc-colors-error-DEFAULT'),
-    500: withOpacity('--vc-colors-error-DEFAULT'),
-    600: withOpacity('--vc-colors-error-DEFAULT'),
-    700: withOpacity('--vc-colors-error-DEFAULT'),
-    800: withOpacity('--vc-colors-error-DEFAULT'),
-    900: withOpacity('--vc-colors-error-DEFAULT'),
-  },
-
-  neutral: {
-    DEFAULT: withOpacity('--vc-colors-neutral'),
-    50: withOpacity('--vc-colors-neutral-50'),
-    100: withOpacity('--vc-colors-neutral-100'),
-    200: withOpacity('--vc-colors-neutral-200'),
-    300: withOpacity('--vc-colors-neutral-300'),
-    400: withOpacity('--vc-colors-neutral-400'),
-    500: withOpacity('--vc-colors-neutral-500'),
-    600: withOpacity('--vc-colors-neutral-600'),
-    700: withOpacity('--vc-colors-neutral-700'),
-    800: withOpacity('--vc-colors-neutral-800'),
-    900: withOpacity('--vc-colors-neutral-900'),
-  },
-
-  whiteAlpha: {
-    50: 'rgba(255, 255, 255, 0.04)',
-    100: 'rgba(255, 255, 255, 0.06)',
-    200: 'rgba(255, 255, 255, 0.08)',
-    300: 'rgba(255, 255, 255, 0.16)',
-    400: 'rgba(255, 255, 255, 0.24)',
-    500: 'rgba(255, 255, 255, 0.36)',
-    600: 'rgba(255, 255, 255, 0.48)',
-    700: 'rgba(255, 255, 255, 0.64)',
-    800: 'rgba(255, 255, 255, 0.80)',
-    900: 'rgba(255, 255, 255, 0.92)',
-  },
-
-  blackAlpha: {
-    50: 'rgba(0, 0, 0, 0.04)',
-    100: 'rgba(0, 0, 0, 0.06)',
-    200: 'rgba(0, 0, 0, 0.08)',
-    300: 'rgba(0, 0, 0, 0.16)',
-    400: 'rgba(0, 0, 0, 0.24)',
-    500: 'rgba(0, 0, 0, 0.36)',
-    600: 'rgba(0, 0, 0, 0.48)',
-    700: 'rgba(0, 0, 0, 0.64)',
-    800: 'rgba(0, 0, 0, 0.80)',
-    900: 'rgba(0, 0, 0, 0.92)',
-  },
-};
+const withOpacity = require('./with-opacity');
+
+module.exports = {
+  primary: {
+    DEFAULT: withOpacity('--vc-colors-primary-DEFAULT'),
+    dark: withOpacity('--vc-colors-primary-dark'),
+    light: withOpacity('--vc-colors-primary-light'),
+    active: withOpacity('--vc-colors-primary-active'),
+    50: withOpacity('--vc-colors-primary-DEFAULT'),
+    100: withOpacity('--vc-colors-primary-DEFAULT'),
+    200: withOpacity('--vc-colors-primary-DEFAULT'),
+    300: withOpacity('--vc-colors-primary-DEFAULT'),
+    400: withOpacity('--vc-colors-primary-DEFAULT'),
+    500: withOpacity('--vc-colors-primary-DEFAULT'),
+    600: withOpacity('--vc-colors-primary-DEFAULT'),
+    700: withOpacity('--vc-colors-primary-DEFAULT'),
+    800: withOpacity('--vc-colors-primary-DEFAULT'),
+    900: withOpacity('--vc-colors-primary-DEFAULT'),
+  },
+
+  secondary: {
+    DEFAULT: withOpacity('--vc-colors-secondary-DEFAULT'),
+    dark: withOpacity('--vc-colors-secondary-dark'),
+    light: withOpacity('--vc-colors-secondary-light'),
+    active: withOpacity('--vc-colors-secondary-active'),
+    50: withOpacity('--vc-colors-secondary-DEFAULT'),
+    100: withOpacity('--vc-colors-secondary-DEFAULT'),
+    200: withOpacity('--vc-colors-secondary-DEFAULT'),
+    300: withOpacity('--vc-colors-secondary-DEFAULT'),
+    400: withOpacity('--vc-colors-secondary-DEFAULT'),
+    500: withOpacity('--vc-colors-secondary-DEFAULT'),
+    600: withOpacity('--vc-colors-secondary-DEFAULT'),
+    700: withOpacity('--vc-colors-secondary-DEFAULT'),
+    800: withOpacity('--vc-colors-secondary-DEFAULT'),
+    900: withOpacity('--vc-colors-secondary-DEFAULT'),
+  },
+
+  success: {
+    DEFAULT: withOpacity('--vc-colors-success-DEFAULT'),
+    dark: withOpacity('--vc-colors-success-dark'),
+    light: withOpacity('--vc-colors-success-light'),
+    active: withOpacity('--vc-colors-success-active'),
+    50: withOpacity('--vc-colors-success-DEFAULT'),
+    100: withOpacity('--vc-colors-success-DEFAULT'),
+    200: withOpacity('--vc-colors-success-DEFAULT'),
+    300: withOpacity('--vc-colors-success-DEFAULT'),
+    400: withOpacity('--vc-colors-success-DEFAULT'),
+    500: withOpacity('--vc-colors-success-DEFAULT'),
+    600: withOpacity('--vc-colors-success-DEFAULT'),
+    700: withOpacity('--vc-colors-success-DEFAULT'),
+    800: withOpacity('--vc-colors-success-DEFAULT'),
+    900: withOpacity('--vc-colors-success-DEFAULT'),
+  },
+
+  info: {
+    DEFAULT: withOpacity('--vc-colors-info-DEFAULT'),
+    dark: withOpacity('--vc-colors-info-dark'),
+    light: withOpacity('--vc-colors-info-light'),
+    active: withOpacity('--vc-colors-info-active'),
+    50: withOpacity('--vc-colors-info-DEFAULT'),
+    100: withOpacity('--vc-colors-info-DEFAULT'),
+    200: withOpacity('--vc-colors-info-DEFAULT'),
+    300: withOpacity('--vc-colors-info-DEFAULT'),
+    400: withOpacity('--vc-colors-info-DEFAULT'),
+    500: withOpacity('--vc-colors-info-DEFAULT'),
+    600: withOpacity('--vc-colors-info-DEFAULT'),
+    700: withOpacity('--vc-colors-info-DEFAULT'),
+    800: withOpacity('--vc-colors-info-DEFAULT'),
+    900: withOpacity('--vc-colors-info-DEFAULT'),
+  },
+
+  warning: {
+    DEFAULT: withOpacity('--vc-colors-warning-DEFAULT'),
+    dark: withOpacity('--vc-colors-warning-dark'),
+    light: withOpacity('--vc-colors-warning-light'),
+    active: withOpacity('--vc-colors-warning-active'),
+    50: withOpacity('--vc-colors-warning-DEFAULT'),
+    100: withOpacity('--vc-colors-warning-DEFAULT'),
+    200: withOpacity('--vc-colors-warning-DEFAULT'),
+    300: withOpacity('--vc-colors-warning-DEFAULT'),
+    400: withOpacity('--vc-colors-warning-DEFAULT'),
+    500: withOpacity('--vc-colors-warning-DEFAULT'),
+    600: withOpacity('--vc-colors-warning-DEFAULT'),
+    700: withOpacity('--vc-colors-warning-DEFAULT'),
+    800: withOpacity('--vc-colors-warning-DEFAULT'),
+    900: withOpacity('--vc-colors-warning-DEFAULT'),
+  },
+
+  error: {
+    DEFAULT: withOpacity('--vc-colors-error-DEFAULT'),
+    dark: withOpacity('--vc-colors-error-dark'),
+    light: withOpacity('--vc-colors-error-light'),
+    active: withOpacity('--vc-colors-error-active'),
+    50: withOpacity('--vc-colors-error-DEFAULT'),
+    100: withOpacity('--vc-colors-error-DEFAULT'),
+    200: withOpacity('--vc-colors-error-DEFAULT'),
+    300: withOpacity('--vc-colors-error-DEFAULT'),
+    400: withOpacity('--vc-colors-error-DEFAULT'),
+    500: withOpacity('--vc-colors-error-DEFAULT'),
+    600: withOpacity('--vc-colors-error-DEFAULT'),
+    700: withOpacity('--vc-colors-error-DEFAULT'),
+    800: withOpacity('--vc-colors-error-DEFAULT'),
+    900: withOpacity('--vc-colors-error-DEFAULT'),
+  },
+
+  neutral: {
+    DEFAULT: withOpacity('--vc-colors-neutral'),
+    50: withOpacity('--vc-colors-neutral-50'),
+    100: withOpacity('--vc-colors-neutral-100'),
+    200: withOpacity('--vc-colors-neutral-200'),
+    300: withOpacity('--vc-colors-neutral-300'),
+    400: withOpacity('--vc-colors-neutral-400'),
+    500: withOpacity('--vc-colors-neutral-500'),
+    600: withOpacity('--vc-colors-neutral-600'),
+    700: withOpacity('--vc-colors-neutral-700'),
+    800: withOpacity('--vc-colors-neutral-800'),
+    900: withOpacity('--vc-colors-neutral-900'),
+  },
+
+  whiteAlpha: {
+    50: 'rgba(255, 255, 255, 0.04)',
+    100: 'rgba(255, 255, 255, 0.06)',
+    200: 'rgba(255, 255, 255, 0.08)',
+    300: 'rgba(255, 255, 255, 0.16)',
+    400: 'rgba(255, 255, 255, 0.24)',
+    500: 'rgba(255, 255, 255, 0.36)',
+    600: 'rgba(255, 255, 255, 0.48)',
+    700: 'rgba(255, 255, 255, 0.64)',
+    800: 'rgba(255, 255, 255, 0.80)',
+    900: 'rgba(255, 255, 255, 0.92)',
+  },
+
+  blackAlpha: {
+    50: 'rgba(0, 0, 0, 0.04)',
+    100: 'rgba(0, 0, 0, 0.06)',
+    200: 'rgba(0, 0, 0, 0.08)',
+    300: 'rgba(0, 0, 0, 0.16)',
+    400: 'rgba(0, 0, 0, 0.24)',
+    500: 'rgba(0, 0, 0, 0.36)',
+    600: 'rgba(0, 0, 0, 0.48)',
+    700: 'rgba(0, 0, 0, 0.64)',
+    800: 'rgba(0, 0, 0, 0.80)',
+    900: 'rgba(0, 0, 0, 0.92)',
+  },
+};