@veracity/vui 0.0.15 → 0.1.0

package/core/styled.js

@@ -0,0 +1,80 @@
+"use strict";
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var styled_components_1 = __importStar(require("styled-components"));
+var utils_1 = require("./utils");
+var system_1 = require("../system");
+function createStyled(generator) {
+    var config = generator ? utils_1.forwardPropConfig(generator) : {};
+    var styled = (function (component) {
+        var baseStyled = config ? styled_components_1.default(component).withConfig(config) : styled_components_1.default(component);
+        return getCreateStyle(baseStyled, styled_components_1.css, generator);
+    });
+    Object.keys(styled_components_1.default).forEach(function (key) {
+        // @ts-ignore
+        styled[key] = styled(key);
+    });
+    return styled;
+}
+function getCreateStyle(baseCreateStyle, css, generator) {
+    var createStyle = function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        return baseCreateStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["", "", ""], ["", "", ""])), css.apply(void 0, __spreadArray([], __read(args))), generator);
+    };
+    createStyle.attrs = function (attrs) {
+        return getCreateStyle(baseCreateStyle.attrs(attrs), css, generator);
+    };
+    createStyle.withConfig = function (config) {
+        return getCreateStyle(baseCreateStyle.withConfig(config), css, generator);
+    };
+    return createStyle;
+}
+exports.default = createStyled(system_1.system);
+var templateObject_1;

package/core/types/component.d.ts

@@ -1,30 +1,30 @@
-import React from 'react';
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, PropsWithoutRef, PropsWithChildren, ReactElement } from 'react';
 /** Merges component/element base props and custom props */
-export declare type PropsOf<C extends React.ElementType, Props = {}> = RightJoinProps<React.ComponentPropsWithoutRef<C>, 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 React.ElementType, Props = {}> = RightJoinProps<React.ComponentPropsWithRef<C>, Props>;
+export declare type RefPropsOf<C extends ElementType, Props = {}> = RightJoinProps<ComponentPropsWithRef<C>, Props>;
 /** Merges props definitions, overriding source keys */
-export declare type RightJoinProps<SourceProps, OverrideProps> = OverrideProps & Omit<SourceProps, keyof OverrideProps>;
+export declare type RightJoinProps<SourceProps, OverrideProps> = Omit<SourceProps, keyof OverrideProps> & OverrideProps;
 /** VUI component interface, which allows element props inference and extension, 'as' and 'ref' */
