@veracity/vui 0.2.0 → 0.2.1

package/p/p.js

@@ -35,17 +35,17 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.PBase = styled_components_1.default.p.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
-exports.P = core_1.vui(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), align = _a.align, casing = _a.casing, children = _a.children, className = _a.className, decoration = _a.decoration, text = _a.text, weight = _a.weight, rest = __rest(_a, ["align", "casing", "children", "className", "decoration", "text", "weight"]);
-    var styles = core_1.useStyleConfig('P', props);
-    var aliasedProps = utils_1.filterUndefined({
+exports.PBase = styled_components_1.default.p.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
+exports.P = (0, core_1.vui)(function (props, ref) {
+    var _a = (0, core_1.omitThemingProps)(props), align = _a.align, casing = _a.casing, children = _a.children, className = _a.className, decoration = _a.decoration, text = _a.text, weight = _a.weight, rest = __rest(_a, ["align", "casing", "children", "className", "decoration", "text", "weight"]);
+    var styles = (0, core_1.useStyleConfig)('P', props);
+    var aliasedProps = (0, utils_1.filterUndefined)({
         fontWeight: weight,
         textAlign: align,
         textDecoration: decoration,
         textTransform: casing
     });
-    return (react_1.default.createElement(exports.PBase, __assign({ className: utils_1.cs('vui-p', className), ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
+    return (react_1.default.createElement(exports.PBase, __assign({ className: (0, utils_1.cs)('vui-p', className), ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
 });
 exports.P.displayName = 'P';
 exports.default = exports.P;

package/package.json

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

package/panel/panel.js

@@ -30,10 +30,10 @@ var react_1 = __importDefault(require("react"));
 var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
-exports.Panel = core_1.vui(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), className = _a.className, rest = __rest(_a, ["className"]);
-    var styles = core_1.useStyleConfig('Panel', props);
-    return (react_1.default.createElement(box_1.default, __assign({ bg: "white", borderRadius: "md", className: utils_1.cs('vui-panel', className), p: 2, ref: ref }, styles, rest)));
+exports.Panel = (0, core_1.vui)(function (props, ref) {
+    var _a = (0, core_1.omitThemingProps)(props), className = _a.className, rest = __rest(_a, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('Panel', props);
+    return (react_1.default.createElement(box_1.default, __assign({ bg: "white", borderRadius: "md", className: (0, utils_1.cs)('vui-panel', className), p: 2, ref: ref }, styles, rest)));
 });
 exports.Panel.displayName = 'Panel';
 exports.default = exports.Panel;

package/radio/context.js

@@ -18,6 +18,6 @@ var __read = (this && this.__read) || function (o, n) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRadioGroup = exports.RadioGroupProvider = void 0;
 var core_1 = require("../core");
-var _a = __read(core_1.createContext({ isOptional: true }), 2), RadioGroupProvider = _a[0], useRadioGroup = _a[1];
+var _a = __read((0, core_1.createContext)({ isOptional: true }), 2), RadioGroupProvider = _a[0], useRadioGroup = _a[1];
 exports.RadioGroupProvider = RadioGroupProvider;
 exports.useRadioGroup = useRadioGroup;

package/radio/radio.js

@@ -14,6 +14,25 @@ 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)
@@ -25,12 +44,28 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Radio = exports.RadioControl = exports.RadioBase = exports.RadioInput = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var context_1 = require("./context");
 var core_1 = require("../core");
@@ -39,24 +74,34 @@ var system_1 = require("../system");
 var t_1 = __importDefault(require("../t"));
 var utils_1 = require("../utils");
 exports.RadioInput = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcursor: inherit;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 1;\n"], ["\n\tcursor: inherit;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 1;\n"])));
-exports.RadioBase = styled_components_1.default.label.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\twidth: fit-content;\n\n\t:hover .vui-radioControl {\n\t\tcolor: ", ";\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\n\t\t.vui-radioControl {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\twidth: fit-content;\n\n\t:hover .vui-radioControl {\n\t\tcolor: ", ";\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\n\t\t.vui-radioControl {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"])), function (p) { return core_1.th.color(p.controlHoverColor)(p); }, system_1.system);
-exports.RadioControl = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"], ["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"])), system_1.system);
-exports.Radio = core_1.vui(function (props, ref) {
-    var _a;
-    var _b = (_a = context_1.useRadioGroup()) !== null && _a !== void 0 ? _a : {}, groupOnChange = _b.onChange, groupValue = _b.value, radioGroupProps = __rest(_b, ["onChange", "value"]);
+exports.RadioBase = styled_components_1.default.label.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\twidth: fit-content;\n\n\t:hover .vui-radioControl {\n\t\tcolor: ", ";\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\n\t\t.vui-radioControl {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\twidth: fit-content;\n\n\t:hover .vui-radioControl {\n\t\tcolor: ", ";\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\n\t\t.vui-radioControl {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"])), function (p) { return core_1.th.color(p.controlHoverColor)(p); }, system_1.system);
+exports.RadioControl = styled_components_1.default.span.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"], ["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"])), system_1.system);
+exports.Radio = (0, core_1.vui)(function (props, ref) {
+    var _a, _b;
+    var _c = (_a = (0, context_1.useRadioGroup)()) !== null && _a !== void 0 ? _a : {}, groupDefaultValue = _c.defaultValue, groupIsChecked = _c.isChecked, groupOnChange = _c.onChange, groupValue = _c.value, radioGroupProps = __rest(_c, ["defaultValue", "isChecked", "onChange", "value"]);
+    var defaultIsChecked = groupIsChecked !== undefined ? groupIsChecked === props.value : undefined;
     var mergedProps = __assign(__assign({}, radioGroupProps), props);
-    var _c = core_1.omitThemingProps(mergedProps), _d = _c.checked, checked = _d === void 0 ? groupValue !== undefined ? props.value === groupValue : undefined : _d, children = _c.children, className = _c.className, defaultChecked = _c.defaultChecked, disabled = _c.disabled, _e = _c.icon, iconProp = _e === void 0 ? 'cuiRadioUnselected' : _e, _f = _c.iconChecked, iconChecked = _f === void 0 ? 'cuiRadioSelected' : _f, id = _c.id, inputProps = _c.inputProps, inputRef = _c.inputRef, label = _c.label, name = _c.name, onChange = _c.onChange, required = _c.required, value = _c.value, rest = __rest(_c, ["checked", "children", "className", "defaultChecked", "disabled", "icon", "iconChecked", "id", "inputProps", "inputRef", "label", "name", "onChange", "required", "value"]);
-    var styles = core_1.useStyleConfig('Radio', mergedProps);
-    var _g = styles.control, controlColor = _g.color, hoverColor = _g.hoverColor, controlStyles = __rest(_g, ["color", "hoverColor"]);
-    var icon = checked ? iconChecked : iconProp;
+    var _d = (0, core_1.omitThemingProps)(mergedProps), _e = _d.checked, checked = _e === void 0 ? groupValue !== undefined ? props.value === groupValue : undefined : _e, children = _d.children, className = _d.className, _f = _d.defaultChecked, defaultChecked = _f === void 0 ? groupDefaultValue !== undefined ? props.value === groupDefaultValue : undefined : _f, disabled = _d.disabled, _g = _d.icon, iconProp = _g === void 0 ? 'cuiRadioUnselected' : _g, _h = _d.iconChecked, iconChecked = _h === void 0 ? 'cuiRadioSelected' : _h, id = _d.id, inputProps = _d.inputProps, inputRef = _d.inputRef, label = _d.label, name = _d.name, onChange = _d.onChange, required = _d.required, value = _d.value, rest = __rest(_d, ["checked", "children", "className", "defaultChecked", "disabled", "icon", "iconChecked", "id", "inputProps", "inputRef", "label", "name", "onChange", "required", "value"]);
+    var _j = __read((0, react_1.useState)((_b = defaultIsChecked !== null && defaultIsChecked !== void 0 ? defaultIsChecked : checked) !== null && _b !== void 0 ? _b : defaultChecked), 2), isChecked = _j[0], setIsChecked = _j[1];
+    var styles = (0, core_1.useStyleConfig)('Radio', mergedProps);
+    var _k = styles.control, controlColor = _k.color, hoverColor = _k.hoverColor, controlStyles = __rest(_k, ["color", "hoverColor"]);
+    var icon = isChecked ? iconChecked : iconProp;
     var controlMr = children || label ? 1 : 0;
-    var color = checked ? controlColor : 'grey.60';
-    var controlHoverColor = checked ? hoverColor : 'grey.90';
+    var color = isChecked ? controlColor : 'grey.60';
+    var controlHoverColor = isChecked ? hoverColor : 'grey.90';
+    (0, react_1.useEffect)(function () {
+        if (groupIsChecked !== undefined) {
+            setIsChecked(groupIsChecked === value);
+        }
+        else if (checked !== undefined) {
+            setIsChecked(checked);
+        }
+    }, [checked, groupIsChecked]);
     function handleOnChange(e) {
         groupOnChange === null || groupOnChange === void 0 ? void 0 : groupOnChange(e);
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
     }
-    return (react_1.default.createElement(exports.RadioBase, __assign({ className: utils_1.cs('vui-radio', disabled && 'disabled', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, rest),
+    return (react_1.default.createElement(exports.RadioBase, __assign({ className: (0, utils_1.cs)('vui-radio', disabled && 'disabled', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, rest),
         react_1.default.createElement(exports.RadioControl, __assign({ borderRadius: "50%", className: "vui-radioControl", color: color, focusWithinRing: 3, mr: controlMr, transitionDuration: "fast" }, controlStyles),
             react_1.default.createElement(exports.RadioInput, __assign({ className: "vui-radioInput", onChange: handleOnChange, ref: inputRef, type: "radio" }, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, id: id, name: name, required: required, value: value }, inputProps)),
             react_1.default.createElement(icon_1.default, { className: "vui-radioIcon", h: "100%", name: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, __assign({ className: "vui-radioLabel", lineHeight: "normal" }, styles.label), label)))));

package/radio/radioGroup.js

@@ -71,27 +71,35 @@ var context_1 = require("./context");
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.RadioGroupBase = styled_components_1.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"])), system_1.system);
-exports.RadioGroup = core_1.vui(function (props, ref) {
-    var className = props.className, colorScheme = props.colorScheme, _a = props.defaultValue, defaultValue = _a === void 0 ? '' : _a, disabled = props.disabled, name = props.name, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, row = props.row, size = props.size, valueProp = props.value, variant = props.variant, rest = __rest(props, ["className", "colorScheme", "defaultValue", "disabled", "name", "onBlur", "onChange", "onFocus", "row", "size", "value", "variant"]);
-    var isControlled = react_1.useRef(valueProp !== undefined).current;
-    var _b = __read(react_1.useState(defaultValue), 2), valueState = _b[0], setValueState = _b[1];
-    var value = isControlled ? valueProp : valueState;
-    var handleOnChange = react_1.useCallback(function (e) {
-        setValue(e.target.value);
+exports.RadioGroupBase = styled_components_1.default.div.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"])), system_1.system);
+exports.RadioGroup = (0, core_1.vui)(function (props, ref) {
+    var className = props.className, colorScheme = props.colorScheme, defaultValue = props.defaultValue, disabled = props.disabled, isRow = props.isRow, name = props.name, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, size = props.size, value = props.value, variant = props.variant, rest = __rest(props, ["className", "colorScheme", "defaultValue", "disabled", "isRow", "name", "onBlur", "onChange", "onFocus", "size", "value", "variant"]);
+    var _a = __read((0, react_1.useState)(value !== null && value !== void 0 ? value : defaultValue), 2), isChecked = _a[0], setIsChecked = _a[1];
+    var handleOnChange = (0, react_1.useCallback)(function (e) {
+        console.log('group onchange', e.target.value);
+        setIsChecked(e.target.value);
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
     }, [onChange]);
-    var setValue = react_1.useCallback(function (value) {
-        !isControlled && setValueState(value);
-    }, []);
-    var context = react_1.useMemo(function () {
-        return utils_1.filterUndefined({ colorScheme: colorScheme, disabled: disabled, name: name, onBlur: onBlur, onChange: handleOnChange, onFocus: onFocus, size: size, value: value, variant: variant });
-    }, [colorScheme, disabled, name, handleOnChange, onBlur, onFocus, size, value, variant]);
-    var aliasedProps = utils_1.filterUndefined({
-        flexDirection: row ? 'row' : undefined
+    var context = (0, react_1.useMemo)(function () {
+        return (0, utils_1.filterUndefined)({
+            colorScheme: colorScheme,
+            defaultValue: defaultValue,
+            disabled: disabled,
+            isChecked: isChecked,
+            name: name,
+            onBlur: onBlur,
+            onChange: handleOnChange,
+            onFocus: onFocus,
+            size: size,
+            value: value,
+            variant: variant
+        });
+    }, [colorScheme, defaultValue, disabled, handleOnChange, isChecked, name, onBlur, onFocus, size, value, variant]);
+    var aliasedProps = (0, utils_1.filterUndefined)({
+        flexDirection: isRow ? 'row' : undefined
     });
     return (react_1.default.createElement(context_1.RadioGroupProvider, { value: context },
-        react_1.default.createElement(exports.RadioGroupBase, __assign({ className: utils_1.cs('vui-radioGroup', className), ref: ref }, aliasedProps, rest))));
+        react_1.default.createElement(exports.RadioGroupBase, __assign({ className: (0, utils_1.cs)('vui-radioGroup', className), ref: ref }, aliasedProps, rest))));
 });
 exports.RadioGroup.displayName = 'RadioGroup';
 exports.default = exports.RadioGroup;

package/radio/radioGroup.types.d.ts

@@ -4,10 +4,10 @@ import { ThemingProps } from '../theme';
 export interface RadioGroupProps extends SystemProps, ThemingProps<'Radio'> {
     colorScheme?: 'blue' | 'prussian';
     disabled?: boolean;
+    isRow?: boolean;
     name?: string;
     onBlur?: FocusEventHandler;
     onChange?: ChangeEventHandler;
     onFocus?: FocusEventHandler;
-    row?: boolean;
     value?: number | string;
 }

package/radio/theme.js

@@ -2,12 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 function variantDefault(props) {
     var c = props.colorScheme;
-    var controlStyles = {
+    var control = {
         color: c + ".80",
         hoverColor: c + ".90"
     };
+    if (c === 'prussian') {
+        control.hoverColor = 'prussian.70';
+    }
     return {
-        control: controlStyles
+        control: control
     };
 }
 var defaultProps = {

package/skeleton/skeleton.js

@@ -35,15 +35,15 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-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);
+exports.SkeletonBase = styled_components_1.default.div.withConfig((0, 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 = (0, core_1.vui)(function (props, ref) {
+    var _a = (0, core_1.omitThemingProps)(props), className = _a.className, _b = _a.repeat, repeat = _b === void 0 ? 1 : _b, rest = __rest(_a, ["className", "repeat"]);
+    var styles = (0, core_1.useStyleConfig)('Skeleton', props);
     var arr = Array(repeat).fill(0);
-    var aliasedProps = utils_1.filterUndefined({
+    var aliasedProps = (0, 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({ 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: (0, utils_1.cs)('vui-skeleton', className), key: i, ref: ref }, styles, aliasedProps, rest))); })));
 });
 exports.Skeleton.displayName = 'Skeleton';
 exports.default = exports.Skeleton;

package/spinner/spinner.js

@@ -38,21 +38,21 @@ var core_1 = require("../core");
 var system_1 = require("../system");
 var t_1 = __importDefault(require("../t"));
 var utils_1 = require("../utils");
-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) {
+exports.SpinnerCircle = styled_components_1.default.div.withConfig((0, 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 = (0, 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 styles = (0, core_1.useStyleConfig)('Spinner', props);
     var isCustomSize = typeof size === 'number';
     var positionProps = consts_1.spinnerPositionMapping[textPosition];
     var speed = (_a = consts_1.spinnerSpeedMapping[speedProp]) !== null && _a !== void 0 ? _a : speedProp;
-    var circleProps = utils_1.filterUndefined({
+    var circleProps = (0, utils_1.filterUndefined)({
         borderColor: emptyColor,
         borderWidth: isCustomSize ? thickness !== null && thickness !== void 0 ? thickness : 4 : thickness,
         h: isCustomSize ? size : undefined,
         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),
+    return (react_1.default.createElement(box_1.default, __assign({ center: true, className: (0, 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", speed: speed }, styles.circle, positionProps.circle, circleProps)),
         text && (react_1.default.createElement(t_1.default, __assign({ className: "vui-spinnerText" }, styles.text), text))));
 });

package/svg/svg.js

@@ -108,21 +108,21 @@ var helpers_1 = require("./helpers");
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.SvgBase = styled_components_1.default.svg.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t& > path:nth-child(1) {\n\t\tfill: ", ";\n\t}\n\n\t& > path:nth-child(2) {\n\t\tfill: ", ";\n\t}\n\n\t", "\n"], ["\n\t& > path:nth-child(1) {\n\t\tfill: ", ";\n\t}\n\n\t& > path:nth-child(2) {\n\t\tfill: ", ";\n\t}\n\n\t", "\n"])), function (p) { var _a, _b, _c; return core_1.th.color((_c = (_b = (_a = p.fill) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : p.fill) !== null && _c !== void 0 ? _c : '')(p); }, function (p) { var _a, _b, _c; return core_1.th.color((_c = (_b = (_a = p.fill) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : p.fill) !== null && _c !== void 0 ? _c : '')(p); }, system_1.system);
-exports.Svg = core_1.vui(function (props, ref) {
+exports.SvgBase = styled_components_1.default.svg.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t& > path:nth-child(1) {\n\t\tfill: ", ";\n\t}\n\n\t& > path:nth-child(2) {\n\t\tfill: ", ";\n\t}\n\n\t", "\n"], ["\n\t& > path:nth-child(1) {\n\t\tfill: ", ";\n\t}\n\n\t& > path:nth-child(2) {\n\t\tfill: ", ";\n\t}\n\n\t", "\n"])), function (p) { var _a, _b, _c; return core_1.th.color((_c = (_b = (_a = p.fill) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : p.fill) !== null && _c !== void 0 ? _c : '')(p); }, function (p) { var _a, _b, _c; return core_1.th.color((_c = (_b = (_a = p.fill) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : p.fill) !== null && _c !== void 0 ? _c : '')(p); }, system_1.system);
+exports.Svg = (0, core_1.vui)(function (props, ref) {
     var children = props.children, className = props.className, src = props.src, rest = __rest(props, ["children", "className", "src"]);
-    var _a = __read(react_1.useState(helpers_1.initState()), 2), state = _a[0], setState = _a[1];
-    var isMountedRef = react_1.useRef(false);
-    var srcRef = react_1.useRef(src);
+    var _a = __read((0, react_1.useState)((0, helpers_1.initState)()), 2), state = _a[0], setState = _a[1];
+    var isMountedRef = (0, react_1.useRef)(false);
+    var srcRef = (0, react_1.useRef)(src);
     var _b = state.content, content = _b === void 0 ? '' : _b, _c = state.svgAttributes, svgAttributes = _c === void 0 ? {} : _c;
     var innerHTML = !children ? { __html: content } : undefined;
-    react_1.useEffect(function () {
+    (0, react_1.useEffect)(function () {
         isMountedRef.current = true;
         return function () {
             isMountedRef.current = false;
         };
     }, []);
-    react_1.useEffect(function () {
+    (0, react_1.useEffect)(function () {
         srcRef.current = src;
         function loadSvg(src) {
             return __awaiter(this, void 0, void 0, function () {
@@ -134,9 +134,9 @@ exports.Svg = core_1.vui(function (props, ref) {
                             return [4 /*yield*/, cache_1.default.get(src)];
                         case 1:
                             response = _a.sent();
-                            content_1 = helpers_1.getSvgContent(response);
-                            svgEl = helpers_1.stringToHTML(response);
-                            svgAttributes_1 = helpers_1.getAttributes(svgEl);
+                            content_1 = (0, helpers_1.getSvgContent)(response);
+                            svgEl = (0, helpers_1.stringToHTML)(response);
+                            svgAttributes_1 = (0, 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 && isMountedRef.current) {
@@ -147,7 +147,7 @@ exports.Svg = core_1.vui(function (props, ref) {
                             error_1 = _a.sent();
                             console.error(error_1); // eslint-disable-line no-console
                             if (isMountedRef.current) {
-                                setState(helpers_1.initState());
+                                setState((0, helpers_1.initState)());
                             }
                             return [3 /*break*/, 3];
                         case 3: return [2 /*return*/];
@@ -157,7 +157,7 @@ exports.Svg = core_1.vui(function (props, ref) {
         }
         src && loadSvg(src);
     }, [src]);
-    return (react_1.default.createElement(exports.SvgBase, __assign({ className: utils_1.cs('vui-svg', className), dangerouslySetInnerHTML: innerHTML, ref: ref, xmlns: "http://www.w3.org/2000/svg" }, svgAttributes, rest), children));
+    return (react_1.default.createElement(exports.SvgBase, __assign({ className: (0, utils_1.cs)('vui-svg', className), dangerouslySetInnerHTML: innerHTML, ref: ref, xmlns: "http://www.w3.org/2000/svg" }, svgAttributes, rest), children));
 });
 exports.Svg.displayName = 'Svg';
 exports.default = exports.Svg;

package/switch/context.js

@@ -18,6 +18,6 @@ var __read = (this && this.__read) || function (o, n) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSwitch = exports.SwitchProvider = void 0;
 var core_1 = require("../core");
-var _a = __read(core_1.createContext({ isOptional: true }), 2), SwitchProvider = _a[0], useSwitch = _a[1];
+var _a = __read((0, core_1.createContext)({ isOptional: true }), 2), SwitchProvider = _a[0], useSwitch = _a[1];
 exports.SwitchProvider = SwitchProvider;
 exports.useSwitch = useSwitch;

package/switch/switch.js

@@ -44,22 +44,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -74,56 +58,34 @@ var core_1 = require("../core");
 var system_1 = require("../system");
 var t_1 = require("../t");
 var utils_1 = require("../utils");
-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) {
+exports.SwitchBase = styled_components_1.default.label.withConfig((0, 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 = (0, core_1.vui)(function (props, ref) {
     var _a;
     var button = props.button, checked = props.checked, children = props.children, className = props.className, colorScheme = props.colorScheme, defaultChecked = props.defaultChecked, disabled = props.disabled, id = props.id, innerLabelOff = props.innerLabelOff, innerLabelOn = props.innerLabelOn, 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, ["button", "checked", "children", "className", "colorScheme", "defaultChecked", "disabled", "id", "innerLabelOff", "innerLabelOn", "inputRef", "labelLeft", "labelRight", "name", "onBlur", "onChange", "onFocus", "required", "size", "value", "variant"]);
-    var _b = __read(react_1.useState(defaultChecked), 2), isChecked = _b[0], setIsChecked = _b[1];
-    var styles = core_1.useStyleConfig('Switch', props);
-    react_1.useEffect(function () {
-        checked !== undefined && setIsChecked(checked);
-    }, [checked]);
-    var handleOnChange = react_1.useCallback(function (e) {
-        setIsChecked(e.target.checked);
-        onChange === null || onChange === void 0 ? void 0 : onChange(e);
-    }, [onChange]);
-    var context = react_1.useMemo(function () {
-        return utils_1.filterUndefined({
+    var styles = (0, core_1.useStyleConfig)('Switch', props);
+    var context = (0, react_1.useMemo)(function () {
+        return (0, utils_1.filterUndefined)({
+            checked: checked,
             colorScheme: colorScheme,
             defaultChecked: defaultChecked,
             disabled: disabled,
-            isChecked: isChecked,
             name: name,
             onBlur: onBlur,
-            onChange: handleOnChange,
+            onChange: onChange,
             onFocus: onFocus,
             required: required,
             size: size,
             value: value,
             variant: variant
         });
-    }, [
-        colorScheme,
-        defaultChecked,
-        disabled,
-        handleOnChange,
-        isChecked,
-        name,
-        onBlur,
-        onFocus,
-        required,
-        size,
-        value,
-        variant
-    ]);
-    var aliasedProps = utils_1.filterUndefined({
-        'data-checked': isChecked ? true : false,
+    }, [checked, colorScheme, defaultChecked, disabled, name, onBlur, onChange, onFocus, required, size, value, variant]);
+    var aliasedProps = (0, utils_1.filterUndefined)({
         'data-disabled': disabled ? true : false
     });
     return (react_1.default.createElement(context_1.SwitchProvider, { value: context },
-        react_1.default.createElement(exports.SwitchBase, __assign({ className: utils_1.cs('vui-switch', className), ref: ref }, styles.container, aliasedProps, rest),
-            utils_1.isReactText(labelLeft) ? react_1.default.createElement(switchLabel_1.SwitchLabel, { mr: 1, text: labelLeft }) : labelLeft, (_a = children !== null && children !== void 0 ? children : button) !== null && _a !== void 0 ? _a : react_1.default.createElement(switchButton_1.SwitchButton, __assign({}, { id: id, innerLabelOff: innerLabelOff, innerLabelOn: innerLabelOn, inputRef: inputRef })),
-            utils_1.isReactText(labelRight) ? react_1.default.createElement(switchLabel_1.SwitchLabel, { ml: 1, text: labelRight }) : labelRight)));
+        react_1.default.createElement(exports.SwitchBase, __assign({ className: (0, utils_1.cs)('vui-switch', className), ref: ref }, styles.container, aliasedProps, rest),
+            (0, utils_1.isReactText)(labelLeft) ? react_1.default.createElement(switchLabel_1.SwitchLabel, { mr: 1, text: labelLeft }) : labelLeft, (_a = children !== null && children !== void 0 ? children : button) !== null && _a !== void 0 ? _a : react_1.default.createElement(switchButton_1.SwitchButton, __assign({}, { id: id, innerLabelOff: innerLabelOff, innerLabelOn: innerLabelOn, inputRef: inputRef })),
+            (0, utils_1.isReactText)(labelRight) ? react_1.default.createElement(switchLabel_1.SwitchLabel, { ml: 1, text: labelRight }) : labelRight)));
 });
 exports.Switch.displayName = 'Switch';
 exports.Switch.Button = switchButton_1.SwitchButton;

package/switch/switch.types.d.ts

@@ -4,7 +4,7 @@ import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface SwitchButtonProps extends SystemProps, ThemingProps<'Switch'> {
     checked?: boolean;
-    colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
+    colorScheme?: 'blue' | 'green' | 'prussian';
     disabled?: boolean;
     innerLabelOff?: ReactNode;
     innerLabelOn?: ReactNode;
@@ -20,7 +20,7 @@ export interface SwitchButtonProps extends SystemProps, ThemingProps<'Switch'> {
 export interface SwitchProps extends SystemProps, ThemingProps<'Switch'> {
     button?: ReactNode;
     checked?: boolean;
-    colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
+    colorScheme?: 'blue' | 'green' | 'prussian';
     disabled?: boolean;
     innerLabelOff?: ReactNode;
     innerLabelOn?: ReactNode;

package/switch/switchButton.js

@@ -71,25 +71,23 @@ var context_1 = require("./context");
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.SwitchInput = styled_components_1.default.input.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcursor: inherit;\n\theight: calc(100% + 10px);\n\tleft: -5px;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: -5px;\n\twidth: calc(100% + 10px);\n\tz-index: 1;\n\n\t", "\n"], ["\n\tcursor: inherit;\n\theight: calc(100% + 10px);\n\tleft: -5px;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: -5px;\n\twidth: calc(100% + 10px);\n\tz-index: 1;\n\n\t", "\n"])), system_1.system);
-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\tflex: 1;\n\tposition: relative;\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex: 1;\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\t--x-ring-color: var(--vui-colors-disabled-border);\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\t--x-ring-color: var(--vui-colors-disabled-border);\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) {
+exports.SwitchInput = styled_components_1.default.input.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcursor: inherit;\n\theight: calc(100% + 10px);\n\tleft: -5px;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: -5px;\n\twidth: calc(100% + 10px);\n\tz-index: 1;\n\n\t", "\n"], ["\n\tcursor: inherit;\n\theight: calc(100% + 10px);\n\tleft: -5px;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: -5px;\n\twidth: calc(100% + 10px);\n\tz-index: 1;\n\n\t", "\n"])), system_1.system);
+exports.SwitchThumb = styled_components_1.default.span.withConfig((0, 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((0, core_1.forwardPropConfig)(system_1.system))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex: 1;\n\tposition: relative;\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex: 1;\n\tposition: relative;\n\n\t", "\n"])), system_1.system);
+exports.SwitchButtonBase = styled_components_1.default.span.withConfig((0, 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\t--x-ring-color: var(--vui-colors-disabled-border);\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\t--x-ring-color: var(--vui-colors-disabled-border);\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 = (0, 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 switchProps = (_a = (0, context_1.useSwitch)()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, switchProps), props);
-    var _c = core_1.omitThemingProps(mergedProps), checked = _c.checked, className = _c.className, defaultChecked = _c.defaultChecked, disabled = _c.disabled, id = _c.id, innerLabelOff = _c.innerLabelOff, innerLabelOn = _c.innerLabelOn, inputProps = _c.inputProps, inputRef = _c.inputRef, name = _c.name, onBlur = _c.onBlur, onChange = _c.onChange, onFocus = _c.onFocus, required = _c.required, value = _c.value, rest = __rest(_c, ["checked", "className", "defaultChecked", "disabled", "id", "innerLabelOff", "innerLabelOn", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "required", "value"]);
-    var _d = __read(react_1.useState(defaultChecked), 2), isChecked = _d[0], setIsChecked = _d[1];
-    var _e = __read(react_1.useState(false), 2), isFocused = _e[0], setIsFocused = _e[1];
-    var styles = core_1.useStyleConfig('Switch', mergedProps);
-    var _f = styles.button, thumbStyles = _f.thumb, trackStyles = _f.track, buttonStyles = __rest(_f, ["thumb", "track"]);
-    var isControlled = checked !== undefined || switchIsChecked !== undefined;
-    react_1.useEffect(function () {
-        if (isControlled) {
-            setIsChecked(checked !== null && checked !== void 0 ? checked : switchIsChecked);
-        }
-    }, [checked, isControlled, switchIsChecked]);
+    var _b = (0, core_1.omitThemingProps)(mergedProps), checked = _b.checked, className = _b.className, defaultChecked = _b.defaultChecked, disabled = _b.disabled, id = _b.id, innerLabelOff = _b.innerLabelOff, innerLabelOn = _b.innerLabelOn, inputProps = _b.inputProps, inputRef = _b.inputRef, name = _b.name, onBlur = _b.onBlur, onChange = _b.onChange, onFocus = _b.onFocus, required = _b.required, value = _b.value, rest = __rest(_b, ["checked", "className", "defaultChecked", "disabled", "id", "innerLabelOff", "innerLabelOn", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "required", "value"]);
+    var isControlled = (0, react_1.useRef)(checked !== undefined).current;
+    var _c = __read((0, react_1.useState)(checked !== null && checked !== void 0 ? checked : defaultChecked), 2), isChecked = _c[0], setIsChecked = _c[1];
+    var _d = __read((0, react_1.useState)(false), 2), isFocused = _d[0], setIsFocused = _d[1];
+    var styles = (0, core_1.useStyleConfig)('Switch', mergedProps);
+    var _e = styles.button, thumbStyles = _e.thumb, trackStyles = _e.track, buttonStyles = __rest(_e, ["thumb", "track"]);
+    (0, react_1.useEffect)(function () {
+        isControlled && setIsChecked(checked);
+    }, [checked, isControlled]);
     function handleOnBlur(e) {
         setIsFocused(false);
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
@@ -105,22 +103,22 @@ exports.SwitchButton = core_1.vui(function (props, ref) {
     var hDiff = (thumbStyles.h - trackStyles.h) / 2;
     var thumbOffset = "calc(100% - " + Math.abs(hDiff - thumbStyles.h) + "px)";
     var labelOffset = thumbStyles.h - hDiff + 4 + "px";
-    var buttonAliasedProps = utils_1.filterUndefined({
+    var buttonAliasedProps = (0, utils_1.filterUndefined)({
         'data-checked': isChecked ? true : false,
         'data-disabled': disabled ? true : false,
         'data-focused': isFocused ? true : false
     });
-    var thumbAliasedProps = utils_1.filterUndefined({
+    var thumbAliasedProps = (0, utils_1.filterUndefined)({
         left: isChecked ? thumbOffset : -hDiff,
         ring: isFocused ? thumbStyles.ring : 0
     });
-    var trackAliasedProps = utils_1.filterUndefined({
+    var trackAliasedProps = (0, utils_1.filterUndefined)({
         bg: isChecked ? trackStyles.bg : 'grey.50',
         pl: isChecked ? 1 : labelOffset,
         pr: isChecked ? labelOffset : 1,
         ring: isFocused ? trackStyles.ring : disabled ? 1 : 0
     });
-    return (react_1.default.createElement(exports.SwitchButtonBase, __assign({ className: utils_1.cs('vui-switchButton', className), ref: ref }, buttonStyles, buttonAliasedProps, rest),
+    return (react_1.default.createElement(exports.SwitchButtonBase, __assign({ className: (0, utils_1.cs)('vui-switchButton', className), ref: ref }, buttonStyles, buttonAliasedProps, rest),
         react_1.default.createElement(exports.SwitchInput, __assign({ className: "vui-switchInput", onBlur: handleOnBlur, onChange: handleOnChange, onFocus: handleOnFocus, ref: inputRef, type: "checkbox" }, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, id: id, name: name, required: required, value: value }, inputProps)),
         react_1.default.createElement(exports.SwitchTrack, __assign({ borderRadius: "round", className: "vui-switchTrack", transitionDuration: "fast" }, trackStyles, trackAliasedProps),
             !isChecked && innerLabelOff,

package/switch/switchLabel.js

@@ -19,11 +19,11 @@ 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.vui(function (props, ref) {
+exports.SwitchLabel = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var switchProps = (_a = context_1.useSwitch()) !== null && _a !== void 0 ? _a : {};
+    var switchProps = (_a = (0, context_1.useSwitch)()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, switchProps), props);
-    var styles = core_1.useStyleConfig('Switch', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Switch', mergedProps);
     return react_1.default.createElement(t_1.default, __assign({ className: "vui-switchLabel", display: "flex", ref: ref }, styles.label, props));
 });
 exports.SwitchLabel.displayName = 'SwitchLabel';