@veracity/vui 0.3.1 → 0.3.2

package/theme/components.js

@@ -10,24 +10,25 @@ var theme_4 = __importDefault(require("../card/theme"));
 var theme_5 = __importDefault(require("../checkbox/theme"));
 var theme_6 = __importDefault(require("../divider/theme"));
 var theme_7 = __importDefault(require("../footer/theme"));
-var theme_8 = __importDefault(require("../heading/theme"));
-var theme_9 = __importDefault(require("../icon/theme"));
-var theme_10 = __importDefault(require("../image/theme"));
-var theme_11 = __importDefault(require("../input/theme"));
-var theme_12 = __importDefault(require("../link/theme"));
-var theme_13 = __importDefault(require("../list/theme"));
-var theme_14 = __importDefault(require("../menu/theme"));
-var theme_15 = __importDefault(require("../notification/theme"));
-var theme_16 = __importDefault(require("../p/theme"));
-var theme_17 = __importDefault(require("../panel/theme"));
-var theme_18 = __importDefault(require("../popover/theme"));
-var theme_19 = __importDefault(require("../radio/theme"));
-var theme_20 = __importDefault(require("../skeleton/theme"));
-var theme_21 = __importDefault(require("../spinner/theme"));
-var theme_22 = __importDefault(require("../switch/theme"));
-var theme_23 = __importDefault(require("../t/theme"));
-var theme_24 = __importDefault(require("../tag/theme"));
-var theme_25 = __importDefault(require("../textarea/theme"));
+var theme_8 = __importDefault(require("../header/theme"));
+var theme_9 = __importDefault(require("../heading/theme"));
+var theme_10 = __importDefault(require("../icon/theme"));
+var theme_11 = __importDefault(require("../image/theme"));
+var theme_12 = __importDefault(require("../input/theme"));
+var theme_13 = __importDefault(require("../link/theme"));
+var theme_14 = __importDefault(require("../list/theme"));
+var theme_15 = __importDefault(require("../menu/theme"));
+var theme_16 = __importDefault(require("../notification/theme"));
+var theme_17 = __importDefault(require("../p/theme"));
+var theme_18 = __importDefault(require("../panel/theme"));
+var theme_19 = __importDefault(require("../popover/theme"));
+var theme_20 = __importDefault(require("../radio/theme"));
+var theme_21 = __importDefault(require("../skeleton/theme"));
+var theme_22 = __importDefault(require("../spinner/theme"));
+var theme_23 = __importDefault(require("../switch/theme"));
+var theme_24 = __importDefault(require("../t/theme"));
+var theme_25 = __importDefault(require("../tag/theme"));
+var theme_26 = __importDefault(require("../textarea/theme"));
 exports.default = {
     Avatar: theme_1.default,
     Box: theme_2.default,
@@ -36,22 +37,23 @@ exports.default = {
     Checkbox: theme_5.default,
     Divider: theme_6.default,
     Footer: theme_7.default,
-    Heading: theme_8.default,
-    Icon: theme_9.default,
-    Image: theme_10.default,
-    Input: theme_11.default,
-    Link: theme_12.default,
-    List: theme_13.default,
-    Menu: theme_14.default,
-    Notification: theme_15.default,
-    P: theme_16.default,
-    Panel: theme_17.default,
-    Popover: theme_18.default,
-    Radio: theme_19.default,
-    Skeleton: theme_20.default,
-    Spinner: theme_21.default,
-    Switch: theme_22.default,
-    T: theme_23.default,
-    Tag: theme_24.default,
-    Textarea: theme_25.default
+    Header: theme_8.default,
+    Heading: theme_9.default,
+    Icon: theme_10.default,
+    Image: theme_11.default,
+    Input: theme_12.default,
+    Link: theme_13.default,
+    List: theme_14.default,
+    Menu: theme_15.default,
+    Notification: theme_16.default,
+    P: theme_17.default,
+    Panel: theme_18.default,
+    Popover: theme_19.default,
+    Radio: theme_20.default,
+    Skeleton: theme_21.default,
+    Spinner: theme_22.default,
+    Switch: theme_23.default,
+    T: theme_24.default,
+    Tag: theme_25.default,
+    Textarea: theme_26.default
 };

package/theme/defaultTheme.d.ts

@@ -96,6 +96,11 @@ declare const defaultTheme: {
             90: string;
             100: string;
         };
+        disabled: {
+            bg: string;
+            border: string;
+            color: string;
+        };
     };
     durations: {
         instant: string;
@@ -163,6 +168,7 @@ declare const defaultTheme: {
     zIndices: {};
     components: {
         Avatar: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -211,11 +217,13 @@ declare const defaultTheme: {
             };
         };
         Box: {
+            baseStyle: {};
             defaultProps: {};
             sizes: {};
             variants: {};
         };
         Button: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -320,11 +328,13 @@ declare const defaultTheme: {
             };
         };
         Card: {
+            baseStyle: {};
             defaultProps: {};
             sizes: {};
             variants: {};
         };
         Checkbox: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -370,17 +380,51 @@ declare const defaultTheme: {
             };
         };
         Divider: {
+            baseStyle: {};
             defaultProps: {};
             sizes: {};
             variants: {};
         };
         Footer: {
+            baseStyle: {};
             defaultProps: {};
             parts: string[];
             sizes: {};
             variants: {};
         };