-export interface VuiComponent<C extends React.ElementType, Props = {}> {
-    <AsC extends React.ElementType>(props: RefPropsOf<PropsOf<C, AsC>, Props> & {
+export interface VuiComponent<C extends ElementType, Props = {}> {
+    <AsC extends ElementType>(props: PropsWithChildren<RefPropsOf<AsC, PropsOf<C, Props>>> & {
         as: AsC;
-    }): JSX.Element;
-    (props: RefPropsOf<C, Props>): JSX.Element;
+    }): 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 React.ElementType, Props = {}> {
+export interface VuiComponentConfig<C extends ElementType, Props = {}> {
     isMemo?: boolean;
-    memoCompare?: (prevProps: Readonly<React.PropsWithChildren<React.PropsWithoutRef<PropsOf<C, Props>>>>, nextProps: Readonly<React.PropsWithChildren<React.PropsWithoutRef<PropsOf<C, Props>>>>) => 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 React.ElementType, Props = {}> {
-    (props: PropsOf<C, Props>): JSX.Element;
+export interface VC<C extends ElementType, Props = {}> {
+    (props: PropsOf<C, Props>): ReactElement<any, any> | null;
     defaultProps?: Partial<PropsOf<C, Props>>;
     displayName?: string;
 }

package/core/types/index.d.ts

@@ -1,4 +1,5 @@
 export * from './component';
 export * from './context';
 export * from './events';
+export * from './styled';
 export * from './themeGet';

package/core/types/index.js

@@ -13,4 +13,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./component"), exports);
 __exportStar(require("./context"), exports);
 __exportStar(require("./events"), exports);
+__exportStar(require("./styled"), exports);
 __exportStar(require("./themeGet"), exports);

package/core/types/styled.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { AnyStyledComponent, DefaultTheme, StyledComponentInnerAttrs, StyledComponentInnerComponent, StyledComponentInnerOtherProps, ThemedStyledFunction } from 'styled-components';
+import { SystemProps } from '../../system';
+declare type ThemedStyledComponentFactories<T extends object> = {
+    [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunction<TTag, T, SystemProps>;
+};
+export interface VStyled<T extends object = DefaultTheme> extends ThemedStyledComponentFactories<T> {
+    <C extends AnyStyledComponent>(component: C): ThemedStyledFunction<StyledComponentInnerComponent<C>, T, StyledComponentInnerOtherProps<C> & SystemProps, StyledComponentInnerAttrs<C>>;
+    <C extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(component: C): ThemedStyledFunction<C, T, SystemProps>;
+}
+export {};

package/core/utils.d.ts

@@ -21,7 +21,7 @@ export declare const mediaDown: (width: ScreenWidth) => (props: StyledProps<unkn
 /** Returns CSS media string with appropriate min-width value */
 export declare const mediaUp: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
 /** Removes specific theming keys from the given props. */
-export declare function omitThemingProps<T extends ThemingProps>(props: T): Omit<T, "variant" | "size">;
+export declare function omitThemingProps<T extends ThemingProps>(props: T): Omit<T, "size" | "variant">;
 /**
  * Custom validator to prevent certain props from reaching the HTML element.
  * @param props - list of props to filter out
@@ -40,7 +40,7 @@ export declare function useMedia(width: ScreenWidth): {
     viewportWidth: number | null;
 };
 /**
- * Retrieves and merges size and variant styling from theme configuration.
+ * Retrieves and merges size and variant styling from a component's theme configuration.
  * @param component - name of any component configured in the theme
  * @param props - props object of the given component
  */

package/core/utils.js

@@ -68,7 +68,7 @@ function createContext(options) {
 exports.createContext = createContext;
 /** Merges provided theme extensions and overrides with default VUI theme */
 function extendTheme(extensions) {
-    return utils_1.mergeWith(theme_1.default, extensions);
+    return utils_1.merge(theme_1.default, extensions);
 }
 exports.extendTheme = extendTheme;
 /**
@@ -149,7 +149,7 @@ function useMedia(width) {
 }
 exports.useMedia = useMedia;
 /**
- * Retrieves and merges size and variant styling from theme configuration.
+ * Retrieves and merges size and variant styling from a component's theme configuration.
  * @param component - name of any component configured in the theme
  * @param props - props object of the given component
  */
@@ -162,17 +162,17 @@ function useStyleConfig(component, props) {
     var colorScheme = mergedProps.colorScheme, size = mergedProps.size, variant = mergedProps.variant;
     return react_1.useMemo(function () {
         var _a, _b;
-        var sizeStyles = utils_1.runIfFn((_a = sizes === null || sizes === void 0 ? void 0 : sizes[size]) !== null && _a !== void 0 ? _a : {}, mergedProps);
-        var variantStyles = utils_1.runIfFn((_b = variants === null || variants === void 0 ? void 0 : variants[variant]) !== null && _b !== void 0 ? _b : {}, mergedProps);
+        var sizeStyles = (_a = utils_1.runIfFn(sizes === null || sizes === void 0 ? void 0 : sizes[size], mergedProps)) !== null && _a !== void 0 ? _a : {};
+        var variantStyles = (_b = utils_1.runIfFn(variants === null || variants === void 0 ? void 0 : variants[variant], mergedProps)) !== null && _b !== void 0 ? _b : {};
         var styles = {};
         if (parts.length > 0) {
             parts.forEach(function (part) {
                 var _a, _b;
-                styles[part] = __assign(__assign({}, ((_a = sizeStyles[part]) !== null && _a !== void 0 ? _a : {})), ((_b = variantStyles[part]) !== null && _b !== void 0 ? _b : {}));
+                styles[part] = utils_1.merge((_a = sizeStyles[part]) !== null && _a !== void 0 ? _a : {}, (_b = variantStyles[part]) !== null && _b !== void 0 ? _b : {});
             });
         }
         else {
-            styles = __assign(__assign({}, sizeStyles), variantStyles);
+            styles = utils_1.merge(sizeStyles, variantStyles);
         }
         return styles;
     }, [colorScheme, size, variant]);

package/core/v.d.ts

@@ -0,0 +1,182 @@
+/// <reference types="react" />
+import { SystemProps } from '../system';
+declare const v: {
+    extend<TExtendProps extends object>(...generators: import("@xstyled/styled-components").StyleGenerator[]): any;
+} & {
+    symbol: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGSymbolElement>, "color">) => import("react").ReactElement<any, "symbol">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    object: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>, "color">) => import("react").ReactElement<any, "object">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    a: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "color">) => import("react").ReactElement<any, "a">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    abbr: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "abbr">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    address: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "address">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    area: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>, "color">) => import("react").ReactElement<any, "area">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    article: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "article">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    aside: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "aside">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    audio: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "color">) => import("react").ReactElement<any, "audio">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    b: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "b">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    base: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").BaseHTMLAttributes<HTMLBaseElement>, HTMLBaseElement>, "color">) => import("react").ReactElement<any, "base">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    bdi: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "bdi">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    bdo: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "bdo">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    big: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "big">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    blockquote: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").BlockquoteHTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "blockquote">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    body: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>, "color">) => import("react").ReactElement<any, "body">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    br: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLBRElement>, HTMLBRElement>, "color">) => import("react").ReactElement<any, "br">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    button: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "color">) => import("react").ReactElement<any, "button">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    canvas: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>, "color">) => import("react").ReactElement<any, "canvas">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    caption: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "caption">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    cite: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "cite">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    code: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "code">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    col: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>, "color">) => import("react").ReactElement<any, "col">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    colgroup: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").ColgroupHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>, "color">) => import("react").ReactElement<any, "colgroup">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    data: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").DataHTMLAttributes<HTMLDataElement>, HTMLDataElement>, "color">) => import("react").ReactElement<any, "data">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    datalist: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDataListElement>, HTMLDataListElement>, "color">) => import("react").ReactElement<any, "datalist">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    dd: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "dd">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    del: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").DelHTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "del">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    details: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").DetailsHTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "details">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    dfn: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "dfn">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    dialog: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, "color">) => import("react").ReactElement<any, "dialog">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    div: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    dl: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDListElement>, HTMLDListElement>, "color">) => import("react").ReactElement<any, "dl">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    dt: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "dt">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    em: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "em">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    embed: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").EmbedHTMLAttributes<HTMLEmbedElement>, HTMLEmbedElement>, "color">) => import("react").ReactElement<any, "embed">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    fieldset: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "color">) => import("react").ReactElement<any, "fieldset">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    figcaption: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "figcaption">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    figure: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "figure">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    footer: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "footer">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    form: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "color">) => import("react").ReactElement<any, "form">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    h1: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "color">) => import("react").ReactElement<any, "h1">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    h2: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "color">) => import("react").ReactElement<any, "h2">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    h3: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "color">) => import("react").ReactElement<any, "h3">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    h4: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "color">) => import("react").ReactElement<any, "h4">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    h5: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "color">) => import("react").ReactElement<any, "h5">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    h6: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "color">) => import("react").ReactElement<any, "h6">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    head: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadElement>, HTMLHeadElement>, "color">) => import("react").ReactElement<any, "head">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    header: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "header">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    hgroup: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "hgroup">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    hr: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "color">) => import("react").ReactElement<any, "hr">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    html: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HtmlHTMLAttributes<HTMLHtmlElement>, HTMLHtmlElement>, "color">) => import("react").ReactElement<any, "html">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    i: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "i">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    iframe: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, "color">) => import("react").ReactElement<any, "iframe">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    img: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "color">) => import("react").ReactElement<any, "img">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    input: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "color">) => import("react").ReactElement<any, "input">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    ins: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").InsHTMLAttributes<HTMLModElement>, HTMLModElement>, "color">) => import("react").ReactElement<any, "ins">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    kbd: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "kbd">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    keygen: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").KeygenHTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "keygen">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    label: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "color">) => import("react").ReactElement<any, "label">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    legend: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, "color">) => import("react").ReactElement<any, "legend">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    li: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "color">) => import("react").ReactElement<any, "li">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    link: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").LinkHTMLAttributes<HTMLLinkElement>, HTMLLinkElement>, "color">) => import("react").ReactElement<any, "link">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    main: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "main">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    map: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").MapHTMLAttributes<HTMLMapElement>, HTMLMapElement>, "color">) => import("react").ReactElement<any, "map">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    mark: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "mark">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    menu: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").MenuHTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "menu">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    menuitem: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "menuitem">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    meta: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement>, "color">) => import("react").ReactElement<any, "meta">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    meter: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").MeterHTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "meter">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    nav: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "nav">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    noindex: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "noindex">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    noscript: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "noscript">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    ol: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "color">) => import("react").ReactElement<any, "ol">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    optgroup: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").OptgroupHTMLAttributes<HTMLOptGroupElement>, HTMLOptGroupElement>, "color">) => import("react").ReactElement<any, "optgroup">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    option: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "color">) => import("react").ReactElement<any, "option">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    output: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").OutputHTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "output">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    p: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "color">) => import("react").ReactElement<any, "p">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    param: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").ParamHTMLAttributes<HTMLParamElement>, HTMLParamElement>, "color">) => import("react").ReactElement<any, "param">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    picture: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "picture">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    pre: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLPreElement>, HTMLPreElement>, "color">) => import("react").ReactElement<any, "pre">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    progress: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>, "color">) => import("react").ReactElement<any, "progress">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    q: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").QuoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, "color">) => import("react").ReactElement<any, "q">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    rp: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "rp">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    rt: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "rt">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    ruby: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "ruby">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    s: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "s">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    samp: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "samp">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    slot: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").SlotHTMLAttributes<HTMLSlotElement>, HTMLSlotElement>, "color">) => import("react").ReactElement<any, "slot">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    script: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement>, "color">) => import("react").ReactElement<any, "script">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    section: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "section">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    select: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "color">) => import("react").ReactElement<any, "select">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    small: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "small">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    source: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").SourceHTMLAttributes<HTMLSourceElement>, HTMLSourceElement>, "color">) => import("react").ReactElement<any, "source">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    span: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "color">) => import("react").ReactElement<any, "span">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    strong: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "strong">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    style: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>, "color">) => import("react").ReactElement<any, "style">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    sub: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "sub">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    summary: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "summary">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    sup: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "sup">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    table: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "color">) => import("react").ReactElement<any, "table">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    template: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTemplateElement>, HTMLTemplateElement>, "color">) => import("react").ReactElement<any, "template">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    tbody: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "color">) => import("react").ReactElement<any, "tbody">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    td: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "color">) => import("react").ReactElement<any, "td">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    textarea: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "color">) => import("react").ReactElement<any, "textarea">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    tfoot: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "color">) => import("react").ReactElement<any, "tfoot">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    th: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "color">) => import("react").ReactElement<any, "th">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    thead: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "color">) => import("react").ReactElement<any, "thead">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    time: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").TimeHTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "time">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    title: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTitleElement>, HTMLTitleElement>, "color">) => import("react").ReactElement<any, "title">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    tr: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "color">) => import("react").ReactElement<any, "tr">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    track: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement>, "color">) => import("react").ReactElement<any, "track">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    u: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "u">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    ul: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "color">) => import("react").ReactElement<any, "ul">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    var: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "var">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    video: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "color">) => import("react").ReactElement<any, "video">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    wbr: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "color">) => import("react").ReactElement<any, "wbr">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    webview: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").WebViewHTMLAttributes<HTMLWebViewElement>, HTMLWebViewElement>, "color">) => import("react").ReactElement<any, "webview">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    svg: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGSVGElement>, "color">) => import("react").ReactElement<any, "svg">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    animate: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGElement>, "color">) => import("react").ReactElement<any, "animate">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    animateMotion: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGElement>, "color">) => import("react").ReactElement<any, "animateMotion">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    animateTransform: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGElement>, "color">) => import("react").ReactElement<any, "animateTransform">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    circle: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGCircleElement>, "color">) => import("react").ReactElement<any, "circle">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    clipPath: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGClipPathElement>, "color">) => import("react").ReactElement<any, "clipPath">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    defs: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGDefsElement>, "color">) => import("react").ReactElement<any, "defs">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    desc: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGDescElement>, "color">) => import("react").ReactElement<any, "desc">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    ellipse: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGEllipseElement>, "color">) => import("react").ReactElement<any, "ellipse">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feBlend: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFEBlendElement>, "color">) => import("react").ReactElement<any, "feBlend">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feColorMatrix: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFEColorMatrixElement>, "color">) => import("react").ReactElement<any, "feColorMatrix">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feComponentTransfer: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFEComponentTransferElement>, "color">) => import("react").ReactElement<any, "feComponentTransfer">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feComposite: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFECompositeElement>, "color">) => import("react").ReactElement<any, "feComposite">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feConvolveMatrix: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFEConvolveMatrixElement>, "color">) => import("react").ReactElement<any, "feConvolveMatrix">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feDiffuseLighting: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFEDiffuseLightingElement>, "color">) => import("react").ReactElement<any, "feDiffuseLighting">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feDisplacementMap: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFEDisplacementMapElement>, "color">) => import("react").ReactElement<any, "feDisplacementMap">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feDistantLight: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFEDistantLightElement>, "color">) => import("react").ReactElement<any, "feDistantLight">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feDropShadow: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFEDropShadowElement>, "color">) => import("react").ReactElement<any, "feDropShadow">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feFlood: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFEFloodElement>, "color">) => import("react").ReactElement<any, "feFlood">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feFuncA: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFEFuncAElement>, "color">) => import("react").ReactElement<any, "feFuncA">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feFuncB: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFEFuncBElement>, "color">) => import("react").ReactElement<any, "feFuncB">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feFuncG: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFEFuncGElement>, "color">) => import("react").ReactElement<any, "feFuncG">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feFuncR: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFEFuncRElement>, "color">) => import("react").ReactElement<any, "feFuncR">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feGaussianBlur: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFEGaussianBlurElement>, "color">) => import("react").ReactElement<any, "feGaussianBlur">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feImage: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFEImageElement>, "color">) => import("react").ReactElement<any, "feImage">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feMerge: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFEMergeElement>, "color">) => import("react").ReactElement<any, "feMerge">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feMergeNode: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFEMergeNodeElement>, "color">) => import("react").ReactElement<any, "feMergeNode">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feMorphology: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFEMorphologyElement>, "color">) => import("react").ReactElement<any, "feMorphology">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feOffset: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFEOffsetElement>, "color">) => import("react").ReactElement<any, "feOffset">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    fePointLight: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFEPointLightElement>, "color">) => import("react").ReactElement<any, "fePointLight">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feSpecularLighting: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFESpecularLightingElement>, "color">) => import("react").ReactElement<any, "feSpecularLighting">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feSpotLight: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFESpotLightElement>, "color">) => import("react").ReactElement<any, "feSpotLight">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feTile: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFETileElement>, "color">) => import("react").ReactElement<any, "feTile">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    feTurbulence: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFETurbulenceElement>, "color">) => import("react").ReactElement<any, "feTurbulence">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    filter: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGFilterElement>, "color">) => import("react").ReactElement<any, "filter">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    foreignObject: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGForeignObjectElement>, "color">) => import("react").ReactElement<any, "foreignObject">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    g: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGGElement>, "color">) => import("react").ReactElement<any, "g">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    image: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGImageElement>, "color">) => import("react").ReactElement<any, "image">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    line: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGLineElement>, "color">) => import("react").ReactElement<any, "line">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    linearGradient: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGLinearGradientElement>, "color">) => import("react").ReactElement<any, "linearGradient">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    marker: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGMarkerElement>, "color">) => import("react").ReactElement<any, "marker">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    mask: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGMaskElement>, "color">) => import("react").ReactElement<any, "mask">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    metadata: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGMetadataElement>, "color">) => import("react").ReactElement<any, "metadata">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    mpath: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGElement>, "color">) => import("react").ReactElement<any, "mpath">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    path: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGPathElement>, "color">) => import("react").ReactElement<any, "path">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    pattern: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGPatternElement>, "color">) => import("react").ReactElement<any, "pattern">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    polygon: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGPolygonElement>, "color">) => import("react").ReactElement<any, "polygon">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    polyline: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGPolylineElement>, "color">) => import("react").ReactElement<any, "polyline">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    radialGradient: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGRadialGradientElement>, "color">) => import("react").ReactElement<any, "radialGradient">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    rect: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGRectElement>, "color">) => import("react").ReactElement<any, "rect">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    stop: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGStopElement>, "color">) => import("react").ReactElement<any, "stop">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    switch: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGSwitchElement>, "color">) => import("react").ReactElement<any, "switch">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    text: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGTextElement>, "color">) => import("react").ReactElement<any, "text">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    textPath: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGTextPathElement>, "color">) => import("react").ReactElement<any, "textPath">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    tspan: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGTSpanElement>, "color">) => import("react").ReactElement<any, "tspan">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    use: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGUseElement>, "color">) => import("react").ReactElement<any, "use">, import("styled-components").DefaultTheme, SystemProps, "color">;
+    view: import("styled-components").StyledComponent<(props: Omit<import("react").SVGProps<SVGViewElement>, "color">) => import("react").ReactElement<any, "view">, import("styled-components").DefaultTheme, SystemProps, "color">;
+};
+export default v;

