@veracity/vui 0.6.2 → 0.7.0-beta.0

package/esm/checkbox/theme.js

@@ -0,0 +1,59 @@
+function variantDefault(props) {
+    const { colorScheme: c } = props;
+    const control = {
+        color: `${c}.80`,
+        hoverColor: `${c}.90`
+    };
+    if (c === 'prussian') {
+        control.hoverColor = 'prussian.70';
+    }
+    return {
+        control
+    };
+}
+const baseStyle = {};
+const defaultProps = {
+    colorScheme: 'blue',
+    size: 'md',
+    variant: 'default'
+};
+const parts = ['container', 'control', 'label'];
+const sizes = {
+    sm: {
+        control: {
+            h: 16,
+            w: 16
+        },
+        label: {
+            size: 'sm'
+        }
+    },
+    md: {
+        control: {
+            h: 20,
+            w: 20
+        },
+        label: {
+            size: 'md'
+        }
+    },
+    lg: {
+        control: {
+            h: 24,
+            w: 24
+        },
+        label: {
+            size: 'lg'
+        }
+    }
+};
+const variants = {
+    default: variantDefault
+};
+export default {
+    baseStyle,
+    defaultProps,
+    parts,
+    sizes,
+    variants
+};

package/esm/core/consts.d.ts

@@ -0,0 +1,8 @@
+export declare const cdnUrl = "https://cdn.veracity.com";
+export declare const cdnStagUrl = "https://cdnstag.veracity.com";
+export declare const cdnTestUrl = "https://cdntest.veracity.com";
+export declare const cdnUrls: {
+    readonly Prod: "https://cdn.veracity.com";
+    readonly Stag: "https://cdnstag.veracity.com";
+    readonly Test: "https://cdntest.veracity.com";
+};

package/esm/core/consts.js

@@ -0,0 +1,8 @@
+export const cdnUrl = 'https://cdn.veracity.com';
+export const cdnStagUrl = 'https://cdnstag.veracity.com';
+export const cdnTestUrl = 'https://cdntest.veracity.com';
+export const cdnUrls = {
+    Prod: cdnUrl,
+    Stag: cdnStagUrl,
+    Test: cdnTestUrl
+};

package/esm/core/index.d.ts

@@ -0,0 +1,7 @@
+export * from './consts';
+export * from './links';
+export * from './media';
+export * from './styled';
+export * from './theme';
+export * from './vui';
+export * from './vuiProvider';

package/esm/core/index.js

@@ -0,0 +1,7 @@
+export * from './consts';
+export * from './links';
+export * from './media';
+export * from './styled';
+export * from './theme';
+export * from './vui';
+export * from './vuiProvider';

package/esm/core/links.d.ts

@@ -0,0 +1,21 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import { Dict, Environment } from '../utils';
+export declare type LinksDict = Dict<string>;
+declare type LinksContextType = [LinksDict, Dispatch<SetStateAction<LinksDict>>];
+/**
+ * Adds loggedIn=1 parameter to the URL if 'isLoggedIn' flag is true, which means the user is logged in.
+ * If 'isLoggedIn' is falsy, loggedin param will be removed.
+ * This is supposed to aid login flow when navigating between Veracity applications.
+ */
+export declare function getLoggedInLink(link: string, isLoggedIn?: boolean): string;
+export declare function LinksProvider(props: {
+    children: React.ReactNode;
+}): JSX.Element;
+/** Returns links and setLinks from LinksContext. */
+export declare function useLinks(): LinksContextType;
+/**
+ * Retrieves the links from CDN for the given environment and appends them with loggedin=1 parameter
+ * if user is logged in. Links will be reloaded when 'env' changes or updated when 'isLoggedIn' changes.
+ */
+export declare function useLoadLinks(env?: Environment, isLoggedIn?: boolean): void;
+export {};

package/esm/core/links.js

@@ -0,0 +1,74 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { isObject, noop } from '../utils';
+import { cdnUrls } from './consts';
+const LinksContext = createContext(undefined);
+/**
+ * Adds loggedIn=1 parameter to the URL if 'isLoggedIn' flag is true, which means the user is logged in.
+ * If 'isLoggedIn' is falsy, loggedin param will be removed.
+ * This is supposed to aid login flow when navigating between Veracity applications.
+ */
+export function getLoggedInLink(link, isLoggedIn) {
+    try {
+        const url = new URL(link);
+        if (isLoggedIn) {
+            url.searchParams.append('loggedin', '1');
+        }
+        else {
+            url.searchParams.delete('loggedin');
+        }
+        return url.toString();
+    }
+    catch {
+        return link;
+    }
+}
+export function LinksProvider(props) {
+    const linksState = useState({});
+    return React.createElement(LinksContext.Provider, { value: linksState, ...props });
+}
+/** Returns links and setLinks from LinksContext. */
+export function useLinks() {
+    const context = useContext(LinksContext);
+    if (context === undefined) {
+        console.error('useLinks must be used within a LinksContext.');
+        return [{}, noop];
+    }
+    return context;
+}
+/**
+ * Retrieves the links from CDN for the given environment and appends them with loggedin=1 parameter
+ * if user is logged in. Links will be reloaded when 'env' changes or updated when 'isLoggedIn' changes.
+ */
+export function useLoadLinks(env, isLoggedIn) {
+    const [, setLinks] = useLinks();
+    useEffect(() => {
+        if (!env)
+            return;
+        loadLinks(env);
+    }, [env]);
+    useEffect(() => {
+        setLinks(links => updateLoggedInParam(links, isLoggedIn));
+    }, [isLoggedIn]);
+    // Load links from the CDN for the given environment.
+    async function loadLinks(env) {
+        try {
+            const response = await fetch(`${cdnUrls[env]}/common/data/links/base.json`);
+            if (!response.ok)
+                return;
+            const data = await response.json();
+            if (isObject(data)) {
+                setLinks(updateLoggedInParam(data, isLoggedIn));
+            }
+        }
+        catch {
+            console.error('Failed to retrieve links');
+        }
+    }
+    // Adds/removes loggedin=1 URL param for each link based on isLoggedIn arg.
+    function updateLoggedInParam(links, isLoggedIn) {
+        return Object.keys(links).reduce((loggedInLinks, key) => {
+            loggedInLinks[key] = getLoggedInLink(links[key], isLoggedIn);
+            return loggedInLinks;
+        }, {});
+    }
+}

