@veracity/vui 0.0.9 → 0.0.10

package/avatar/avatar.d.ts

@@ -1,6 +1,5 @@
-import { AvatarProps, AvatarStyleProps } from './avatar.types';
-export declare const AvatarBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, AvatarStyleProps & {
-    color?: any;
-}, never>;
+import { AvatarProps } from './avatar.types';
+import { SystemProps } from '../system';
+export declare const AvatarBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const Avatar: import("../core").VuiComponent<"span", AvatarProps>;
 export default Avatar;

package/avatar/avatar.js

@@ -51,10 +51,10 @@ var react_1 = __importDefault(require("react"));
 var styled_components_2 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
+var system_1 = require("../system");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.interactivity, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
 var AvatarImage = styled_components_2.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\theight: 100%;\n\twidth: 100%;\n\n\t", "\n"], ["\n\theight: 100%;\n\twidth: 100%;\n\n\t", "\n"])), styled_components_1.borders);
-exports.AvatarBase = styled_components_2.default.span.withConfig(core_1.forwardPropConfig(generator))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\toutline: none;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\toutline: none;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"])), generator);
+exports.AvatarBase = styled_components_2.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\toutline: none;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\toutline: none;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"])), system_1.system);
 function defaultGetInitials(name) {
     if (name === void 0) { name = ''; }
     var _a = __read(name.split(' '), 2), _b = _a[0], first = _b === void 0 ? '' : _b, _c = _a[1], last = _c === void 0 ? '' : _c;

package/avatar/avatar.types.d.ts

@@ -1,9 +1,7 @@
 import { IconProp } from '../icon';
-import { BackgroundColorProps, BordersProps, InteractivityProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface AvatarImageStyleProps extends BordersProps {
-}
-export interface AvatarProps extends AvatarStyleProps, ThemingProps<'Avatar'> {
+export interface AvatarProps extends SystemProps, ThemingProps<'Avatar'> {
     colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
     getInitials?: (name: string) => string;
     icon?: IconProp;
@@ -12,5 +10,3 @@ export interface AvatarProps extends AvatarStyleProps, ThemingProps<'Avatar'> {
     name?: string;
     src?: string;
 }
-export interface AvatarStyleProps extends BackgroundColorProps, BordersProps, InteractivityProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
-}

package/box/box.d.ts

@@ -1,6 +1,5 @@
-import { BoxProps, BoxStyleProps } from './box.types';
-export declare const BoxBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, BoxStyleProps & {
-    color?: any;
-}, never>;
+import { BoxProps } from './box.types';
+import { SystemProps } from '../system';
+export declare const BoxBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const Box: import("../core").VuiComponent<"div", BoxProps>;
 export default Box;

package/box/box.js

@@ -30,13 +30,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Box = exports.BoxBase = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
+var system_1 = require("../system");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.color, styled_components_1.effects, styled_components_1.flexboxes, styled_components_1.interactivity, styled_components_1.layout, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
-exports.BoxBase = styled_components_2.default.div.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\n\t", "\n"])), generator);
+exports.BoxBase = styled_components_1.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\n\t", "\n"])), system_1.system);
 exports.Box = core_1.vui(function (props, ref) {
     var _a = core_1.omitThemingProps(props), align = _a.align, center = _a.center, centerH = _a.centerH, centerV = _a.centerV, className = _a.className, column = _a.column, direction = _a.direction, hoverShadow = _a.hoverShadow, justify = _a.justify, radius = _a.radius, shadow = _a.shadow, wrap = _a.wrap, rest = __rest(_a, ["align", "center", "centerH", "centerV", "className", "column", "direction", "hoverShadow", "justify", "radius", "shadow", "wrap"]);
     var styles = core_1.useStyleConfig('Box', props);

package/box/box.types.d.ts

@@ -1,6 +1,6 @@
-import { BackgroundColorProps, BordersProps, ColorProps, EffectsProps, FlexboxesProps, InteractivityProps, LayoutProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { BordersProps, EffectsProps, FlexboxesProps, SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface BoxProps extends BoxStyleProps, ThemingProps<'Box'> {
+export interface BoxProps extends SystemProps, ThemingProps<'Box'> {
     align?: FlexboxesProps['alignItems'];
     center?: boolean;
     centerH?: boolean;
@@ -13,5 +13,3 @@ export interface BoxProps extends BoxStyleProps, ThemingProps<'Box'> {
     shadow?: EffectsProps['boxShadow'];
     wrap?: boolean;
 }
-export interface BoxStyleProps extends BackgroundColorProps, BordersProps, ColorProps, EffectsProps, FlexboxesProps, InteractivityProps, LayoutProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
-}

package/button/button.d.ts

@@ -1,6 +1,5 @@
-import { ButtonProps, ButtonStyleProps } from './button.types';
-export declare const ButtonBase: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, ButtonStyleProps & {
-    color?: any;
-}, never>;
+import { ButtonProps } from './button.types';
+import { SystemProps } from '../system';
+export declare const ButtonBase: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const Button: import("../core").VuiComponent<"button", ButtonProps>;
 export default Button;

package/button/button.js

@@ -30,17 +30,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = exports.ButtonBase = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
+var system_1 = require("../system");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.color, styled_components_1.effects, styled_components_1.flexboxes, styled_components_1.fontSize, styled_components_1.fontWeight, styled_components_1.pointerEvents, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
-var ContentWrapper = styled_components_2.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tvisibility: hidden;\n"], ["\n\tvisibility: hidden;\n"])));
-var LoadingWrapper = styled_components_2.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tbottom: 0;\n\tdisplay: flex;\n\tleft: 0;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n"], ["\n\tbottom: 0;\n\tdisplay: flex;\n\tleft: 0;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n"])));
-exports.ButtonBase = styled_components_2.default.button.withConfig(core_1.forwardPropConfig(generator))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\tposition: relative;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t\tz-index: 1;\n\t}\n\n\t", "\n\n\t&:disabled {\n\t\t/* Specified here to avoid conflict with active/hover props */\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\tposition: relative;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t\tz-index: 1;\n\t}\n\n\t", "\n\n\t&:disabled {\n\t\t/* Specified here to avoid conflict with active/hover props */\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n"])), generator);
+var ContentWrapper = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tvisibility: hidden;\n"], ["\n\tvisibility: hidden;\n"])));
+var LoadingWrapper = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tbottom: 0;\n\tdisplay: flex;\n\tleft: 0;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n"], ["\n\tbottom: 0;\n\tdisplay: flex;\n\tleft: 0;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n"])));
+exports.ButtonBase = styled_components_1.default.button.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\tposition: relative;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t\tz-index: 1;\n\t}\n\n\t", "\n\n\t&:disabled {\n\t\t/* Specified here to avoid conflict with active/hover props */\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\tposition: relative;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t\tz-index: 1;\n\t}\n\n\t", "\n\n\t&:disabled {\n\t\t/* Specified here to avoid conflict with active/hover props */\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n"])), system_1.system);
 exports.Button = core_1.vui(function (props, ref) {
     var _a;
     var buttonGroupProps = context_1.useButtonGroup();

package/button/button.types.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { IconProp } from '../icon';
-import { BackgroundColorProps, BordersProps, ColorProps, EffectsProps, FontSizeProps, FontWeightProps, PointerEventsProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
+import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface ButtonProps extends ButtonStyleProps, ThemingProps<'Button'> {
+export interface ButtonProps extends SystemProps, ThemingProps<'Button'> {
     colorScheme?: 'blue' | 'green' | 'grey' | 'pink' | 'prussian' | 'red';
     icon?: IconProp;
     iconLeft?: IconProp;
@@ -16,5 +16,3 @@ export interface ButtonProps extends ButtonStyleProps, ThemingProps<'Button'> {
     itemRight?: React.ReactNode;
     text?: number | string;
 }
-export interface ButtonStyleProps extends BackgroundColorProps, BordersProps, ColorProps, EffectsProps, FontSizeProps, FontWeightProps, PointerEventsProps, SizingProps, SpaceProps, TransitionsProps {
-}

package/button/buttonGroup.d.ts

@@ -1,4 +1,5 @@
-import { ButtonGroupProps, ButtonGroupStyleProps } from './buttonGroup.types';
-export declare const ButtonGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ButtonGroupStyleProps, never>;
+import { ButtonGroupProps } from './buttonGroup.types';
+import { SystemProps } from '../system';
+export declare const ButtonGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const ButtonGroup: import("../core").VuiComponent<"div", ButtonGroupProps>;
 export default ButtonGroup;

package/button/buttonGroup.js

@@ -49,14 +49,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonGroup = exports.ButtonGroupBase = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importStar(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var context_1 = require("./context");
 var core_1 = require("../core");
+var system_1 = require("../system");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space);
-exports.ButtonGroupBase = styled_components_2.default.div.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\n\t// First Button\n\t> *:first-of-type:not(:last-of-type) {\n\t\tborder-bottom-right-radius: 0;\n\t\tborder-right-width: 1px;\n\t\tborder-top-right-radius: 0;\n\t}\n\n\t// Middle Buttons\n\t> *:not(:first-of-type):not(:last-of-type) {\n\t\tborder-left-width: 0px;\n\t\tborder-radius: 0;\n\t\tborder-right-width: 1px;\n\t}\n\n\t// Last Button\n\t> *:not(:first-of-type):last-of-type {\n\t\tborder-bottom-left-radius: 0;\n\t\tborder-left-width: 0px;\n\t\tborder-top-left-radius: 0;\n\t}\n\n\t", "\n"], ["\n\tdisplay: flex;\n\n\t// First Button\n\t> *:first-of-type:not(:last-of-type) {\n\t\tborder-bottom-right-radius: 0;\n\t\tborder-right-width: 1px;\n\t\tborder-top-right-radius: 0;\n\t}\n\n\t// Middle Buttons\n\t> *:not(:first-of-type):not(:last-of-type) {\n\t\tborder-left-width: 0px;\n\t\tborder-radius: 0;\n\t\tborder-right-width: 1px;\n\t}\n\n\t// Last Button\n\t> *:not(:first-of-type):last-of-type {\n\t\tborder-bottom-left-radius: 0;\n\t\tborder-left-width: 0px;\n\t\tborder-top-left-radius: 0;\n\t}\n\n\t", "\n"])), generator);
+exports.ButtonGroupBase = styled_components_1.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\n\t// First Button\n\t> *:first-of-type:not(:last-of-type) {\n\t\tborder-bottom-right-radius: 0;\n\t\tborder-right-width: 1px;\n\t\tborder-top-right-radius: 0;\n\t}\n\n\t// Middle Buttons\n\t> *:not(:first-of-type):not(:last-of-type) {\n\t\tborder-left-width: 0px;\n\t\tborder-radius: 0;\n\t\tborder-right-width: 1px;\n\t}\n\n\t// Last Button\n\t> *:not(:first-of-type):last-of-type {\n\t\tborder-bottom-left-radius: 0;\n\t\tborder-left-width: 0px;\n\t\tborder-top-left-radius: 0;\n\t}\n\n\t", "\n"], ["\n\tdisplay: flex;\n\n\t// First Button\n\t> *:first-of-type:not(:last-of-type) {\n\t\tborder-bottom-right-radius: 0;\n\t\tborder-right-width: 1px;\n\t\tborder-top-right-radius: 0;\n\t}\n\n\t// Middle Buttons\n\t> *:not(:first-of-type):not(:last-of-type) {\n\t\tborder-left-width: 0px;\n\t\tborder-radius: 0;\n\t\tborder-right-width: 1px;\n\t}\n\n\t// Last Button\n\t> *:not(:first-of-type):last-of-type {\n\t\tborder-bottom-left-radius: 0;\n\t\tborder-left-width: 0px;\n\t\tborder-top-left-radius: 0;\n\t}\n\n\t", "\n"])), system_1.system);
 exports.ButtonGroup = core_1.vui(function (props, ref) {
     var className = props.className, colorScheme = props.colorScheme, disabled = props.disabled, size = props.size, variant = props.variant, rest = __rest(props, ["className", "colorScheme", "disabled", "size", "variant"]);
     var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, disabled: disabled, size: size, variant: variant }); }, [

package/button/buttonGroup.types.d.ts

@@ -1,8 +1,6 @@
-import { FlexboxesProps, SizingProps, SpaceProps } from '../system';
+import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface ButtonGroupProps extends ButtonGroupStyleProps, ThemingProps<'Button'> {
+export interface ButtonGroupProps extends SystemProps, ThemingProps<'Button'> {
     colorScheme?: 'blue' | 'green' | 'pink' | 'prussian' | 'red';
     disabled?: boolean;
 }
-export interface ButtonGroupStyleProps extends FlexboxesProps, SizingProps, SpaceProps {
-}

package/button/theme.d.ts

@@ -14,6 +14,7 @@ declare function variantSubtle(props: Dict): {
     color: string;
 };
 declare function variantSolid(props: Dict): {
+    borderColor: string;
     hoverBg: string;
     activeBg: string;
     bg: string;

package/button/theme.js

@@ -33,6 +33,7 @@ function variantSubtle(props) {
 function variantSolid(props) {
     var c = props.colorScheme;
     var styles = {
+        borderColor: c + ".100",
         hoverBg: c + ".90",
         activeBg: c + ".100",
         bg: c + ".80",

package/checkbox/checkbox.d.ts

@@ -1,6 +1,7 @@
-import { CheckboxControlStyleProps, CheckboxProps, CheckboxStyleProps } from './checkbox.types';
+import { CheckboxProps, CheckboxStyleProps } from './checkbox.types';
+import { SystemProps } from '../system';
 export declare const CheckboxInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
 export declare const CheckboxBase: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, CheckboxStyleProps, never>;
-export declare const CheckboxControl: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, CheckboxControlStyleProps, never>;
+export declare const CheckboxControl: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const Checkbox: import("../core").VuiComponent<"span", CheckboxProps>;
 export default Checkbox;

package/checkbox/checkbox.js

@@ -65,19 +65,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = exports.CheckboxControl = exports.CheckboxBase = exports.CheckboxInput = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importStar(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
+var system_1 = require("../system");
 var t_1 = __importDefault(require("../t"));
 var utils_1 = require("../utils");
-var checkboxGenerator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.color, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
-var controlGenerator = styled_components_1.compose(styled_components_1.borders, styled_components_1.backgroundColor, styled_components_1.color, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
-exports.CheckboxInput = styled_components_2.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcursor: inherit;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 1;\n"], ["\n\tcursor: inherit;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 1;\n"])));
-exports.CheckboxBase = styled_components_2.default.label.withConfig(core_1.forwardPropConfig(checkboxGenerator))(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('colors', p.controlHoverColor)(p); }, checkboxGenerator);
-exports.CheckboxControl = styled_components_2.default.span.withConfig(core_1.forwardPropConfig(controlGenerator))(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"])), controlGenerator);
+exports.CheckboxInput = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcursor: inherit;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 1;\n"], ["\n\tcursor: inherit;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 1;\n"])));
+exports.CheckboxBase = styled_components_1.default.label.withConfig(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(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 = core_1.vui(function (props, ref) {
     var checkboxGroupProps = context_1.useCheckboxGroup();
     var mergedProps = __assign(__assign({}, checkboxGroupProps), props);

package/checkbox/checkbox.types.d.ts

@@ -1,9 +1,9 @@
 import { HTMLAttributes } from 'react';
 import { ChangeEventHandler, FocusEventHandler } from '../core';
 import { IconProp } from '../icon';
-import { BackgroundColorProps, BordersProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
+import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface CheckboxProps extends CheckboxStyleProps, ThemingProps<'Checkbox'> {
+export interface CheckboxProps extends SystemProps, ThemingProps<'Checkbox'> {
     checked?: boolean;
     colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
     disabled?: boolean;
@@ -21,8 +21,6 @@ export interface CheckboxProps extends CheckboxStyleProps, ThemingProps<'Checkbo
     required?: boolean;
     value?: number | string;
 }
-export interface CheckboxControlStyleProps extends BackgroundColorProps, BordersProps, SizingProps, SpaceProps, TransitionsProps {
-}
-export interface CheckboxStyleProps extends BackgroundColorProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps {
-    controlHoverColor?: string;
+export interface CheckboxStyleProps extends SystemProps {
+    controlHoverColor: string;
 }

package/checkbox/checkboxGroup.d.ts

@@ -1,4 +1,5 @@
-import { CheckboxGroupProps, CheckboxGroupStyleProps } from './checkboxGroup.types';
-export declare const CheckboxGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, CheckboxGroupStyleProps, never>;
+import { CheckboxGroupProps } from './checkboxGroup.types';
+import { SystemProps } from '../system';
+export declare const CheckboxGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const CheckboxGroup: import("../core").VuiComponent<"div", CheckboxGroupProps>;
 export default CheckboxGroup;

package/checkbox/checkboxGroup.js

@@ -49,14 +49,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxGroup = exports.CheckboxGroupBase = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importStar(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var context_1 = require("./context");
 var core_1 = require("../core");
+var system_1 = require("../system");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space);
-exports.CheckboxGroupBase = styled_components_2.default.div.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"])), generator);
+exports.CheckboxGroupBase = styled_components_1.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"])), system_1.system);
 exports.CheckboxGroup = core_1.vui(function (props, ref) {
     var className = props.className, colorScheme = props.colorScheme, disabled = props.disabled, name = props.name, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, row = props.row, size = props.size, variant = props.variant, rest = __rest(props, ["className", "colorScheme", "disabled", "name", "onBlur", "onChange", "onFocus", "row", "size", "variant"]);
     var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, disabled: disabled, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, size: size, variant: variant }); }, [colorScheme, disabled, name, onBlur, onChange, onFocus, size, variant]);

package/checkbox/checkboxGroup.types.d.ts

@@ -1,7 +1,7 @@
 import { ChangeEventHandler, FocusEventHandler } from '../core';
-import { FlexboxesProps, SizingProps, SpaceProps } from '../system';
+import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface CheckboxGroupProps extends CheckboxGroupStyleProps, ThemingProps<'Checkbox'> {
+export interface CheckboxGroupProps extends SystemProps, ThemingProps<'Checkbox'> {
     colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
     disabled?: boolean;
     name?: string;
@@ -10,5 +10,3 @@ export interface CheckboxGroupProps extends CheckboxGroupStyleProps, ThemingProp
     onFocus?: FocusEventHandler;
     row?: boolean;
 }
-export interface CheckboxGroupStyleProps extends FlexboxesProps, SizingProps, SpaceProps {
-}

package/divider/divider.d.ts

@@ -1,4 +1,5 @@
-import { DividerProps, DividerStyleProps } from './divider.types';
-export declare const DividerBase: import("styled-components").StyledComponent<"hr", import("styled-components").DefaultTheme, DividerStyleProps, never>;
+import { DividerProps } from './divider.types';
+import { SystemProps } from '../system';
+export declare const DividerBase: import("styled-components").StyledComponent<"hr", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const Divider: import("../core").VuiComponent<"hr", DividerProps>;
 export default Divider;

package/divider/divider.js

@@ -30,13 +30,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Divider = exports.DividerBase = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
+var system_1 = require("../system");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.borders, styled_components_1.sizing, styled_components_1.space);
-exports.DividerBase = styled_components_2.default.hr.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
+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) {
     var _a;
     var _b = core_1.omitThemingProps(props), className = _b.className, isVertical = _b.isVertical, width = _b.width, rest = __rest(_b, ["className", "isVertical", "width"]);

package/divider/divider.types.d.ts

@@ -1,9 +1,7 @@
-import { BordersProps, SizingProps, SpaceProps } from '../system';
+import { BordersProps, SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface DividerProps extends DividerStyleProps, ThemingProps<'Divider'> {
+export interface DividerProps extends SystemProps, ThemingProps<'Divider'> {
     className?: string;
     isVertical?: boolean;
     width?: BordersProps['borderWidth'];
 }
-export interface DividerStyleProps extends BordersProps, SizingProps, SpaceProps {
-}

package/heading/heading.d.ts

@@ -1,6 +1,5 @@
-import { HeadingProps, HeadingStyleProps } from './heading.types';
-export declare const HeadingBase: import("styled-components").StyledComponent<"h2", import("styled-components").DefaultTheme, HeadingStyleProps & {
-    color?: any;
-}, never>;
+import { HeadingProps } from './heading.types';
+import { SystemProps } from '../system';
+export declare const HeadingBase: import("styled-components").StyledComponent<"h2", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const Heading: import("../core").VuiComponent<"h2", HeadingProps>;
 export default Heading;

package/heading/heading.js

@@ -30,14 +30,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Heading = exports.HeadingBase = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(system_1.isTruncated, system_1.maxLines, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
-exports.HeadingBase = styled_components_2.default.h2.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
+exports.HeadingBase = styled_components_1.default.h2.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
 exports.Heading = core_1.vui(function (props, ref) {
     var _a = core_1.omitThemingProps(props), align = _a.align, casing = _a.casing, children = _a.children, className = _a.className, decoration = _a.decoration, text = _a.text, weight = _a.weight, rest = __rest(_a, ["align", "casing", "children", "className", "decoration", "text", "weight"]);
     var styles = core_1.useStyleConfig('Heading', props);

package/heading/heading.types.d.ts

@@ -1,11 +1,9 @@
-import { IsTruncatedProps, MaxLinesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface HeadingProps extends HeadingStyleProps, ThemingProps<'Heading'> {
+export interface HeadingProps extends SystemProps, ThemingProps<'Heading'> {
     align?: TypographyProps['textAlign'];
     casing?: TypographyProps['textTransform'];
     decoration?: TypographyProps['textDecoration'];
     text?: number | string;
     weight?: TypographyProps['fontWeight'];
 }
-export interface HeadingStyleProps extends IsTruncatedProps, MaxLinesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
-}

package/icons/baseIcons/fal/falSignIn.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fal/falSignIn.js

@@ -0,0 +1,7 @@
+"use strict";
+/* eslint-disable */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    details: [512, 512, [], '', 'M184 83.5l164.5 164c4.7 4.7 4.7 12.3 0 17L184 428.5c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17l132-131.4H12c-6.6 0-12-5.4-12-12v-10c0-6.6 5.4-12 12-12h279.9L160 107.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.6-4.7 12.2-4.7 16.9 0zM512 400V112c0-26.5-21.5-48-48-48H332c-6.6 0-12 5.4-12 12v8c0 6.6 5.4 12 12 12h132c8.8 0 16 7.2 16 16v288c0 8.8-7.2 16-16 16H332c-6.6 0-12 5.4-12 12v8c0 6.6 5.4 12 12 12h132c26.5 0 48-21.5 48-48z'],
+    name: 'falSignIn'
+};

package/icons/baseIcons/types.d.ts

@@ -1 +1 @@
-export declare type BaseIcon = 'cuiCheckboxIndeterminate' | 'cuiCheckboxSelected' | 'cuiCheckboxUnselected' | 'cuiRadioSelected' | 'cuiRadioUnselected' | 'culCovid' | 'culDeepSearch' | 'culDotsMenu' | 'culGlobePlus' | 'culListDense' | 'culMapMarkerStar' | 'culPlusThin' | 'culScreenshot' | 'culScreenshotAlt' | 'culShortcut' | 'culTimesThin' | 'culTransformer' | 'culUserTransfer' | 'culVessel' | 'culVesselGroup' | 'cusCheckboxSelected' | 'cusDotFull' | 'cusDotFullAlt' | 'cusDotsMenu' | 'cusRadio' | 'cusSquareMinus' | 'cusTransformer' | 'cusVessel' | 'fabApplePay' | 'fabBluetooth' | 'fabBtc' | 'fabCcAmazonPay' | 'fabCcAmex' | 'fabCcApplePay' | 'fabCcDinersClub' | 'fabCcMastercard' | 'fabCcPaypal' | 'fabCcVisa' | 'fabDhl' | 'fabEbay' | 'fabFacebook' | 'fabFedex' | 'fabFirefox' | 'fabGoogle' | 'fabGoogleDrive' | 'fabLinkedinIn' | 'fabMedium' | 'fabOsi' | 'fabSlack' | 'fabTwitter' | 'fabUps' | 'falAddressBook' | 'falAddressCard' | 'falAnalytics' | 'falAngleDoubleDown' | 'falAngleDoubleLeft' | 'falAngleDoubleRight' | 'falAngleDoubleUp' | 'falAngleDown' | 'falAngleLeft' | 'falAngleRight' | 'falAngleUp' | 'falArrowAltDown' | 'falArrowAltLeft' | 'falArrowAltRight' | 'falArrowAltUp' | 'falArrowCircleDown' | 'falArrowCircleLeft' | 'falArrowCircleRight' | 'falArrowCircleUp' | 'falArrowDown' | 'falArrowFromBottom' | 'falArrowFromLeft' | 'falArrowFromRight' | 'falArrowFromTop' | 'falArrowLeft' | 'falArrowRight' | 'falArrowToBottom' | 'falArrowToLeft' | 'falArrowToRight' | 'falArrowToTop' | 'falArrowUp' | 'falArrows' | 'falAward' | 'falBan' | 'falBell' | 'falBookOpen' | 'falBroadcastTower' | 'falBuilding' | 'falBullseye' | 'falCalendar' | 'falCalendarAlt' | 'falCamera' | 'falCaretDown' | 'falCaretLeft' | 'falCaretRight' | 'falCaretUp' | 'falCauldron' | 'falChartArea' | 'falChartBar' | 'falChartLineDown' | 'falChartLine' | 'falChartNetwork' | 'falChartPie' | 'falChartPieAlt' | 'falChartScatter' | 'falCheckCircle' | 'falCheckSquare' | 'falCheck' | 'falChevronCircleDown' | 'falChevronCircleLeft' | 'falChevronCircleRight' | 'falChevronCircleUp' | 'falChevronDoubleDown' | 'falChevronDoubleLeft' | 'falChevronDoubleRight' | 'falChevronDoubleUp' | 'falChevronDown' | 'falChevronLeft' | 'falChevronRight' | 'falChevronUp' | 'falCircle' | 'falCloudShowersHeavy' | 'falCloudSnow' | 'falCloudSunRain' | 'falCloudSun' | 'falCloudUpload' | 'falCloud' | 'falCode' | 'falCog' | 'falCogs' | 'falComment' | 'falCommentAlt' | 'falCompressAlt' | 'falCopy' | 'falCreditCard' | 'falDatabase' | 'falDotCircle' | 'falDownload' | 'falEdit' | 'falEllipsisH' | 'falEllipsisV' | 'falEnvelope' | 'falExchange' | 'falExclamationCircle' | 'falExclamationTriangle' | 'falExpandAlt' | 'falExternalLink' | 'falEye' | 'falEyeSlash' | 'falFile' | 'falFilePdf' | 'falFileAlt' | 'falFileArchive' | 'falFileAudio' | 'falFileCertificate' | 'falFileChartLine' | 'falFileChartPie' | 'falFileCheck' | 'falFileCode' | 'falFileCsv' | 'falFileEdit' | 'falFileExcel' | 'falFileImage' | 'falFilePlus' | 'falFilePowerpoint' | 'falFileSpreadsheet' | 'falFileVideo' | 'falFileWord' | 'falFilter' | 'falFlag' | 'falFolderOpen' | 'falFolderPlus' | 'falFolder' | 'falFolders' | 'falGlassesAlt' | 'falGlobe' | 'falHome' | 'falHourglass' | 'falImage' | 'falInfoCircle' | 'falKey' | 'falLayerPlus' | 'falLink' | 'falList' | 'falLockAlt' | 'falLongArrowDown' | 'falLongArrowLeft' | 'falLongArrowRight' | 'falLongArrowUp' | 'falMapMarked' | 'falMapMarkedAlt' | 'falMapMarkerAlt' | 'falMapMarkerAltSlash' | 'falMapMarkerCheck' | 'falMapMarkerExclamation' | 'falMapMarker' | 'falMap' | 'falMinus' | 'falPause' | 'falPauseCircle' | 'falPen' | 'falPlay' | 'falPlayCircle' | 'falPlug' | 'falPlusSquare' | 'falPlus' | 'falPlusCircle' | 'falPrint' | 'falPuzzlePiece' | 'falReceipt' | 'falRedo' | 'falSave' | 'falSearchPlus' | 'falSearch' | 'falServer' | 'falShareAll' | 'falShare' | 'falShareAlt' | 'falShieldAlt' | 'falShieldCheck' | 'falShip' | 'falShoppingBasket' | 'falSignInAlt' | 'falSignOut' | 'falSignOutAlt' | 'falSlidersV' | 'falSnowBlowing' | 'falSnowflake' | 'falSolarPanel' | 'falSort' | 'falSpinner' | 'falSquare' | 'falStepForward' | 'falStop' | 'falStopCircle' | 'falStopwatch' | 'falSuitcase' | 'falSun' | 'falSync' | 'falTachometer' | 'falTemperatureHigh' | 'falThLarge' | 'falThList' | 'falTh' | 'falTimesCircle' | 'falTimes' | 'falToggleOff' | 'falToggleOn' | 'falTrashAlt' | 'falUnlockAlt' | 'falUserChart' | 'falUserCircle' | 'falUserCog' | 'falUserEdit' | 'falUserFriends' | 'falUserPlus' | 'falUserShield' | 'falUserTimes' | 'falUser' | 'falUsersClass' | 'falUsers' | 'falWater' | 'falWindTurbine' | 'falWind' | 'falWrench' | 'fasCaretDown' | 'fasCaretLeft' | 'fasCaretRight' | 'fasCaretUp' | 'fasDiamond' | 'fasFolder' | 'fasMapMarkerAlt' | 'fasMapMarkerExclamation' | 'fasQuoteLeft' | 'fasQuoteRight' | 'fasSolarPanel' | 'fasSort' | 'fasStar' | 'fasWindTurbine';
+export declare type BaseIcon = 'cuiCheckboxIndeterminate' | 'cuiCheckboxSelected' | 'cuiCheckboxUnselected' | 'cuiRadioSelected' | 'cuiRadioUnselected' | 'culCovid' | 'culDeepSearch' | 'culDotsMenu' | 'culGlobePlus' | 'culListDense' | 'culMapMarkerStar' | 'culPlusThin' | 'culScreenshot' | 'culScreenshotAlt' | 'culShortcut' | 'culTimesThin' | 'culTransformer' | 'culUserTransfer' | 'culVessel' | 'culVesselGroup' | 'cusCheckboxSelected' | 'cusDotFull' | 'cusDotFullAlt' | 'cusDotsMenu' | 'cusRadio' | 'cusSquareMinus' | 'cusTransformer' | 'cusVessel' | 'fabApplePay' | 'fabBluetooth' | 'fabBtc' | 'fabCcAmazonPay' | 'fabCcAmex' | 'fabCcApplePay' | 'fabCcDinersClub' | 'fabCcMastercard' | 'fabCcPaypal' | 'fabCcVisa' | 'fabDhl' | 'fabEbay' | 'fabFacebook' | 'fabFedex' | 'fabFirefox' | 'fabGoogle' | 'fabGoogleDrive' | 'fabLinkedinIn' | 'fabMedium' | 'fabOsi' | 'fabSlack' | 'fabTwitter' | 'fabUps' | 'falAddressBook' | 'falAddressCard' | 'falAnalytics' | 'falAngleDoubleDown' | 'falAngleDoubleLeft' | 'falAngleDoubleRight' | 'falAngleDoubleUp' | 'falAngleDown' | 'falAngleLeft' | 'falAngleRight' | 'falAngleUp' | 'falArrowAltDown' | 'falArrowAltLeft' | 'falArrowAltRight' | 'falArrowAltUp' | 'falArrowCircleDown' | 'falArrowCircleLeft' | 'falArrowCircleRight' | 'falArrowCircleUp' | 'falArrowDown' | 'falArrowFromBottom' | 'falArrowFromLeft' | 'falArrowFromRight' | 'falArrowFromTop' | 'falArrowLeft' | 'falArrowRight' | 'falArrowToBottom' | 'falArrowToLeft' | 'falArrowToRight' | 'falArrowToTop' | 'falArrowUp' | 'falArrows' | 'falAward' | 'falBan' | 'falBell' | 'falBookOpen' | 'falBroadcastTower' | 'falBuilding' | 'falBullseye' | 'falCalendar' | 'falCalendarAlt' | 'falCamera' | 'falCaretDown' | 'falCaretLeft' | 'falCaretRight' | 'falCaretUp' | 'falCauldron' | 'falChartArea' | 'falChartBar' | 'falChartLineDown' | 'falChartLine' | 'falChartNetwork' | 'falChartPie' | 'falChartPieAlt' | 'falChartScatter' | 'falCheckCircle' | 'falCheckSquare' | 'falCheck' | 'falChevronCircleDown' | 'falChevronCircleLeft' | 'falChevronCircleRight' | 'falChevronCircleUp' | 'falChevronDoubleDown' | 'falChevronDoubleLeft' | 'falChevronDoubleRight' | 'falChevronDoubleUp' | 'falChevronDown' | 'falChevronLeft' | 'falChevronRight' | 'falChevronUp' | 'falCircle' | 'falCloudShowersHeavy' | 'falCloudSnow' | 'falCloudSunRain' | 'falCloudSun' | 'falCloudUpload' | 'falCloud' | 'falCode' | 'falCog' | 'falCogs' | 'falComment' | 'falCommentAlt' | 'falCompressAlt' | 'falCopy' | 'falCreditCard' | 'falDatabase' | 'falDotCircle' | 'falDownload' | 'falEdit' | 'falEllipsisH' | 'falEllipsisV' | 'falEnvelope' | 'falExchange' | 'falExclamationCircle' | 'falExclamationTriangle' | 'falExpandAlt' | 'falExternalLink' | 'falEye' | 'falEyeSlash' | 'falFile' | 'falFilePdf' | 'falFileAlt' | 'falFileArchive' | 'falFileAudio' | 'falFileCertificate' | 'falFileChartLine' | 'falFileChartPie' | 'falFileCheck' | 'falFileCode' | 'falFileCsv' | 'falFileEdit' | 'falFileExcel' | 'falFileImage' | 'falFilePlus' | 'falFilePowerpoint' | 'falFileSpreadsheet' | 'falFileVideo' | 'falFileWord' | 'falFilter' | 'falFlag' | 'falFolderOpen' | 'falFolderPlus' | 'falFolder' | 'falFolders' | 'falGlassesAlt' | 'falGlobe' | 'falHome' | 'falHourglass' | 'falImage' | 'falInfoCircle' | 'falKey' | 'falLayerPlus' | 'falLink' | 'falList' | 'falLockAlt' | 'falLongArrowDown' | 'falLongArrowLeft' | 'falLongArrowRight' | 'falLongArrowUp' | 'falMapMarked' | 'falMapMarkedAlt' | 'falMapMarkerAlt' | 'falMapMarkerAltSlash' | 'falMapMarkerCheck' | 'falMapMarkerExclamation' | 'falMapMarker' | 'falMap' | 'falMinus' | 'falPause' | 'falPauseCircle' | 'falPen' | 'falPlay' | 'falPlayCircle' | 'falPlug' | 'falPlusSquare' | 'falPlus' | 'falPlusCircle' | 'falPrint' | 'falPuzzlePiece' | 'falReceipt' | 'falRedo' | 'falSave' | 'falSearchPlus' | 'falSearch' | 'falServer' | 'falShareAll' | 'falShare' | 'falShareAlt' | 'falShieldAlt' | 'falShieldCheck' | 'falShip' | 'falShoppingBasket' | 'falSignIn' | 'falSignInAlt' | 'falSignOut' | 'falSignOutAlt' | 'falSlidersV' | 'falSnowBlowing' | 'falSnowflake' | 'falSolarPanel' | 'falSort' | 'falSpinner' | 'falSquare' | 'falStepForward' | 'falStop' | 'falStopCircle' | 'falStopwatch' | 'falSuitcase' | 'falSun' | 'falSync' | 'falTachometer' | 'falTemperatureHigh' | 'falThLarge' | 'falThList' | 'falTh' | 'falTimesCircle' | 'falTimes' | 'falToggleOff' | 'falToggleOn' | 'falTrashAlt' | 'falUnlockAlt' | 'falUserChart' | 'falUserCircle' | 'falUserCog' | 'falUserEdit' | 'falUserFriends' | 'falUserPlus' | 'falUserShield' | 'falUserTimes' | 'falUser' | 'falUsersClass' | 'falUsers' | 'falWater' | 'falWindTurbine' | 'falWind' | 'falWrench' | 'fasCaretDown' | 'fasCaretLeft' | 'fasCaretRight' | 'fasCaretUp' | 'fasDiamond' | 'fasFolder' | 'fasMapMarkerAlt' | 'fasMapMarkerExclamation' | 'fasQuoteLeft' | 'fasQuoteRight' | 'fasSolarPanel' | 'fasSort' | 'fasStar' | 'fasWindTurbine';

package/input/input.d.ts

@@ -1,7 +1,6 @@
-import { InputInputStyleProps, InputProps, InputStyleProps } from './input.types';
-export declare const InputInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, InputInputStyleProps & {
-    color?: any;
-}, never>;
-export declare const InputBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, InputStyleProps, never>;
+import { InputInputStyleProps, InputProps } from './input.types';
+import { SystemProps } from '../system';
+export declare const InputInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, InputInputStyleProps, never>;
+export declare const InputBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const Input: import("../core").VuiComponent<"div", InputProps>;
 export default Input;

package/input/input.js

@@ -36,10 +36,10 @@ var styled_components_2 = __importDefault(require("styled-components"));
 var consts_1 = require("./consts");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
+var system_1 = require("../system");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
 exports.InputInput = styled_components_2.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tmargin: 0 8px;\n\tmin-width: 0;\n\toutline: none;\n\tpadding: 0;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tmargin: 0 8px;\n\tmin-width: 0;\n\toutline: none;\n\tpadding: 0;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), styled_components_1.compose(styled_components_1.color, styled_components_1.fontSize));
-exports.InputBase = styled_components_2.default.div.withConfig(core_1.forwardPropConfig(generator))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), generator);
+exports.InputBase = styled_components_2.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), system_1.system);
 exports.Input = core_1.vui(function (props, ref) {
     var _a;
     var _b = core_1.omitThemingProps(props), autoComplete = _b.autoComplete, autoFocus = _b.autoFocus, className = _b.className, colorSchemeProp = _b.colorScheme, defaultValue = _b.defaultValue, disabled = _b.disabled, iconLeft = _b.iconLeft, iconRightProp = _b.iconRight, _c = _b.inputProps, inputProps = _c === void 0 ? {} : _c, inputRef = _b.inputRef, itemLeft = _b.itemLeft, itemRight = _b.itemRight, _d = _b.length, length = _d === void 0 ? 'fluid' : _d, name = _b.name, onBlur = _b.onBlur, onChange = _b.onChange, onFocus = _b.onFocus, placeholder = _b.placeholder, readOnly = _b.readOnly, required = _b.required, _e = _b.state, state = _e === void 0 ? 'default' : _e, stateMapping = _b.stateMapping, _f = _b.type, type = _f === void 0 ? 'text' : _f, value = _b.value, rest = __rest(_b, ["autoComplete", "autoFocus", "className", "colorScheme", "defaultValue", "disabled", "iconLeft", "iconRight", "inputProps", "inputRef", "itemLeft", "itemRight", "length", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "state", "stateMapping", "type", "value"]);

package/input/input.types.d.ts

@@ -2,14 +2,14 @@
 import { inputLengths } from './consts';
 import { ChangeEventHandler, FocusEventHandler } from '../core';
 import { IconProp } from '../icon';
-import { BackgroundColorProps, BordersProps, ColorProps, EffectsProps, FontSizeProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
+import { ColorProps, FontSizeProps, SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface InputInputProps extends InputInputStyleProps {
 }
 export interface InputInputStyleProps extends ColorProps, FontSizeProps {
 }
 export declare type InputLength = keyof typeof inputLengths;
-export interface InputProps extends InputStyleProps, ThemingProps<'Input'> {
+export interface InputProps extends SystemProps, ThemingProps<'Input'> {
     autoComplete?: string;
     autoFocus?: boolean;
     colorScheme?: 'green' | 'grey' | 'red';
@@ -38,5 +38,3 @@ export declare type InputStateMapping = Record<string, {
     colorScheme?: InputProps['colorScheme'];
     iconRight: InputProps['iconRight'];
 }>;
-export interface InputStyleProps extends BackgroundColorProps, BordersProps, EffectsProps, SizingProps, SpaceProps, TransitionsProps {
-}

package/label/label.d.ts

@@ -1,6 +1,5 @@
-import { LabelProps, LabelStyleProps } from './label.types';
-export declare const LabelBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, LabelStyleProps & {
-    color?: any;
-}, never>;
+import { LabelProps } from './label.types';
+import { SystemProps } from '../system';
+export declare const LabelBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const Label: import("../core").VuiComponent<"span", LabelProps>;
 export default Label;

package/label/label.js

@@ -30,16 +30,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Label = exports.LabelBase = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.effects, styled_components_1.flexboxes, styled_components_1.interactivity, system_1.isTruncated, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
-var Text = styled_components_2.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.isTruncated);
-exports.LabelBase = styled_components_2.default.span.withConfig(core_1.forwardPropConfig(generator))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\tline-height: normal;\n\tmin-width: 0px;\n\tposition: relative;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\tline-height: normal;\n\tmin-width: 0px;\n\tposition: relative;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"])), generator);
+var Text = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.isTruncated);
+exports.LabelBase = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\tline-height: normal;\n\tmin-width: 0px;\n\tposition: relative;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\tline-height: normal;\n\tmin-width: 0px;\n\tposition: relative;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t}\n\n\t", "\n"])), system_1.system);
 exports.Label = core_1.vui(function (props, ref) {
     var _a = core_1.omitThemingProps(props), casing = _a.casing, children = _a.children, className = _a.className, icon = _a.icon, iconLeft = _a.iconLeft, iconRight = _a.iconRight, isElevated = _a.isElevated, isFullWidth = _a.isFullWidth, _b = _a.isInteractive, isInteractive = _b === void 0 ? props.onClick !== undefined : _b, isLoading = _a.isLoading, isRound = _a.isRound, isSplit = _a.isSplit, _c = _a.isTruncated, isTruncated = _c === void 0 ? true : _c, itemLeft = _a.itemLeft, itemRight = _a.itemRight, text = _a.text, weight = _a.weight, rest = __rest(_a, ["casing", "children", "className", "icon", "iconLeft", "iconRight", "isElevated", "isFullWidth", "isInteractive", "isLoading", "isRound", "isSplit", "isTruncated", "itemLeft", "itemRight", "text", "weight"]);
     var _d = core_1.useStyleConfig('Label', props), activeBg = _d.activeBg, h = _d.h, hoverBg = _d.hoverBg, _e = _d.iconSize, iconSize = _e === void 0 ? 'md' : _e, _f = _d.spaceX, spaceXBase = _f === void 0 ? 0 : _f, styles = __rest(_d, ["activeBg", "h", "hoverBg", "iconSize", "spaceX"]);

package/label/label.types.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { IconProp } from '../icon';
-import { BackgroundColorProps, BordersProps, EffectsProps, InteractivityProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface LabelProps extends LabelStyleProps, ThemingProps<'Label'> {
+export interface LabelProps extends SystemProps, ThemingProps<'Label'> {
     casing?: TypographyProps['textTransform'];
     colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
     icon?: IconProp;
@@ -19,5 +19,3 @@ export interface LabelProps extends LabelStyleProps, ThemingProps<'Label'> {
     text?: number | string;
     weight?: TypographyProps['fontWeight'];
 }
-export interface LabelStyleProps extends BackgroundColorProps, BordersProps, EffectsProps, InteractivityProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
-}