@veracity/vui 0.0.15 → 0.2.0

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
  */
@@ -157,22 +157,22 @@ function useStyleConfig(component, props) {
     var _a;
     if (props === void 0) { props = {}; }
     var theme = useTheme();
-    var _b = (_a = theme.components[component]) !== null && _a !== void 0 ? _a : {}, defaultProps = _b.defaultProps, _c = _b.parts, parts = _c === void 0 ? [] : _c, sizes = _b.sizes, variants = _b.variants;
+    var _b = (_a = theme === null || theme === void 0 ? void 0 : theme.components[component]) !== null && _a !== void 0 ? _a : {}, defaultProps = _b.defaultProps, _c = _b.parts, parts = _c === void 0 ? [] : _c, sizes = _b.sizes, variants = _b.variants;
     var mergedProps = __assign(__assign({}, defaultProps), 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,7 @@
 import { BordersProps, SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface DividerProps extends SystemProps, ThemingProps<'Divider'> {
-    className?: string;
+    children?: never;
     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 = {

package/icon/icon.js

@@ -32,9 +32,10 @@ var core_1 = require("../core");
 var svg_1 = require("../svg");
 var utils_1 = require("../utils");
 exports.Icon = core_1.vui(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), className = _a.className, icon = _a.icon, rotate = _a.rotate, scale = _a.scale, rest = __rest(_a, ["className", "icon", "rotate", "scale"]);
+    /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+    var _a = core_1.omitThemingProps(props), className = _a.className, icon = _a.icon, _b = _a.name, name = _b === void 0 ? props.icon : _b, rotate = _a.rotate, scale = _a.scale, rest = __rest(_a, ["className", "icon", "name", "rotate", "scale"]);
     var styles = core_1.useStyleConfig('Icon', props);
-    var _b = helpers_1.getIconDetails(icon), customIcon = _b.customIcon, src = _b.src;
+    var _c = helpers_1.getIconDetails(name), customIcon = _c.customIcon, src = _c.src;
     var scaledSize = scale ? 16 * scale : undefined;
     var aliasedProps = utils_1.filterUndefined({
         h: scaledSize,

package/icon/icon.types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { PropsOf } from '../core';
-import { IconDefinition, VuiIcon } from '../icons';
+import { VuiIcon } from '../icons';
 import Svg, { SvgProps } from '../svg';
 import { ThemingProps } from '../theme';
 import { AnyString } from '../utils';
@@ -12,9 +12,11 @@ export interface GetIconDetailsResult {
     };
     src?: string;
 }
-export declare type IconProp = VuiIcon | IconDefinition | AnyString;
+export declare type IconProp = VuiIcon | AnyString;
 export interface IconProps extends SvgProps, ThemingProps<'Icon'> {
+    /** @deprecated use 'name' instead */
     icon?: IconProp;
+    name?: IconProp;
     rotate?: number;
     scale?: number;
 }

package/icons/library.js

@@ -32,7 +32,7 @@ var Library = /** @class */ (function () {
                 icons[_i] = arguments[_i];
             }
             icons.forEach(function (icon) {
-                icon.name && _this.cache.set(icon.name, icon);
+                _this.cache.set(icon.name, icon);
             });
         };
         this.get = function (name) {

package/icons/types.d.ts

@@ -4,7 +4,7 @@ import { PropsOf } from '../core';
 import Svg from '../svg';
 export interface IconDefinition {
     details: IconDetails;
-    name?: string;
+    name: string;
     pathProps?: React.SVGProps<SVGPathElement> | React.SVGProps<SVGPathElement>[];
     svgProps?: PropsOf<typeof Svg>;
 }

package/image/image.d.ts

@@ -0,0 +1,3 @@
+import { ImageProps } from './image.types';
+export declare const Image: import("../core").VuiComponent<"img", ImageProps>;
+export default Image;

package/image/image.js

@@ -0,0 +1,38 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+exports.Image = core_1.vui(function (props, ref) {
+    var _a = core_1.omitThemingProps(props), className = _a.className, rest = __rest(_a, ["className"]);
+    var styles = core_1.useStyleConfig('Image', props);
+    return react_1.default.createElement(core_1.v.img, __assign({ className: utils_1.cs('vui-image', className), ref: ref }, styles, rest));
+});
+exports.Image.displayName = 'Image';
+exports.default = exports.Image;

package/image/image.types.d.ts

@@ -0,0 +1,5 @@
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+export interface ImageProps extends SystemProps, ThemingProps<'Image'> {
+    children?: never;
+}

package/image/index.d.ts

@@ -0,0 +1,3 @@
+export * from './image';
+export * from './image.types';
+export { default } from './image';