package/esm/core/media.d.ts

@@ -0,0 +1,38 @@
+import { FC } from 'react';
+import { StyledProps } from 'styled-components';
+import { Screen } from '../theme';
+import { AnyNumber, AnyString } from '../utils';
+declare type ScreenWidth = Screen | AnyNumber | AnyString;
+export declare type RenderOnScreenProps = {
+    /** Changes direction to below the breakpoint. */
+    isDown?: boolean;
+    /** Breakpoint to compare viewport width against. */
+    screen?: Screen;
+};
+/** Returns CSS media string with appropriate min-width and max-width values. */
+export declare const mediaBetween: (minWidth: ScreenWidth, maxWidth: ScreenWidth) => (props: StyledProps<unknown>) => string;
+/** Returns CSS media string with appropriate max-width value */
+export declare const mediaDown: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
+/** Returns CSS media string with appropriate min-width value. */
+export declare const mediaUp: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
+/** Renders its content when viewport width is at or above 'md' breakpoint (default: 960px and more). */
+export declare const RenderOnDesktop: FC<RenderOnScreenProps>;
+/** Renders its content when viewport width is below 'md' breakpoint (default: below 960px). */
+export declare const RenderOnMobile: FC<RenderOnScreenProps>;
+/**
+ * Renders its content when viewport width is at or above a provided breakpoint.
+ * Optionally, direction can be set to down, or below, the breakpoint.
+ */
+export declare const RenderOnScreen: FC<RenderOnScreenProps>;
+/** Returns true if current viewport width is between provided min and max widths. */
+export declare function useBetween(minWidth: ScreenWidth, maxWidth: ScreenWidth): boolean;
+/** Returns true if current viewport width is smaller than provided width. */
+export declare function useDown(width: ScreenWidth): boolean;
+/** Returns viewport width and provided screen width as a number. */
+export declare function useMedia(width: ScreenWidth): {
+    value: number;
+    viewportWidth: number | null;
+};
+/** Returns true if current viewport width is larger than or equal to provided width. */
+export declare function useUp(width: ScreenWidth): boolean;
+export {};

package/esm/core/media.js

@@ -0,0 +1,47 @@
+import { useViewportWidth } from '@xstyled/styled-components';
+import React from 'react';
+import { th, useTheme } from './theme';
+/** Returns CSS media string with appropriate min-width and max-width values. */
+export const mediaBetween = (minWidth, maxWidth) => (props) => `@media (min-width: ${th.screen(minWidth)(props)}) and (max-width: ${th.screen(maxWidth)(props)})`;
+/** Returns CSS media string with appropriate max-width value */
+export const mediaDown = (width) => (props) => {
+    return `@media (max-width: ${th.screen(width)(props)})`;
+};
+/** Returns CSS media string with appropriate min-width value. */
+export const mediaUp = (width) => (props) => `@media (min-width: ${th.screen(width)(props)})`;
+/** Renders its content when viewport width is at or above 'md' breakpoint (default: 960px and more). */
+export const RenderOnDesktop = props => React.createElement(RenderOnScreen, { ...props });
+/** Renders its content when viewport width is below 'md' breakpoint (default: below 960px). */
+export const RenderOnMobile = props => React.createElement(RenderOnScreen, { isDown: true, ...props });
+/**
+ * Renders its content when viewport width is at or above a provided breakpoint.
+ * Optionally, direction can be set to down, or below, the breakpoint.
+ */
+export const RenderOnScreen = ({ children, isDown, screen = 'md' }) => {
+    const mediaFn = isDown ? useDown : useUp;
+    return mediaFn(screen) ? React.createElement(React.Fragment, null, children) : null;
+};
+/** Returns true if current viewport width is between provided min and max widths. */
+export function useBetween(minWidth, maxWidth) {
+    const isDown = useDown(maxWidth);
+    const isUp = useUp(minWidth);
+    return isDown && isUp;
+}
+/** Returns true if current viewport width is smaller than provided width. */
+export function useDown(width) {
+    const { value, viewportWidth } = useMedia(width);
+    return viewportWidth !== null && value !== null && viewportWidth < value;
+}
+/** Returns viewport width and provided screen width as a number. */
+export function useMedia(width) {
+    const theme = useTheme();
+    const viewportWidth = useViewportWidth();
+    const valueString = th.screen(width)({ theme });
+    const value = Number(valueString.replace('px', ''));
+    return { value, viewportWidth };
+}
+/** Returns true if current viewport width is larger than or equal to provided width. */
+export function useUp(width) {
+    const { value, viewportWidth } = useMedia(width);
+    return viewportWidth !== null && value !== null && viewportWidth >= value;
+}

package/esm/core/styled.d.ts

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