@veracity/vui 0.0.8 → 0.0.10

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"));
+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.d.ts

@@ -1,6 +1,5 @@
-import { AvatarProps, AvatarStyleProps } from './avatar.types';
-export declare const AvatarBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, AvatarStyleProps & {
-    color?: any;
-}, never>;
+import { AvatarProps } from './avatar.types';
+import { SystemProps } from '../system';
+export declare const AvatarBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const Avatar: import("../core").VuiComponent<"span", AvatarProps>;
 export default Avatar;

package/avatar/avatar.js

@@ -51,10 +51,10 @@ var react_1 = __importDefault(require("react"));
 var styled_components_2 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
+var system_1 = require("../system");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.interactivity, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
 var AvatarImage = styled_components_2.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\theight: 100%;\n\twidth: 100%;\n\n\t", "\n"], ["\n\theight: 100%;\n\twidth: 100%;\n\n\t", "\n"])), styled_components_1.borders);
-exports.AvatarBase = styled_components_2.default.span.withConfig(core_1.forwardPropConfig(generator))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\toutline: none;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\toutline: none;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"])), generator);
+exports.AvatarBase = styled_components_2.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\toutline: none;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tjustify-content: center;\n\tline-height: normal;\n\toutline: none;\n\n\t&:focus {\n\t\tborder-color: transparent;\n\t}\n\n\t", "\n"])), system_1.system);
 function defaultGetInitials(name) {
     if (name === void 0) { name = ''; }
     var _a = __read(name.split(' '), 2), _b = _a[0], first = _b === void 0 ? '' : _b, _c = _a[1], last = _c === void 0 ? '' : _c;

package/avatar/avatar.types.d.ts

@@ -1,9 +1,7 @@
 import { IconProp } from '../icon';
-import { BackgroundColorProps, BordersProps, InteractivityProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface AvatarImageStyleProps extends BordersProps {
-}
-export interface AvatarProps extends AvatarStyleProps, ThemingProps<'Avatar'> {
+export interface AvatarProps extends SystemProps, ThemingProps<'Avatar'> {
     colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
     getInitials?: (name: string) => string;
     icon?: IconProp;
@@ -12,5 +10,3 @@ export interface AvatarProps extends AvatarStyleProps, ThemingProps<'Avatar'> {
     name?: string;
     src?: string;
 }
-export interface AvatarStyleProps extends BackgroundColorProps, BordersProps, InteractivityProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
-}

package/box/box.d.ts

@@ -1,6 +1,5 @@
-import { BoxProps, BoxStyleProps } from './box.types';
-export declare const BoxBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, BoxStyleProps & {
-    color?: any;
-}, never>;
+import { BoxProps } from './box.types';
+import { SystemProps } from '../system';
+export declare const BoxBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const Box: import("../core").VuiComponent<"div", BoxProps>;
 export default Box;

package/box/box.js

@@ -30,13 +30,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Box = exports.BoxBase = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
+var system_1 = require("../system");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(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.BoxBase = styled_components_1.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\n\t", "\n"])), system_1.system);
 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);

package/box/box.types.d.ts

@@ -1,6 +1,6 @@
-import { BackgroundColorProps, BordersProps, ColorProps, EffectsProps, FlexboxesProps, InteractivityProps, LayoutProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { BordersProps, EffectsProps, FlexboxesProps, SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface BoxProps extends BoxStyleProps, ThemingProps<'Box'> {
+export interface BoxProps extends SystemProps, ThemingProps<'Box'> {
     align?: FlexboxesProps['alignItems'];
     center?: boolean;
     centerH?: boolean;
@@ -13,5 +13,3 @@ 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, TypographyProps {
-}

package/button/button.d.ts

@@ -1,6 +1,5 @@
-import { ButtonProps, ButtonStyleProps } from './button.types';
-export declare const ButtonBase: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, ButtonStyleProps & {
-    color?: any;
-}, never>;
+import { ButtonProps } from './button.types';
+import { SystemProps } from '../system';
+export declare const ButtonBase: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const Button: import("../core").VuiComponent<"button", ButtonProps>;
 export default Button;

package/button/button.js

@@ -30,17 +30,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = exports.ButtonBase = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
+var system_1 = require("../system");
 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(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);
+var ContentWrapper = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tvisibility: hidden;\n"], ["\n\tvisibility: hidden;\n"])));
+var LoadingWrapper = styled_components_1.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_1.default.button.withConfig(core_1.forwardPropConfig(system_1.system))(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"])), system_1.system);
 exports.Button = core_1.vui(function (props, ref) {
     var _a;
     var buttonGroupProps = context_1.useButtonGroup();

package/button/button.types.d.ts

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

package/button/buttonGroup.d.ts

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

package/button/buttonGroup.js

@@ -49,14 +49,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonGroup = exports.ButtonGroupBase = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importStar(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var context_1 = require("./context");
 var core_1 = require("../core");
+var system_1 = require("../system");
 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.ButtonGroupBase = styled_components_1.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(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"])), system_1.system);
 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 }); }, [

package/button/buttonGroup.types.d.ts

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

package/button/buttons.d.ts

@@ -1,5 +1,8 @@
-export declare const AppButton: import("../core").VuiComponent<import("../core").VuiComponent<"button", import("./button.types").ButtonProps>, {}>;
-export declare const CTAButton: import("../core").VuiComponent<import("../core").VuiComponent<"button", import("./button.types").ButtonProps>, {}>;
-export declare const DangerButton: import("../core").VuiComponent<import("../core").VuiComponent<"button", import("./button.types").ButtonProps>, {}>;
-export declare const OutlinedButton: import("../core").VuiComponent<import("../core").VuiComponent<"button", import("./button.types").ButtonProps>, {}>;
-export declare const TextButton: import("../core").VuiComponent<import("../core").VuiComponent<"button", import("./button.types").ButtonProps>, {}>;
+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 LineButton: import("../core").VuiComponent<"button", ButtonProps>;
+export declare const TextButton: import("../core").VuiComponent<"button", ButtonProps>;

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.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.OutlinedButton = core_1.vui(function (props, ref) { return (react_1.default.createElement(button_1.default, __assign({ colorScheme: "blue", ref: ref, variant: "outlined" }, 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,6 +7,12 @@ 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;
@@ -59,6 +65,7 @@ declare const _default: {
     variants: {
         outlined: typeof variantOutlined;
         solid: typeof variantSolid;
+        subtle: typeof variantSubtle;
         text: typeof variantText;
     };
 };

package/button/theme.js

@@ -16,6 +16,20 @@ 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 = {
@@ -45,6 +59,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 +102,7 @@ var sizes = {
 var variants = {
     outlined: variantOutlined,
     solid: variantSolid,
+    subtle: variantSubtle,
     text: variantText
 };
 exports.default = {

package/checkbox/checkbox.d.ts

@@ -1,6 +1,7 @@
-import { CheckboxControlStyleProps, CheckboxProps, CheckboxStyleProps } from './checkbox.types';
+import { CheckboxProps, CheckboxStyleProps } from './checkbox.types';
+import { SystemProps } from '../system';
 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, CheckboxStyleProps, never>;
-export declare const CheckboxControl: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, CheckboxControlStyleProps, never>;
+export declare const CheckboxControl: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const Checkbox: import("../core").VuiComponent<"span", CheckboxProps>;
 export default Checkbox;

package/checkbox/checkbox.js

@@ -65,19 +65,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = exports.CheckboxControl = exports.CheckboxBase = exports.CheckboxInput = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importStar(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
+var system_1 = require("../system");
 var t_1 = __importDefault(require("../t"));
 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(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.CheckboxInput = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcursor: inherit;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 1;\n"], ["\n\tcursor: inherit;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 1;\n"])));
+exports.CheckboxBase = styled_components_1.default.label.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\twidth: fit-content;\n\n\t:hover .vui-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.color(p.controlHoverColor)(p); }, system_1.system);
+exports.CheckboxControl = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"], ["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"])), system_1.system);
 exports.Checkbox = core_1.vui(function (props, ref) {
     var checkboxGroupProps = context_1.useCheckboxGroup();
     var mergedProps = __assign(__assign({}, checkboxGroupProps), props);

package/checkbox/checkbox.types.d.ts

@@ -1,9 +1,9 @@
 import { HTMLAttributes } from 'react';
 import { ChangeEventHandler, FocusEventHandler } from '../core';
 import { IconProp } from '../icon';
-import { BackgroundColorProps, BordersProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
+import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface CheckboxProps extends CheckboxStyleProps, ThemingProps<'Checkbox'> {
+export interface CheckboxProps extends SystemProps, ThemingProps<'Checkbox'> {
     checked?: boolean;
     colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
     disabled?: boolean;
@@ -21,8 +21,6 @@ export interface CheckboxProps extends CheckboxStyleProps, ThemingProps<'Checkbo
     required?: boolean;
     value?: number | string;
 }
-export interface CheckboxControlStyleProps extends BackgroundColorProps, BordersProps, SizingProps, SpaceProps, TransitionsProps {
-}
-export interface CheckboxStyleProps extends BackgroundColorProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps {
-    controlHoverColor?: string;
+export interface CheckboxStyleProps extends SystemProps {
+    controlHoverColor: string;
 }

package/checkbox/checkboxGroup.d.ts

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

package/checkbox/checkboxGroup.js

@@ -49,14 +49,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxGroup = exports.CheckboxGroupBase = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importStar(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var context_1 = require("./context");
 var core_1 = require("../core");
+var system_1 = require("../system");
 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.CheckboxGroupBase = styled_components_1.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"])), system_1.system);
 exports.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]);

package/checkbox/checkboxGroup.types.d.ts

@@ -1,7 +1,7 @@
 import { ChangeEventHandler, FocusEventHandler } from '../core';
-import { FlexboxesProps, SizingProps, SpaceProps } from '../system';
+import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface CheckboxGroupProps extends CheckboxGroupStyleProps, ThemingProps<'Checkbox'> {
+export interface CheckboxGroupProps extends SystemProps, ThemingProps<'Checkbox'> {
     colorScheme?: 'blue' | 'green' | 'prussian' | 'red';
     disabled?: boolean;
     name?: string;
@@ -10,5 +10,3 @@ export interface CheckboxGroupProps extends CheckboxGroupStyleProps, ThemingProp
     onFocus?: FocusEventHandler;
     row?: boolean;
 }
-export interface CheckboxGroupStyleProps extends FlexboxesProps, SizingProps, SpaceProps {
-}

package/core/types/component.d.ts

@@ -7,12 +7,9 @@ export declare type RefPropsOf<C extends React.ElementType, Props = {}> = RightJ
 export declare type RightJoinProps<SourceProps, OverrideProps> = OverrideProps & Omit<SourceProps, keyof OverrideProps>;
 /** 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: RefPropsOf<AsC, Props> & {
+    <AsC extends React.ElementType>(props: RefPropsOf<PropsOf<C, AsC>, Props> & {
         as: AsC;
     }): JSX.Element;
-    <AsC extends React.ElementType>(props: RefPropsOf<AsC, Props> & {
-        forwardedAs: AsC;
-    }): JSX.Element;
     (props: RefPropsOf<C, Props>): JSX.Element;
     defaultProps?: Partial<PropsOf<C, Props>>;
     displayName?: string;

package/core/vuiProvider.js

@@ -4,7 +4,7 @@ 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 styled_components_1 = require("styled-components");
 var globalStyle_1 = __importDefault(require("./globalStyle"));
 var resetCSS_1 = __importDefault(require("./resetCSS"));
 var theme_1 = __importDefault(require("../theme"));

package/divider/divider.d.ts

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

package/divider/divider.js

@@ -30,13 +30,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Divider = exports.DividerBase = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
+var system_1 = require("../system");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.borders, styled_components_1.sizing, styled_components_1.space);
-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.DividerBase = styled_components_1.default.hr.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
 exports.Divider = core_1.vui(function (props, ref) {
     var _a;
     var _b = core_1.omitThemingProps(props), className = _b.className, isVertical = _b.isVertical, width = _b.width, rest = __rest(_b, ["className", "isVertical", "width"]);

package/divider/divider.types.d.ts

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

package/heading/heading.d.ts

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

package/heading/heading.js

@@ -30,16 +30,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Heading = exports.HeadingBase = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
-var styled_components_2 = __importDefault(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(system_1.isTruncated, 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(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
+exports.HeadingBase = styled_components_1.default.h2.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
 exports.Heading = core_1.vui(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), align = _a.align, casing = _a.casing, className = _a.className, decoration = _a.decoration, weight = _a.weight, rest = __rest(_a, ["align", "casing", "className", "decoration", "weight"]);
+    var _a = core_1.omitThemingProps(props), align = _a.align, casing = _a.casing, children = _a.children, className = _a.className, decoration = _a.decoration, text = _a.text, weight = _a.weight, rest = __rest(_a, ["align", "casing", "children", "className", "decoration", "text", "weight"]);
     var styles = core_1.useStyleConfig('Heading', props);
     var hClassName = props.size ? "vui-" + props.size : '';
     var aliasedProps = utils_1.filterUndefined({
@@ -48,7 +46,7 @@ exports.Heading = core_1.vui(function (props, ref) {
         textDecoration: decoration,
         textTransform: casing
     });
-    return (react_1.default.createElement(exports.HeadingBase, __assign({ className: utils_1.cs('vui-heading', hClassName, className), fontWeight: "demi", ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest)));
+    return (react_1.default.createElement(exports.HeadingBase, __assign({ className: utils_1.cs('vui-heading', hClassName, className), fontWeight: "demi", ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
 });
 exports.Heading.displayName = 'Heading';
 exports.default = exports.Heading;

package/heading/heading.types.d.ts

@@ -1,10 +1,9 @@
-import { IsTruncatedProps, MaxLinesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface HeadingProps extends HeadingStyleProps, ThemingProps<'Heading'> {
+export interface HeadingProps extends SystemProps, ThemingProps<'Heading'> {
     align?: TypographyProps['textAlign'];
     casing?: TypographyProps['textTransform'];
     decoration?: TypographyProps['textDecoration'];
+    text?: number | string;
     weight?: TypographyProps['fontWeight'];
 }
-export interface HeadingStyleProps extends IsTruncatedProps, MaxLinesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
-}

package/heading/headings.d.ts

@@ -1,6 +1,7 @@
-export declare const H1: import("../core").VuiComponent<import("../core").VuiComponent<"h2", import("./heading.types").HeadingProps>, {}>;
-export declare const H2: import("../core").VuiComponent<import("../core").VuiComponent<"h2", import("./heading.types").HeadingProps>, {}>;
-export declare const H3: import("../core").VuiComponent<import("../core").VuiComponent<"h2", import("./heading.types").HeadingProps>, {}>;
-export declare const H4: import("../core").VuiComponent<import("../core").VuiComponent<"h2", import("./heading.types").HeadingProps>, {}>;
-export declare const H5: import("../core").VuiComponent<import("../core").VuiComponent<"h2", import("./heading.types").HeadingProps>, {}>;
-export declare const H6: import("../core").VuiComponent<import("../core").VuiComponent<"h2", import("./heading.types").HeadingProps>, {}>;
+import { HeadingProps } from './heading.types';
+export declare const H1: import("../core").VuiComponent<"h1", HeadingProps>;
+export declare const H2: import("../core").VuiComponent<"h2", HeadingProps>;
+export declare const H3: import("../core").VuiComponent<"h3", HeadingProps>;
+export declare const H4: import("../core").VuiComponent<"h4", HeadingProps>;
+export declare const H5: import("../core").VuiComponent<"h5", HeadingProps>;
+export declare const H6: import("../core").VuiComponent<"h6", HeadingProps>;

package/{icon/icons/cui/cuiRadioSelected.d.ts → icons/baseIcons/fal/falSignIn.d.ts}

@@ -1,3 +1,3 @@
-import { IconDefinition } from '../../icon.types';
+import { IconDefinition } from '../../types';
 declare const _default: IconDefinition;
 export default _default;

package/icons/baseIcons/fal/falSignIn.js

@@ -0,0 +1,7 @@
+"use strict";
+/* eslint-disable */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    details: [512, 512, [], '', 'M184 83.5l164.5 164c4.7 4.7 4.7 12.3 0 17L184 428.5c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17l132-131.4H12c-6.6 0-12-5.4-12-12v-10c0-6.6 5.4-12 12-12h279.9L160 107.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.6-4.7 12.2-4.7 16.9 0zM512 400V112c0-26.5-21.5-48-48-48H332c-6.6 0-12 5.4-12 12v8c0 6.6 5.4 12 12 12h132c8.8 0 16 7.2 16 16v288c0 8.8-7.2 16-16 16H332c-6.6 0-12 5.4-12 12v8c0 6.6 5.4 12 12 12h132c26.5 0 48-21.5 48-48z'],
+    name: 'falSignIn'
+};