@veracity/vui 0.3.1 → 0.4.0

package/header/headerCreateAccount.js

@@ -0,0 +1,47 @@
+"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 __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.HeaderCreateAccount = void 0;
+var react_1 = __importDefault(require("react"));
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var link_1 = __importDefault(require("../link"));
+var t_1 = __importDefault(require("../t"));
+var context_1 = require("./context");
+/** Text inviting to create an account when logged out. */
+exports.HeaderCreateAccount = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var url = props.url, rest = __rest(props, ["url"]);
+    var isMobile = ((_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {}).isMobile;
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).createAccount;
+    var screenProps = isMobile ? { borderBottom: '1px solid grey.40', p: 2 } : { ml: 3 };
+    return (react_1.default.createElement(box_1.default, __assign({ className: "vui-headerCreateAccount", column: true, flexShrink: 0, ref: ref }, styles.container, screenProps, rest),
+        react_1.default.createElement(t_1.default, __assign({ size: "sm" }, styles.text), "New to Veracity?"),
+        react_1.default.createElement(link_1.default, __assign({ fontWeight: "medium", href: url, isUnderlined: true, size: "sm" }, styles.link), "Create account")));
+});
+exports.HeaderCreateAccount.displayName = 'HeaderCreateAccount';
+exports.default = exports.HeaderCreateAccount;

package/header/headerDivider.d.ts

@@ -0,0 +1,4 @@
+import { DividerProps } from '../divider';
+/** Vertical line dividing some of the Header content. */
+export declare const HeaderDivider: import("../core").VuiComponent<"hr", DividerProps>;
+export default HeaderDivider;

package/header/headerDivider.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.HeaderDivider = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var divider_1 = __importDefault(require("../divider"));
+var context_1 = require("./context");
+/** Vertical line dividing some of the Header content. */
+exports.HeaderDivider = (0, core_1.vui)(function (props, ref) {
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
+    return (react_1.default.createElement(divider_1.default, __assign({ borderColor: "prussian.80", className: "vui-headerDivider", h: 40, isVertical: true, ref: ref }, styles.divider, props)));
+});
+exports.HeaderDivider.displayName = 'HeaderDivider';
+exports.default = exports.HeaderDivider;

package/header/headerLinkItem.d.ts

@@ -0,0 +1,4 @@
+import { HeaderLinkItemProps } from './header.types';
+/** Individual link item of the Header. */
+export declare const HeaderLinkItem: import("../core").VuiComponent<"li", HeaderLinkItemProps>;
+export default HeaderLinkItem;

package/header/headerLinkItem.js

