@veracity/vui 0.2.0 → 0.2.2

package/core/index.d.ts

@@ -1,8 +1,7 @@
 export * from './consts';
+export * from './styled';
 export * from './types';
 export * from './utils';
 export { default as GlobalStyle } from './globalStyle';
 export { default as ResetCSS } from './resetCSS';
-export { default as styled } from './styled';
-export { default as v } from './v';
 export { default as VuiProvider } from './vuiProvider';

package/core/index.js

@@ -13,17 +13,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VuiProvider = exports.v = exports.styled = exports.ResetCSS = exports.GlobalStyle = void 0;
+exports.VuiProvider = exports.ResetCSS = exports.GlobalStyle = void 0;
 __exportStar(require("./consts"), exports);
+__exportStar(require("./styled"), exports);
 __exportStar(require("./types"), exports);
 __exportStar(require("./utils"), exports);
 var globalStyle_1 = require("./globalStyle");
 Object.defineProperty(exports, "GlobalStyle", { enumerable: true, get: function () { return __importDefault(globalStyle_1).default; } });
 var resetCSS_1 = require("./resetCSS");
 Object.defineProperty(exports, "ResetCSS", { enumerable: true, get: function () { return __importDefault(resetCSS_1).default; } });
-var styled_1 = require("./styled");
-Object.defineProperty(exports, "styled", { enumerable: true, get: function () { return __importDefault(styled_1).default; } });
-var v_1 = require("./v");
-Object.defineProperty(exports, "v", { enumerable: true, get: function () { return __importDefault(v_1).default; } });
 var vuiProvider_1 = require("./vuiProvider");
 Object.defineProperty(exports, "VuiProvider", { enumerable: true, get: function () { return __importDefault(vuiProvider_1).default; } });

package/core/resetCSS.js

