@veracity/vui 0.3.0 → 0.3.2

package/header/header.d.ts

@@ -0,0 +1,34 @@
+import { VuiComponent } from '../core';
+import { HeaderProps } from './header.types';
+import HeaderContent from './headerContent';
+import HeaderCreateAccount from './headerCreateAccount';
+import HeaderDivider from './headerDivider';
+import HeaderLink from './headerLink';
+import HeaderLinks from './headerLinks';
+import HeaderLogo from './headerLogo';
+import HeaderMobileContent from './headerMobileContent';
+import HeaderMobileToggle from './headerMobileToggle';
+import HeaderNotifications from './headerNotifications';
+import HeaderProfile from './headerProfile';
+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, profile and other data. Controls max-width of the content.
+ * Exposes some props to the children via context.
+ */
+export declare const Header: VuiComponent<"header", HeaderProps> & {
+    Content: typeof HeaderContent;
+    CreateAccount: typeof HeaderCreateAccount;
+    Divider: typeof HeaderDivider;
+    Link: typeof HeaderLink;
+    Links: typeof HeaderLinks;
+    Logo: typeof HeaderLogo;
+    MobileContent: typeof HeaderMobileContent;
+    MobileToggle: typeof HeaderMobileToggle;
+    Notifications: typeof HeaderNotifications;
+    Profile: typeof HeaderProfile;
+    Services: typeof HeaderServices;
+    SignIn: typeof HeaderSignIn;
+};
+export default Header;

package/header/header.js

