@veracity/vui 0.7.0 → 1.0.0

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

@@ -0,0 +1,4 @@
+/** Controls max-width of the content and centers itself horizontally. */
+export declare const HeaderContent: import("../core").VuiComponent<"div", import("../box").BoxProps>;
+export default HeaderContent;
+//# sourceMappingURL=headerContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"headerContent.d.ts","sourceRoot":"","sources":["../../../src/header/headerContent.tsx"],"names":[],"mappings":"AAQA,yEAAyE;AACzE,eAAO,MAAM,aAAa,kEAgBxB,CAAA;AAIF,eAAe,aAAa,CAAA"}

package/dist/cjs/header/headerContent.js

@@ -0,0 +1,30 @@
+"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.HeaderContent = void 0;
+const react_1 = __importDefault(require("react"));
+const box_1 = __importDefault(require("../box"));
+const core_1 = require("../core");
+const utils_1 = require("../utils");
+const context_1 = require("./context");
+/** Controls max-width of the content and centers itself horizontally. */
+exports.HeaderContent = (0, core_1.vui)((props, ref) => {
+    const { className } = props, rest = __rest(props, ["className"]);
+    const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
+    return (react_1.default.createElement(box_1.default, Object.assign({ centerV: true, className: (0, utils_1.cs)('vui-headerContent', className), h: 1, mx: "auto", ref: ref, w: 1 }, styles.content, rest)));
+});
+exports.HeaderContent.displayName = 'HeaderContent';
+exports.default = exports.HeaderContent;

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

@@ -0,0 +1,5 @@
+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;
+//# sourceMappingURL=headerCreateAccount.d.ts.map

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

@@ -0,0 +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;AAIF,eAAe,mBAAmB,CAAA"}

package/dist/cjs/header/headerCreateAccount.js

@@ -0,0 +1,37 @@
+"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.HeaderCreateAccount = void 0;
+const react_1 = __importDefault(require("react"));
+const box_1 = __importDefault(require("../box"));
+const core_1 = require("../core");
+const link_1 = __importDefault(require("../link"));
+const t_1 = __importDefault(require("../t"));
+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;
+    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 };
+    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")))));
+});
+exports.HeaderCreateAccount.displayName = 'HeaderCreateAccount';
+exports.default = exports.HeaderCreateAccount;

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

@@ -0,0 +1,5 @@
+import { DividerProps } from '../divider';
+/** Vertical line dividing some 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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"headerDivider.d.ts","sourceRoot":"","sources":["../../../src/header/headerDivider.tsx"],"names":[],"mappings":"AAGA,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAIlD,yDAAyD;AACzD,eAAO,MAAM,aAAa,oDAexB,CAAA;AAIF,eAAe,aAAa,CAAA"}

package/dist/cjs/header/headerDivider.js

@@ -0,0 +1,30 @@
+"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.HeaderDivider = void 0;
+const react_1 = __importDefault(require("react"));
+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. */
+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)());
+    return (react_1.default.createElement(divider_1.default, Object.assign({ borderColor: "prussian.80", className: (0, utils_1.cs)('vui-headerDivider', className), h: 40, isVertical: true, ref: ref }, styles.divider, rest)));
+});
+exports.HeaderDivider.displayName = 'HeaderDivider';
+exports.default = exports.HeaderDivider;

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

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

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

@@ -0,0 +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;AAIF,eAAe,cAAc,CAAA"}

package/dist/cjs/header/headerLinkItem.js

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

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

@@ -0,0 +1,5 @@
+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;
+//# sourceMappingURL=headerLogo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"headerLogo.d.ts","sourceRoot":"","sources":["../../../src/header/headerLogo.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAIhD,yFAAyF;AACzF,eAAO,MAAM,UAAU,wDAuBrB,CAAA;AAIF,eAAe,UAAU,CAAA"}

package/dist/cjs/header/headerLogo.js

