@veracity/vui 0.3.1 → 0.4.0

package/footer/theme.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var baseStyle = {};
 var defaultProps = {};
 var parts = ['container', 'column', 'heading', 'link', 'row', 'section'];
 var sizes = {};
 var variants = {};
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     parts: parts,
     sizes: sizes,

package/header/consts.d.ts

@@ -0,0 +1,58 @@
+import { Environment } from '../utils';
+import { HeaderLinkKey } from './header.types';
+/**
+ * Defines the structure of Header's account popover sections with links.
+ * Links' url values here are unique references to actual urls in the headerLinks dictionary.
+ */
+export declare const headerAccountSectionsTemplate: {
+    readonly section1: {
+        readonly links: readonly [{
+            readonly icon: "falUser";
+            readonly text: "User settings";
+            readonly url: "userSettings";
+        }];
+    };
+    readonly section2: {
+        readonly links: readonly [{
+            readonly icon: "falEnvelope";
+            readonly text: "Invite to Veracity";
+            readonly url: "invite";
+        }];
+    };
+};
+/** Header link URLs used in Production environment. */
+export declare const headerLinksProd: {
+    readonly createAccount: "https://id.veracity.com/sign-up";
+    readonly home: "https://www.veracity.com";
+    readonly invite: "https://id.veracity.com/invite";
+    readonly marketplace: "https://store.veracity.com";
+    readonly myData: "https://data.veracity.com";
+    readonly myServices: "https://services.veracity.com";
+    readonly notifications: "https://services.veracity.com/Notifications";
+    readonly signIn: "https://login.veracity.com";
+    readonly support: "https://support.veracity.com";
+    readonly userSettings: "https://id.veracity.com/settings";
+};
+/** Header link URLs used in Staging environment. */
+export declare const headerLinksStag: Record<HeaderLinkKey, string>;
+/** Header link URLs used in Test environment. */
+export declare const headerLinksTest: Record<HeaderLinkKey, string>;
+/** Dictionary of Header links for each environment (Prod, Stag, Test). */
+export declare const headerLinks: Record<Environment, Record<HeaderLinkKey, string>>;
+/**
+ * Defines the structure of Header's main links.
+ * Links' url values here are unique references to actual urls in the headerLinks dictionary.
+ */
+export declare const headerMainLinksTemplate: readonly [{
+    readonly text: "Marketplace";
+    readonly url: "marketplace";
+}, {
+    readonly text: "My services";
+    readonly url: "myServices";
+}, {
+    readonly text: "My data";
+    readonly url: "myData";
+}, {
+    readonly text: "Support";
+    readonly url: "support";
+}];