@@ -0,0 +1,53 @@
+"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 __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.HeaderLinkItem = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var list_1 = __importDefault(require("../list"));
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+/** Individual link item of the Header. */
+exports.HeaderLinkItem = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var className = props.className, icon = props.icon, isActive = props.isActive, linkProps = props.linkProps, onClickProp = props.onClick, url = props.url, rest = __rest(props, ["className", "icon", "isActive", "linkProps", "onClick", "url"]);
+    var _b = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {}, isMobile = _b.isMobile, setIsMobileOpen = _b.setIsMobileOpen;
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).linkItem;
+    var onClick = (0, utils_1.useCallbackRef)(function (e) {
+        setIsMobileOpen(false);
+        onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
+    });
+    var linkActiveProps = isActive
+        ? isMobile
+            ? { bg: 'blue.10', borderLeftWidth: 6, hoverBg: 'blue.20', pl: '10px' }
+            : { borderBottomWidth: 4, pt: '4px' }
+        : {};
+    var itemScreenProps = isMobile ? {} : { display: 'inline-flex', fontWeight: 'medium', h: '100%' };
+    return (react_1.default.createElement(list_1.default.Item, __assign({ className: (0, utils_1.cs)('vui-headerLinkItem', className), iconLeft: icon, linkProps: __assign(__assign(__assign(__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)));
+});
+exports.HeaderLinkItem.displayName = 'HeaderLinkItem';
+exports.default = exports.HeaderLinkItem;

package/header/headerLinksList.d.ts

@@ -0,0 +1,4 @@
+import { HeaderLinksListProps } from './header.types';
+/** List of Header Links. */
+export declare const HeaderLinksList: import("../core").VuiComponent<"ul", HeaderLinksListProps>;
+export default HeaderLinksList;

package/header/headerLinksList.js

@@ -0,0 +1,44 @@
+"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 __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.HeaderLinksList = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var list_1 = __importDefault(require("../list"));
+var context_1 = require("./context");
+var headerLinkItem_1 = __importDefault(require("./headerLinkItem"));
+/** List of Header Links. */
+exports.HeaderLinksList = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var children = props.children, links = props.links, rest = __rest(props, ["children", "links"]);
+    var isMobile = ((_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {}).isMobile;
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
+    var screenStyles = isMobile ? { borderBottom: '1px solid grey.40', flexDirection: 'column', mb: 1 } : { h: '100%' };
+    return (react_1.default.createElement(list_1.default, __assign({ className: "vui-headerLinksList", display: "flex", ref: ref }, styles.linksList, screenStyles, rest), children !== null && children !== void 0 ? children : links === null || links === void 0 ? void 0 : links.map(function (link, index) { return react_1.default.createElement(headerLinkItem_1.default, __assign({ key: index }, link)); })));
+});
+exports.HeaderLinksList.displayName = 'HeaderLinksList';
+exports.default = exports.HeaderLinksList;

package/header/headerLogo.d.ts

@@ -0,0 +1,4 @@
+import { HeaderLogoProps } from './header.types';
+/** Logo displayed in the left corner of the Header. By default Veracity logo is used. */
+export declare const HeaderLogo: import("../core").VuiComponent<"div", HeaderLogoProps>;
+export default HeaderLogo;

package/header/headerLogo.js

@@ -0,0 +1,44 @@
+"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 __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.HeaderLogo = void 0;
+var react_1 = __importDefault(require("react"));
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var svg_1 = __importDefault(require("../svg"));
+var context_1 = require("./context");
+var defaultLogo = core_1.cdnUrl + "/common/icons/logos/veracity-logo.svg";
+/** Logo displayed in the left corner of the Header. By default Veracity logo is used. */
+exports.HeaderLogo = (0, core_1.vui)(function (props, ref) {
+    var _a = props.src, src = _a === void 0 ? defaultLogo : _a, url = props.url, rest = __rest(props, ["src", "url"]);
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).logo;
+    var linkProps = url ? { as: 'a', href: url, outline: 'none', focusRing: 2 } : {};
+    return (react_1.default.createElement(box_1.default, __assign({ centerV: true, className: "vui-headerLogo", flexShrink: 0, h: 40, mr: 2, ref: ref }, styles.container, linkProps, rest),
+        react_1.default.createElement(svg_1.default, __assign({ "aria-label": "logo", h: "100%", src: src }, styles.svg))));
+});
+exports.HeaderLogo.displayName = 'HeaderLogo';
+exports.default = exports.HeaderLogo;

package/header/headerMobileContent.d.ts

@@ -0,0 +1,4 @@
+import { BoxProps } from '../box';
+/** Displays some of the Header content when on a mobile screen. */
+export declare const HeaderMobileContent: import("../core").VuiComponent<"div", BoxProps>;
+export default HeaderMobileContent;

package/header/headerMobileContent.js

@@ -0,0 +1,31 @@
+"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.HeaderMobileContent = void 0;
+var react_1 = __importDefault(require("react"));
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+/** Displays some of the Header content when on a mobile screen. */
+exports.HeaderMobileContent = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var _b = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {}, isMobileOpen = _b.isMobileOpen, mobileContentRef = _b.mobileContentRef;
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
+    return isMobileOpen ? (react_1.default.createElement(box_1.default, __assign({ bg: "white", className: "vui-headerMobileContent", 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, props))) : null;
+});
+exports.HeaderMobileContent.displayName = 'HeaderMobileContent';
+exports.default = exports.HeaderMobileContent;