@@ -0,0 +1,36 @@
+"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.HeaderLogo = void 0;
+const react_1 = __importDefault(require("react"));
+const box_1 = __importDefault(require("../box"));
+const core_1 = require("../core");
+const svg_1 = __importDefault(require("../svg"));
+const utils_1 = require("../utils");
+const context_1 = require("./context");
+const 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)((props, ref) => {
+    var _a;
+    const { children, className, src = defaultLogo, url } = props, rest = __rest(props, ["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;
+    const linkProps = logoUrl ? { as: 'a', href: logoUrl, outline: 'none', focusRing: 2 } : {};
+    return (react_1.default.createElement(box_1.default, Object.assign({ centerV: true, className: (0, utils_1.cs)('vui-headerLogo', className), flexShrink: 0, h: 40, mr: 2, ref: ref }, styles.container, linkProps, rest), children !== null && children !== void 0 ? children : react_1.default.createElement(svg_1.default, Object.assign({ "aria-label": "logo", h: "100%", src: src }, styles.svg))));
+});
+exports.HeaderLogo.displayName = 'HeaderLogo';
+exports.default = exports.HeaderLogo;

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

@@ -0,0 +1,5 @@
+import { HeaderMainLinksProps } from './header.types';
+/** List of Header Links. */
+export declare const HeaderMainLinks: import("../core").VuiComponent<"ul", HeaderMainLinksProps>;
+export default HeaderMainLinks;
+//# sourceMappingURL=headerMainLinks.d.ts.map

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

@@ -0,0 +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;AAIF,eAAe,eAAe,CAAA"}

package/dist/cjs/header/headerMainLinks.js

@@ -0,0 +1,34 @@
+"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.HeaderMainLinks = void 0;
+const react_1 = __importDefault(require("react"));
+const core_1 = require("../core");
+const list_1 = __importDefault(require("../list"));
+const utils_1 = require("../utils");
+const context_1 = require("./context");
+const headerLinkItem_1 = __importDefault(require("./headerLinkItem"));
+/** List of Header Links. */
+exports.HeaderMainLinks = (0, core_1.vui)((props, ref) => {
+    var _a;
+    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%' };
+    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.HeaderMainLinks.displayName = 'HeaderMainLinks';
+exports.default = exports.HeaderMainLinks;

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

@@ -0,0 +1,5 @@
+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;
+//# sourceMappingURL=headerMobileContent.d.ts.map

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

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

package/dist/cjs/header/headerMobileContent.js

@@ -0,0 +1,32 @@
+"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.HeaderMobileContent = void 0;
+const react_1 = __importDefault(require("react"));
+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. */
+exports.HeaderMobileContent = (0, core_1.vui)((props, ref) => {
+    var _a;
+    const { className } = props, rest = __rest(props, ["className"]);
+    const { isMobileOpen, mobileContentRef } = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {};
+    const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
+    return isMobileOpen ? (react_1.default.createElement(box_1.default, Object.assign({ bg: "white", className: (0, utils_1.cs)('vui-headerMobileContent', className), column: true, h: `calc(100vh - 100% - 1px)`, left: 0, overflowX: "hidden", overflowY: "auto", position: "absolute", ref: (0, utils_1.mergeRefs)(ref, mobileContentRef), right: 0, top: "calc(100% + 1px)", zIndex: "100" }, styles.mobileContent, rest))) : null;
+});
+exports.HeaderMobileContent.displayName = 'HeaderMobileContent';
+exports.default = exports.HeaderMobileContent;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"headerMobileToggle.d.ts","sourceRoot":"","sources":["../../../src/header/headerMobileToggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,WAAW,CAAA;AAMnD,yDAAyD;AACzD,eAAO,MAAM,kBAAkB,uDAoB7B,CAAA;AAIF,eAAe,kBAAkB,CAAA"}

package/dist/cjs/header/headerMobileToggle.js

@@ -0,0 +1,34 @@
+"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.HeaderMobileToggle = void 0;
+const react_1 = __importDefault(require("react"));
+const button_1 = require("../button");
+const core_1 = require("../core");
+const icon_1 = __importDefault(require("../icon"));
+const utils_1 = require("../utils");
+const context_1 = require("./context");
+/** Button that toggles display of the mobile content. */
+exports.HeaderMobileToggle = (0, core_1.vui)((props, ref) => {
+    var _a;
+    const { className } = props, rest = __rest(props, ["className"]);
+    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), colorScheme: "prussian", 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)));
+});
+exports.HeaderMobileToggle.displayName = 'HeaderMobileToggle';
+exports.default = exports.HeaderMobileToggle;

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

@@ -0,0 +1,5 @@
+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;
+//# sourceMappingURL=headerNotifications.d.ts.map

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

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

package/dist/cjs/header/headerNotifications.js

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

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

@@ -0,0 +1,8 @@
+import { HeaderServicesProps } from './header.types';
+/** Displays a list of services available to the user. */
+export declare function HeaderServices(props: HeaderServicesProps): JSX.Element;
+export declare namespace HeaderServices {
+    var displayName: string;
+}
+export default HeaderServices;
+//# sourceMappingURL=headerServices.d.ts.map

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

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

package/dist/cjs/header/headerServices.js

