@veracity/vui 0.3.0 → 0.3.2

package/core/styled.js

@@ -1,5 +1,4 @@
 "use strict";
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -50,19 +49,21 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.styled = exports.v = exports.css = exports.createGlobalStyle = void 0;
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 var core_1 = require("@xstyled/core");
 var styled_components_1 = require("@xstyled/styled-components");
 var util_1 = require("@xstyled/util");
 var styled_components_2 = __importStar(require("styled-components"));
-var utils_1 = require("./utils");
 var system_1 = require("../system");
+/** Creates enhanced 'styled' function with optional style generators and prop-forwarding safeguard. */
 function createBaseStyled(css, generator) {
-    var config = generator ? (0, utils_1.forwardPropConfig)(generator) : {};
+    var config = generator ? forwardPropConfig(generator) : {};
     return (function (component) {
         var baseStyled = config ? (0, styled_components_2.default)(component).withConfig(config) : (0, styled_components_2.default)(component);
         return getCreateStyle(baseStyled, css, generator);
     });
 }
+/** Enhances createGlobalStyle function with custom 'css' helper. */
 function createCreateGlobalStyle() {
     var css = createCssFunction();
     return (function () {
@@ -76,6 +77,7 @@ function createCreateGlobalStyle() {
         ]);
     });
 }
+/** Enhances styled-components' 'css' function with automatic theming. */
 function createCssFunction() {
     return (function () {
         var args = [];
@@ -87,6 +89,10 @@ function createCssFunction() {
         return flattenedArgs.map(core_1.transform);
     });
 }
+/**
+ * Creates full 'styled' function with properties for components.
+ * Includes base version and system version using 'Box' postfix.
+ */
 function createStyled(generator) {
     var css = createCssFunction();
     var styled = createBaseStyled(css);
@@ -99,6 +105,17 @@ function createStyled(generator) {
     });
     return styled;
 }
