@veracity/vui 2.6.3 → 2.8.0-rc.0

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

@@ -1 +1 @@
-{"version":3,"file":"header.types.d.ts","sourceRoot":"","sources":["../../../src/header/header.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"header.types.d.ts","sourceRoot":"","sources":["../../../src/header/header.types.ts"],"names":[],"mappings":"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"}

package/dist/cjs/header/headerAccount.d.ts

@@ -1,4 +1,5 @@
 import { HeaderAccountProps } from './headerAccount.types';
+/** Disables popper's dynamic re-positioning */
 /** Displays user account information and helpful links, like settings or logout. */
 export declare function HeaderAccount(props: HeaderAccountProps): JSX.Element;
 export default HeaderAccount;

package/dist/cjs/header/headerAccount.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerAccount.d.ts","sourceRoot":"","sources":["../../../src/header/headerAccount.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,kBAAkB,EAA6B,MAAM,uBAAuB,CAAA;AAMrF,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAyDtD;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"headerAccount.d.ts","sourceRoot":"","sources":["../../../src/header/headerAccount.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,kBAAkB,EAA6B,MAAM,uBAAuB,CAAA;AAGrF,+CAA+C;AAE/C,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAqDtD;AAED,eAAe,aAAa,CAAA"}

package/dist/cjs/header/headerAccount.js

@@ -47,21 +47,18 @@ const utils_1 = require("../utils");
 const context_1 = require("./context");
 const headerAccountUserInfo_1 = __importDefault(require("./headerAccountUserInfo"));
 /** Disables popper's dynamic re-positioning */
-const mobilePopoverOptions = { popperOptions: { modifiers: [{ name: 'computeStyles', enabled: false }] } };
 /** Displays user account information and helpful links, like settings or logout. */
 function HeaderAccount(props) {
+    var _a, _b;
     const { contentProps, options = {}, sections, triggerProps, userInfo } = props, rest = __rest(props, ["contentProps", "options", "sections", "triggerProps", "userInfo"]);
-    const { headerHeight, isMobile } = (0, context_1.useHeaderContext)();
+    const { isMobile } = (0, context_1.useHeaderContext)();
     const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).account;
-    // Render content in full view on mobile
-    const popoverOptions = isMobile ? (0, utils_1.merge)(options, mobilePopoverOptions) : options;
-    const contentScreenProps = isMobile
-        ? { h: `calc(100vh - ${headerHeight}px)`, left: 0, position: 'fixed', top: headerHeight, w: '100vw' }
-        : { maxH: 360, py: 1, minW: 320, w: 'auto' };
     const name = (0, utils_1.isObject)(userInfo) ? userInfo.displayName : '';
-    return (react_1.default.createElement(popover_1.default, Object.assign({ isLazy: false, offset: [0, 8], options: popoverOptions, placement: "bottom-end" }, rest),
-        react_1.default.createElement(popover_1.default.Trigger, Object.assign({ as: avatar_1.default, className: "vui-headerAccountTrigger", isInteractive: true, ml: 2, name: name, title: "Account", variant: "solidDarkBlue" }, styles.trigger, triggerProps)),
-        react_1.default.createElement(popover_1.default.Content, Object.assign({ className: "vui-headerAccountContent", column: true }, styles.content, contentScreenProps, contentProps),
+    const variant = (_b = (_a = styles === null || styles === void 0 ? void 0 : styles.trigger) === null || _a === void 0 ? void 0 : _a.variant) !== null && _b !== void 0 ? _b : 'solidDarkBlue';
+    const offsetX = isMobile ? 64 : 39;
+    return (react_1.default.createElement(popover_1.default, Object.assign({ isLazy: false, offset: [offsetX, 16], placement: "bottom-end" }, rest),
+        react_1.default.createElement(popover_1.default.Trigger, Object.assign({ as: avatar_1.default, className: "vui-headerAccountTrigger", isInteractive: true, ml: 1, name: name, size: "lg", title: "Account", variant: variant }, styles.trigger, triggerProps)),
+        react_1.default.createElement(popover_1.default.Content, Object.assign({ borderRadius: 0, className: "vui-headerAccountContent", column: true }, styles.content, { w: isMobile ? 280 : 320 }, contentProps),
             (0, utils_1.isJsx)(userInfo) ? userInfo : userInfo && react_1.default.createElement(headerAccountUserInfo_1.default, Object.assign({}, userInfo)),
             (0, utils_1.isJsx)(sections)
                 ? sections

package/dist/cjs/header/headerAccount.types.d.ts

@@ -30,6 +30,8 @@ export declare type HeaderAccountUserInfoData = {
     companyName?: string;
     /** Displays user name in account user info section. */
     displayName?: string;
+    isApplication?: boolean;
+    role?: string;
 };
 export declare type HeaderAccountUserInfoProps = BoxProps & HeaderAccountUserInfoData;
 //# sourceMappingURL=headerAccount.types.d.ts.map

package/dist/cjs/header/headerAccount.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerAccount.types.d.ts","sourceRoot":"","sources":["../../../src/header/headerAccount.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,0DAA0D;AAC1D,oBAAY,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,wBAAwB,EAAE,CAAA;IACrC,QAAQ,CAAC,EAAE,yBAAyB,CAAA;CACrC,CAAA;AAED,oBAAY,kBAAkB,GAAG,YAAY,GAAG;IAC9C,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,mBAAmB,CAAA;IAClC,gEAAgE;IAChE,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,OAAO,CAAA;IACtD,2DAA2D;IAC3D,YAAY,CAAC,EAAE,cAAc,CAAC,mBAAmB,EAAE,WAAW,CAAC,CAAA;IAC/D,iEAAiE;IACjE,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,OAAO,CAAA;CACvD,CAAA;AAED,gEAAgE;AAChE,oBAAY,wBAAwB,GAAG;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,cAAc,EAAE,CAAA;CACzB,CAAA;AAED,oBAAY,yBAAyB,GAAG;IACtC,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,oBAAY,0BAA0B,GAAG,QAAQ,GAAG,yBAAyB,CAAA"}
+{"version":3,"file":"headerAccount.types.d.ts","sourceRoot":"","sources":["../../../src/header/headerAccount.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,0DAA0D;AAC1D,oBAAY,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,wBAAwB,EAAE,CAAA;IACrC,QAAQ,CAAC,EAAE,yBAAyB,CAAA;CACrC,CAAA;AAED,oBAAY,kBAAkB,GAAG,YAAY,GAAG;IAC9C,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,mBAAmB,CAAA;IAClC,gEAAgE;IAChE,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,OAAO,CAAA;IACtD,2DAA2D;IAC3D,YAAY,CAAC,EAAE,cAAc,CAAC,mBAAmB,EAAE,WAAW,CAAC,CAAA;IAC/D,iEAAiE;IACjE,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,OAAO,CAAA;CACvD,CAAA;AAED,gEAAgE;AAChE,oBAAY,wBAAwB,GAAG;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,cAAc,EAAE,CAAA;CACzB,CAAA;AAED,oBAAY,yBAAyB,GAAG;IACtC,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,oBAAY,0BAA0B,GAAG,QAAQ,GAAG,yBAAyB,CAAA"}

package/dist/cjs/header/headerAccountUserInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerAccountUserInfo.d.ts","sourceRoot":"","sources":["../../../src/header/headerAccountUserInfo.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAA;AAElE,4FAA4F;AAC5F,eAAO,MAAM,qBAAqB,mEA6BhC,CAAA;AAEF,eAAe,qBAAqB,CAAA"}
+{"version":3,"file":"headerAccountUserInfo.d.ts","sourceRoot":"","sources":["../../../src/header/headerAccountUserInfo.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAA;AAElE,4FAA4F;AAC5F,eAAO,MAAM,qBAAqB,mEAuChC,CAAA;AAEF,eAAe,qBAAqB,CAAA"}

package/dist/cjs/header/headerAccountUserInfo.js

@@ -24,12 +24,13 @@ const utils_1 = require("../utils");
 const context_1 = require("./context");
 /** Displays user information, like username and company name, within HeaderAccount part. */
 exports.HeaderAccountUserInfo = (0, core_1.vui)((props, ref) => {
-    const { children, className, companyName, displayName } = props, rest = __rest(props, ["children", "className", "companyName", "displayName"]);
+    const { children, className, companyName, displayName, isApplication, role } = props, rest = __rest(props, ["children", "className", "companyName", "displayName", "isApplication", "role"]);
     const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
-    return (react_1.default.createElement(box_1.default, Object.assign({ className: (0, utils_1.cs)('vui-headerAccountUserInfo', className), p: 2, pb: 1, ref: ref, spaceX: 2 }, styles.accountUserInfo, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(avatar_1.default, { className: "vui-headerAccountUserInfoAvatar", name: displayName, size: "lg", variant: "solidDarkBlue" }),
-        react_1.default.createElement(box_1.default, { column: true },
-            displayName && (react_1.default.createElement(t_1.default, { mb: 0.5, weight: "demi" }, displayName)),
-            companyName && react_1.default.createElement(t_1.default, null, companyName))))));
+    return (react_1.default.createElement(box_1.default, Object.assign({ className: (0, utils_1.cs)('vui-headerAccountUserInfo', className), p: 2, pb: 1, ref: ref, spaceX: 2 }, styles.accountUserInfo, rest, { lineHeight: isApplication ? '18px' : 'inherit', pr: isApplication ? 0 : 'inherit', textAlign: isApplication ? 'right' : 'inherit' }), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
+        !isApplication && (react_1.default.createElement(avatar_1.default, { className: "vui-headerAccountUserInfoAvatar", name: displayName, size: "xl", variant: "solidDarkBlue" })),
+        react_1.default.createElement(box_1.default, { column: true, rowGap: role ? 0 : 0.5 },
+            displayName && (react_1.default.createElement(t_1.default, { fontSize: isApplication ? '12px' : 'inherit', weight: "demi" }, displayName)),
+            companyName && react_1.default.createElement(t_1.default, { fontSize: isApplication ? '12px' : 'inherit' }, companyName),
+            role && (react_1.default.createElement(t_1.default, { color: "sandstone.55", fontSize: isApplication ? '12px' : 'inherit' }, role)))))));
 });
 exports.default = exports.HeaderAccountUserInfo;

package/dist/cjs/header/headerApplicationName.d.ts

@@ -0,0 +1,5 @@
+import { HeadingProps } from '../heading/heading.types';
+/** Logo displayed in the left corner of the Header. */
+export declare const HeaderApplicationName: import("../core").VuiComponent<"div", HeadingProps>;
+export default HeaderApplicationName;
+//# sourceMappingURL=headerApplicationName.d.ts.map

package/dist/cjs/header/headerApplicationName.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"headerApplicationName.d.ts","sourceRoot":"","sources":["../../../src/header/headerApplicationName.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGvD,uDAAuD;AACvD,eAAO,MAAM,qBAAqB,qDAoChC,CAAA;AAEF,eAAe,qBAAqB,CAAA"}

package/dist/cjs/header/headerApplicationName.js

@@ -0,0 +1,47 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderApplicationName = void 0;
+const react_1 = __importDefault(require("react"));
+const core_1 = require("../core");
+const heading_1 = require("../heading");
+const utils_1 = require("../utils");
+/** Logo displayed in the left corner of the Header. */
+exports.HeaderApplicationName = (0, core_1.vui)((props, ref) => {
+    const { title } = props, rest = __rest(props, ["title"]);
+    const isTablet = (0, core_1.useUp)('md');
+    const additionalClassName = isTablet ? 'vui-headerApplicationNameTablet' : 'vui-headerApplicationNameMobile';
+    const mobileProps = isTablet
+        ? {
+            fontSize: 18,
+            mt: 0
+        }
+        : {
+            fontSize: 16,
+            mt: '112px',
+            position: 'absolute',
+            mx: '-16px',
+            w: '100%',
+            bg: 'skyBlue.97',
+            py: '8px',
+            px: '16px',
+            lineHeight: '24px',
+            borderBottom: '1px solid darkBlue.main',
+            borderTop: '1px solid darkBlue.main'
+        };
+    return (react_1.default.createElement(heading_1.Heading, Object.assign({ className: (0, utils_1.cs)('vui-headerApplicationName', additionalClassName), size: "title" }, rest, mobileProps), title));
+});
+exports.default = exports.HeaderApplicationName;

package/dist/cjs/header/headerCreateAccount.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerCreateAccount.d.ts","sourceRoot":"","sources":["../../../src/header/headerCreateAccount.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAA;AAEzD,0DAA0D;AAC1D,eAAO,MAAM,mBAAmB,iEA8B9B,CAAA;AAEF,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"headerCreateAccount.d.ts","sourceRoot":"","sources":["../../../src/header/headerCreateAccount.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAA;AAEzD,0DAA0D;AAC1D,eAAO,MAAM,mBAAmB,iEAgC9B,CAAA;AAEF,eAAe,mBAAmB,CAAA"}

package/dist/cjs/header/headerCreateAccount.js

@@ -24,13 +24,14 @@ const utils_1 = require("../utils");
 const context_1 = require("./context");
 /** Text inviting to create an account when logged out. */
 exports.HeaderCreateAccount = (0, core_1.vui)((props, ref) => {
-    var _a;
+    var _a, _b, _c, _d, _e;
     const { children, className, url } = props, rest = __rest(props, ["children", "className", "url"]);
     const { isMobile, links } = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {};
     const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).createAccount;
-    const screenProps = isMobile ? { borderBottom: '1px solid grey.40', p: 2 } : { ml: 3 };
+    const screenProps = isMobile ? { borderBottom: '1px solid sandstone.main', p: 2 } : { ml: 3 };
+    const linkVariant = isMobile ? 'dark' : (_c = (_b = styles === null || styles === void 0 ? void 0 : styles.link) === null || _b === void 0 ? void 0 : _b.variant) !== null && _c !== void 0 ? _c : 'dark';
     return (react_1.default.createElement(box_1.default, Object.assign({ className: (0, utils_1.cs)('vui-headerCreateAccount', className), column: true, flexShrink: 0, ref: ref }, styles.container, screenProps, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(t_1.default, Object.assign({ size: "sm" }, styles.text), "New to Veracity?"),
-        react_1.default.createElement(link_1.default, Object.assign({ fontWeight: "medium", href: url !== null && url !== void 0 ? url : links.signUp, isUnderlined: true, size: "sm" }, styles.link), "Create account")))));
+        react_1.default.createElement(t_1.default, Object.assign({ size: "sm" }, styles.text, { color: isMobile ? 'darkBlue.main' : (_e = (_d = styles === null || styles === void 0 ? void 0 : styles.text) === null || _d === void 0 ? void 0 : _d.color) !== null && _e !== void 0 ? _e : 'darkBlue.main' }), "New to Veracity?"),
+        react_1.default.createElement(link_1.default, { fontWeight: "medium", href: url !== null && url !== void 0 ? url : links.signUp, isUnderlined: true, size: "sm", variant: linkVariant }, "Create account")))));
 });
 exports.default = exports.HeaderCreateAccount;

package/dist/cjs/header/headerDivider.d.ts

@@ -1,5 +1,5 @@
 import { DividerProps } from '../divider';
-/** Vertical line dividing some of the Header content. */
+/** Vertical line dividing part of the Header content. */
 export declare const HeaderDivider: import("../core").VuiComponent<"hr", DividerProps>;
 export default HeaderDivider;
 //# sourceMappingURL=headerDivider.d.ts.map

package/dist/cjs/header/headerDivider.js

@@ -20,7 +20,7 @@ const core_1 = require("../core");
 const divider_1 = __importDefault(require("../divider"));
 const utils_1 = require("../utils");
 const context_1 = require("./context");
-/** Vertical line dividing some of the Header content. */
+/** Vertical line dividing part of the Header content. */
 exports.HeaderDivider = (0, core_1.vui)((props, ref) => {
     const { className } = props, rest = __rest(props, ["className"]);
     const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());

package/dist/cjs/header/headerLinkItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerLinkItem.d.ts","sourceRoot":"","sources":["../../../src/header/headerLinkItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD,0CAA0C;AAC1C,eAAO,MAAM,cAAc,2DAuCzB,CAAA;AAEF,eAAe,cAAc,CAAA"}
+{"version":3,"file":"headerLinkItem.d.ts","sourceRoot":"","sources":["../../../src/header/headerLinkItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD,0CAA0C;AAC1C,eAAO,MAAM,cAAc,2DAyDzB,CAAA;AAEF,eAAe,cAAc,CAAA"}

package/dist/cjs/header/headerLinkItem.js

@@ -32,10 +32,27 @@ exports.HeaderLinkItem = (0, core_1.vui)((props, ref) => {
     });
     const linkActiveProps = isActive
         ? isMobile
-            ? { bg: 'blue.10', borderLeftWidth: 6, hoverBg: 'blue.20', pl: '10px' }
+            ? {
+                bg: 'skyBlue.95',
+                borderColor: 'seaBlue.main',
+                borderLeftWidth: 3,
+                hoverBg: 'skyBlue.90',
+                pl: '10px',
+                activeBorderBottomWidth: 0,
+                pt: '0px'
+            }
             : { borderBottomWidth: 4, pt: '4px' }
         : {};
+    const linkMobileProps = isMobile
+        ? {
+            color: 'darkBlue.main',
+            hoverBg: 'skyBlue.90',
+            activeBorderColor: 'seaBlue.main',
+            activeBorderLeftWidth: 3,
+            pt: '0'
+        }
+        : { activeBorderBottomWidth: 4, pt: '0px', activePt: '4px' };
     const itemScreenProps = isMobile ? {} : { display: 'inline-flex', fontWeight: 'medium', h: '100%' };
-    return (react_1.default.createElement(list_1.default.Item, Object.assign({ className: (0, utils_1.cs)('vui-headerLinkItem', className), iconLeft: icon, linkProps: Object.assign(Object.assign(Object.assign(Object.assign({}, linkActiveProps), { borderColor: 'prussian.80', href: url, ringInset: true, transition: 'all 0.1s, border-width 0s, padding 0s', w: { xs: '100%', md: 'max-content' } }), styles.link), linkProps), onClick: onClick, ref: ref }, itemScreenProps, styles.container, rest)));
+    return (react_1.default.createElement(list_1.default.Item, Object.assign({ className: (0, utils_1.cs)('vui-headerLinkItem', className), iconLeft: icon, linkProps: Object.assign(Object.assign(Object.assign(Object.assign({ href: url, ringInset: true, transition: 'all 0.1s, border-width 0s, padding 0s', w: { xs: '100%', lg: 'max-content' } }, styles.link), linkProps), linkMobileProps), linkActiveProps), onClick: onClick, ref: ref }, itemScreenProps, styles.container, rest)));
 });
 exports.default = exports.HeaderLinkItem;

package/dist/cjs/header/headerLogo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerLogo.d.ts","sourceRoot":"","sources":["../../../src/header/headerLogo.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAG9C,uDAAuD;AACvD,eAAO,MAAM,UAAU,kDAWrB,CAAA;AAEF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"headerLogo.d.ts","sourceRoot":"","sources":["../../../src/header/headerLogo.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAG9C,uDAAuD;AACvD,eAAO,MAAM,UAAU,kDAarB,CAAA;AAEF,eAAe,UAAU,CAAA"}

package/dist/cjs/header/headerLogo.js

@@ -24,7 +24,8 @@ exports.HeaderLogo = (0, core_1.vui)((props, ref) => {
     var _a;
     const { brand, children, className, src, url } = props, rest = __rest(props, ["brand", "children", "className", "src", "url"]);
     const { links } = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {};
+    const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).logo;
     const logoUrl = url !== null && url !== void 0 ? url : links.home;
-    return (react_1.default.createElement(logo_1.Logo, Object.assign({ brand: brand, className: className, ref: ref, src: src, url: logoUrl }, rest), children));
+    return (react_1.default.createElement(logo_1.Logo, Object.assign({ brand: brand, className: className, ref: ref, src: src, styles: styles, url: logoUrl }, rest), children));
 });
 exports.default = exports.HeaderLogo;

