@veracity/vui 1.9.1 → 2.0.0

package/dist/cjs/link/theme.js

@@ -1,22 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function variantDefault(props) {
-    const { colorScheme: c } = props;
+function variantDefault() {
     const container = {
-        color: `${c}.80`,
-        hoverColor: `${c}.60`
+        color: `seaBlue.28`,
+        hoverColor: `seaBlue.28`
+    };
+    return { container };
+}
+function variantWhite() {
+    const container = {
+        color: `white`,
+        hoverColor: `white`
     };
-    if (c === 'white') {
-        container.color = 'white';
-        container.hoverColor = 'white';
-    }
     return { container };
 }
-function variantLight(props) {
-    const { colorScheme: c } = props;
+function variantLight() {
     const container = {
-        color: `${c}.60`,
-        hoverColor: `${c}.40`
+        color: `seaBlue.28`,
+        hoverColor: `seaBlue.28`
     };
     return { container };
 }
@@ -27,7 +28,6 @@ const variantPlain = {
 };
 const baseStyle = {};
 const defaultProps = {
-    colorScheme: 'blue',
     size: 'md',
     variant: 'default'
 };
@@ -35,7 +35,8 @@ const parts = ['container', 'icon', 'text'];
 const sizes = {
     sm: {
         container: {
-            fontSize: 'sm'
+            fontSize: 'xs',
+            lineHeight: '16px'
         },
         icon: {
             size: 'xs'
@@ -43,7 +44,8 @@ const sizes = {
     },
     md: {
         container: {
-            fontSize: 'md'
+            fontSize: 'sm',
+            lineHeight: '20px'
         },
         icon: {
             size: 'xs'
@@ -51,7 +53,17 @@ const sizes = {
     },
     lg: {
         container: {
-            fontSize: 'lg'
+            fontSize: 'md',
+            lineHeight: '24px'
+        },
+        icon: {
+            size: 'sm'
+        }
+    },
+    xl: {
+        container: {
+            fontSize: 'lg',
+            lineHeight: '28px'
         },
         icon: {
             size: 'sm'
@@ -61,7 +73,8 @@ const sizes = {
 const variants = {
     default: variantDefault,
     light: variantLight,
-    plain: variantPlain
+    plain: variantPlain,
+    white: variantWhite
 };
 exports.default = {
     baseStyle,

package/dist/cjs/list/listItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"listItem.d.ts","sourceRoot":"","sources":["../../../src/list/listItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAkB5C,eAAO,MAAM,YAAY,8HAYxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,qDA6EnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"listItem.d.ts","sourceRoot":"","sources":["../../../src/list/listItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAkB5C,eAAO,MAAM,YAAY,8HAgBxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,qDA6EnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/cjs/list/listItem.js

@@ -54,11 +54,15 @@ exports.ListItemBase = core_1.styled.liBox `
   transition-duration: fast;
 
   &[aria-disabled='true'] {
-    background-color: disabled.bg;
-    color: disabled.color;
+    background-color: disabled .bg;
+    color: disabled .color;
     cursor: not-allowed;
     user-select: none;
   }
+
+  &:focus-visible {
+    z-index: 1;
+  }
 `;
 /**
  * Displays a list item with text and optional icons. Can be shown as interactive or selected.

package/dist/cjs/notification/consts.js

@@ -3,35 +3,35 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.notificationStatusMapping = void 0;
 exports.notificationStatusMapping = {
     error: {
-        colorScheme: 'red',
         iconProps: {
             name: 'falTimesCircle'
-        }
+        },
+        variant: 'subtleRed'
     },
     info: {
-        colorScheme: 'blue',
         iconProps: {
             name: 'falInfoCircle'
-        }
+        },
+        variant: 'subtleBlue'
     },
     loading: {
-        colorScheme: 'blue',
         iconProps: {
             animation: 'vui-spin 0.6s linear infinite',
             name: 'fadSpinnerThird',
             pathFill: ['blue.40', 'blue.60']
-        }
+        },
+        variant: 'subtleBlue'
     },
     success: {
-        colorScheme: 'green',
         iconProps: {
             name: 'falCheckCircle'
-        }
+        },
+        variant: 'subtleGreen'
     },
     warning: {
-        colorScheme: 'yellow',
         iconProps: {
             name: 'falExclamationCircle'
-        }
+        },
+        variant: 'subtleYellow'
     }
 };

package/dist/cjs/notification/notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../src/notification/notification.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAA;AAI3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AACrD,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,iBAAiB,MAAM,qBAAqB,CAAA;AAEnD;;;GAGG;AACH,eAAO,MAAM,YAAY;YAmDf,yBAAyB;UAC3B,uBAAuB;UACvB,uBAAuB;WACtB,wBAAwB;CAChC,CAAA;AAOD,eAAe,YAAY,CAAA"}
+{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../src/notification/notification.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAA;AAI3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AACrD,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,iBAAiB,MAAM,qBAAqB,CAAA;AAEnD;;;GAGG;AACH,eAAO,MAAM,YAAY;YAwDf,yBAAyB;UAC3B,uBAAuB;UACvB,uBAAuB;WACtB,wBAAwB;CAChC,CAAA;AAOD,eAAe,YAAY,CAAA"}

package/dist/cjs/notification/notification.js

@@ -31,20 +31,22 @@ const notificationTitle_1 = __importDefault(require("./notificationTitle"));
  */
 exports.Notification = (0, core_1.vui)((props, ref) => {
     var _a, _b, _c;
-    const { action, children, className, colorScheme: colorSchemeProp = 'blue', icon, onClose, size, status, statusMapping, text, title, variant } = props, rest = __rest(props, ["action", "children", "className", "colorScheme", "icon", "onClose", "size", "status", "statusMapping", "text", "title", "variant"]);
+    const { action, children, className, icon, onClose, size, status, statusMapping, text, title, variant: variantProp = 'subtleBlue', verticalAlign } = props, rest = __rest(props, ["action", "children", "className", "icon", "onClose", "size", "status", "statusMapping", "text", "title", "variant", "verticalAlign"]);
     const statuses = Object.assign(Object.assign({}, consts_1.notificationStatusMapping), statusMapping);
-    const { colorScheme = colorSchemeProp } = (_a = statuses[status !== null && status !== void 0 ? status : '']) !== null && _a !== void 0 ? _a : {};
-    const styles = (0, core_1.useStyleConfig)('Notification', Object.assign({ colorScheme }, props));
+    const { variant = variantProp } = (_a = statuses[status !== null && status !== void 0 ? status : '']) !== null && _a !== void 0 ? _a : {};
+    const styles = (0, core_1.useStyleConfig)('Notification', Object.assign({ variant }, props));
     const iconName = (0, utils_1.isString)(icon) ? icon : (_c = (_b = statuses[status !== null && status !== void 0 ? status : '']) === null || _b === void 0 ? void 0 : _b.iconProps) === null || _c === void 0 ? void 0 : _c.name;
-    const context = (0, utils_1.filterUndefined)({ colorScheme, size, status, variant });
+    const context = (0, utils_1.filterUndefined)({ size, status });
+    const titleDisplay = action ? 'block' : 'inline-flex';
+    const alignSelf = verticalAlign === 'center' ? 'center' : 'flex-start';
     return (react_1.default.createElement(context_1.NotificationProvider, { value: context },
-        react_1.default.createElement(box_1.default, Object.assign({ borderRadius: "md", className: (0, 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,
-            (0, utils_1.isReactText)(title) ? react_1.default.createElement(notificationTitle_1.default, { text: title }) : title,
+        react_1.default.createElement(box_1.default, Object.assign({ borderRadius: "md", borderWidth: 1, className: (0, utils_1.cs)('vui-notification', className), ref: ref, w: "fit-content" }, styles.container, rest),
+            iconName ? react_1.default.createElement(notificationIcon_1.default, { alignSelf: alignSelf, name: iconName }) : icon, children !== null && children !== void 0 ? children : (react_1.default.createElement(notificationText_1.default, { alignSelf: alignSelf },
+            (0, utils_1.isReactText)(title) ? react_1.default.createElement(notificationTitle_1.default, { display: titleDisplay, text: title }) : title,
             " ",
             text)),
             action,
-            onClose && react_1.default.createElement(notificationButton_1.default, { icon: "falTimes", onClick: onClose }))));
+            onClose && (react_1.default.createElement(notificationButton_1.default, { alignSelf: alignSelf, icon: "falTimes", onClick: onClose, variant: variant, w: "32px" })))));
 });
 exports.Notification.Button = notificationButton_1.default;
 exports.Notification.Icon = notificationIcon_1.default;

package/dist/cjs/notification/notification.types.d.ts

@@ -5,7 +5,7 @@ import { ThemingProps } from '../theme';
 export declare type NotificationProps = Omit<BoxProps, 'size' | 'variant'> & ThemingProps<'Notification'> & {
     /** Socket displaying a button on the right. */
     action?: ReactNode;
-    /** Available theme colors for this component. @default blue */
+    /** Available theme colors for this component. @deprecated */
     colorScheme?: 'blue' | 'green' | 'red' | 'yellow';
     /** Socket displaying an icon on the left. */
     icon?: IconProp | JSX.Element;
@@ -22,7 +22,7 @@ export declare type NotificationProps = Omit<BoxProps, 'size' | 'variant'> & The
 };
 export declare type NotificationStatus = 'error' | 'info' | 'loading' | 'success' | 'warning';
 export declare type NotificationStatusMapping = Record<string, {
-    colorScheme?: NotificationProps['colorScheme'];
     iconProps: IconProps;
+    variant?: NotificationProps['variant'];
 }>;
 //# sourceMappingURL=notification.types.d.ts.map

package/dist/cjs/notification/notification.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification.types.d.ts","sourceRoot":"","sources":["../../../src/notification/notification.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,iBAAiB,GAAG,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC,GAChE,YAAY,CAAC,cAAc,CAAC,GAAG;IAC7B,+CAA+C;IAC/C,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IACjD,6CAA6C;IAC7C,IAAI,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,yEAAyE;IACzE,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,+DAA+D;IAC/D,aAAa,CAAC,EAAE,yBAAyB,CAAA;IACzC,4CAA4C;IAC5C,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAEH,oBAAY,kBAAkB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAErF,oBAAY,yBAAyB,GAAG,MAAM,CAC5C,MAAM,EACN;IACE,WAAW,CAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;IAC9C,SAAS,EAAE,SAAS,CAAA;CACrB,CACF,CAAA"}
+{"version":3,"file":"notification.types.d.ts","sourceRoot":"","sources":["../../../src/notification/notification.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,iBAAiB,GAAG,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC,GAChE,YAAY,CAAC,cAAc,CAAC,GAAG;IAC7B,+CAA+C;IAC/C,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IACjD,6CAA6C;IAC7C,IAAI,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,yEAAyE;IACzE,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,+DAA+D;IAC/D,aAAa,CAAC,EAAE,yBAAyB,CAAA;IACzC,4CAA4C;IAC5C,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAEH,oBAAY,kBAAkB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAErF,oBAAY,yBAAyB,GAAG,MAAM,CAC5C,MAAM,EACN;IACE,SAAS,EAAE,SAAS,CAAA;IACpB,OAAO,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAA;CACvC,CACF,CAAA"}

package/dist/cjs/notification/notificationButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notificationButton.d.ts","sourceRoot":"","sources":["../../../src/notification/notificationButton.tsx"],"names":[],"mappings":"AAEA,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAK/C,yDAAyD;AACzD,eAAO,MAAM,kBAAkB,uDAkB7B,CAAA;AAEF,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"notificationButton.d.ts","sourceRoot":"","sources":["../../../src/notification/notificationButton.tsx"],"names":[],"mappings":"AAEA,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAM/C,yDAAyD;AACzD,eAAO,MAAM,kBAAkB,uDAsB7B,CAAA;AAEF,eAAe,kBAAkB,CAAA"}

package/dist/cjs/notification/notificationButton.js

@@ -19,12 +19,16 @@ const react_1 = __importDefault(require("react"));
 const button_1 = __importDefault(require("../button"));
 const core_1 = require("../core");
 const utils_1 = require("../utils");
+const consts_1 = require("./consts");
 const context_1 = require("./context");
 /** Displays an action button within the Notification. */
 exports.NotificationButton = (0, core_1.vui)((props, ref) => {
+    var _a;
     const { className } = props, rest = __rest(props, ["className"]);
     const mergedProps = Object.assign(Object.assign({}, (0, context_1.useNotificationContext)()), props);
     const styles = (0, core_1.useStyleConfig)('Notification', (0, context_1.useNotificationContext)());
-    return (react_1.default.createElement(button_1.default, Object.assign({ className: (0, utils_1.cs)('vui-notificationButton', className), colorScheme: mergedProps.colorScheme, ml: 1, mr: -0.5, ref: ref, size: "sm", variant: "text" }, styles.button, rest)));
+    const { status = '' } = mergedProps;
+    const { variant } = (_a = consts_1.notificationStatusMapping[status]) !== null && _a !== void 0 ? _a : {};
+    return (react_1.default.createElement(button_1.default, Object.assign({ className: (0, utils_1.cs)('vui-notificationButton', className), ml: "0px", mr: "16px", my: "16px", px: "12px", py: "6px", ref: ref }, styles.button, { variant: variant }, rest)));
 });
 exports.default = exports.NotificationButton;

package/dist/cjs/notification/notificationIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notificationIcon.d.ts","sourceRoot":"","sources":["../../../src/notification/notificationIcon.tsx"],"names":[],"mappings":"AAGA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAKzC,oEAAoE;AACpE,eAAO,MAAM,gBAAgB,kDAoB3B,CAAA;AAEF,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"notificationIcon.d.ts","sourceRoot":"","sources":["../../../src/notification/notificationIcon.tsx"],"names":[],"mappings":"AAGA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAKzC,oEAAoE;AACpE,eAAO,MAAM,gBAAgB,kDAuB3B,CAAA;AAEF,eAAe,gBAAgB,CAAA"}

package/dist/cjs/notification/notificationIcon.js

@@ -24,11 +24,12 @@ const context_1 = require("./context");
 /** Displays an icon based on the status within the Notification. */
 exports.NotificationIcon = (0, core_1.vui)((props, ref) => {
     var _a;
-    const { className } = props, rest = __rest(props, ["className"]);
+    const { className, alignSelf } = props, rest = __rest(props, ["className", "alignSelf"]);
     const mergedProps = Object.assign(Object.assign({}, (0, context_1.useNotificationContext)()), props);
     const styles = (0, core_1.useStyleConfig)('Notification', (0, context_1.useNotificationContext)());
     const { status = '' } = mergedProps;
     const { iconProps } = (_a = consts_1.notificationStatusMapping[status]) !== null && _a !== void 0 ? _a : {};
-    return (react_1.default.createElement(icon_1.default, Object.assign({ className: (0, utils_1.cs)('vui-notificationIcon', className), mr: 1, my: 0.5, ref: ref, size: "md" }, styles.icon, iconProps, rest)));
+    const marginTop = alignSelf === 'center' ? '0' : '16px';
+    return (react_1.default.createElement(icon_1.default, Object.assign({ alignSelf: alignSelf, className: (0, utils_1.cs)('vui-notificationIcon', className), ml: "16px", mt: marginTop, ref: ref, size: "md" }, styles.icon, iconProps, rest)));
 });
 exports.default = exports.NotificationIcon;

package/dist/cjs/notification/notificationText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notificationText.d.ts","sourceRoot":"","sources":["../../../src/notification/notificationText.tsx"],"names":[],"mappings":"AAGA,OAAU,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIhC,6CAA6C;AAC7C,eAAO,MAAM,gBAAgB,6CAgB3B,CAAA;AAEF,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"notificationText.d.ts","sourceRoot":"","sources":["../../../src/notification/notificationText.tsx"],"names":[],"mappings":"AAGA,OAAU,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIhC,6CAA6C;AAC7C,eAAO,MAAM,gBAAgB,6CAiB3B,CAAA;AAEF,eAAe,gBAAgB,CAAA"}

package/dist/cjs/notification/notificationText.js

@@ -24,6 +24,6 @@ const context_1 = require("./context");
 exports.NotificationText = (0, core_1.vui)((props, ref) => {
     const { className } = props, rest = __rest(props, ["className"]);
     const styles = (0, core_1.useStyleConfig)('Notification', (0, context_1.useNotificationContext)());
-    return (react_1.default.createElement(t_1.default, Object.assign({ className: (0, utils_1.cs)('vui-notificationText', className), flex: "1", lineHeight: "24px", minW: 0, py: 0.5, ref: ref }, styles.text, rest)));
+    return (react_1.default.createElement(t_1.default, Object.assign({ className: (0, utils_1.cs)('vui-notificationText', className), flex: "1", lineHeight: "24px", minW: 0, mx: "16px", my: "16px", ref: ref }, styles.text, rest)));
 });
 exports.default = exports.NotificationText;

package/dist/cjs/notification/notificationTitle.d.ts

@@ -1,5 +1,5 @@
-import { HeadingProps } from '../heading';
+import { TProps } from '../t';
 /** Displays a title within the Notification. */
-export declare const NotificationTitle: import("../core").VuiComponent<"h6", HeadingProps>;
+export declare const NotificationTitle: import("../core").VuiComponent<"span", TProps>;
 export default NotificationTitle;
 //# sourceMappingURL=notificationTitle.d.ts.map

package/dist/cjs/notification/notificationTitle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notificationTitle.d.ts","sourceRoot":"","sources":["../../../src/notification/notificationTitle.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,YAAY,EAAE,MAAM,YAAY,CAAA;AAI7C,gDAAgD;AAChD,eAAO,MAAM,iBAAiB,oDAa5B,CAAA;AAEF,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"notificationTitle.d.ts","sourceRoot":"","sources":["../../../src/notification/notificationTitle.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAK,MAAM,EAAE,MAAM,MAAM,CAAA;AAIhC,gDAAgD;AAChD,eAAO,MAAM,iBAAiB,gDAO5B,CAAA;AAEF,eAAe,iBAAiB,CAAA"}

package/dist/cjs/notification/notificationTitle.js

@@ -17,13 +17,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationTitle = void 0;
 const react_1 = __importDefault(require("react"));
 const core_1 = require("../core");
-const heading_1 = require("../heading");
+const t_1 = require("../t");
 const utils_1 = require("../utils");
 const context_1 = require("./context");
 /** Displays a title within the Notification. */
 exports.NotificationTitle = (0, core_1.vui)((props, ref) => {
     const { className } = props, rest = __rest(props, ["className"]);
     const styles = (0, core_1.useStyleConfig)('Notification', (0, context_1.useNotificationContext)());
-    return (react_1.default.createElement(heading_1.H6, Object.assign({ className: (0, utils_1.cs)('vui-notificationTitle', className), display: "inline-flex", ref: ref }, styles.title, rest)));
+    return (react_1.default.createElement(t_1.T, Object.assign({ className: (0, utils_1.cs)('vui-notificationTitle', className), fontWeight: "demi", ref: ref }, styles.title, rest)));
 });
 exports.default = exports.NotificationTitle;

package/dist/cjs/notification/theme.d.ts

@@ -1,27 +1,42 @@
-import { Dict } from '../utils';
-declare function variantSubtle(props: Dict): {
-    container: {
-        bg: string;
-        borderColor: string;
-        borderWidth: number;
-        color: string;
-    };
-    button: {
-        color: string;
-        hoverBg: string;
-        activeBg: string;
-    };
-};
 declare const _default: {
     baseStyle: {};
     defaultProps: {
-        colorScheme: string;
         variant: string;
     };
     parts: string[];
     sizes: {};
     variants: {
-        subtle: typeof variantSubtle;
+        subtleBlue: {
+            container: {
+                bg: string;
+                borderColor: string;
+                color: string;
+            };
+            button: {
+                borderColor: string;
+            };
+        };
+        subtleRed: {
+            container: {
+                bg: string;
+                borderColor: string;
+                color: string;
+            };
+        };
+        subtleYellow: {
+            container: {
+                bg: string;
+                borderColor: string;
+                color: string;
+            };
+        };
+        subtleGreen: {
+            container: {
+                bg: string;
+                borderColor: string;
+                color: string;
+            };
+        };
     };
 };
 export default _default;

package/dist/cjs/notification/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/notification/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,iBAAS,aAAa,CAAC,KAAK,EAAE,IAAI;;;;;;;;;;;;EA2BjC;;;;;;;;;;;;;AAiBD,wBAMC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/notification/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,wBAMC"}

package/dist/cjs/notification/theme.js

@@ -1,37 +1,43 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function variantSubtle(props) {
-    const { colorScheme: c } = props;
-    const container = {
-        bg: `${c}.20`,
-        borderColor: `${c}.80`,
-        borderWidth: 1,
-        color: `${c}.90`
-    };
-    const button = {
-        color: `${c}.90`,
-        hoverBg: `${c}.30`,
-        activeBg: `${c}.40`
-    };
-    if (c === 'blue') {
-        container.color = 'blue.80';
-        button.color = 'blue.80';
-    }
-    if (c === 'yellow') {
-        container.color = 'yellow.100';
-        button.color = 'yellow.100';
-    }
-    return { container, button };
-}
 const baseStyle = {};
 const defaultProps = {
-    colorScheme: 'blue',
-    variant: 'subtle'
+    variant: 'subtleBlue'
 };
 const parts = ['container', 'button', 'icon', 'text', 'title'];
 const sizes = {};
 const variants = {
-    subtle: variantSubtle
+    subtleBlue: {
+        container: {
+            bg: 'skyBlue.95',
+            borderColor: 'seaBlue.28',
+            color: 'seaBlue.28'
+        },
+        button: {
+            borderColor: 'transparent'
+        }
+    },
+    subtleRed: {
+        container: {
+            bg: 'energyRed.95',
+            borderColor: 'energyRed.45',
+            color: 'energyRed.45'
+        }
+    },
+    subtleYellow: {
+        container: {
+            bg: 'sunflower.85',
+            borderColor: 'sunflower.15',
+            color: 'sunflower.15'
+        }
+    },
+    subtleGreen: {
+        container: {
+            bg: 'landGreen.95',
+            borderColor: 'landGreen.30',
+            color: 'landGreen.30'
+        }
+    }
 };
 exports.default = {
     baseStyle,

package/dist/cjs/onedesign-tokens/dist/js/es6/rem/button.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 17 Feb 2022 11:35:15 GMT
+ */
+export const buttonSizeLargeFontSize: "1.125rem";
+export const buttonSizeLargeLineHeight: "1.75rem";
+export const buttonSizeLargePadding: "0.5rem 1rem";
+export const buttonSizeMediumFontSize: "1rem";
+export const buttonSizeMediumLineHeight: "1.5rem";
+export const buttonSizeMediumPadding: "0.25rem calc(0.25rem * 3)";
+export const buttonSizeSmallFontSize: "0.875rem";
+export const buttonSizeSmallLineHeight: "1.25rem";
+export const buttonSizeSmallPadding: "calc(0.25rem / 2) 0.5rem";
+export const buttonSizeDefaultFontSize: "1rem";
+export const buttonSizeDefaultLineHeight: "1.5rem";
+export const buttonSizeDefaultPadding: "0.25rem calc(0.25rem * 3)";
+export const buttonTypePrimaryDefaultBorderColorDark: "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryDefaultBorderColorLight: "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryDefaultBackgroundColorDark: "hsla(218, 100%, 28%, 1)";
+export const buttonTypePrimaryDefaultBackgroundColorLight: "hsla(139, 100%, 78%, 1)";
+export const buttonTypePrimaryDefaultTextColorDark: "hsla(40, 3%, 100%, 1)";
+export const buttonTypePrimaryDefaultTextColorLight: "hsla(223, 67%, 18%, 1)";
+export const buttonTypePrimaryHoverBorderColorDark: "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryHoverBorderColorLight: "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryHoverBackgroundColorDark: "hsla(218, 100%, 20%, 1)";
+export const buttonTypePrimaryHoverBackgroundColorLight: "hsla(139, 100%, 70%, 1)";
+export const buttonTypePrimaryHoverTextColorDark: "hsla(40, 3%, 100%, 1)";
+export const buttonTypePrimaryHoverTextColorLight: "hsla(223, 67%, 18%, 1)";
+export const buttonTypePrimaryActiveBorderColorDark: "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryActiveBorderColorLight: "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryActiveBackgroundColorDark: "hsla(218, 100%, 35%, 1)";
+export const buttonTypePrimaryActiveBackgroundColorLight: "hsla(139, 100%, 85%, 1)";
+export const buttonTypePrimaryActiveTextColorDark: "hsla(40, 3%, 100%, 1)";
+export const buttonTypePrimaryActiveTextColorLight: "hsla(223, 67%, 18%, 1)";
+export const buttonTypePrimaryFocusOutline: "0.25rem solid hsla(196, 100%, 43%, 1)";
+export const buttonTypeSecondaryDefaultBorderColorDark: "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryDefaultBorderColorLight: "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryDefaultBackgroundColorDark: "hsla(0, 0%, 0%, 0)";
+export const buttonTypeSecondaryDefaultBackgroundColorLight: "hsla(0, 0%, 0%, 0)";
+export const buttonTypeSecondaryDefaultTextColorDark: "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryDefaultTextColorLight: "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryHoverBorderColorDark: "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryHoverBorderColorLight: "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryHoverBackgroundColorDark: "hsla(196, 74%, 90%, 1)";
+export const buttonTypeSecondaryHoverBackgroundColorLight: "hsla(218, 100%, 25%, 1)";
+export const buttonTypeSecondaryHoverTextColorDark: "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryHoverTextColorLight: "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryActiveBorderColorDark: "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryActiveBorderColorLight: "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryActiveBackgroundColorDark: "hsla(196, 74%, 95%, 1)";
+export const buttonTypeSecondaryActiveBackgroundColorLight: "hsla(218, 100%, 35%, 1)";
+export const buttonTypeSecondaryActiveTextColorDark: "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryActiveTextColorLight: "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryFocusOutline: "0.25rem solid hsla(196, 100%, 43%, 1)";
+export const buttonTypeTertiaryDefaultBorderColorDark: "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultBorderColorLight: "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultBackgroundColorDark: "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultBackgroundColorLight: "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultTextColorDark: "hsla(218, 100%, 28%, 1)";
+export const buttonTypeTertiaryDefaultTextColorLight: "hsla(139, 100%, 78%, 1)";
+export const buttonTypeTertiaryHoverBorderColorDark: "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryHoverBorderColorLight: "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryHoverBackgroundColorDark: "hsla(196, 74%, 90%, 1)";
+export const buttonTypeTertiaryHoverBackgroundColorLight: "hsla(218, 100%, 25%, 1)";
+export const buttonTypeTertiaryHoverTextColorDark: "hsla(218, 100%, 28%, 1)";
+export const buttonTypeTertiaryHoverTextColorLight: "hsla(139, 100%, 78%, 1)";
+export const buttonTypeTertiaryActiveBorderColorDark: "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryActiveBorderColorLight: "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryActiveBackgroundColorDark: "hsla(196, 74%, 95%, 1)";
+export const buttonTypeTertiaryActiveBackgroundColorLight: "hsla(218, 100%, 35%, 1)";
+export const buttonTypeTertiaryActiveTextColorDark: "hsla(218, 100%, 28%, 1)";
+export const buttonTypeTertiaryActiveTextColorLight: "hsla(139, 100%, 78%, 1)";
+export const buttonTypeTertiaryFocusOutline: "0.25rem solid hsla(196, 100%, 43%, 1)";
+export const buttonDisabledCursor: "default";
+export const buttonDisabledOpacity: "50%";
+export const buttonBorderStyle: "solid";
+export const buttonBorderWidth: "calc(0.125rem / 2)";
+export const buttonFontFamily: "'Avenir Next', Arial, sans-serif";
+export const buttonFontSize: "1rem";
+export const buttonLineHeight: "1.5rem";
+export const buttonFontWeight: "500";
+export const buttonPadding: "calc(0.25rem * 1.5) calc(0.25rem * 3)";
+export const buttonTransition: "all 0.15s ease-in-out";
+export const buttonCursor: "pointer";
+//# sourceMappingURL=button.d.ts.map

package/dist/cjs/onedesign-tokens/dist/js/es6/rem/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../../../src/onedesign-tokens/dist/js/es6/rem/button.js"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,iDAAkD;AAClD,kDAAmD;AACnD,mDAAoD;AACpD,8CAA+C;AAC/C,kDAAmD;AACnD,kEAAmE;AACnE,iDAAkD;AAClD,kDAAmD;AACnD,gEAAiE;AACjE,+CAAgD;AAChD,mDAAoD;AACpD,mEAAoE;AACpE,2EAA4E;AAC5E,4EAA6E;AAC7E,oFAAqF;AACrF,qFAAsF;AACtF,4EAA6E;AAC7E,8EAA+E;AAC/E,yEAA0E;AAC1E,0EAA2E;AAC3E,kFAAmF;AACnF,mFAAoF;AACpF,0EAA2E;AAC3E,4EAA6E;AAC7E,0EAA2E;AAC3E,2EAA4E;AAC5E,mFAAoF;AACpF,oFAAqF;AACrF,2EAA4E;AAC5E,6EAA8E;AAC9E,oFAAqF;AACrF,kFAAmF;AACnF,mFAAoF;AACpF,iFAAkF;AAClF,kFAAmF;AACnF,gFAAiF;AACjF,iFAAkF;AAClF,gFAAiF;AACjF,iFAAkF;AAClF,mFAAoF;AACpF,qFAAsF;AACtF,8EAA+E;AAC/E,+EAAgF;AAChF,iFAAkF;AAClF,kFAAmF;AACnF,oFAAqF;AACrF,sFAAuF;AACvF,+EAAgF;AAChF,gFAAiF;AACjF,sFAAuF;AACvF,4EAA6E;AAC7E,6EAA8E;AAC9E,gFAAiF;AACjF,iFAAkF;AAClF,+EAAgF;AAChF,gFAAiF;AACjF,0EAA2E;AAC3E,2EAA4E;AAC5E,kFAAmF;AACnF,oFAAqF;AACrF,6EAA8E;AAC9E,8EAA+E;AAC/E,2EAA4E;AAC5E,4EAA6E;AAC7E,mFAAoF;AACpF,qFAAsF;AACtF,8EAA+E;AAC/E,+EAAgF;AAChF,qFAAsF;AACtF,6CAA8C;AAC9C,0CAA2C;AAC3C,wCAAyC;AACzC,qDAAsD;AACtD,kEAAmE;AACnE,oCAAqC;AACrC,wCAAyC;AACzC,qCAAsC;AACtC,oEAAqE;AACrE,uDAAwD;AACxD,qCAAsC"}