@veracity/vui 0.7.1 → 1.1.0

package/core/media.d.ts

@@ -1,38 +0,0 @@
-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/core/media.js

@@ -1,79 +0,0 @@
-"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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useUp = exports.useMedia = exports.useDown = exports.useBetween = exports.RenderOnScreen = exports.RenderOnMobile = exports.RenderOnDesktop = exports.mediaUp = exports.mediaDown = exports.mediaBetween = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
-var react_1 = __importDefault(require("react"));
-var theme_1 = require("./theme");
-/** Returns CSS media string with appropriate min-width and max-width values. */
-var mediaBetween = function (minWidth, maxWidth) { return function (props) {
-    return "@media (min-width: " + theme_1.th.screen(minWidth)(props) + ") and (max-width: " + theme_1.th.screen(maxWidth)(props) + ")";
-}; };
-exports.mediaBetween = mediaBetween;
-/** Returns CSS media string with appropriate max-width value */
-var mediaDown = function (width) { return function (props) {
-    return "@media (max-width: " + theme_1.th.screen(width)(props) + ")";
-}; };
-exports.mediaDown = mediaDown;
-/** Returns CSS media string with appropriate min-width value. */
-var mediaUp = function (width) { return function (props) {
-    return "@media (min-width: " + theme_1.th.screen(width)(props) + ")";
-}; };
-exports.mediaUp = mediaUp;
-/** Renders its content when viewport width is at or above 'md' breakpoint (default: 960px and more). */
-var RenderOnDesktop = function (props) { return react_1.default.createElement(exports.RenderOnScreen, __assign({}, props)); };
-exports.RenderOnDesktop = RenderOnDesktop;
-/** Renders its content when viewport width is below 'md' breakpoint (default: below 960px). */
-var RenderOnMobile = function (props) { return react_1.default.createElement(exports.RenderOnScreen, __assign({ isDown: true }, props)); };
-exports.RenderOnMobile = RenderOnMobile;
-/**
- * Renders its content when viewport width is at or above a provided breakpoint.
- * Optionally, direction can be set to down, or below, the breakpoint.
- */
-var RenderOnScreen = function (_a) {
-    var children = _a.children, isDown = _a.isDown, _b = _a.screen, screen = _b === void 0 ? 'md' : _b;
-    var mediaFn = isDown ? useDown : useUp;
-    return mediaFn(screen) ? react_1.default.createElement(react_1.default.Fragment, null, children) : null;
-};
-exports.RenderOnScreen = RenderOnScreen;
-/** Returns true if current viewport width is between provided min and max widths. */
-function useBetween(minWidth, maxWidth) {
-    var isDown = useDown(maxWidth);
-    var isUp = useUp(minWidth);
-    return isDown && isUp;
-}
-exports.useBetween = useBetween;
-/** Returns true if current viewport width is smaller than provided width. */
-function useDown(width) {
-    var _a = useMedia(width), value = _a.value, viewportWidth = _a.viewportWidth;
-    return viewportWidth !== null && value !== null && viewportWidth < value;
-}
-exports.useDown = useDown;
-/** Returns viewport width and provided screen width as a number. */
-function useMedia(width) {
-    var theme = (0, theme_1.useTheme)();
-    var viewportWidth = (0, styled_components_1.useViewportWidth)();
-    var valueString = theme_1.th.screen(width)({ theme: theme });
-    var value = Number(valueString.replace('px', ''));
-    return { value: value, viewportWidth: viewportWidth };
-}
-exports.useMedia = useMedia;
-/** Returns true if current viewport width is larger than or equal to provided width. */
-function useUp(width) {
-    var _a = useMedia(width), value = _a.value, viewportWidth = _a.viewportWidth;
-    return viewportWidth !== null && value !== null && viewportWidth >= value;
-}
-exports.useUp = useUp;

package/core/styled.d.ts

@@ -1,195 +0,0 @@
-/// <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;

package/core/styled.js