package/header/headerMobileToggle.d.ts

@@ -0,0 +1,4 @@
+import { ButtonProps } from '../button';
+/** Button that toggles display of the mobile content. */
+export declare const HeaderMobileToggle: import("../core").VuiComponent<"button", ButtonProps>;
+export default HeaderMobileToggle;

package/header/headerMobileToggle.js

@@ -0,0 +1,33 @@
+"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.HeaderMobileToggle = void 0;
+var react_1 = __importDefault(require("react"));
+var button_1 = require("../button");
+var core_1 = require("../core");
+var icon_1 = __importDefault(require("../icon"));
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+/** Button that toggles display of the mobile content. */
+exports.HeaderMobileToggle = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var _b = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {}, isMobileOpen = _b.isMobileOpen, mobileToggleRef = _b.mobileToggleRef, setIsMobileOpen = _b.setIsMobileOpen;
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
+    var iconName = isMobileOpen ? 'falTimes' : 'falBars';
+    return (react_1.default.createElement(button_1.IconButton, __assign({ className: "vui-headerMobileToggle", colorScheme: "prussian", icon: react_1.default.createElement(icon_1.default, { name: iconName, scale: 2 }), ml: 2, onClick: function () { return setIsMobileOpen(function (s) { return !s; }); }, p: "3px", ref: (0, utils_1.mergeRefs)(ref, mobileToggleRef) }, styles.mobileToggle, props)));
+});
+exports.HeaderMobileToggle.displayName = 'HeaderMobileToggle';
+exports.default = exports.HeaderMobileToggle;

package/header/headerNotifications.d.ts

@@ -0,0 +1,4 @@
+import { HeaderNotificationsProps } from './header.types';
+/** Icon link to Veracity notifications engine with an optional number of new notifications. */
+export declare const HeaderNotifications: import("../core").VuiComponent<"a", HeaderNotificationsProps>;
+export default HeaderNotifications;

package/header/headerNotifications.js

