@veracity/vui 0.1.0 → 0.2.1

package/core/utils.js

@@ -68,7 +68,7 @@ function createContext(options) {
 exports.createContext = createContext;
 /** Merges provided theme extensions and overrides with default VUI theme */
 function extendTheme(extensions) {
-    return utils_1.merge(theme_1.default, extensions);
+    return (0, utils_1.merge)(theme_1.default, extensions);
 }
 exports.extendTheme = extendTheme;
 /**
@@ -121,7 +121,7 @@ exports.shouldForwardProp = shouldForwardProp;
 /** Re-export of xstyled 'th' with custom typing and screen getter */
 var th = styled_components_1.th;
 exports.th = th;
-th.screen = styled_components_1.themeGetter({
+th.screen = (0, styled_components_1.themeGetter)({
     name: 'screen',
     key: 'screens',
     compose: styled_components_1.getPx
@@ -142,7 +142,7 @@ exports.useDown = useDown;
 /** Returns viewport width and provided screen width as a number  */
 function useMedia(width) {
     var theme = useTheme();
-    var viewportWidth = styled_components_1.useViewportWidth();
+    var viewportWidth = (0, styled_components_1.useViewportWidth)();
     var valueString = th.screen(width)({ theme: theme });
     var value = Number(valueString.replace('px', ''));
     return { value: value, viewportWidth: viewportWidth };
@@ -157,22 +157,22 @@ function useStyleConfig(component, props) {
     var _a;
     if (props === void 0) { props = {}; }
     var theme = useTheme();
-    var _b = (_a = theme.components[component]) !== null && _a !== void 0 ? _a : {}, defaultProps = _b.defaultProps, _c = _b.parts, parts = _c === void 0 ? [] : _c, sizes = _b.sizes, variants = _b.variants;
+    var _b = (_a = theme === null || theme === void 0 ? void 0 : theme.components[component]) !== null && _a !== void 0 ? _a : {}, 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 react_1.useMemo(function () {
+    return (0, react_1.useMemo)(function () {
         var _a, _b;
-        var sizeStyles = (_a = utils_1.runIfFn(sizes === null || sizes === void 0 ? void 0 : sizes[size], mergedProps)) !== null && _a !== void 0 ? _a : {};
-        var variantStyles = (_b = utils_1.runIfFn(variants === null || variants === void 0 ? void 0 : variants[variant], mergedProps)) !== null && _b !== void 0 ? _b : {};
+        var sizeStyles = (_a = (0, utils_1.runIfFn)(sizes === null || sizes === void 0 ? void 0 : sizes[size], mergedProps)) !== null && _a !== void 0 ? _a : {};
+        var variantStyles = (_b = (0, utils_1.runIfFn)(variants === null || variants === void 0 ? void 0 : variants[variant], mergedProps)) !== null && _b !== void 0 ? _b : {};
         var styles = {};
         if (parts.length > 0) {
             parts.forEach(function (part) {
                 var _a, _b;
-                styles[part] = utils_1.merge((_a = sizeStyles[part]) !== null && _a !== void 0 ? _a : {}, (_b = variantStyles[part]) !== null && _b !== void 0 ? _b : {});
+                styles[part] = (0, utils_1.merge)((_a = sizeStyles[part]) !== null && _a !== void 0 ? _a : {}, (_b = variantStyles[part]) !== null && _b !== void 0 ? _b : {});
             });
         }
         else {
-            styles = utils_1.merge(sizeStyles, variantStyles);
+            styles = (0, utils_1.merge)(sizeStyles, variantStyles);
         }
         return styles;
     }, [colorScheme, size, variant]);
@@ -186,7 +186,7 @@ function useTh(path, defaultValue) {
 exports.useTh = useTh;
 /** Returns the theme object with extensions */
 function useTheme() {
-    return styled_components_2.useTheme();
+    return (0, styled_components_2.useTheme)();
 }
 exports.useTheme = useTheme;
 /** Returns true of current viewport width is larger or equal to provided width */

package/core/v.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var styled_components_1 = require("@xstyled/styled-components");
 var system_1 = require("../system");
-var v = styled_components_1.createX(system_1.system);
+var v = (0, styled_components_1.createX)(system_1.system);
 exports.default = v;

package/divider/divider.js

@@ -35,18 +35,18 @@ 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(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) {
+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.Divider = (0, 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"]);
-    var styles = core_1.useStyleConfig('Divider', props);
+    var _b = (0, core_1.omitThemingProps)(props), className = _b.className, isVertical = _b.isVertical, width = _b.width, rest = __rest(_b, ["className", "isVertical", "width"]);
+    var styles = (0, core_1.useStyleConfig)('Divider', props);
     var borderSide = isVertical ? 'Right' : 'Bottom';
     var borderWidth = "border" + borderSide + "Width";
     var height = isVertical ? '100%' : '';
-    var aliasedProps = utils_1.filterUndefined((_a = {},
+    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: utils_1.cs('vui-divider', className), h: height, ref: ref }, styles, aliasedProps, rest)));
+    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)));
 });
 exports.Divider.displayName = 'Divider';
 exports.default = exports.Divider;

package/divider/divider.types.d.ts

@@ -1,6 +1,7 @@
 import { BordersProps, SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface DividerProps extends SystemProps, ThemingProps<'Divider'> {
+    children?: never;
     isVertical?: boolean;
     width?: BordersProps['borderWidth'];
 }

package/heading/heading.js

@@ -35,18 +35,18 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-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, 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);
+exports.HeadingBase = styled_components_1.default.h2.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
+exports.Heading = (0, core_1.vui)(function (props, ref) {
+    var _a = (0, 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 = (0, core_1.useStyleConfig)('Heading', props);
     var hClassName = props.size ? "vui-" + props.size : '';
-    var aliasedProps = utils_1.filterUndefined({
+    var aliasedProps = (0, utils_1.filterUndefined)({
         fontWeight: weight,
         textAlign: align,
         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), children !== null && children !== void 0 ? children : text));
+    return (react_1.default.createElement(exports.HeadingBase, __assign({ className: (0, 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/headings.js

@@ -18,9 +18,9 @@ exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = vo
 var react_1 = __importDefault(require("react"));
 var heading_1 = __importDefault(require("./heading"));
 var core_1 = require("../core");
-exports.H1 = core_1.vui(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h1" }, props)); });
-exports.H2 = core_1.vui(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h2" }, props)); });
-exports.H3 = core_1.vui(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h3" }, props)); });
-exports.H4 = core_1.vui(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h4" }, props)); });
-exports.H5 = core_1.vui(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h5" }, props)); });
-exports.H6 = core_1.vui(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h6" }, props)); });
+exports.H1 = (0, core_1.vui)(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h1" }, props)); });
+exports.H2 = (0, core_1.vui)(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h2" }, props)); });
+exports.H3 = (0, core_1.vui)(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h3" }, props)); });
+exports.H4 = (0, core_1.vui)(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h4" }, props)); });
+exports.H5 = (0, core_1.vui)(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h5" }, props)); });
+exports.H6 = (0, core_1.vui)(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h6" }, props)); });

package/icon/icon.js

@@ -31,18 +31,18 @@ var helpers_1 = require("./helpers");
 var core_1 = require("../core");
 var svg_1 = require("../svg");
 var utils_1 = require("../utils");
-exports.Icon = core_1.vui(function (props, ref) {
+exports.Icon = (0, core_1.vui)(function (props, ref) {
     /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-    var _a = core_1.omitThemingProps(props), className = _a.className, icon = _a.icon, _b = _a.name, name = _b === void 0 ? props.icon : _b, rotate = _a.rotate, scale = _a.scale, rest = __rest(_a, ["className", "icon", "name", "rotate", "scale"]);
-    var styles = core_1.useStyleConfig('Icon', props);
-    var _c = helpers_1.getIconDetails(name), customIcon = _c.customIcon, src = _c.src;
+    var _a = (0, core_1.omitThemingProps)(props), className = _a.className, icon = _a.icon, _b = _a.name, name = _b === void 0 ? props.icon : _b, rotate = _a.rotate, scale = _a.scale, rest = __rest(_a, ["className", "icon", "name", "rotate", "scale"]);
+    var styles = (0, core_1.useStyleConfig)('Icon', props);
+    var _c = (0, helpers_1.getIconDetails)(name), customIcon = _c.customIcon, src = _c.src;
     var scaledSize = scale ? 16 * scale : undefined;
-    var aliasedProps = utils_1.filterUndefined({
+    var aliasedProps = (0, 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, customIcon === null || customIcon === void 0 ? void 0 : customIcon.svgProps, 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]))); })));
+    return (react_1.default.createElement(svg_1.Svg, __assign({ className: (0, utils_1.cs)('vui-icon', className), display: "inline-flex", flexShrink: 0, ref: ref, src: src }, styles, customIcon === null || customIcon === void 0 ? void 0 : customIcon.svgProps, 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]))); })));
 });
 exports.Icon.displayName = 'Icon';
 exports.default = exports.Icon;

package/icons/library.js

@@ -15,10 +15,14 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var consts_1 = require("./consts");
@@ -47,7 +51,7 @@ var Library = /** @class */ (function () {
             return _this.cache.has(name);
         };
         this.init = function () {
-            _this.add.apply(_this, __spreadArray([], __read(Object.values(consts_1.defaultIcons))));
+            _this.add.apply(_this, __spreadArray([], __read(Object.values(consts_1.defaultIcons)), false));
         };
         this.reset = function () {
             _this.cache.clear();

package/image/image.js

@@ -29,10 +29,10 @@ exports.Image = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
-exports.Image = core_1.vui(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), className = _a.className, rest = __rest(_a, ["className"]);
-    var styles = core_1.useStyleConfig('Image', props);
-    return react_1.default.createElement(core_1.v.img, __assign({ className: utils_1.cs('vui-image', className), ref: ref }, styles, rest));
+exports.Image = (0, core_1.vui)(function (props, ref) {
+    var _a = (0, core_1.omitThemingProps)(props), className = _a.className, rest = __rest(_a, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('Image', props);
+    return react_1.default.createElement(core_1.v.img, __assign({ className: (0, utils_1.cs)('vui-image', className), ref: ref }, styles, rest));
 });
 exports.Image.displayName = 'Image';
 exports.default = exports.Image;

package/image/image.types.d.ts

@@ -1,4 +1,5 @@
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface ImageProps extends SystemProps, ThemingProps<'Image'> {
+    children?: never;
 }

package/index.d.ts

@@ -1,4 +1,3 @@
-export * from './alert';
 export * from './avatar';
 export * from './box';
 export * from './button';
@@ -14,6 +13,7 @@ export * from './image';
 export * from './input';
 export * from './link';
 export * from './list';
+export * from './notification';
 export * from './p';
 export * from './panel';
 export * from './radio';

package/index.js

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

package/input/context.js

@@ -18,6 +18,6 @@ var __read = (this && this.__read) || function (o, n) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInput = exports.InputProvider = void 0;
 var core_1 = require("../core");
-var _a = __read(core_1.createContext({ isOptional: true }), 2), InputProvider = _a[0], useInput = _a[1];
+var _a = __read((0, core_1.createContext)({ isOptional: true }), 2), InputProvider = _a[0], useInput = _a[1];
 exports.InputProvider = InputProvider;
 exports.useInput = useInput;

package/input/input.js

@@ -76,39 +76,35 @@ var core_1 = require("../core");
 var system_1 = require("../system");
 var t_1 = __importDefault(require("../t"));
 var utils_1 = require("../utils");
-exports.InputBase = styled_components_1.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), system_1.system);
-exports.Input = core_1.vui(function (props, ref) {
+exports.InputBase = styled_components_1.default.div.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n\twidth: 100%;\n\n\t&.disabled {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), system_1.system);
+exports.Input = (0, core_1.vui)(function (props, ref) {
     var _a, _b, _c, _d;
-    var _e = __read(react_1.useState(helpers_1.getInitialCount(props)), 2), count = _e[0], setCount = _e[1];
-    var autoComplete = props.autoComplete, autoFocus = props.autoFocus, children = props.children, className = props.className, colorScheme = props.colorScheme, defaultValue = props.defaultValue, disabled = props.disabled, iconLeft = props.iconLeft, iconRight = props.iconRight, input = props.input, inputProps = props.inputProps, inputRef = props.inputRef, isInvalid = props.isInvalid, itemLeft = props.itemLeft, itemRight = props.itemRight, max = props.max, maxLength = props.maxLength, min = props.min, name = props.name, onBlur = props.onBlur, onChangeProp = props.onChange, onFocus = props.onFocus, pattern = props.pattern, placeholder = props.placeholder, readOnly = props.readOnly, required = props.required, showCount = props.showCount, size = props.size, _f = props.state, state = _f === void 0 ? '' : _f, stateMapping = props.stateMapping, step = props.step, _g = props.type, type = _g === void 0 ? 'text' : _g, value = props.value, variant = props.variant, rest = __rest(props, ["autoComplete", "autoFocus", "children", "className", "colorScheme", "defaultValue", "disabled", "iconLeft", "iconRight", "input", "inputProps", "inputRef", "isInvalid", "itemLeft", "itemRight", "max", "maxLength", "min", "name", "onBlur", "onChange", "onFocus", "pattern", "placeholder", "readOnly", "required", "showCount", "size", "state", "stateMapping", "step", "type", "value", "variant"]);
+    var _e = __read((0, react_1.useState)((0, helpers_1.getInitialCount)(props)), 2), count = _e[0], setCount = _e[1];
+    var autoComplete = props.autoComplete, autoFocus = props.autoFocus, children = props.children, className = props.className, colorScheme = props.colorScheme, defaultValue = props.defaultValue, disabled = props.disabled, iconLeft = props.iconLeft, iconRight = props.iconRight, id = props.id, input = props.input, inputProps = props.inputProps, inputRef = props.inputRef, isInvalid = props.isInvalid, itemLeft = props.itemLeft, itemRight = props.itemRight, max = props.max, maxLength = props.maxLength, min = props.min, name = props.name, onBlur = props.onBlur, onChangeProp = props.onChange, onFocus = props.onFocus, pattern = props.pattern, placeholder = props.placeholder, readOnly = props.readOnly, required = props.required, showCount = props.showCount, size = props.size, _f = props.state, state = _f === void 0 ? '' : _f, stateMapping = props.stateMapping, step = props.step, _g = props.type, type = _g === void 0 ? 'text' : _g, value = props.value, variant = props.variant, rest = __rest(props, ["autoComplete", "autoFocus", "children", "className", "colorScheme", "defaultValue", "disabled", "iconLeft", "iconRight", "id", "input", "inputProps", "inputRef", "isInvalid", "itemLeft", "itemRight", "max", "maxLength", "min", "name", "onBlur", "onChange", "onFocus", "pattern", "placeholder", "readOnly", "required", "showCount", "size", "state", "stateMapping", "step", "type", "value", "variant"]);
     var states = __assign(__assign({}, consts_1.inputStateMapping), stateMapping);
-    var computedColorScheme = utils_1.filterUndefined({
+    var computedColorScheme = (0, utils_1.filterUndefined)({
         colorScheme: (_a = colorScheme !== null && colorScheme !== void 0 ? colorScheme : (isInvalid ? 'red' : undefined)) !== null && _a !== void 0 ? _a : (_b = states[state]) === null || _b === void 0 ? void 0 : _b.colorScheme
     });
-    var styles = core_1.useStyleConfig('Input', __assign(__assign({}, computedColorScheme), props));
-    var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, disabled: disabled, size: size, variant: variant }); }, [
-        colorScheme,
-        disabled,
-        size,
-        variant
-    ]);
+    var styles = (0, core_1.useStyleConfig)('Input', __assign(__assign({}, computedColorScheme), props));
+    var context = (0, react_1.useMemo)(function () { return (0, utils_1.filterUndefined)({ colorScheme: colorScheme, disabled: disabled, size: size, variant: variant }); }, [colorScheme, disabled, size, variant]);
     function onChange(e) {
         setCount(e.target.value.length);
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
     }
-    var aliasedProps = utils_1.filterUndefined({
-        bg: readOnly ? 'grey.20' : undefined,
+    var aliasedProps = (0, utils_1.filterUndefined)({
+        bg: readOnly ? 'grey.10' : undefined,
         focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
         focusWithinRingColor: readOnly ? 'transparent' : undefined
     });
     return (react_1.default.createElement(context_1.InputProvider, { value: context },
-        react_1.default.createElement(exports.InputBase, __assign({ borderRadius: "md", className: utils_1.cs('vui-input', disabled && 'disabled', className), ref: ref, transitionDuration: "fast" }, styles.container, aliasedProps, rest),
+        react_1.default.createElement(exports.InputBase, __assign({ borderRadius: "md", className: (0, utils_1.cs)('vui-input', disabled && 'disabled', className), ref: ref, transitionDuration: "fast" }, styles.container, aliasedProps, rest),
             itemLeft,
-            utils_1.isString(iconLeft) ? react_1.default.createElement(inputIcon_1.default, { ml: 1, name: iconLeft }) : iconLeft, (_c = children !== null && children !== void 0 ? children : input) !== null && _c !== void 0 ? _c : (react_1.default.createElement(inputInput_1.default, __assign({ ref: inputRef }, {
+            (0, utils_1.isString)(iconLeft) ? react_1.default.createElement(inputIcon_1.default, { ml: 1, name: iconLeft }) : iconLeft, (_c = children !== null && children !== void 0 ? children : input) !== null && _c !== void 0 ? _c : (react_1.default.createElement(inputInput_1.default, __assign({ ref: inputRef }, {
             autoComplete: autoComplete,
             autoFocus: autoFocus,
             defaultValue: defaultValue,
             disabled: disabled,
+            id: id,
             max: max,
             maxLength: maxLength,
             min: min,
@@ -124,7 +120,7 @@ exports.Input = core_1.vui(function (props, ref) {
             type: type,
             value: value
         }, inputProps))),
-            utils_1.isString(iconRight) ? react_1.default.createElement(inputIcon_1.default, { mr: 1, name: iconRight }) : iconRight,
+            (0, utils_1.isString)(iconRight) ? react_1.default.createElement(inputIcon_1.default, { mr: 1, name: iconRight }) : iconRight,
             itemRight,
             state && react_1.default.createElement(inputIcon_1.default, __assign({ mr: 1 }, (_d = states[state]) === null || _d === void 0 ? void 0 : _d.iconProps)),
             showCount && (react_1.default.createElement(t_1.default, { color: "grey.80", position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },

package/input/inputIcon.js

@@ -19,10 +19,10 @@ var react_1 = __importDefault(require("react"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
-exports.InputIcon = core_1.vui(function (props, ref) {
-    var inputProps = context_1.useInput();
+exports.InputIcon = (0, core_1.vui)(function (props, ref) {
+    var inputProps = (0, context_1.useInput)();
     var mergedProps = __assign(__assign({}, inputProps), props);
-    var styles = core_1.useStyleConfig('Input', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Input', mergedProps);
     var color = !mergedProps.disabled ? 'blue.80' : 'grey.50';
     return react_1.default.createElement(icon_1.default, __assign({ className: "vui-inputIcon", color: color, ref: ref }, styles.icon, props));
 });

package/input/inputInput.js

@@ -24,11 +24,11 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var system_1 = require("../system");
-exports.InputInputBase = styled_components_1.default.input.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tfont-size: inherit;\n\tmin-width: 0;\n\toutline: none;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tfont-size: inherit;\n\tmin-width: 0;\n\toutline: none;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), system_1.system);
-exports.InputInput = core_1.vui(function (props, ref) {
-    var inputProps = context_1.useInput();
+exports.InputInputBase = styled_components_1.default.input.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tfont-size: inherit;\n\tmin-width: 0;\n\toutline: none;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tflex: 1;\n\tfont-size: inherit;\n\tmin-width: 0;\n\toutline: none;\n\n\t:disabled,\n\t:disabled::placeholder {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), system_1.system);
+exports.InputInput = (0, core_1.vui)(function (props, ref) {
+    var inputProps = (0, context_1.useInput)();
     var mergedProps = __assign(__assign({}, inputProps), props);
-    var styles = core_1.useStyleConfig('Input', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Input', mergedProps);
     return (react_1.default.createElement(exports.InputInputBase, __assign({ borderRadius: "md", className: "vui-inputInput", placeholderColor: "grey.60", px: 1, ref: ref }, styles.input, props)));
 });
 exports.InputInput.displayName = 'InputInput';

package/link/link.js

@@ -35,18 +35,18 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.LinkBase = styled_components_1.default.a.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\toutline: none;\n\ttext-decoration: none;\n\twidth: fit-content;\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\toutline: none;\n\ttext-decoration: none;\n\twidth: fit-content;\n\n\t", "\n"])), system_1.system);
-exports.Link = core_1.vui(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), children = _a.children, className = _a.className, decoration = _a.decoration, _b = _a.hoverDecoration, hoverDecoration = _b === void 0 ? 'underline' : _b, isExternal = _a.isExternal, isUnderlined = _a.isUnderlined, text = _a.text, weight = _a.weight, rest = __rest(_a, ["children", "className", "decoration", "hoverDecoration", "isExternal", "isUnderlined", "text", "weight"]);
-    var styles = core_1.useStyleConfig('Link', props);
-    var aliasedProps = utils_1.filterUndefined({
+exports.LinkBase = styled_components_1.default.a.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\toutline: none;\n\ttext-decoration: none;\n\twidth: fit-content;\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\toutline: none;\n\ttext-decoration: none;\n\twidth: fit-content;\n\n\t", "\n"])), system_1.system);
+exports.Link = (0, core_1.vui)(function (props, ref) {
+    var _a = (0, core_1.omitThemingProps)(props), children = _a.children, className = _a.className, decoration = _a.decoration, _b = _a.hoverDecoration, hoverDecoration = _b === void 0 ? 'underline' : _b, isExternal = _a.isExternal, isUnderlined = _a.isUnderlined, text = _a.text, weight = _a.weight, rest = __rest(_a, ["children", "className", "decoration", "hoverDecoration", "isExternal", "isUnderlined", "text", "weight"]);
+    var styles = (0, core_1.useStyleConfig)('Link', props);
+    var aliasedProps = (0, utils_1.filterUndefined)({
         fontWeight: weight,
         hoverTextDecoration: hoverDecoration,
         rel: isExternal ? 'noopener' : undefined,
         target: isExternal ? '_blank' : undefined,
         textDecoration: decoration !== null && decoration !== void 0 ? decoration : (isUnderlined ? 'underline' : undefined)
     });
-    return (react_1.default.createElement(exports.LinkBase, __assign({ borderRadius: "sm", className: utils_1.cs('vui-link', className), focusRing: 2, ref: ref, transitionDuration: "instant" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
+    return (react_1.default.createElement(exports.LinkBase, __assign({ borderRadius: "sm", className: (0, utils_1.cs)('vui-link', className), focusRing: 2, ref: ref, transitionDuration: "instant" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
 });
 exports.Link.displayName = 'Link';
 exports.default = exports.Link;

package/list/context.js

@@ -18,6 +18,6 @@ var __read = (this && this.__read) || function (o, n) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useList = exports.ListProvider = void 0;
 var core_1 = require("../core");
-var _a = __read(core_1.createContext({ isOptional: true }), 2), ListProvider = _a[0], useList = _a[1];
+var _a = __read((0, core_1.createContext)({ isOptional: true }), 2), ListProvider = _a[0], useList = _a[1];
 exports.ListProvider = ListProvider;
 exports.useList = useList;

package/list/list.js

@@ -59,19 +59,14 @@ var listText_1 = __importDefault(require("./listText"));
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.ListBase = styled_components_1.default.ul.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
-exports.List = core_1.vui(function (props, ref) {
+exports.ListBase = styled_components_1.default.ul.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
+exports.List = (0, core_1.vui)(function (props, ref) {
     var children = props.children, className = props.className, colorScheme = props.colorScheme, heading = props.heading, isInteractive = props.isInteractive, size = props.size, variant = props.variant, rest = __rest(props, ["children", "className", "colorScheme", "heading", "isInteractive", "size", "variant"]);
-    var styles = core_1.useStyleConfig('List', props);
-    var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, isInteractive: isInteractive, size: size, styles: styles, variant: variant }); }, [
-        colorScheme,
-        isInteractive,
-        size,
-        variant
-    ]);
+    var styles = (0, core_1.useStyleConfig)('List', props);
+    var context = (0, react_1.useMemo)(function () { return (0, utils_1.filterUndefined)({ colorScheme: colorScheme, isInteractive: isInteractive, size: size, styles: styles, variant: variant }); }, [colorScheme, isInteractive, size, variant]);
     return (react_1.default.createElement(context_1.ListProvider, { value: context },
-        react_1.default.createElement(exports.ListBase, __assign({ className: utils_1.cs('vui-list', className), ref: ref }, styles.container, rest),
-            utils_1.isReactText(heading) ? react_1.default.createElement(listHeading_1.default, { text: heading }) : heading,
+        react_1.default.createElement(exports.ListBase, __assign({ className: (0, utils_1.cs)('vui-list', className), ref: ref }, styles.container, rest),
+            (0, utils_1.isReactText)(heading) ? react_1.default.createElement(listHeading_1.default, { text: heading }) : heading,
             children)));
 });
 exports.List.displayName = 'List';

package/list/listHeading.js

@@ -19,11 +19,11 @@ var react_1 = __importDefault(require("react"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var t_1 = require("../t");
-exports.ListHeading = core_1.vui(function (props, ref) {
+exports.ListHeading = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var listProps = (_a = context_1.useList()) !== null && _a !== void 0 ? _a : {};
+    var listProps = (_a = (0, context_1.useList)()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, listProps), props);
-    var styles = core_1.useStyleConfig('List', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('List', mergedProps);
     return (react_1.default.createElement(t_1.T, __assign({ className: "vui-listHeading", color: "grey.80", display: "inline-block", fontSize: "sm", px: 1, py: 0.5, ref: ref, textTransform: "uppercase", weight: "medium" }, styles.heading, props)));
 });
 exports.ListHeading.displayName = 'ListHeading';

package/list/listIcon.js

@@ -19,11 +19,11 @@ var react_1 = __importDefault(require("react"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
-exports.ListIcon = core_1.vui(function (props, ref) {
+exports.ListIcon = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var listProps = (_a = context_1.useList()) !== null && _a !== void 0 ? _a : {};
+    var listProps = (_a = (0, context_1.useList)()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, listProps), props);
-    var styles = core_1.useStyleConfig('List', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('List', mergedProps);
     return react_1.default.createElement(icon_1.default, __assign({ className: "vui-listIcon", ref: ref }, styles.icon, props));
 });
 exports.ListIcon.displayName = 'ListIcon';

package/list/listItem.js

@@ -38,12 +38,12 @@ var listText_1 = __importDefault(require("./listText"));
 var core_1 = require("../core");
 var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.ListItemBase = styled_components_1.default.li.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tline-height: normal;\n\tmargin-bottom: 1px;\n\toutline: none;\n\n\t&[data-disabled='true'] {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tline-height: normal;\n\tmargin-bottom: 1px;\n\toutline: none;\n\n\t&[data-disabled='true'] {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"])), system_1.system);
-exports.ListItem = core_1.vui(function (props, ref) {
-    var listProps = context_1.useList();
+exports.ListItemBase = styled_components_1.default.li.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tline-height: normal;\n\tmargin-bottom: 1px;\n\toutline: none;\n\n\t&[data-disabled='true'] {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tline-height: normal;\n\tmargin-bottom: 1px;\n\toutline: none;\n\n\t&[data-disabled='true'] {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"])), system_1.system);
+exports.ListItem = (0, core_1.vui)(function (props, ref) {
+    var listProps = (0, context_1.useList)();
     var mergedProps = __assign(__assign({}, listProps), props);
     var children = mergedProps.children, center = mergedProps.center, centerH = mergedProps.centerH, _a = mergedProps.centerV, centerV = _a === void 0 ? true : _a, className = mergedProps.className, column = mergedProps.column, disabled = mergedProps.disabled, iconLeft = mergedProps.iconLeft, iconRight = mergedProps.iconRight, _b = mergedProps.isInteractive, isInteractive = _b === void 0 ? props.onClick !== undefined : _b, isSelected = mergedProps.isSelected, isTruncated = mergedProps.isTruncated, itemLeft = mergedProps.itemLeft, itemRight = mergedProps.itemRight, onClick = mergedProps.onClick, text = mergedProps.text, rest = __rest(mergedProps, ["children", "center", "centerH", "centerV", "className", "column", "disabled", "iconLeft", "iconRight", "isInteractive", "isSelected", "isTruncated", "itemLeft", "itemRight", "onClick", "text"]);
-    var styles = core_1.useStyleConfig('List', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('List', mergedProps);
     var _c = styles.item, activeBg = _c.activeBg, hoverBg = _c.hoverBg, itemStyles = __rest(_c, ["activeBg", "hoverBg"]);
     var alignItems = (center || (column ? centerH : centerV)) && 'center';
     var flexDirection = column && 'column';
@@ -58,17 +58,17 @@ exports.ListItem = core_1.vui(function (props, ref) {
             userSelect: 'none'
         }
         : {};
-    var aliasedProps = utils_1.filterUndefined({
+    var aliasedProps = (0, utils_1.filterUndefined)({
         alignItems: alignItems,
         bg: isSelected ? hoverBg : undefined,
         'data-disabled': disabled,
         flexDirection: flexDirection,
         justifyContent: justifyContent
     });
-    return (react_1.default.createElement(exports.ListItemBase, __assign({ className: utils_1.cs('vui-listItem', className), onClick: !disabled ? onClick : undefined, px: 1, ref: ref, transitionDuration: "fast" }, itemStyles, interactiveProps, aliasedProps, rest),
+    return (react_1.default.createElement(exports.ListItemBase, __assign({ className: (0, utils_1.cs)('vui-listItem', className), onClick: !disabled ? onClick : undefined, px: 1, ref: ref, transitionDuration: "fast" }, itemStyles, interactiveProps, aliasedProps, rest),
         itemLeft,
-        utils_1.isString(iconLeft) ? react_1.default.createElement(listIcon_1.default, { mr: 1, name: iconLeft }) : iconLeft, children !== null && children !== void 0 ? children : (utils_1.isReactText(text) ? react_1.default.createElement(listText_1.default, { isTruncated: isTruncated, text: text }) : text),
-        utils_1.isString(iconRight) ? react_1.default.createElement(listIcon_1.default, { ml: "auto", name: iconRight }) : iconRight,
+        (0, utils_1.isString)(iconLeft) ? react_1.default.createElement(listIcon_1.default, { mr: 1, name: iconLeft }) : iconLeft, children !== null && children !== void 0 ? children : ((0, utils_1.isReactText)(text) ? react_1.default.createElement(listText_1.default, { isTruncated: isTruncated, text: text }) : text),
+        (0, utils_1.isString)(iconRight) ? react_1.default.createElement(listIcon_1.default, { ml: "auto", name: iconRight }) : iconRight,
         itemRight));
 });
 exports.ListItem.displayName = 'ListItem';

package/list/listText.js

@@ -19,11 +19,11 @@ var react_1 = __importDefault(require("react"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
-exports.ListText = core_1.vui(function (props, ref) {
+exports.ListText = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var listProps = (_a = context_1.useList()) !== null && _a !== void 0 ? _a : {};
+    var listProps = (_a = (0, context_1.useList)()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, listProps), props);
-    var styles = core_1.useStyleConfig('List', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('List', mergedProps);
     return react_1.default.createElement(t_1.default, __assign({ className: "vui-listText", fontSize: "inherit", ref: ref }, styles.text, props));
 });
 exports.ListText.displayName = 'ListText';

package/notification/consts.d.ts

@@ -0,0 +1,2 @@
+import { NotificationStatusMapping } from './notification.types';
+export declare const notificationStatusMapping: NotificationStatusMapping;

package/{alert → notification}/consts.js

@@ -1,17 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.alertStatusMapping = void 0;
-exports.alertStatusMapping = {
+exports.notificationStatusMapping = void 0;
+exports.notificationStatusMapping = {
     error: {
         colorScheme: 'red',
         iconProps: {
-            icon: 'falTimesCircle'
+            name: 'falTimesCircle'
         }
     },
     info: {
         colorScheme: 'blue',
         iconProps: {
-            icon: 'falInfoCircle'
+            name: 'falInfoCircle'
         }
     },
     loading: {
@@ -19,19 +19,19 @@ exports.alertStatusMapping = {
         iconProps: {
             animation: 'vui-spin 0.6s linear infinite',
             fill: ['blue.40', 'blue.60'],
-            icon: 'fadSpinnerThird'
+            name: 'fadSpinnerThird'
         }
     },
     success: {
         colorScheme: 'green',
         iconProps: {
-            icon: 'falCheckCircle'
+            name: 'falCheckCircle'
         }
     },
     warning: {
         colorScheme: 'yellow',
         iconProps: {
-            icon: 'falExclamationCircle'
+            name: 'falExclamationCircle'
         }
     }
 };

package/notification/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { NotificationProps } from './notification.types';
+declare const NotificationProvider: import("react").Provider<Partial<NotificationProps>>, useNotification: () => Partial<NotificationProps>;
+export { NotificationProvider, useNotification };