package/header/consts.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.headerMainLinksTemplate = exports.headerLinks = exports.headerLinksTest = exports.headerLinksStag = exports.headerLinksProd = exports.headerAccountSectionsTemplate = void 0;
+/**
+ * Defines the structure of Header's account popover sections with links.
+ * Links' url values here are unique references to actual urls in the headerLinks dictionary.
+ */
+exports.headerAccountSectionsTemplate = {
+    section1: {
+        links: [
+            { icon: 'falUser', text: 'User settings', url: 'userSettings' }
+            // { icon: 'falShoppingBasket', text: 'Subscriptions and payments', url: 'subscriptionsAndPayments' }
+        ]
+    },
+    section2: {
+        links: [{ icon: 'falEnvelope', text: 'Invite to Veracity', url: 'invite' }]
+    }
+};
+/** Header link URLs used in Production environment. */
+exports.headerLinksProd = {
+    createAccount: 'https://id.veracity.com/sign-up',
+    home: 'https://www.veracity.com',
+    invite: 'https://id.veracity.com/invite',
+    marketplace: 'https://store.veracity.com',
+    myData: 'https://data.veracity.com',
+    myServices: 'https://services.veracity.com',
+    notifications: 'https://services.veracity.com/Notifications',
+    signIn: 'https://login.veracity.com',
+    // subscriptionsAndPayments: 'ADD LINK',
+    support: 'https://support.veracity.com',
+    userSettings: 'https://id.veracity.com/settings'
+};
+/** Header link URLs used in Staging environment. */
+exports.headerLinksStag = {
+    createAccount: 'https://idstag.veracity.com/sign-up',
+    home: 'https://wwwstag.veracity.com',
+    invite: 'https://idstag.veracity.com/invite',
+    marketplace: 'https://storestag.veracity.com',
+    myData: 'https://datastag.veracity.com',
+    myServices: 'https://servicesstag.veracity.com',
+    notifications: 'https://servicesstag.veracity.com/Notifications',
+    signIn: 'https://loginstag.veracity.com',
+    // subscriptionsAndPayments: 'ADD LINK',
+    support: 'https://support.veracity.com',
+    userSettings: 'https://idstag.veracity.com/settings'
+};
+/** Header link URLs used in Test environment. */
+exports.headerLinksTest = {
+    createAccount: 'https://idtest.veracity.com/sign-up',
+    home: 'https://wwwtest.veracity.com',
+    invite: 'https://idtest.veracity.com/invite',
+    marketplace: 'https://storetest.veracity.com',
+    myData: 'https://datatest.veracity.com',
+    myServices: 'https://servicestest.veracity.com',
+    notifications: 'https://servicestest.veracity.com/Notifications',
+    signIn: 'https://logintest.veracity.com',
+    // subscriptionsAndPayments: 'ADD LINK',
+    support: 'https://support.veracity.com',
+    userSettings: 'https://idtest.veracity.com/settings'
+};
+/** Dictionary of Header links for each environment (Prod, Stag, Test). */
+exports.headerLinks = {
+    Prod: exports.headerLinksProd,
+    Stag: exports.headerLinksStag,
+    Test: exports.headerLinksTest
+};
+/**
+ * Defines the structure of Header's main links.
+ * Links' url values here are unique references to actual urls in the headerLinks dictionary.
+ */
+exports.headerMainLinksTemplate = [
+    { text: 'Marketplace', url: 'marketplace' },
+    { text: 'My services', url: 'myServices' },
+    { text: 'My data', url: 'myData' },
+    { text: 'Support', url: 'support' }
+];

package/header/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { HeaderContext } from './header.types';
+declare const HeaderProvider: import("react").Provider<HeaderContext>, useHeaderContext: () => HeaderContext;
+export { HeaderProvider, useHeaderContext };

package/header/context.js

@@ -0,0 +1,23 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHeaderContext = exports.HeaderProvider = void 0;
+var utils_1 = require("../utils");
+var _a = __read((0, utils_1.createContext)({ isOptional: true }), 2), HeaderProvider = _a[0], useHeaderContext = _a[1];
+exports.HeaderProvider = HeaderProvider;
+exports.useHeaderContext = useHeaderContext;

package/header/header.d.ts

@@ -0,0 +1,34 @@
+import { VuiComponent } from '../core';
+import { HeaderProps } from './header.types';
+import HeaderAccount from './headerAccount';
+import HeaderContent from './headerContent';
+import HeaderCreateAccount from './headerCreateAccount';
+import HeaderDivider from './headerDivider';
+import HeaderLinkItem from './headerLinkItem';
+import HeaderLinksList from './headerLinksList';
+import HeaderLogo from './headerLogo';
+import HeaderMobileContent from './headerMobileContent';
+import HeaderMobileToggle from './headerMobileToggle';
+import HeaderNotifications from './headerNotifications';
+import HeaderServices from './headerServices';
+import HeaderSignIn from './headerSignIn';
+export declare const HeaderBase: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/**
+ * Branded Veracity Header with logo, links, services, account and other data. Controls max-width of the content.
+ * Exposes some props to the children via context.
+ */
+export declare const Header: VuiComponent<"header", HeaderProps> & {
+    Account: typeof HeaderAccount;
+    Content: typeof HeaderContent;
+    CreateAccount: typeof HeaderCreateAccount;
+    Divider: typeof HeaderDivider;
+    LinkItem: typeof HeaderLinkItem;
+    LinksList: typeof HeaderLinksList;
+    Logo: typeof HeaderLogo;
+    MobileContent: typeof HeaderMobileContent;
+    MobileToggle: typeof HeaderMobileToggle;
+    Notifications: typeof HeaderNotifications;
+    Services: typeof HeaderServices;
+    SignIn: typeof HeaderSignIn;
+};
+export default Header;

