@veracity/vui 0.0.7 → 0.0.9

package/alert/alert.js

@@ -56,7 +56,7 @@ var context_1 = require("./context");
 var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
-exports.Alert = core_1.forwardRef(function (props, ref) {
+exports.Alert = core_1.vui(function (props, ref) {
     var _a;
     var action = props.action, children = props.children, className = props.className, _b = props.colorScheme, colorSchemeProp = _b === void 0 ? 'blue' : _b, iconProp = props.icon, isVertical = props.isVertical, onClose = props.onClose, size = props.size, status = props.status, statusMapping = props.statusMapping, text = props.text, title = props.title, variant = props.variant, rest = __rest(props, ["action", "children", "className", "colorScheme", "icon", "isVertical", "onClose", "size", "status", "statusMapping", "text", "title", "variant"]);
     var statuses = __assign(__assign({}, consts_1.alertStatusMapping), statusMapping);

package/alert/alertButton.js

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

package/alert/alertIcon.js

@@ -20,7 +20,7 @@ var consts_1 = require("./consts");
 var context_1 = require("./context");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
-exports.AlertIcon = core_1.forwardRef(function (props, ref) {
+exports.AlertIcon = core_1.vui(function (props, ref) {
     var _a, _b;
     var alertProps = (_a = context_1.useAlert()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, alertProps), props);

package/alert/alertMessage.js

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

package/alert/alertText.js

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

package/alert/alertTitle.js

@@ -18,13 +18,13 @@ exports.AlertTitle = void 0;
 var react_1 = __importDefault(require("react"));
 var context_1 = require("./context");
 var core_1 = require("../core");
-var heading_1 = __importDefault(require("../heading"));
-exports.AlertTitle = core_1.forwardRef(function (props, ref) {
+var heading_1 = require("../heading");
+exports.AlertTitle = core_1.vui(function (props, ref) {
     var _a;
     var alertProps = (_a = context_1.useAlert()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, alertProps), props);
     var styles = core_1.useStyleConfig('Alert', mergedProps);
-    return react_1.default.createElement(heading_1.default, __assign({ className: "vui-alertTitle", lineHeight: 1.5, mr: 1, ref: ref, size: "h6" }, styles.title, props));
+    return react_1.default.createElement(heading_1.H2, __assign({ className: "vui-alertTitle", lineHeight: 1.5, mr: 1, ref: ref }, styles.title, props));
 });
 exports.AlertTitle.displayName = 'AlertTitle';
 exports.default = exports.AlertTitle;

package/avatar/avatar.js

@@ -60,7 +60,7 @@ function defaultGetInitials(name) {
     var _a = __read(name.split(' '), 2), _b = _a[0], first = _b === void 0 ? '' : _b, _c = _a[1], last = _c === void 0 ? '' : _c;
     return "" + first.charAt(0) + last.charAt(0);
 }
-exports.Avatar = core_1.forwardRef(function (props, ref) {
+exports.Avatar = core_1.vui(function (props, ref) {
     var _a = core_1.omitThemingProps(props), children = _a.children, className = _a.className, _b = _a.getInitials, getInitials = _b === void 0 ? defaultGetInitials : _b, icon = _a.icon, _c = _a.isInteractive, isInteractive = _c === void 0 ? props.onClick !== undefined : _c, isSquare = _a.isSquare, _d = _a.name, name = _d === void 0 ? '' : _d, src = _a.src, rest = __rest(_a, ["children", "className", "getInitials", "icon", "isInteractive", "isSquare", "name", "src"]);
     var _e = core_1.useStyleConfig('Avatar', props), activeBg = _e.activeBg, h = _e.h, hoverBg = _e.hoverBg, iconSize = _e.iconSize, styles = __rest(_e, ["activeBg", "h", "hoverBg", "iconSize"]);
     var borderRadius = isSquare ? 'lg' : '50%';

package/box/box.js

@@ -35,9 +35,9 @@ var react_1 = __importDefault(require("react"));
 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.borders, styled_components_1.color, styled_components_1.effects, styled_components_1.flexboxes, styled_components_1.interactivity, styled_components_1.layout, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
+var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.color, styled_components_1.effects, styled_components_1.flexboxes, styled_components_1.interactivity, styled_components_1.layout, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
 exports.BoxBase = styled_components_2.default.div.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\n\t", "\n"])), generator);
-exports.Box = core_1.forwardRef(function (props, ref) {
+exports.Box = core_1.vui(function (props, ref) {
     var _a = core_1.omitThemingProps(props), align = _a.align, center = _a.center, centerH = _a.centerH, centerV = _a.centerV, className = _a.className, column = _a.column, direction = _a.direction, hoverShadow = _a.hoverShadow, justify = _a.justify, radius = _a.radius, shadow = _a.shadow, wrap = _a.wrap, rest = __rest(_a, ["align", "center", "centerH", "centerV", "className", "column", "direction", "hoverShadow", "justify", "radius", "shadow", "wrap"]);
     var styles = core_1.useStyleConfig('Box', props);
     var alignItems = (center || (column ? centerH : centerV)) && 'center';
@@ -52,7 +52,7 @@ exports.Box = core_1.forwardRef(function (props, ref) {
         hoverBoxShadow: hoverShadow,
         justifyContent: justify !== null && justify !== void 0 ? justify : justifyContent
     });
-    return (react_1.default.createElement(exports.BoxBase, __assign({ className: utils_1.cs('vui-box', className), ref: ref, transitionDuration: "normal" }, styles, aliasedProps, rest)));
+    return (react_1.default.createElement(exports.BoxBase, __assign({ borderRadius: "md", className: utils_1.cs('vui-box', className), ref: ref, transitionDuration: "normal" }, styles, aliasedProps, rest)));
 });
 exports.Box.displayName = 'Box';
 exports.default = exports.Box;

package/box/box.types.d.ts

@@ -1,4 +1,4 @@
-import { BackgroundColorProps, BordersProps, ColorProps, EffectsProps, FlexboxesProps, InteractivityProps, LayoutProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
+import { BackgroundColorProps, BordersProps, ColorProps, EffectsProps, FlexboxesProps, InteractivityProps, LayoutProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface BoxProps extends BoxStyleProps, ThemingProps<'Box'> {
     align?: FlexboxesProps['alignItems'];
@@ -13,5 +13,5 @@ export interface BoxProps extends BoxStyleProps, ThemingProps<'Box'> {
     shadow?: EffectsProps['boxShadow'];
     wrap?: boolean;
 }
-export interface BoxStyleProps extends BackgroundColorProps, BordersProps, ColorProps, EffectsProps, FlexboxesProps, InteractivityProps, LayoutProps, SizingProps, SpaceProps, TransitionsProps {
+export interface BoxStyleProps extends BackgroundColorProps, BordersProps, ColorProps, EffectsProps, FlexboxesProps, InteractivityProps, LayoutProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
 }

package/button/button.js

@@ -41,7 +41,7 @@ var generator = styled_components_1.compose(styled_components_1.backgroundColor,
 var ContentWrapper = styled_components_2.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tvisibility: hidden;\n"], ["\n\tvisibility: hidden;\n"])));
 var LoadingWrapper = styled_components_2.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tbottom: 0;\n\tdisplay: flex;\n\tleft: 0;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n"], ["\n\tbottom: 0;\n\tdisplay: flex;\n\tleft: 0;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n"])));
 exports.ButtonBase = styled_components_2.default.button.withConfig(core_1.forwardPropConfig(generator))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\tposition: relative;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t\tz-index: 1;\n\t}\n\n\t", "\n\n\t&:disabled {\n\t\t/* Specified here to avoid conflict with active/hover props */\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\tposition: relative;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\n\t\tz-index: 1;\n\t}\n\n\t", "\n\n\t&:disabled {\n\t\t/* Specified here to avoid conflict with active/hover props */\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tborder-color: var(--vui-colors-disabled-border);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n"])), generator);
-exports.Button = core_1.forwardRef(function (props, ref) {
+exports.Button = core_1.vui(function (props, ref) {
     var _a;
     var buttonGroupProps = context_1.useButtonGroup();
     var mergedProps = __assign(__assign({}, buttonGroupProps), props);

package/button/button.types.d.ts

@@ -3,7 +3,7 @@ import { IconProp } from '../icon';
 import { BackgroundColorProps, BordersProps, ColorProps, EffectsProps, FontSizeProps, FontWeightProps, PointerEventsProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface ButtonProps extends ButtonStyleProps, ThemingProps<'Button'> {
-    colorScheme?: 'blue' | 'green' | 'pink' | 'prussian' | 'red';
+    colorScheme?: 'blue' | 'green' | 'grey' | 'pink' | 'prussian' | 'red';
     icon?: IconProp;
     iconLeft?: IconProp;
     iconRight?: IconProp;
@@ -14,7 +14,7 @@ export interface ButtonProps extends ButtonStyleProps, ThemingProps<'Button'> {
     isSplit?: boolean;
     itemLeft?: React.ReactNode;
     itemRight?: React.ReactNode;
-    text?: string;
+    text?: number | string;
 }
 export interface ButtonStyleProps extends BackgroundColorProps, BordersProps, ColorProps, EffectsProps, FontSizeProps, FontWeightProps, PointerEventsProps, SizingProps, SpaceProps, TransitionsProps {
 }

package/button/buttonGroup.js

@@ -57,7 +57,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.ButtonGroupBase = styled_components_2.default.div.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\n\t// First Button\n\t> *:first-of-type:not(:last-of-type) {\n\t\tborder-bottom-right-radius: 0;\n\t\tborder-right-width: 1px;\n\t\tborder-top-right-radius: 0;\n\t}\n\n\t// Middle Buttons\n\t> *:not(:first-of-type):not(:last-of-type) {\n\t\tborder-left-width: 0px;\n\t\tborder-radius: 0;\n\t\tborder-right-width: 1px;\n\t}\n\n\t// Last Button\n\t> *:not(:first-of-type):last-of-type {\n\t\tborder-bottom-left-radius: 0;\n\t\tborder-left-width: 0px;\n\t\tborder-top-left-radius: 0;\n\t}\n\n\t", "\n"], ["\n\tdisplay: flex;\n\n\t// First Button\n\t> *:first-of-type:not(:last-of-type) {\n\t\tborder-bottom-right-radius: 0;\n\t\tborder-right-width: 1px;\n\t\tborder-top-right-radius: 0;\n\t}\n\n\t// Middle Buttons\n\t> *:not(:first-of-type):not(:last-of-type) {\n\t\tborder-left-width: 0px;\n\t\tborder-radius: 0;\n\t\tborder-right-width: 1px;\n\t}\n\n\t// Last Button\n\t> *:not(:first-of-type):last-of-type {\n\t\tborder-bottom-left-radius: 0;\n\t\tborder-left-width: 0px;\n\t\tborder-top-left-radius: 0;\n\t}\n\n\t", "\n"])), generator);
-exports.ButtonGroup = core_1.forwardRef(function (props, ref) {
+exports.ButtonGroup = core_1.vui(function (props, ref) {
     var className = props.className, colorScheme = props.colorScheme, disabled = props.disabled, size = props.size, variant = props.variant, rest = __rest(props, ["className", "colorScheme", "disabled", "size", "variant"]);
     var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, disabled: disabled, size: size, variant: variant }); }, [
         colorScheme,

package/button/buttons.d.ts

@@ -1,8 +1,8 @@
-import { ButtonProps as BaseButtonProps } from './button.types';
-declare type ButtonProps = Omit<BaseButtonProps, 'variant'>;
+import { ButtonProps } from './button.types';
 export declare const AppButton: import("../core").VuiComponent<"button", ButtonProps>;
+export declare const BackButton: import("../core").VuiComponent<"button", ButtonProps>;
+export declare const CloseButton: import("../core").VuiComponent<"button", ButtonProps>;
 export declare const CTAButton: import("../core").VuiComponent<"button", ButtonProps>;
 export declare const DangerButton: import("../core").VuiComponent<"button", ButtonProps>;
-export declare const OutlinedButton: import("../core").VuiComponent<"button", ButtonProps>;
+export declare const LineButton: import("../core").VuiComponent<"button", ButtonProps>;
 export declare const TextButton: import("../core").VuiComponent<"button", ButtonProps>;
-export {};

package/button/buttons.js

@@ -14,12 +14,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextButton = exports.OutlinedButton = exports.DangerButton = exports.CTAButton = exports.AppButton = void 0;
+exports.TextButton = exports.LineButton = exports.DangerButton = exports.CTAButton = exports.CloseButton = exports.BackButton = exports.AppButton = void 0;
 var react_1 = __importDefault(require("react"));
 var button_1 = __importDefault(require("./button"));
 var core_1 = require("../core");
-exports.AppButton = core_1.forwardRef(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "blue", ref: ref }, props))); });
-exports.CTAButton = core_1.forwardRef(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "green", ref: ref }, props))); });
-exports.DangerButton = core_1.forwardRef(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "red", ref: ref }, props))); });
-exports.OutlinedButton = core_1.forwardRef(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "blue", ref: ref, variant: "outlined" }, props))); });
-exports.TextButton = core_1.forwardRef(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "blue", ref: ref, variant: "text" }, props))); });
+exports.AppButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "blue", ref: ref, variant: "solid" }, props))); });
+exports.BackButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "blue", icon: "falChevronLeft", ref: ref, variant: "text" }, props))); });
+exports.CloseButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "blue", icon: "falTimes", ref: ref, variant: "text" }, props))); });
+exports.CTAButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "green", ref: ref, variant: "solid" }, props))); });
+exports.DangerButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "red", ref: ref, variant: "solid" }, props))); });
+exports.LineButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "blue", ref: ref, variant: "outlined" }, props))); });
+exports.TextButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "blue", ref: ref, variant: "text" }, props))); });

