@veracity/vui 0.0.3 → 0.0.4

package/button/button.js

@@ -40,9 +40,7 @@ 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.fontSize, styled_components_1.fontWeight, styled_components_1.pointerEvents, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
 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({
-    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: 1.1;\n\tposition: relative;\n\ttransition: all 0s ease-in-out;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\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: 1.1;\n\tposition: relative;\n\ttransition: all 0s ease-in-out;\n\tuser-select: none;\n\twidth: fit-content;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t\toutline: none;\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.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) {
     var _a;
     var buttonGroupProps = context_1.useButtonGroup();

package/button/button.types.d.ts

@@ -1,8 +1,8 @@
-import { HTMLAttributes } from 'react';
+/// <reference types="react" />
 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 Omit<HTMLAttributes<HTMLButtonElement>, 'color'>, ButtonStyleProps, ThemingProps<'Button'> {
+export interface ButtonProps extends ButtonStyleProps, ThemingProps<'Button'> {
     colorScheme?: 'blue' | 'green' | 'pink' | 'prussian' | 'red';
     icon?: IconProp;
     iconLeft?: IconProp;

package/button/buttonGroup.d.ts

@@ -1,6 +1,4 @@
 import { ButtonGroupProps, ButtonGroupStyleProps } from './buttonGroup.types';
-export declare const ButtonGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    [x: string]: {};
-} & ButtonGroupStyleProps, never>;
-export declare const ButtonGroup: import("styled-components").StyledComponent<"div", never, ButtonGroupProps, never>;
+export declare const ButtonGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ButtonGroupStyleProps, never>;
+export declare const ButtonGroup: import("../core").VuiComponent<"div", ButtonGroupProps>;
 export default ButtonGroup;

package/button/buttonGroup.js

@@ -56,9 +56,7 @@ var context_1 = require("./context");
 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({
-    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(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> *:focus {\n\t\tz-index: 1;\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> *:focus {\n\t\tz-index: 1;\n\t}\n\n\t", "\n"])), generator);
+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) {
     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 }); }, [

package/button/buttonGroup.types.d.ts

@@ -1,7 +1,6 @@
-import { HTMLAttributes } from 'react';
 import { FlexboxesProps, SizingProps, SpaceProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface ButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, ButtonGroupStyleProps, ThemingProps<'Button'> {
+export interface ButtonGroupProps extends ButtonGroupStyleProps, ThemingProps<'Button'> {
     colorScheme?: 'blue' | 'green' | 'pink' | 'prussian' | 'red';
     disabled?: boolean;
 }

package/button/buttons.d.ts

@@ -1,8 +1,8 @@
 import { ButtonProps as BaseButtonProps } from './button.types';
 declare type ButtonProps = Omit<BaseButtonProps, 'variant'>;
-export declare const AppButton: import("styled-components").StyledComponent<"button", never, ButtonProps, never>;
-export declare const CTAButton: import("styled-components").StyledComponent<"button", never, ButtonProps, never>;
-export declare const DangerButton: import("styled-components").StyledComponent<"button", never, ButtonProps, never>;
-export declare const OutlinedButton: import("styled-components").StyledComponent<"button", never, ButtonProps, never>;
-export declare const TextButton: import("styled-components").StyledComponent<"button", never, ButtonProps, never>;
+export declare const AppButton: 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 TextButton: import("../core").VuiComponent<"button", ButtonProps>;
 export {};

package/checkbox/checkbox.d.ts

@@ -1,10 +1,6 @@
 import { CheckboxControlStyleProps, CheckboxProps, CheckboxStyleProps } from './checkbox.types';
 export declare const CheckboxInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
-export declare const CheckboxBase: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
-    [x: string]: {};
-} & CheckboxStyleProps, never>;
-export declare const CheckboxControl: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
-    [x: string]: {};
-} & CheckboxControlStyleProps, never>;
-export declare const Checkbox: import("styled-components").StyledComponent<"span", never, CheckboxProps, never>;
+export declare const CheckboxBase: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, CheckboxStyleProps, never>;
+export declare const CheckboxControl: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, CheckboxControlStyleProps, never>;
+export declare const Checkbox: import("../core").VuiComponent<"span", CheckboxProps>;
 export default Checkbox;

package/checkbox/checkbox.js

@@ -76,12 +76,8 @@ var utils_1 = require("../utils");
 var checkboxGenerator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.color, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
 var controlGenerator = styled_components_1.compose(styled_components_1.borders, styled_components_1.backgroundColor, styled_components_1.color, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
 exports.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({
-    shouldForwardProp: core_1.shouldForwardProp(checkboxGenerator.meta.props)
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\ttransition: all 0s ease-in-out;\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\ttransition: all 0s ease-in-out;\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({
-    shouldForwardProp: core_1.shouldForwardProp(controlGenerator.meta.props)
-})(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.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) {
     var checkboxGroupProps = context_1.useCheckboxGroup();
     var mergedProps = __assign(__assign({}, checkboxGroupProps), props);
@@ -104,7 +100,7 @@ exports.Checkbox = core_1.forwardRef(function (props, ref) {
     return (react_1.default.createElement(exports.CheckboxBase, __assign({ className: utils_1.cs('vui-checkbox', disabled && 'disabled', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, rest),
         react_1.default.createElement(exports.CheckboxControl, __assign({ borderRadius: "sm", className: "vui-checkboxControl", color: color, focusWithinRing: 3, mr: controlMr, transitionDuration: "fast" }, controlStyles),
             react_1.default.createElement(exports.CheckboxInput, __assign({ className: "vui-checkboxInput", onChange: handleOnChange, ref: inputRef, type: "checkbox" }, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, name: name, required: required, value: value }, inputProps)),
-            react_1.default.createElement(icon_1.default, { h: "100%", icon: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, __assign({ className: "vui-checkboxLabel" }, styles.label), label)))));
+            react_1.default.createElement(icon_1.default, { className: "vui-checkboxIcon", h: "100%", icon: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, __assign({ className: "vui-checkboxLabel", lineHeight: "normal" }, styles.label), label)))));
 });
 exports.Checkbox.displayName = 'Checkbox';
 exports.default = exports.Checkbox;

package/checkbox/checkbox.types.d.ts

@@ -2,9 +2,9 @@ import { HTMLAttributes } from 'react';
 import { IconProp } from '../icon';
 import { BackgroundColorProps, BordersProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface CheckboxProps extends Omit<HTMLAttributes<HTMLLabelElement>, 'onChange'>, CheckboxStyleProps, ThemingProps<'Checkbox'> {
+export interface CheckboxProps extends CheckboxStyleProps, ThemingProps<'Checkbox'> {
     checked?: boolean;
-    colorScheme?: 'blue' | 'prussian';
+    colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
     disabled?: boolean;
     icon?: IconProp;
     iconChecked?: IconProp;
@@ -14,7 +14,9 @@ export interface CheckboxProps extends Omit<HTMLAttributes<HTMLLabelElement>, 'o
     isIndeterminate?: boolean;
     label?: string;
     name?: string;
+    onBlur?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     required?: boolean;
     value?: number | string;
 }

package/checkbox/checkboxGroup.d.ts

@@ -1,6 +1,4 @@
 import { CheckboxGroupProps, CheckboxGroupStyleProps } from './checkboxGroup.types';
-export declare const CheckboxGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    [x: string]: {};
-} & CheckboxGroupStyleProps, never>;
-export declare const CheckboxGroup: import("styled-components").StyledComponent<"div", never, CheckboxGroupProps, never>;
+export declare const CheckboxGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, CheckboxGroupStyleProps, never>;
+export declare const CheckboxGroup: import("../core").VuiComponent<"div", CheckboxGroupProps>;
 export default CheckboxGroup;

package/checkbox/checkboxGroup.js

@@ -56,19 +56,10 @@ var context_1 = require("./context");
 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({
-    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(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.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) {
-    var className = props.className, colorScheme = props.colorScheme, disabled = props.disabled, name = props.name, onChange = props.onChange, row = props.row, size = props.size, variant = props.variant, rest = __rest(props, ["className", "colorScheme", "disabled", "name", "onChange", "row", "size", "variant"]);
-    var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, disabled: disabled, name: name, onChange: onChange, size: size, variant: variant }); }, [
-        colorScheme,
-        disabled,
-        name,
-        onChange,
-        size,
-        variant
-    ]);
+    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({
         flexDirection: row ? 'row' : undefined
     });

package/checkbox/checkboxGroup.types.d.ts

@@ -1,11 +1,13 @@
-import { HTMLAttributes } from 'react';
+/// <reference types="react" />
 import { FlexboxesProps, SizingProps, SpaceProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface CheckboxGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, CheckboxGroupStyleProps, ThemingProps<'Checkbox'> {
-    colorScheme?: 'blue' | 'prussian';
+export interface CheckboxGroupProps extends CheckboxGroupStyleProps, ThemingProps<'Checkbox'> {
+    colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
     disabled?: boolean;
     name?: string;
+    onBlur?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     row?: boolean;
 }
 export interface CheckboxGroupStyleProps extends FlexboxesProps, SizingProps, SpaceProps {

package/checkbox/theme.d.ts

@@ -28,7 +28,6 @@ declare const _default: {
                 w: number;
             };
             label: {
-                lineHeight: number;
                 size: string;
             };
         };

package/checkbox/theme.js

@@ -32,7 +32,6 @@ var sizes = {
             w: 20
         },
         label: {
-            lineHeight: 1.2,
             size: 'md'
         }
     },

package/core/globalStyle.js

@@ -7,5 +7,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var styled_components_1 = require("styled-components");
 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-20);\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\thtml {\n\t\tbox-sizing: border-box;\n\t}\n\n\t*, *:before, *:after {\n\t\tbox-sizing: inherit;\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 #fff;\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\ta {\n\t\ttext-decoration: none;\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-20);\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\thtml {\n\t\tbox-sizing: border-box;\n\t}\n\n\t*, *:before, *:after {\n\t\tbox-sizing: inherit;\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 #fff;\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\ta {\n\t\ttext-decoration: none;\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);
+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 templateObject_1;

package/core/index.d.ts

@@ -2,4 +2,5 @@ export * from './consts';
 export * from './types';
 export * from './utils';
 export { default as GlobalStyle } from './globalStyle';
+export { default as ResetCSS } from './resetCSS';
 export { default as VuiProvider } from './vuiProvider';

package/core/index.js

@@ -13,11 +13,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VuiProvider = exports.GlobalStyle = void 0;
+exports.VuiProvider = exports.ResetCSS = exports.GlobalStyle = void 0;
 __exportStar(require("./consts"), exports);
 __exportStar(require("./types"), exports);
 __exportStar(require("./utils"), exports);
 var globalStyle_1 = require("./globalStyle");
 Object.defineProperty(exports, "GlobalStyle", { enumerable: true, get: function () { return __importDefault(globalStyle_1).default; } });
+var resetCSS_1 = require("./resetCSS");
+Object.defineProperty(exports, "ResetCSS", { enumerable: true, get: function () { return __importDefault(resetCSS_1).default; } });
 var vuiProvider_1 = require("./vuiProvider");
 Object.defineProperty(exports, "VuiProvider", { enumerable: true, get: function () { return __importDefault(vuiProvider_1).default; } });

package/core/resetCSS.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+export default _default;

package/core/resetCSS.js

@@ -0,0 +1,9 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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.5;\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\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.5;\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\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"])));
+var templateObject_1;

package/core/types.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-export declare type As = React.ElementType;
 export interface CreateContextOptions {
     /** Message displayed when context is used outside of the provider */
     errorMessage?: string;
@@ -9,4 +8,21 @@ export interface CreateContextOptions {
     name?: string;
 }
 export declare type CreateContextReturn<T> = [React.Provider<T>, () => T];
-export declare type PropsOf<T extends As> = React.ComponentPropsWithoutRef<T>;
+/** Merges component/element base props, custom props and 'as' prop */
+export declare type ComponentProps<C extends React.ElementType, Props = {}> = RightJoinProps<React.ComponentPropsWithoutRef<C>, Props & {
+    as?: C;
+    forwardedAs?: C;
+}>;
+/** Merges component/element base props, custom props, 'as' prop and 'ref' */
+export declare type ComponentPropsWithRef<C extends React.ElementType, Props = {}> = RightJoinProps<React.ComponentPropsWithRef<C>, Props & {
+    as?: C;
+}>;
+/** Strips call signature from ForwardRefExoticComponent */
+export declare type ForwardRefExoticBase<P> = Pick<React.ForwardRefExoticComponent<P>, keyof React.ForwardRefExoticComponent<any>>;
+/** Merges two props definitions without conflicts */
+export declare type RightJoinProps<SourceProps = {}, OverrideProps = {}> = OverrideProps & Omit<SourceProps, keyof OverrideProps>;
+/** VUI Component definition supporting custom props, 'as' props and 'ref' */
+export interface VuiComponent<C extends React.ElementType, Props = {}> extends ForwardRefExoticBase<ComponentPropsWithRef<C, Props>> {
+    /** Add custom call signature */
+    <AsC extends React.ElementType = C>(props: ComponentPropsWithRef<AsC, Props>): React.ReactElement<ComponentPropsWithRef<AsC, Props>>;
+}

package/core/types.js

@@ -1,2 +1,3 @@
 "use strict";
+/* eslint-disable @typescript-eslint/ban-types */
 Object.defineProperty(exports, "__esModule", { value: true });

package/core/utils.d.ts

@@ -1,16 +1,21 @@
+import { StyleGenerator } from '@xstyled/styled-components';
 import React from 'react';
-import { StyledComponent, StyledProps } from 'styled-components';
-import { As, CreateContextOptions, CreateContextReturn, PropsOf } from './types';
+import { StyledProps } from 'styled-components';
+import { ComponentProps, CreateContextOptions, CreateContextReturn, VuiComponent } from './types';
 import { ThemingProps, ThemeOverrides, VuiTheme } from '../theme';
 import { 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;
+/**
+ * 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<Props extends object, Component extends As>(component: React.ForwardRefRenderFunction<Component, PropsOf<Component> & Props & {
-    as?: As;
-}>): StyledComponent<Component, never, Props, never>;
+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;
 /** Removes specific theming keys from the given props. */
 export declare function omitThemingProps<T extends ThemingProps>(props: T): Omit<T, "variant" | "size">;

package/core/utils.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable @typescript-eslint/ban-types */
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -60,7 +61,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyleConfig = exports.th = exports.shouldForwardProp = exports.omitThemingProps = exports.generateCSSVariables = exports.forwardRef = exports.extendTheme = exports.createContext = void 0;
+exports.useStyleConfig = exports.th = exports.shouldForwardProp = exports.omitThemingProps = exports.generateCSSVariables = exports.forwardRef = exports.forwardPropConfig = exports.extendTheme = exports.createContext = void 0;
 var react_1 = __importStar(require("react"));
 var styled_components_1 = require("styled-components");
 var styles_1 = require("../styles");
@@ -86,12 +87,26 @@ function extendTheme(overrides) {
     return utils_1.mergeWith(theme_1.default, overrides);
 }
 exports.extendTheme = extendTheme;
-/* eslint-disable @typescript-eslint/ban-types */
+/**
+ * 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.
+ */
+function forwardPropConfig(generator) {
+    return {
+        shouldForwardProp: function (prop, defaultValidatorFn) {
+            if (typeof prop === 'string' && generator.meta.props.includes(prop))
+                return false;
+            return defaultValidatorFn(prop);
+        }
+    };
+}
+exports.forwardPropConfig = forwardPropConfig;
 /** Custom implementation of forwardRef, including polymorphic 'as' type based on StyledComponent. */
 function forwardRef(component) {
     return react_1.default.forwardRef(component);
 }
 exports.forwardRef = forwardRef;
+/** Recursively maps through all theme styles and generates a set of CSS properties */
 function generateCSSVariables() {
     function computeStyle(name, value) {
         if (!utils_1.isObj(value))

package/core/vuiProvider.js

@@ -5,12 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = require("@xstyled/styled-components");
+var resetCSS_1 = __importDefault(require("./resetCSS"));
 var globalStyle_1 = __importDefault(require("./globalStyle"));
 var theme_1 = __importDefault(require("../theme"));
 var VuiProvider = function (_a) {
     var children = _a.children, _b = _a.globalStyle, globalStyle = _b === void 0 ? true : _b, _c = _a.resetCSS, resetCSS = _c === void 0 ? true : _c, _d = _a.theme, theme = _d === void 0 ? theme_1.default : _d;
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
-        resetCSS && react_1.default.createElement(styled_components_1.Preflight, null),
+        resetCSS && react_1.default.createElement(resetCSS_1.default, null),
         globalStyle && react_1.default.createElement(globalStyle_1.default, null),
         children));
 };

package/divider/divider.d.ts

@@ -1,6 +1,4 @@
 import { DividerProps, DividerStyleProps } from './divider.types';
-export declare const DividerBase: import("styled-components").StyledComponent<"hr", import("styled-components").DefaultTheme, {
-    [x: string]: {};
-} & DividerStyleProps, never>;
-export declare const Divider: import("styled-components").StyledComponent<"hr", never, DividerProps, never>;
+export declare const DividerBase: import("styled-components").StyledComponent<"hr", import("styled-components").DefaultTheme, DividerStyleProps, never>;
+export declare const Divider: import("../core").VuiComponent<"hr", DividerProps>;
 export default Divider;

package/divider/divider.js

@@ -36,21 +36,18 @@ 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.borders, styled_components_1.sizing, styled_components_1.space);
-exports.DividerBase = styled_components_2.default.hr.withConfig({
-    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
+exports.DividerBase = styled_components_2.default.hr.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
 exports.Divider = core_1.forwardRef(function (props, ref) {
-    var _a, _b;
-    var _c = core_1.omitThemingProps(props), className = _c.className, isVertical = _c.isVertical, width = _c.width, rest = __rest(_c, ["className", "isVertical", "width"]);
+    var _a;
+    var _b = core_1.omitThemingProps(props), className = _b.className, isVertical = _b.isVertical, width = _b.width, rest = __rest(_b, ["className", "isVertical", "width"]);
     var styles = core_1.useStyleConfig('Divider', props);
     var borderSide = isVertical ? 'Right' : 'Bottom';
     var borderWidth = "border" + borderSide + "Width";
     var height = isVertical ? '100%' : '';
-    var defaultProps = (_a = {}, _a[borderWidth] = 1, _a);
-    var aliasedProps = utils_1.filterUndefined((_b = {},
-        _b[borderWidth] = width,
-        _b));
-    return (react_1.default.createElement(exports.DividerBase, __assign({ borderColor: "grey.30", className: utils_1.cs('vui-divider', className), h: height, ref: ref }, defaultProps, styles, aliasedProps, rest)));
+    var aliasedProps = utils_1.filterUndefined((_a = {},
+        _a[borderWidth] = width !== null && width !== void 0 ? width : 1,
+        _a));
+    return (react_1.default.createElement(exports.DividerBase, __assign({ borderColor: "grey.30", className: utils_1.cs('vui-divider', className), h: height, ref: ref }, styles, aliasedProps, rest)));
 });
 exports.Divider.displayName = 'Divider';
 exports.default = exports.Divider;

package/divider/divider.types.d.ts

@@ -1,7 +1,6 @@
-import { HTMLAttributes } from 'react';
 import { BordersProps, SizingProps, SpaceProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface DividerProps extends HTMLAttributes<HTMLHRElement>, DividerStyleProps, ThemingProps<'Divider'> {
+export interface DividerProps extends DividerStyleProps, ThemingProps<'Divider'> {
     className?: string;
     isVertical?: boolean;
     width?: BordersProps['borderWidth'];

package/heading/heading.d.ts

@@ -1,6 +1,6 @@
 import { HeadingProps, HeadingStyleProps } from './heading.types';
-export declare const HeadingBase: import("styled-components").StyledComponent<"h2", import("styled-components").DefaultTheme, {
-    [x: string]: {};
-} & HeadingStyleProps, never>;
-export declare const Heading: import("styled-components").StyledComponent<"h2", never, HeadingProps, never>;
+export declare const HeadingBase: import("styled-components").StyledComponent<"h2", import("styled-components").DefaultTheme, HeadingStyleProps & {
+    color?: any;
+}, never>;
+export declare const Heading: import("../core").VuiComponent<"h2", HeadingProps>;
 export default Heading;

package/heading/heading.js

@@ -37,9 +37,7 @@ var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
 var generator = styled_components_1.compose(system_1.isTruncated, system_1.maxLines, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
-exports.HeadingBase = styled_components_2.default.h2.withConfig({
-    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\ttransition: all 0s ease-in-out;\n\n\t", "\n"], ["\n\ttransition: all 0s ease-in-out;\n\n\t", "\n"])), generator);
+exports.HeadingBase = styled_components_2.default.h2.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
 exports.Heading = core_1.forwardRef(function (props, ref) {
     var _a = core_1.omitThemingProps(props), align = _a.align, casing = _a.casing, className = _a.className, decoration = _a.decoration, weight = _a.weight, rest = __rest(_a, ["align", "casing", "className", "decoration", "weight"]);
     var styles = core_1.useStyleConfig('Heading', props);

package/heading/heading.types.d.ts

@@ -1,12 +1,10 @@
-import { HTMLAttributes } from 'react';
-import { IsTruncatedProps, MaxLinesProps, SizingProps, SpaceProps, TextAlignProps, TextDecorationProps, TextTransformProps, TransitionsProps, TypographyProps } from '../system';
-import { FontWeight, ThemingProps } from '../theme';
-import { AnyString } from '../utils';
-export interface HeadingProps extends Omit<HTMLAttributes<HTMLHeadingElement>, 'color'>, HeadingStyleProps, ThemingProps<'Heading'> {
-    align?: TextAlignProps['textAlign'];
-    casing?: TextTransformProps['textTransform'];
-    decoration?: TextDecorationProps['textDecoration'];
-    weight?: FontWeight | AnyString | number;
+import { IsTruncatedProps, MaxLinesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { ThemingProps } from '../theme';
+export interface HeadingProps extends HeadingStyleProps, ThemingProps<'Heading'> {
+    align?: TypographyProps['textAlign'];
+    casing?: TypographyProps['textTransform'];
+    decoration?: TypographyProps['textDecoration'];
+    weight?: TypographyProps['fontWeight'];
 }
 export interface HeadingStyleProps extends IsTruncatedProps, MaxLinesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
 }

package/heading/headings.d.ts

@@ -1,9 +1,9 @@
 import { HeadingProps } from './heading.types';
 declare type HProps = Omit<HeadingProps, 'size'>;
-export declare const H1: import("styled-components").StyledComponent<"h1", never, HProps, never>;
-export declare const H2: import("styled-components").StyledComponent<"h2", never, HProps, never>;
-export declare const H3: import("styled-components").StyledComponent<"h3", never, HProps, never>;
-export declare const H4: import("styled-components").StyledComponent<"h4", never, HProps, never>;
-export declare const H5: import("styled-components").StyledComponent<"h5", never, HProps, never>;
-export declare const H6: import("styled-components").StyledComponent<"h6", never, HProps, never>;
+export declare const H1: import("../core").VuiComponent<"h1", HProps>;
+export declare const H2: import("../core").VuiComponent<"h2", HProps>;
+export declare const H3: import("../core").VuiComponent<"h3", HProps>;
+export declare const H4: import("../core").VuiComponent<"h4", HProps>;
+export declare const H5: import("../core").VuiComponent<"h5", HProps>;
+export declare const H6: import("../core").VuiComponent<"h6", HProps>;
 export {};

package/icon/icon.d.ts

@@ -1,3 +1,3 @@
 import { IconProps } from './icon.types';
-declare const Icon: import("styled-components").StyledComponent<"svg", never, IconProps, never>;
+declare const Icon: import("../core").VuiComponent<"svg", IconProps>;
 export default Icon;

package/icon/icon.js

@@ -31,15 +31,19 @@ var core_1 = require("../core");
 var svg_1 = require("../svg");
 var utils_1 = require("../utils");
 var Icon = core_1.forwardRef(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), _b = _a.className, className = _b === void 0 ? '' : _b, icon = _a.icon, rotate = _a.rotate, scale = _a.scale, rest = __rest(_a, ["className", "icon", "rotate", "scale"]);
+    var _a = core_1.omitThemingProps(props), className = _a.className, icon = _a.icon, rotate = _a.rotate, scale = _a.scale, rest = __rest(_a, ["className", "icon", "rotate", "scale"]);
     var styles = core_1.useStyleConfig('Icon', props);
     var customIcon = helpers_1.getCustomIcon(icon);
     var customIconProps = customIcon
         ? __assign({ 'data-name': customIcon.name, viewBox: customIcon.viewBox }, customIcon.svgProps) : {};
-    var scaledSize = scale ? { height: 16 * scale, width: 16 * scale } : {};
+    var scaledSize = scale ? 16 * scale : undefined;
     var src = helpers_1.getIconSrc(icon);
-    var transform = rotate !== undefined ? "rotate(" + rotate + "deg)" : undefined;
-    return (react_1.default.createElement(svg_1.Svg, __assign({ className: utils_1.cs('vui-icon', className), display: "inline-flex", flexShrink: 0, ref: ref, src: src, transform: transform }, styles, customIconProps, scaledSize, rest), customIcon === null || customIcon === void 0 ? void 0 : customIcon.d.map(function (d, i) { return (react_1.default.createElement("path", __assign({ d: d, fill: "currentColor", key: i }, customIcon.pathProps[i]))); })));
+    var aliasedProps = utils_1.filterUndefined({
+        h: scaledSize,
+        transform: rotate !== undefined ? "rotate(" + rotate + "deg)" : undefined,
+        w: scaledSize
+    });
+    return (react_1.default.createElement(svg_1.Svg, __assign({ className: utils_1.cs('vui-icon', className), display: "inline-flex", flexShrink: 0, ref: ref, src: src }, styles, customIconProps, aliasedProps, rest), customIcon === null || customIcon === void 0 ? void 0 : customIcon.d.map(function (d, i) { return (react_1.default.createElement("path", __assign({ d: d, fill: "currentColor", key: i }, customIcon.pathProps[i]))); })));
 });
 Icon.displayName = 'Icon';
 exports.default = Icon;

package/index.d.ts

@@ -1,3 +1,4 @@
+export * from './alert';
 export * from './avatar';
 export * from './box';
 export * from './button';
@@ -13,6 +14,7 @@ export * from './list';
 export * from './p';
 export * from './radio';
 export * from './skeleton';
+export * from './spinner';
 export * from './styles';
 export * from './svg';
 export * from './switch';

package/index.js

@@ -10,6 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./alert"), exports);
 __exportStar(require("./avatar"), exports);
 __exportStar(require("./box"), exports);
 __exportStar(require("./button"), exports);
@@ -25,6 +26,7 @@ __exportStar(require("./list"), exports);
 __exportStar(require("./p"), exports);
 __exportStar(require("./radio"), exports);
 __exportStar(require("./skeleton"), exports);
+__exportStar(require("./spinner"), exports);
 __exportStar(require("./styles"), exports);
 __exportStar(require("./svg"), exports);
 __exportStar(require("./switch"), exports);