+/** Provides configuration to the 'styled' function, which filters out xstyled system props. */
+function forwardPropConfig(generator) {
+    return {
+        shouldForwardProp: function (prop, defaultValidatorFn) {
+            if (typeof prop === 'string' && generator.meta.props.includes(prop))
+                return false;
+            return defaultValidatorFn(prop);
+        }
+    };
+}
+/** Extends styled component with a given styles generator (system). */
 function getCreateStyle(baseCreateStyle, css, generator) {
     var createStyle = function () {
         var args = [];
@@ -119,4 +136,5 @@ exports.createGlobalStyle = createCreateGlobalStyle();
 exports.css = createCssFunction();
 exports.v = (0, styled_components_1.createX)(system_1.system);
 exports.styled = createStyled(system_1.system);
+exports.default = exports.styled;
 var templateObject_1;

package/core/theme.d.ts

@@ -0,0 +1,41 @@
+import { IProps, ThemeGetter } from '@xstyled/styled-components';
+import { ThemingProps, VuiTheme, VuiThemeExtensions } from '../theme';
+import { AnyNumber, AnyString, Dict } from '../utils';
+declare type VuiThemeGetter<ThemeKey extends keyof VuiTheme> = ThemeGetter<keyof VuiTheme[ThemeKey] | AnyString | AnyNumber>;
+/** Type of the 'th' theme getter function. */
+export declare type ThemeGet = {
+    (path: string, defaultValue?: any): (props: IProps) => any;
+    animation: VuiThemeGetter<'animations'>;
+    borders: VuiThemeGetter<'borders'>;
+    color: VuiThemeGetter<'colors'>;
+    duration: VuiThemeGetter<'durations'>;
+    font: VuiThemeGetter<'fonts'>;
+    fontSize: VuiThemeGetter<'fontSizes'>;
+    fontWeight: VuiThemeGetter<'fontWeights'>;
+    radius: VuiThemeGetter<'radii'>;
+    ringWidth: VuiThemeGetter<'ringWidths'>;
+    screen: VuiThemeGetter<'screens'>;
+    shadow: VuiThemeGetter<'shadows'>;
+    size: VuiThemeGetter<'sizes'>;
+    space: VuiThemeGetter<'spaces'>;
+    transform: VuiThemeGetter<'transforms'>;
+    transition: VuiThemeGetter<'transitions'>;
+    zIndex: VuiThemeGetter<'zIndices'>;
+};
+/** Merges provided theme extensions and overrides with default VUI theme. */
+export declare function extendTheme(extensions: VuiThemeExtensions): VuiTheme;
+/** Removes specific theming keys from the given props. */
+export declare function omitThemingProps<T extends ThemingProps>(props: T): Omit<T, "size" | "variant">;
+/** Re-export of xstyled 'th' with custom typing and screen getter. */
+declare const th: ThemeGet;
+export { th };
+/**
+ * Combines baseStyle, size and variant styling from a component's theme configuration.
+ * @param component - name of any component configured in the theme
+ * @param props - props object of the given component
+ */
+export declare function useStyleConfig(component: keyof VuiTheme['components'], props?: any): Dict<any>;
+/** Returns theme value at the given path. */
+export declare function useTh(path: keyof VuiTheme | AnyString, defaultValue?: any): any;
+/** Returns the theme object with extensions. */
+export declare function useTheme(): VuiTheme;

package/core/theme.js

@@ -0,0 +1,94 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTheme = exports.useTh = exports.useStyleConfig = exports.th = exports.omitThemingProps = exports.extendTheme = void 0;
+var styled_components_1 = require("@xstyled/styled-components");
+var react_1 = require("react");
+var styled_components_2 = require("styled-components");
+var theme_1 = __importDefault(require("../theme"));
+var utils_1 = require("../utils");
+/** Merges provided theme extensions and overrides with default VUI theme. */
+function extendTheme(extensions) {
+    return (0, utils_1.merge)(theme_1.default, extensions);
+}
+exports.extendTheme = extendTheme;
+/** Removes specific theming keys from the given props. */
+function omitThemingProps(props) {
+    var size = props.size, variant = props.variant, rest = __rest(props, ["size", "variant"]); // eslint-disable-line @typescript-eslint/no-unused-vars
+    return rest;
+}
+exports.omitThemingProps = omitThemingProps;
+/** Re-export of xstyled 'th' with custom typing and screen getter. */
+var th = styled_components_1.th;
+exports.th = th;
+th.screen = (0, styled_components_1.themeGetter)({
+    name: 'screen',
+    key: 'screens',
+    compose: styled_components_1.getPx
+});
+/**
+ * Combines baseStyle, size and variant styling from a component's theme configuration.
+ * @param component - name of any component configured in the theme
+ * @param props - props object of the given component
+ */
+function useStyleConfig(component, props) {
+    var _a;
+    if (props === void 0) { props = {}; }
+    var theme = useTheme();
+    var _b = (_a = theme === null || theme === void 0 ? void 0 : theme.components[component]) !== null && _a !== void 0 ? _a : {}, baseStyle = _b.baseStyle, defaultProps = _b.defaultProps, _c = _b.parts, parts = _c === void 0 ? [] : _c, sizes = _b.sizes, variants = _b.variants;
+    var mergedProps = __assign(__assign({}, defaultProps), props);
+    var colorScheme = mergedProps.colorScheme, size = mergedProps.size, variant = mergedProps.variant;
+    return (0, react_1.useMemo)(function () {
+        var _a, _b, _c;
+        var baseStyles = (_a = (0, utils_1.runIfFn)(baseStyle, mergedProps)) !== null && _a !== void 0 ? _a : {};
+        var sizeStyles = (_b = (0, utils_1.runIfFn)(sizes === null || sizes === void 0 ? void 0 : sizes[size], mergedProps)) !== null && _b !== void 0 ? _b : {};
+        var variantStyles = (_c = (0, utils_1.runIfFn)(variants === null || variants === void 0 ? void 0 : variants[variant], mergedProps)) !== null && _c !== void 0 ? _c : {};
+        var styles = {};
+        if (parts.length > 0) {
+            parts.forEach(function (part) {
+                var _a, _b, _c;
+                styles[part] = (0, utils_1.merge)((_a = baseStyles[part]) !== null && _a !== void 0 ? _a : {}, (_b = sizeStyles[part]) !== null && _b !== void 0 ? _b : {}, (_c = variantStyles[part]) !== null && _c !== void 0 ? _c : {});
+            });
+        }
+        else {
+            styles = (0, utils_1.merge)(baseStyles, sizeStyles, variantStyles);
+        }
+        return styles;
+    }, [colorScheme, size, variant]);
+}
+exports.useStyleConfig = useStyleConfig;
+/** Returns theme value at the given path. */
+function useTh(path, defaultValue) {
+    var theme = useTheme();
+    return th(path, defaultValue)({ theme: theme });
+}
+exports.useTh = useTh;
+/** Returns the theme object with extensions. */
+function useTheme() {
+    return (0, styled_components_2.useTheme)();
+}
+exports.useTheme = useTheme;

package/core/vui.d.ts

@@ -0,0 +1,31 @@
+import React, { ElementType, PropsWithChildren, PropsWithoutRef, ReactElement } from 'react';
+import { PropsOf, RefPropsOf } from '../utils';
+/**
+ * Component creation utility, which combines forwardRef, memo and ensures correct typing with all props included.
+ * Config object allows toggling memoization and providing custom 'areEqual' function.
+ */
+export declare function vui<C extends React.ElementType, Props = {}>(component: React.ForwardRefRenderFunction<any, PropsOf<C, Props>>, config?: VuiComponentConfig<C, Props>): VuiComponent<C, Props>;
+/** VUI component type, which allows element props inference and extension, 'as' and 'ref'. */
+export declare type VuiComponent<C extends ElementType, Props = {}> = {
+    <AsC extends ElementType>(props: PropsWithChildren<RefPropsOf<AsC, Props>> & {
+        as: AsC;
+    }): ReactElement<any, any> | null;
+    (props: RefPropsOf<C, Props>): ReactElement<any, any> | null;
+    defaultProps?: Partial<PropsOf<C, Props>>;
+    displayName?: string;
+};
+/** Config for VUI component creator helper, which allows toggling memoization and 'areEqual' function. */
+export declare type VuiComponentConfig<C extends ElementType, Props = {}> = {
+    isMemo?: boolean;
+    memoCompare?: (prevProps: Readonly<PropsWithChildren<PropsWithoutRef<PropsOf<C, Props>>>>, nextProps: Readonly<PropsWithChildren<PropsWithoutRef<PropsOf<C, Props>>>>) => boolean;
+};
+/**
+ * @deprecated Use FC or plain functions instead. If you need typing for HTML attributes of a given element,
+ * use PropsOf type, like: type MyBoxProps = PropsOf<'div', MyProps>
+ */
+export declare type VC<C extends ElementType, Props = {}> = {
+    (props: PropsOf<C, Props>): ReactElement<any, any> | null;
+    defaultProps?: Partial<PropsOf<C, Props>>;
+    displayName?: string;
+};
+export default vui;

package/core/vui.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.vui = void 0;
+var react_1 = __importDefault(require("react"));
+/**
+ * Component creation utility, which combines forwardRef, memo and ensures correct typing with all props included.
+ * Config object allows toggling memoization and providing custom 'areEqual' function.
+ */
+function vui(component, config) {
+    var _a = config !== null && config !== void 0 ? config : {}, memoCompare = _a.memoCompare, _b = _a.isMemo, isMemo = _b === void 0 ? true : _b;
+    if (isMemo) {
+        return react_1.default.memo(react_1.default.forwardRef(component), memoCompare);
+    }
+    return react_1.default.forwardRef(component);
+}
+exports.vui = vui;
+exports.default = vui;

package/core/vuiProvider/fontFaces.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var __1 = require("../");
+exports.default = "\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + __1.cdnUrl + "/common/fonts/avenir-regular-lat-ext.woff');\n\t\tfont-weight: 400;\n\t}\n\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + __1.cdnUrl + "/common/fonts/avenir-medium-lat-ext.woff');\n\t\tfont-weight: 500;\n\t}\n\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + __1.cdnUrl + "/common/fonts/avenir-demi-lat-ext.woff');\n\t\tfont-weight: 600;\n\t}\n\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + __1.cdnUrl + "/common/fonts/avenir-bold-lat-ext.woff');\n\t\tfont-weight: 700;\n\t}\n";