package/dist/cjs/header/headerMainLinks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerMainLinks.d.ts","sourceRoot":"","sources":["../../../src/header/headerMainLinks.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAGrD,4BAA4B;AAC5B,eAAO,MAAM,eAAe,4DAmB1B,CAAA;AAEF,eAAe,eAAe,CAAA"}
+{"version":3,"file":"headerMainLinks.d.ts","sourceRoot":"","sources":["../../../src/header/headerMainLinks.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAGrD,4BAA4B;AAC5B,eAAO,MAAM,eAAe,4DAwB1B,CAAA;AAEF,eAAe,eAAe,CAAA"}

package/dist/cjs/header/headerMainLinks.js

@@ -27,7 +27,12 @@ exports.HeaderMainLinks = (0, core_1.vui)((props, ref) => {
     const { children, className, links } = props, rest = __rest(props, ["children", "className", "links"]);
     const { isMobile } = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {};
     const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
-    const screenStyles = isMobile ? { borderBottom: '1px solid grey.40', flexDirection: 'column', mb: 1 } : { h: '100%' };
+    const screenStyles = isMobile
+        ? {
+            flexDirection: 'column',
+            mb: 1
+        }
+        : { h: '100%' };
     return (react_1.default.createElement(list_1.default, Object.assign({ className: (0, utils_1.cs)('vui-headerMainLinks', className), display: "flex", ref: ref }, styles.mainLinks, screenStyles, rest), children !== null && children !== void 0 ? children : links === null || links === void 0 ? void 0 : links.map((link, index) => react_1.default.createElement(headerLinkItem_1.default, Object.assign({ key: index }, link)))));
 });
 exports.default = exports.HeaderMainLinks;

package/dist/cjs/header/headerMobileContent.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps } from '../box';
-/** Displays some of the Header content when on a mobile screen. */
+/** Displays part of the Header content when on a mobile screen. */
 export declare const HeaderMobileContent: import("../core").VuiComponent<"div", BoxProps>;
 export default HeaderMobileContent;
 //# sourceMappingURL=headerMobileContent.d.ts.map