package/header/header.js

@@ -0,0 +1,133 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = exports.HeaderBase = void 0;
+var react_1 = __importStar(require("react"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+var headerAccount_1 = __importDefault(require("./headerAccount"));
+var headerContent_1 = __importDefault(require("./headerContent"));
+var headerCreateAccount_1 = __importDefault(require("./headerCreateAccount"));
+var headerDivider_1 = __importDefault(require("./headerDivider"));
+var headerLinkItem_1 = __importDefault(require("./headerLinkItem"));
+var headerLinksList_1 = __importDefault(require("./headerLinksList"));
+var headerLogo_1 = __importDefault(require("./headerLogo"));
+var headerMobileContent_1 = __importDefault(require("./headerMobileContent"));
+var headerMobileToggle_1 = __importDefault(require("./headerMobileToggle"));
+var headerNotifications_1 = __importDefault(require("./headerNotifications"));
+var headerServices_1 = __importDefault(require("./headerServices"));
+var headerSignIn_1 = __importDefault(require("./headerSignIn"));
+exports.HeaderBase = core_1.styled.headerBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-bottom: 1px solid prussian.80;\n\tdisplay: flex;\n\tposition: relative;\n"], ["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-bottom: 1px solid prussian.80;\n\tdisplay: flex;\n\tposition: relative;\n"
+    /**
+     * Branded Veracity Header with logo, links, services, account and other data. Controls max-width of the content.
+     * Exposes some props to the children via context.
+     */
+])));
+/**
+ * Branded Veracity Header with logo, links, services, account and other data. Controls max-width of the content.
+ * Exposes some props to the children via context.
+ */
+exports.Header = (0, core_1.vui)(function (props, ref) {
+    var children = props.children, className = props.className, _a = props.headerHeight, headerHeight = _a === void 0 ? 72 : _a, size = props.size, variant = props.variant, rest = __rest(props, ["children", "className", "headerHeight", "size", "variant"]);
+    var _b = __read((0, react_1.useState)(false), 2), isMobileOpen = _b[0], setIsMobileOpen = _b[1];
+    var mobileContentRef = (0, react_1.useRef)(null);
+    var mobileToggleRef = (0, react_1.useRef)(null);
+    var styles = (0, core_1.useStyleConfig)('Header', props);
+    (0, utils_1.useClickOutside)([mobileContentRef, mobileToggleRef], function () {
+        setIsMobileOpen(false);
+    });
+    var isDesktop = (0, core_1.useUp)('md');
+    var isMobile = (0, core_1.useDown)('md');
+    var context = {
+        headerHeight: headerHeight,
+        isDesktop: isDesktop,
+        isMobile: isMobile,
+        isMobileOpen: isMobileOpen,
+        mobileContentRef: mobileContentRef,
+        mobileToggleRef: mobileToggleRef,
+        setIsMobileOpen: setIsMobileOpen,
+        size: size,
+        variant: variant
+    };
+    return (react_1.default.createElement(context_1.HeaderProvider, { value: context },
+        react_1.default.createElement(exports.HeaderBase, __assign({ className: (0, utils_1.cs)('vui-header', className), h: headerHeight, px: { xs: 2, lg: 5 }, ref: ref }, styles.container, rest), (0, utils_1.runIfFn)(children, context))));
+});
+exports.Header.displayName = 'Header';
+exports.Header.Account = headerAccount_1.default;
+exports.Header.Content = headerContent_1.default;
+exports.Header.CreateAccount = headerCreateAccount_1.default;
+exports.Header.Divider = headerDivider_1.default;
+exports.Header.LinkItem = headerLinkItem_1.default;
+exports.Header.LinksList = headerLinksList_1.default;
+exports.Header.Logo = headerLogo_1.default;
+exports.Header.MobileContent = headerMobileContent_1.default;
+exports.Header.MobileToggle = headerMobileToggle_1.default;
+exports.Header.Notifications = headerNotifications_1.default;
+exports.Header.Services = headerServices_1.default;
+exports.Header.SignIn = headerSignIn_1.default;
+exports.default = exports.Header;
+var templateObject_1;

