@veracity/vui 0.0.9 → 0.0.11

package/alert/alert.js

@@ -58,9 +58,9 @@ var core_1 = require("../core");
 var utils_1 = require("../utils");
 exports.Alert = core_1.vui(function (props, ref) {
     var _a;
-    var action = props.action, children = props.children, className = props.className, _b = props.colorScheme, colorSchemeProp = _b === void 0 ? 'blue' : _b, iconProp = props.icon, isVertical = props.isVertical, onClose = props.onClose, size = props.size, status = props.status, statusMapping = props.statusMapping, text = props.text, title = props.title, variant = props.variant, rest = __rest(props, ["action", "children", "className", "colorScheme", "icon", "isVertical", "onClose", "size", "status", "statusMapping", "text", "title", "variant"]);
+    var action = props.action, children = props.children, className = props.className, _b = props.colorScheme, colorSchemeProp = _b === void 0 ? 'blue' : _b, icon = props.icon, isVertical = props.isVertical, onClose = props.onClose, size = props.size, _c = props.status, status = _c === void 0 ? '' : _c, statusMapping = props.statusMapping, text = props.text, title = props.title, variant = props.variant, rest = __rest(props, ["action", "children", "className", "colorScheme", "icon", "isVertical", "onClose", "size", "status", "statusMapping", "text", "title", "variant"]);
     var statuses = __assign(__assign({}, consts_1.alertStatusMapping), statusMapping);
-    var _c = (_a = (status && statuses[status])) !== null && _a !== void 0 ? _a : {}, _d = _c.colorScheme, colorScheme = _d === void 0 ? colorSchemeProp : _d, _e = _c.icon, icon = _e === void 0 ? iconProp : _e;
+    var _d = ((_a = statuses[status]) !== null && _a !== void 0 ? _a : {}).colorScheme, colorScheme = _d === void 0 ? colorSchemeProp : _d;
     var styles = core_1.useStyleConfig('Alert', __assign({ colorScheme: colorScheme }, props));
     var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, isVertical: isVertical, size: size, status: status, variant: variant }); }, [
         colorScheme,
@@ -71,7 +71,7 @@ exports.Alert = core_1.vui(function (props, ref) {
     ]);
     return (react_1.default.createElement(context_1.AlertProvider, { value: context },
         react_1.default.createElement(box_1.default, __assign({ borderRadius: "md", className: utils_1.cs('vui-alert', className), px: 1.5, py: 1, ref: ref, w: "fit-content" }, styles.container, rest), children ? (children) : (react_1.default.createElement(react_1.default.Fragment, null,
-            typeof icon === 'string' ? (react_1.default.createElement(alertIcon_1.default, { animation: status === 'loading' ? 'spin' : undefined, icon: icon })) : (icon),
+            status ? react_1.default.createElement(alertIcon_1.default, null) : typeof icon === 'string' ? react_1.default.createElement(alertIcon_1.default, { icon: icon }) : icon,
             react_1.default.createElement(alertMessage_1.default, null,
                 title && react_1.default.createElement(alertTitle_1.default, null, title),
                 text && react_1.default.createElement(alertText_1.default, null, text)),

package/alert/alert.types.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BoxProps } from '../box';
+import { IconProps } from '../icon';
 import { ThemingProps } from '../theme';
 export interface AlertProps extends Omit<BoxProps, 'size' | 'variant'>, ThemingProps<'Alert'> {
     action?: React.ReactElement;
@@ -15,5 +16,5 @@ export interface AlertProps extends Omit<BoxProps, 'size' | 'variant'>, ThemingP
 export declare type AlertStatus = 'error' | 'info' | 'loading' | 'success' | 'warning';
 export declare type AlertStatusMapping = Record<string, {
     colorScheme?: AlertProps['colorScheme'];
-    icon: AlertProps['icon'];
+    iconProps: IconProps;
 }>;

package/alert/alertIcon.js

@@ -25,9 +25,9 @@ exports.AlertIcon = core_1.vui(function (props, ref) {
     var alertProps = (_a = context_1.useAlert()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, alertProps), props);
     var styles = core_1.useStyleConfig('Alert', mergedProps);
-    var status = mergedProps.status;
-    var icon = ((_b = (status && consts_1.alertStatusMapping[status])) !== null && _b !== void 0 ? _b : {}).icon;
-    return (react_1.default.createElement(icon_1.default, __assign({ animation: status === 'loading' ? 'spin' : undefined, className: "vui-alertIcon", icon: icon, mr: 1, my: 0.5, ref: ref, size: "md" }, styles.icon, props)));
+    var _c = mergedProps.status, status = _c === void 0 ? '' : _c;
+    var iconProps = ((_b = consts_1.alertStatusMapping[status]) !== null && _b !== void 0 ? _b : {}).iconProps;
+    return (react_1.default.createElement(icon_1.default, __assign({ className: "vui-alertIcon", mr: 1, my: 0.5, ref: ref, size: "md" }, styles.icon, iconProps, props)));
 });
 exports.AlertIcon.displayName = 'AlertIcon';
 exports.default = exports.AlertIcon;

package/alert/alertTitle.d.ts

@@ -1,3 +1,3 @@
 import { HeadingProps } from '../heading';
-export declare const AlertTitle: import("../core").VuiComponent<"h2", HeadingProps>;
+export declare const AlertTitle: import("../core").VuiComponent<"h6", HeadingProps>;
 export default AlertTitle;

package/alert/alertTitle.js

@@ -24,7 +24,7 @@ exports.AlertTitle = core_1.vui(function (props, ref) {
     var alertProps = (_a = context_1.useAlert()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, alertProps), props);
     var styles = core_1.useStyleConfig('Alert', mergedProps);
-    return react_1.default.createElement(heading_1.H2, __assign({ className: "vui-alertTitle", lineHeight: 1.5, mr: 1, ref: ref }, styles.title, props));
+    return react_1.default.createElement(heading_1.H6, __assign({ className: "vui-alertTitle", lineHeight: 1.5, mr: 1, ref: ref }, styles.title, props));
 });
 exports.AlertTitle.displayName = 'AlertTitle';
 exports.default = exports.AlertTitle;

package/alert/consts.js

@@ -4,22 +4,34 @@ exports.alertStatusMapping = void 0;
 exports.alertStatusMapping = {
     error: {
         colorScheme: 'red',
-        icon: 'falTimesCircle'
+        iconProps: {
+            icon: 'falTimesCircle'
+        }
     },
     info: {
         colorScheme: 'blue',
-        icon: 'falInfoCircle'
+        iconProps: {
+            icon: 'falInfoCircle'
+        }
     },
     loading: {
         colorScheme: 'blue',
-        icon: 'falSpinner'
+        iconProps: {
+            animation: 'vui-spin 0.6s linear infinite',
+            fill: ['blue.40', 'blue.60'],
+            icon: 'fadSpinnerThird'
+        }
     },
     success: {
         colorScheme: 'green',
-        icon: 'falCheckCircle'
+        iconProps: {
+            icon: 'falCheckCircle'
+        }
     },
     warning: {
         colorScheme: 'yellow',
-        icon: 'falExclamationCircle'
+        iconProps: {
+            icon: 'falExclamationCircle'
+        }
     }
 };

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,25 +30,30 @@ 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 consts_1 = require("./consts");
 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 StateWrapper = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(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\t", "\n"], ["\n\tbottom: 0;\n\tdisplay: flex;\n\tleft: 0;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\n\t", "\n"])), system_1.system);
+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\toverflow: hidden;\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\toverflow: hidden;\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 _a, _b;
     var buttonGroupProps = context_1.useButtonGroup();
     var mergedProps = __assign(__assign({}, buttonGroupProps), props);
-    var _b = core_1.omitThemingProps(mergedProps), borderWidthProp = _b.borderWidth, children = _b.children, className = _b.className, disabled = _b.disabled, icon = _b.icon, iconLeftProp = _b.iconLeft, iconRightProp = _b.iconRight, isElevated = _b.isElevated, isFullWidth = _b.isFullWidth, isLoading = _b.isLoading, isRound = _b.isRound, isSplit = _b.isSplit, itemLeftProp = _b.itemLeft, itemRightProp = _b.itemRight, text = _b.text, rest = __rest(_b, ["borderWidth", "children", "className", "disabled", "icon", "iconLeft", "iconRight", "isElevated", "isFullWidth", "isLoading", "isRound", "isSplit", "itemLeft", "itemRight", "text"]);
-    var _c = core_1.useStyleConfig('Button', mergedProps), borderWidth = _c.borderWidth, h = _c.h, _d = _c.iconSize, iconSize = _d === void 0 ? 'md' : _d, minW = _c.minW, _e = _c.spaceX, spaceXBase = _e === void 0 ? 0 : _e, styles = __rest(_c, ["borderWidth", "h", "iconSize", "minW", "spaceX"]);
-    var Content = isLoading ? ContentWrapper : react_1.default.Fragment;
-    var border = (_a = borderWidthProp !== null && borderWidthProp !== void 0 ? borderWidthProp : borderWidth) !== null && _a !== void 0 ? _a : 0;
+    var _c = core_1.omitThemingProps(mergedProps), borderWidthProp = _c.borderWidth, children = _c.children, className = _c.className, disabled = _c.disabled, icon = _c.icon, iconLeftProp = _c.iconLeft, iconRightProp = _c.iconRight, isElevated = _c.isElevated, isFullWidth = _c.isFullWidth, 
+    // isLoading,
+    isRound = _c.isRound, isSplit = _c.isSplit, itemLeftProp = _c.itemLeft, itemRightProp = _c.itemRight, _d = _c.state, state = _d === void 0 ? '' : _d, stateMapping = _c.stateMapping, text = _c.text, rest = __rest(_c, ["borderWidth", "children", "className", "disabled", "icon", "iconLeft", "iconRight", "isElevated", "isFullWidth", "isRound", "isSplit", "itemLeft", "itemRight", "state", "stateMapping", "text"]);
+    var hasState = Boolean(state);
+    var states = __assign(__assign({}, consts_1.buttonStateMapping), stateMapping);
+    var _e = (_a = states[state]) !== null && _a !== void 0 ? _a : {}, iconProps = _e.iconProps, stateProps = __rest(_e, ["iconProps"]);
+    var _f = core_1.useStyleConfig('Button', mergedProps), borderWidth = _f.borderWidth, h = _f.h, _g = _f.iconSize, iconSize = _g === void 0 ? 'md' : _g, minW = _f.minW, _h = _f.spaceX, spaceXBase = _h === void 0 ? 0 : _h, styles = __rest(_f, ["borderWidth", "h", "iconSize", "minW", "spaceX"]);
+    var Content = hasState ? ContentWrapper : react_1.default.Fragment;
+    var border = (_b = borderWidthProp !== null && borderWidthProp !== void 0 ? borderWidthProp : borderWidth) !== null && _b !== void 0 ? _b : 0;
     var spaceX = (spaceXBase - border) / 8;
     var spaceXText = spaceX * 2;
     var iconRightMl = isSplit ? 'auto' : spaceX;
@@ -62,12 +67,12 @@ exports.Button = core_1.vui(function (props, ref) {
     var aliasedProps = utils_1.filterUndefined({
         borderRadius: isRound ? h / 2 : undefined,
         boxShadow: isElevated ? 2 : undefined,
-        pointerEvents: isLoading ? 'none' : undefined,
+        pointerEvents: hasState ? 'none' : undefined,
         w: isFullWidth ? '100%' : undefined
     });
     return (react_1.default.createElement(exports.ButtonBase, __assign({ borderRadius: "md", borderWidth: border, className: utils_1.cs('vui-button', className), disabled: disabled, focusRing: 3, fontWeight: "medium", h: h, minW: minWidth, pl: pl, pr: pr, ref: ref, transitionDuration: "fast", type: "button" }, styles, aliasedProps, rest),
-        isLoading && (react_1.default.createElement(LoadingWrapper, { onClick: function (e) { return e.stopPropagation(); } },
-            react_1.default.createElement(icon_1.default, { animation: "spin", icon: "falSpinner", m: "auto", size: iconSize }))),
+        hasState && (react_1.default.createElement(StateWrapper, __assign({ onClick: function (e) { return e.stopPropagation(); } }, stateProps),
+            react_1.default.createElement(icon_1.default, __assign({ m: "auto", size: iconSize }, iconProps)))),
         react_1.default.createElement(Content, null, icon ? (react_1.default.createElement(icon_1.default, { icon: icon, size: iconSize })) : (react_1.default.createElement(react_1.default.Fragment, null,
             itemLeft, children !== null && children !== void 0 ? children : text,
             itemRight)))));

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 { IconProp, IconProps } from '../icon';
+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;
@@ -14,7 +14,11 @@ export interface ButtonProps extends ButtonStyleProps, ThemingProps<'Button'> {
     isSplit?: boolean;
     itemLeft?: React.ReactNode;
     itemRight?: React.ReactNode;
+    state?: ButtonState;
+    stateMapping?: ButtonStateMapping;
     text?: number | string;
 }
-export interface ButtonStyleProps extends BackgroundColorProps, BordersProps, ColorProps, EffectsProps, FontSizeProps, FontWeightProps, PointerEventsProps, SizingProps, SpaceProps, TransitionsProps {
-}
+export declare type ButtonState = 'error' | 'loading' | 'success';
+export declare type ButtonStateMapping = Record<string, SystemProps & {
+    iconProps: IconProps;
+}>;

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/consts.d.ts

@@ -0,0 +1,2 @@
+import { ButtonStateMapping } from './button.types';
+export declare const buttonStateMapping: ButtonStateMapping;

package/button/consts.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonStateMapping = void 0;
+exports.buttonStateMapping = {
+    error: {
+        bg: 'red.80',
+        iconProps: {
+            animation: 'fadeDown',
+            icon: 'falTimesCircle'
+        }
+    },
+    loading: {
+        iconProps: {
+            animation: 'vui-spin 0.6s linear infinite',
+            fill: ['', 'transparent'],
+            icon: 'fadSpinnerThird'
+        }
+    },
+    success: {
+        bg: 'green.80',
+        iconProps: {
+            animation: 'fadeDown',
+            icon: 'falCheckCircle'
+        }
+    }
+};

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;