@@ -0,0 +1,118 @@
+"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 headerContent_1 = __importDefault(require("./headerContent"));
+var headerCreateAccount_1 = __importDefault(require("./headerCreateAccount"));
+var headerDivider_1 = __importDefault(require("./headerDivider"));
+var headerLink_1 = __importDefault(require("./headerLink"));
+var headerLinks_1 = __importDefault(require("./headerLinks"));
+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 headerProfile_1 = __importDefault(require("./headerProfile"));
+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\theight: 72px;\n\tposition: relative;\n"], ["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-bottom: 1px solid prussian.80;\n\tdisplay: flex;\n\theight: 72px;\n\tposition: relative;\n"
+    /**
+     * Branded Veracity Header with logo, links, services, profile and other data. Controls max-width of the content.
+     * Exposes some props to the children via context.
+     */
+])));
+/**
+ * Branded Veracity Header with logo, links, services, profile 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 _a = __read((0, react_1.useState)(false), 2), isMobileOpen = _a[0], setIsMobileOpen = _a[1];
+    var children = props.children, className = props.className, size = props.size, variant = props.variant, rest = __rest(props, ["children", "className", "size", "variant"]);
+    var styles = (0, core_1.useStyleConfig)('Header', props);
+    var isDesktop = (0, core_1.useUp)('lg');
+    var isMobile = (0, core_1.useDown)('lg');
+    var context = (0, react_1.useMemo)(function () { return ({ isDesktop: isDesktop, isMobile: isMobile, isMobileOpen: isMobileOpen, setIsMobileOpen: setIsMobileOpen, size: size, variant: variant }); }, [isDesktop, isMobile, isMobileOpen, setIsMobileOpen, size, 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), px: { xs: 2, lg: 5 }, ref: ref }, styles.container, rest), (0, utils_1.runIfFn)(children, context))));
+});
+exports.Header.displayName = 'Header';
+exports.Header.Content = headerContent_1.default;
+exports.Header.CreateAccount = headerCreateAccount_1.default;
+exports.Header.Divider = headerDivider_1.default;
+exports.Header.Link = headerLink_1.default;
+exports.Header.Links = headerLinks_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.Profile = headerProfile_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,84 @@
+import { Dispatch, 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 { AnyElement, RenderProps } from '../utils';
+import { HeaderProfileData } from './headerProfile.types';
+export declare type HeaderContext = {
+    isDesktop: boolean;
+    isMobile: boolean;
+    isMobileOpen: boolean;
+    setIsMobileOpen: Dispatch<SetStateAction<boolean>>;
+};
+/** Defines create account link URL. */
+export declare type HeaderCreateAccountData = {
+    url?: string;
+};
+export declare type HeaderCreateAccountProps = BoxProps & HeaderCreateAccountData;
+/** Defines link information. */
+export declare type HeaderLinkData = {
+    icon?: IconProp;
+    text?: string;
+    url?: string;
+};
+export declare type HeaderLinkProps = ListItemProps & HeaderLinkData;
+export declare type HeaderLinksProps = ListProps & {
+    /** Array of objects with data for each link. */
+    links?: HeaderLinkData[];
+};
+/** Defines src to load the logo from and link's URL. */
+export declare type HeaderLogoData = {
+    src?: string;
+    url?: string;
+};
+export declare type HeaderLogoProps = BoxProps & HeaderLogoData;
+/** Defines notifications count and icon link URL. */
+export declare type HeaderNotificationsData = {
+    count?: number;
+    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;
+};
+export declare type HeaderRenderProps = RenderProps<HeaderContext>;
+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?: HeaderLinkData[];
+};
+/** Defines URL of the sign in button. */
+export declare type HeaderSignInData = {
+    url?: string;
+};
+export declare type HeaderSignInProps = ButtonProps & HeaderSignInData;
+export declare type LoggedInHeaderProps = HeaderProps & {
+    /** Socket placing links in the middle. */
+    links?: HeaderLinkData[] | AnyElement;
+    /** Socket placing logo on the left side. */
+    logo?: HeaderLogoData | AnyElement;
+    /** Socket placing notifications icon on the right side. */
+    notifications?: HeaderNotificationsData | AnyElement;
+    /** Socket placing profile popover icon on the right side. */
+    profile?: HeaderProfileData | AnyElement;
+    /** Socket placing services menu icon on the right side. */
+    services?: HeaderLinkData[] | AnyElement;
+};
+export declare type LoggedOutHeaderProps = HeaderProps & {
+    /** Socket placing create account prompt on the right side. */
+    createAccount?: string | AnyElement;
+    /** Socket placing links in the middle. */
+    links?: HeaderLinkData[] | AnyElement;
+    /** Socket placing logo on the left side. */
+    logo?: HeaderLogoData | AnyElement;
+    /** Socket placing sign in button on the right side. */
+    signIn?: HeaderSignInData['url'] | AnyElement;
+};

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.useHeader)());
+    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;

package/header/headerCreateAccount.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.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 url = props.url, rest = __rest(props, ["url"]);
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeader)());
+    return (react_1.default.createElement(box_1.default, __assign({ className: "vui-headerCreateAccount", column: true, flexShrink: 0, ref: ref }, styles.createAccount, rest),
+        react_1.default.createElement(t_1.default, { size: "sm" }, "New to Veracity?"),
+        react_1.default.createElement(link_1.default, { fontWeight: "medium", href: url, isUnderlined: true, size: "sm" }, "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.useHeader)());
+    return (react_1.default.createElement(divider_1.default, __assign({ borderColor: "prussian.80", className: "vui-headerDivider", isVertical: true, mx: 1, ref: ref }, styles.divider, props)));
+});
+exports.HeaderDivider.displayName = 'HeaderDivider';
+exports.default = exports.HeaderDivider;

package/header/headerLink.d.ts

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

package/header/headerLink.js

@@ -0,0 +1,43 @@
+"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.HeaderLink = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var list_1 = __importDefault(require("../list"));
+var context_1 = require("./context");
+/** Individual link item of the Header. */
+exports.HeaderLink = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var url = props.url, rest = __rest(props, ["url"]);
+    var isMobile = ((_a = (0, context_1.useHeader)()) !== null && _a !== void 0 ? _a : {}).isMobile;
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeader)());
+    var screenStyles = isMobile ? {} : { display: 'inline-flex' };
+    return (react_1.default.createElement(list_1.default.Item, __assign({ className: "vui-headerLink", linkProps: { href: url }, ref: ref }, screenStyles, styles.link, rest)));
+});
+exports.HeaderLink.displayName = 'HeaderLink';
+exports.default = exports.HeaderLink;