@@ -4,6 +4,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var styled_components_1 = require("styled-components");
-exports.default = styled_components_1.createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\thtml {\n\t\tbox-sizing: border-box;\n\t\tline-height: 1.4;\n\t\t-webkit-text-size-adjust: 100%;\n\t}\n\n\t*, *::before, *::after {\n\t\tborder-style: solid;\n\t\tborder-width: 0;\n\t\tbox-sizing: inherit;\n\t}\n\n\tbody {\n\t\tmargin: 0;\n\t}\n\n\ta {\n\t\tbackground-color: transparent;\n\t\tcolor: inherit;\n\t\ttext-decoration: none;\n\t}\n\n\tabbr[title] {\n\t\tborder-bottom: none;\n\t\ttext-decoration: underline dotted;\n\t}\n\n\tb, strong {\n\t\tfont-weight: bolder;\n\t}\n\n\tbutton {\n\t\tcursor: pointer;\n\t\t-webkit-appearance: button;\n\t}\n\n\tbutton, input, optgroup, select, textarea {\n\t\tfont-family: inherit;\n\t\tfont-size: 100%;\n\t\tmargin: 0;\n\t}\n\n\tbutton, select {\n\t\ttext-transform: none;\n\t}\n\n\tcode, kbd, pre, samp {\n\t\tfont-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;\n\t\tfont-size: 1em;\n\t}\n\n\tdetails {\n\t\tdisplay: block;\n\t}\n\n\tfieldset {\n\t\tpadding: 0.35em 0.75em 0.625em;\n\t}\n\n\th1, h2, h3, h4, h5, h6, p, hr, dl, dd, blockquote, figure, pre {\n\t\tmargin: 0;\n\t}\n\n\th1, h2, h3, h4, h5, h6 {\n\t\tfont-size: inherit;\n\t\tfont-weight: inherit;\n\t}\n\n\thr {\n\t\tcolor: inherit;\n\t\theight: 0;\n\t}\n\n\timg {\n\t\tborder-style: none;\n\t}\n\n\timg, svg, video, canvas, audio, iframe, embed, object {\n\t\tdisplay: block;\n\t}\n\n\tlegend {\n\t\tcolor: inherit;\n\t\tdisplay: table;\n\t\tmax-width: 100%;\n\t\tpadding: 0;\n\t\twhite-space: normal;\n\t}\n\n\tmain {\n\t\tdisplay: block;\n\t}\n\n\tol, ul  {\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tprogress {\n\t\tvertical-align: baseline;\n\t}\n\n\tsummary {\n\t\tdisplay: list-item;\n\t}\n\n\tsmall {\n\t\tfont-size: 80%;\n\t}\n\n\tsub, sup {\n\t\tfont-size: 75%;\n\t\tline-height: 0;\n\t\tposition: relative;\n\t\tvertical-align: baseline;\n\t}\n\n\tsub {\n\t\tbottom: -0.25em;\n\t}\n\n\tsup {\n\t\ttop: -0.5em;\n\t}\n\n\ttable {\n\t\ttext-indent: 0;\n\t\tborder-color: inherit;\n\t}\n\n\ttemplate {\n\t\tdisplay: none;\n\t}\n\n\ttextarea {\n\t\toverflow: auto;\n\t}\n\n\t::-moz-focus-inner {\n\t\tborder-style: none;\n\t\tpadding: 0;\n\t}\n\n\t::-webkit-file-upload-button {\n\t\tfont: inherit;\n\t\t-webkit-appearance: button;\n\t}\n\n\t[type=checkbox], [type=radio] {\n\t\tpadding: 0;\n\t}\n\n\t[type=number]::-webkit-inner-spin-button,\n\t[type=number]::-webkit-outer-spin-button {\n\t\theight: auto;\n\t}\n\n\t[type=search] {\n\t\toutline-offset: -2px;\n\t\t-webkit-appearance: textfield;\n\t}\n\n\t[type=search]::-webkit-search-decoration {\n\t\t-webkit-appearance: none;\n\t}\n\n\t[hidden] {\n\t\tdisplay: none;\n\t}\n"], ["\n\thtml {\n\t\tbox-sizing: border-box;\n\t\tline-height: 1.4;\n\t\t-webkit-text-size-adjust: 100%;\n\t}\n\n\t*, *::before, *::after {\n\t\tborder-style: solid;\n\t\tborder-width: 0;\n\t\tbox-sizing: inherit;\n\t}\n\n\tbody {\n\t\tmargin: 0;\n\t}\n\n\ta {\n\t\tbackground-color: transparent;\n\t\tcolor: inherit;\n\t\ttext-decoration: none;\n\t}\n\n\tabbr[title] {\n\t\tborder-bottom: none;\n\t\ttext-decoration: underline dotted;\n\t}\n\n\tb, strong {\n\t\tfont-weight: bolder;\n\t}\n\n\tbutton {\n\t\tcursor: pointer;\n\t\t-webkit-appearance: button;\n\t}\n\n\tbutton, input, optgroup, select, textarea {\n\t\tfont-family: inherit;\n\t\tfont-size: 100%;\n\t\tmargin: 0;\n\t}\n\n\tbutton, select {\n\t\ttext-transform: none;\n\t}\n\n\tcode, kbd, pre, samp {\n\t\tfont-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;\n\t\tfont-size: 1em;\n\t}\n\n\tdetails {\n\t\tdisplay: block;\n\t}\n\n\tfieldset {\n\t\tpadding: 0.35em 0.75em 0.625em;\n\t}\n\n\th1, h2, h3, h4, h5, h6, p, hr, dl, dd, blockquote, figure, pre {\n\t\tmargin: 0;\n\t}\n\n\th1, h2, h3, h4, h5, h6 {\n\t\tfont-size: inherit;\n\t\tfont-weight: inherit;\n\t}\n\n\thr {\n\t\tcolor: inherit;\n\t\theight: 0;\n\t}\n\n\timg {\n\t\tborder-style: none;\n\t}\n\n\timg, svg, video, canvas, audio, iframe, embed, object {\n\t\tdisplay: block;\n\t}\n\n\tlegend {\n\t\tcolor: inherit;\n\t\tdisplay: table;\n\t\tmax-width: 100%;\n\t\tpadding: 0;\n\t\twhite-space: normal;\n\t}\n\n\tmain {\n\t\tdisplay: block;\n\t}\n\n\tol, ul  {\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tprogress {\n\t\tvertical-align: baseline;\n\t}\n\n\tsummary {\n\t\tdisplay: list-item;\n\t}\n\n\tsmall {\n\t\tfont-size: 80%;\n\t}\n\n\tsub, sup {\n\t\tfont-size: 75%;\n\t\tline-height: 0;\n\t\tposition: relative;\n\t\tvertical-align: baseline;\n\t}\n\n\tsub {\n\t\tbottom: -0.25em;\n\t}\n\n\tsup {\n\t\ttop: -0.5em;\n\t}\n\n\ttable {\n\t\ttext-indent: 0;\n\t\tborder-color: inherit;\n\t}\n\n\ttemplate {\n\t\tdisplay: none;\n\t}\n\n\ttextarea {\n\t\toverflow: auto;\n\t}\n\n\t::-moz-focus-inner {\n\t\tborder-style: none;\n\t\tpadding: 0;\n\t}\n\n\t::-webkit-file-upload-button {\n\t\tfont: inherit;\n\t\t-webkit-appearance: button;\n\t}\n\n\t[type=checkbox], [type=radio] {\n\t\tpadding: 0;\n\t}\n\n\t[type=number]::-webkit-inner-spin-button,\n\t[type=number]::-webkit-outer-spin-button {\n\t\theight: auto;\n\t}\n\n\t[type=search] {\n\t\toutline-offset: -2px;\n\t\t-webkit-appearance: textfield;\n\t}\n\n\t[type=search]::-webkit-search-decoration {\n\t\t-webkit-appearance: none;\n\t}\n\n\t[hidden] {\n\t\tdisplay: none;\n\t}\n"])));
+var styled_1 = require("./styled");
+exports.default = (0, styled_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\thtml {\n\t\tbox-sizing: border-box;\n\t\tline-height: 1.4;\n\t\t-webkit-text-size-adjust: 100%;\n\t}\n\n\t*, *::before, *::after {\n\t\tborder-style: solid;\n\t\tborder-width: 0;\n\t\tbox-sizing: inherit;\n\t}\n\n\tbody {\n\t\tmargin: 0;\n\t}\n\n\ta {\n\t\tbackground-color: transparent;\n\t\tcolor: inherit;\n\t\ttext-decoration: none;\n\t}\n\n\tabbr[title] {\n\t\tborder-bottom: none;\n\t\ttext-decoration: underline dotted;\n\t}\n\n\tb, strong {\n\t\tfont-weight: bolder;\n\t}\n\n\tbutton {\n\t\tcursor: pointer;\n\t\t-webkit-appearance: button;\n\t}\n\n\tbutton, input, optgroup, select, textarea {\n\t\tfont-family: inherit;\n\t\tfont-size: 100%;\n\t\tmargin: 0;\n\t}\n\n\tbutton, select {\n\t\ttext-transform: none;\n\t}\n\n\tcode, kbd, pre, samp {\n\t\tfont-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;\n\t\tfont-size: 1em;\n\t}\n\n\tdetails {\n\t\tdisplay: block;\n\t}\n\n\tfieldset {\n\t\tpadding: 0.35em 0.75em 0.625em;\n\t}\n\n\th1, h2, h3, h4, h5, h6, p, hr, dl, dd, blockquote, figure, pre {\n\t\tmargin: 0;\n\t}\n\n\th1, h2, h3, h4, h5, h6 {\n\t\tfont-size: inherit;\n\t\tfont-weight: inherit;\n\t}\n\n\thr {\n\t\tcolor: inherit;\n\t\theight: 0;\n\t}\n\n\timg {\n\t\tborder-style: none;\n\t}\n\n\timg, svg, video, canvas, audio, iframe, embed, object {\n\t\tdisplay: block;\n\t}\n\n\tlegend {\n\t\tcolor: inherit;\n\t\tdisplay: table;\n\t\tmax-width: 100%;\n\t\tpadding: 0;\n\t\twhite-space: normal;\n\t}\n\n\tmain {\n\t\tdisplay: block;\n\t}\n\n\tol, ul  {\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tprogress {\n\t\tvertical-align: baseline;\n\t}\n\n\tsummary {\n\t\tdisplay: list-item;\n\t}\n\n\tsmall {\n\t\tfont-size: 80%;\n\t}\n\n\tsub, sup {\n\t\tfont-size: 75%;\n\t\tline-height: 0;\n\t\tposition: relative;\n\t\tvertical-align: baseline;\n\t}\n\n\tsub {\n\t\tbottom: -0.25em;\n\t}\n\n\tsup {\n\t\ttop: -0.5em;\n\t}\n\n\ttable {\n\t\ttext-indent: 0;\n\t\tborder-color: inherit;\n\t}\n\n\ttemplate {\n\t\tdisplay: none;\n\t}\n\n\ttextarea {\n\t\toverflow: auto;\n\t}\n\n\t::-moz-focus-inner {\n\t\tborder-style: none;\n\t\tpadding: 0;\n\t}\n\n\t::-webkit-file-upload-button {\n\t\tfont: inherit;\n\t\t-webkit-appearance: button;\n\t}\n\n\t[type=checkbox], [type=radio] {\n\t\tpadding: 0;\n\t}\n\n\t[type=number]::-webkit-inner-spin-button,\n\t[type=number]::-webkit-outer-spin-button {\n\t\theight: auto;\n\t}\n\n\t[type=search] {\n\t\toutline-offset: -2px;\n\t\t-webkit-appearance: textfield;\n\t}\n\n\t[type=search]::-webkit-search-decoration {\n\t\t-webkit-appearance: none;\n\t}\n\n\t[hidden] {\n\t\tdisplay: none;\n\t}\n"], ["\n\thtml {\n\t\tbox-sizing: border-box;\n\t\tline-height: 1.4;\n\t\t-webkit-text-size-adjust: 100%;\n\t}\n\n\t*, *::before, *::after {\n\t\tborder-style: solid;\n\t\tborder-width: 0;\n\t\tbox-sizing: inherit;\n\t}\n\n\tbody {\n\t\tmargin: 0;\n\t}\n\n\ta {\n\t\tbackground-color: transparent;\n\t\tcolor: inherit;\n\t\ttext-decoration: none;\n\t}\n\n\tabbr[title] {\n\t\tborder-bottom: none;\n\t\ttext-decoration: underline dotted;\n\t}\n\n\tb, strong {\n\t\tfont-weight: bolder;\n\t}\n\n\tbutton {\n\t\tcursor: pointer;\n\t\t-webkit-appearance: button;\n\t}\n\n\tbutton, input, optgroup, select, textarea {\n\t\tfont-family: inherit;\n\t\tfont-size: 100%;\n\t\tmargin: 0;\n\t}\n\n\tbutton, select {\n\t\ttext-transform: none;\n\t}\n\n\tcode, kbd, pre, samp {\n\t\tfont-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;\n\t\tfont-size: 1em;\n\t}\n\n\tdetails {\n\t\tdisplay: block;\n\t}\n\n\tfieldset {\n\t\tpadding: 0.35em 0.75em 0.625em;\n\t}\n\n\th1, h2, h3, h4, h5, h6, p, hr, dl, dd, blockquote, figure, pre {\n\t\tmargin: 0;\n\t}\n\n\th1, h2, h3, h4, h5, h6 {\n\t\tfont-size: inherit;\n\t\tfont-weight: inherit;\n\t}\n\n\thr {\n\t\tcolor: inherit;\n\t\theight: 0;\n\t}\n\n\timg {\n\t\tborder-style: none;\n\t}\n\n\timg, svg, video, canvas, audio, iframe, embed, object {\n\t\tdisplay: block;\n\t}\n\n\tlegend {\n\t\tcolor: inherit;\n\t\tdisplay: table;\n\t\tmax-width: 100%;\n\t\tpadding: 0;\n\t\twhite-space: normal;\n\t}\n\n\tmain {\n\t\tdisplay: block;\n\t}\n\n\tol, ul  {\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tprogress {\n\t\tvertical-align: baseline;\n\t}\n\n\tsummary {\n\t\tdisplay: list-item;\n\t}\n\n\tsmall {\n\t\tfont-size: 80%;\n\t}\n\n\tsub, sup {\n\t\tfont-size: 75%;\n\t\tline-height: 0;\n\t\tposition: relative;\n\t\tvertical-align: baseline;\n\t}\n\n\tsub {\n\t\tbottom: -0.25em;\n\t}\n\n\tsup {\n\t\ttop: -0.5em;\n\t}\n\n\ttable {\n\t\ttext-indent: 0;\n\t\tborder-color: inherit;\n\t}\n\n\ttemplate {\n\t\tdisplay: none;\n\t}\n\n\ttextarea {\n\t\toverflow: auto;\n\t}\n\n\t::-moz-focus-inner {\n\t\tborder-style: none;\n\t\tpadding: 0;\n\t}\n\n\t::-webkit-file-upload-button {\n\t\tfont: inherit;\n\t\t-webkit-appearance: button;\n\t}\n\n\t[type=checkbox], [type=radio] {\n\t\tpadding: 0;\n\t}\n\n\t[type=number]::-webkit-inner-spin-button,\n\t[type=number]::-webkit-outer-spin-button {\n\t\theight: auto;\n\t}\n\n\t[type=search] {\n\t\toutline-offset: -2px;\n\t\t-webkit-appearance: textfield;\n\t}\n\n\t[type=search]::-webkit-search-decoration {\n\t\t-webkit-appearance: none;\n\t}\n\n\t[hidden] {\n\t\tdisplay: none;\n\t}\n"])));
 var templateObject_1;

package/core/styled.d.ts

@@ -1,4 +1,192 @@
-import { DefaultTheme } from 'styled-components';
-import { VStyled } from './types';
-declare const _default: VStyled<DefaultTheme>;
-export default _default;
+/// <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';
+export declare type CSSFunction = ThemedCssFunction<DefaultTheme>;
+export declare type CreateGlobalStyle = typeof scCreateGlobalStyle;
+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;

package/core/styled.js

@@ -39,24 +39,63 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+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 });
-var styled_components_1 = __importStar(require("styled-components"));
+exports.styled = exports.v = exports.css = exports.createGlobalStyle = void 0;
+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 utils_1 = require("./utils");
 var system_1 = require("../system");
-function createStyled(generator) {
-    var config = generator ? utils_1.forwardPropConfig(generator) : {};
-    var styled = (function (component) {
-        var baseStyled = config ? styled_components_1.default(component).withConfig(config) : styled_components_1.default(component);
-        return getCreateStyle(baseStyled, styled_components_1.css, generator);
+function createBaseStyled(css, generator) {
+    var config = generator ? (0, utils_1.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);
+    });
+}
+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))
+        ]);
     });