+        Header: {
+            baseStyle: {};
+            defaultProps: {};
+            parts: string[];
+            sizes: {};
+            variants: {
+                test: {
+                    container: {
+                        bg: string;
+                        color: string;
+                    };
+                    profile: {
+                        content: {
+                            color: string;
+                        };
+                        trigger: {
+                            color: string;
+                            name: string;
+                        };
+                    };
+                    services: {
+                        button: {
+                            variant: string;
+                        };
+                    };
+                    signIn: {
+                        colorScheme: string;
+                    };
+                };
+            };
+        };
         Heading: {
+            baseStyle: {};
             defaultProps: {
                 size: string;
             };
@@ -419,6 +463,7 @@ declare const defaultTheme: {
             variants: {};
         };
         Icon: {
+            baseStyle: {};
             defaultProps: {
                 size: string;
             };
@@ -443,11 +488,13 @@ declare const defaultTheme: {
             variants: {};
         };
         Image: {
+            baseStyle: {};
             defaultProps: {};
             sizes: {};
             variants: {};
         };
         Input: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -509,6 +556,7 @@ declare const defaultTheme: {
             };
         };
         Link: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -554,9 +602,15 @@ declare const defaultTheme: {
                         hoverColor: string;
                     };
                 };
+                plain: {
+                    container: {
+                        hoverTextDecoration: string;
+                    };
+                };
             };
         };
         List: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -632,12 +686,27 @@ declare const defaultTheme: {
             };
         };
         Menu: {
-            defaultProps: {};
+            baseStyle: {};
+            defaultProps: {
+                size: string;
+            };
             parts: string[];
-            sizes: {};
+            sizes: {
+                md: {
+                    list: {
+                        size: string;
+                    };
+                };
+                lg: {
+                    list: {
+                        size: string;
+                    };
+                };
+            };
             variants: {};
         };
         Notification: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 variant: string;
@@ -661,6 +730,7 @@ declare const defaultTheme: {
             };
         };
         P: {
+            baseStyle: {};
             defaultProps: {
                 size: string;
             };
@@ -689,6 +759,7 @@ declare const defaultTheme: {
             variants: {};
         };
         Panel: {
+            baseStyle: {};
             defaultProps: {
                 variant: string;
             };
@@ -704,12 +775,14 @@ declare const defaultTheme: {
             };
         };
         Popover: {
+            baseStyle: {};
             defaultProps: {};
             parts: string[];
             sizes: {};
             variants: {};
         };
         Radio: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -755,6 +828,7 @@ declare const defaultTheme: {
             };
         };
         Skeleton: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -787,6 +861,7 @@ declare const defaultTheme: {
             };
         };
         Spinner: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -851,6 +926,7 @@ declare const defaultTheme: {
             };
         };
         Switch: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -922,6 +998,7 @@ declare const defaultTheme: {
             };
         };
         T: {
+            baseStyle: {};
             defaultProps: {
                 size: string;
             };
@@ -942,6 +1019,7 @@ declare const defaultTheme: {
             variants: {};
         };
         Tag: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -1020,6 +1098,7 @@ declare const defaultTheme: {
             };
         };
         Textarea: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 variant: string;