@@ -1,140 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.styled = exports.v = exports.css = exports.createGlobalStyle = void 0;
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-var core_1 = require("@xstyled/core");
-var styled_components_1 = require("@xstyled/styled-components");
-var util_1 = require("@xstyled/util");
-var styled_components_2 = __importStar(require("styled-components"));
-var system_1 = require("../system");
-/** Creates enhanced 'styled' function with optional style generators and prop-forwarding safeguard. */
-function createBaseStyled(css, generator) {
-    var config = generator ? forwardPropConfig(generator) : {};
-    return (function (component) {
-        var baseStyled = config ? (0, styled_components_2.default)(component).withConfig(config) : (0, styled_components_2.default)(component);
-        return getCreateStyle(baseStyled, css, generator);
-    });
-}
-/** Enhances createGlobalStyle function with custom 'css' helper. */
-function createCreateGlobalStyle() {
-    var css = createCssFunction();
-    return (function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        return (0, styled_components_2.createGlobalStyle)([
-            // @ts-ignore
-            css.apply(void 0, __spreadArray([], __read(args), false))
-        ]);
-    });
-}
-/** Enhances styled-components' 'css' function with automatic theming. */
-function createCssFunction() {
-    return (function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        var scCssArgs = styled_components_2.css.apply(void 0, __spreadArray([], __read(args), false));
-        var flattenedArgs = (0, util_1.flattenStrings)(scCssArgs);
-        return flattenedArgs.map(core_1.transform);
-    });
-}
-/**
- * Creates full 'styled' function with properties for components.
- * Includes base version and system version using 'Box' postfix.
- */
-function createStyled(generator) {
-    var css = createCssFunction();
-    var styled = createBaseStyled(css);
-    var vstyled = createBaseStyled(css, generator);
-    Object.keys(styled_components_2.default).forEach(function (key) {
-        // @ts-ignore
-        styled[key] = styled(key);
-        // @ts-ignore
-        styled[key + "Box"] = vstyled(key);
-    });
-    return styled;
-}
-/** Provides configuration to the 'styled' function, which filters out xstyled system props. */
-function forwardPropConfig(generator) {
-    return {
-        shouldForwardProp: function (prop, defaultValidatorFn) {
-            if (typeof prop === 'string' && generator.meta.props.includes(prop))
-                return false;
-            return defaultValidatorFn(prop);
-        }
-    };
-}
-/** Extends styled component with a given styles generator (system). */
-function getCreateStyle(baseCreateStyle, css, generator) {
-    var createStyle = function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        return baseCreateStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["", "", ""], ["", "", ""])), css.apply(void 0, __spreadArray([], __read(args), false)), generator);
-    };
-    createStyle.attrs = function (attrs) {
-        return getCreateStyle(baseCreateStyle.attrs(attrs), css, generator);
-    };
-    createStyle.withConfig = function (config) {
-        return getCreateStyle(baseCreateStyle.withConfig(config), css, generator);
-    };
-    return createStyle;
-}
-exports.createGlobalStyle = createCreateGlobalStyle();
-exports.css = createCssFunction();
-exports.v = (0, styled_components_1.createX)(system_1.system);
-exports.styled = createStyled(system_1.system);
-exports.default = exports.styled;
-var templateObject_1;

package/core/theme.d.ts

@@ -1,41 +0,0 @@
-import { IProps, ThemeGetter } from '@xstyled/styled-components';
-import { ThemingProps, VuiTheme, VuiThemeExtensions } from '../theme';
-import { AnyNumber, AnyString, Dict } from '../utils';
-declare type VuiThemeGetter<ThemeKey extends keyof VuiTheme> = ThemeGetter<keyof VuiTheme[ThemeKey] | AnyString | AnyNumber>;
-/** Type of the 'th' theme getter function. */
-export declare type ThemeGet = {
-    (path: string, defaultValue?: any): (props: IProps) => any;
-    animation: VuiThemeGetter<'animations'>;
-    borders: VuiThemeGetter<'borders'>;
-    color: VuiThemeGetter<'colors'>;
-    duration: VuiThemeGetter<'durations'>;
-    font: VuiThemeGetter<'fonts'>;
-    fontSize: VuiThemeGetter<'fontSizes'>;
-    fontWeight: VuiThemeGetter<'fontWeights'>;
-    radius: VuiThemeGetter<'radii'>;
-    ringWidth: VuiThemeGetter<'ringWidths'>;
-    screen: VuiThemeGetter<'screens'>;
-    shadow: VuiThemeGetter<'shadows'>;
-    size: VuiThemeGetter<'sizes'>;
-    space: VuiThemeGetter<'spaces'>;
-    transform: VuiThemeGetter<'transforms'>;
-    transition: VuiThemeGetter<'transitions'>;
-    zIndex: VuiThemeGetter<'zIndices'>;
-};
-/** Merges provided theme extensions and overrides with default VUI theme. */
-export declare function extendTheme(extensions: VuiThemeExtensions): VuiTheme;
-/** Removes specific theming keys from the given props. */
-export declare function omitThemingProps<T extends ThemingProps>(props: T): Omit<T, "size" | "variant">;
-/** Re-export of xstyled 'th' with custom typing and screen getter. */
-declare const th: ThemeGet;
-export { th };
-/**
- * Combines baseStyle, 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
- */
-export declare function useStyleConfig(component: keyof VuiTheme['components'], props?: any): Dict<any>;
-/** Returns theme value at the given path. */
-export declare function useTh(path: keyof VuiTheme | AnyString, defaultValue?: any): any;
-/** Returns the theme object with extensions. */
-export declare function useTheme(): VuiTheme;