@veracity/vui 0.0.7 → 0.0.8

package/icons/consts.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultIcons = void 0;
+var cuiCheckboxIndeterminate_1 = __importDefault(require("./baseIcons/cui/cuiCheckboxIndeterminate"));
+var cuiCheckboxSelected_1 = __importDefault(require("./baseIcons/cui/cuiCheckboxSelected"));
+var cuiCheckboxUnselected_1 = __importDefault(require("./baseIcons/cui/cuiCheckboxUnselected"));
+var cuiRadioSelected_1 = __importDefault(require("./baseIcons/cui/cuiRadioSelected"));
+var cuiRadioUnselected_1 = __importDefault(require("./baseIcons/cui/cuiRadioUnselected"));
+var falCheck_1 = __importDefault(require("./baseIcons/fal/falCheck"));
+var falCheckCircle_1 = __importDefault(require("./baseIcons/fal/falCheckCircle"));
+var falEllipsisH_1 = __importDefault(require("./baseIcons/fal/falEllipsisH"));
+var falEllipsisV_1 = __importDefault(require("./baseIcons/fal/falEllipsisV"));
+var falExclamationCircle_1 = __importDefault(require("./baseIcons/fal/falExclamationCircle"));
+var falExclamationTriangle_1 = __importDefault(require("./baseIcons/fal/falExclamationTriangle"));
+var falInfoCircle_1 = __importDefault(require("./baseIcons/fal/falInfoCircle"));
+var falPlus_1 = __importDefault(require("./baseIcons/fal/falPlus"));
+var falSpinner_1 = __importDefault(require("./baseIcons/fal/falSpinner"));
+var falTimes_1 = __importDefault(require("./baseIcons/fal/falTimes"));
+var falTimesCircle_1 = __importDefault(require("./baseIcons/fal/falTimesCircle"));
+/**
+ * Default icons are fundamental to functioning of certain components.
+ * They are added to the icon library in order to avoid loading them from CDN.
+ */
+exports.defaultIcons = {
+    cuiCheckboxIndeterminate: cuiCheckboxIndeterminate_1.default,
+    cuiCheckboxSelected: cuiCheckboxSelected_1.default,
+    cuiCheckboxUnselected: cuiCheckboxUnselected_1.default,
+    cuiRadioSelected: cuiRadioSelected_1.default,
+    cuiRadioUnselected: cuiRadioUnselected_1.default,
+    falCheck: falCheck_1.default,
+    falCheckCircle: falCheckCircle_1.default,
+    falEllipsisH: falEllipsisH_1.default,
+    falEllipsisV: falEllipsisV_1.default,
+    falExclamationCircle: falExclamationCircle_1.default,
+    falExclamationTriangle: falExclamationTriangle_1.default,
+    falInfoCircle: falInfoCircle_1.default,
+    falPlus: falPlus_1.default,
+    falSpinner: falSpinner_1.default,
+    falTimes: falTimes_1.default,
+    falTimesCircle: falTimesCircle_1.default
+};

package/icons/index.d.ts

@@ -0,0 +1,3 @@
+export * from './consts';
+export * from './types';
+export { default as library } from './library';

package/icons/index.js

@@ -0,0 +1,20 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.library = void 0;
+__exportStar(require("./consts"), exports);
+__exportStar(require("./types"), exports);
+var library_1 = require("./library");
+Object.defineProperty(exports, "library", { enumerable: true, get: function () { return __importDefault(library_1).default; } });

package/icons/library.d.ts

@@ -0,0 +1,11 @@
+import { IconDefinition } from './types';
+declare class Library {
+    cache: Map<string, IconDefinition>;
+    add: (...icons: IconDefinition[]) => void;
+    get: (name: string) => IconDefinition | undefined;
+    has: (name: string) => boolean;
+    init: () => void;
+    reset: () => void;
+}
+declare const library: Library;
+export default library;

package/icons/library.js

@@ -0,0 +1,60 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var consts_1 = require("./consts");
+var Library = /** @class */ (function () {
+    function Library() {
+        var _this = this;
+        this.cache = new Map();
+        this.add = function () {
+            var icons = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                icons[_i] = arguments[_i];
+            }
+            icons.forEach(function (icon) {
+                icon.name && _this.cache.set(icon.name, icon);
+            });
+        };
+        this.get = function (name) {
+            var icon = _this.cache.get(name);
+            if (!icon) {
+                /* eslint-disable-next-line no-console */
+                console.error("Icon " + name + " does not exist in the library.");
+            }
+            return icon;
+        };
+        this.has = function (name) {
+            return _this.cache.has(name);
+        };
+        this.init = function () {
+            _this.add.apply(_this, __spreadArray([], __read(Object.values(consts_1.defaultIcons))));
+        };
+        this.reset = function () {
+            _this.cache.clear();
+        };
+    }
+    return Library;
+}());
+var library = new Library();
+library.init();
+exports.default = library;

