@veracity/vui 0.0.2 → 0.0.4

package/checkbox/theme.js

@@ -2,23 +2,47 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 function variantDefault(props) {
     var c = props.colorScheme;
-    var colors = {
+    var controlStyles = {
         color: c + ".80",
         hoverColor: c + ".90"
     };
-    return colors;
+    return {
+        control: controlStyles
+    };
 }
 var defaultProps = {
     colorScheme: 'blue',
     size: 'md',
     variant: 'default'
 };
+var parts = ['container', 'control', 'label'];
 var sizes = {
     sm: {
-        h: 24
+        control: {
+            h: 16,
+            w: 16
+        },
+        label: {
+            size: 'sm'
+        }
     },
     md: {
-        h: 30
+        control: {
+            h: 20,
+            w: 20
+        },
+        label: {
+            size: 'md'
+        }
+    },
+    lg: {
+        control: {
+            h: 24,
+            w: 24
+        },
+        label: {
+            size: 'lg'
+        }
     }
 };
 var variants = {
@@ -26,6 +50,7 @@ var variants = {
 };
 exports.default = {
     defaultProps: defaultProps,
+    parts: parts,
     sizes: sizes,
     variants: variants
 };

package/core/globalStyle.d.ts

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

package/core/globalStyle.js

@@ -4,7 +4,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var styled_components_1 = require("@xstyled/styled-components");
+var styled_components_1 = require("styled-components");
 var styles_1 = require("../styles");
-exports.default = styled_components_1.createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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-shadow: 0 0 0 0 #fff;\n\t}\n\n\tbody {\n\t\tbackground-color: blue.10;\n\t\tcolor: prussian.80;\n\t\tfont-family: avenir;\n\t\tfont-size: 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\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-shadow: 0 0 0 0 #fff;\n\t}\n\n\tbody {\n\t\tbackground-color: blue.10;\n\t\tcolor: prussian.80;\n\t\tfont-family: avenir;\n\t\tfont-size: 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.fonts, styles_1.fadeDown, styles_1.fadeIn, styles_1.fadeLeft, styles_1.fadeOut, styles_1.fadeRight, styles_1.fadeUp, styles_1.spin);
+var utils_1 = require("./utils");
+exports.default = styled_components_1.createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n\n\t:root {\n\t\t", "\n\n\t\t--vui-colors-disabled-bg: var(--vui-colors-grey-10);\n\t\t--vui-colors-disabled-border: var(--vui-colors-grey-50);\n\t\t--vui-colors-disabled-font: var(--vui-colors-grey-50);\n\t}\n\n\t* {\n\t\t--x-ring-color: var(--vui-colors-blue-50);\n\t\t--x-shadow: 0 0 0 0 transparent;\n\t}\n\n\tbody {\n\t\tcolor: var(--vui-colors-prussian-80);\n\t\tfont-family: var(--vui-fonts-avenir);\n\t\tfont-size: var(--vui-fontSizes-md);\n\t}\n\n\t@keyframes 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,25 +1,35 @@
+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, "size" | "variant">;
+export declare function omitThemingProps<T extends ThemingProps>(props: T): Omit<T, "variant" | "size">;
 /**
  * Custom validator to prevent certain props from reaching the HTML element.
  * @param props - list of props to filter out
  */
 export declare function shouldForwardProp(props: string[]): (prop: string | number, defaultValidatorFn: (prop: string | number) => boolean) => boolean;
-/** Attemps to access a theme property at the given path. */
-export declare function th(path: string | string[]): (props: StyledProps<unknown>) => Dict<any> | undefined;
+/**
+ * Gets a value from the theme for a given path.
+ * @param themeKey - any top level property of the theme, e.g. 'colors'
+ * @param path - path to a nested value of a given theme property, e.g. 'grey.50'
+ */
+export declare function th(themeKey: keyof VuiTheme | (string & {}), path?: string | number): ({ theme }: StyledProps<unknown>) => string;
 /**
  * Retrieves and merges size and variant styling from theme configuration.
  * @param component - name of any component configured in the theme

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++) {
@@ -40,13 +41,30 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyleConfig = exports.th = exports.shouldForwardProp = exports.omitThemingProps = 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");
 var theme_1 = __importDefault(require("../theme"));
 var utils_1 = require("../utils");
 /** Generic function to create new Context and context access hook. */
@@ -69,12 +87,49 @@ 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))
+            return name + ": " + (typeof value === 'string' ? value : value + "px") + ";\n";
+        return Object.entries(value).reduce(function (str, _a) {
+            var _b = __read(_a, 2), key = _b[0], value = _b[1];
+            return (str += computeStyle(name + "-" + key, value));
+        }, '');
+    }
+    var styles = {
+        animations: styles_1.animations,
+        colors: styles_1.colors,
+        durations: styles_1.durations,
+        fonts: styles_1.fonts,
+        fontSizes: styles_1.fontSizes,
+        fontWeights: styles_1.fontWeights,
+        radii: styles_1.radii,
+        screens: styles_1.screens,
+        shadows: styles_1.shadows
+    };
+    return computeStyle('--vui', styles);
+}
+exports.generateCSSVariables = generateCSSVariables;
 /** 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
@@ -93,10 +148,17 @@ function shouldForwardProp(props) {
     };
 }
 exports.shouldForwardProp = shouldForwardProp;
-/** Attemps to access a theme property at the given path. */
-function th(path) {
-    return function (props) {
-        return utils_1.get(props.theme, path);
+/**
+ * Gets a value from the theme for a given path.
+ * @param themeKey - any top level property of the theme, e.g. 'colors'
+ * @param path - path to a nested value of a given theme property, e.g. 'grey.50'
+ */
+function th(themeKey, path) {
+    return function (_a) {
+        var _b;
+        var theme = _a.theme;
+        var value = (_b = utils_1.get(theme, themeKey + "." + path)) !== null && _b !== void 0 ? _b : path;
+        return typeof value === 'string' ? value : value + 'px';
     };
 }
 exports.th = th;

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 BaseDivider: 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

@@ -29,28 +29,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Divider = exports.BaseDivider = void 0;
+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 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.BaseDivider = 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 defaultStyle = (_a = {}, _a[borderWidth] = 1, _a);
     var height = isVertical ? '100%' : '';
-    var aliasedProps = utils_1.filterUndefined((_b = {},
-        _b[borderWidth] = width,
-        _b));
-    return (react_1.default.createElement(exports.BaseDivider, __assign({ borderColor: "grey.30", className: utils_1.cs('vui-divider', className), h: height, ref: ref }, defaultStyle, 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 BaseHeading: 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

@@ -29,7 +29,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Heading = exports.BaseHeading = void 0;
+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"));
@@ -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.BaseHeading = 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);
@@ -50,7 +48,7 @@ exports.Heading = core_1.forwardRef(function (props, ref) {
         textDecoration: decoration,
         textTransform: casing
     });
-    return (react_1.default.createElement(exports.BaseHeading, __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)));
 });
 exports.Heading.displayName = 'Heading';
 exports.default = exports.Heading;

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/helpers.d.ts

@@ -5,6 +5,9 @@ import { IconProps } from './icon.types';
  */
 export declare function getCustomIcon(icon: IconProps['icon']): {
     d: string[];
+    name: string;
+    pathProps: any[];
+    svgProps: import("..").Dict<any>;
     viewBox: string;
 } | undefined;
 /** If given icon is a string, return its CDN url. */

package/icon/helpers.js

@@ -25,9 +25,13 @@ var core_1 = require("../core");
 function getCustomIcon(icon) {
     if (!icon || typeof icon === 'string')
         return;
-    var _a = __read(icon.icon, 5), width = _a[0], height = _a[1], d = _a[4];
+    var _a = icon, details = _a.details, _b = _a.name, name = _b === void 0 ? '' : _b, _c = _a.pathProps, pathProps = _c === void 0 ? [] : _c, _d = _a.svgProps, svgProps = _d === void 0 ? {} : _d;
+    var _e = __read(details, 5), width = _e[0], height = _e[1], d = _e[4];
     return {
         d: Array.isArray(d) ? d : [d],
+        name: name,
+        pathProps: Array.isArray(pathProps) ? pathProps : [pathProps],
+        svgProps: svgProps,
         viewBox: "0 0 " + width + " " + height
     };
 }

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,14 +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 customIconStyles = customIcon ? { viewBox: customIcon.viewBox } : {};
-    var scaledSize = scale ? { height: 16 * scale, width: 16 * scale } : {};
+    var customIconProps = customIcon
+        ? __assign({ 'data-name': customIcon.name, viewBox: customIcon.viewBox }, customIcon.svgProps) : {};
+    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), ref: ref, src: src, transform: transform }, styles, scaledSize, customIconStyles, rest), customIcon === null || customIcon === void 0 ? void 0 : customIcon.d.map(function (d, i) { return (react_1.default.createElement("path", { d: d, fill: "currentColor", key: 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/icon/icon.types.d.ts

@@ -1,7 +1,21 @@
-import { DefaultIcon, IconDefinition } from './icons/types';
+import { DefaultIcon } from './icons/types';
 import { SvgProps } from '../svg';
 import { ThemingProps } from '../theme';
-import { AnyString } from '../utils';
+import { AnyString, Dict } from '../utils';
+export interface IconDefinition {
+    details: IconDetails;
+    name?: string;
+    pathProps?: Dict | Dict[];
+    svgProps?: Dict;
+}
+export declare type IconDetails = [
+    number,
+    number,
+    string[],
+    string,
+    // unicode
+    string | string[]
+];
 export declare type IconProp = DefaultIcon | IconDefinition | AnyString;
 export interface IconProps extends SvgProps, ThemingProps<'Icon'> {
     icon?: IconProp;

package/icon/icons/cui/cuiCheckboxIndeterminate.d.ts

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

package/icon/icons/cui/cuiCheckboxIndeterminate.js

@@ -0,0 +1,8 @@
+"use strict";
+/* eslint-disable */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    details: [20, 20, [], '', 'M0.5 3C0.5 1.61929 1.61929 0.5 3 0.5H17C18.3807 0.5 19.5 1.61929 19.5 3V17C19.5 18.3807 18.3807 19.5 17 19.5H3C1.61929 19.5 0.5 18.3807 0.5 17V3ZM15.75 8.75H4.25C3.83573 8.75 3.5 9.08573 3.5 9.5V10.5C3.5 10.9143 3.83573 11.25 4.25 11.25H15.75C16.1643 11.25 16.5 10.9143 16.5 10.5V9.5C16.5 9.08573 16.1643 8.75 15.75 8.75Z'],
+    name: 'cuiCheckboxIndeterminate',
+    pathProps: { stroke: 'currentColor' }
+};

package/icon/icons/cui/cuiCheckboxSelected.d.ts

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

package/icon/icons/cui/cuiCheckboxSelected.js

@@ -0,0 +1,8 @@
+"use strict";
+/* eslint-disable */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    details: [20, 20, [], '', 'M17.1595 4.87355L17.1594 4.87351L16.8059 4.51995C16.4642 4.17825 15.9101 4.17825 15.5684 4.51995L7.17153 12.9169L4.43149 10.1768C4.08976 9.8351 3.53577 9.83516 3.19407 10.1768L3.19403 10.1768L2.8405 10.5304C2.49878 10.8721 2.49884 11.4261 2.84047 11.7678L2.8405 11.7678L6.55282 15.4801C6.89454 15.8218 7.44853 15.8218 7.79023 15.4802L7.79027 15.4801L17.1594 6.11096C17.5011 5.76924 17.5011 5.21525 17.1595 4.87355ZM0.5 3C0.5 1.61929 1.61929 0.5 3 0.5H17C18.3807 0.5 19.5 1.61929 19.5 3V17C19.5 18.3807 18.3807 19.5 17 19.5H3C1.61929 19.5 0.5 18.3807 0.5 17V3Z'],
+    name: 'cuiCheckboxSelected',
+    pathProps: { stroke: 'currentColor' }
+};

package/icon/icons/cui/cuiCheckboxUnselected.d.ts

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

package/icon/icons/cui/cuiCheckboxUnselected.js

@@ -0,0 +1,8 @@
+"use strict";
+/* eslint-disable */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    details: [20, 20, [], '', 'M17 1H3C1.89543 1 1 1.89543 1 3V17C1 18.1046 1.89543 19 3 19H17C18.1046 19 19 18.1046 19 17V3C19 1.89543 18.1046 1 17 1ZM3 0C1.34315 0 0 1.34315 0 3V17C0 18.6569 1.34315 20 3 20H17C18.6569 20 20 18.6569 20 17V3C20 1.34315 18.6569 0 17 0H3Z'],
+    name: 'cuiCheckboxUnselected',
+    pathProps: { fillRule: 'evenodd', clipRule: 'evenodd' }
+};

package/icon/icons/cui/cuiRadioSelected.d.ts

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