package/dist/cjs/header/headerMobileContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerMobileContent.d.ts","sourceRoot":"","sources":["../../../src/header/headerMobileContent.tsx"],"names":[],"mappings":"AAEA,OAAY,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAKtC,mEAAmE;AACnE,eAAO,MAAM,mBAAmB,iDAuB9B,CAAA;AAEF,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"headerMobileContent.d.ts","sourceRoot":"","sources":["../../../src/header/headerMobileContent.tsx"],"names":[],"mappings":"AAEA,OAAY,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAKtC,mEAAmE;AACnE,eAAO,MAAM,mBAAmB,iDAwB9B,CAAA;AAEF,eAAe,mBAAmB,CAAA"}

package/dist/cjs/header/headerMobileContent.js

@@ -20,12 +20,13 @@ const box_1 = __importDefault(require("../box"));
 const core_1 = require("../core");
 const utils_1 = require("../utils");
 const context_1 = require("./context");
-/** Displays some of the Header content when on a mobile screen. */
+/** Displays part of the Header content when on a mobile screen. */
 exports.HeaderMobileContent = (0, core_1.vui)((props, ref) => {
     var _a;
     const { className } = props, rest = __rest(props, ["className"]);
     const { isMobileOpen, mobileContentRef } = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {};
     const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
-    return isMobileOpen ? (react_1.default.createElement(box_1.default, Object.assign({ bg: "white", className: (0, utils_1.cs)('vui-headerMobileContent', className), column: true, h: `calc(100vh - 100% - 1px)`, left: 0, overflowX: "hidden", overflowY: "auto", position: "absolute", ref: (0, utils_1.mergeRefs)(ref, mobileContentRef), right: 0, top: "calc(100% + 1px)", zIndex: "100" }, styles.mobileContent, rest))) : null;
+    const isTablet = (0, core_1.useDown)('lg');
+    return isMobileOpen ? (react_1.default.createElement(box_1.default, Object.assign({ bg: "white", className: (0, utils_1.cs)('vui-headerMobileContent', className), column: true, overflowX: "hidden", overflowY: "auto", position: "absolute", ref: (0, utils_1.mergeRefs)(ref, mobileContentRef), right: 0, shadow: 2, top: "calc(100% + 1px)", w: isTablet ? 280 : 320, zIndex: "100" }, styles.mobileContent, rest))) : null;
 });
 exports.default = exports.HeaderMobileContent;

