@veracity/vui 0.0.8 → 0.0.10

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

@@ -1,4 +1,5 @@
-export declare const positionMapping: {
+import { Dict } from '../utils';
+export declare const spinnerPositionMapping: {
     bottom: {
         container: {
             flexDirection: string;
@@ -32,3 +33,4 @@ export declare const positionMapping: {
         };
     };
 };
+export declare const spinnerSpeedMapping: Dict<string>;

package/spinner/consts.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.positionMapping = void 0;
-exports.positionMapping = {
+exports.spinnerSpeedMapping = exports.spinnerPositionMapping = void 0;
+exports.spinnerPositionMapping = {
     bottom: {
         container: { flexDirection: 'column' },
         circle: { mb: 1 }
@@ -19,3 +19,8 @@ exports.positionMapping = {
         circle: { mt: 1 }
     }
 };
+exports.spinnerSpeedMapping = {
+    slow: '1s',
+    normal: '0.9s',
+    fast: '0.8s'
+};

package/spinner/spinner.js

@@ -30,21 +30,22 @@ 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\n\t", "\n\n\tanimation-duration: ", ";\n"], ["\n\tdisplay: flex;\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 className = props.className, emptyColor = props.emptyColor, size = props.size, _a = props.speed, speed = _a === void 0 ? '0.8s' : _a, text = props.text, _b = props.textPosition, textPosition = _b === void 0 ? 'bottom' : _b, thickness = props.thickness, rest = __rest(props, ["className", "emptyColor", "size", "speed", "text", "textPosition", "thickness"]);
+    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"]);
     var styles = core_1.useStyleConfig('Spinner', props);
     var isCustomSize = typeof size === 'number';
-    var positionProps = consts_1.positionMapping[textPosition];
+    var positionProps = consts_1.spinnerPositionMapping[textPosition];
+    var speed = (_a = consts_1.spinnerSpeedMapping[speedProp]) !== null && _a !== void 0 ? _a : speedProp;
     var circleProps = utils_1.filterUndefined({
         borderColor: emptyColor,
         borderWidth: isCustomSize ? thickness !== null && thickness !== void 0 ? thickness : 4 : thickness,
@@ -52,7 +53,7 @@ exports.Spinner = core_1.vui(function (props, ref) {
         w: isCustomSize ? size : undefined
     });
     return (react_1.default.createElement(box_1.default, __assign({ center: true, className: utils_1.cs('vui-spinner', className), ref: ref, transitionDuration: "fast" }, styles.container, positionProps.container, rest),
-        react_1.default.createElement(exports.SpinnerCircle, __assign({ animation: "spin", borderRadius: "round", className: "vui-spinnerCircle", flexShrink: "0", speed: speed }, styles.circle, positionProps.circle, circleProps)),
+        react_1.default.createElement(exports.SpinnerCircle, __assign({ animation: "spin", borderRadius: "round", className: "vui-spinnerCircle", speed: speed }, styles.circle, positionProps.circle, circleProps)),
         text && (react_1.default.createElement(t_1.default, __assign({ className: "vui-spinnerText" }, styles.text), text))));
 });
 exports.Spinner.displayName = 'Spinner';

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

@@ -6,7 +6,6 @@ declare function variantDefault(props: Dict): {
     circle: {
         borderColor: string;
         borderTopColor: string;
-        borderRightColor: string;
     };
     text: {};
 };

package/spinner/theme.js

@@ -3,12 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 function variantDefault(props) {
     var c = props.colorScheme;
     var container = {
-        color: c + ".60"
+        color: c + ".50"
     };
     var circle = {
         borderColor: c + ".20",
-        borderTopColor: c + ".60",
-        borderRightColor: c + ".60"
+        borderTopColor: c + ".50"
     };
     var text = {};
     return { container: container, circle: circle, text: text };

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 {
-}

package/system/animations.d.ts

@@ -1,9 +1,11 @@
-import { ITheme, SystemProp, VariantsType } from '@xstyled/system';
+import { SystemProp, VariantsType } from '@xstyled/system';
 import { VuiTheme } from '../theme';
-export declare type AnimationGetter<T extends ITheme = VuiTheme> = VariantsType<T['animations']>;
-declare type AnimationProp<T extends ITheme> = SystemProp<AnimationGetter<T>, T>;
-export interface AnimationProps<T extends ITheme = VuiTheme> {
-    animation?: AnimationProp<T>;
-    hoverAnimation?: AnimationProp<T>;
+export declare type AnimationGetter = VariantsType<VuiTheme['animations']>;
+declare type AnimationProp = SystemProp<AnimationGetter, VuiTheme>;
+export interface AnimationProps {
+    animation?: AnimationProp;
+    hoverAnimation?: AnimationProp;
 }
-export { AnimationProps as AnimationsProps };
+export interface AnimationsProps extends AnimationProps {
+}
+export {};

package/system/backgrounds.d.ts

@@ -1,13 +1,13 @@
-import { ITheme, SystemProp } from '@xstyled/system';
+import { SystemProp } from '@xstyled/system';
 import { ColorGetter } from './colors';
 import { VuiTheme } from '../theme';
-declare type BackgroundColorProp<T extends ITheme> = SystemProp<ColorGetter<T>, T>;
-export interface BackgroundColorProps<T extends ITheme = VuiTheme> {
-    activeBg?: BackgroundColorProp<T>;
-    bg?: BackgroundColorProp<T>;
-    disabledBg?: BackgroundColorProp<T>;
-    hoverBg?: BackgroundColorProp<T>;
+declare type BackgroundColorProp = SystemProp<ColorGetter, VuiTheme>;
+export interface BackgroundColorProps {
+    activeBg?: BackgroundColorProp;
+    bg?: BackgroundColorProp;
+    disabledBg?: BackgroundColorProp;
+    hoverBg?: BackgroundColorProp;
 }
-export interface BackgroundsProps<T extends ITheme = VuiTheme> extends BackgroundColorProps<T> {
+export interface BackgroundsProps extends BackgroundColorProps {
 }
 export {};