package/core/v.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var styled_components_1 = require("@xstyled/styled-components");
+var system_1 = require("../system");
+var v = styled_components_1.createX(system_1.system);
+exports.default = v;

package/core/vuiProvider.d.ts

@@ -1,9 +1,20 @@
 import { FC } from 'react';
 import { VuiTheme } from '../theme';
-interface VuiProviderProps {
+declare type VuiProviderProps = {
+    /**
+     * Adds basic styles to body
+     * @default true
+     */
     globalStyle?: boolean;
+    /**
+     * Applies custom CSS reset
+     * @default true
+     */
     resetCSS?: boolean;
+    /**
+     * Modified theme config using 'extendTheme' utility
+     */
     theme?: VuiTheme;
-}
+};
 declare const VuiProvider: FC<VuiProviderProps>;
 export default VuiProvider;

package/core/vuiProvider.js

@@ -12,7 +12,7 @@ var VuiProvider = function (_a) {
     var children = _a.children, _b = _a.globalStyle, globalStyle = _b === void 0 ? true : _b, _c = _a.resetCSS, resetCSS = _c === void 0 ? true : _c, _d = _a.theme, theme = _d === void 0 ? theme_1.default : _d;
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
         resetCSS && react_1.default.createElement(resetCSS_1.default, null),
-        globalStyle && react_1.default.createElement(globalStyle_1.default, null),
+        react_1.default.createElement(globalStyle_1.default, { globalStyle: globalStyle }),
         children));
 };
 exports.default = VuiProvider;