package/dist/cjs/header/headerMobileToggle.js

@@ -28,6 +28,6 @@ exports.HeaderMobileToggle = (0, core_1.vui)((props, ref) => {
     const { isMobileOpen, mobileToggleRef, setIsMobileOpen } = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {};
     const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
     const iconName = isMobileOpen ? 'falTimes' : 'falBars';
-    return (react_1.default.createElement(button_1.IconButton, Object.assign({ className: (0, utils_1.cs)('vui-headerMobileToggle', className), icon: react_1.default.createElement(icon_1.default, { name: iconName, scale: 2 }), ml: 2, onClick: () => setIsMobileOpen(s => !s), p: "3px", ref: (0, utils_1.mergeRefs)(ref, mobileToggleRef) }, styles.mobileToggle, rest)));
+    return (react_1.default.createElement(button_1.IconButton, Object.assign({ className: (0, utils_1.cs)('vui-headerMobileToggle', className), icon: react_1.default.createElement(icon_1.default, { name: iconName }), ml: 1, onClick: () => setIsMobileOpen(s => !s), p: "3px", ref: (0, utils_1.mergeRefs)(ref, mobileToggleRef) }, styles.mobileToggle, rest)));
 });
 exports.default = exports.HeaderMobileToggle;

package/dist/cjs/header/headerNotifications.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerNotifications.d.ts","sourceRoot":"","sources":["../../../src/header/headerNotifications.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAA;AAkBzD,+FAA+F;AAC/F,eAAO,MAAM,mBAAmB,+DA6B9B,CAAA;AAEF,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"headerNotifications.d.ts","sourceRoot":"","sources":["../../../src/header/headerNotifications.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAA;AAoBzD,+FAA+F;AAC/F,eAAO,MAAM,mBAAmB,+DA8B9B,CAAA;AAEF,eAAe,mBAAmB,CAAA"}