package/header/header.types.d.ts

@@ -0,0 +1,103 @@
+import { Dispatch, RefObject, SetStateAction } from 'react';
+import { BoxProps } from '../box';
+import { ButtonProps } from '../button';
+import { IconProp } from '../icon';
+import { ListItemProps, ListProps } from '../list';
+import { MenuProps } from '../menu';
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+import { RenderProps } from '../utils';
+import { headerLinksProd } from './consts';
+import { HeaderAccountData } from './headerAccount.types';
+export declare type HeaderContext = Pick<HeaderProps, 'headerHeight'> & {
+    isDesktop: boolean;
+    isMobile: boolean;
+    isMobileOpen: boolean;
+    mobileContentRef: RefObject<HTMLElement | null>;
+    mobileToggleRef: RefObject<HTMLElement | null>;
+    setIsMobileOpen: Dispatch<SetStateAction<boolean>>;
+};
+export declare type HeaderCreateAccountData = {
+    /** Provides URL to create account link. */
+    url?: string;
+};
+export declare type HeaderCreateAccountProps = BoxProps & HeaderCreateAccountData;
+export declare type HeaderLinkData = {
+    /** Displays and icon on the left side of the link. */
+    icon?: IconProp;
+    /** Adds styling for currently active link. */
+    isActive?: boolean;
+    /** Provides text content to the list item. */
+    text?: string;
+    /** Provides href attribute to the internal link element. */
+    url?: string;
+};
+/** Union of link ids based on Header links dictionary for Prod environment. */
+export declare type HeaderLinkKey = keyof typeof headerLinksProd;
+export declare type HeaderLinkItemProps = ListItemProps & HeaderLinkData;
+export declare type HeaderLinksListProps = ListProps & {
+    /** Array of objects with data for each link. */
+    links?: HeaderLinkData[];
+};
+export declare type HeaderLogoData = {
+    /** Loads logo svg from the given source. */
+    src?: string;
+    /** Renders logo wrapper as a link with given url as href. */
+    url?: string;
+};
+export declare type HeaderLogoProps = BoxProps & HeaderLogoData;
+export declare type HeaderNotificationsData = {
+    /** Displays a badge with given number of notifications. */
+    count?: number;
+    /** Provides href to the icon link. */
+    url?: string;
+};
+export declare type HeaderNotificationsProps = ThemingProps<'Header'> & Omit<ButtonProps, 'size' | 'variant'> & HeaderNotificationsData;
+export declare type HeaderProps = SystemProps & ThemingProps<'Header'> & {
+    /** Exposes render props to the children. */
+    children?: HeaderRenderProps;
+    /** Sets the height of the Header and is used by internal parts for positioning and sizing. */
+    headerHeight?: number;
+};
+export declare type HeaderRenderProps = RenderProps<HeaderContext>;
+export declare type HeaderServicesData = {
+    /** Provides text content to the service item. */
+    text?: string;
+    /** Provides href attribute to the internal link element. */
+    url?: string;
+};
+export declare type HeaderServicesProps = MenuProps & {
+    /** Props object passed to the MenuButton component. */
+    buttonProps?: ButtonProps;
+    /** Props object passed to the MenuList component. */
+    listProps?: ListProps;
+    /** Array of objects with data for each service link. */
+    services?: HeaderServicesData[];
+};
+export declare type HeaderSignInData = {
+    /** Provides href to the button link. */
+    url?: string;
+};
+export declare type HeaderSignInProps = ButtonProps & HeaderSignInData;
+export declare type LoggedInHeaderProps = HeaderProps & {
+    /** Socket placing account popover icon on the right side. */
+    account?: HeaderAccountData | JSX.Element;
+    /** Socket placing links in the middle. */
+    links?: HeaderLinkData[] | JSX.Element;
+    /** Socket placing logo on the left side. */
+    logo?: HeaderLogoData | JSX.Element;
+    /** Socket placing notifications icon on the right side. */
+    notifications?: HeaderNotificationsData | JSX.Element;
+    /** Socket placing services menu icon on the right side. */
+    services?: HeaderServicesData[] | JSX.Element;
+};
+export declare type LoggedOutHeaderProps = HeaderProps & {
+    /** Socket placing create account prompt on the right side. */
+    createAccount?: HeaderCreateAccountData | JSX.Element;
+    /** Socket placing links in the middle. */
+    links?: HeaderLinkData[] | JSX.Element;
+    /** Socket placing logo on the left side. */
+    logo?: HeaderLogoData | JSX.Element;
+    /** Socket placing sign in button on the right side. */
+    signIn?: HeaderSignInData | JSX.Element;
+};