@@ -0,0 +1,51 @@
+"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 __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.HeaderNotifications = void 0;
+var react_1 = __importDefault(require("react"));
+var button_1 = __importDefault(require("../button"));
+var core_1 = require("../core");
+var context_1 = require("./context");
+var Badge = core_1.styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tbackground-color: red.70;\n\tborder-radius: round;\n\tcolor: white;\n\tdisplay: flex;\n\tfont-size: 8px;\n\tfont-weight: medium;\n\theight: 16px;\n\tjustify-content: center;\n\tposition: absolute;\n\tright: 1px;\n\ttop: 1px;\n\twidth: 16px;\n"], ["\n\talign-items: center;\n\tbackground-color: red.70;\n\tborder-radius: round;\n\tcolor: white;\n\tdisplay: flex;\n\tfont-size: 8px;\n\tfont-weight: medium;\n\theight: 16px;\n\tjustify-content: center;\n\tposition: absolute;\n\tright: 1px;\n\ttop: 1px;\n\twidth: 16px;\n"
+    /** Icon link to Veracity notifications engine with an optional number of new notifications. */
+])));
+/** Icon link to Veracity notifications engine with an optional number of new notifications. */
+exports.HeaderNotifications = (0, core_1.vui)(function (props, ref) {
+    var children = props.children, _a = props.count, count = _a === void 0 ? 0 : _a, url = props.url, rest = __rest(props, ["children", "count", "url"]);
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
+    return (react_1.default.createElement(button_1.default, __assign({ as: "a", href: url, minW: 0, ml: 1, position: "relative", px: "7px", ref: ref, title: "Notifications", variant: "text" }, styles.notifications, rest),
+        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+'))));
+});
+exports.HeaderNotifications.displayName = 'HeaderNotifications';
+exports.default = exports.HeaderNotifications;
+var templateObject_1;

package/header/headerServices.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { HeaderServicesProps } from './header.types';
+/** Displays a list of services available to the user. */
+export default function HeaderServices(props: HeaderServicesProps): JSX.Element;

package/header/headerServices.js

@@ -0,0 +1,55 @@
+"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 __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 });
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var list_1 = __importDefault(require("../list"));
+var menu_1 = __importDefault(require("../menu"));
+var context_1 = require("./context");
+/** Displays a list of services available to the user. */
+function HeaderServices(props) {
+    var buttonProps = props.buttonProps, children = props.children, listProps = props.listProps, _a = props.services, services = _a === void 0 ? [] : _a, rest = __rest(props, ["buttonProps", "children", "listProps", "services"]);
+    var 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(core_1.RenderOnDesktop, null,
+            react_1.default.createElement(menu_1.default, __assign({ offset: [0, 8], placement: "bottom-end", size: "lg" }, rest),
+                react_1.default.createElement(menu_1.default.Button, __assign({ colorScheme: "prussian", icon: "falTh", ml: 1, title: "My services" }, styles.button, buttonProps)),
+                react_1.default.createElement(menu_1.default.List, __assign({ maxH: 400, maxW: 320 }, styles.list, listProps),
+                    react_1.default.createElement(menu_1.default.List.Heading, null, "My Services"),
+                    services.map(function (_a, index) {
+                        var text = _a.text, url = _a.url;
+                        return (react_1.default.createElement(menu_1.default.Item, __assign({ isTruncated: true, key: index, linkProps: { href: url }, text: text }, styles.item)));
+                    })))),
+        react_1.default.createElement(core_1.RenderOnMobile, null,
+            react_1.default.createElement(list_1.default, __assign({ borderBottom: "1px solid grey.40" }, styles.list, listProps),
+                react_1.default.createElement(list_1.default.Heading, null, "My Services"),
+                services.map(function (_a, index) {
+                    var text = _a.text, url = _a.url;
+                    return (react_1.default.createElement(menu_1.default.Item, __assign({ key: index, linkProps: { href: url }, text: text }, styles.item)));
+                })))));
+}
+exports.default = HeaderServices;

package/header/headerSignIn.d.ts

@@ -0,0 +1,4 @@
+import { HeaderSignInProps } from './header.types';
+/** Sign in button leading to Veracity login page. */
+export declare const HeaderSignIn: import("../core").VuiComponent<"button", HeaderSignInProps>;
+export default HeaderSignIn;

package/header/headerSignIn.js

@@ -0,0 +1,40 @@
+"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 __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.HeaderSignIn = void 0;
+var react_1 = __importDefault(require("react"));
+var button_1 = __importDefault(require("../button"));
+var core_1 = require("../core");
+var context_1 = require("./context");
+/** Sign in button leading to Veracity login page. */
+exports.HeaderSignIn = (0, core_1.vui)(function (props, ref) {
+    var url = props.url, rest = __rest(props, ["url"]);
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
+    return (react_1.default.createElement(button_1.default, __assign({ as: "a", className: "vui-headerSignIn", href: url, ref: ref }, styles.signIn, rest), "Sign in"));
+});
+exports.HeaderSignIn.displayName = 'HeaderSignIn';
+exports.default = exports.HeaderSignIn;

package/header/helpers.d.ts

@@ -0,0 +1,17 @@
+import { Environment } from '../utils';
+import { HeaderLinkData } from './header.types';
+import { HeaderAccountSectionsData } from './headerAccount.types';
+/**
+ * Computes Header links for the Account's sections.
+ * Links are selected per environment and modified based on log in state.
+ * @param environment current application environment
+ * @param isLoggedIn is current user logged in
+ */
+export declare function getHeaderAccountSections(environment: Environment, isLoggedIn?: boolean): HeaderAccountSectionsData;
+/**
+ * Computes Header main links.
+ * Links are selected per environment and modified based on log in state.
+ * @param environment current application environment
+ * @param isLoggedIn is current user logged in
+ */
+export declare function getHeaderMainLinks(environment: Environment, isLoggedIn?: boolean): HeaderLinkData[];