package/button/theme.d.ts

@@ -7,8 +7,13 @@ declare function variantOutlined(props: Dict): {
     borderColor: string;
     borderWidth: number;
 };
+declare function variantSubtle(props: Dict): {
+    hoverBg: string;
+    activeBg: string;
+    bg: string;
+    color: string;
+};
 declare function variantSolid(props: Dict): {
-    borderColor: string;
     hoverBg: string;
     activeBg: string;
     bg: string;
@@ -59,6 +64,7 @@ declare const _default: {
     variants: {
         outlined: typeof variantOutlined;
         solid: typeof variantSolid;
+        subtle: typeof variantSubtle;
         text: typeof variantText;
     };
 };

package/button/theme.js

@@ -16,10 +16,23 @@ function variantOutlined(props) {
     var styles = __assign({ borderColor: c + ".80", borderWidth: 1 }, variantText(props));
     return styles;
 }
+function variantSubtle(props) {
+    var c = props.colorScheme;
+    var styles = {
+        hoverBg: c + ".30",
+        activeBg: c + ".40",
+        bg: c + ".20",
+        color: c + ".90"
+    };
+    // Special cases
+    if (c === 'grey') {
+        styles.color = 'prussian.80';
+    }
+    return styles;
+}
 function variantSolid(props) {
     var c = props.colorScheme;
     var styles = {
-        borderColor: c + ".100",
         hoverBg: c + ".90",
         activeBg: c + ".100",
         bg: c + ".80",
@@ -45,6 +58,9 @@ function variantText(props) {
         styles.activeBg = 'blue.30';
         styles.hoverBg = 'blue.20';
     }
+    if (c === 'grey') {
+        styles.color = 'prussian.80';
+    }
     return styles;
 }
 var defaultProps = {
@@ -85,6 +101,7 @@ var sizes = {
 var variants = {
     outlined: variantOutlined,
     solid: variantSolid,
+    subtle: variantSubtle,
     text: variantText
 };
 exports.default = {

package/checkbox/checkbox.js

@@ -78,7 +78,7 @@ var controlGenerator = styled_components_1.compose(styled_components_1.borders,
 exports.CheckboxInput = 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.CheckboxBase = styled_components_2.default.label.withConfig(core_1.forwardPropConfig(checkboxGenerator))(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-checkboxControl {\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-checkboxControl {\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-checkboxControl {\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-checkboxControl {\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); }, checkboxGenerator);
 exports.CheckboxControl = 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.Checkbox = core_1.forwardRef(function (props, ref) {
+exports.Checkbox = core_1.vui(function (props, ref) {
     var checkboxGroupProps = context_1.useCheckboxGroup();
     var mergedProps = __assign(__assign({}, checkboxGroupProps), props);
     var _a = core_1.omitThemingProps(mergedProps), checked = _a.checked, children = _a.children, className = _a.className, defaultChecked = _a.defaultChecked, disabled = _a.disabled, _b = _a.icon, iconProp = _b === void 0 ? 'cuiCheckboxUnselected' : _b, _c = _a.iconChecked, iconChecked = _c === void 0 ? 'cuiCheckboxSelected' : _c, _d = _a.iconIndeterminate, iconIndeterminate = _d === void 0 ? 'cuiCheckboxIndeterminate' : _d, inputProps = _a.inputProps, inputRef = _a.inputRef, isIndeterminate = _a.isIndeterminate, label = _a.label, name = _a.name, onChange = _a.onChange, required = _a.required, value = _a.value, rest = __rest(_a, ["checked", "children", "className", "defaultChecked", "disabled", "icon", "iconChecked", "iconIndeterminate", "inputProps", "inputRef", "isIndeterminate", "label", "name", "onChange", "required", "value"]);

package/checkbox/checkboxGroup.js

@@ -57,7 +57,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.CheckboxGroupBase = 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.CheckboxGroup = core_1.forwardRef(function (props, ref) {
+exports.CheckboxGroup = core_1.vui(function (props, ref) {
     var className = props.className, colorScheme = props.colorScheme, disabled = props.disabled, name = props.name, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, row = props.row, size = props.size, variant = props.variant, rest = __rest(props, ["className", "colorScheme", "disabled", "name", "onBlur", "onChange", "onFocus", "row", "size", "variant"]);
     var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, disabled: disabled, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, size: size, variant: variant }); }, [colorScheme, disabled, name, onBlur, onChange, onFocus, size, variant]);
     var aliasedProps = utils_1.filterUndefined({

package/core/globalStyle.js

@@ -3,9 +3,55 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    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 });
 var styled_components_1 = require("styled-components");
+var foundations_1 = __importDefault(require("../theme/foundations"));
 var styles_1 = require("../styles");
-var utils_1 = require("./utils");
-exports.default = styled_components_1.createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n\n\t:root {\n\t\t", "\n\n\t\t--vui-colors-disabled-bg: var(--vui-colors-grey-10);\n\t\t--vui-colors-disabled-border: var(--vui-colors-grey-50);\n\t\t--vui-colors-disabled-font: var(--vui-colors-grey-50);\n\t}\n\n\t* {\n\t\t--x-ring-color: var(--vui-colors-blue-50);\n\t\t--x-shadow: 0 0 0 0 transparent;\n\t}\n\n\tbody {\n\t\tcolor: var(--vui-colors-prussian-80);\n\t\tfont-family: var(--vui-fonts-avenir);\n\t\tfont-size: var(--vui-fontSizes-md);\n\t}\n\n\t@keyframes fadeDown {\n\t\t", "\n\t}\n\n\t@keyframes fadeIn {\n\t\t", "\n\t}\n\n\t@keyframes fadeLeft {\n\t\t", "\n\t}\n\n\t@keyframes fadeOut {\n\t\t", "\n\t}\n\n\t@keyframes fadeRight {\n\t\t", "\n\t}\n\n\t@keyframes fadeUp {\n\t\t", "\n\t}\n\n\t@keyframes spin {\n\t\t", "\n\t}\n"], ["\n\t", "\n\n\t:root {\n\t\t", "\n\n\t\t--vui-colors-disabled-bg: var(--vui-colors-grey-10);\n\t\t--vui-colors-disabled-border: var(--vui-colors-grey-50);\n\t\t--vui-colors-disabled-font: var(--vui-colors-grey-50);\n\t}\n\n\t* {\n\t\t--x-ring-color: var(--vui-colors-blue-50);\n\t\t--x-shadow: 0 0 0 0 transparent;\n\t}\n\n\tbody {\n\t\tcolor: var(--vui-colors-prussian-80);\n\t\tfont-family: var(--vui-fonts-avenir);\n\t\tfont-size: var(--vui-fontSizes-md);\n\t}\n\n\t@keyframes fadeDown {\n\t\t", "\n\t}\n\n\t@keyframes fadeIn {\n\t\t", "\n\t}\n\n\t@keyframes fadeLeft {\n\t\t", "\n\t}\n\n\t@keyframes fadeOut {\n\t\t", "\n\t}\n\n\t@keyframes fadeRight {\n\t\t", "\n\t}\n\n\t@keyframes fadeUp {\n\t\t", "\n\t}\n\n\t@keyframes spin {\n\t\t", "\n\t}\n"])), styles_1.fontFaces, utils_1.generateCSSVariables, styles_1.fadeDown, styles_1.fadeIn, styles_1.fadeLeft, styles_1.fadeOut, styles_1.fadeRight, styles_1.fadeUp, styles_1.spin);
+var utils_1 = require("../utils");
+exports.default = styled_components_1.createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n\n\t:root {\n\t\t", "\n\n\t\t--vui-colors-disabled-bg: var(--vui-colors-grey-10);\n\t\t--vui-colors-disabled-border: var(--vui-colors-grey-50);\n\t\t--vui-colors-disabled-font: var(--vui-colors-grey-50);\n\t}\n\n\t* {\n\t\t--x-ring-color: var(--vui-colors-blue-50);\n\t\t--x-shadow: 0 0 0 0 transparent;\n\t}\n\n\tbody {\n\t\tcolor: var(--vui-colors-prussian-80);\n\t\tfont-family: var(--vui-fonts-avenir);\n\t\tfont-size: var(--vui-fontSizes-md);\n\t}\n\n\t@keyframes vui-bounce {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeDown {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeIn {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeLeft {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeOut {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeRight {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeUp {\n\t\t", "\n\t}\n\n\t@keyframes vui-pulse {\n\t\t", "\n\t}\n\n\t@keyframes vui-spin {\n\t\t", "\n\t}\n"], ["\n\t", "\n\n\t:root {\n\t\t", "\n\n\t\t--vui-colors-disabled-bg: var(--vui-colors-grey-10);\n\t\t--vui-colors-disabled-border: var(--vui-colors-grey-50);\n\t\t--vui-colors-disabled-font: var(--vui-colors-grey-50);\n\t}\n\n\t* {\n\t\t--x-ring-color: var(--vui-colors-blue-50);\n\t\t--x-shadow: 0 0 0 0 transparent;\n\t}\n\n\tbody {\n\t\tcolor: var(--vui-colors-prussian-80);\n\t\tfont-family: var(--vui-fonts-avenir);\n\t\tfont-size: var(--vui-fontSizes-md);\n\t}\n\n\t@keyframes vui-bounce {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeDown {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeIn {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeLeft {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeOut {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeRight {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeUp {\n\t\t", "\n\t}\n\n\t@keyframes vui-pulse {\n\t\t", "\n\t}\n\n\t@keyframes vui-spin {\n\t\t", "\n\t}\n"
+    /** Recursively maps through all theme styles and generates a set of CSS properties */
+])), styles_1.fontFaces, generateCSSVariables, styles_1.bounce, styles_1.fadeDown, styles_1.fadeIn, styles_1.fadeLeft, styles_1.fadeOut, styles_1.fadeRight, styles_1.fadeUp, styles_1.pulse, styles_1.spin);
+/** Recursively maps through all theme styles and generates a set of CSS properties */
+function generateCSSVariables() {
+    function computeStyle(name, value) {
+        if (!utils_1.isObj(value))
+            return name + ": " + (typeof value === 'string' ? value : value + "px") + ";\n";
+        return Object.entries(value).reduce(function (str, _a) {
+            var _b = __read(_a, 2), key = _b[0], value = _b[1];
+            return (str += computeStyle(name + "-" + key, value));
+        }, '');
+    }
+    var animations = foundations_1.default.animations, styles = __rest(foundations_1.default, ["animations"]); // eslint-disable-line @typescript-eslint/no-unused-vars
+    return computeStyle('--vui', styles);
+}
 var templateObject_1;

package/core/resetCSS.js

@@ -5,5 +5,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var styled_components_1 = require("styled-components");
-exports.default = styled_components_1.createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nhtml {\n\tbox-sizing: border-box;\n\tline-height: 1.4;\n\t-webkit-text-size-adjust: 100%;\n}\n\n*, *::before, *::after {\n\tborder-style: solid;\n\tborder-width: 0;\n\tbox-sizing: inherit;\n}\n\nbody {\n\tmargin: 0;\n}\n\na {\n\tbackground-color: transparent;\n\tcolor: inherit;\n\ttext-decoration: none;\n}\n\nabbr[title] {\n\tborder-bottom: none;\n\ttext-decoration: underline dotted;\n}\n\nb, strong {\n\tfont-weight: bolder;\n}\n\nbutton {\n\tcursor: pointer;\n\t-webkit-appearance: button;\n}\n\nbutton, input, optgroup, select, textarea {\n\tfont-family: inherit;\n\tfont-size: 100%;\n\tmargin: 0;\n}\n\nbutton, select {\n\ttext-transform: none;\n}\n\ncode, kbd, pre, samp {\n\tfont-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;\n\tfont-size: 1em;\n}\n\ndetails {\n\tdisplay: block;\n}\n\nfieldset {\n\tpadding: 0.35em 0.75em 0.625em;\n}\n\nh1, h2, h3, h4, h5, h6, p, hr, dl, dd, blockquote, figure, pre {\n\tmargin: 0;\n}\n\nh1, h2, h3, h4, h5, h6 {\n\tfont-size: inherit;\n\tfont-weight: inherit;\n}\n\nhr {\n\tcolor: inherit;\n\theight: 0;\n}\n\nimg {\n\tborder-style: none;\n}\n\nimg, svg, video, canvas, audio, iframe, embed, object {\n\tdisplay: block;\n}\n\nlegend {\n\tcolor: inherit;\n\tdisplay: table;\n\tmax-width: 100%;\n\tpadding: 0;\n\twhite-space: normal;\n}\n\nmain {\n\tdisplay: block;\n}\n\nol, ul  {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\nprogress {\n\tvertical-align: baseline;\n}\n\nsummary {\n\tdisplay: list-item;\n}\n\nsmall {\n\tfont-size: 80%;\n}\n\nsub, sup {\n\tfont-size: 75%;\n\tline-height: 0;\n\tposition: relative;\n\tvertical-align: baseline;\n}\n\nsub {\n\tbottom: -0.25em;\n}\n\nsup {\n\ttop: -0.5em;\n}\n\ntable {\n\ttext-indent: 0;\n\tborder-color: inherit;\n}\n\ntemplate {\n\tdisplay: none;\n}\n\ntextarea {\n\toverflow: auto;\n}\n\n::-moz-focus-inner {\n\tborder-style: none;\n\tpadding: 0;\n}\n\n::-webkit-file-upload-button {\n\tfont: inherit;\n\t-webkit-appearance: button;\n}\n\n[type=checkbox], [type=radio] {\n\tpadding: 0;\n}\n\n[type=number]::-webkit-inner-spin-button,\n[type=number]::-webkit-outer-spin-button {\n\theight: auto;\n}\n\n[type=search] {\n\toutline-offset: -2px;\n\t-webkit-appearance: textfield;\n}\n\n[type=search]::-webkit-search-decoration {\n\t-webkit-appearance: none;\n}\n\n[hidden] {\n\tdisplay: none;\n}\n"], ["\nhtml {\n\tbox-sizing: border-box;\n\tline-height: 1.4;\n\t-webkit-text-size-adjust: 100%;\n}\n\n*, *::before, *::after {\n\tborder-style: solid;\n\tborder-width: 0;\n\tbox-sizing: inherit;\n}\n\nbody {\n\tmargin: 0;\n}\n\na {\n\tbackground-color: transparent;\n\tcolor: inherit;\n\ttext-decoration: none;\n}\n\nabbr[title] {\n\tborder-bottom: none;\n\ttext-decoration: underline dotted;\n}\n\nb, strong {\n\tfont-weight: bolder;\n}\n\nbutton {\n\tcursor: pointer;\n\t-webkit-appearance: button;\n}\n\nbutton, input, optgroup, select, textarea {\n\tfont-family: inherit;\n\tfont-size: 100%;\n\tmargin: 0;\n}\n\nbutton, select {\n\ttext-transform: none;\n}\n\ncode, kbd, pre, samp {\n\tfont-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;\n\tfont-size: 1em;\n}\n\ndetails {\n\tdisplay: block;\n}\n\nfieldset {\n\tpadding: 0.35em 0.75em 0.625em;\n}\n\nh1, h2, h3, h4, h5, h6, p, hr, dl, dd, blockquote, figure, pre {\n\tmargin: 0;\n}\n\nh1, h2, h3, h4, h5, h6 {\n\tfont-size: inherit;\n\tfont-weight: inherit;\n}\n\nhr {\n\tcolor: inherit;\n\theight: 0;\n}\n\nimg {\n\tborder-style: none;\n}\n\nimg, svg, video, canvas, audio, iframe, embed, object {\n\tdisplay: block;\n}\n\nlegend {\n\tcolor: inherit;\n\tdisplay: table;\n\tmax-width: 100%;\n\tpadding: 0;\n\twhite-space: normal;\n}\n\nmain {\n\tdisplay: block;\n}\n\nol, ul  {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\nprogress {\n\tvertical-align: baseline;\n}\n\nsummary {\n\tdisplay: list-item;\n}\n\nsmall {\n\tfont-size: 80%;\n}\n\nsub, sup {\n\tfont-size: 75%;\n\tline-height: 0;\n\tposition: relative;\n\tvertical-align: baseline;\n}\n\nsub {\n\tbottom: -0.25em;\n}\n\nsup {\n\ttop: -0.5em;\n}\n\ntable {\n\ttext-indent: 0;\n\tborder-color: inherit;\n}\n\ntemplate {\n\tdisplay: none;\n}\n\ntextarea {\n\toverflow: auto;\n}\n\n::-moz-focus-inner {\n\tborder-style: none;\n\tpadding: 0;\n}\n\n::-webkit-file-upload-button {\n\tfont: inherit;\n\t-webkit-appearance: button;\n}\n\n[type=checkbox], [type=radio] {\n\tpadding: 0;\n}\n\n[type=number]::-webkit-inner-spin-button,\n[type=number]::-webkit-outer-spin-button {\n\theight: auto;\n}\n\n[type=search] {\n\toutline-offset: -2px;\n\t-webkit-appearance: textfield;\n}\n\n[type=search]::-webkit-search-decoration {\n\t-webkit-appearance: none;\n}\n\n[hidden] {\n\tdisplay: none;\n}\n"])));
+exports.default = styled_components_1.createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\thtml {\n\t\tbox-sizing: border-box;\n\t\tline-height: 1.4;\n\t\t-webkit-text-size-adjust: 100%;\n\t}\n\n\t*, *::before, *::after {\n\t\tborder-style: solid;\n\t\tborder-width: 0;\n\t\tbox-sizing: inherit;\n\t}\n\n\tbody {\n\t\tmargin: 0;\n\t}\n\n\ta {\n\t\tbackground-color: transparent;\n\t\tcolor: inherit;\n\t\ttext-decoration: none;\n\t}\n\n\tabbr[title] {\n\t\tborder-bottom: none;\n\t\ttext-decoration: underline dotted;\n\t}\n\n\tb, strong {\n\t\tfont-weight: bolder;\n\t}\n\n\tbutton {\n\t\tcursor: pointer;\n\t\t-webkit-appearance: button;\n\t}\n\n\tbutton, input, optgroup, select, textarea {\n\t\tfont-family: inherit;\n\t\tfont-size: 100%;\n\t\tmargin: 0;\n\t}\n\n\tbutton, select {\n\t\ttext-transform: none;\n\t}\n\n\tcode, kbd, pre, samp {\n\t\tfont-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;\n\t\tfont-size: 1em;\n\t}\n\n\tdetails {\n\t\tdisplay: block;\n\t}\n\n\tfieldset {\n\t\tpadding: 0.35em 0.75em 0.625em;\n\t}\n\n\th1, h2, h3, h4, h5, h6, p, hr, dl, dd, blockquote, figure, pre {\n\t\tmargin: 0;\n\t}\n\n\th1, h2, h3, h4, h5, h6 {\n\t\tfont-size: inherit;\n\t\tfont-weight: inherit;\n\t}\n\n\thr {\n\t\tcolor: inherit;\n\t\theight: 0;\n\t}\n\n\timg {\n\t\tborder-style: none;\n\t}\n\n\timg, svg, video, canvas, audio, iframe, embed, object {\n\t\tdisplay: block;\n\t}\n\n\tlegend {\n\t\tcolor: inherit;\n\t\tdisplay: table;\n\t\tmax-width: 100%;\n\t\tpadding: 0;\n\t\twhite-space: normal;\n\t}\n\n\tmain {\n\t\tdisplay: block;\n\t}\n\n\tol, ul  {\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tprogress {\n\t\tvertical-align: baseline;\n\t}\n\n\tsummary {\n\t\tdisplay: list-item;\n\t}\n\n\tsmall {\n\t\tfont-size: 80%;\n\t}\n\n\tsub, sup {\n\t\tfont-size: 75%;\n\t\tline-height: 0;\n\t\tposition: relative;\n\t\tvertical-align: baseline;\n\t}\n\n\tsub {\n\t\tbottom: -0.25em;\n\t}\n\n\tsup {\n\t\ttop: -0.5em;\n\t}\n\n\ttable {\n\t\ttext-indent: 0;\n\t\tborder-color: inherit;\n\t}\n\n\ttemplate {\n\t\tdisplay: none;\n\t}\n\n\ttextarea {\n\t\toverflow: auto;\n\t}\n\n\t::-moz-focus-inner {\n\t\tborder-style: none;\n\t\tpadding: 0;\n\t}\n\n\t::-webkit-file-upload-button {\n\t\tfont: inherit;\n\t\t-webkit-appearance: button;\n\t}\n\n\t[type=checkbox], [type=radio] {\n\t\tpadding: 0;\n\t}\n\n\t[type=number]::-webkit-inner-spin-button,\n\t[type=number]::-webkit-outer-spin-button {\n\t\theight: auto;\n\t}\n\n\t[type=search] {\n\t\toutline-offset: -2px;\n\t\t-webkit-appearance: textfield;\n\t}\n\n\t[type=search]::-webkit-search-decoration {\n\t\t-webkit-appearance: none;\n\t}\n\n\t[hidden] {\n\t\tdisplay: none;\n\t}\n"], ["\n\thtml {\n\t\tbox-sizing: border-box;\n\t\tline-height: 1.4;\n\t\t-webkit-text-size-adjust: 100%;\n\t}\n\n\t*, *::before, *::after {\n\t\tborder-style: solid;\n\t\tborder-width: 0;\n\t\tbox-sizing: inherit;\n\t}\n\n\tbody {\n\t\tmargin: 0;\n\t}\n\n\ta {\n\t\tbackground-color: transparent;\n\t\tcolor: inherit;\n\t\ttext-decoration: none;\n\t}\n\n\tabbr[title] {\n\t\tborder-bottom: none;\n\t\ttext-decoration: underline dotted;\n\t}\n\n\tb, strong {\n\t\tfont-weight: bolder;\n\t}\n\n\tbutton {\n\t\tcursor: pointer;\n\t\t-webkit-appearance: button;\n\t}\n\n\tbutton, input, optgroup, select, textarea {\n\t\tfont-family: inherit;\n\t\tfont-size: 100%;\n\t\tmargin: 0;\n\t}\n\n\tbutton, select {\n\t\ttext-transform: none;\n\t}\n\n\tcode, kbd, pre, samp {\n\t\tfont-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;\n\t\tfont-size: 1em;\n\t}\n\n\tdetails {\n\t\tdisplay: block;\n\t}\n\n\tfieldset {\n\t\tpadding: 0.35em 0.75em 0.625em;\n\t}\n\n\th1, h2, h3, h4, h5, h6, p, hr, dl, dd, blockquote, figure, pre {\n\t\tmargin: 0;\n\t}\n\n\th1, h2, h3, h4, h5, h6 {\n\t\tfont-size: inherit;\n\t\tfont-weight: inherit;\n\t}\n\n\thr {\n\t\tcolor: inherit;\n\t\theight: 0;\n\t}\n\n\timg {\n\t\tborder-style: none;\n\t}\n\n\timg, svg, video, canvas, audio, iframe, embed, object {\n\t\tdisplay: block;\n\t}\n\n\tlegend {\n\t\tcolor: inherit;\n\t\tdisplay: table;\n\t\tmax-width: 100%;\n\t\tpadding: 0;\n\t\twhite-space: normal;\n\t}\n\n\tmain {\n\t\tdisplay: block;\n\t}\n\n\tol, ul  {\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tprogress {\n\t\tvertical-align: baseline;\n\t}\n\n\tsummary {\n\t\tdisplay: list-item;\n\t}\n\n\tsmall {\n\t\tfont-size: 80%;\n\t}\n\n\tsub, sup {\n\t\tfont-size: 75%;\n\t\tline-height: 0;\n\t\tposition: relative;\n\t\tvertical-align: baseline;\n\t}\n\n\tsub {\n\t\tbottom: -0.25em;\n\t}\n\n\tsup {\n\t\ttop: -0.5em;\n\t}\n\n\ttable {\n\t\ttext-indent: 0;\n\t\tborder-color: inherit;\n\t}\n\n\ttemplate {\n\t\tdisplay: none;\n\t}\n\n\ttextarea {\n\t\toverflow: auto;\n\t}\n\n\t::-moz-focus-inner {\n\t\tborder-style: none;\n\t\tpadding: 0;\n\t}\n\n\t::-webkit-file-upload-button {\n\t\tfont: inherit;\n\t\t-webkit-appearance: button;\n\t}\n\n\t[type=checkbox], [type=radio] {\n\t\tpadding: 0;\n\t}\n\n\t[type=number]::-webkit-inner-spin-button,\n\t[type=number]::-webkit-outer-spin-button {\n\t\theight: auto;\n\t}\n\n\t[type=search] {\n\t\toutline-offset: -2px;\n\t\t-webkit-appearance: textfield;\n\t}\n\n\t[type=search]::-webkit-search-decoration {\n\t\t-webkit-appearance: none;\n\t}\n\n\t[hidden] {\n\t\tdisplay: none;\n\t}\n"])));
 var templateObject_1;

package/core/types/component.d.ts

@@ -1,17 +1,30 @@
 import React from 'react';
-/** Merges component/element base props, custom props and 'as' prop */
-export declare type ComponentProps<C extends React.ElementType, Props = {}> = RightJoinProps<React.ComponentPropsWithRef<C>, Props>;
+/** Merges component/element base props and custom props */
+export declare type PropsOf<C extends React.ElementType, Props = {}> = RightJoinProps<React.ComponentPropsWithoutRef<C>, Props>;
+/** Merges component/element base props and custom props including ref */
+export declare type RefPropsOf<C extends React.ElementType, Props = {}> = RightJoinProps<React.ComponentPropsWithRef<C>, Props>;
 /** Merges props definitions, overriding source keys */
 export declare type RightJoinProps<SourceProps, OverrideProps> = OverrideProps & Omit<SourceProps, keyof OverrideProps>;
-/** VUI Component definition supporting custom props, 'as' props and 'ref' */
+/** VUI component interface, which allows element props inference and extension, 'as' and 'ref' */
 export interface VuiComponent<C extends React.ElementType, Props = {}> {
-    <AsC extends React.ElementType>(props: ComponentProps<AsC, Props> & {
+    <AsC extends React.ElementType>(props: RefPropsOf<PropsOf<C, AsC>, Props> & {
         as: AsC;
     }): JSX.Element;
-    <AsC extends React.ElementType>(props: ComponentProps<AsC, Props> & {
-        forwardedAs: AsC;
-    }): JSX.Element;
-    (props: ComponentProps<C, Props>): JSX.Element;
-    defaultProps?: Partial<ComponentProps<C, Props>>;
+    (props: RefPropsOf<C, Props>): JSX.Element;
+    defaultProps?: Partial<PropsOf<C, Props>>;
+    displayName?: string;
+}
+/** Config for VUI component creator helper, which allows toggling memoization and 'areEqual' function */
+export interface VuiComponentConfig<C extends React.ElementType, Props = {}> {
+    isMemo?: boolean;
+    memoCompare?: (prevProps: Readonly<React.PropsWithChildren<React.PropsWithoutRef<PropsOf<C, Props>>>>, nextProps: Readonly<React.PropsWithChildren<React.PropsWithoutRef<PropsOf<C, Props>>>>) => boolean;
+}
+/**
+ * Simpler VUI component interface, which allows element props inference and extension
+ * Does not support 'as' or 'ref'
+ */
+export interface VC<C extends React.ElementType, Props = {}> {
+    (props: PropsOf<C, Props>): JSX.Element;
+    defaultProps?: Partial<PropsOf<C, Props>>;
     displayName?: string;
 }

package/core/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from './component';
 export * from './context';
 export * from './events';
+export * from './themeGet';

package/core/types/index.js

@@ -13,3 +13,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./component"), exports);
 __exportStar(require("./context"), exports);
 __exportStar(require("./events"), exports);
+__exportStar(require("./themeGet"), exports);

package/core/types/themeGet.d.ts

@@ -0,0 +1,24 @@
+import { IProps, ThemeGetter } from '@xstyled/styled-components';
+import { VuiTheme } from '../../theme';
+import { AnyString, AnyNumber } from '../../utils';
+declare type VuiThemeGetter<ThemeKey extends keyof VuiTheme> = ThemeGetter<keyof VuiTheme[ThemeKey] | AnyString | AnyNumber>;
+export interface ThemeGet {
+    (path: string, defaultValue?: any): (props: IProps) => any;
+    animation: VuiThemeGetter<'animations'>;
+    borders: VuiThemeGetter<'borders'>;
+    color: VuiThemeGetter<'colors'>;
+    duration: VuiThemeGetter<'durations'>;
+    font: VuiThemeGetter<'fonts'>;
+    fontSize: VuiThemeGetter<'fontSizes'>;
+    fontWeight: VuiThemeGetter<'fontWeights'>;
+    radius: VuiThemeGetter<'radii'>;
+    ringWidth: VuiThemeGetter<'ringWidths'>;
+    screen: VuiThemeGetter<'screens'>;
+    shadow: VuiThemeGetter<'shadows'>;
+    size: VuiThemeGetter<'sizes'>;
+    space: VuiThemeGetter<'spaces'>;
+    transform: VuiThemeGetter<'transforms'>;
+    transition: VuiThemeGetter<'transitions'>;
+    zIndex: VuiThemeGetter<'zIndices'>;
+}
+export {};

package/core/utils.d.ts

@@ -1,22 +1,25 @@
 import { StyleGenerator } from '@xstyled/styled-components';
 import React from 'react';
 import { StyledProps } from 'styled-components';
-import { ComponentProps, CreateContextOptions, CreateContextReturn, VuiComponent } from './types';
-import { ThemingProps, ThemeOverrides, VuiTheme } from '../theme';
-import { Dict } from '../utils';
+import { CreateContextOptions, CreateContextReturn, PropsOf, ThemeGet, VuiComponent, VuiComponentConfig } from './types';
+import { Screen, ThemingProps, VuiTheme, VuiThemeExtensions } from '../theme';
+import { AnyNumber, AnyString, Dict } from '../utils';
 /** Generic function to create new Context and context access hook. */
 export declare function createContext<ContextType>(options?: CreateContextOptions): CreateContextReturn<ContextType>;
-/** Merges provided theme overrides with default VUI theme */
-export declare function extendTheme(overrides: ThemeOverrides): VuiTheme;
+/** Merges provided theme extensions and overrides with default VUI theme */
+export declare function extendTheme(extensions: VuiThemeExtensions): VuiTheme;
 /**
  * Provides configuration to the 'styled' function, which filters out xstyled system props
  * Return type is cast to {} in order to avoid messing up styled component's actual props definition.
  */
 export declare function forwardPropConfig(generator: StyleGenerator): {};
-/** Custom implementation of forwardRef, including polymorphic 'as' type based on StyledComponent. */
-export declare function forwardRef<C extends React.ElementType, Props = {}>(component: React.ForwardRefRenderFunction<any, ComponentProps<C, Props>>): VuiComponent<C, Props>;
-/** Recursively maps through all theme styles and generates a set of CSS properties */
-export declare function generateCSSVariables(): string;
+declare type ScreenWidth = Screen | AnyNumber | AnyString;
+/** Returns CSS media string with appropriate min-width and max-width values */
+export declare const mediaBetween: (minWidth: ScreenWidth, maxWidth: ScreenWidth) => (props: StyledProps<unknown>) => string;
+/** Returns CSS media string with appropriate max-width value */
+export declare const mediaDown: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
+/** Returns CSS media string with appropriate min-width value */
+export declare const mediaUp: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
 /** Removes specific theming keys from the given props. */
 export declare function omitThemingProps<T extends ThemingProps>(props: T): Omit<T, "variant" | "size">;
 /**
@@ -24,15 +27,32 @@ export declare function omitThemingProps<T extends ThemingProps>(props: T): Omit
  * @param props - list of props to filter out
  */
 export declare function shouldForwardProp(props: string[]): (prop: string | number, defaultValidatorFn: (prop: string | number) => boolean) => boolean;
-/**
- * Gets a value from the theme for a given path.
- * @param themeKey - any top level property of the theme, e.g. 'colors'
- * @param path - path to a nested value of a given theme property, e.g. 'grey.50'
- */
-export declare function th(themeKey: keyof VuiTheme | (string & {}), path?: string | number): ({ theme }: StyledProps<unknown>) => string;
+/** Re-export of xstyled 'th' with custom typing and screen getter */
+declare const th: ThemeGet;
+export { th };
+/** Returns true of current viewport width is between provided min and max widths */
+export declare function useBetween(minWidth: ScreenWidth, maxWidth: ScreenWidth): boolean;
+/** Returns true of current viewport width is smaller than provided width */
+export declare function useDown(width: ScreenWidth): boolean;
+/** Returns viewport width and provided screen width as a number  */
+export declare function useMedia(width: ScreenWidth): {
+    value: number;
+    viewportWidth: number | null;
+};
 /**
  * Retrieves and merges size and variant styling from theme configuration.
  * @param component - name of any component configured in the theme
  * @param props - props object of the given component
  */
 export declare function useStyleConfig(component: keyof VuiTheme['components'], props?: any): Dict<any>;
+/** Returns theme value at the given path */
+export declare function useTh(path: keyof VuiTheme | AnyString, defaultValue?: any): any;
+/** Returns the theme object with extensions */
+export declare function useTheme(): VuiTheme;
+/** Returns true of current viewport width is larger or equal to provided width */
+export declare function useUp(width: ScreenWidth): boolean;
+/**
+ * Component creation utility, which combines forwardRef, memo and ensures correct typing with all props included.
+ * Config object allows toggling memoization and providing custom 'areEqual' function.
+ */
+export declare function vui<C extends React.ElementType, Props = {}>(component: React.ForwardRefRenderFunction<any, PropsOf<C, Props>>, config?: VuiComponentConfig<C, Props>): VuiComponent<C, Props>;