package/theme/foundations/colors.d.ts

@@ -82,6 +82,11 @@ export declare const yellow: {
     90: string;
     100: string;
 };
+export declare const disabled: {
+    bg: string;
+    border: string;
+    color: string;
+};
 declare const _default: {
     blue: {
         10: string;
@@ -167,5 +172,10 @@ declare const _default: {
         90: string;
         100: string;
     };
+    disabled: {
+        bg: string;
+        border: string;
+        color: string;
+    };
 };
 export default _default;

package/theme/foundations/colors.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.yellow = exports.red = exports.prussian = exports.pink = exports.grey = exports.green = exports.blue = void 0;
+exports.disabled = exports.yellow = exports.red = exports.prussian = exports.pink = exports.grey = exports.green = exports.blue = void 0;
 exports.blue = {
     10: '#f6fbff',
     20: '#e2f1ff',
@@ -85,6 +85,11 @@ exports.yellow = {
     90: '#b67b08',
     100: '#83591a'
 };
+exports.disabled = {
+    bg: exports.grey[10],
+    border: exports.grey[50],
+    color: exports.grey[50]
+};
 exports.default = {
     blue: exports.blue,
     green: exports.green,
@@ -92,5 +97,6 @@ exports.default = {
     pink: exports.pink,
     prussian: exports.prussian,
     red: exports.red,
-    yellow: exports.yellow
+    yellow: exports.yellow,
+    disabled: exports.disabled
 };

package/theme/foundations/index.d.ts

@@ -96,6 +96,11 @@ declare const _default: {
             90: string;
             100: string;
         };
+        disabled: {
+            bg: string;
+            border: string;
+            color: string;
+        };
     };
     durations: {
         instant: string;

package/theme/foundations/shadows.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var colors_1 = require("./colors");
 var utils_1 = require("../../utils");
-var greyLight = (0, utils_1.hexToRGB)(colors_1.grey[80], 0.4);
-var greyDark = (0, utils_1.hexToRGB)(colors_1.grey[80], 0.6);
+var colors_1 = require("./colors");
+var greyLight = (0, utils_1.hexToRGBA)(colors_1.grey[80], 0.4);
+var greyDark = (0, utils_1.hexToRGBA)(colors_1.grey[80], 0.6);
 exports.default = {
     '0': "0 0 0 0 #fff",
     '1': "0 2px 5px 0 " + greyLight,

package/theme/foundations/transformers.js

@@ -19,12 +19,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var system_1 = require("@xstyled/system");
 exports.default = {
     border: function (value, _a) {
+        var _b;
         var props = _a.props;
         if (typeof value === 'number')
             return value + "px solid";
         var values = value.split(' ');
-        var _b = __read(values, 3), width = _b[0], style = _b[1], color = _b[2];
-        var colorValue = (0, system_1.getColor)(color)(props);
+        var _c = __read(values, 3), width = _c[0], _d = _c[1], style = _d === void 0 ? '' : _d, color = _c[2];
+        var colorValue = (_b = (0, system_1.getColor)(color)(props)) !== null && _b !== void 0 ? _b : '';
         return width + " " + style + " " + colorValue;
     },
     space: function (value) {

package/theme/index.d.ts

@@ -1,6 +1,5 @@
-import defaultTheme from './defaultTheme';
 export { default as components } from './components';
-export { default as defaultTheme } from './defaultTheme';
+export { default, default as defaultTheme } from './defaultTheme';
 export { default as foundations } from './foundations';
 export { default as animations } from './foundations/animations';
 export { default as borders } from './foundations/borders';
@@ -19,4 +18,3 @@ export { default as transforms } from './foundations/transforms';
 export { default as transitions } from './foundations/transitions';
 export { default as zIndices } from './foundations/zIndices';
 export * from './types';
-export default defaultTheme;

package/theme/index.js

@@ -13,12 +13,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.zIndices = exports.transitions = exports.transforms = exports.spaces = exports.sizes = exports.shadows = exports.screens = exports.ringWidths = exports.radii = exports.fontWeights = exports.fontSizes = exports.fonts = exports.durations = exports.colors = exports.borders = exports.animations = exports.foundations = exports.defaultTheme = exports.components = void 0;
-var defaultTheme_1 = __importDefault(require("./defaultTheme"));
+exports.zIndices = exports.transitions = exports.transforms = exports.spaces = exports.sizes = exports.shadows = exports.screens = exports.ringWidths = exports.radii = exports.fontWeights = exports.fontSizes = exports.fonts = exports.durations = exports.colors = exports.borders = exports.animations = exports.foundations = exports.defaultTheme = exports.default = exports.components = void 0;
 var components_1 = require("./components");
 Object.defineProperty(exports, "components", { enumerable: true, get: function () { return __importDefault(components_1).default; } });
-var defaultTheme_2 = require("./defaultTheme");
-Object.defineProperty(exports, "defaultTheme", { enumerable: true, get: function () { return __importDefault(defaultTheme_2).default; } });
+var defaultTheme_1 = require("./defaultTheme");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(defaultTheme_1).default; } });
+Object.defineProperty(exports, "defaultTheme", { enumerable: true, get: function () { return __importDefault(defaultTheme_1).default; } });
 var foundations_1 = require("./foundations");
 Object.defineProperty(exports, "foundations", { enumerable: true, get: function () { return __importDefault(foundations_1).default; } });
 var animations_1 = require("./foundations/animations");
@@ -54,4 +54,3 @@ Object.defineProperty(exports, "transitions", { enumerable: true, get: function
 var zIndices_1 = require("./foundations/zIndices");
 Object.defineProperty(exports, "zIndices", { enumerable: true, get: function () { return __importDefault(zIndices_1).default; } });
 __exportStar(require("./types"), exports);
-exports.default = defaultTheme_1.default;

package/theme/types.d.ts

@@ -13,9 +13,10 @@ export declare type VuiThemeDefaults = typeof defaultTheme;
 /** Can be extended to add new properties to the theme or override default ones  */
 export interface VuiThemeExtensions {
 }
-export interface ThemingProps<ThemeComponent extends string = string> {
+/** Defines variant and size types of each component connected to the theme. */
+export declare type ThemingProps<ThemeComponent extends string = string> = {
     variant?: ThemeComponent extends Component ? keyof VuiTheme['components'][ThemeComponent]['variants'] : string;
     size?: ThemeComponent extends keyof VuiTheme['components'] ? keyof VuiTheme['components'][ThemeComponent]['sizes'] : string;
-}
+};
 /** VUI theme definition object, containing default values and extensions */
 export declare type VuiTheme = VuiThemeDefaults & VuiThemeExtensions;

package/utils/assertion.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { Dict } from './types';
 /** Is value an array. */
 export declare function isArray<T>(value: any): value is T[];
@@ -6,9 +6,9 @@ export declare function isArray<T>(value: any): value is T[];
 export declare function isFunction<T extends Function = Function>(value: any): value is T;
 /** Is value a number. */
 export declare function isNumber(value: any): value is number;
-/** Is value an object. */
-export declare function isObject(value: any): value is Dict;
-/** Is value a valid ReactText - string or number */
+/** Is value a regular object (functions, arrays and React elements excluded). */
+export declare function isObject<T = Dict>(value: any): value is T;
+/** Is value a valid ReactText - string or number. */
 export declare function isReactText(value: any): value is React.ReactText;
-/** Is value a string */
+/** Is value a string. */
 export declare function isString(value: any): value is string;

package/utils/assertion.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isString = exports.isReactText = exports.isObject = exports.isNumber = exports.isFunction = exports.isArray = void 0;
+var react_1 = __importDefault(require("react"));
 /** Is value an array. */
 function isArray(value) {
     return Array.isArray(value);
@@ -16,17 +20,17 @@ function isNumber(value) {
     return typeof value === 'number';
 }
 exports.isNumber = isNumber;
-/** Is value an object. */
+/** Is value a regular object (functions, arrays and React elements excluded). */
 function isObject(value) {
-    return !!value && typeof value === 'object' && !isFunction(value) && !isArray(value);
+    return !!value && typeof value === 'object' && !isFunction(value) && !isArray(value) && !react_1.default.isValidElement(value);
 }
 exports.isObject = isObject;
-/** Is value a valid ReactText - string or number */
+/** Is value a valid ReactText - string or number. */
 function isReactText(value) {
     return isNumber(value) || isString(value);
 }
 exports.isReactText = isReactText;
-/** Is value a string */
+/** Is value a string. */
 function isString(value) {
     return Object.prototype.toString.call(value) === '[object String]';
 }

package/utils/object.d.ts

@@ -1,6 +1,6 @@
 import { Dict } from './types';
 /** Removes keys from an object if their value is undefined. */
-export declare const filterUndefined: (object: Dict) => Dict<any>;
+export declare function filterUndefined<T = Dict>(object: T): Partial<T>;
 /**
  * Recursively deep merges two objects in an immutable fashion, following these rules:
  * - Key exists in target and both keys are objects => merge
@@ -14,4 +14,4 @@ export declare function merge<S1 extends Dict, S2 extends Dict, S3 extends Dict,
 /**
  * Returns the items of an object that meet the condition specified in a callback function.
  */
-export declare function objectFilter<T extends Dict>(object: T, fn: (value: any, key: string, object: T) => boolean): Dict<any>;
+export declare function objectFilter<T extends Dict, K extends keyof T>(object: T, fn: (value: any, key: string, object: T) => boolean): Partial<T>;

package/utils/object.js

@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.objectFilter = exports.merge = exports.filterUndefined = void 0;
 var assertion_1 = require("./assertion");
 /** Removes keys from an object if their value is undefined. */
-var filterUndefined = function (object) { return objectFilter(object, function (val) { return val !== null && val !== undefined; }); };
+function filterUndefined(object) {
+    return objectFilter(object, function (val) { return val !== null && val !== undefined; });
+}
 exports.filterUndefined = filterUndefined;
 function merge() {
     var sources = [];

package/utils/styles.d.ts

@@ -1,4 +1,4 @@
 /** Concatenates individual className arguments and returns a single string. */
 export declare function cs(...classNames: any[]): string;
-/** Converts hex color value to rgb with optional alpha property */
-export declare function hexToRGB(hex: string, alpha?: number): string;
+/** Converts hex color value to rgb with optional alpha property. */
+export declare function hexToRGBA(hex: string, alpha?: number): string;

package/utils/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hexToRGB = exports.cs = void 0;
+exports.hexToRGBA = exports.cs = void 0;
 /** Concatenates individual className arguments and returns a single string. */
 function cs() {
     var classNames = [];
@@ -10,8 +10,8 @@ function cs() {
     return classNames.filter(Boolean).join(' ');
 }
 exports.cs = cs;
-/** Converts hex color value to rgb with optional alpha property */
-function hexToRGB(hex, alpha) {
+/** Converts hex color value to rgb with optional alpha property. */
+function hexToRGBA(hex, alpha) {
     var hexStr = hex;
     if (hexStr.charAt(0) === '#') {
         hexStr = hexStr.slice(1);
@@ -32,4 +32,4 @@ function hexToRGB(hex, alpha) {
         return "rgb(" + r + ", " + g + ", " + b + ")";
     }
 }
-exports.hexToRGB = hexToRGB;
+exports.hexToRGBA = hexToRGBA;

package/utils/types.d.ts

@@ -1,20 +1,25 @@
 import React, { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType } from 'react';
+/** Type for any React element without breaking autocompletion. */
 export declare type AnyElement = React.ReactNode & {};
+/** Type for any number without breaking autocompletion. */
 export declare type AnyNumber = number & {};
+/** Type for any string without breaking autocompletion. */
 export declare type AnyString = string & {};
 /** Type of change event defaulted to input element */
 export declare type ChangeEvent<T = HTMLInputElement> = React.ChangeEvent<T>;
 /** Type of change event handler defaulted to input element */
 export declare type ChangeEventHandler<T = HTMLInputElement> = React.ChangeEventHandler<T>;
-export interface CreateContextOptions {
+export declare type CreateContextOptions = {
     /** Message displayed when context is used outside of the provider */
     errorMessage?: string;
     /** Accessing context outside of provider won't throw error */
     isOptional?: boolean;
     /** Name of the context */
     name?: string;
-}
+};
+/** Return value of the createContext function. */
 export declare type CreateContextReturn<T> = [React.Provider<T>, () => T];
+/** Basic dictionary typing. */
 export declare type Dict<T = any> = Record<string, T>;
 /** Type of blur/focus event defaulted to any html element */
 export declare type FocusEvent<T = HTMLElement> = React.FocusEvent<T>;
@@ -28,11 +33,11 @@ export declare type KeyboardEventHandler<T = HTMLElement> = React.KeyboardEventH
 export declare type MouseEvent<T = HTMLElement> = React.MouseEvent<T>;
 /** Type of mouse event handler defaulted to any html element */
 export declare type MouseEventHandler<T = HTMLElement> = React.MouseEventHandler<T>;
-export declare type PropGetter<T extends ElementType, Props = {}> = (props: PropsOf<T, Props>, ref?: React.Ref<any> | React.RefObject<any>) => RefPropsOf<T>;
 /** Merges component/element base props and custom props */
 export declare type PropsOf<C extends ElementType, Props = {}> = RightJoinProps<ComponentPropsWithoutRef<C>, Props>;
 /** Merges component/element base props and custom props including ref */
 export declare type RefPropsOf<C extends ElementType, Props = {}> = RightJoinProps<ComponentPropsWithRef<C>, Props>;
+/** Render props of component's children. */
 export declare type RenderProps<P> = React.ReactNode | ((props: P) => React.ReactNode);
 /** Merges props definitions, overriding source keys */
 export declare type RightJoinProps<SourceProps, OverrideProps> = Omit<SourceProps, keyof OverrideProps> & OverrideProps;

package/core/types/component.d.ts

@@ -1,25 +0,0 @@
-import { ElementType, PropsWithoutRef, PropsWithChildren, ReactElement } from 'react';
-import { PropsOf, RefPropsOf } from '../../utils';
-/** VUI component interface, which allows element props inference and extension, 'as' and 'ref' */
-export interface VuiComponent<C extends ElementType, Props = {}> {
-    <AsC extends ElementType>(props: PropsWithChildren<RefPropsOf<AsC, PropsOf<C, Props>>> & {
-        as: AsC;
-    }): ReactElement<any, any> | null;
-    (props: RefPropsOf<C, Props>): ReactElement<any, any> | null;
-    defaultProps?: Partial<PropsOf<C, Props>>;
-    displayName?: string;
-}
-/** Config for VUI component creator helper, which allows toggling memoization and 'areEqual' function */
-export interface VuiComponentConfig<C extends ElementType, Props = {}> {
-    isMemo?: boolean;
-    memoCompare?: (prevProps: Readonly<PropsWithChildren<PropsWithoutRef<PropsOf<C, Props>>>>, nextProps: Readonly<PropsWithChildren<PropsWithoutRef<PropsOf<C, Props>>>>) => boolean;
-}
-/**
- * Simpler VUI component interface, which allows element props inference and extension
- * Does not support 'as' or 'ref'
- */
-export interface VC<C extends ElementType, Props = {}> {
-    (props: PropsOf<C, Props>): ReactElement<any, any> | null;
-    defaultProps?: Partial<PropsOf<C, Props>>;
-    displayName?: string;
-}