package/header/helpers.js

@@ -0,0 +1,66 @@
+"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 __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.getHeaderMainLinks = exports.getHeaderAccountSections = void 0;
+var utils_1 = require("../utils");
+var consts_1 = require("./consts");
+/**
+ * Computes Header links for the Account's sections.
+ * Links are selected per environment and modified based on log in state.
+ * @param environment current application environment
+ * @param isLoggedIn is current user logged in
+ */
+function getHeaderAccountSections(environment, isLoggedIn) {
+    if (isLoggedIn === void 0) { isLoggedIn = false; }
+    // Ok to clone object with JSON here
+    var sections = JSON.parse(JSON.stringify(consts_1.headerAccountSectionsTemplate));
+    Object.entries(consts_1.headerAccountSectionsTemplate).forEach(function (_a) {
+        var _b = __read(_a, 2), sectionName = _b[0], section = _b[1];
+        sections[sectionName].links = section.links.map(function (link) {
+            var url = consts_1.headerLinks[environment][link.url];
+            return __assign(__assign({}, link), { url: (0, utils_1.getLoggedInLink)(url, isLoggedIn) });
+        });
+    });
+    return sections;
+}
+exports.getHeaderAccountSections = getHeaderAccountSections;
+/**
+ * Computes Header main links.
+ * Links are selected per environment and modified based on log in state.
+ * @param environment current application environment
+ * @param isLoggedIn is current user logged in
+ */
+function getHeaderMainLinks(environment, isLoggedIn) {
+    if (isLoggedIn === void 0) { isLoggedIn = false; }
+    return consts_1.headerMainLinksTemplate.map(function (link) {
+        var url = consts_1.headerLinks[environment][link.url];
+        return __assign(__assign({}, link), { url: (0, utils_1.getLoggedInLink)(url, isLoggedIn) });
+    });
+}
+exports.getHeaderMainLinks = getHeaderMainLinks;

package/header/index.d.ts

@@ -0,0 +1,21 @@
+export * from './consts';
+export * from './context';
+export * from './header';
+export { default } from './header';
+export * from './header.types';
+export * from './headerAccount';
+export * from './headerAccount.types';
+export * from './headerContent';
+export * from './headerCreateAccount';
+export * from './headerDivider';
+export * from './headerLinkItem';
+export * from './headerLinksList';
+export * from './headerLogo';
+export * from './headerMobileContent';
+export * from './headerMobileToggle';
+export * from './headerNotifications';
+export * from './headerServices';
+export * from './headerSignIn';
+export * from './helpers';
+export * from './loggedInHeader';
+export * from './loggedOutHeader';

package/header/index.js

@@ -0,0 +1,38 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./consts"), exports);
+__exportStar(require("./context"), exports);
+__exportStar(require("./header"), exports);
+var header_1 = require("./header");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(header_1).default; } });
+__exportStar(require("./header.types"), exports);
+__exportStar(require("./headerAccount"), exports);
+__exportStar(require("./headerAccount.types"), exports);
+__exportStar(require("./headerContent"), exports);
+__exportStar(require("./headerCreateAccount"), exports);
+__exportStar(require("./headerDivider"), exports);
+__exportStar(require("./headerLinkItem"), exports);
+__exportStar(require("./headerLinksList"), exports);
+__exportStar(require("./headerLogo"), exports);
+__exportStar(require("./headerMobileContent"), exports);
+__exportStar(require("./headerMobileToggle"), exports);
+__exportStar(require("./headerNotifications"), exports);
+__exportStar(require("./headerServices"), exports);
+__exportStar(require("./headerSignIn"), exports);
+__exportStar(require("./helpers"), exports);
+__exportStar(require("./loggedInHeader"), exports);
+__exportStar(require("./loggedOutHeader"), exports);