package/dist/cjs/header/headerNotifications.js

@@ -20,28 +20,30 @@ const button_1 = __importDefault(require("../button"));
 const core_1 = require("../core");
 const utils_1 = require("../utils");
 const context_1 = require("./context");
+/*@formatter:off*/
 const Badge = core_1.styled.spanBox `
   align-items: center;
-  background-color: hsl(357, 83%, 60%);
+  background-color: energyRed.main;
   border-radius: round;
   color: white;
   display: flex;
-  font-size: 8px;
+  font-size: 12px;
   font-weight: medium;
-  height: 16px;
+  height: 20px;
   justify-content: center;
   position: absolute;
   right: 1px;
   top: 1px;
-  width: 16px;
+  width: 20px;
 `;
+/*@formatter:on*/
 /** Icon link to Veracity notifications engine with an optional number of new notifications. */
 exports.HeaderNotifications = (0, core_1.vui)((props, ref) => {
     var _a;
     const { children, className, count = 0, url } = props, rest = __rest(props, ["children", "className", "count", "url"]);
     const { links } = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {};
     const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).notifications;
-    return (react_1.default.createElement(button_1.default, Object.assign({ as: "a", className: (0, utils_1.cs)('vui-headerNotifications', className), href: url !== null && url !== void 0 ? url : links.notifications, minW: 0, ml: 1, position: "relative", px: "7px", ref: ref, title: "Notifications", variant: "tertiaryDark" }, styles.container, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(button_1.default, Object.assign({ as: "a", className: (0, utils_1.cs)('vui-headerNotifications', className), href: url !== null && url !== void 0 ? url : links.notifications, minW: 0, ml: 1, position: "relative", px: "7px", ref: ref, size: "lg", title: "Notifications", variant: "tertiaryDark" }, styles.container, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(button_1.default.Icon, { name: "falBell" }),
         count > 0 && react_1.default.createElement(Badge, null, count < 100 ? count : '99+')))));
 });