@@ -0,0 +1,45 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderServices = void 0;
+const react_1 = __importDefault(require("react"));
+const core_1 = require("../core");
+const list_1 = __importDefault(require("../list"));
+const menu_1 = __importDefault(require("../menu"));
+const context_1 = require("./context");
+const headerServicesMessage_1 = __importDefault(require("./headerServicesMessage"));
+/** Supporting internal component to avoid code duplication. */
+function ListContent({ links = [] }) {
+    const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).services;
+    return (react_1.default.createElement(react_1.default.Fragment, null, links.length > 0 ? (links.map(({ text, url }, index) => (react_1.default.createElement(menu_1.default.Item, Object.assign({ isTruncated: true, key: index, linkProps: { href: url }, text: text, title: text }, styles.item))))) : (react_1.default.createElement(headerServicesMessage_1.default, null))));
+}
+/** Displays a list of services available to the user. */
+function HeaderServices(props) {
+    const { buttonProps, links = [] } = props, rest = __rest(props, ["buttonProps", "links"]);
+    const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).services;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(core_1.RenderOnDesktop, null,
+            react_1.default.createElement(menu_1.default, Object.assign({ isLazy: false, offset: [0, 8], placement: "bottom-end", size: "lg" }, rest),
+                react_1.default.createElement(menu_1.default.Button, Object.assign({ colorScheme: "prussian", icon: "falTh", ml: 1, title: "My services" }, styles.button, buttonProps)),
+                react_1.default.createElement(menu_1.default.List, Object.assign({ heading: "My Services", maxH: 400, w: 320 }, styles.list),
+                    react_1.default.createElement(ListContent, { links: links })))),
+        react_1.default.createElement(core_1.RenderOnMobile, null,
+            react_1.default.createElement(list_1.default, Object.assign({ borderBottom: "1px solid grey.40", heading: "My Services" }, styles.list),
+                react_1.default.createElement(ListContent, { links: links })))));
+}
+exports.HeaderServices = HeaderServices;
+HeaderServices.displayName = 'HeaderServices';
+exports.default = HeaderServices;

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

@@ -0,0 +1,5 @@
+import { PProps } from '../p';
+/** Displays a message with link to Marketplace if user has no services available. */
+export declare const HeaderServicesMessage: import("../core").VuiComponent<"p", PProps>;
+export default HeaderServicesMessage;
+//# sourceMappingURL=headerServicesMessage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"headerServicesMessage.d.ts","sourceRoot":"","sources":["../../../src/header/headerServicesMessage.tsx"],"names":[],"mappings":"AAIA,OAAU,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIhC,qFAAqF;AACrF,eAAO,MAAM,qBAAqB,6CA0BhC,CAAA;AAIF,eAAe,qBAAqB,CAAA"}

package/dist/cjs/header/headerServicesMessage.js

@@ -0,0 +1,39 @@
+"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.HeaderServicesMessage = void 0;
+const react_1 = __importDefault(require("react"));
+const core_1 = require("../core");
+const link_1 = __importDefault(require("../link"));
+const p_1 = __importDefault(require("../p"));
+const utils_1 = require("../utils");
+const context_1 = require("./context");
+/** Displays a message with link to Marketplace if user has no services available. */
+exports.HeaderServicesMessage = (0, core_1.vui)((props, ref) => {
+    var _a;
+    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const { links } = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {};
+    const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
+    return (react_1.default.createElement(p_1.default, Object.assign({ className: (0, utils_1.cs)('vui-headerServicesMessage', className), mb: 2, ml: 2, ref: ref }, styles.servicesMessage, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
+        "No services available. ",
+        react_1.default.createElement("br", null),
+        "Explore more on the",
+        ' ',
+        react_1.default.createElement(link_1.default, { href: links === null || links === void 0 ? void 0 : links.marketplace, isUnderlined: true }, "marketplace"),
+        "."))));
+});
+exports.HeaderServicesMessage.displayName = 'HeaderServicesMessage';
+exports.default = exports.HeaderServicesMessage;

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

@@ -0,0 +1,5 @@
+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;
+//# sourceMappingURL=headerSignIn.d.ts.map

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

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

package/dist/cjs/header/headerSignIn.js

@@ -0,0 +1,32 @@
+"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.HeaderSignIn = void 0;
+const react_1 = __importDefault(require("react"));
+const button_1 = __importDefault(require("../button"));
+const core_1 = require("../core");
+const utils_1 = require("../utils");
+const context_1 = require("./context");
+/** Sign in button leading to Veracity login page. */
+exports.HeaderSignIn = (0, core_1.vui)((props, ref) => {
+    var _a;
+    const { children, className, url } = props, rest = __rest(props, ["children", "className", "url"]);
+    const { links } = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {};
+    const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
+    return (react_1.default.createElement(button_1.default, Object.assign({ as: "a", className: (0, utils_1.cs)('vui-headerSignIn', className), href: url !== null && url !== void 0 ? url : links.signIn, ref: ref }, styles.signIn, rest), children !== null && children !== void 0 ? children : 'Sign in'));
+});
+exports.HeaderSignIn.displayName = 'HeaderSignIn';
+exports.default = exports.HeaderSignIn;

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

@@ -0,0 +1,9 @@
+import { Environment } from '../utils';
+import { HeaderLinkData } from './header.types';
+import { HeaderAccountSectionData } from './headerAccount.types';
+/** Loads templates for Header links and enriches them with urls from LinksContext. */
+export declare function useHeaderLinks(env: Environment): {
+    accountSections: HeaderAccountSectionData[] | undefined;
+    mainLinks: HeaderLinkData[] | undefined;
+};
+//# sourceMappingURL=helpers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/header/helpers.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAY,MAAM,UAAU,CAAA;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAA;AAOhE,sFAAsF;AACtF,wBAAgB,cAAc,CAAC,GAAG,EAAE,WAAW;;;EA+B9C"}