package/header/headerAccount.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { HeaderAccountProps } from './headerAccount.types';
+/** Displays user account information and helpful links, like settings or logout. */
+export default function HeaderAccount(props: HeaderAccountProps): JSX.Element;

package/header/headerAccount.js

@@ -0,0 +1,109 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var avatar_1 = __importDefault(require("../avatar"));
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var list_1 = __importDefault(require("../list"));
+var popover_1 = __importDefault(require("../popover"));
+var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+function UserInfo(_a) {
+    var companyName = _a.companyName, userName = _a.userName;
+    return (react_1.default.createElement(box_1.default, { p: 2, pb: 1, spaceX: 2 },
+        react_1.default.createElement(avatar_1.default, { colorScheme: "prussian", name: userName, size: "lg", variant: "solid" }),
+        react_1.default.createElement(box_1.default, { column: true },
+            userName && (react_1.default.createElement(t_1.default, { mb: 0.5, weight: "demi" }, userName)),
+            companyName && react_1.default.createElement(t_1.default, null, companyName))));
+}
+/** Disables popper's dynamic re-positioning */
+var mobilePopoverOptions = { popperOptions: { modifiers: [{ name: 'computeStyles', enabled: false }] } };
+/** Displays user account information and helpful links, like settings or logout. */
+function HeaderAccount(props) {
+    var children = props.children, contentProps = props.contentProps, _a = props.options, options = _a === void 0 ? {} : _a, sections = props.sections, triggerProps = props.triggerProps, userInfo = props.userInfo, rest = __rest(props, ["children", "contentProps", "options", "sections", "triggerProps", "userInfo"]);
+    var _b = (0, context_1.useHeaderContext)(), headerHeight = _b.headerHeight, isMobile = _b.isMobile;
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).account;
+    // Render content in full view on mobile
+    var popoverOptions = isMobile ? (0, utils_1.merge)(options, mobilePopoverOptions) : options;
+    var contentScreenProps = isMobile
+        ? { h: "calc(100vh - " + headerHeight + "px)", left: 0, position: 'fixed', top: headerHeight, w: '100vw' }
+        : { maxH: 360, py: 1, w: 320 };
+    var name = (0, utils_1.isObject)(userInfo) ? userInfo.userName : '';
+    return (react_1.default.createElement(popover_1.default, __assign({ offset: [0, 8], options: popoverOptions, placement: "bottom-end" }, rest),
+        react_1.default.createElement(popover_1.default.Trigger, __assign({ as: avatar_1.default, colorScheme: "prussian", isInteractive: true, ml: 2, name: name, title: "Account", variant: "solid" }, styles.trigger, triggerProps)),
+        react_1.default.createElement(popover_1.default.Content, __assign({ column: true }, styles.content, contentScreenProps, contentProps),
+            (0, utils_1.isObject)(userInfo) ? react_1.default.createElement(UserInfo, __assign({}, userInfo)) : userInfo,
+            (0, utils_1.isObject)(sections)
+                ? Object.entries(sections).map(function (_a) {
+                    var _b = __read(_a, 2), key = _b[0], _c = _b[1], heading = _c.heading, links = _c.links;
+                    return (react_1.default.createElement(react_1.Fragment, { key: key },
+                        react_1.default.createElement(list_1.default.Divider, null),
+                        react_1.default.createElement(list_1.default, { heading: heading }, links === null || links === void 0 ? void 0 : links.map(function (_a, index) {
+                            var icon = _a.icon, text = _a.text, url = _a.url;
+                            return (react_1.default.createElement(list_1.default.Item, { iconLeft: icon, key: index, linkProps: { href: url }, text: text }));
+                        }))));
+                })
+                : sections)));
+}
+exports.default = HeaderAccount;