package/core/{globalStyle.d.ts → vuiProvider/globalStyle.d.ts}

@@ -2,4 +2,11 @@ declare type GlobalStyleProps = {
     globalStyle?: boolean;
 };
 declare const _default: import("styled-components").GlobalStyleComponent<GlobalStyleProps, import("styled-components").DefaultTheme>;
+/**
+ * Provides global styles, such as:
+ * - font face definitions
+ * - font base styles (color, size, family)
+ * - animation keyframes
+ * - CSS variables for each theme value
+ */
 export default _default;

package/core/{globalStyle.js → vuiProvider/globalStyle.js}

@@ -34,16 +34,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var foundations_1 = __importDefault(require("../theme/foundations"));
-var styles_1 = require("../styles");
-var utils_1 = require("../utils");
-var styled_1 = require("./styled");
-exports.default = (0, styled_1.createGlobalStyle)(templateObject_2 || (templateObject_2 = __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\t", "\n\n\t@keyframes vui-bounce {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeDown {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeIn {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeLeft {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeOut {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeRight {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeUp {\n\t\t", "\n\t}\n\n\t@keyframes vui-pulse {\n\t\t", "\n\t}\n\n\t@keyframes vui-spin {\n\t\t", "\n\t}\n"], ["\n\t", "\n\n\t:root {\n\t\t", "\n\n\t\t--vui-colors-disabled-bg: var(--vui-colors-grey-10);\n\t\t--vui-colors-disabled-border: var(--vui-colors-grey-50);\n\t\t--vui-colors-disabled-font: var(--vui-colors-grey-50);\n\t}\n\n\t* {\n\t\t--x-ring-color: var(--vui-colors-blue-50);\n\t\t--x-shadow: 0 0 0 0 transparent;\n\t}\n\n\t", "\n\n\t@keyframes vui-bounce {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeDown {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeIn {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeLeft {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeOut {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeRight {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeUp {\n\t\t", "\n\t}\n\n\t@keyframes vui-pulse {\n\t\t", "\n\t}\n\n\t@keyframes vui-spin {\n\t\t", "\n\t}\n"
-    /** Recursively maps through all theme styles and generates a set of CSS properties */
-])), styles_1.fontFaces, generateCSSVariables, function (p) {
+var foundations_1 = __importDefault(require("../../theme/foundations"));
+var utils_1 = require("../../utils");
+var styled_1 = require("../styled");
+var animations_1 = require("./animations");
+var fontFaces_1 = __importDefault(require("./fontFaces"));
+/**
+ * Provides global styles, such as:
+ * - font face definitions
+ * - font base styles (color, size, family)
+ * - animation keyframes
+ * - CSS variables for each theme value
+ */
+exports.default = (0, styled_1.createGlobalStyle)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t", "\n\n\t:root {\n\t\t", "\n\t}\n\n\t* {\n\t\t--x-ring-color: var(--vui-colors-blue-50);\n\t\t// Fixes a box-shadow issue between some parent and child components\n\t\t--x-shadow: 0 0 0 0 transparent;\n\t}\n\n\t", "\n\n\t@keyframes vui-bounce {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeDown {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeIn {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeLeft {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeOut {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeRight {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeUp {\n\t\t", "\n\t}\n\n\t@keyframes vui-pulse {\n\t\t", "\n\t}\n\n\t@keyframes vui-spin {\n\t\t", "\n\t}\n"], ["\n\t", "\n\n\t:root {\n\t\t", "\n\t}\n\n\t* {\n\t\t--x-ring-color: var(--vui-colors-blue-50);\n\t\t// Fixes a box-shadow issue between some parent and child components\n\t\t--x-shadow: 0 0 0 0 transparent;\n\t}\n\n\t", "\n\n\t@keyframes vui-bounce {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeDown {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeIn {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeLeft {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeOut {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeRight {\n\t\t", "\n\t}\n\n\t@keyframes vui-fadeUp {\n\t\t", "\n\t}\n\n\t@keyframes vui-pulse {\n\t\t", "\n\t}\n\n\t@keyframes vui-spin {\n\t\t", "\n\t}\n"
+    /** Recursively maps through all theme styles and generates a set of CSS properties. */
+])), fontFaces_1.default, generateCSSVariables, function (p) {
     return p.globalStyle && (0, styled_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\t\tbody {\n\t\t\t\tcolor: prussian.80;\n\t\t\t\tfont-family: avenir;\n\t\t\t\tfont-size: md;\n\t\t\t}\n\t\t"], ["\n\t\t\tbody {\n\t\t\t\tcolor: prussian.80;\n\t\t\t\tfont-family: avenir;\n\t\t\t\tfont-size: md;\n\t\t\t}\n\t\t"])));
-}, styles_1.bounce, styles_1.fadeDown, styles_1.fadeIn, styles_1.fadeLeft, styles_1.fadeOut, styles_1.fadeRight, styles_1.fadeUp, styles_1.pulse, styles_1.spin);
-/** Recursively maps through all theme styles and generates a set of CSS properties */
+}, animations_1.bounce, animations_1.fadeDown, animations_1.fadeIn, animations_1.fadeLeft, animations_1.fadeOut, animations_1.fadeRight, animations_1.fadeUp, animations_1.pulse, animations_1.spin);
+/** Recursively maps through all theme styles and generates a set of CSS properties. */
 function generateCSSVariables() {
     function computeStyle(name, value) {
         if (!(0, utils_1.isObject)(value))

package/core/vuiProvider/index.d.ts

@@ -0,0 +1,5 @@
+export * from './animations';
+export { default as fontFaces } from './fontFaces';
+export { default as GlobalStyle } from './globalStyle';
+export { default as ResetCSS } from './resetCSS';
+export { default, default as VuiProvider } from './vuiProvider';

package/{styles → core/vuiProvider}/index.js

@@ -13,8 +13,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fontFaces = void 0;
+exports.VuiProvider = exports.default = exports.ResetCSS = exports.GlobalStyle = exports.fontFaces = void 0;
 __exportStar(require("./animations"), exports);
-__exportStar(require("./helpers"), exports);
 var fontFaces_1 = require("./fontFaces");
 Object.defineProperty(exports, "fontFaces", { enumerable: true, get: function () { return __importDefault(fontFaces_1).default; } });
+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, "default", { enumerable: true, get: function () { return __importDefault(vuiProvider_1).default; } });
+Object.defineProperty(exports, "VuiProvider", { enumerable: true, get: function () { return __importDefault(vuiProvider_1).default; } });

package/core/vuiProvider/resetCSS.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+/** Set of CSS resets to unify styles across browsers and provide good style defaults. */
+export default _default;

package/core/{resetCSS.js → vuiProvider/resetCSS.js}

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

package/core/vuiProvider/vuiProvider.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { VuiTheme } from '../../theme';
+declare type VuiProviderProps = {
+    /** Adds basic styles to body @default true */
+    globalStyle?: boolean;
+    /** Applies custom CSS reset @default true */
+    resetCSS?: boolean;
+    /** Modified theme config using 'extendTheme' utility */
+    theme?: VuiTheme;
+};
+/** Provides theme to all wrapped components and by default includes CSS reset and global styles. */
+declare const VuiProvider: FC<VuiProviderProps>;
+export default VuiProvider;

package/core/{vuiProvider.js → vuiProvider/vuiProvider.js}

@@ -5,14 +5,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = require("styled-components");
+var popoverStyle_1 = __importDefault(require("../../popover/popoverStyle"));
+var theme_1 = __importDefault(require("../../theme"));
 var globalStyle_1 = __importDefault(require("./globalStyle"));
 var resetCSS_1 = __importDefault(require("./resetCSS"));
-var theme_1 = __importDefault(require("../theme"));
+/** Provides theme to all wrapped components and by default includes CSS reset and global styles. */
 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(resetCSS_1.default, null),
         react_1.default.createElement(globalStyle_1.default, { globalStyle: globalStyle }),
+        react_1.default.createElement(popoverStyle_1.default, null),
         children));
 };
 exports.default = VuiProvider;

package/divider/divider.d.ts

@@ -1,5 +1,5 @@
 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 DividerBase: import("styled-components").StyledComponent<"hr", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Visually separates content with a horizontal or vertical line. */
 export declare const Divider: import("../core").VuiComponent<"hr", DividerProps>;
 export default Divider;

package/divider/divider.js

@@ -31,11 +31,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Divider = exports.DividerBase = void 0;
 var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
-var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.DividerBase = styled_components_1.default.hr.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
+exports.DividerBase = core_1.styled.hrBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tborder-color: grey.30;\n"], ["\n\tborder-color: grey.30;\n"
+    /** Visually separates content with a horizontal or vertical line. */
+])));
+/** Visually separates content with a horizontal or vertical line. */
 exports.Divider = (0, core_1.vui)(function (props, ref) {
     var _a;
     var _b = (0, core_1.omitThemingProps)(props), className = _b.className, isVertical = _b.isVertical, width = _b.width, rest = __rest(_b, ["className", "isVertical", "width"]);
@@ -46,7 +47,7 @@ exports.Divider = (0, core_1.vui)(function (props, ref) {
     var aliasedProps = (0, 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: (0, utils_1.cs)('vui-divider', className), h: height, ref: ref }, styles, aliasedProps, rest)));
+    return (react_1.default.createElement(exports.DividerBase, __assign({ className: (0, 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,10 @@
 import { BordersProps, SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface DividerProps extends SystemProps, ThemingProps<'Divider'> {
+export declare type DividerProps = SystemProps & ThemingProps<'Divider'> & {
+    /** Children are disabled for this component. */
     children?: never;
+    /** Renders the line vertically using 100% height. */
     isVertical?: boolean;
+    /** Defines thickness of the line. */
     width?: BordersProps['borderWidth'];
-}
+};

package/divider/index.d.ts

@@ -1,3 +1,3 @@
 export * from './divider';
-export * from './divider.types';
 export { default } from './divider';
+export * from './divider.types';

package/divider/index.js

@@ -15,6 +15,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 __exportStar(require("./divider"), exports);
-__exportStar(require("./divider.types"), exports);
 var divider_1 = require("./divider");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(divider_1).default; } });
+__exportStar(require("./divider.types"), exports);

package/divider/theme.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+    baseStyle: {};
     defaultProps: {};
     sizes: {};
     variants: {};

package/divider/theme.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var baseStyle = {};
 var defaultProps = {};
 var sizes = {};
 var variants = {};
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     sizes: sizes,
     variants: variants

package/footer/consts.d.ts

@@ -4,6 +4,7 @@ import { FooterColumnsData } from './footer.types';
  * Links' url values here are unique references to actual urls in the footerLinks dictionary.
  */
 export declare const footerColumnsTemplate: FooterColumnsData;
+/** Footer link URLs used in Production environment. */
 export declare const footerLinksProd: {
     readonly aboutVeracity: "https://www.veracity.com/about";
     readonly apiExplorer: "https://developer.veracity.com/api";
@@ -25,6 +26,7 @@ export declare const footerLinksProd: {
     readonly veracityPartnerProgram: "https://www.veracity.com/partner";
     readonly veracityTrustCenter: "https://www.veracity.com/veracity-trust-center";
 };
+/** Footer link URLs used in Staging environment. */
 export declare const footerLinksStag: {
     readonly aboutVeracity: "https://wwwstag.veracity.com/about";
     readonly apiExplorer: "https://developer.veracity.com/api";
@@ -46,6 +48,7 @@ export declare const footerLinksStag: {
     readonly veracityPartnerProgram: "https://wwwstag.veracity.com/partner";
     readonly veracityTrustCenter: "https://www.veracity.com/veracity-trust-center";
 };
+/** Footer link URLs used in Test environment. */
 export declare const footerLinksTest: {
     readonly aboutVeracity: "https://wwwtest.veracity.com/about";
     readonly apiExplorer: "https://developer.veracity.com/api";

package/footer/consts.js

@@ -64,6 +64,7 @@ exports.footerColumnsTemplate = {
         }
     }
 };
+/** Footer link URLs used in Production environment. */
 exports.footerLinksProd = {
     aboutVeracity: 'https://www.veracity.com/about',
     apiExplorer: 'https://developer.veracity.com/api',
@@ -85,6 +86,7 @@ exports.footerLinksProd = {
     veracityPartnerProgram: 'https://www.veracity.com/partner',
     veracityTrustCenter: 'https://www.veracity.com/veracity-trust-center'
 };
+/** Footer link URLs used in Staging environment. */
 exports.footerLinksStag = {
     aboutVeracity: 'https://wwwstag.veracity.com/about',
     apiExplorer: 'https://developer.veracity.com/api',
@@ -106,6 +108,7 @@ exports.footerLinksStag = {
     veracityPartnerProgram: 'https://wwwstag.veracity.com/partner',
     veracityTrustCenter: 'https://www.veracity.com/veracity-trust-center'
 };
+/** Footer link URLs used in Test environment. */
 exports.footerLinksTest = {
     aboutVeracity: 'https://wwwtest.veracity.com/about',
     apiExplorer: 'https://developer.veracity.com/api',

package/footer/footer.d.ts

@@ -5,7 +5,9 @@ import FooterHeading from './footerHeading';
 import FooterLink from './footerLink';
 import FooterRow from './footerRow';
 import FooterSection from './footerSection';
-declare const Footer: VuiComponent<"div", FooterProps> & {
+export declare const FooterBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Branded Veracity Footer with trademark and links sections. Controls max-width of the content. */
+export declare const Footer: VuiComponent<"div", FooterProps> & {
     Column: typeof FooterColumn;
     Heading: typeof FooterHeading;
     Link: typeof FooterLink;

package/footer/footer.js

@@ -1,4 +1,8 @@
 "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;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -41,19 +45,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footer = exports.FooterBase = void 0;
 var react_1 = __importDefault(require("react"));
 var box_1 = require("../box");
 var core_1 = require("../core");
 var divider_1 = require("../divider");
+var utils_1 = require("../utils");
 var footerColumn_1 = __importDefault(require("./footerColumn"));
 var footerHeading_1 = __importDefault(require("./footerHeading"));
 var footerLink_1 = __importDefault(require("./footerLink"));
 var footerRow_1 = __importDefault(require("./footerRow"));
 var footerSection_1 = __importDefault(require("./footerSection"));
 var footerTrademark_1 = __importDefault(require("./footerTrademark"));
-var Footer = (0, core_1.vui)(function (props, ref) {
-    var children = props.children, columns = props.columns, rest = __rest(props, ["children", "columns"]);
-    return (react_1.default.createElement(box_1.Box, __assign({ bg: "prussian.80", color: "white", px: 3, py: 5, ref: ref }, rest),
+exports.FooterBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tbackground-color: prussian.80;\n\tcolor: white;\n\tpadding: 5 3;\n"], ["\n\tbackground-color: prussian.80;\n\tcolor: white;\n\tpadding: 5 3;\n"
+    /** Branded Veracity Footer with trademark and links sections. Controls max-width of the content. */
+])));
+/** Branded Veracity Footer with trademark and links sections. Controls max-width of the content. */
+exports.Footer = (0, core_1.vui)(function (props, ref) {
+    var children = props.children, className = props.className, columns = props.columns, rest = __rest(props, ["children", "className", "columns"]);
+    return (react_1.default.createElement(exports.FooterBase, __assign({ className: (0, utils_1.cs)('vui-footer', className), ref: ref }, rest),
         react_1.default.createElement(box_1.Box, { column: true, maxW: 1200, mx: "auto", w: "100%" }, children !== null && children !== void 0 ? children : (columns && (react_1.default.createElement(footerRow_1.default, null, Object.entries(columns).map(function (_a) {
             var _b = __read(_a, 2), columnName = _b[0], column = _b[1];
             return (react_1.default.createElement(footerColumn_1.default, { key: columnName }, Object.entries(column).map(function (_a) {
@@ -65,10 +75,11 @@ var Footer = (0, core_1.vui)(function (props, ref) {
             react_1.default.createElement(footerRow_1.default, null,
                 react_1.default.createElement(footerTrademark_1.default, null)))));
 });
-Footer.displayName = 'Footer';
-Footer.Column = footerColumn_1.default;
-Footer.Heading = footerHeading_1.default;
-Footer.Link = footerLink_1.default;
-Footer.Row = footerRow_1.default;
-Footer.Section = footerSection_1.default;
-exports.default = Footer;
+exports.Footer.displayName = 'Footer';
+exports.Footer.Column = footerColumn_1.default;
+exports.Footer.Heading = footerHeading_1.default;
+exports.Footer.Link = footerLink_1.default;
+exports.Footer.Row = footerRow_1.default;
+exports.Footer.Section = footerSection_1.default;
+exports.default = exports.Footer;
+var templateObject_1;