@veracity/vui 0.0.15 → 0.2.0

package/list/listHeading.js

@@ -17,14 +17,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListHeading = void 0;
 var react_1 = __importDefault(require("react"));
 var context_1 = require("./context");
-var listItem_1 = __importDefault(require("./listItem"));
 var core_1 = require("../core");
+var t_1 = require("../t");
 exports.ListHeading = core_1.vui(function (props, ref) {
     var _a;
     var listProps = (_a = context_1.useList()) !== null && _a !== void 0 ? _a : {};
     var mergedProps = __assign(__assign({}, listProps), props);
     var styles = core_1.useStyleConfig('List', mergedProps);
-    return (react_1.default.createElement(listItem_1.default, __assign({ className: "vui-listHeading", color: "grey.80", fontSize: "sm", fontWeight: "medium", ref: ref, textTransform: "uppercase" }, styles.heading, props)));
+    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';
 exports.default = exports.ListHeading;

package/list/listIcon.js

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

package/list/listItem.d.ts

@@ -1,4 +1,4 @@
-import { ListItemProps } from './listItem.types';
+import { ListItemProps } from './list.types';
 import { SystemProps } from '../system';
 export declare const ListItemBase: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, SystemProps, never>;
 export declare const ListItem: import("../core").VuiComponent<"li", ListItemProps>;

package/list/listItem.js

@@ -34,14 +34,15 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var context_1 = require("./context");
 var listIcon_1 = __importDefault(require("./listIcon"));
+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\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\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.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();
     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, iconRight = mergedProps.iconRight, iconLeft = mergedProps.iconLeft, _b = mergedProps.isInteractive, isInteractive = _b === void 0 ? props.onClick !== undefined : _b, isSelected = mergedProps.isSelected, onClick = mergedProps.onClick, text = mergedProps.text, rest = __rest(mergedProps, ["children", "center", "centerH", "centerV", "className", "column", "disabled", "iconRight", "iconLeft", "isInteractive", "isSelected", "onClick", "text"]);
+    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 _c = styles.item, activeBg = _c.activeBg, hoverBg = _c.hoverBg, itemStyles = __rest(_c, ["activeBg", "hoverBg"]);
     var alignItems = (center || (column ? centerH : centerV)) && 'center';
@@ -64,9 +65,11 @@ exports.ListItem = core_1.vui(function (props, ref) {
         flexDirection: flexDirection,
         justifyContent: justifyContent
     });
-    return (react_1.default.createElement(exports.ListItemBase, __assign({ className: utils_1.cs('vui-listItem', className), mb: "1px", onClick: !disabled ? onClick : undefined, px: 1, ref: ref, transitionDuration: "fast" }, itemStyles, interactiveProps, aliasedProps, rest),
-        iconLeft && react_1.default.createElement(listIcon_1.default, { icon: iconLeft, mr: 1 }), children !== null && children !== void 0 ? children : text,
-        iconRight && react_1.default.createElement(listIcon_1.default, { icon: iconRight, ml: "auto" })));
+    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),
+        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,
+        itemRight));
 });
 exports.ListItem.displayName = 'ListItem';
 exports.default = exports.ListItem;

package/list/listText.d.ts

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

