@veracity/vui 0.1.0 → 0.2.0

package/checkbox/checkbox.js

@@ -79,7 +79,7 @@ exports.CheckboxControl = styled_components_1.default.span.withConfig(core_1.for
 exports.Checkbox = core_1.vui(function (props, ref) {
     var checkboxGroupProps = context_1.useCheckboxGroup();
     var mergedProps = __assign(__assign({}, checkboxGroupProps), props);
-    var _a = core_1.omitThemingProps(mergedProps), checked = _a.checked, children = _a.children, className = _a.className, defaultChecked = _a.defaultChecked, disabled = _a.disabled, _b = _a.icon, iconProp = _b === void 0 ? 'cuiCheckboxUnselected' : _b, _c = _a.iconChecked, iconChecked = _c === void 0 ? 'cuiCheckboxSelected' : _c, _d = _a.iconIndeterminate, iconIndeterminate = _d === void 0 ? 'cuiCheckboxIndeterminate' : _d, inputProps = _a.inputProps, inputRef = _a.inputRef, isIndeterminate = _a.isIndeterminate, label = _a.label, name = _a.name, onChange = _a.onChange, required = _a.required, value = _a.value, rest = __rest(_a, ["checked", "children", "className", "defaultChecked", "disabled", "icon", "iconChecked", "iconIndeterminate", "inputProps", "inputRef", "isIndeterminate", "label", "name", "onChange", "required", "value"]);
+    var _a = core_1.omitThemingProps(mergedProps), checked = _a.checked, children = _a.children, className = _a.className, defaultChecked = _a.defaultChecked, disabled = _a.disabled, _b = _a.icon, iconProp = _b === void 0 ? 'cuiCheckboxUnselected' : _b, _c = _a.iconChecked, iconChecked = _c === void 0 ? 'cuiCheckboxSelected' : _c, _d = _a.iconIndeterminate, iconIndeterminate = _d === void 0 ? 'cuiCheckboxIndeterminate' : _d, id = _a.id, inputProps = _a.inputProps, inputRef = _a.inputRef, isIndeterminate = _a.isIndeterminate, label = _a.label, name = _a.name, onChange = _a.onChange, required = _a.required, value = _a.value, rest = __rest(_a, ["checked", "children", "className", "defaultChecked", "disabled", "icon", "iconChecked", "iconIndeterminate", "id", "inputProps", "inputRef", "isIndeterminate", "label", "name", "onChange", "required", "value"]);
     var _e = __read(react_1.useState(defaultChecked), 2), isChecked = _e[0], setIsChecked = _e[1];
     var styles = core_1.useStyleConfig('Checkbox', mergedProps);
     var _f = styles.control, controlColor = _f.color, hoverColor = _f.hoverColor, controlStyles = __rest(_f, ["color", "hoverColor"]);
@@ -97,7 +97,7 @@ exports.Checkbox = core_1.vui(function (props, ref) {
     }
     return (react_1.default.createElement(exports.CheckboxBase, __assign({ className: utils_1.cs('vui-checkbox', disabled && 'disabled', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, rest),
         react_1.default.createElement(exports.CheckboxControl, __assign({ borderRadius: "sm", className: "vui-checkboxControl", color: color, focusWithinRing: 3, mr: controlMr, transitionDuration: "fast" }, controlStyles),
-            react_1.default.createElement(exports.CheckboxInput, __assign({ className: "vui-checkboxInput", onChange: handleOnChange, ref: inputRef, type: "checkbox" }, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, name: name, required: required, value: value }, inputProps)),
+            react_1.default.createElement(exports.CheckboxInput, __assign({ className: "vui-checkboxInput", onChange: handleOnChange, ref: inputRef, type: "checkbox" }, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, id: id, name: name, required: required, value: value }, inputProps)),
             react_1.default.createElement(icon_1.default, { className: "vui-checkboxIcon", h: "100%", name: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, __assign({ className: "vui-checkboxLabel", lineHeight: "normal" }, styles.label), label)))));
 });
 exports.Checkbox.displayName = 'Checkbox';

package/core/utils.js

@@ -157,7 +157,7 @@ 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 () {

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/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/input.js

@@ -80,7 +80,7 @@ exports.InputBase = styled_components_1.default.div.withConfig(core_1.forwardPro
 exports.Input = 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 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({
         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
@@ -109,6 +109,7 @@ exports.Input = core_1.vui(function (props, ref) {
             autoFocus: autoFocus,
             defaultValue: defaultValue,
             disabled: disabled,
+            id: id,
             max: max,
             maxLength: maxLength,
             min: min,

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 };

package/{alert → notification}/context.js

@@ -16,8 +16,8 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAlert = exports.AlertProvider = void 0;
+exports.useNotification = exports.NotificationProvider = void 0;
 var core_1 = require("../core");
-var _a = __read(core_1.createContext({ isOptional: true }), 2), AlertProvider = _a[0], useAlert = _a[1];
-exports.AlertProvider = AlertProvider;
-exports.useAlert = useAlert;
+var _a = __read(core_1.createContext({ isOptional: true }), 2), NotificationProvider = _a[0], useNotification = _a[1];
+exports.NotificationProvider = NotificationProvider;
+exports.useNotification = useNotification;

package/notification/index.d.ts

@@ -0,0 +1,8 @@
+export * from './notification';
+export * from './notification.types';
+export * from './notificationButton';
+export * from './notificationIcon';
+export * from './notificationText';
+export * from './notificationTitle';
+export * from './context';
+export { default } from './notification';

package/{alert → notification}/index.js

@@ -14,12 +14,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
-__exportStar(require("./alert"), exports);
-__exportStar(require("./alert.types"), exports);
-__exportStar(require("./alertButton"), exports);
-__exportStar(require("./alertIcon"), exports);
-__exportStar(require("./alertText"), exports);
-__exportStar(require("./alertTitle"), exports);
+__exportStar(require("./notification"), exports);
+__exportStar(require("./notification.types"), exports);
+__exportStar(require("./notificationButton"), exports);
+__exportStar(require("./notificationIcon"), exports);
+__exportStar(require("./notificationText"), exports);
+__exportStar(require("./notificationTitle"), exports);
 __exportStar(require("./context"), exports);
-var alert_1 = require("./alert");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(alert_1).default; } });
+var notification_1 = require("./notification");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(notification_1).default; } });

package/notification/notification.d.ts

@@ -0,0 +1,13 @@
+import { NotificationProps } from './notification.types';
+import NotificationButton from './notificationButton';
+import NotificationIcon from './notificationIcon';
+import NotificationText from './notificationText';
+import NotificationTitle from './notificationTitle';
+import { VuiComponent } from '../core';
+export declare const Notification: VuiComponent<"div", NotificationProps> & {
+    Button: typeof NotificationButton;
+    Icon: typeof NotificationIcon;
+    Text: typeof NotificationText;
+    Title: typeof NotificationTitle;
+};
+export default Notification;

package/{alert/alert.js → notification/notification.js}

@@ -44,23 +44,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Alert = void 0;
+exports.Notification = void 0;
 var react_1 = __importStar(require("react"));
-var alertButton_1 = __importDefault(require("./alertButton"));
-var alertIcon_1 = __importDefault(require("./alertIcon"));
-var alertText_1 = __importDefault(require("./alertText"));
-var alertTitle_1 = __importDefault(require("./alertTitle"));
 var consts_1 = require("./consts");
 var context_1 = require("./context");
+var notificationButton_1 = __importDefault(require("./notificationButton"));
+var notificationIcon_1 = __importDefault(require("./notificationIcon"));
+var notificationText_1 = __importDefault(require("./notificationText"));
+var notificationTitle_1 = __importDefault(require("./notificationTitle"));
 var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
-exports.Alert = core_1.vui(function (props, ref) {
+exports.Notification = core_1.vui(function (props, ref) {
     var _a, _b, _c;
     var action = props.action, children = props.children, className = props.className, _d = props.colorScheme, colorSchemeProp = _d === void 0 ? 'blue' : _d, icon = props.icon, onClose = props.onClose, size = props.size, _e = props.status, status = _e === void 0 ? '' : _e, statusMapping = props.statusMapping, text = props.text, title = props.title, variant = props.variant, rest = __rest(props, ["action", "children", "className", "colorScheme", "icon", "onClose", "size", "status", "statusMapping", "text", "title", "variant"]);
-    var statuses = __assign(__assign({}, consts_1.alertStatusMapping), statusMapping);
+    var statuses = __assign(__assign({}, consts_1.notificationStatusMapping), statusMapping);
     var _f = ((_a = statuses[status]) !== null && _a !== void 0 ? _a : {}).colorScheme, colorScheme = _f === void 0 ? colorSchemeProp : _f;
-    var styles = core_1.useStyleConfig('Alert', __assign({ colorScheme: colorScheme }, props));
+    var styles = core_1.useStyleConfig('Notification', __assign({ colorScheme: colorScheme }, props));
     var iconName = utils_1.isString(icon) ? icon : (_c = (_b = statuses[status]) === null || _b === void 0 ? void 0 : _b.iconProps) === null || _c === void 0 ? void 0 : _c.name;
     var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, size: size, status: status, variant: variant }); }, [
         colorScheme,
@@ -68,18 +68,18 @@ exports.Alert = core_1.vui(function (props, ref) {
         status,
         variant
     ]);
-    return (react_1.default.createElement(context_1.AlertProvider, { value: context },
-        react_1.default.createElement(box_1.default, __assign({ borderRadius: "md", className: utils_1.cs('vui-alert', className), px: 1.5, py: 1, ref: ref, w: "fit-content" }, styles.container, rest),
-            iconName ? react_1.default.createElement(alertIcon_1.default, { name: iconName }) : icon, children !== null && children !== void 0 ? children : (react_1.default.createElement(alertText_1.default, null,
-            utils_1.isReactText(title) ? react_1.default.createElement(alertTitle_1.default, { text: title }) : title,
+    return (react_1.default.createElement(context_1.NotificationProvider, { value: context },
+        react_1.default.createElement(box_1.default, __assign({ borderRadius: "md", className: utils_1.cs('vui-notification', className), px: 1.5, py: 1, ref: ref, w: "fit-content" }, styles.container, rest),
+            iconName ? react_1.default.createElement(notificationIcon_1.default, { name: iconName }) : icon, children !== null && children !== void 0 ? children : (react_1.default.createElement(notificationText_1.default, null,
+            utils_1.isReactText(title) ? react_1.default.createElement(notificationTitle_1.default, { text: title }) : title,
             " ",
             text)),
             action,
-            onClose && react_1.default.createElement(alertButton_1.default, { icon: "falTimes", onClick: onClose }))));
+            onClose && react_1.default.createElement(notificationButton_1.default, { icon: "falTimes", onClick: onClose }))));
 });
-exports.Alert.displayName = 'Alert';
-exports.Alert.Button = alertButton_1.default;
-exports.Alert.Icon = alertIcon_1.default;
-exports.Alert.Text = alertText_1.default;
-exports.Alert.Title = alertTitle_1.default;
-exports.default = exports.Alert;
+exports.Notification.displayName = 'Notification';
+exports.Notification.Button = notificationButton_1.default;
+exports.Notification.Icon = notificationIcon_1.default;
+exports.Notification.Text = notificationText_1.default;
+exports.Notification.Title = notificationTitle_1.default;
+exports.default = exports.Notification;

package/notification/notification.types.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { BoxProps } from '../box';
+import { IconProp, IconProps } from '../icon';
+import { ThemingProps } from '../theme';
+import { AnyElement } from '../utils';
+export interface NotificationProps extends Omit<BoxProps, 'size' | 'variant'>, ThemingProps<'Notification'> {
+    action?: ReactNode;
+    colorScheme?: 'blue' | 'green' | 'red' | 'yellow';
+    icon?: IconProp | AnyElement;
+    onClose?: () => void;
+    status?: NotificationStatus;
+    statusMapping?: NotificationStatusMapping;
+    text?: ReactNode;
+    title?: ReactNode;
+}
+export declare type NotificationStatus = 'error' | 'info' | 'loading' | 'success' | 'warning';
+export declare type NotificationStatusMapping = Record<string, {
+    colorScheme?: NotificationProps['colorScheme'];
+    iconProps: IconProps;
+}>;

package/notification/notificationButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from '../button';
+export declare const NotificationButton: import("../core").VuiComponent<"button", ButtonProps>;
+export default NotificationButton;

package/{alert/alertButton.js → notification/notificationButton.js}

@@ -14,17 +14,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertButton = void 0;
+exports.NotificationButton = void 0;
 var react_1 = __importDefault(require("react"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var button_1 = __importDefault(require("../button"));
-exports.AlertButton = core_1.vui(function (props, ref) {
+exports.NotificationButton = core_1.vui(function (props, ref) {
     var _a;
-    var alertProps = (_a = context_1.useAlert()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, alertProps), props);
-    var styles = core_1.useStyleConfig('Alert', mergedProps);
-    return (react_1.default.createElement(button_1.default, __assign({ className: "vui-alertButton", colorScheme: mergedProps.colorScheme, ml: 1, mr: -0.5, ref: ref, size: "sm" }, styles.button, props)));
+    var notificationProps = (_a = context_1.useNotification()) !== null && _a !== void 0 ? _a : {};
+    var mergedProps = __assign(__assign({}, notificationProps), props);
+    var styles = core_1.useStyleConfig('Notification', mergedProps);
+    return (react_1.default.createElement(button_1.default, __assign({ className: "vui-notificationButton", colorScheme: mergedProps.colorScheme, ml: 1, mr: -0.5, ref: ref, size: "sm" }, styles.button, props)));
 });
-exports.AlertButton.displayName = 'AlertButton';
-exports.default = exports.AlertButton;
+exports.NotificationButton.displayName = 'NotificationButton';
+exports.default = exports.NotificationButton;

package/notification/notificationIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from '../icon';
+export declare const NotificationIcon: import("../core").VuiComponent<"svg", IconProps>;
+export default NotificationIcon;

package/{alert/alertIcon.js → notification/notificationIcon.js}

@@ -14,20 +14,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertIcon = void 0;
+exports.NotificationIcon = void 0;
 var react_1 = __importDefault(require("react"));
 var consts_1 = require("./consts");
 var context_1 = require("./context");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
-exports.AlertIcon = core_1.vui(function (props, ref) {
+exports.NotificationIcon = core_1.vui(function (props, ref) {
     var _a, _b;
-    var alertProps = (_a = context_1.useAlert()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, alertProps), props);
-    var styles = core_1.useStyleConfig('Alert', mergedProps);
+    var notificationProps = (_a = context_1.useNotification()) !== null && _a !== void 0 ? _a : {};
+    var mergedProps = __assign(__assign({}, notificationProps), props);
+    var styles = core_1.useStyleConfig('Notification', mergedProps);
     var _c = mergedProps.status, status = _c === void 0 ? '' : _c;
-    var iconProps = ((_b = consts_1.alertStatusMapping[status]) !== null && _b !== void 0 ? _b : {}).iconProps;
-    return (react_1.default.createElement(icon_1.default, __assign({ className: "vui-alertIcon", mr: 1, my: 0.5, ref: ref, size: "md" }, styles.icon, iconProps, props)));
+    var iconProps = ((_b = consts_1.notificationStatusMapping[status]) !== null && _b !== void 0 ? _b : {}).iconProps;
+    return (react_1.default.createElement(icon_1.default, __assign({ className: "vui-notificationIcon", mr: 1, my: 0.5, ref: ref, size: "md" }, styles.icon, iconProps, props)));
 });
-exports.AlertIcon.displayName = 'AlertIcon';
-exports.default = exports.AlertIcon;
+exports.NotificationIcon.displayName = 'NotificationIcon';
+exports.default = exports.NotificationIcon;

package/notification/notificationText.d.ts

@@ -0,0 +1,3 @@
+import { TProps } from '../t';
+export declare const NotificationText: import("../core").VuiComponent<"p", TProps>;
+export default NotificationText;

package/{alert/alertText.js → notification/notificationText.js}

@@ -14,17 +14,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertText = void 0;
+exports.NotificationText = void 0;
 var react_1 = __importDefault(require("react"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
-exports.AlertText = core_1.vui(function (props, ref) {
+exports.NotificationText = core_1.vui(function (props, ref) {
     var _a;
-    var alertProps = (_a = context_1.useAlert()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, alertProps), props);
-    var styles = core_1.useStyleConfig('Alert', mergedProps);
-    return (react_1.default.createElement(t_1.default, __assign({ className: "vui-alertText", flex: "1", lineHeight: "24px", minW: 0, py: 0.5, ref: ref }, styles.text, props)));
+    var notificationProps = (_a = context_1.useNotification()) !== null && _a !== void 0 ? _a : {};
+    var mergedProps = __assign(__assign({}, notificationProps), props);
+    var styles = core_1.useStyleConfig('Notification', mergedProps);
+    return (react_1.default.createElement(t_1.default, __assign({ className: "vui-notificationText", flex: "1", lineHeight: "24px", minW: 0, py: 0.5, ref: ref }, styles.text, props)));
 });
-exports.AlertText.displayName = 'AlertText';
-exports.default = exports.AlertText;
+exports.NotificationText.displayName = 'NotificationText';
+exports.default = exports.NotificationText;

package/notification/notificationTitle.d.ts

@@ -0,0 +1,3 @@
+import { HeadingProps } from '../heading';
+export declare const NotificationTitle: import("../core").VuiComponent<"h6", HeadingProps>;
+export default NotificationTitle;

package/{alert/alertTitle.js → notification/notificationTitle.js}

@@ -14,17 +14,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertTitle = void 0;
+exports.NotificationTitle = void 0;
 var react_1 = __importDefault(require("react"));
 var context_1 = require("./context");
 var core_1 = require("../core");
 var heading_1 = require("../heading");
-exports.AlertTitle = core_1.vui(function (props, ref) {
+exports.NotificationTitle = core_1.vui(function (props, ref) {
     var _a;
-    var alertProps = (_a = context_1.useAlert()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, alertProps), props);
-    var styles = core_1.useStyleConfig('Alert', mergedProps);
-    return react_1.default.createElement(heading_1.H6, __assign({ className: "vui-alertTitle", display: "inline-flex", ref: ref }, styles.title, props));
+    var notificationProps = (_a = context_1.useNotification()) !== null && _a !== void 0 ? _a : {};
+    var mergedProps = __assign(__assign({}, notificationProps), props);
+    var styles = core_1.useStyleConfig('Notification', mergedProps);
+    return react_1.default.createElement(heading_1.H6, __assign({ className: "vui-notificationTitle", display: "inline-flex", ref: ref }, styles.title, props));
 });
-exports.AlertTitle.displayName = 'AlertTitle';
-exports.default = exports.AlertTitle;
+exports.NotificationTitle.displayName = 'NotificationTitle';
+exports.default = exports.NotificationTitle;

package/{alert → notification}/theme.d.ts

@@ -1,20 +1,4 @@
 import { Dict } from '../utils';
-declare function variantSolid(props: Dict): {
-    container: {
-        bg: string;
-        color: string;
-    };
-    button: {
-        bg: string;
-        borderColor: string;
-        hoverBg: string;
-        hoverBorderColor: string;
-    };
-    icon: {};
-    message: {};
-    text: {};
-    title: {};
-};
 declare function variantSubtle(props: Dict): {
     container: {
         bg: string;
@@ -41,7 +25,6 @@ declare const _default: {
     parts: string[];
     sizes: {};
     variants: {
-        solid: typeof variantSolid;
         subtle: typeof variantSubtle;
     };
 };

package/{alert → notification}/theme.js

@@ -1,23 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function variantSolid(props) {
-    var c = props.colorScheme;
-    var container = {
-        bg: c + ".70",
-        color: 'white'
-    };
-    var button = {
-        bg: c + ".70",
-        borderColor: c + ".70",
-        hoverBg: c + ".80",
-        hoverBorderColor: c + ".80"
-    };
-    var icon = {};
-    var message = {};
-    var text = {};
-    var title = {};
-    return { container: container, button: button, icon: icon, message: message, text: text, title: title };
-}
 function variantSubtle(props) {
     var c = props.colorScheme;
     var container = {
@@ -36,10 +18,6 @@ function variantSubtle(props) {
     var message = {};
     var text = {};
     var title = {};
-    if (c === 'grey') {
-        container.color = 'prussian.80';
-        button.color = 'prussian.80';
-    }
     if (c === 'yellow') {
         container.color = 'yellow.100';
         button.color = 'yellow.100';
@@ -53,7 +31,6 @@ var defaultProps = {
 var parts = ['container', 'button', 'icon', 'message', 'text', 'title'];
 var sizes = {};
 var variants = {
-    solid: variantSolid,
     subtle: variantSubtle
 };
 exports.default = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Veracity UI React components library based on Styled Components and @xstyled",
   "main": "index.js",
   "author": "Veracity",
@@ -17,8 +17,7 @@
   },
   "dependencies": {
     "@xstyled/styled-components": "^2.4.1",
-    "axios": "^0.21.1",
-    "styled-components": "^5.2.1"
+    "styled-components": "^5.3.1"
   },
   "peerDependencies": {
     "react": "^17.0.1",

package/radio/radio.js

@@ -45,7 +45,7 @@ exports.Radio = core_1.vui(function (props, ref) {
     var _a;
     var _b = (_a = context_1.useRadioGroup()) !== null && _a !== void 0 ? _a : {}, groupOnChange = _b.onChange, groupValue = _b.value, radioGroupProps = __rest(_b, ["onChange", "value"]);
     var mergedProps = __assign(__assign({}, radioGroupProps), props);
-    var _c = core_1.omitThemingProps(mergedProps), _d = _c.checked, checked = _d === void 0 ? groupValue !== undefined ? props.value === groupValue : undefined : _d, children = _c.children, className = _c.className, defaultChecked = _c.defaultChecked, disabled = _c.disabled, _e = _c.icon, iconProp = _e === void 0 ? 'cuiRadioUnselected' : _e, _f = _c.iconChecked, iconChecked = _f === void 0 ? 'cuiRadioSelected' : _f, inputProps = _c.inputProps, inputRef = _c.inputRef, label = _c.label, name = _c.name, onChange = _c.onChange, required = _c.required, value = _c.value, rest = __rest(_c, ["checked", "children", "className", "defaultChecked", "disabled", "icon", "iconChecked", "inputProps", "inputRef", "label", "name", "onChange", "required", "value"]);
+    var _c = core_1.omitThemingProps(mergedProps), _d = _c.checked, checked = _d === void 0 ? groupValue !== undefined ? props.value === groupValue : undefined : _d, children = _c.children, className = _c.className, defaultChecked = _c.defaultChecked, disabled = _c.disabled, _e = _c.icon, iconProp = _e === void 0 ? 'cuiRadioUnselected' : _e, _f = _c.iconChecked, iconChecked = _f === void 0 ? 'cuiRadioSelected' : _f, id = _c.id, inputProps = _c.inputProps, inputRef = _c.inputRef, label = _c.label, name = _c.name, onChange = _c.onChange, required = _c.required, value = _c.value, rest = __rest(_c, ["checked", "children", "className", "defaultChecked", "disabled", "icon", "iconChecked", "id", "inputProps", "inputRef", "label", "name", "onChange", "required", "value"]);
     var styles = core_1.useStyleConfig('Radio', mergedProps);
     var _g = styles.control, controlColor = _g.color, hoverColor = _g.hoverColor, controlStyles = __rest(_g, ["color", "hoverColor"]);
     var icon = checked ? iconChecked : iconProp;
@@ -58,7 +58,7 @@ exports.Radio = core_1.vui(function (props, ref) {
     }
     return (react_1.default.createElement(exports.RadioBase, __assign({ className: utils_1.cs('vui-radio', disabled && 'disabled', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, rest),
         react_1.default.createElement(exports.RadioControl, __assign({ borderRadius: "50%", className: "vui-radioControl", color: color, focusWithinRing: 3, mr: controlMr, transitionDuration: "fast" }, controlStyles),
-            react_1.default.createElement(exports.RadioInput, __assign({ className: "vui-radioInput", onChange: handleOnChange, ref: inputRef, type: "radio" }, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, name: name, required: required, value: value }, inputProps)),
+            react_1.default.createElement(exports.RadioInput, __assign({ className: "vui-radioInput", onChange: handleOnChange, ref: inputRef, type: "radio" }, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, id: id, name: name, required: required, value: value }, inputProps)),
             react_1.default.createElement(icon_1.default, { className: "vui-radioIcon", h: "100%", name: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, __assign({ className: "vui-radioLabel", lineHeight: "normal" }, styles.label), label)))));
 });
 exports.Radio.displayName = 'Radio';

package/skeleton/skeleton.types.d.ts

@@ -1,6 +1,7 @@
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface SkeletonProps extends SystemProps, ThemingProps<'Skeleton'> {
+    children?: never;
     colorScheme?: 'blue' | 'grey';
     repeat?: number;
 }

package/spinner/spinner.types.d.ts

@@ -5,6 +5,7 @@ export interface SpinnerCircleStyleProps extends SystemProps {
     speed?: string;
 }
 export interface SpinnerProps extends Omit<BoxProps, 'size' | 'variant'>, Omit<ThemingProps<'Spinner'>, 'size'> {
+    children?: never;
     colorScheme?: 'blue' | 'grey' | 'prussian';
     emptyColor?: string;
     speed?: string;

package/svg/cache.js

@@ -1,9 +1,5 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var axios_1 = __importDefault(require("axios"));
 /**
  * Provides svg caching functionality to avoid redundant XHR requests.
  * When the retrieved item doesn't exist in cache yet, a request is sent
@@ -20,7 +16,7 @@ var Cache = /** @class */ (function () {
         this.get = function (src) {
             var item = _this.cache.get(src);
             if (!item) {
-                var promise = axios_1.default.get(src).then(function (res) { return res.data; });
+                var promise = fetch(src).then(function (res) { return res.text(); });
                 _this.add(src, promise);
                 return promise;
             }

package/svg/svg.js

@@ -114,6 +114,8 @@ exports.Svg = core_1.vui(function (props, ref) {
     var _a = __read(react_1.useState(helpers_1.initState()), 2), state = _a[0], setState = _a[1];
     var isMountedRef = react_1.useRef(false);
     var srcRef = react_1.useRef(src);
+    var _b = state.content, content = _b === void 0 ? '' : _b, _c = state.svgAttributes, svgAttributes = _c === void 0 ? {} : _c;
+    var innerHTML = !children ? { __html: content } : undefined;
     react_1.useEffect(function () {
         isMountedRef.current = true;
         return function () {
@@ -155,9 +157,6 @@ exports.Svg = core_1.vui(function (props, ref) {
         }
         src && loadSvg(src);
     }, [src]);
-    var _b = state.content, content = _b === void 0 ? '' : _b, _c = state.svgAttributes, svgAttributes = _c === void 0 ? {} : _c;
-    var innerHTML = !children ? { __html: content } : undefined;
-    // const pathFill = Array.isArray(fill) ? fill : [fill]
     return (react_1.default.createElement(exports.SvgBase, __assign({ className: utils_1.cs('vui-svg', className), dangerouslySetInnerHTML: innerHTML, ref: ref, xmlns: "http://www.w3.org/2000/svg" }, svgAttributes, rest), children));
 });
 exports.Svg.displayName = 'Svg';

package/switch/switch.js

@@ -77,7 +77,7 @@ var utils_1 = require("../utils");
 exports.SwitchBase = styled_components_1.default.label.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tline-height: normal;\n\twidth: fit-content;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tline-height: normal;\n\twidth: fit-content;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"])), t_1.TBase, system_1.system);
 exports.Switch = core_1.vui(function (props, ref) {
     var _a;
-    var button = props.button, checked = props.checked, children = props.children, className = props.className, colorScheme = props.colorScheme, defaultChecked = props.defaultChecked, disabled = props.disabled, innerLabelOff = props.innerLabelOff, innerLabelOn = props.innerLabelOn, inputRef = props.inputRef, labelLeft = props.labelLeft, labelRight = props.labelRight, name = props.name, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, required = props.required, size = props.size, value = props.value, variant = props.variant, rest = __rest(props, ["button", "checked", "children", "className", "colorScheme", "defaultChecked", "disabled", "innerLabelOff", "innerLabelOn", "inputRef", "labelLeft", "labelRight", "name", "onBlur", "onChange", "onFocus", "required", "size", "value", "variant"]);
+    var button = props.button, checked = props.checked, children = props.children, className = props.className, colorScheme = props.colorScheme, defaultChecked = props.defaultChecked, disabled = props.disabled, id = props.id, innerLabelOff = props.innerLabelOff, innerLabelOn = props.innerLabelOn, inputRef = props.inputRef, labelLeft = props.labelLeft, labelRight = props.labelRight, name = props.name, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, required = props.required, size = props.size, value = props.value, variant = props.variant, rest = __rest(props, ["button", "checked", "children", "className", "colorScheme", "defaultChecked", "disabled", "id", "innerLabelOff", "innerLabelOn", "inputRef", "labelLeft", "labelRight", "name", "onBlur", "onChange", "onFocus", "required", "size", "value", "variant"]);
     var _b = __read(react_1.useState(defaultChecked), 2), isChecked = _b[0], setIsChecked = _b[1];
     var styles = core_1.useStyleConfig('Switch', props);
     react_1.useEffect(function () {
@@ -122,7 +122,7 @@ exports.Switch = core_1.vui(function (props, ref) {
     });
     return (react_1.default.createElement(context_1.SwitchProvider, { value: context },
         react_1.default.createElement(exports.SwitchBase, __assign({ className: utils_1.cs('vui-switch', className), ref: ref }, styles.container, aliasedProps, rest),
-            utils_1.isReactText(labelLeft) ? react_1.default.createElement(switchLabel_1.SwitchLabel, { mr: 1, text: labelLeft }) : labelLeft, (_a = children !== null && children !== void 0 ? children : button) !== null && _a !== void 0 ? _a : react_1.default.createElement(switchButton_1.SwitchButton, __assign({}, { innerLabelOff: innerLabelOff, innerLabelOn: innerLabelOn, inputRef: inputRef })),
+            utils_1.isReactText(labelLeft) ? react_1.default.createElement(switchLabel_1.SwitchLabel, { mr: 1, text: labelLeft }) : labelLeft, (_a = children !== null && children !== void 0 ? children : button) !== null && _a !== void 0 ? _a : react_1.default.createElement(switchButton_1.SwitchButton, __assign({}, { id: id, innerLabelOff: innerLabelOff, innerLabelOn: innerLabelOn, inputRef: inputRef })),
             utils_1.isReactText(labelRight) ? react_1.default.createElement(switchLabel_1.SwitchLabel, { ml: 1, text: labelRight }) : labelRight)));
 });
 exports.Switch.displayName = 'Switch';

package/switch/switchButton.js

@@ -74,12 +74,12 @@ var utils_1 = require("../utils");
 exports.SwitchInput = styled_components_1.default.input.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcursor: inherit;\n\theight: calc(100% + 10px);\n\tleft: -5px;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: -5px;\n\twidth: calc(100% + 10px);\n\tz-index: 1;\n\n\t", "\n"], ["\n\tcursor: inherit;\n\theight: calc(100% + 10px);\n\tleft: -5px;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: -5px;\n\twidth: calc(100% + 10px);\n\tz-index: 1;\n\n\t", "\n"])), system_1.system);
 exports.SwitchThumb = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: absolute;\n\n\t", "\n"], ["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: absolute;\n\n\t", "\n"])), system_1.system);
 exports.SwitchTrack = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex: 1;\n\tposition: relative;\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: inline-flex;\n\tflex: 1;\n\tposition: relative;\n\n\t", "\n"])), system_1.system);
-exports.SwitchButtonBase = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\tcolor: white;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tborder-color: var(--vui-colors-disabled-border);\n\t\t\tbackground-color: var(--vui-colors-disabled-font);\n\t\t}\n\n\t\t", " {\n\t\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\t}\n\t}\n\n\t", "\n"], ["\n\tcolor: white;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tborder-color: var(--vui-colors-disabled-border);\n\t\t\tbackground-color: var(--vui-colors-disabled-font);\n\t\t}\n\n\t\t", " {\n\t\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\t}\n\t}\n\n\t", "\n"])), exports.SwitchThumb, exports.SwitchTrack, system_1.system);
+exports.SwitchButtonBase = styled_components_1.default.span.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\tcolor: white;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tborder-color: var(--vui-colors-disabled-border);\n\t\t\tbackground-color: var(--vui-colors-disabled-font);\n\t\t}\n\n\t\t", " {\n\t\t\t--x-ring-color: var(--vui-colors-disabled-border);\n\t\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\t}\n\t}\n\n\t", "\n"], ["\n\tcolor: white;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t&[data-disabled='true'] {\n\t\tcursor: not-allowed;\n\n\t\t", " {\n\t\t\tborder-color: var(--vui-colors-disabled-border);\n\t\t\tbackground-color: var(--vui-colors-disabled-font);\n\t\t}\n\n\t\t", " {\n\t\t\t--x-ring-color: var(--vui-colors-disabled-border);\n\t\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\t}\n\t}\n\n\t", "\n"])), exports.SwitchThumb, exports.SwitchTrack, system_1.system);
 exports.SwitchButton = core_1.vui(function (props, ref) {
     var _a;
     var _b = (_a = context_1.useSwitch()) !== null && _a !== void 0 ? _a : {}, switchIsChecked = _b.isChecked, switchProps = __rest(_b, ["isChecked"]);
     var mergedProps = __assign(__assign({}, switchProps), props);
-    var _c = core_1.omitThemingProps(mergedProps), checked = _c.checked, className = _c.className, defaultChecked = _c.defaultChecked, disabled = _c.disabled, innerLabelOff = _c.innerLabelOff, innerLabelOn = _c.innerLabelOn, inputProps = _c.inputProps, inputRef = _c.inputRef, name = _c.name, onBlur = _c.onBlur, onChange = _c.onChange, onFocus = _c.onFocus, required = _c.required, value = _c.value, rest = __rest(_c, ["checked", "className", "defaultChecked", "disabled", "innerLabelOff", "innerLabelOn", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "required", "value"]);
+    var _c = core_1.omitThemingProps(mergedProps), checked = _c.checked, className = _c.className, defaultChecked = _c.defaultChecked, disabled = _c.disabled, id = _c.id, innerLabelOff = _c.innerLabelOff, innerLabelOn = _c.innerLabelOn, inputProps = _c.inputProps, inputRef = _c.inputRef, name = _c.name, onBlur = _c.onBlur, onChange = _c.onChange, onFocus = _c.onFocus, required = _c.required, value = _c.value, rest = __rest(_c, ["checked", "className", "defaultChecked", "disabled", "id", "innerLabelOff", "innerLabelOn", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "required", "value"]);
     var _d = __read(react_1.useState(defaultChecked), 2), isChecked = _d[0], setIsChecked = _d[1];
     var _e = __read(react_1.useState(false), 2), isFocused = _e[0], setIsFocused = _e[1];
     var styles = core_1.useStyleConfig('Switch', mergedProps);
@@ -118,10 +118,10 @@ exports.SwitchButton = core_1.vui(function (props, ref) {
         bg: isChecked ? trackStyles.bg : 'grey.50',
         pl: isChecked ? 1 : labelOffset,
         pr: isChecked ? labelOffset : 1,
-        ring: isFocused ? trackStyles.ring : 0
+        ring: isFocused ? trackStyles.ring : disabled ? 1 : 0
     });
     return (react_1.default.createElement(exports.SwitchButtonBase, __assign({ className: utils_1.cs('vui-switchButton', className), ref: ref }, buttonStyles, buttonAliasedProps, rest),
-        react_1.default.createElement(exports.SwitchInput, __assign({ className: "vui-switchInput", onBlur: handleOnBlur, onChange: handleOnChange, onFocus: handleOnFocus, ref: inputRef, type: "checkbox" }, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, name: name, required: required, value: value }, inputProps)),
+        react_1.default.createElement(exports.SwitchInput, __assign({ className: "vui-switchInput", onBlur: handleOnBlur, onChange: handleOnChange, onFocus: handleOnFocus, ref: inputRef, type: "checkbox" }, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, id: id, name: name, required: required, value: value }, inputProps)),
         react_1.default.createElement(exports.SwitchTrack, __assign({ borderRadius: "round", className: "vui-switchTrack", transitionDuration: "fast" }, trackStyles, trackAliasedProps),
             !isChecked && innerLabelOff,
             react_1.default.createElement(exports.SwitchThumb, __assign({ borderRadius: "round", className: "vui-switchThumb", transitionDuration: "fast" }, thumbStyles, thumbAliasedProps)),

package/textarea/textarea.js

@@ -76,7 +76,7 @@ exports.TextareaTextarea = styled_components_1.default.textarea.withConfig(core_
 exports.TextareaBase = styled_components_1.default.div.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 80px;\n\tposition: relative;\n\twidth: 100%;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 80px;\n\tposition: relative;\n\twidth: 100%;\n\n\t", "\n"])), system_1.system);
 exports.Textarea = core_1.vui(function (props, ref) {
     var _a = __read(react_1.useState(helpers_1.getInitialCount(props)), 2), count = _a[0], setCount = _a[1];
-    var _b = core_1.omitThemingProps(props), autoFocus = _b.autoFocus, className = _b.className, colorSchemeProp = _b.colorScheme, defaultValue = _b.defaultValue, disabled = _b.disabled, isInvalid = _b.isInvalid, maxLength = _b.maxLength, name = _b.name, onBlur = _b.onBlur, onChangeProp = _b.onChange, onFocus = _b.onFocus, placeholder = _b.placeholder, readOnly = _b.readOnly, required = _b.required, resize = _b.resize, showCount = _b.showCount, _c = _b.textareaProps, textareaProps = _c === void 0 ? {} : _c, textareaRef = _b.textareaRef, value = _b.value, rest = __rest(_b, ["autoFocus", "className", "colorScheme", "defaultValue", "disabled", "isInvalid", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "resize", "showCount", "textareaProps", "textareaRef", "value"]);
+    var _b = core_1.omitThemingProps(props), autoFocus = _b.autoFocus, className = _b.className, colorSchemeProp = _b.colorScheme, defaultValue = _b.defaultValue, disabled = _b.disabled, id = _b.id, isInvalid = _b.isInvalid, maxLength = _b.maxLength, name = _b.name, onBlur = _b.onBlur, onChangeProp = _b.onChange, onFocus = _b.onFocus, placeholder = _b.placeholder, readOnly = _b.readOnly, required = _b.required, resize = _b.resize, showCount = _b.showCount, _c = _b.textareaProps, textareaProps = _c === void 0 ? {} : _c, textareaRef = _b.textareaRef, value = _b.value, rest = __rest(_b, ["autoFocus", "className", "colorScheme", "defaultValue", "disabled", "id", "isInvalid", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "resize", "showCount", "textareaProps", "textareaRef", "value"]);
     var colorProps = utils_1.filterUndefined({
         colorScheme: colorSchemeProp !== null && colorSchemeProp !== void 0 ? colorSchemeProp : (isInvalid ? 'red' : undefined)
     });
@@ -95,6 +95,7 @@ exports.Textarea = core_1.vui(function (props, ref) {
             autoFocus: autoFocus,
             defaultValue: defaultValue,
             disabled: disabled,
+            id: id,
             maxLength: maxLength,
             name: name,
             onBlur: onBlur,

package/textarea/textarea.types.d.ts

@@ -4,6 +4,7 @@ import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface TextareaProps extends SystemProps, ThemingProps<'Textarea'> {
     autoFocus?: boolean;
+    children?: never;
     colorScheme?: 'green' | 'grey' | 'red';
     cols?: number;
     defaultValue?: number | string;

package/theme/components.d.ts

@@ -1,48 +1,4 @@
 declare const _default: {
-    Alert: {
-        defaultProps: {
-            colorScheme: string;
-            variant: string;
-        };
-        parts: string[];
-        sizes: {};
-        variants: {
-            solid: (props: import("..").Dict<any>) => {
-                container: {
-                    bg: string;
-                    color: string;
-                };
-                button: {
-                    bg: string;
-                    borderColor: string;
-                    hoverBg: string;
-                    hoverBorderColor: string;
-                };
-                icon: {};
-                message: {};
-                text: {};
-                title: {};
-            };
-            subtle: (props: import("..").Dict<any>) => {
-                container: {
-                    bg: string;
-                    borderColor: string;
-                    borderWidth: number;
-                    color: string;
-                };
-                button: {
-                    color: string;
-                    hoverBg: string;
-                    activeBg: string;
-                    variant: string;
-                };
-                icon: {};
-                message: {};
-                text: {};
-                title: {};
-            };
-        };
-    };
     Avatar: {
         defaultProps: {
             colorScheme: string;
@@ -508,6 +464,34 @@ declare const _default: {
             };
         };
     };
+    Notification: {
+        defaultProps: {
+            colorScheme: string;
+            variant: string;
+        };
+        parts: string[];
+        sizes: {};
+        variants: {
+            subtle: (props: import("..").Dict<any>) => {
+                container: {
+                    bg: string;
+                    borderColor: string;
+                    borderWidth: number;
+                    color: string;
+                };
+                button: {
+                    color: string;
+                    hoverBg: string;
+                    activeBg: string;
+                    variant: string;
+                };
+                icon: {};
+                message: {};
+                text: {};
+                title: {};
+            };
+        };
+    };
     P: {
         defaultProps: {
             size: string;

package/theme/components.js

@@ -3,19 +3,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var theme_1 = __importDefault(require("../alert/theme"));
-var theme_2 = __importDefault(require("../avatar/theme"));
-var theme_3 = __importDefault(require("../box/theme"));
-var theme_4 = __importDefault(require("../button/theme"));
-var theme_5 = __importDefault(require("../card/theme"));
-var theme_6 = __importDefault(require("../checkbox/theme"));
-var theme_7 = __importDefault(require("../divider/theme"));
-var theme_8 = __importDefault(require("../heading/theme"));
-var theme_9 = __importDefault(require("../icon/theme"));
-var theme_10 = __importDefault(require("../image/theme"));
-var theme_11 = __importDefault(require("../input/theme"));
-var theme_12 = __importDefault(require("../link/theme"));
-var theme_13 = __importDefault(require("../list/theme"));
+var theme_1 = __importDefault(require("../avatar/theme"));
+var theme_2 = __importDefault(require("../box/theme"));
+var theme_3 = __importDefault(require("../button/theme"));
+var theme_4 = __importDefault(require("../card/theme"));
+var theme_5 = __importDefault(require("../checkbox/theme"));
+var theme_6 = __importDefault(require("../divider/theme"));
+var theme_7 = __importDefault(require("../heading/theme"));
+var theme_8 = __importDefault(require("../icon/theme"));
+var theme_9 = __importDefault(require("../image/theme"));
+var theme_10 = __importDefault(require("../input/theme"));
+var theme_11 = __importDefault(require("../link/theme"));
+var theme_12 = __importDefault(require("../list/theme"));
+var theme_13 = __importDefault(require("../notification/theme"));
 var theme_14 = __importDefault(require("../p/theme"));
 var theme_15 = __importDefault(require("../panel/theme"));
 var theme_16 = __importDefault(require("../radio/theme"));
@@ -26,19 +26,19 @@ var theme_20 = __importDefault(require("../t/theme"));
 var theme_21 = __importDefault(require("../tag/theme"));
 var theme_22 = __importDefault(require("../textarea/theme"));
 exports.default = {
-    Alert: theme_1.default,
-    Avatar: theme_2.default,
-    Box: theme_3.default,
-    Button: theme_4.default,
-    Card: theme_5.default,
-    Checkbox: theme_6.default,
-    Divider: theme_7.default,
-    Heading: theme_8.default,
-    Icon: theme_9.default,
-    Image: theme_10.default,
-    Input: theme_11.default,
-    Link: theme_12.default,
-    List: theme_13.default,
+    Avatar: theme_1.default,
+    Box: theme_2.default,
+    Button: theme_3.default,
+    Card: theme_4.default,
+    Checkbox: theme_5.default,
+    Divider: theme_6.default,
+    Heading: theme_7.default,
+    Icon: theme_8.default,
+    Image: theme_9.default,
+    Input: theme_10.default,
+    Link: theme_11.default,
+    List: theme_12.default,
+    Notification: theme_13.default,
     P: theme_14.default,
     Panel: theme_15.default,
     Radio: theme_16.default,

package/theme/defaultTheme.d.ts

@@ -161,50 +161,6 @@ declare const defaultTheme: {
     transitions: {};
     zIndices: {};
     components: {
-        Alert: {
-            defaultProps: {
-                colorScheme: string;
-                variant: string;
-            };
-            parts: string[];
-            sizes: {};
-            variants: {
-                solid: (props: import("..").Dict<any>) => {
-                    container: {
-                        bg: string;
-                        color: string;
-                    };
-                    button: {
-                        bg: string;
-                        borderColor: string;
-                        hoverBg: string;
-                        hoverBorderColor: string;
-                    };
-                    icon: {};
-                    message: {};
-                    text: {};
-                    title: {};
-                };
-                subtle: (props: import("..").Dict<any>) => {
-                    container: {
-                        bg: string;
-                        borderColor: string;
-                        borderWidth: number;
-                        color: string;
-                    };
-                    button: {
-                        color: string;
-                        hoverBg: string;
-                        activeBg: string;
-                        variant: string;
-                    };
-                    icon: {};
-                    message: {};
-                    text: {};
-                    title: {};
-                };
-            };
-        };
         Avatar: {
             defaultProps: {
                 colorScheme: string;
@@ -670,6 +626,34 @@ declare const defaultTheme: {
                 };
             };
         };
+        Notification: {
+            defaultProps: {
+                colorScheme: string;
+                variant: string;
+            };
+            parts: string[];
+            sizes: {};
+            variants: {
+                subtle: (props: import("..").Dict<any>) => {
+                    container: {
+                        bg: string;
+                        borderColor: string;
+                        borderWidth: number;
+                        color: string;
+                    };
+                    button: {
+                        color: string;
+                        hoverBg: string;
+                        activeBg: string;
+                        variant: string;
+                    };
+                    icon: {};
+                    message: {};
+                    text: {};
+                    title: {};
+                };
+            };
+        };
         P: {
             defaultProps: {
                 size: string;

package/utils/assertion.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Dict } from './types';
 /** Is value an array. */
-export declare function isArray<T>(value: any): value is Array<T>;
+export declare function isArray<T>(value: any): value is T[];
 /** Is value a function. */
 export declare function isFunction<T>(value: any): value is T;
 /** Is value a number. */

package/utils/object.d.ts

@@ -1,13 +1,6 @@
 import { Dict } from './types';
 /** Removes keys from an object if their value is undefined. */
 export declare const filterUndefined: (object: Dict) => Dict<any>;
-/**
- * Recursively retrieves a nested property of a given object
- * @param object
- * @param path string, such as: 'user.name', or array ['user', 'name']
- * @param separator used when path is a string to split individual keys
- */
-export declare function get(object: Dict, path: string | string[], separator?: string): any | undefined;
 /**
  * Recursively deep merges two objects in an immutable fashion, following these rules:
  * - Key exists in target and both keys are objects => merge
@@ -15,11 +8,7 @@ export declare function get(object: Dict, path: string | string[], separator?: s
  * - Key isn't an object, an array or doesn't exist in target => override
  */
 export declare function merge<Target extends Dict, Source extends Dict>(target: Target, source: Source): Target & Source;
-declare type FilterFn<T> = (value: any, key: string, object: T) => boolean;
 /**
  * Returns the items of an object that meet the condition specified in a callback function.
  */
-export declare function objectFilter<T extends Dict>(object: T, fn: FilterFn<T>): Dict<any>;
-/** Removes given keys from an object. */
-export declare function omit<T extends Dict, K extends keyof T>(object: T, keys: K[]): Omit<T, K>;
-export {};
+export declare function objectFilter<T extends Dict>(object: T, fn: (value: any, key: string, object: T) => boolean): Dict<any>;

package/utils/object.js

@@ -11,25 +11,11 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.omit = exports.objectFilter = exports.merge = exports.get = exports.filterUndefined = void 0;
+exports.objectFilter = exports.merge = exports.filterUndefined = void 0;
 var assertion_1 = require("./assertion");
 /** Removes keys from an object if their value is undefined. */
 var filterUndefined = function (object) { return objectFilter(object, function (val) { return val !== null && val !== undefined; }); };
 exports.filterUndefined = filterUndefined;
-/**
- * Recursively retrieves a nested property of a given object
- * @param object
- * @param path string, such as: 'user.name', or array ['user', 'name']
- * @param separator used when path is a string to split individual keys
- */
-function get(object, path, separator) {
-    if (separator === void 0) { separator = '.'; }
-    if (!assertion_1.isObject(object))
-        return;
-    var keys = Array.isArray(path) ? path : path.split(separator);
-    return keys.reduce(function (obj, property) { return obj === null || obj === void 0 ? void 0 : obj[property]; }, object);
-}
-exports.get = get;
 /**
  * Recursively deep merges two objects in an immutable fashion, following these rules:
  * - Key exists in target and both keys are objects => merge
@@ -72,14 +58,3 @@ function objectFilter(object, fn) {
     return result;
 }
 exports.objectFilter = objectFilter;
-/** Removes given keys from an object. */
-function omit(object, keys) {
-    var result = {};
-    Object.keys(object).forEach(function (key) {
-        if (keys.includes(key))
-            return;
-        result[key] = object[key];
-    });
-    return result;
-}
-exports.omit = omit;

package/alert/alert.d.ts

@@ -1,13 +0,0 @@
-import { AlertProps } from './alert.types';
-import AlertButton from './alertButton';
-import AlertIcon from './alertIcon';
-import AlertText from './alertText';
-import AlertTitle from './alertTitle';
-import { VuiComponent } from '../core';
-export declare const Alert: VuiComponent<"div", AlertProps> & {
-    Button: typeof AlertButton;
-    Icon: typeof AlertIcon;
-    Text: typeof AlertText;
-    Title: typeof AlertTitle;
-};
-export default Alert;

package/alert/alert.types.d.ts

@@ -1,20 +0,0 @@
-import { ReactNode } from 'react';
-import { BoxProps } from '../box';
-import { IconProp, IconProps } from '../icon';
-import { ThemingProps } from '../theme';
-import { AnyElement } from '../utils';
-export interface AlertProps extends Omit<BoxProps, 'size' | 'variant'>, ThemingProps<'Alert'> {
-    action?: ReactNode;
-    colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
-    icon?: IconProp | AnyElement;
-    onClose?: () => void;
-    status?: AlertStatus;
-    statusMapping?: AlertStatusMapping;
-    text?: ReactNode;
-    title?: ReactNode;
-}
-export declare type AlertStatus = 'error' | 'info' | 'loading' | 'success' | 'warning';
-export declare type AlertStatusMapping = Record<string, {
-    colorScheme?: AlertProps['colorScheme'];
-    iconProps: IconProps;
-}>;

package/alert/alertButton.d.ts

@@ -1,3 +0,0 @@
-import { ButtonProps } from '../button';
-export declare const AlertButton: import("../core").VuiComponent<"button", ButtonProps>;
-export default AlertButton;

package/alert/alertIcon.d.ts

@@ -1,3 +0,0 @@
-import { IconProps } from '../icon';
-export declare const AlertIcon: import("../core").VuiComponent<"svg", IconProps>;
-export default AlertIcon;

package/alert/alertText.d.ts

@@ -1,3 +0,0 @@
-import { TProps } from '../t';
-export declare const AlertText: import("../core").VuiComponent<"p", TProps>;
-export default AlertText;

package/alert/alertTitle.d.ts

@@ -1,3 +0,0 @@
-import { HeadingProps } from '../heading';
-export declare const AlertTitle: import("../core").VuiComponent<"h6", HeadingProps>;
-export default AlertTitle;

package/alert/consts.d.ts

@@ -1,2 +0,0 @@
-import { AlertStatusMapping } from './alert.types';
-export declare const alertStatusMapping: AlertStatusMapping;

package/alert/context.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { AlertProps } from './alert.types';
-declare const AlertProvider: import("react").Provider<Partial<AlertProps>>, useAlert: () => Partial<AlertProps>;
-export { AlertProvider, useAlert };

package/alert/index.d.ts

@@ -1,8 +0,0 @@
-export * from './alert';
-export * from './alert.types';
-export * from './alertButton';
-export * from './alertIcon';
-export * from './alertText';
-export * from './alertTitle';
-export * from './context';
-export { default } from './alert';