package/dist/cjs/header/headerServices.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerServices.d.ts","sourceRoot":"","sources":["../../../src/header/headerServices.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAoBpD,yDAAyD;AACzD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAuBxD;AAED,eAAe,cAAc,CAAA"}
+{"version":3,"file":"headerServices.d.ts","sourceRoot":"","sources":["../../../src/header/headerServices.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAoBpD,yDAAyD;AACzD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAqCxD;AAED,eAAe,cAAc,CAAA"}

package/dist/cjs/header/headerServices.js

@@ -28,16 +28,17 @@ function ListContent({ links = [] }) {
 }
 /** Displays a list of services available to the user. */
 function HeaderServices(props) {
-    const { buttonProps, links = [] } = props, rest = __rest(props, ["buttonProps", "links"]);
+    const { buttonProps, isApplication = false, links = [], showTopBorder = false } = props, rest = __rest(props, ["buttonProps", "isApplication", "links", "showTopBorder"]);
     const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).services;
+    const offsetX = isApplication ? 183 : 135;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(core_1.RenderOnScreen, { minWidth: "lg" },
-            react_1.default.createElement(menu_1.default, Object.assign({ isLazy: false, offset: [0, 8], placement: "bottom-end", size: "lg" }, rest),
-                react_1.default.createElement(menu_1.default.Button, Object.assign({ icon: "falTh", ml: 1, title: "My services" }, styles.button, buttonProps)),
-                react_1.default.createElement(menu_1.default.List, Object.assign({ heading: "My Services", maxH: 400, w: 320 }, styles.list),
+            react_1.default.createElement(menu_1.default, Object.assign({ isLazy: false, offset: [offsetX, 20], placement: "bottom-end", size: "lg" }, rest),
+                react_1.default.createElement(menu_1.default.Button, Object.assign({ className: "vui-services-trigger", icon: "falTh", title: "My services" }, styles.button, buttonProps)),
+                react_1.default.createElement(menu_1.default.List, Object.assign({ heading: "My Services", maxH: 400, right: 0, w: 320 }, styles.list),
                     react_1.default.createElement(ListContent, { links: links })))),
         react_1.default.createElement(core_1.RenderOnScreen, { maxWidth: "lg" },
-            react_1.default.createElement(list_1.default, Object.assign({ borderBottom: "1px solid grey.40", heading: "My Services" }, styles.list),
+            react_1.default.createElement(list_1.default, Object.assign({ heading: "My Services" }, styles.list, { borderTop: showTopBorder ? 1 : 0, borderTopColor: "sandstone.main", pt: 1 }),
                 react_1.default.createElement(ListContent, { links: links })))));
 }
 exports.HeaderServices = HeaderServices;

package/dist/cjs/header/headerSignIn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerSignIn.d.ts","sourceRoot":"","sources":["../../../src/header/headerSignIn.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAElD,qDAAqD;AACrD,eAAO,MAAM,YAAY,6DAiBvB,CAAA;AAEF,eAAe,YAAY,CAAA"}
+{"version":3,"file":"headerSignIn.d.ts","sourceRoot":"","sources":["../../../src/header/headerSignIn.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAElD,qDAAqD;AACrD,eAAO,MAAM,YAAY,6DAoBvB,CAAA;AAEF,eAAe,YAAY,CAAA"}

package/dist/cjs/header/headerSignIn.js

@@ -22,10 +22,11 @@ const utils_1 = require("../utils");
 const context_1 = require("./context");
 /** Sign in button leading to Veracity login page. */
 exports.HeaderSignIn = (0, core_1.vui)((props, ref) => {
-    var _a;
+    var _a, _b, _c, _d;
     const { children, className, url } = props, rest = __rest(props, ["children", "className", "url"]);
     const { links } = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {};
     const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
-    return (react_1.default.createElement(button_1.default, Object.assign({ as: "a", className: (0, utils_1.cs)('vui-headerSignIn', className), href: url !== null && url !== void 0 ? url : links.signIn, ref: ref }, styles.signIn, rest), children !== null && children !== void 0 ? children : 'Sign in'));
+    const buttonVariant = (_d = (_c = (_b = styles === null || styles === void 0 ? void 0 : styles.signIn) === null || _b === void 0 ? void 0 : _b.button) === null || _c === void 0 ? void 0 : _c.variant) !== null && _d !== void 0 ? _d : 'primaryDark';
+    return (react_1.default.createElement(button_1.default, Object.assign({ as: "a", className: (0, utils_1.cs)('vui-headerSignIn', className), href: url !== null && url !== void 0 ? url : links.signIn, ref: ref, variant: buttonVariant }, styles.signIn, rest), children !== null && children !== void 0 ? children : 'Sign in'));
 });
 exports.default = exports.HeaderSignIn;

package/dist/cjs/header/headerSupport.d.ts

@@ -0,0 +1,5 @@
+import { HeaderSupportProps } from './header.types';
+/** Displays a list of services available to the user. */
+export declare function HeaderSupport(props: HeaderSupportProps): JSX.Element;
+export default HeaderSupport;
+//# sourceMappingURL=headerSupport.d.ts.map

package/dist/cjs/header/headerSupport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"headerSupport.d.ts","sourceRoot":"","sources":["../../../src/header/headerSupport.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAyCnD,yDAAyD;AACzD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eA0BtD;AAED,eAAe,aAAa,CAAA"}

package/dist/cjs/header/headerSupport.js

@@ -0,0 +1,45 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderSupport = void 0;
+const react_1 = __importDefault(require("react"));
+const core_1 = require("../core");
+const menu_1 = __importDefault(require("../menu"));
+const context_1 = require("./context");
+/** Supporting internal component to avoid code duplication. */
+function ListContent({ links = [] }) {
+    const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).services;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(menu_1.default.Item, Object.assign({ isTruncated: true, key: "veracity-support", linkProps: { href: 'https://support.veracity.com/' }, text: "Veracity support", title: "Veracity support" }, styles.item)),
+        react_1.default.createElement(menu_1.default.Item, Object.assign({ isTruncated: true, key: "veracity-terms", linkProps: { href: 'https://id.veracity.com/terms-of-use' }, text: "Veracity terms", title: "Veracity terms" }, styles.item)),
+        react_1.default.createElement(menu_1.default.Item, Object.assign({ isTruncated: true, key: "privacy", linkProps: { href: 'https://services.veracity.com/PrivacyStatement' }, text: "Privacy", title: "Privacy" }, styles.item)),
+        links.length > 0 &&
+            links.map(({ text, url }, index) => (react_1.default.createElement(menu_1.default.Item, Object.assign({ isTruncated: true, key: index, linkProps: { href: url }, text: text, title: text }, styles.item))))));
+}
+/** Displays a list of services available to the user. */
+function HeaderSupport(props) {
+    const { links = [] } = props, rest = __rest(props, ["links"]);
+    const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).services;
+    const isTablet = (0, core_1.useDown)('lg');
+    const offsetX = isTablet ? 162 : 135;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(menu_1.default, Object.assign({ isLazy: false, offset: [offsetX, 16], placement: "bottom-end", size: "lg" }, rest),
+            react_1.default.createElement(menu_1.default.Button, Object.assign({ className: "vui-app-info-trigger", color: styles.button.color, icon: "falQuestionCircle", ml: 1, size: "lg", title: "My services" }, styles.button)),
+            react_1.default.createElement(menu_1.default.List, Object.assign({ maxH: 400, right: 0, w: isTablet ? 280 : 320 }, styles.list),
+                react_1.default.createElement(ListContent, { links: links })))));
+}
+exports.HeaderSupport = HeaderSupport;
+exports.default = HeaderSupport;

