@veracity/vui 0.2.1 → 0.2.2

package/avatar/theme.d.ts

@@ -1,12 +1,4 @@
 import { Dict } from '../utils';
-declare function variantOutlined(props: Dict): {
-    borderColor: string;
-    borderWidth: number;
-    hoverBg: string;
-    activeBg: string;
-    bg: string;
-    color: string;
-};
 declare function variantSolid(props: Dict): {
     hoverBg: string;
     activeBg: string;
@@ -46,9 +38,13 @@ declare const _default: {
             h: number;
             iconSize: string;
         };
+        xl: {
+            fontSize: string;
+            h: number;
+            iconSize: string;
+        };
     };
     variants: {
-        outlined: typeof variantOutlined;
         solid: typeof variantSolid;
         subtle: typeof variantSubtle;
     };

package/avatar/theme.js

@@ -1,22 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function variantOutlined(props) {
-    var c = props.colorScheme;
-    var styles = {
-        borderColor: c + ".80",
-        borderWidth: 1,
-        hoverBg: c + ".20",
-        activeBg: c + ".30",
-        bg: 'transparent',
-        color: c + ".80"
-    };
-    // Special cases
-    if (c === 'prussian') {
-        styles.activeBg = 'blue.30';
-        styles.hoverBg = 'blue.20';
-    }
-    return styles;
-}
 function variantSolid(props) {
     var c = props.colorScheme;
     var styles = {
@@ -80,10 +63,14 @@ var sizes = {
         fontSize: 'lg',
         h: 48,
         iconSize: 'lg'
+    },
+    xl: {
+        fontSize: 'lg',
+        h: 64,
+        iconSize: 'lg'
     }
 };
 var variants = {
-    outlined: variantOutlined,
     solid: variantSolid,
     subtle: variantSubtle
 };

package/button/theme.js

@@ -32,6 +32,7 @@ function variantSolid(props) {
     if (c === 'prussian') {
         container.activeBg = 'prussian.60';
         container.hoverBg = 'prussian.70';
+        container.hoverBorderColor = 'prussian.70';
     }
     return { container: container };
 }

package/checkbox/checkbox.js

@@ -77,12 +77,13 @@ exports.CheckboxInput = styled_components_1.default.input(templateObject_1 || (t
 exports.CheckboxBase = styled_components_1.default.label.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\twidth: fit-content;\n\n\t:hover .vui-checkboxControl {\n\t\tcolor: ", ";\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\n\t\t.vui-checkboxControl {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\twidth: fit-content;\n\n\t:hover .vui-checkboxControl {\n\t\tcolor: ", ";\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\n\t\t.vui-checkboxControl {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"])), function (p) { return core_1.th.color(p.controlHoverColor)(p); }, system_1.system);
 exports.CheckboxControl = styled_components_1.default.span.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"], ["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"])), system_1.system);
 exports.Checkbox = (0, core_1.vui)(function (props, ref) {
-    var _a = (0, context_1.useCheckboxGroup)(), groupDefaultValue = _a.defaultValue, checkboxGroupProps = __rest(_a, ["defaultValue"]);
+    var _a;
+    var _b = (_a = (0, context_1.useCheckboxGroup)()) !== null && _a !== void 0 ? _a : {}, groupDefaultValue = _b.defaultValue, checkboxGroupProps = __rest(_b, ["defaultValue"]);
     var mergedProps = __assign(__assign({}, checkboxGroupProps), props);
-    var _b = (0, core_1.omitThemingProps)(mergedProps), checked = _b.checked, children = _b.children, className = _b.className, _c = _b.defaultChecked, defaultChecked = _c === void 0 ? groupDefaultValue !== undefined ? groupDefaultValue.includes(props.value) : undefined : _c, disabled = _b.disabled, _d = _b.icon, iconProp = _d === void 0 ? 'cuiCheckboxUnselected' : _d, _e = _b.iconChecked, iconChecked = _e === void 0 ? 'cuiCheckboxSelected' : _e, _f = _b.iconIndeterminate, iconIndeterminate = _f === void 0 ? 'cuiCheckboxIndeterminate' : _f, id = _b.id, inputProps = _b.inputProps, inputRef = _b.inputRef, isIndeterminate = _b.isIndeterminate, label = _b.label, name = _b.name, onChange = _b.onChange, required = _b.required, value = _b.value, rest = __rest(_b, ["checked", "children", "className", "defaultChecked", "disabled", "icon", "iconChecked", "iconIndeterminate", "id", "inputProps", "inputRef", "isIndeterminate", "label", "name", "onChange", "required", "value"]);
-    var _g = __read((0, react_1.useState)(defaultChecked), 2), isChecked = _g[0], setIsChecked = _g[1];
+    var _c = (0, core_1.omitThemingProps)(mergedProps), checked = _c.checked, children = _c.children, className = _c.className, _d = _c.defaultChecked, defaultChecked = _d === void 0 ? groupDefaultValue !== undefined ? groupDefaultValue.includes(props.value) : undefined : _d, disabled = _c.disabled, _e = _c.icon, iconProp = _e === void 0 ? 'cuiCheckboxUnselected' : _e, _f = _c.iconChecked, iconChecked = _f === void 0 ? 'cuiCheckboxSelected' : _f, _g = _c.iconIndeterminate, iconIndeterminate = _g === void 0 ? 'cuiCheckboxIndeterminate' : _g, id = _c.id, inputProps = _c.inputProps, inputRef = _c.inputRef, isIndeterminate = _c.isIndeterminate, label = _c.label, name = _c.name, onChange = _c.onChange, required = _c.required, value = _c.value, rest = __rest(_c, ["checked", "children", "className", "defaultChecked", "disabled", "icon", "iconChecked", "iconIndeterminate", "id", "inputProps", "inputRef", "isIndeterminate", "label", "name", "onChange", "required", "value"]);
+    var _h = __read((0, react_1.useState)(defaultChecked), 2), isChecked = _h[0], setIsChecked = _h[1];
     var styles = (0, core_1.useStyleConfig)('Checkbox', mergedProps);
-    var _h = styles.control, controlColor = _h.color, hoverColor = _h.hoverColor, controlStyles = __rest(_h, ["color", "hoverColor"]);
+    var _j = styles.control, controlColor = _j.color, hoverColor = _j.hoverColor, controlStyles = __rest(_j, ["color", "hoverColor"]);
     var isFilled = isChecked || isIndeterminate;
     var icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp;
     var controlMr = children || label ? 1 : 0;

package/checkbox/checkbox.types.d.ts

@@ -1,8 +1,8 @@
 import { HTMLAttributes } from 'react';
-import { ChangeEventHandler, FocusEventHandler } from '../core';
 import { IconProp } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
+import { ChangeEventHandler, FocusEventHandler } from '../utils';
 export interface CheckboxProps extends SystemProps, ThemingProps<'Checkbox'> {
     checked?: boolean;
     colorScheme?: 'blue' | 'prussian';

package/checkbox/checkboxGroup.types.d.ts

@@ -1,6 +1,6 @@
-import { ChangeEventHandler, FocusEventHandler } from '../core';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
+import { ChangeEventHandler, FocusEventHandler } from '../utils';
 export interface CheckboxGroupProps extends SystemProps, ThemingProps<'Checkbox'> {
     colorScheme?: 'blue' | 'prussian';
     disabled?: boolean;

package/core/globalStyle.js

@@ -34,15 +34,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var styled_components_1 = require("styled-components");
 var foundations_1 = __importDefault(require("../theme/foundations"));
 var styles_1 = require("../styles");
 var utils_1 = require("../utils");
-exports.default = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n\n\t:root {\n\t\t", "\n\n\t\t--vui-colors-disabled-bg: var(--vui-colors-grey-10);\n\t\t--vui-colors-disabled-border: var(--vui-colors-grey-50);\n\t\t--vui-colors-disabled-font: var(--vui-colors-grey-50);\n\t}\n\n\t* {\n\t\t--x-ring-color: var(--vui-colors-blue-50);\n\t\t--x-shadow: 0 0 0 0 transparent;\n\t}\n\n\t", "\n\n\t@keyframes vui-bounce {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeDown {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeIn {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeLeft {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeOut {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeRight {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeUp {\n\t\t", "\n\t}\n\n\t@keyframes vui-pulse {\n\t\t", "\n\t}\n\n\t@keyframes vui-spin {\n\t\t", "\n\t}\n"], ["\n\t", "\n\n\t:root {\n\t\t", "\n\n\t\t--vui-colors-disabled-bg: var(--vui-colors-grey-10);\n\t\t--vui-colors-disabled-border: var(--vui-colors-grey-50);\n\t\t--vui-colors-disabled-font: var(--vui-colors-grey-50);\n\t}\n\n\t* {\n\t\t--x-ring-color: var(--vui-colors-blue-50);\n\t\t--x-shadow: 0 0 0 0 transparent;\n\t}\n\n\t", "\n\n\t@keyframes vui-bounce {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeDown {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeIn {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeLeft {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeOut {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeRight {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeUp {\n\t\t", "\n\t}\n\n\t@keyframes vui-pulse {\n\t\t", "\n\t}\n\n\t@keyframes vui-spin {\n\t\t", "\n\t}\n"
+var styled_1 = require("./styled");
+exports.default = (0, styled_1.createGlobalStyle)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t", "\n\n\t:root {\n\t\t", "\n\n\t\t--vui-colors-disabled-bg: var(--vui-colors-grey-10);\n\t\t--vui-colors-disabled-border: var(--vui-colors-grey-50);\n\t\t--vui-colors-disabled-font: var(--vui-colors-grey-50);\n\t}\n\n\t* {\n\t\t--x-ring-color: var(--vui-colors-blue-50);\n\t\t--x-shadow: 0 0 0 0 transparent;\n\t}\n\n\t", "\n\n\t@keyframes vui-bounce {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeDown {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeIn {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeLeft {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeOut {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeRight {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeUp {\n\t\t", "\n\t}\n\n\t@keyframes vui-pulse {\n\t\t", "\n\t}\n\n\t@keyframes vui-spin {\n\t\t", "\n\t}\n"], ["\n\t", "\n\n\t:root {\n\t\t", "\n\n\t\t--vui-colors-disabled-bg: var(--vui-colors-grey-10);\n\t\t--vui-colors-disabled-border: var(--vui-colors-grey-50);\n\t\t--vui-colors-disabled-font: var(--vui-colors-grey-50);\n\t}\n\n\t* {\n\t\t--x-ring-color: var(--vui-colors-blue-50);\n\t\t--x-shadow: 0 0 0 0 transparent;\n\t}\n\n\t", "\n\n\t@keyframes vui-bounce {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeDown {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeIn {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeLeft {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeOut {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeRight {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeUp {\n\t\t", "\n\t}\n\n\t@keyframes vui-pulse {\n\t\t", "\n\t}\n\n\t@keyframes vui-spin {\n\t\t", "\n\t}\n"
     /** Recursively maps through all theme styles and generates a set of CSS properties */
 ])), styles_1.fontFaces, generateCSSVariables, function (p) {
-    return p.globalStyle &&
-        "\n\t\tbody {\n\t\t\tcolor: var(--vui-colors-prussian-80);\n\t\t\tfont-family: var(--vui-fonts-avenir);\n\t\t\tfont-size: var(--vui-fontSizes-md);\n\t\t}\n\t";
+    return p.globalStyle && (0, styled_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\t\tbody {\n\t\t\t\tcolor: prussian.80;\n\t\t\t\tfont-family: avenir;\n\t\t\t\tfont-size: md;\n\t\t\t}\n\t\t"], ["\n\t\t\tbody {\n\t\t\t\tcolor: prussian.80;\n\t\t\t\tfont-family: avenir;\n\t\t\t\tfont-size: md;\n\t\t\t}\n\t\t"])));
 }, styles_1.bounce, styles_1.fadeDown, styles_1.fadeIn, styles_1.fadeLeft, styles_1.fadeOut, styles_1.fadeRight, styles_1.fadeUp, styles_1.pulse, styles_1.spin);
 /** Recursively maps through all theme styles and generates a set of CSS properties */
 function generateCSSVariables() {
@@ -54,7 +53,7 @@ function generateCSSVariables() {
             return (str += computeStyle(name + "-" + key, value));
         }, '');
     }
-    var animations = foundations_1.default.animations, styles = __rest(foundations_1.default, ["animations"]); // eslint-disable-line @typescript-eslint/no-unused-vars
+    var animations = foundations_1.default.animations, transformers = foundations_1.default.transformers, styles = __rest(foundations_1.default, ["animations", "transformers"]);
     return computeStyle('--vui', styles);
 }
-var templateObject_1;
+var templateObject_1, templateObject_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 = (0, 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

@@ -49,18 +49,53 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     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) {
+function createBaseStyled(css, generator) {
     var config = generator ? (0, utils_1.forwardPropConfig)(generator) : {};
-    var styled = (function (component) {
-        var baseStyled = config ? (0, styled_components_1.default)(component).withConfig(config) : (0, styled_components_1.default)(component);
-        return getCreateStyle(baseStyled, styled_components_1.css, 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))
+        ]);
+    });
+}
+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);
     });
-    Object.keys(styled_components_1.default).forEach(function (key) {
+}
+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;
 }
@@ -80,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';