-    Object.keys(styled_components_1.default).forEach(function (key) {
+}
+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);
+    });
+}
+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;
 }
@@ -66,7 +105,7 @@ function getCreateStyle(baseCreateStyle, css, generator) {
         for (var _i = 0; _i < arguments.length; _i++) {
             args[_i] = arguments[_i];
         }
-        return baseCreateStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["", "", ""], ["", "", ""])), css.apply(void 0, __spreadArray([], __read(args))), generator);
+        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);
@@ -76,5 +115,8 @@ function getCreateStyle(baseCreateStyle, css, generator) {
     };
     return createStyle;
 }
-exports.default = createStyled(system_1.system);
+exports.createGlobalStyle = createCreateGlobalStyle();
+exports.css = createCssFunction();
+exports.v = (0, styled_components_1.createX)(system_1.system);
+exports.styled = createStyled(system_1.system);
 var templateObject_1;

package/core/types/component.d.ts

@@ -1,10 +1,5 @@
-import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, PropsWithoutRef, PropsWithChildren, ReactElement } from 'react';
-/** Merges component/element base props and custom props */
-export declare type PropsOf<C extends ElementType, Props = {}> = RightJoinProps<ComponentPropsWithoutRef<C>, Props>;
-/** Merges component/element base props and custom props including ref */
-export declare type RefPropsOf<C extends ElementType, Props = {}> = RightJoinProps<ComponentPropsWithRef<C>, Props>;
-/** Merges props definitions, overriding source keys */
-export declare type RightJoinProps<SourceProps, OverrideProps> = Omit<SourceProps, keyof OverrideProps> & OverrideProps;
+import { ElementType, PropsWithoutRef, PropsWithChildren, ReactElement } from 'react';
+import { PropsOf, RefPropsOf } from '../../utils';
 /** VUI component interface, which allows element props inference and extension, 'as' and 'ref' */
 export interface VuiComponent<C extends ElementType, Props = {}> {
     <AsC extends ElementType>(props: PropsWithChildren<RefPropsOf<AsC, PropsOf<C, Props>>> & {

package/core/types/index.d.ts

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

package/core/types/index.js

@@ -12,6 +12,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./component"), exports);
 __exportStar(require("./context"), exports);
-__exportStar(require("./events"), exports);
-__exportStar(require("./styled"), exports);
 __exportStar(require("./themeGet"), exports);

package/core/utils.d.ts

@@ -1,9 +1,9 @@
 import { StyleGenerator } from '@xstyled/styled-components';
 import React from 'react';
 import { StyledProps } from 'styled-components';
-import { CreateContextOptions, CreateContextReturn, PropsOf, ThemeGet, VuiComponent, VuiComponentConfig } from './types';
+import { CreateContextOptions, CreateContextReturn, ThemeGet, VuiComponent, VuiComponentConfig } from './types';
 import { Screen, ThemingProps, VuiTheme, VuiThemeExtensions } from '../theme';
-import { AnyNumber, AnyString, Dict } from '../utils';
+import { AnyNumber, AnyString, Dict, PropsOf } from '../utils';
 /** Generic function to create new Context and context access hook. */
 export declare function createContext<ContextType>(options?: CreateContextOptions): CreateContextReturn<ContextType>;
 /** Merges provided theme extensions and overrides with default VUI theme */

package/core/utils.js

@@ -68,7 +68,7 @@ function createContext(options) {
 exports.createContext = createContext;
 /** Merges provided theme extensions and overrides with default VUI theme */
 function extendTheme(extensions) {
-    return utils_1.merge(theme_1.default, extensions);
+    return (0, utils_1.merge)(theme_1.default, extensions);
 }
 exports.extendTheme = extendTheme;
 /**
@@ -121,7 +121,7 @@ exports.shouldForwardProp = shouldForwardProp;
 /** Re-export of xstyled 'th' with custom typing and screen getter */
 var th = styled_components_1.th;
 exports.th = th;
-th.screen = styled_components_1.themeGetter({
+th.screen = (0, styled_components_1.themeGetter)({
     name: 'screen',
     key: 'screens',
     compose: styled_components_1.getPx
@@ -142,7 +142,7 @@ exports.useDown = useDown;
 /** Returns viewport width and provided screen width as a number  */
 function useMedia(width) {
     var theme = useTheme();
-    var viewportWidth = styled_components_1.useViewportWidth();
+    var viewportWidth = (0, styled_components_1.useViewportWidth)();
     var valueString = th.screen(width)({ theme: theme });
     var value = Number(valueString.replace('px', ''));
     return { value: value, viewportWidth: viewportWidth };
@@ -157,22 +157,23 @@ function useStyleConfig(component, props) {
     var _a;
     if (props === void 0) { props = {}; }
     var theme = useTheme();
-    var _b = (_a = theme === null || theme === void 0 ? void 0 : theme.components[component]) !== null && _a !== void 0 ? _a : {}, defaultProps = _b.defaultProps, _c = _b.parts, parts = _c === void 0 ? [] : _c, sizes = _b.sizes, variants = _b.variants;
+    var _b = (_a = theme === null || theme === void 0 ? void 0 : theme.components[component]) !== null && _a !== void 0 ? _a : {}, baseStyle = _b.baseStyle, defaultProps = _b.defaultProps, _c = _b.parts, parts = _c === void 0 ? [] : _c, sizes = _b.sizes, variants = _b.variants;
     var mergedProps = __assign(__assign({}, defaultProps), props);
     var colorScheme = mergedProps.colorScheme, size = mergedProps.size, variant = mergedProps.variant;
-    return react_1.useMemo(function () {
-        var _a, _b;
-        var sizeStyles = (_a = utils_1.runIfFn(sizes === null || sizes === void 0 ? void 0 : sizes[size], mergedProps)) !== null && _a !== void 0 ? _a : {};
-        var variantStyles = (_b = utils_1.runIfFn(variants === null || variants === void 0 ? void 0 : variants[variant], mergedProps)) !== null && _b !== void 0 ? _b : {};
+    return (0, react_1.useMemo)(function () {
+        var _a, _b, _c;
+        var baseStyles = (_a = (0, utils_1.runIfFn)(baseStyle, mergedProps)) !== null && _a !== void 0 ? _a : {};
+        var sizeStyles = (_b = (0, utils_1.runIfFn)(sizes === null || sizes === void 0 ? void 0 : sizes[size], mergedProps)) !== null && _b !== void 0 ? _b : {};
+        var variantStyles = (_c = (0, utils_1.runIfFn)(variants === null || variants === void 0 ? void 0 : variants[variant], mergedProps)) !== null && _c !== void 0 ? _c : {};
         var styles = {};
         if (parts.length > 0) {
             parts.forEach(function (part) {
-                var _a, _b;
-                styles[part] = utils_1.merge((_a = sizeStyles[part]) !== null && _a !== void 0 ? _a : {}, (_b = variantStyles[part]) !== null && _b !== void 0 ? _b : {});
+                var _a, _b, _c;
+                styles[part] = (0, utils_1.merge)((_a = baseStyles[part]) !== null && _a !== void 0 ? _a : {}, (_b = sizeStyles[part]) !== null && _b !== void 0 ? _b : {}, (_c = variantStyles[part]) !== null && _c !== void 0 ? _c : {});
             });
         }
         else {
-            styles = utils_1.merge(sizeStyles, variantStyles);
+            styles = (0, utils_1.merge)(baseStyles, sizeStyles, variantStyles);
         }
         return styles;
     }, [colorScheme, size, variant]);
@@ -186,7 +187,7 @@ function useTh(path, defaultValue) {
 exports.useTh = useTh;
 /** Returns the theme object with extensions */
 function useTheme() {
-    return styled_components_2.useTheme();
+    return (0, styled_components_2.useTheme)();
 }
 exports.useTheme = useTheme;
 /** Returns true of current viewport width is larger or equal to provided width */

package/divider/divider.js

@@ -35,18 +35,18 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.DividerBase = styled_components_1.default.hr.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
-exports.Divider = core_1.vui(function (props, ref) {
+exports.DividerBase = styled_components_1.default.hr.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
+exports.Divider = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var _b = core_1.omitThemingProps(props), className = _b.className, isVertical = _b.isVertical, width = _b.width, rest = __rest(_b, ["className", "isVertical", "width"]);
-    var styles = core_1.useStyleConfig('Divider', props);
+    var _b = (0, core_1.omitThemingProps)(props), className = _b.className, isVertical = _b.isVertical, width = _b.width, rest = __rest(_b, ["className", "isVertical", "width"]);
+    var styles = (0, core_1.useStyleConfig)('Divider', props);
     var borderSide = isVertical ? 'Right' : 'Bottom';
     var borderWidth = "border" + borderSide + "Width";
     var height = isVertical ? '100%' : '';
-    var aliasedProps = utils_1.filterUndefined((_a = {},
+    var aliasedProps = (0, utils_1.filterUndefined)((_a = {},
         _a[borderWidth] = width !== null && width !== void 0 ? width : 1,
         _a));
-    return (react_1.default.createElement(exports.DividerBase, __assign({ borderColor: "grey.30", className: utils_1.cs('vui-divider', className), h: height, ref: ref }, styles, aliasedProps, rest)));
+    return (react_1.default.createElement(exports.DividerBase, __assign({ borderColor: "grey.30", className: (0, utils_1.cs)('vui-divider', className), h: height, ref: ref }, styles, aliasedProps, rest)));
 });
 exports.Divider.displayName = 'Divider';
 exports.default = exports.Divider;