package/dist/cjs/header/index.d.ts

@@ -5,6 +5,7 @@ export * from './header.types';
 export * from './headerAccount';
 export * from './headerAccount.types';
 export * from './headerAccountUserInfo';
+export * from './headerApplicationName';
 export * from './headerContent';
 export * from './headerCreateAccount';
 export * from './headerDivider';

package/dist/cjs/header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/header/index.tsx"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,uBAAuB,CAAA;AACrC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/header/index.tsx"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,uBAAuB,CAAA;AACrC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA"}

package/dist/cjs/header/index.js

@@ -26,6 +26,7 @@ __exportStar(require("./header.types"), exports);
 __exportStar(require("./headerAccount"), exports);
 __exportStar(require("./headerAccount.types"), exports);
 __exportStar(require("./headerAccountUserInfo"), exports);
+__exportStar(require("./headerApplicationName"), exports);
 __exportStar(require("./headerContent"), exports);
 __exportStar(require("./headerCreateAccount"), exports);
 __exportStar(require("./headerDivider"), exports);

package/dist/cjs/header/loggedInHeader.d.ts

@@ -1,5 +1,5 @@
 import { LoggedInHeaderProps } from './header.types';
-/** Displays Header content appropriate for logged in users, such as services, notifications or account information. */
+/** Displays Header content appropriate for logged-in users, such as services, notifications or account information. */
 export declare const LoggedInHeader: import("../core").VuiComponent<"div", LoggedInHeaderProps>;
 export default LoggedInHeader;
 //# sourceMappingURL=loggedInHeader.d.ts.map

package/dist/cjs/header/loggedInHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loggedInHeader.d.ts","sourceRoot":"","sources":["../../../src/header/loggedInHeader.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD,uHAAuH;AACvH,eAAO,MAAM,cAAc,4DAwCzB,CAAA;AAEF,eAAe,cAAc,CAAA"}
+{"version":3,"file":"loggedInHeader.d.ts","sourceRoot":"","sources":["../../../src/header/loggedInHeader.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAGpE,uHAAuH;AACvH,eAAO,MAAM,cAAc,4DA0JzB,CAAA;AAEF,eAAe,cAAc,CAAA"}