@veracity/vui 0.0.7 → 0.0.9

package/radio/radio.js

@@ -43,7 +43,7 @@ var controlGenerator = styled_components_1.compose(styled_components_1.borders,
 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.Radio = core_1.forwardRef(function (props, ref) {
+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"]);
     var mergedProps = __assign(__assign({}, radioGroupProps), props);

package/radio/radioGroup.js

@@ -73,7 +73,7 @@ var core_1 = require("../core");
 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.RadioGroup = core_1.forwardRef(function (props, ref) {
+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;
     var _b = __read(react_1.useState(defaultValue), 2), valueState = _b[0], setValueState = _b[1];

package/skeleton/skeleton.js

@@ -14,25 +14,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -51,21 +32,20 @@ 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 = __importStar(require("styled-components"));
+var styled_components_2 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 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);
-var pulse = styled_components_2.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n  100% {\n    opacity: 1;\n  }\n"], ["\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n  100% {\n    opacity: 1;\n  }\n"])));
-exports.SkeletonBase = styled_components_2.default.div.withConfig(core_1.forwardPropConfig(generator))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tanimation: ", " 1.5s ease-in-out 0.5s infinite;\n\n\t", "\n"], ["\n\tanimation: ", " 1.5s ease-in-out 0.5s infinite;\n\n\t", "\n"])), pulse, generator);
-exports.Skeleton = core_1.forwardRef(function (props, ref) {
+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.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);
     var arr = Array(repeat).fill(0);
     var aliasedProps = utils_1.filterUndefined({
         w: props.variant === 'circle' ? styles.h : undefined
     });
-    return (react_1.default.createElement(react_1.default.Fragment, null, arr.map(function (_, i) { return (react_1.default.createElement(exports.SkeletonBase, __assign({ bg: "blue.20", className: utils_1.cs('vui-skeleton', className), key: i, ref: ref }, styles, aliasedProps, rest))); })));
+    return (react_1.default.createElement(react_1.default.Fragment, null, arr.map(function (_, i) { return (react_1.default.createElement(exports.SkeletonBase, __assign({ className: utils_1.cs('vui-skeleton', className), key: i, ref: ref }, styles, aliasedProps, rest))); })));
 });
 exports.Skeleton.displayName = 'Skeleton';
 exports.default = exports.Skeleton;
-var templateObject_1, templateObject_2;
+var templateObject_1;

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

@@ -39,12 +39,14 @@ var core_1 = require("../core");
 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.Spinner = core_1.forwardRef(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"]);
+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.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"]);
     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 +54,7 @@ exports.Spinner = core_1.forwardRef(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/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/styles/animations.d.ts

@@ -1,17 +1,9 @@
-export declare const fadeDown = "\n\tfrom { opacity: 0; transform: translateY(-20px) }\n\tto { opacity: 1; transform: translateY(0) }\n";
-export declare const fadeIn = "\n\tfrom { opacity: 0; }\n\tto { opacity: 1; }\n";
-export declare const fadeLeft = "\n\tfrom { opacity: 0; transform: translateX(20px) }\n\tto { opacity: 1; transform: translateX(0) }\n";
-export declare const fadeOut = "\n\tfrom { opacity: 1; }\n\tto { opacity: 0; }\n";
-export declare const fadeRight = "\n\tfrom { opacity: 0; transform: translateX(-20px) }\n\tto { opacity: 1; transform: translateX(0) }\n";
-export declare const fadeUp = "\n\tfrom { opacity: 0; transform: translateY(20px) }\n\tto { opacity: 1; transform: translateY(0) }\n";
-export declare const spin = "\n\tfrom { transform: rotate(0deg); }\n\tto { transform: rotate(360deg); }\n";
-declare const _default: {
-    fadeDown: string;
-    fadeIn: string;
-    fadeLeft: string;
-    fadeOut: string;
-    fadeRight: string;
-    fadeUp: string;
-    spin: string;
-};
-export default _default;
+export declare const bounce = "\n\t0%, 100% {\n\t\tanimationTimingFunction: cubic-bezier(0.8, 0, 1, 1);\n\t\ttransform: translateY(-25%);\n\t}\n\t50% {\n\t\tanimationTimingFunction: cubic-bezier(0, 0, 0.2, 1);\n\t\ttransform: translateY(0);\n\t}\n";
+export declare const fadeDown = "\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(-20px)\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0)\n\t}\n";
+export declare const fadeIn = "\n\tfrom {\n\t\topacity: 0;\n\t}\n\tto {\n\t\topacity: 1;\n\t}\n";
+export declare const fadeLeft = "\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateX(20px)\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateX(0)\n\t}\n";
+export declare const fadeOut = "\n\tfrom {\n\t\topacity: 1;\n\t}\n\tto {\n\t\topacity: 0;\n\t}\n";
+export declare const fadeRight = "\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateX(-20px)\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateX(0)\n\t}\n";
+export declare const fadeUp = "\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(20px)\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0)\n\t}\n";
+export declare const pulse = "\n\t0%, 100% {\n\t\topacity: 1;\n\t}\n\t50% {\n\t\topacity: .5;\n\t}\n";
+export declare const spin = "\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n";

package/styles/animations.js

@@ -1,19 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.spin = exports.fadeUp = exports.fadeRight = exports.fadeOut = exports.fadeLeft = exports.fadeIn = exports.fadeDown = void 0;
-exports.fadeDown = "\n\tfrom { opacity: 0; transform: translateY(-20px) }\n\tto { opacity: 1; transform: translateY(0) }\n";
-exports.fadeIn = "\n\tfrom { opacity: 0; }\n\tto { opacity: 1; }\n";
-exports.fadeLeft = "\n\tfrom { opacity: 0; transform: translateX(20px) }\n\tto { opacity: 1; transform: translateX(0) }\n";
-exports.fadeOut = "\n\tfrom { opacity: 1; }\n\tto { opacity: 0; }\n";
-exports.fadeRight = "\n\tfrom { opacity: 0; transform: translateX(-20px) }\n\tto { opacity: 1; transform: translateX(0) }\n";
-exports.fadeUp = "\n\tfrom { opacity: 0; transform: translateY(20px) }\n\tto { opacity: 1; transform: translateY(0) }\n";
-exports.spin = "\n\tfrom { transform: rotate(0deg); }\n\tto { transform: rotate(360deg); }\n";
-exports.default = {
-    fadeDown: 'fadeDown 0.3s ease-in-out',
-    fadeIn: 'fadeIn 0.3s ease-in-out',
-    fadeLeft: 'fadeLeft 0.3s ease-in-out',
-    fadeOut: 'fadeOut 0.3s ease-in-out',
-    fadeRight: 'fadeRight 0.3s ease-in-out',
-    fadeUp: 'fadeUp 0.3s ease-in-out',
-    spin: 'spin 1s linear infinite'
-};
+exports.spin = exports.pulse = exports.fadeUp = exports.fadeRight = exports.fadeOut = exports.fadeLeft = exports.fadeIn = exports.fadeDown = exports.bounce = void 0;
+exports.bounce = "\n\t0%, 100% {\n\t\tanimationTimingFunction: cubic-bezier(0.8, 0, 1, 1);\n\t\ttransform: translateY(-25%);\n\t}\n\t50% {\n\t\tanimationTimingFunction: cubic-bezier(0, 0, 0.2, 1);\n\t\ttransform: translateY(0);\n\t}\n";
+exports.fadeDown = "\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(-20px)\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0)\n\t}\n";
+exports.fadeIn = "\n\tfrom {\n\t\topacity: 0;\n\t}\n\tto {\n\t\topacity: 1;\n\t}\n";
+exports.fadeLeft = "\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateX(20px)\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateX(0)\n\t}\n";
+exports.fadeOut = "\n\tfrom {\n\t\topacity: 1;\n\t}\n\tto {\n\t\topacity: 0;\n\t}\n";
+exports.fadeRight = "\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateX(-20px)\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateX(0)\n\t}\n";
+exports.fadeUp = "\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(20px)\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0)\n\t}\n";
+exports.pulse = "\n\t0%, 100% {\n\t\topacity: 1;\n\t}\n\t50% {\n\t\topacity: .5;\n\t}\n";
+exports.spin = "\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n";

package/styles/helpers.d.ts

@@ -1,8 +1,4 @@
-import { StyledProps } from 'styled-components';
-import { Screen } from '../theme';
 export declare const lineClamp: (maxLines: number) => string;
-export declare const mediaDown: (key: Screen) => (props: StyledProps<unknown>) => string;
-export declare const mediaUp: (key: Screen) => (props: StyledProps<unknown>) => string;
 export declare const resetLink = "\n\ttext-decoration: none;\n\tcolor: inherit;\n";
 export declare const resetList = "\n\tlist-style: none;\n\tpadding-left: 0;\n";
 export declare const truncateText = "\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n";

package/styles/helpers.js

@@ -1,16 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.truncateText = exports.resetList = exports.resetLink = exports.mediaUp = exports.mediaDown = exports.lineClamp = void 0;
+exports.truncateText = exports.resetList = exports.resetLink = exports.lineClamp = void 0;
 var lineClamp = function (maxLines) { return "\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: " + maxLines + ";\n\t-webkit-box-orient: vertical;  \n\toverflow: hidden;\n"; };
 exports.lineClamp = lineClamp;
-var mediaDown = function (key) { return function (props) {
-    return "@media (max-width: " + props.theme.screens[key] + "px)";
-}; };
-exports.mediaDown = mediaDown;
-var mediaUp = function (key) { return function (props) {
-    return "@media (min-width: " + props.theme.screens[key] + "px)";
-}; };
-exports.mediaUp = mediaUp;
 exports.resetLink = "\n\ttext-decoration: none;\n\tcolor: inherit;\n";
 exports.resetList = "\n\tlist-style: none;\n\tpadding-left: 0;\n";
 exports.truncateText = "\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n";

package/styles/index.d.ts

@@ -1,13 +1,3 @@
 export * from './animations';
-export * from './colors';
 export * from './helpers';
-export { default as animations } from './animations';
-export { default as colors } from './colors';
-export { default as durations } from './durations';
 export { default as fontFaces } from './fontFaces';
-export { default as fonts } from './fonts';
-export { default as fontSizes } from './fontSizes';
-export { default as fontWeights } from './fontWeights';
-export { default as radii } from './radii';
-export { default as screens } from './screens';
-export { default as shadows } from './shadows';

package/styles/index.js

@@ -13,27 +13,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.shadows = exports.screens = exports.radii = exports.fontWeights = exports.fontSizes = exports.fonts = exports.fontFaces = exports.durations = exports.colors = exports.animations = void 0;
+exports.fontFaces = void 0;
 __exportStar(require("./animations"), exports);
-__exportStar(require("./colors"), exports);
 __exportStar(require("./helpers"), exports);
-var animations_1 = require("./animations");
-Object.defineProperty(exports, "animations", { enumerable: true, get: function () { return __importDefault(animations_1).default; } });
-var colors_1 = require("./colors");
-Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return __importDefault(colors_1).default; } });
-var durations_1 = require("./durations");
-Object.defineProperty(exports, "durations", { enumerable: true, get: function () { return __importDefault(durations_1).default; } });
 var fontFaces_1 = require("./fontFaces");
 Object.defineProperty(exports, "fontFaces", { enumerable: true, get: function () { return __importDefault(fontFaces_1).default; } });
-var fonts_1 = require("./fonts");
-Object.defineProperty(exports, "fonts", { enumerable: true, get: function () { return __importDefault(fonts_1).default; } });
-var fontSizes_1 = require("./fontSizes");
-Object.defineProperty(exports, "fontSizes", { enumerable: true, get: function () { return __importDefault(fontSizes_1).default; } });
-var fontWeights_1 = require("./fontWeights");
-Object.defineProperty(exports, "fontWeights", { enumerable: true, get: function () { return __importDefault(fontWeights_1).default; } });
-var radii_1 = require("./radii");
-Object.defineProperty(exports, "radii", { enumerable: true, get: function () { return __importDefault(radii_1).default; } });
-var screens_1 = require("./screens");
-Object.defineProperty(exports, "screens", { enumerable: true, get: function () { return __importDefault(screens_1).default; } });
-var shadows_1 = require("./shadows");
-Object.defineProperty(exports, "shadows", { enumerable: true, get: function () { return __importDefault(shadows_1).default; } });

package/svg/svg.js

@@ -110,11 +110,18 @@ var core_1 = require("../core");
 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.Svg = core_1.forwardRef(function (_a, ref) {
+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];
     var _c = state.content, content = _c === void 0 ? '' : _c, _d = state.svgAttributes, svgAttributes = _d === void 0 ? {} : _d;
+    var isMountedRef = react_1.useRef(false);
     var srcRef = react_1.useRef(src);
+    react_1.useEffect(function () {
+        isMountedRef.current = true;
+        return function () {
+            isMountedRef.current = false;
+        };
+    }, []);
     react_1.useEffect(function () {
         srcRef.current = src;
         function loadSvg(src) {
@@ -132,14 +139,16 @@ exports.Svg = core_1.forwardRef(function (_a, ref) {
                             svgAttributes_1 = helpers_1.getAttributes(svgEl);
                             svgAttributes_1['data-src'] = src !== null && src !== void 0 ? src : '';
                             // Update state only when requested 'src' and current 'src' are the same
-                            if (srcRef.current === src) {
+                            if (srcRef.current === src && isMountedRef.current) {
                                 setState({ content: content_1, svgAttributes: svgAttributes_1 });
                             }
                             return [3 /*break*/, 3];
                         case 2:
                             error_1 = _a.sent();
                             console.error(error_1); // eslint-disable-line no-console
-                            setState(helpers_1.initState());
+                            if (isMountedRef.current) {
+                                setState(helpers_1.initState());
+                            }
                             return [3 /*break*/, 3];
                         case 3: return [2 /*return*/];
                     }

package/switch/switch.js

@@ -76,7 +76,7 @@ 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.Switch = core_1.forwardRef(function (props, ref) {
+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];
     var styles = core_1.useStyleConfig('Switch', props);

package/switch/switchButton.js

@@ -78,7 +78,7 @@ exports.SwitchInput = styled_components_2.default.input(templateObject_1 || (tem
 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.SwitchButton = core_1.forwardRef(function (props, ref) {
+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"]);
     var mergedProps = __assign(__assign({}, switchProps), props);

package/switch/switchLabel.js

@@ -19,7 +19,7 @@ var react_1 = __importDefault(require("react"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
-exports.SwitchLabel = core_1.forwardRef(function (props, ref) {
+exports.SwitchLabel = core_1.vui(function (props, ref) {
     var _a;
     var switchProps = (_a = context_1.useSwitch()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, switchProps), props);

package/system/space.d.ts

@@ -5,71 +5,85 @@ declare type MarginProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface MarginProps<T extends ITheme = VuiTheme> {
     m?: MarginProp<T>;
     hoverM?: MarginProp<T>;
+    lastM?: MarginProp<T>;
 }
 declare type MarginTopProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface MarginTopProps<T extends ITheme = VuiTheme> {
     mt?: MarginTopProp<T>;
     hoverMt?: MarginTopProp<T>;
+    lastMt?: MarginTopProp<T>;
 }
 declare type MarginRightProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface MarginRightProps<T extends ITheme = VuiTheme> {
     mr?: MarginRightProp<T>;
     hoverMr?: MarginRightProp<T>;
+    lastMr?: MarginRightProp<T>;
 }
 declare type MarginBottomProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface MarginBottomProps<T extends ITheme = VuiTheme> {
     mb?: MarginBottomProp<T>;
     hoverMb?: MarginBottomProp<T>;
+    lastMb?: MarginBottomProp<T>;
 }
 declare type MarginLeftProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface MarginLeftProps<T extends ITheme = VuiTheme> {
     ml?: MarginLeftProp<T>;
     hoverMl?: MarginLeftProp<T>;
+    lastMl?: MarginLeftProp<T>;
 }
 declare type MarginXProp<T extends ITheme = VuiTheme> = SystemProp<SpaceGetter<T>, T>;
 export interface MarginXProps<T extends ITheme = VuiTheme> {
     mx?: MarginXProp<T>;
     hoverMx?: MarginXProp<T>;
+    lastMx?: MarginXProp<T>;
 }
 declare type MarginYProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface MarginYProps<T extends ITheme = VuiTheme> {
     my?: MarginYProp<T>;
     hoverMy?: MarginYProp<T>;
+    lastMy?: MarginYProp<T>;
 }
 declare type PaddingProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface PaddingProps<T extends ITheme = VuiTheme> {
     p?: PaddingProp<T>;
     hoverP?: PaddingProp<T>;
+    lastP?: PaddingProp<T>;
 }
 declare type PaddingTopProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface PaddingTopProps<T extends ITheme = VuiTheme> {
     pt?: PaddingTopProp<T>;
     hoverPt?: PaddingTopProp<T>;
+    lastPt?: PaddingTopProp<T>;
 }
 declare type PaddingRightProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface PaddingRightProps<T extends ITheme = VuiTheme> {
     pr?: PaddingRightProp<T>;
     hoverPr?: PaddingRightProp<T>;
+    lastPr?: PaddingRightProp<T>;
 }
 declare type PaddingBottomProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface PaddingBottomProps<T extends ITheme = VuiTheme> {
     pb?: PaddingBottomProp<T>;
     hoverPb?: PaddingBottomProp<T>;
+    lastPb?: PaddingBottomProp<T>;
 }
 declare type PaddingLeftProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface PaddingLeftProps<T extends ITheme = VuiTheme> {
     pl?: PaddingLeftProp<T>;
     hoverPl?: PaddingLeftProp<T>;
+    lastPl?: PaddingLeftProp<T>;
 }
 declare type PaddingXProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface PaddingXProps<T extends ITheme = VuiTheme> {
     px?: PaddingXProp<T>;
     hoverPx?: PaddingXProp<T>;
+    lastPx?: PaddingXProp<T>;
 }
 declare type PaddingYProp<T extends ITheme> = SystemProp<SpaceGetter<T>, T>;
 export interface PaddingYProps<T extends ITheme = VuiTheme> {
     py?: PaddingYProp<T>;
     hoverPy?: PaddingYProp<T>;
+    lastPy?: PaddingYProp<T>;
 }
 export interface SpaceProps<T extends ITheme = VuiTheme> extends MarginProps<T>, MarginTopProps<T>, MarginRightProps<T>, MarginBottomProps<T>, MarginLeftProps<T>, MarginXProps<T>, MarginYProps<T>, PaddingProps<T>, PaddingTopProps<T>, PaddingRightProps<T>, PaddingBottomProps<T>, PaddingLeftProps<T>, PaddingXProps<T>, PaddingYProps<T> {
 }

package/t/t.js

@@ -36,10 +36,10 @@ var styled_components_2 = __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, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
+var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.cursor, styled_components_1.flexboxes, system_1.isTruncated, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
 exports.TBase = styled_components_2.default.span.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
-exports.T = core_1.forwardRef(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), align = _a.align, casing = _a.casing, centerV = _a.centerV, className = _a.className, decoration = _a.decoration, isFlex = _a.isFlex, weight = _a.weight, rest = __rest(_a, ["align", "casing", "centerV", "className", "decoration", "isFlex", "weight"]);
+exports.T = core_1.vui(function (props, ref) {
+    var _a = core_1.omitThemingProps(props), align = _a.align, casing = _a.casing, centerV = _a.centerV, children = _a.children, className = _a.className, decoration = _a.decoration, isFlex = _a.isFlex, text = _a.text, weight = _a.weight, rest = __rest(_a, ["align", "casing", "centerV", "children", "className", "decoration", "isFlex", "text", "weight"]);
     var styles = core_1.useStyleConfig('T', props);
     var aliasedProps = utils_1.filterUndefined({
         alignItems: centerV ? 'center' : undefined,
@@ -49,7 +49,7 @@ exports.T = core_1.forwardRef(function (props, ref) {
         textDecoration: decoration,
         textTransform: casing
     });
-    return (react_1.default.createElement(exports.TBase, __assign({ className: utils_1.cs('vui-t', className), ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest)));
+    return (react_1.default.createElement(exports.TBase, __assign({ className: utils_1.cs('vui-t', className), ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
 });
 exports.T.displayName = 'T';
 exports.default = exports.T;

package/t/t.types.d.ts

@@ -1,4 +1,4 @@
-import { IsTruncatedProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { BackgroundColorProps, BordersProps, CursorProps, FlexboxesProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface TProps extends TStyleProps, ThemingProps<'T'> {
     align?: TypographyProps['textAlign'];
@@ -6,7 +6,8 @@ export interface TProps extends TStyleProps, ThemingProps<'T'> {
     centerV?: boolean;
     decoration?: TypographyProps['textDecoration'];
     isFlex?: boolean;
+    text?: number | string;
     weight?: TypographyProps['fontWeight'];
 }
-export interface TStyleProps extends IsTruncatedProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
+export interface TStyleProps extends BackgroundColorProps, BordersProps, CursorProps, FlexboxesProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
 }

package/textarea/textarea.js

@@ -37,7 +37,7 @@ var core_1 = require("../core");
 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.fontSize, styled_components_1.resize, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
 exports.TextareaBase = styled_components_2.default.textarea.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tborder-width: 1px;\n\tmin-height: 80px;\n\toutline: none;\n\tresize: none;\n\twidth: 100%;\n\n\t:disabled,\n\t:disabled::placeholder {\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\t:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"], ["\n\tborder-width: 1px;\n\tmin-height: 80px;\n\toutline: none;\n\tresize: none;\n\twidth: 100%;\n\n\t:disabled,\n\t:disabled::placeholder {\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\t:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"])), generator);
-exports.Textarea = core_1.forwardRef(function (props, ref) {
+exports.Textarea = core_1.vui(function (props, ref) {
     var _a = core_1.omitThemingProps(props), className = _a.className, rest = __rest(_a, ["className"]);
     var styles = core_1.useStyleConfig('Textarea', props);
     return (react_1.default.createElement(exports.TextareaBase, __assign({ borderRadius: "md", className: utils_1.cs('vui-textarea', className), p: 1, placeholderColor: "grey.60", ref: ref, transitionDuration: "fast" }, styles, rest)));

package/theme/components.d.ts

@@ -143,7 +143,12 @@ declare const _default: {
                 borderWidth: number;
             };
             solid: (props: import("..").Dict<any>) => {
-                borderColor: string;
+                hoverBg: string;
+                activeBg: string;
+                bg: string;
+                color: string;
+            };
+            subtle: (props: import("..").Dict<any>) => {
                 hoverBg: string;
                 activeBg: string;
                 bg: string;
@@ -629,7 +634,6 @@ declare const _default: {
                 circle: {
                     borderColor: string;
                     borderTopColor: string;
-                    borderRightColor: string;
                 };
                 text: {};
             };

package/theme/defaultTheme.d.ts

@@ -1,13 +1,16 @@
 declare const defaultTheme: {
     animations: {
+        bounce: string;
         fadeDown: string;
         fadeIn: string;
         fadeLeft: string;
         fadeOut: string;
         fadeRight: string;
         fadeUp: string;
+        pulse: string;
         spin: string;
     };
+    borders: {};
     colors: {
         blue: {
             10: string;
@@ -122,6 +125,14 @@ declare const defaultTheme: {
         lg: number;
         round: number;
     };
+    ringWidths: {};
+    screens: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+    };
     shadows: {
         0: string;
         1: string;
@@ -130,16 +141,14 @@ declare const defaultTheme: {
         4: string;
         5: string;
     };
-    screens: {
-        xs: number;
-        sm: number;
-        md: number;
-        lg: number;
-        xl: number;
-    };
+    sizes: {};
+    spaces: {};
     transformers: {
         space: (value: string | number) => string;
     };
+    transforms: {};
+    transitions: {};
+    zIndices: {};
     components: {
         Alert: {
             defaultProps: {
@@ -285,7 +294,12 @@ declare const defaultTheme: {
                     borderWidth: number;
                 };
                 solid: (props: import("..").Dict<any>) => {
-                    borderColor: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    bg: string;
+                    color: string;
+                };
+                subtle: (props: import("..").Dict<any>) => {
                     hoverBg: string;
                     activeBg: string;
                     bg: string;
@@ -771,7 +785,6 @@ declare const defaultTheme: {
                     circle: {
                         borderColor: string;
                         borderTopColor: string;
-                        borderRightColor: string;
                     };
                     text: {};
                 };