package/header/headerAccount.types.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { AvatarProps } from '../avatar';
+import { BoxProps } from '../box';
+import { PopoverProps } from '../popover';
+import { HeaderLinkData } from './header.types';
+/** Defines account link sections and user information. */
+export declare type HeaderAccountData = {
+    sections?: HeaderAccountSectionsData;
+    userInfo?: HeaderAccountUserInfoData;
+};
+export declare type HeaderAccountProps = PopoverProps & {
+    /** Props object passed to the PopoverContent component. */
+    contentProps?: BoxProps;
+    /** Socket displaying a set of link sections below user information. */
+    sections?: HeaderAccountData['sections'] | JSX.Element;
+    /** Props object passed to the PopoverTrigger component. */
+    triggerProps?: AvatarProps;
+    /** Socket displaying user information on top of the account popover. */
+    userInfo?: HeaderAccountData['userInfo'] | JSX.Element;
+};
+/** Defines heading and an array of links within one section. */
+export declare type HeaderAccountSectionData = {
+    heading?: string;
+    links?: HeaderLinkData[];
+};
+/** Defines a set of link sections within the account popover. */
+export declare type HeaderAccountSectionsData = {
+    [sectionName: string]: HeaderAccountSectionData;
+};
+/** Defines user information within the Account. */
+export declare type HeaderAccountUserInfoData = {
+    companyName?: string;
+    userName?: string;
+};
+export declare type HeaderAccountUserInfoProps = HeaderAccountUserInfoData;

package/header/headerContent.d.ts

@@ -0,0 +1,4 @@
+import { BoxProps } from '../box';
+/** Controls max-width of the content and centers itself vertically. */
+export declare const HeaderContent: import("../core").VuiComponent<"div", BoxProps>;
+export default HeaderContent;

package/header/headerContent.js

@@ -0,0 +1,28 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderContent = void 0;
+var react_1 = __importDefault(require("react"));
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var context_1 = require("./context");
+/** Controls max-width of the content and centers itself vertically. */
+exports.HeaderContent = (0, core_1.vui)(function (props, ref) {
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
+    return (react_1.default.createElement(box_1.default, __assign({ centerV: true, className: "vui-headerContent", h: "100%", maxW: 1440, mx: "auto", ref: ref, w: "100%" }, styles.content, props)));
+});
+exports.HeaderContent.displayName = 'HeaderContent';
+exports.default = exports.HeaderContent;

package/header/headerCreateAccount.d.ts

@@ -0,0 +1,4 @@
+import { HeaderCreateAccountProps } from './header.types';
+/** Text inviting to create an account when logged out. */
+export declare const HeaderCreateAccount: import("../core").VuiComponent<"div", HeaderCreateAccountProps>;
+export default HeaderCreateAccount;