@veracity/vui 0.0.9 → 0.0.10

package/link/link.d.ts

@@ -1,6 +1,5 @@
-import { LinkProps, LinkStyleProps } from './link.types';
-export declare const LinkBase: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, LinkStyleProps & {
-    color?: any;
-}, never>;
+import { LinkProps } from './link.types';
+import { SystemProps } from '../system';
+export declare const LinkBase: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const Link: import("../core").VuiComponent<"a", LinkProps>;
 export default Link;

package/link/link.js

@@ -30,14 +30,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = exports.LinkBase = 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, system_1.isTruncated, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
-exports.LinkBase = styled_components_2.default.a.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\toutline: none;\n\ttext-decoration: none;\n\twidth: fit-content;\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\toutline: none;\n\ttext-decoration: none;\n\twidth: fit-content;\n\n\t", "\n"])), generator);
+exports.LinkBase = styled_components_1.default.a.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\toutline: none;\n\ttext-decoration: none;\n\twidth: fit-content;\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\toutline: none;\n\ttext-decoration: none;\n\twidth: fit-content;\n\n\t", "\n"])), system_1.system);
 exports.Link = core_1.vui(function (props, ref) {
     var _a = core_1.omitThemingProps(props), children = _a.children, className = _a.className, decoration = _a.decoration, _b = _a.hoverDecoration, hoverDecoration = _b === void 0 ? 'underline' : _b, isExternal = _a.isExternal, text = _a.text, weight = _a.weight, rest = __rest(_a, ["children", "className", "decoration", "hoverDecoration", "isExternal", "text", "weight"]);
     var styles = core_1.useStyleConfig('Link', props);

package/link/link.types.d.ts

@@ -1,6 +1,6 @@
-import { BordersProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface LinkProps extends LinkStyleProps, ThemingProps<'Link'> {
+export interface LinkProps extends SystemProps, ThemingProps<'Link'> {
     colorScheme?: 'blue' | 'prussian';
     decoration?: TypographyProps['textDecoration'];
     hoverDecoration?: TypographyProps['textDecoration'];
@@ -8,5 +8,3 @@ export interface LinkProps extends LinkStyleProps, ThemingProps<'Link'> {
     text?: number | string;
     weight?: TypographyProps['fontWeight'];
 }
-export interface LinkStyleProps extends BordersProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
-}

package/list/list.d.ts

@@ -1,9 +1,10 @@
-import { ListProps, ListStyleProps } from './list.types';
+import { ListProps } from './list.types';
 import ListHeading from './listHeading';
 import ListIcon from './listIcon';
 import ListItem from './listItem';
 import { VuiComponent } from '../core';
-export declare const ListBase: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, ListStyleProps, never>;
+import { SystemProps } from '../system';
+export declare const ListBase: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const List: VuiComponent<"ul", ListProps> & {
     Heading: typeof ListHeading;
     Icon: typeof ListIcon;

package/list/list.js

@@ -49,17 +49,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.List = exports.ListBase = 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 listHeading_1 = __importDefault(require("./listHeading"));
 var listIcon_1 = __importDefault(require("./listIcon"));
 var listItem_1 = __importDefault(require("./listItem"));
 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.flexboxes, styled_components_1.layout, styled_components_1.sizing, styled_components_1.space, styled_components_1.typography);
-exports.ListBase = styled_components_2.default.ul.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
+exports.ListBase = styled_components_1.default.ul.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
 exports.List = core_1.vui(function (props, ref) {
     var children = props.children, className = props.className, colorScheme = props.colorScheme, heading = props.heading, isInteractive = props.isInteractive, size = props.size, variant = props.variant, rest = __rest(props, ["children", "className", "colorScheme", "heading", "isInteractive", "size", "variant"]);
     var styles = core_1.useStyleConfig('List', props);

package/list/list.types.d.ts

@@ -1,10 +1,8 @@
-import { BordersProps, FlexboxesProps, LayoutProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface ListProps extends ListStyleProps, ThemingProps<'List'> {
+export interface ListProps extends SystemProps, ThemingProps<'List'> {
     colorScheme?: 'blue' | 'grey';
     disabled?: boolean;
     heading?: string;
     isInteractive?: boolean;
 }
-export interface ListStyleProps extends BordersProps, FlexboxesProps, LayoutProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
-}

package/list/listItem.d.ts

@@ -1,4 +1,5 @@
-import { ListItemProps, ListItemStyleProps } from './listItem.types';
-export declare const ListItemBase: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, ListItemStyleProps, never>;
+import { ListItemProps } from './listItem.types';
+import { SystemProps } from '../system';
+export declare const ListItemBase: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const ListItem: import("../core").VuiComponent<"li", ListItemProps>;
 export default ListItem;

package/list/listItem.js

@@ -30,15 +30,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListItem = exports.ListItemBase = 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 listIcon_1 = __importDefault(require("./listIcon"));
 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.flexboxes, styled_components_1.interactivity, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
-exports.ListItemBase = styled_components_2.default.li.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tline-height: normal;\n\toutline: none;\n\n\t&[data-disabled='true'] {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tline-height: normal;\n\toutline: none;\n\n\t&[data-disabled='true'] {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"])), generator);
+exports.ListItemBase = styled_components_1.default.li.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tline-height: normal;\n\toutline: none;\n\n\t&[data-disabled='true'] {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tline-height: normal;\n\toutline: none;\n\n\t&[data-disabled='true'] {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"])), system_1.system);
 exports.ListItem = core_1.vui(function (props, ref) {
     var listProps = context_1.useList();
     var mergedProps = __assign(__assign({}, listProps), props);

package/list/listItem.types.d.ts

@@ -1,7 +1,7 @@
 import { IconProp } from '../icon';
-import { BackgroundColorProps, FlexboxesProps, InteractivityProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface ListItemProps extends ListItemStyleProps, ThemingProps<'List'> {
+export interface ListItemProps extends SystemProps, ThemingProps<'List'> {
     center?: boolean;
     centerH?: boolean;
     centerV?: boolean;
@@ -14,5 +14,3 @@ export interface ListItemProps extends ListItemStyleProps, ThemingProps<'List'>
     isSelected?: boolean;
     text?: number | string;
 }
-export interface ListItemStyleProps extends BackgroundColorProps, FlexboxesProps, InteractivityProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
-}

package/p/p.d.ts

@@ -1,6 +1,5 @@
-import { PProps, PStyleProps } from './p.types';
-export declare const PBase: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, PStyleProps & {
-    color?: any;
-}, never>;
+import { PProps } from './p.types';
+import { SystemProps } from '../system';
+export declare const PBase: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const P: import("../core").VuiComponent<"p", PProps>;
 export default P;

package/p/p.js

@@ -30,14 +30,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.P = exports.PBase = 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.PBase = styled_components_2.default.p.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
+exports.PBase = styled_components_1.default.p.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
 exports.P = 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('P', props);

package/p/p.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 PProps extends PStyleProps, ThemingProps<'P'> {
+export interface PProps extends SystemProps, ThemingProps<'P'> {
     align?: TypographyProps['textAlign'];
     casing?: TypographyProps['textTransform'];
     decoration?: TypographyProps['textDecoration'];
     text?: number | string;
     weight?: TypographyProps['fontWeight'];
 }
-export interface PStyleProps extends IsTruncatedProps, MaxLinesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Veracity UI components library based on Styled Components and @xstyled",
   "main": "index.js",
   "author": "Veracity",

package/radio/radio.d.ts

@@ -1,6 +1,7 @@
-import { RadioControlStyleProps, RadioProps, RadioStyleProps } from './radio.types';
+import { RadioProps, RadioStyleProps } from './radio.types';
+import { SystemProps } from '../system';
 export declare const RadioInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
 export declare const RadioBase: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, RadioStyleProps, never>;
-export declare const RadioControl: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, RadioControlStyleProps, never>;
+export declare const RadioControl: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const Radio: import("../core").VuiComponent<"span", RadioProps>;
 export default Radio;

package/radio/radio.js

@@ -30,19 +30,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Radio = exports.RadioControl = exports.RadioBase = exports.RadioInput = 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 t_1 = __importDefault(require("../t"));
 var utils_1 = require("../utils");
-var radioGenerator = 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.RadioInput = 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.RadioBase = styled_components_2.default.label.withConfig(core_1.forwardPropConfig(radioGenerator))(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-radioControl {\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-radioControl {\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-radioControl {\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-radioControl {\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); }, radioGenerator);
-exports.RadioControl = 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.RadioInput = 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.RadioBase = 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-radioControl {\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-radioControl {\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-radioControl {\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-radioControl {\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.RadioControl = 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.Radio = core_1.vui(function (props, ref) {
     var _a;
     var _b = (_a = context_1.useRadioGroup()) !== null && _a !== void 0 ? _a : {}, groupOnChange = _b.onChange, groupValue = _b.value, radioGroupProps = __rest(_b, ["onChange", "value"]);

package/radio/radio.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 RadioProps extends RadioStyleProps, ThemingProps<'Radio'> {
+export interface RadioProps extends SystemProps, ThemingProps<'Radio'> {
     checked?: boolean;
     colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
     disabled?: boolean;
@@ -19,8 +19,6 @@ export interface RadioProps extends RadioStyleProps, ThemingProps<'Radio'> {
     required?: boolean;
     value?: number | string;
 }
-export interface RadioControlStyleProps extends BackgroundColorProps, BordersProps, SizingProps, SpaceProps, TransitionsProps {
-}
-export interface RadioStyleProps extends BackgroundColorProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps {
-    controlHoverColor?: string;
+export interface RadioStyleProps extends SystemProps {
+    controlHoverColor: string;
 }

package/radio/radioGroup.d.ts

@@ -1,4 +1,5 @@
-import { RadioGroupProps, RadioGroupStyleProps } from './radioGroup.types';
-export declare const RadioGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, RadioGroupStyleProps, never>;
+import { RadioGroupProps } from './radioGroup.types';
+import { SystemProps } from '../system';
+export declare const RadioGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const RadioGroup: import("../core").VuiComponent<"div", RadioGroupProps>;
 export default RadioGroup;

package/radio/radioGroup.js

@@ -65,14 +65,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioGroup = exports.RadioGroupBase = 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.RadioGroupBase = 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.RadioGroupBase = 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.RadioGroup = core_1.vui(function (props, ref) {
     var className = props.className, colorScheme = props.colorScheme, _a = props.defaultValue, defaultValue = _a === void 0 ? '' : _a, disabled = props.disabled, name = props.name, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, row = props.row, size = props.size, valueProp = props.value, variant = props.variant, rest = __rest(props, ["className", "colorScheme", "defaultValue", "disabled", "name", "onBlur", "onChange", "onFocus", "row", "size", "value", "variant"]);
     var isControlled = react_1.useRef(valueProp !== undefined).current;

package/radio/radioGroup.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 RadioGroupProps extends RadioGroupStyleProps, ThemingProps<'Radio'> {
+export interface RadioGroupProps extends SystemProps, ThemingProps<'Radio'> {
     colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
     disabled?: boolean;
     name?: string;
@@ -11,5 +11,3 @@ export interface RadioGroupProps extends RadioGroupStyleProps, ThemingProps<'Rad
     row?: boolean;
     value?: number | string;
 }
-export interface RadioGroupStyleProps extends FlexboxesProps, SizingProps, SpaceProps {
-}

package/skeleton/skeleton.d.ts

@@ -1,4 +1,5 @@
-import { SkeletonProps, SkeletonStyleProps } from './skeleton.types';
-export declare const SkeletonBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SkeletonStyleProps, never>;
+import { SkeletonProps } from './skeleton.types';
+import { SystemProps } from '../system';
+export declare const SkeletonBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const Skeleton: import("../core").VuiComponent<"div", SkeletonProps>;
 export default Skeleton;

package/skeleton/skeleton.js

@@ -30,13 +30,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Skeleton = exports.SkeletonBase = 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.borderRadius, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space);
-exports.SkeletonBase = styled_components_2.default.div.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tanimation: vui-pulse 1.5s ease-in-out 0.5s infinite;\n\n\t", "\n"], ["\n\tanimation: vui-pulse 1.5s ease-in-out 0.5s infinite;\n\n\t", "\n"])), generator);
+exports.SkeletonBase = styled_components_1.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tanimation: vui-pulse 1.5s ease-in-out 0.5s infinite;\n\n\t", "\n"], ["\n\tanimation: vui-pulse 1.5s ease-in-out 0.5s infinite;\n\n\t", "\n"])), system_1.system);
 exports.Skeleton = core_1.vui(function (props, ref) {
     var _a = core_1.omitThemingProps(props), className = _a.className, _b = _a.repeat, repeat = _b === void 0 ? 1 : _b, rest = __rest(_a, ["className", "repeat"]);
     var styles = core_1.useStyleConfig('Skeleton', props);

package/skeleton/skeleton.types.d.ts

@@ -1,8 +1,6 @@
-import { BackgroundColorProps, BorderRadiusProps, FlexboxesProps, SizingProps, SpaceProps } from '../system';
+import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface SkeletonProps extends SkeletonStyleProps, ThemingProps<'Skeleton'> {
+export interface SkeletonProps extends SystemProps, ThemingProps<'Skeleton'> {
     colorScheme?: 'blue' | 'grey';
     repeat?: number;
 }
-export interface SkeletonStyleProps extends BackgroundColorProps, BorderRadiusProps, FlexboxesProps, SizingProps, SpaceProps {
-}

package/spinner/spinner.js

@@ -30,16 +30,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Spinner = exports.SpinnerCircle = 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 box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
+var system_1 = require("../system");
 var t_1 = __importDefault(require("../t"));
 var utils_1 = require("../utils");
-var circleGenerator = styled_components_1.compose(styled_components_1.animation, styled_components_1.borders, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
-exports.SpinnerCircle = styled_components_2.default.div.withConfig(core_1.forwardPropConfig(circleGenerator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-shrink: 0;\n\n\t", "\n\n\tanimation-duration: ", ";\n"], ["\n\tdisplay: flex;\n\tflex-shrink: 0;\n\n\t", "\n\n\tanimation-duration: ", ";\n"])), circleGenerator, function (p) { return p.speed; });
+exports.SpinnerCircle = styled_components_1.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-shrink: 0;\n\n\t", "\n\n\tanimation-duration: ", ";\n"], ["\n\tdisplay: flex;\n\tflex-shrink: 0;\n\n\t", "\n\n\tanimation-duration: ", ";\n"])), system_1.system, function (p) { return p.speed; });
 exports.Spinner = core_1.vui(function (props, ref) {
     var _a;
     var className = props.className, emptyColor = props.emptyColor, size = props.size, _b = props.speed, speedProp = _b === void 0 ? 'normal' : _b, text = props.text, _c = props.textPosition, textPosition = _c === void 0 ? 'bottom' : _c, thickness = props.thickness, rest = __rest(props, ["className", "emptyColor", "size", "speed", "text", "textPosition", "thickness"]);

package/spinner/spinner.types.d.ts

@@ -1,7 +1,7 @@
 import { BoxProps } from '../box';
-import { BordersProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
+import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface SpinnerCircleStyleProps extends BordersProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps {
+export interface SpinnerCircleStyleProps extends SystemProps {
     speed?: string;
 }
 export interface SpinnerProps extends Omit<BoxProps, 'size' | 'variant'>, Omit<ThemingProps<'Spinner'>, 'size'> {

package/svg/svg.d.ts

@@ -1,4 +1,5 @@
-import { SvgBaseOmitProps, SvgProps, SvgStyleProps } from './svg.types';
-export declare const SvgBase: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, SvgStyleProps & SvgBaseOmitProps, never>;
-export declare const Svg: import("../core").VuiComponent<"svg", SvgProps>;
+import { SvgProps } from './svg.types';
+import { VuiComponent } from '../core';
+export declare const SvgBase: VuiComponent<'svg', SvgProps>;
+export declare const Svg: VuiComponent<"svg", SvgProps>;
 export default Svg;

package/svg/svg.js

@@ -101,15 +101,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Svg = exports.SvgBase = 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 cache_1 = __importDefault(require("./cache"));
 var helpers_1 = require("./helpers");
 var core_1 = require("../core");
+var system_1 = require("../system");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.animation, styled_components_1.color, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.transform);
-exports.SvgBase = styled_components_2.default.svg.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
+exports.SvgBase = styled_components_1.default.svg.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
 exports.Svg = core_1.vui(function (_a, ref) {
     var children = _a.children, className = _a.className, src = _a.src, rest = __rest(_a, ["children", "className", "src"]);
     var _b = __read(react_1.useState(helpers_1.initState()), 2), state = _b[0], setState = _b[1];

package/svg/svg.types.d.ts

@@ -1,18 +1,9 @@
-import { AnimationProps, ColorProps, FlexboxesProps, SizingProps, SpaceProps, TransformProps } from '../system';
+import { SystemProps } from '../system';
 import { Dict } from '../utils';
-/** Fix for conflicting types of styled.svg */
-export interface SvgBaseOmitProps {
-    color?: any;
-    display?: any;
-    order?: any;
-    transform?: any;
-}
-export interface SvgProps extends SvgStyleProps {
+export interface SvgProps extends SystemProps {
     src?: string;
 }
 export interface SvgState {
     content?: string;
     svgAttributes: Dict<string>;
 }
-export interface SvgStyleProps extends AnimationProps, ColorProps, FlexboxesProps, SizingProps, SpaceProps, TransformProps {
-}

package/switch/switch.d.ts

@@ -1,8 +1,9 @@
-import { SwitchProps, SwitchStyleProps } from './switch.types';
+import { SwitchProps } from './switch.types';
 import { SwitchButton } from './switchButton';
 import { SwitchLabel } from './switchLabel';
 import { VuiComponent } from '../core';
-export declare const SwitchBase: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, SwitchStyleProps, never>;
+import { SystemProps } from '../system';
+export declare const SwitchBase: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const Switch: VuiComponent<"label", SwitchProps> & {
     Button: typeof SwitchButton;
     Label: typeof SwitchLabel;

package/switch/switch.js

@@ -65,17 +65,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Switch = exports.SwitchBase = 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 switchButton_1 = require("./switchButton");
 var switchLabel_1 = require("./switchLabel");
 var core_1 = require("../core");
+var system_1 = require("../system");
 var t_1 = require("../t");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
-exports.SwitchBase = styled_components_2.default.label.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tline-height: normal;\n\twidth: fit-content;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\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\tline-height: normal;\n\twidth: fit-content;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"])), t_1.TBase, generator);
+exports.SwitchBase = styled_components_1.default.label.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tline-height: normal;\n\twidth: fit-content;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\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\tline-height: normal;\n\twidth: fit-content;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"])), t_1.TBase, system_1.system);
 exports.Switch = core_1.vui(function (props, ref) {
     var checked = props.checked, children = props.children, className = props.className, colorScheme = props.colorScheme, defaultChecked = props.defaultChecked, disabled = props.disabled, innerLabelOff = props.innerLabelOff, innerLabelOn = props.innerLabelOn, inputProps = props.inputProps, inputRef = props.inputRef, labelLeft = props.labelLeft, labelRight = props.labelRight, name = props.name, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, required = props.required, size = props.size, value = props.value, variant = props.variant, rest = __rest(props, ["checked", "children", "className", "colorScheme", "defaultChecked", "disabled", "innerLabelOff", "innerLabelOn", "inputProps", "inputRef", "labelLeft", "labelRight", "name", "onBlur", "onChange", "onFocus", "required", "size", "value", "variant"]);
     var _a = __read(react_1.useState(defaultChecked), 2), isChecked = _a[0], setIsChecked = _a[1];

package/switch/switch.types.d.ts

@@ -1,8 +1,8 @@
 import { HTMLAttributes } from 'react';
 import { ChangeEventHandler, FocusEventHandler } from '../core';
-import { FlexboxesProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
+import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface SwitchProps extends SwitchStyleProps, ThemingProps<'Switch'> {
+export interface SwitchProps extends SystemProps, ThemingProps<'Switch'> {
     checked?: boolean;
     colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
     disabled?: boolean;
@@ -19,5 +19,3 @@ export interface SwitchProps extends SwitchStyleProps, ThemingProps<'Switch'> {
     required?: boolean;
     value?: number | string;
 }
-export interface SwitchStyleProps extends FlexboxesProps, SizingProps, SpaceProps, TransitionsProps {
-}

package/switch/switchButton.d.ts

@@ -1,7 +1,8 @@
-import { SwitchButtonProps, SwitchButtonStyleProps, SwitchThumbStyleProps, SwitchTrackStyleProps } from './switchButton.types';
+import { SwitchButtonProps } from './switchButton.types';
+import { SystemProps } from '../system';
 export declare const SwitchInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
-export declare const SwitchThumb: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SwitchThumbStyleProps, never>;
-export declare const SwitchTrack: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SwitchTrackStyleProps, never>;
-export declare const SwitchButtonBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SwitchButtonStyleProps, never>;
+export declare const SwitchThumb: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const SwitchTrack: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const SwitchButtonBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const SwitchButton: import("../core").VuiComponent<"span", SwitchButtonProps>;
 export default SwitchButton;

package/switch/switchButton.js

@@ -65,19 +65,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwitchButton = exports.SwitchButtonBase = exports.SwitchTrack = exports.SwitchThumb = exports.SwitchInput = 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 buttonGenerator = styled_components_1.compose(styled_components_1.color, styled_components_1.fontSize, styled_components_1.sizing, styled_components_1.space);
-var thumbGenerator = styled_components_1.compose(styled_components_1.borders, styled_components_1.backgroundColor, styled_components_1.layout, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
-var trackGenerator = 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.SwitchInput = 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.SwitchThumb = styled_components_2.default.span.withConfig(core_1.forwardPropConfig(thumbGenerator))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: absolute;\n\n\t", "\n"], ["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: absolute;\n\n\t", "\n"])), thumbGenerator);
-exports.SwitchTrack = styled_components_2.default.span.withConfig(core_1.forwardPropConfig(trackGenerator))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tposition: relative;\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tposition: relative;\n\n\t", "\n"])), trackGenerator);
-exports.SwitchButtonBase = styled_components_2.default.span.withConfig(core_1.forwardPropConfig(buttonGenerator))(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\tcolor: white;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tborder-color: var(--vui-colors-disabled-border);\n\t\t\tbackground-color: var(--vui-colors-disabled-font);\n\t\t}\n\n\t\t", " {\n\t\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\t}\n\t}\n\n\t", "\n"], ["\n\tcolor: white;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tborder-color: var(--vui-colors-disabled-border);\n\t\t\tbackground-color: var(--vui-colors-disabled-font);\n\t\t}\n\n\t\t", " {\n\t\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\t}\n\t}\n\n\t", "\n"])), exports.SwitchThumb, exports.SwitchTrack, buttonGenerator);
+exports.SwitchInput = 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.SwitchThumb = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: absolute;\n\n\t", "\n"], ["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: absolute;\n\n\t", "\n"])), system_1.system);
+exports.SwitchTrack = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tposition: relative;\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tposition: relative;\n\n\t", "\n"])), system_1.system);
+exports.SwitchButtonBase = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\tcolor: white;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tborder-color: var(--vui-colors-disabled-border);\n\t\t\tbackground-color: var(--vui-colors-disabled-font);\n\t\t}\n\n\t\t", " {\n\t\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\t}\n\t}\n\n\t", "\n"], ["\n\tcolor: white;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tborder-color: var(--vui-colors-disabled-border);\n\t\t\tbackground-color: var(--vui-colors-disabled-font);\n\t\t}\n\n\t\t", " {\n\t\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\t}\n\t}\n\n\t", "\n"])), exports.SwitchThumb, exports.SwitchTrack, system_1.system);
 exports.SwitchButton = core_1.vui(function (props, ref) {
     var _a;
     var _b = (_a = context_1.useSwitch()) !== null && _a !== void 0 ? _a : {}, switchIsChecked = _b.isChecked, switchProps = __rest(_b, ["isChecked"]);

package/switch/switchButton.types.d.ts

@@ -1,8 +1,8 @@
 import { HTMLAttributes } from 'react';
 import { ChangeEventHandler, FocusEventHandler } from '../core';
-import { BackgroundColorProps, BordersProps, ColorProps, FontSizeProps, SizingProps, SpaceProps, TransformsProps, TransitionsProps } from '../system';
+import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface SwitchButtonProps extends SwitchThumbStyleProps, ThemingProps<'Switch'> {
+export interface SwitchButtonProps extends SystemProps, ThemingProps<'Switch'> {
     checked?: boolean;
     colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
     disabled?: boolean;
@@ -17,9 +17,3 @@ export interface SwitchButtonProps extends SwitchThumbStyleProps, ThemingProps<'
     required?: boolean;
     value?: number | string;
 }
-export interface SwitchButtonStyleProps extends ColorProps, FontSizeProps, SizingProps, SpaceProps {
-}
-export interface SwitchThumbStyleProps extends BackgroundColorProps, BordersProps, SizingProps, SpaceProps, TransformsProps, TransitionsProps {
-}
-export interface SwitchTrackStyleProps extends BackgroundColorProps, BordersProps, SizingProps, SpaceProps, TransitionsProps {
-}