package/divider/divider.types.d.ts

@@ -1,7 +1,6 @@
 import { BordersProps, SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface DividerProps extends SystemProps, ThemingProps<'Divider'> {
-    className?: string;
     isVertical?: boolean;
     width?: BordersProps['borderWidth'];
 }

package/heading/heading.types.d.ts

@@ -1,9 +1,10 @@
+import React from 'react';
 import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface HeadingProps extends SystemProps, ThemingProps<'Heading'> {
     align?: TypographyProps['textAlign'];
     casing?: TypographyProps['textTransform'];
     decoration?: TypographyProps['textDecoration'];
-    text?: number | string;
+    text?: React.ReactText;
     weight?: TypographyProps['fontWeight'];
 }

package/icon/helpers.d.ts

@@ -1,8 +1,7 @@
 import { GetIconDetailsResult, IconProp } from './icon.types';
 /**
  * Returns an object with either 'src' or 'customIcon', depending on whether the provided icon is:
- * - string and in not library: 	CDN url
- * - string and in library: 			icon definition object
- * - not string: 									icon definition object
+ * - not in library: 	'src' as CDN url
+ * - in library: 			'customIcon' as icon definition object
  */
 export declare function getIconDetails(icon?: IconProp): GetIconDetailsResult;

package/icon/helpers.js

@@ -32,23 +32,21 @@ var core_1 = require("../core");
 var icons_1 = require("../icons");
 /**
  * Returns an object with either 'src' or 'customIcon', depending on whether the provided icon is:
- * - string and in not library: 	CDN url
- * - string and in library: 			icon definition object
- * - not string: 									icon definition object
+ * - not in library: 	'src' as CDN url
+ * - in library: 			'customIcon' as icon definition object
  */
 function getIconDetails(icon) {
     if (!icon)
         return {};
-    // Compute CDN url if icon is a string and not in library cache
-    if (typeof icon === 'string' && !icons_1.library.has(icon)) {
+    // Compute CDN url if icon is not in library cache
+    if (!icons_1.library.has(icon)) {
         var prefix = icon.slice(0, 3);
         return {
             src: core_1.cdnUrl + "/common/icons/ui/" + prefix + "/" + icon + ".svg"
         };
     }
-    // If icon is a string, get its definition from library, else icon itself is a definition obj
-    var iconDefinition = (typeof icon === 'string' ? icons_1.library.get(icon) : icon);
-    var details = iconDefinition.details, _a = iconDefinition.name, name = _a === void 0 ? '' : _a, _b = iconDefinition.pathProps, pathProps = _b === void 0 ? [] : _b, _c = iconDefinition.svgProps, svgProps = _c === void 0 ? {} : _c;
+    // Compute relevant properties based on icon definition from the library
+    var _a = icons_1.library.get(icon), details = _a.details, name = _a.name, _b = _a.pathProps, pathProps = _b === void 0 ? [] : _b, _c = _a.svgProps, svgProps = _c === void 0 ? {} : _c;
     var _d = __read(details, 5), width = _d[0], height = _d[1], d = _d[4];
     var viewBox = "0 0 " + width + " " + height;
     var customIcon = {