package/icons/types.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { BaseIcon } from './baseIcons/types';
+import { PropsOf } from '../core';
+import Svg from '../svg';
+export interface IconDefinition {
+    details: IconDetails;
+    name?: string;
+    pathProps?: React.SVGProps<SVGPathElement> | React.SVGProps<SVGPathElement>[];
+    svgProps?: PropsOf<typeof Svg>;
+}
+export declare type IconDetails = [
+    number,
+    number,
+    string[],
+    string,
+    // unicode
+    string | string[]
+];
+export declare type VuiIcon = keyof VuiIcons;
+export interface VuiIcons extends Record<BaseIcon, IconDefinition> {
+}

package/icons/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/index.d.ts

@@ -7,6 +7,7 @@ export * from './core';
 export * from './divider';
 export * from './heading';
 export * from './icon';
+export * from './icons';
 export * from './input';
 export * from './label';
 export * from './link';

package/index.js

@@ -19,6 +19,7 @@ __exportStar(require("./core"), exports);
 __exportStar(require("./divider"), exports);
 __exportStar(require("./heading"), exports);
 __exportStar(require("./icon"), exports);
+__exportStar(require("./icons"), exports);
 __exportStar(require("./input"), exports);
 __exportStar(require("./label"), exports);
 __exportStar(require("./link"), exports);

package/input/input.js

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

package/label/label.js

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

package/link/link.js

@@ -38,7 +38,7 @@ 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.Link = core_1.forwardRef(function (props, ref) {
+exports.Link = core_1.vui(function (props, ref) {
     var _a = core_1.omitThemingProps(props), className = _a.className, decoration = _a.decoration, _b = _a.hoverDecoration, hoverDecoration = _b === void 0 ? 'underline' : _b, isExternal = _a.isExternal, weight = _a.weight, rest = __rest(_a, ["className", "decoration", "hoverDecoration", "isExternal", "weight"]);
     var styles = core_1.useStyleConfig('Link', props);
     var aliasedProps = utils_1.filterUndefined({

package/list/list.d.ts

@@ -3,7 +3,7 @@ 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>;
-export declare const List: VuiComponent<"div", ListProps> & {
+export declare const List: VuiComponent<"ul", ListProps> & {
     Icon: typeof ListIcon;
     Item: typeof ListItem;
 };

package/list/list.js

@@ -57,9 +57,9 @@ var listIcon_1 = __importDefault(require("./listIcon"));
 var listItem_1 = __importDefault(require("./listItem"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.borders, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.typography);
+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.List = core_1.forwardRef(function (props, ref) {
+exports.List = core_1.vui(function (props, ref) {
     var children = props.children, className = props.className, colorScheme = props.colorScheme, isInteractive = props.isInteractive, size = props.size, subheader = props.subheader, variant = props.variant, rest = __rest(props, ["children", "className", "colorScheme", "isInteractive", "size", "subheader", "variant"]);
     var styles = core_1.useStyleConfig('List', props);
     var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, isInteractive: isInteractive, size: size, styles: styles, variant: variant }); }, [

package/list/list.types.d.ts

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

package/list/listIcon.js

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

package/list/listItem.js

@@ -39,7 +39,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.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.ListItem = core_1.forwardRef(function (props, ref) {
+exports.ListItem = core_1.vui(function (props, ref) {
     var listProps = context_1.useList();
     var mergedProps = __assign(__assign({}, listProps), props);
     var children = mergedProps.children, center = mergedProps.center, centerH = mergedProps.centerH, _a = mergedProps.centerV, centerV = _a === void 0 ? true : _a, className = mergedProps.className, column = mergedProps.column, disabled = mergedProps.disabled, iconRight = mergedProps.iconRight, iconLeft = mergedProps.iconLeft, _b = mergedProps.isInteractive, isInteractive = _b === void 0 ? props.onClick !== undefined : _b, isSelected = mergedProps.isSelected, onClick = mergedProps.onClick, rest = __rest(mergedProps, ["children", "center", "centerH", "centerV", "className", "column", "disabled", "iconRight", "iconLeft", "isInteractive", "isSelected", "onClick"]);

package/p/p.js

@@ -38,7 +38,7 @@ 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.P = core_1.forwardRef(function (props, ref) {
+exports.P = core_1.vui(function (props, ref) {
     var _a = core_1.omitThemingProps(props), align = _a.align, casing = _a.casing, className = _a.className, decoration = _a.decoration, weight = _a.weight, rest = __rest(_a, ["align", "casing", "className", "decoration", "weight"]);
     var styles = core_1.useStyleConfig('P', props);
     var aliasedProps = utils_1.filterUndefined({

package/package.json

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

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/spinner.js

@@ -40,7 +40,7 @@ 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) {
+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 styles = core_1.useStyleConfig('Spinner', props);
     var isCustomSize = typeof size === 'number';

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);