@veracity/vui 2.6.2 → 2.7.0

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

@@ -146,6 +146,18 @@ declare const _default: {
             color: string;
             activeBg: string;
         };
+        /** internal, used in *header* next */
+        primaryLight: {
+            bg: string;
+            borderColor: string;
+            color: string;
+            hoverBg: string;
+            hoverBorderColor: string;
+            hoverColor: string;
+            activeBg: string;
+            activeBorderColor: string;
+            activeColor: string;
+        };
     };
 };
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/avatar/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA8FE,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DpB,wBAKC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/avatar/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA8FE,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyDlB,sCAAsC;;;;;;;;;;;;;;AAcxC,wBAKC"}

package/dist/cjs/avatar/theme.js

@@ -146,6 +146,18 @@ const variants = {
         borderColor: 'hsl(34, 100%, 35%)',
         color: 'white',
         activeBg: 'hsl(34, 100%, 45%)'
+    },
+    /** internal, used in *header* next */
+    primaryLight: {
+        bg: 'buttonTypePrimaryDefaultBackgroundColorLight',
+        borderColor: 'buttonTypePrimaryDefaultBorderColorLight',
+        color: 'buttonTypePrimaryDefaultTextColorLight',
+        hoverBg: 'buttonTypePrimaryHoverBackgroundColorLight',
+        hoverBorderColor: 'buttonTypePrimaryHoverBorderColorLight',
+        hoverColor: 'buttonTypePrimaryHoverTextColorLight',
+        activeBg: 'buttonTypePrimaryActiveBackgroundColorLight',
+        activeBorderColor: 'buttonTypePrimaryActiveBorderColorLight',
+        activeColor: 'buttonTypePrimaryActiveTextColorLight'
     }
 };
 exports.default = {

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

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/badge/badge.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG1C;;;;GAIG;AAEH,eAAO,MAAM,KAAK,oDAmBhB,CAAA;AAEF,eAAe,KAAK,CAAA"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/badge/badge.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG1C;;;;GAIG;AAEH,eAAO,MAAM,KAAK,oDAoBhB,CAAA;AAEF,eAAe,KAAK,CAAA"}

package/dist/cjs/badge/badge.js

@@ -24,12 +24,12 @@ const theme_1 = __importDefault(require("./theme"));
  *
  * These components are used for displaying information only; they might be used as a “counter” for push notifications.
  */