package/list/listText.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListText = 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.ListText = core_1.vui(function (props, ref) {
+    var _a;
+    var listProps = (_a = context_1.useList()) !== null && _a !== void 0 ? _a : {};
+    var mergedProps = __assign(__assign({}, listProps), props);
+    var styles = 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';
+exports.default = exports.ListText;

package/list/theme.d.ts

@@ -1,8 +1,10 @@
 import { Dict } from '../utils';
 declare function variantDefault(props: Dict): {
     container: {};
+    heading: {};
     icon: {};
     item: Dict<any>;
+    text: {};
 };
 declare const _default: {
     defaultProps: {
@@ -13,6 +15,8 @@ declare const _default: {
     parts: string[];
     sizes: {
         sm: {
+            container: {};
+            heading: {};
             icon: {
                 size: string;
             };
@@ -20,8 +24,11 @@ declare const _default: {
                 fontSize: string;
                 h: number;
             };
+            text: {};
         };
         md: {
+            container: {};
+            heading: {};
             icon: {
                 size: string;
             };
@@ -29,24 +36,31 @@ declare const _default: {
                 fontSize: string;
                 h: number;
             };
+            text: {};
         };
         lg: {
-            icon: {
-                size: string;
-            };
+            container: {};
+            heading: {};
             item: {
                 fontSize: string;
                 h: number;
             };
-        };
-        xl: {
             icon: {
-                scale: number;
+                size: string;
             };
+            text: {};
+        };
+        xl: {
+            container: {};
+            heading: {};
             item: {
                 fontSize: string;
                 h: number;
             };
+            icon: {
+                scale: number;
+            };
+            text: {};
         };
     };
     variants: {

package/list/theme.js

@@ -8,51 +8,65 @@ function variantDefault(props) {
         hoverBg: c + ".20"
     };
     var container = {};
+    var heading = {};
     var icon = {};
-    return { container: container, icon: icon, item: item };
+    var text = {};
+    return { container: container, heading: heading, icon: icon, item: item, text: text };
 }
 var defaultProps = {
     colorScheme: 'blue',
     size: 'md',
     variant: 'default'
 };
-var parts = ['container', 'heading', 'icon', 'item'];
+var parts = ['container', 'heading', 'icon', 'item', 'text'];
 var sizes = {
     sm: {
+        container: {},
+        heading: {},
         icon: {
             size: 'sm'
         },
         item: {
             fontSize: 'md',
             h: 32
-        }
+        },
+        text: {}
     },
     md: {
+        container: {},
+        heading: {},
         icon: {
             size: 'md'
         },
         item: {
             fontSize: 'md',
             h: 40
-        }
+        },
+        text: {}
     },
     lg: {
-        icon: {
-            size: 'lg'
-        },
+        container: {},
+        heading: {},
         item: {
             fontSize: 'md',
             h: 48
-        }
-    },
-    xl: {
+        },
         icon: {
-            scale: 2
+            size: 'lg'
         },
+        text: {}
+    },
+    xl: {
+        container: {},
+        heading: {},
         item: {
             fontSize: 'lg',
             h: 56
-        }
+        },
+        icon: {
+            scale: 2
+        },
+        text: {}
     }
 };
 var variants = {

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/notification/context.js

@@ -0,0 +1,23 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNotification = exports.NotificationProvider = void 0;
+var core_1 = require("../core");
+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/notification/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__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 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,42 +44,42 @@ 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) {
-    var _a;
-    var action = props.action, children = props.children, className = props.className, _b = props.colorScheme, colorSchemeProp = _b === void 0 ? 'blue' : _b, icon = props.icon, onClose = props.onClose, size = props.size, _c = props.status, status = _c === void 0 ? '' : _c, 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 _d = ((_a = statuses[status]) !== null && _a !== void 0 ? _a : {}).colorScheme, colorScheme = _d === void 0 ? colorSchemeProp : _d;
-    var styles = core_1.useStyleConfig('Alert', __assign({ colorScheme: colorScheme }, props));
+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.notificationStatusMapping), statusMapping);
+    var _f = ((_a = statuses[status]) !== null && _a !== void 0 ? _a : {}).colorScheme, colorScheme = _f === void 0 ? colorSchemeProp : _f;
+    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,
         size,
         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), children ? (children) : (react_1.default.createElement(react_1.default.Fragment, null,
-            status ? react_1.default.createElement(alertIcon_1.default, null) : typeof icon === 'string' ? react_1.default.createElement(alertIcon_1.default, { icon: icon }) : icon,
-            react_1.default.createElement(alertText_1.default, null,
-                typeof title === 'string' ? react_1.default.createElement(alertTitle_1.default, { text: title }) : title,
-                " ",
-                text),
+    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/notification/notificationText.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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.NotificationText = core_1.vui(function (props, ref) {
+    var _a;
+    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.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/notification/notificationTitle.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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.NotificationTitle = core_1.vui(function (props, ref) {
+    var _a;
+    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.NotificationTitle.displayName = 'NotificationTitle';
+exports.default = exports.NotificationTitle;