package/header/headerLinks.d.ts

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

package/header/headerLinks.js

@@ -0,0 +1,41 @@
+"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.HeaderLinks = 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 headerLink_1 = __importDefault(require("./headerLink"));
+/** List of Header Links. */
+exports.HeaderLinks = (0, core_1.vui)(function (props, ref) {
+    var children = props.children, links = props.links, rest = __rest(props, ["children", "links"]);
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeader)());
+    return (react_1.default.createElement(list_1.default, __assign({ className: "vui-headerLinks", ref: ref }, styles.links, rest), children !== null && children !== void 0 ? children : links === null || links === void 0 ? void 0 : links.map(function (link, index) { return react_1.default.createElement(headerLink_1.default, __assign({ key: index }, link)); })));
+});
+exports.HeaderLinks.displayName = 'HeaderLinks';
+exports.default = exports.HeaderLinks;

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,48 @@
+"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 utils_1 = require("../utils");
+var context_1 = require("./context");
+var defaultLogo = core_1.cdnUrl + "/common/icons/logos/veracity-by-dnv.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.useHeader)());
+    var aliasedProps = (0, utils_1.filterUndefined)({
+        as: url ? 'a' : undefined,
+        href: url ? url : undefined
+    });
+    return (react_1.default.createElement(box_1.default, __assign({ className: "vui-headerLogo", maxH: 72, mr: 2, ref: ref }, styles.logo, aliasedProps, rest),
+        react_1.default.createElement(svg_1.default, { src: src })));
+});
+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,30 @@
+"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 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 isMobileOpen = ((_a = (0, context_1.useHeader)()) !== null && _a !== void 0 ? _a : {}).isMobileOpen;
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeader)());
+    return isMobileOpen ? (react_1.default.createElement(box_1.default, __assign({ bg: "white", className: "vui-headerMobileContent", column: true, position: "absolute", ref: ref, top: "100%", zIndex: "100" }, styles.mobileContent, props))) : null;
+});
+exports.HeaderMobileContent.displayName = 'HeaderMobileContent';
+exports.default = exports.HeaderMobileContent;

package/header/headerMobileToggle.d.ts

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

package/header/headerMobileToggle.js

@@ -0,0 +1,34 @@
+"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 core_1 = require("../core");
+var icon_1 = __importDefault(require("../icon"));
+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.useHeader)()) !== null && _a !== void 0 ? _a : {}, isMobileOpen = _b.isMobileOpen, setIsMobileOpen = _b.setIsMobileOpen;
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeader)());
+    var icon = isMobileOpen ? 'falTimes' : 'falBars';
+    function onClick() {
+        setIsMobileOpen(function (s) { return !s; });
+    }
+    return (react_1.default.createElement(icon_1.default, __assign({ className: "vui-headerMobileToggle", cursor: "pointer", name: icon, onClick: onClick, ref: ref, scale: 2 }, 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,52 @@
+"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 icon_1 = __importDefault(require("../icon"));
+var context_1 = require("./context");
+var Badge = core_1.styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tbackground-color: red.70;\n"], ["\n\tbackground-color: red.70;\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.useHeader)());
+    return (react_1.default.createElement(button_1.default, __assign({ as: "a", href: url, minW: 0, px: "7px", ref: ref }, styles.notifications, rest),
+        react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(icon_1.default, { name: "falBell" }),
+            count > 0 && react_1.default.createElement(Badge, null, count))));
+});
+exports.HeaderNotifications.displayName = 'HeaderNotifications';
+exports.default = exports.HeaderNotifications;
+var templateObject_1;