-exports.Badge = (0, core_1.vui)(props => {
+exports.Badge = (0, core_1.vui)((props, ref) => {
     var _a;
     const _b = props, { variant } = _b, rest = __rest(_b, ["variant"]);
     const { variants } = (_a = theme_1.default) !== null && _a !== void 0 ? _a : {};
     const bg = variants[variant !== null && variant !== void 0 ? variant : 'subtleSandstone'].container.bg;
     const color = variants[variant !== null && variant !== void 0 ? variant : 'subtleSandstone'].container.color;
-    return (react_1.default.createElement(tag_1.Tag, Object.assign({ bg: bg, className: "vui-badge", color: color, isInteractive: false, isRound: true, minW: "20px" }, rest, { onDelete: undefined })));
+    return (react_1.default.createElement(tag_1.Tag, Object.assign({ bg: bg, className: "vui-badge", color: color, isInteractive: false, isRound: true, minW: "20px", ref: ref }, rest, { onDelete: undefined })));
 });
 exports.default = exports.Badge;

package/dist/cjs/breadcrumbs/breadcrumbs.d.ts

@@ -2,7 +2,7 @@ import { VuiComponent } from '../core';
 import { BreadcrumbsProps } from './breadcrumbs.types';
 import BreadcrumbsItem from './breadcrumbsItem';
 export declare const BreadcrumbsBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
-/** [Beta] Breadcrumbs consist of a list of items that help a user visualize a page's location within the hierarchical structure of a website, and allow correspondent navigation. */
+/** Breadcrumbs consist of a list of items that help a user visualize a page's location within the hierarchical structure of a website, and allow correspondent navigation. */
 export declare const Breadcrumbs: VuiComponent<"div", BreadcrumbsProps> & {
     Item: typeof BreadcrumbsItem;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAI/C,eAAO,MAAM,eAAe,+HAI3B,CAAA;AAED,qLAAqL;AACrL,eAAO,MAAM,WAAW;UAqBhB,sBAAsB;CAC7B,CAAA;AAID,eAAe,WAAW,CAAA"}
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAI/C,eAAO,MAAM,eAAe,+HAI3B,CAAA;AAED,8KAA8K;AAC9K,eAAO,MAAM,WAAW;UAmBhB,sBAAsB;CAC7B,CAAA;AAID,eAAe,WAAW,CAAA"}

package/dist/cjs/breadcrumbs/breadcrumbs.js

@@ -49,7 +49,7 @@ exports.BreadcrumbsBase = core_1.styled.divBox `
   min-width: 0;
   transition-duration: normal;
 `;
-/** [Beta] Breadcrumbs consist of a list of items that help a user visualize a page's location within the hierarchical structure of a website, and allow correspondent navigation. */
+/** Breadcrumbs consist of a list of items that help a user visualize a page's location within the hierarchical structure of a website, and allow correspondent navigation. */
 exports.Breadcrumbs = (0, core_1.vui)((props, ref) => {
     const { children, className, size } = props, rest = __rest(props, ["children", "className", "size"]);
     const styles = (0, core_1.useStyleConfig)('Breadcrumbs', props);

package/dist/cjs/breadcrumbs/breadcrumbsItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbsItem.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbsItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAyC,YAAY,EAAE,MAAM,SAAS,CAAA;AAG7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAG1D,yBAAyB;AACzB,eAAO,MAAM,eAAe,2CAkBmB,CAAA;AAE/C,eAAe,eAAe,CAAA"}
+{"version":3,"file":"breadcrumbsItem.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbsItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAyC,YAAY,EAAE,MAAM,SAAS,CAAA;AAG7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAG1D,yBAAyB;AACzB,eAAO,MAAM,eAAe,2CAmBmB,CAAA;AAE/C,eAAe,eAAe,CAAA"}

package/dist/cjs/breadcrumbs/breadcrumbsItem.js

@@ -25,8 +25,9 @@ const context_1 = require("./context");
 exports.BreadcrumbsItem = (0, core_1.vui)((props, ref) => {
     const _a = (0, core_1.omitThemingProps)(props), { className, children, icon } = _a, rest = __rest(_a, ["className", "children", "icon"]);
     const styles = (0, core_1.useStyleConfig)('Breadcrumbs', (0, context_1.useBreadcrumbsContext)());
-    return (react_1.default.createElement(box_1.Box, Object.assign({ alignItems: "center", className: (0, utils_1.cs)('vui-breadcrumbs-item', className), p: 0, ref: ref }, rest, styles.item),
-        !!icon && react_1.default.createElement(icon_1.Icon, { name: icon, size: "sm" }),
+    const color = rest.color || 'darkBlue.main';
+    return (react_1.default.createElement(box_1.Box, Object.assign({ alignItems: "center", className: (0, utils_1.cs)('vui-breadcrumbs-item', className), color: color, p: 0, ref: ref }, rest, styles.item),
+        !!icon && react_1.default.createElement(icon_1.Icon, { name: icon, pathFill: color, size: "sm" }),
         children));
 });
 exports.default = exports.BreadcrumbsItem;

package/dist/cjs/breadcrumbs/breadcrumbsSeparator.js

@@ -22,7 +22,7 @@ const utils_1 = require("../utils");
 /** Breadcrumbs separator. */
 const BreadcrumbsSeparator = (_a) => {
     var { className, children, content } = _a, rest = __rest(_a, ["className", "children", "content"]);
-    return (react_1.default.createElement(box_1.Box, Object.assign({ alignItems: "center", className: (0, utils_1.cs)('vui-breadcrumbs-separator', className), p: 0 }, rest), content || children || react_1.default.createElement(icon_1.Icon, { name: "falAngleRight" })));
+    return (react_1.default.createElement(box_1.Box, Object.assign({ alignItems: "center", className: (0, utils_1.cs)('vui-breadcrumbs-separator', className), p: 0 }, rest), content || children || react_1.default.createElement(icon_1.Icon, { name: "falAngleRight", pathFill: "darkBlue.main" })));
 };
 exports.BreadcrumbsSeparator = BreadcrumbsSeparator;
 exports.default = exports.BreadcrumbsSeparator;

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/button/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgSA,wBAMC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/button/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+RA,wBAMC"}

package/dist/cjs/button/theme.js

@@ -166,7 +166,6 @@ const variants = {
             disabledColor: 'darkBlue.75',
             hoverBg: 'skyBlue.85',
             hoverBorderColor: 'seaBlue.35',
-            // focusBg: 'white',
             activeBg: 'skyBlue.90',
             activeBorderColor: 'seaBlue.35'
         }

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

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/card/card.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC;;;GAGG;AACH,eAAO,MAAM,IAAI,kDA+Bf,CAAA;AAEF,eAAe,IAAI,CAAA"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/card/card.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC;;;GAGG;AACH,eAAO,MAAM,IAAI,kDAkBf,CAAA;AAEF,eAAe,IAAI,CAAA"}

package/dist/cjs/card/card.js

@@ -30,14 +30,13 @@ exports.Card = (0, core_1.vui)((props, ref) => {
         ? {
             cursor: 'pointer',
             focusRing: 2,
-            focusRingColor: 'blue.50',
-            hoverRingColor: 'prussian.80',
+            hoverRingColor: 'seaBlue.main',
             hoverShadow: '4',
             outline: 'none',
             tabIndex: 0,
             userSelect: 'none'
         }
         : {};
-    return (react_1.default.createElement(box_1.default, Object.assign({ bg: "white", borderRadius: "md", className: (0, utils_1.cs)('vui-card', className), ref: ref, ring: 1, ringColor: "transparent", shadow: "2" }, styles, interactiveProps, rest)));
+    return react_1.default.createElement(box_1.default, Object.assign({ className: (0, utils_1.cs)('vui-card', className), ref: ref }, styles, interactiveProps, rest));
 });
 exports.default = exports.Card;

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

@@ -1,5 +1,11 @@
 declare const _default: {
-    baseStyle: {};
+    baseStyle: {
+        bg: string;
+        borderRadius: string;
+        ring: number;
+        ringColor: string;
+        shadow: string;
+    };
     defaultProps: {};
     sizes: {};
     variants: {};

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/card/theme.ts"],"names":[],"mappings":";;;;;;AAQA,wBAKC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/card/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;AAcA,wBAKC"}

package/dist/cjs/card/theme.js

@@ -1,6 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const baseStyle = {};
+const baseStyle = {
+    bg: 'white',
+    borderRadius: '1px',
+    ring: 1,
+    ringColor: 'transparent',
+    shadow: '2'
+};
 const defaultProps = {};
 const sizes = {};
 const variants = {};

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

@@ -2,6 +2,7 @@ import { VuiComponent } from '../core';
 import { HeaderProps } from './header.types';
 import HeaderAccount from './headerAccount';
 import HeaderAccountUserInfo from './headerAccountUserInfo';
+import HeaderApplicationName from './headerApplicationName';
 import HeaderContent from './headerContent';
 import HeaderCreateAccount from './headerCreateAccount';
 import HeaderDivider from './headerDivider';
@@ -19,6 +20,7 @@ export declare const HeaderBase: import("styled-components").StyledComponent<"he
 export declare const Header: VuiComponent<"header", HeaderProps> & {
     Account: typeof HeaderAccount;
     AccountUserInfo: typeof HeaderAccountUserInfo;
+    ApplicationName: typeof HeaderApplicationName;
     Content: typeof HeaderContent;
     CreateAccount: typeof HeaderCreateAccount;
     Divider: typeof HeaderDivider;

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

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/header/header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgD,YAAY,EAAE,MAAM,SAAS,CAAA;AAGpF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AACrD,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAEzC,eAAO,MAAM,UAAU,kIAMtB,CAAA;AAED,qHAAqH;AACrH,eAAO,MAAM,MAAM;aA0CR,oBAAoB;qBACZ,4BAA4B;aACpC,oBAAoB;mBACd,0BAA0B;aAChC,oBAAoB;cACnB,qBAAqB;UACzB,iBAAiB;eACZ,sBAAsB;mBAClB,0BAA0B;kBAC3B,yBAAyB;mBACxB,0BAA0B;cAC/B,qBAAqB;qBACd,4BAA4B;YACrC,mBAAmB;CAC5B,CAAA;AAiBD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/header/header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgD,YAAY,EAAE,MAAM,SAAS,CAAA;AAGpF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AACrD,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAGzC,eAAO,MAAM,UAAU,kIAMtB,CAAA;AAGD,qHAAqH;AACrH,eAAO,MAAM,MAAM;aA4CR,oBAAoB;qBACZ,4BAA4B;qBAC5B,4BAA4B;aACpC,oBAAoB;mBACd,0BAA0B;aAChC,oBAAoB;cACnB,qBAAqB;UACzB,iBAAiB;eACZ,sBAAsB;mBAClB,0BAA0B;kBAC3B,yBAAyB;mBACxB,0BAA0B;cAC/B,qBAAqB;qBACd,4BAA4B;YACrC,mBAAmB;CAC5B,CAAA;AAkBD,eAAe,MAAM,CAAA"}

package/dist/cjs/header/header.js

@@ -44,6 +44,7 @@ const utils_1 = require("../utils");
 const context_1 = require("./context");
 const headerAccount_1 = __importDefault(require("./headerAccount"));
 const headerAccountUserInfo_1 = __importDefault(require("./headerAccountUserInfo"));
+const headerApplicationName_1 = __importDefault(require("./headerApplicationName"));
 const headerContent_1 = __importDefault(require("./headerContent"));
 const headerCreateAccount_1 = __importDefault(require("./headerCreateAccount"));
 const headerDivider_1 = __importDefault(require("./headerDivider"));
@@ -56,20 +57,23 @@ const headerNotifications_1 = __importDefault(require("./headerNotifications"));
 const headerServices_1 = __importDefault(require("./headerServices"));
 const headerServicesMessage_1 = __importDefault(require("./headerServicesMessage"));
 const headerSignIn_1 = __importDefault(require("./headerSignIn"));
+/*@formatter:off*/
 exports.HeaderBase = core_1.styled.headerBox `
   align-items: center;
   background-color: white;
-  border-bottom: 1px solid prussian.80;
+  border-bottom: 1px solid darkBlue.main;
   display: flex;
   position: relative;
 `;
+/*@formatter:on*/
 /** Branded Veracity Header with logo, links, services, account and other data. Controls max-width of the content. */
 exports.Header = (0, core_1.vui)((props, ref) => {
-    const { className, headerHeight = 72, size, variant } = props, rest = __rest(props, ["className", "headerHeight", "size", "variant"]);
+    const { className, size, variant } = props, rest = __rest(props, ["className", "size", "variant"]);
     const [isMobileOpen, setIsMobileOpen] = (0, react_1.useState)(false);
     const mobileContentRef = (0, react_1.useRef)(null);
     const mobileToggleRef = (0, react_1.useRef)(null);
     const styles = (0, core_1.useStyleConfig)('Header', props);
+    const headerHeight = 72;
     const [links] = (0, core_1.useLinks)();
     (0, utils_1.useClickOutside)([mobileContentRef, mobileToggleRef], () => {
         setIsMobileOpen(false);
@@ -93,6 +97,7 @@ exports.Header = (0, core_1.vui)((props, ref) => {
 });
 exports.Header.Account = headerAccount_1.default;
 exports.Header.AccountUserInfo = headerAccountUserInfo_1.default;
+exports.Header.ApplicationName = headerApplicationName_1.default;
 exports.Header.Content = headerContent_1.default;
 exports.Header.CreateAccount = headerCreateAccount_1.default;
 exports.Header.Divider = headerDivider_1.default;

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

@@ -49,7 +49,7 @@ export declare type HeaderNotificationsData = {
 };
 export declare type HeaderNotificationsProps = ButtonProps & HeaderNotificationsData;
 export declare type HeaderProps = SystemProps & ThemingProps<'Header'> & {
-    /** Sets the height of the Header and is used by internal parts for positioning and sizing. */
+    /** Sets the height of the Header and is used by internal parts for positioning and sizing. @deprecated; header should always be 72 px.*/
     headerHeight?: number;
 };
 export declare type HeaderServicesData = {
@@ -81,6 +81,22 @@ export declare type LoggedInHeaderProps = HeaderProps & {
     /** Socket for services menu icon on the right side. */
     services?: HeaderServicesData | JSX.Element;
 };
+export declare type LoggedInAppHeaderProps = HeaderProps & {
+    /** Socket for account popover icon on the right side. */
+    account?: HeaderAccountData | JSX.Element;
+    /** Socket for the app name on the left side. */
+    applicationName: string;
+    /** Socket for logo on the left side. */
+    logo?: LogoData | JSX.Element;
+    /** Socket for main links in the middle-right. */
+    mainLinks?: HeaderLinkData[] | JSX.Element;
+    /** Socket for notifications icon on the right side. */
+    notifications?: HeaderNotificationsData | JSX.Element;
+    /** Socket for services menu icon on the right side. */
+    services?: HeaderServicesData | JSX.Element;
+    /** Socket for showing the main Links up front. by default they are folded into the hamburger menu. */
+    showMainLinks?: boolean;
+};
 export declare type LoggedOutHeaderProps = HeaderProps & {
     /** Socket for create account prompt on the right side. */
     createAccount?: HeaderCreateAccountData | JSX.Element;

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.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;AAMrF,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eA4DtD;AAED,eAAe,aAAa,CAAA"}

package/dist/cjs/header/headerAccount.js

@@ -50,6 +50,7 @@ const headerAccountUserInfo_1 = __importDefault(require("./headerAccountUserInfo
 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 styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).account;
@@ -59,8 +60,9 @@ function HeaderAccount(props) {
         ? { 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 : '';
+    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';
     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.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({ className: "vui-headerAccountContent", column: true }, styles.content, contentScreenProps, contentProps),
             (0, utils_1.isJsx)(userInfo) ? userInfo : userInfo && react_1.default.createElement(headerAccountUserInfo_1.default, Object.assign({}, userInfo)),
             (0, utils_1.isJsx)(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" }),
+    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 },
-            displayName && (react_1.default.createElement(t_1.default, { mb: 0.5, weight: "demi" }, displayName)),
-            companyName && react_1.default.createElement(t_1.default, null, companyName))))));
+            displayName && (react_1.default.createElement(t_1.default, { fontSize: isApplication ? '12px' : 'inherit', mb: isApplication ? 0 : 0.5, 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: 6,
+                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: 6,
+            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,4DAyB1B,CAAA;AAEF,eAAe,eAAe,CAAA"}

package/dist/cjs/header/headerMainLinks.js

@@ -27,7 +27,13 @@ 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
+        ? {
+            borderBottom: '1px solid sandstone.main',
+            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.js

@@ -20,7 +20,7 @@ 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"]);

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;