@servicetitan/navigation 0.1.0

package/dist/components/header-navigation/header-navigation.d.ts

@@ -0,0 +1,15 @@
+import { FC, ReactElement, ReactNode } from 'react';
+import { HeaderNavigationComponentProps, HeaderNavigationLinkData } from '../../utils/navigation';
+export interface HeaderNavigationProps {
+    children?: ReactNode;
+    className?: string;
+    contentClassName?: string;
+    id?: string;
+    left?: ReactElement;
+    leftClassName?: string;
+    items?: HeaderNavigationLinkData[];
+    itemsOverflow?: HeaderNavigationLinkData[];
+    navigationComponent?: FC<HeaderNavigationComponentProps>;
+}
+export declare const HeaderNavigation: FC<HeaderNavigationProps>;
+//# sourceMappingURL=header-navigation.d.ts.map

package/dist/components/header-navigation/header-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,EAAE,EACF,YAAY,EACZ,SAAS,EAMZ,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,8BAA8B,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AA6FlG,MAAM,WAAW,qBAAqB;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACnC,aAAa,CAAC,EAAE,wBAAwB,EAAE,CAAC;IAC3C,mBAAmB,CAAC,EAAE,EAAE,CAAC,8BAA8B,CAAC,CAAC;CAC5D;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAqFtD,CAAC"}

package/dist/components/header-navigation/header-navigation.js

@@ -0,0 +1,72 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon, Popover, Tag } from '@servicetitan/design-system';
+import classNames from 'classnames';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { NavLink } from 'react-router-dom';
+import * as Styles from './header-navigation.module.less';
+function useForceUpdate() {
+    const [, setTick] = useState(0);
+    return useCallback(() => {
+        setTick(tick => tick + 1);
+    }, []);
+}
+const DefaultNavigationComponent = props => (_jsx(NavLink, Object.assign({}, props, { isActive: props.isActive && ((_, { pathname }) => props.isActive(pathname)) })));
+const HeaderNavigationLink = (_a) => {
+    var _b = _a.item, { iconComponent: IconComponent } = _b, item = __rest(_b, ["iconComponent"]), { navigationComponent: NavigationComponent = DefaultNavigationComponent } = _a;
+    return (_jsxs(NavigationComponent, Object.assign({ to: item.to, title: item.hint, className: classNames(Styles.link, item.className, {
+            [Styles.active]: item.isActive === true,
+        }), isActive: typeof item.isActive === 'function' ? item.isActive : undefined, activeClassName: Styles.active, "data-cy": `nav-item-${item.key}` }, { children: [IconComponent ? (_jsx("i", Object.assign({ className: Styles.icon }, { children: _jsx(IconComponent, {}) }))) : item.iconName ? (_jsx(Icon, { name: item.iconName, size: 20, className: Styles.icon })) : (_jsx("i", { className: classNames(Styles.icon, item.iconClassName) })), _jsx("ins", { children: item.title }), !!item.counter && (_jsx(Tag, Object.assign({ className: Styles.counter, compact: true, badge: true, color: "critical" }, { children: item.counter })))] }), item.key));
+};
+const HeaderNavigationOverflow = ({ items, navigationComponent }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (_jsx(Popover, Object.assign({ open: isOpen, trigger: _jsx(Icon, { name: "more_vert", size: "24px", className: "c-pointer", onClick: () => setIsOpen(true), color: "white" }), direction: "bl", width: "xs", onClickOutside: () => setIsOpen(false), wrapperClassName: "d-if-i align-items-center", popoverContentClassName: Styles.overflowPopover, portal: true }, { children: _jsx("div", Object.assign({ onClick: () => setIsOpen(false) }, { children: items.map(item => (_jsx(HeaderNavigationLink, { item: item, navigationComponent: navigationComponent }, item.key))) })) })));
+};
+export const HeaderNavigation = ({ children, className, contentClassName, id, items, itemsOverflow, left, leftClassName, navigationComponent, }) => {
+    const leftRef = useRef(null);
+    const rightRef = useRef(null);
+    const centerRef = useRef(null);
+    const navigationRef = useRef(null);
+    const forceUpdate = useForceUpdate();
+    const [isMinimized, setIsMinimized] = useState(false);
+    useEffect(() => {
+        const handleResize = () => {
+            setIsMinimized(false);
+            forceUpdate();
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [forceUpdate]);
+    useLayoutEffect(() => {
+        if (leftRef.current && rightRef.current && centerRef.current) {
+            const diff = leftRef.current.clientWidth - rightRef.current.clientWidth;
+            const margin = 8;
+            centerRef.current.style.marginLeft = `${margin + (diff < 0 ? -diff : 0)}px`;
+            centerRef.current.style.marginRight = `${margin + (diff > 0 ? diff : 0)}px`;
+        }
+    }, []);
+    const updateIsMinimized = () => {
+        if (centerRef.current && navigationRef.current) {
+            if (navigationRef.current.clientWidth >= centerRef.current.clientWidth) {
+                setIsMinimized(true);
+            }
+        }
+    };
+    useEffect(() => {
+        updateIsMinimized();
+    });
+    return (_jsxs("div", Object.assign({ className: classNames(Styles.header, className, {
+            [Styles.minimized]: isMinimized,
+        }), id: id }, { children: [_jsx("div", Object.assign({ className: leftClassName, ref: leftRef }, { children: left })), _jsx("div", Object.assign({ ref: centerRef, className: "d-if justify-content-center flex-grow-1 flex-basis-0" }, { children: _jsxs("div", Object.assign({ ref: navigationRef, className: "d-if" }, { children: [items === null || items === void 0 ? void 0 : items.map(item => (_jsx(HeaderNavigationLink, { item: item, navigationComponent: navigationComponent }, item.key))), !!(itemsOverflow === null || itemsOverflow === void 0 ? void 0 : itemsOverflow.length) && (_jsx(HeaderNavigationOverflow, { items: itemsOverflow, navigationComponent: navigationComponent }))] })) })), _jsx("div", Object.assign({ className: classNames('d-f flex-row justify-content-end', contentClassName), ref: rightRef }, { children: children }))] })));
+};
+//# sourceMappingURL=header-navigation.js.map

package/dist/components/header-navigation/header-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-navigation.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":"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"}

package/dist/components/header-navigation/header-navigation.module.less

@@ -0,0 +1,116 @@
+/* stylelint-disable no-descending-specificity */
+@import (reference) '@servicetitan/tokens/core/tokens.less';
+
+.link {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+
+    .icon {
+        display: inline-block;
+    }
+
+    & * {
+        text-decoration: none;
+        white-space: nowrap;
+    }
+}
+
+.header {
+    min-width: 800px;
+    height: 56px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    background-color: @color-neutral-300;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
+
+    .link {
+        padding: 18px 12px;
+        max-height: 56px;
+
+        color: @color-white;
+        font-family: @base-font-family;
+
+        position: relative;
+
+        ins {
+            margin-left: @spacing-half;
+        }
+
+        .counter {
+            color: @color-white;
+            position: absolute;
+            top: @spacing-1;
+            right: -@spacing-half;
+
+            font-size: @typescale-0;
+            font-weight: @font-weight-semibold;
+        }
+
+        &.active {
+            color: @color-blue-300;
+        }
+
+        &:hover:not(.active) {
+            color: @color-neutral-60;
+        }
+    }
+
+    &.minimized .link {
+        ins {
+            display: none;
+            color: @color-white;
+        }
+
+        &:hover:not(.active) {
+            ins {
+                display: inline-block;
+                margin-left: @spacing-0;
+                position: absolute;
+                z-index: @z-index-notification;
+                background-color: @color-neutral-300;
+                bottom: -@spacing-half;
+                left: 50%;
+                transform: translate3d(-50%, 100%, 0);
+                padding: @spacing-1;
+                border-radius: @default-border-radius;
+            }
+        }
+    }
+}
+
+.overflow-popover {
+    padding: @spacing-1 @spacing-0 !important;
+
+    .link {
+        display: block;
+        color: @color-black;
+        padding: @spacing-1 12px;
+        position: relative;
+
+        &.active {
+            color: @color-blue-500;
+        }
+
+        &:hover {
+            background-color: @color-blue-500;
+            color: @color-white;
+        }
+
+        ins {
+            margin-left: @spacing-1;
+        }
+
+        .counter {
+            color: @color-white;
+            position: absolute;
+            top: @spacing-1;
+            margin-left: @spacing-half;
+
+            font-size: @typescale-0;
+            font-weight: @font-weight-semibold;
+        }
+    }
+}

package/dist/components/header-navigation/header-navigation.stories.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+declare const _default: {
+    title: string;
+    component: FC<import("./header-navigation").HeaderNavigationProps>;
+    parameters: {};
+};
+export default _default;
+export declare const defaultNavigation: () => JSX.Element;
+export declare const withLogoTextAndOverflow: () => JSX.Element;
+//# sourceMappingURL=header-navigation.stories.d.ts.map

package/dist/components/header-navigation/header-navigation.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;;;;;;AAG3B,wBAIE;AAkCF,eAAO,MAAM,iBAAiB,mBAa7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBAoBnC,CAAC"}

package/dist/components/header-navigation/header-navigation.stories.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HeaderNavigation } from './header-navigation';
+import { LogoCompanyTitle } from '../logo/logo-company-title';
+import { LogoTitanText } from '../logo/logo-titan-text';
+export default {
+    title: 'Navigation/HeaderNavigation',
+    component: HeaderNavigation,
+    parameters: {},
+};
+const getItem = (key, data) => (Object.assign({ key, to: '/', title: key[0].toUpperCase() + key.substring(1), hint: key }, (data !== null && data !== void 0 ? data : {})));
+const items = {
+    dashboard: getItem('dashboard', { iconName: 'dashboard', isActive: true }),
+    calendar: getItem('calendar', { iconName: 'schedule' }),
+    calls: getItem('calls', { iconName: 'phone', isActive: true, counter: 12 }),
+    accounting: getItem('accounting', { iconName: 'assignment' }),
+    dispatch: getItem('dispatch', { iconName: 'location_disabled' }),
+    fleet: getItem('fleet', { iconName: 'fleet-pro', title: 'Fleet Pro' }),
+};
+const NavLinkMock = props => (_jsx("a", Object.assign({ href: "#", onClick: e => {
+        e.preventDefault();
+    }, className: props.className }, { children: props.children })));
+export const defaultNavigation = () => (_jsx(HeaderNavigation, { left: _jsx(LogoCompanyTitle, { className: "m-l-1", fill: "#fff" }), items: [
+        items.dashboard,
+        items.calendar,
+        items.calls,
+        items.accounting,
+        items.dispatch,
+        items.fleet,
+    ], navigationComponent: NavLinkMock }));
+export const withLogoTextAndOverflow = () => (_jsx(HeaderNavigation, { left: _jsx(LogoTitanText, { mantleFill: "#2270EE", title: "Commercial", description: "tenant tenant tenant tenant tenant" }), items: [
+        items.dashboard,
+        items.calendar,
+        items.calls,
+        items.accounting,
+        items.dispatch,
+        items.fleet,
+    ], itemsOverflow: [items.calls, items.accounting, items.dispatch], navigationComponent: NavLinkMock }));
+//# sourceMappingURL=header-navigation.stories.js.map

package/dist/components/header-navigation/header-navigation.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,eAAe;IACX,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,gBAAgB;IAC3B,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,OAAO,GAAG,CACZ,GAAW,EACX,IAAuC,EACf,EAAE,CAAC,iBAC3B,GAAG,EACH,EAAE,EAAE,GAAG,EACP,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAC9C,IAAI,EAAE,GAAG,IACN,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,EACjB,CAAC;AAEH,MAAM,KAAK,GAAG;IACV,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAC1E,QAAQ,EAAE,OAAO,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvD,KAAK,EAAE,OAAO,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;IAC3E,UAAU,EAAE,OAAO,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;IAC7D,QAAQ,EAAE,OAAO,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC;IAChE,KAAK,EAAE,OAAO,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC;CACzE,CAAC;AAEF,MAAM,WAAW,GAAuC,KAAK,CAAC,EAAE,CAAC,CAC7D,0BACI,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,CAAC,CAAC,EAAE;QACT,CAAC,CAAC,cAAc,EAAE,CAAC;IACvB,CAAC,EACD,SAAS,EAAE,KAAK,CAAC,SAAS,gBAEzB,KAAK,CAAC,QAAQ,IACf,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,CACnC,KAAC,gBAAgB,IACb,IAAI,EAAE,KAAC,gBAAgB,IAAC,SAAS,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAG,EACxD,KAAK,EAAE;QACH,KAAK,CAAC,SAAS;QACf,KAAK,CAAC,QAAQ;QACd,KAAK,CAAC,KAAK;QACX,KAAK,CAAC,UAAU;QAChB,KAAK,CAAC,QAAQ;QACd,KAAK,CAAC,KAAK;KACd,EACD,mBAAmB,EAAE,WAAW,GAClC,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE,CAAC,CACzC,KAAC,gBAAgB,IACb,IAAI,EACA,KAAC,aAAa,IACV,UAAU,EAAC,SAAS,EACpB,KAAK,EAAC,YAAY,EAClB,WAAW,EAAC,oCAAoC,GAClD,EAEN,KAAK,EAAE;QACH,KAAK,CAAC,SAAS;QACf,KAAK,CAAC,QAAQ;QACd,KAAK,CAAC,KAAK;QACX,KAAK,CAAC,UAAU;QAChB,KAAK,CAAC,QAAQ;QACd,KAAK,CAAC,KAAK;KACd,EACD,aAAa,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,EAC9D,mBAAmB,EAAE,WAAW,GAClC,CACL,CAAC"}

package/dist/components/logo/logo-company-title.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export declare const LogoCompanyTitle: FC<{
+    className?: string;
+    fill?: string;
+}>;
+//# sourceMappingURL=logo-company-title.d.ts.map

package/dist/components/logo/logo-company-title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo-company-title.d.ts","sourceRoot":"","sources":["../../../src/components/logo/logo-company-title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAqBtE,CAAC"}

package/dist/components/logo/logo-company-title.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* tslint:disable: max-line-length */
+export const LogoCompanyTitle = ({ className, fill, }) => {
+    return (_jsxs("svg", Object.assign({ className: className, width: "162", viewBox: "0 0 322 80", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M102.9 34.5c-1-.6-3.6-1.8-5.9-1.8-2 0-3.4.8-3.4 2.3 0 1.1.7 2 3.5 2.8.6.2 1.3.4 1.9.6 2.5.8 4.3 1.9 5.4 3.3 1.1 1.4 1.7 3.2 1.7 5.4 0 6.3-4.4 9.7-11.5 9.7-3.9 0-7.3-1.3-10-3.3l2.6-6.1c1.1 1 4.5 3 7.5 3 2.3 0 3.6-1.1 3.6-2.6 0-1.7-1.1-2.4-4-3.4-1-.3-2.5-.8-3.5-1.2-2.8-1.1-5-3.6-5-7.9 0-5.2 4.3-8.9 10.7-8.9 3.6 0 7 1.1 8.6 2.2l-2.2 5.9zm11.4 12.9c0 3 1.9 4.5 4.1 4.5 1.5 0 2.6-.6 3.3-1.9h6.3c-.8 3.7-4.2 6.8-9.7 6.8-7.4 0-11.2-4.6-11.2-10.7 0-6.2 4.5-10.5 10.8-10.5 6.8 0 10.6 4 10.6 10v1.8h-14.2zm7.8-4c-.2-1-.6-3.2-3.8-3.2-2.8 0-3.5 2.2-3.7 3.2h7.5zm79.1 4c0 3 1.9 4.5 4.1 4.5 1.5 0 2.6-.6 3.3-1.9h6.3c-.8 3.7-4.2 6.8-9.7 6.8-7.4 0-11.2-4.6-11.2-10.7 0-6.2 4.5-10.5 10.8-10.5 6.8 0 10.6 4 10.6 10v1.8h-14.2zm7.7-4c-.2-1-.6-3.2-3.8-3.2-2.8 0-3.5 2.2-3.7 3.2h7.5zm-78.4-7h6.8v3.1h.2c1.6-2.8 2.9-3.6 5.1-3.6 1 0 1.8.4 2 .4v6.4c-.7-.4-1.5-.7-2.6-.7-2.4 0-4.5 2.2-4.5 5.9v8.2h-7V36.4z", fill: fill }), _jsx("path", { d: "M150.4 36.4l4.7 10.1 4.8-10.1h7.8l-10.3 19.8h-4.7l-10.2-19.8h7.9zm17-6.7c0-.5.1-1 .3-1.5.2-.5.5-.9.8-1.3.4-.4.8-.6 1.3-.8.5-.2 1-.3 1.5-.3s1 .1 1.5.3c.5.2.9.5 1.3.8.4.4.6.8.8 1.3.2.5.3 1 .3 1.5s-.1 1-.3 1.5c-.2.5-.5.9-.8 1.3-.4.4-.8.6-1.3.8-.5.2-1 .3-1.5.3s-1-.1-1.5-.3c-.5-.2-.9-.5-1.3-.8s-.6-.8-.8-1.3c-.2-.5-.3-1-.3-1.5zm.5 6.7h7v19.8h-7zm25 6.4c-1.2-.8-2.8-1.2-4.1-1.2-2.8 0-4.8 1.9-4.8 4.8 0 2.8 2 4.7 4.8 4.7 1.3 0 2.9-.4 4.1-1.4v5.9c-.7.5-2.6 1.1-4.9 1.1-6.8 0-11.2-4-11.2-10.4s4.5-10.6 11.4-10.6c1.7 0 3.3.4 4.7 1.1v6zm36.2-9.3v22.7h-7.6V33.5h-6.2v-6.4h20v6.4h-6.2zm7.1-3.8c0-.5.1-1 .3-1.5.2-.5.5-.9.8-1.3.4-.4.8-.6 1.3-.8.5-.2 1-.3 1.5-.3s1 .1 1.5.3c.5.2.9.5 1.3.8.4.4.6.8.8 1.3.2.5.3 1 .3 1.5s-.1 1-.3 1.5c-.2.5-.5.9-.8 1.3-.4.4-.8.6-1.3.8-.5.2-1 .3-1.5.3s-1-.1-1.5-.3c-.5-.2-.9-.5-1.3-.8s-.6-.8-.8-1.3c-.2-.5-.3-1-.3-1.5zm.5 6.7h7v19.8h-7zm18.7 5.8v14h-7v-14h-2.7v-5.8h2.7v-5.9h7v5.9h3.5v5.8h-3.5zm29.1-5.8h7V40c1-1.8 3.4-4 6.3-4 1.4 0 2.6.2 3.6.7 1 .5 1.8 1.1 2.5 1.9.6.7 1 1.4 1.2 2.2.2.8.3 1.8.3 2.8v12.6h-7v-10c0-1-.1-1.8-.2-2.4-.1-.6-.4-1.1-.8-1.4-.3-.3-.7-.5-1-.7-.4-.1-.8-.2-1.2-.2-1.2 0-3.7 1.2-3.7 4.5v10.1h-7V36.4zm25.4-3.5c.5 0 1.1.1 1.6.4.5.3.9.7 1.2 1.2.3.5.4 1.1.4 1.6 0 .6-.1 1.1-.4 1.6s-.7.9-1.2 1.2-1.1.4-1.6.4-1.1-.1-1.6-.4-.9-.7-1.2-1.2c-.3-.5-.4-1.1-.4-1.6 0-.6.1-1.1.4-1.6s.7-.9 1.2-1.2c.5-.2 1-.4 1.6-.4zm0 .6c-.5 0-.9.1-1.3.4-.4.2-.8.6-1 1-.2.4-.4.9-.4 1.4 0 .5.1.9.4 1.3s.6.8 1 1 .9.4 1.3.4.9-.1 1.3-.4.8-.6 1-1 .4-.9.4-1.3c0-.5-.1-.9-.4-1.4-.2-.4-.6-.8-1-1-.4-.3-.9-.4-1.3-.4zm-1.5 4.5v-3.5h1.2c.4 0 .7 0 .9.1s.3.2.4.3c.1.2.2.3.2.5 0 .3-.1.5-.3.7-.2.2-.4.3-.7.3.1.1.2.1.3.2.1.1.3.4.5.7l.4.7h-.7l-.3-.6c-.2-.4-.4-.7-.6-.8-.1-.1-.3-.1-.5-.1h-.2V38h-.6zm.6-2h.7c.3 0 .6 0 .7-.1.1-.1.2-.2.2-.4 0-.1 0-.2-.1-.3l-.2-.2c-.1 0-.3-.1-.6-.1h-.7V36zm-34.3.4h7v19.8h-7v-2.4c-1.5 1.9-3.3 2.9-5.8 2.9-5.7 0-9.9-4.4-9.9-10.5 0-6 4.1-10.3 9.8-10.3 2.5 0 4.3 1 5.9 2.7v-2.2zm-8.6 9.8c0 2.6 1.8 4.6 4.4 4.6 2.9 0 4.5-2.1 4.5-4.5 0-2.3-1.6-4.5-4.5-4.5-2.6 0-4.4 1.8-4.4 4.4zM18.3 60s2.9 1.3 2.9 2.6c0 0-.2 1-1.2 1s-2.3-1.7-2.3-2.6c0-.9.6-1 .6-1zm-3.4-15.2c0-.1-.1-.1-.1-.1h-.2c-1 .4-1.6 1.4-1.5 2.5 0 5.5 14.4 6.1 22.3 15.9.8 1.1 2.1 1.7 3.5 1.7 1.8 0 3.5-.1 5.1-.4.2 0 .3-.2.4-.3.1-.2.1-.4-.1-.5-9.5-14-27.7-10.8-29.4-18.8zm56.2-19c-.6-1.2-1.5-2.1-3.1-2.5-1.6-.4-3.1-.2-4.1.7l-3.3-1.1c-.3-.7-.6-1.5-.9-2.2-.2-.5-.6-1-1.1-1.3-2.2-1.2-8-4.2-10.2-1.2 0 0-.1.1-.3.4l-.7-.2c-.4-1.4-1.6-2.4-3.3-2.8-1-.3-2-.2-2.9.1-.6.2-.6.9 0 1.2l2.6.9c.6.2.9.9.7 1.5-.2.6-.8.9-1.4.7 0 0-1.7-.5-2.8-.9-.6-.2-1.2.4-1 1 .4 1.3 1.6 2.4 3.3 2.8 1.4.4 2.8.1 3.7-.6l.6.2c0 1.5 1.1 3.2 2.2 3.8 1.6.9 3 .1 4.7-.7 0 0 4.1 3.3 2.2 12.8-5.3.6-7.2 2.5-9.1 4.4-1.2-.5-4.8-.7-6.8-.3.5-.6 1.4-1.2 2.6-1.7.5-.2.8-.7.8-1.2 0 0 2.4-.8 2.4-1.7s-3-.8-4.2-7.3c-.2-.8-.4-1.4-1.6-1.9 0 0-.3-.7.1-1.4.5-.7.7-1.1.6-1.7-.1-.6-1-1.1-1-1.1v-1s-2.4-1.8-2.4-4.4 3.3-5.7 4.3-6.6c.1-.1.1-.1.1-.2s-.1-.1-.1-.2c-2.1-1.4-4.5-2.1-7-2-14.1 0-17.3 12.7-20.3 19-.1.1-.1.3 0 .4 3 6.1 7.8 5.6 8.1 10.7.2 4.1-.7 4.2-1.7 4.1-.6-.1-1.5-.6-2.1-1-.1-.1-.2 0-.3 0-.1.1-.1.2-.1.2.4 1.1 1.4 3.4 4.5 3.4 1.6 0 2-1.5 2-2.8v-4.6c0-.5-.1-.9-.4-1.2-1.1-.9-3.3-3.2-3.3-5.2 0-.8.6-1.3 1.2-1.3 1.2 0 2.4 1.9 3.3 4.2.2.6.5.9.8 1.1h.1s.1-.1 0-.1c-.4-1.4-.5-2.8-.5-3.5 0-.3-.1-.5-.3-.7-.9-.8-3.4-3.3-3.4-6.9 0-5 7.8-4.5 9.4-4.4.5 1.7 1.5 2.4 2.1 2.7-2.4.9-7.7 2.6-7.7 5.7 0 3.3 5.3 3 5.3 3s-.8 6.5 5.2 8.5c0 0-.9 1-4.2 1-3 0-4.5-1.4-5.2-3 0-.1-.1-.1-.2-.1s-.1 0-.2.1c-.2.4-.3 1.2.3 2.1.9 1.5 2 2.3 2 4.2 0 1.4-1.2 2.2-1.7 2.5 0 0-.1.1 0 .1 0 0 0 .1.1.1 1.2.3 6.6 1.7 10.2 3.4h.1c.4-.3 3.5-2.3 3.7-5.1 0 0 .2-1.8-2.4-2.1 0 0 1.1-.5 3.2-.5 2 0 4.3 1.7.3 10.1v.1c.6.4 5.2 3.4 8.2 6.3.1.1.2.1.3.1.1 0 .2-.1.2-.1.4-.5 1.1-1.9 1.7-5.2 0-.3.3-.6.6-.7 1.8-.5 7.8-2.5 10.4-6.2 3.1-4.3 4.2-4.8 4.2-4.8s2-1.1 1.2-4.2c-.4-1.6-2.8-5.8-5.1-10 .5.4 1.2.7 1.9.9 1.4.4 2.8.1 3.8-.5.2-.1.3-.4.3-.7 0-.3-.2-.5-.4-.6l-2.6-.9c-.6-.2-1-.9-.7-1.6.2-.6.9-1 1.5-.8l2.3.8c.2.1.5 0 .7-.2 0 .5.1.2 0-.1zm-27.6-3.2c-2.2 0-3.2-1.9-3.2-1.9s2.6 2.5 6.1.5c0-.1-.6 1.4-2.9 1.4zm-2.6 9.7s.9 3.9 2.7 5.3c0 0-.1.4-.6.4s-1.6-.9-2-3c-.6-2.1-.1-2.7-.1-2.7zm-7.1-12c-.1 0-.2-.1-.2-.2-.4-2.9.9-6.4.9-6.4s-3 2.5-2.9 6.4c-2.6-.1-6.4.2-8.6 2.1-3.1 2.7-3.6 7.8-3.7 9.1 0 .1 0 .1-.1.2H19c-.7-.5-2.5-1.9-1.2-5.4 1.5-4.4 6.3-13.5 15.9-14.1 0 0 2.9-.1 4.9.9.1 0 .1.1.1.2s0 .1-.1.2c-.8.7-3.4 3-4.3 6.8 0 .1-.1.2-.2.2h-.3zm-.9 11.4c-3.6.7-4.9-.5-4.9-1.4 0-2.9 8.1-5.1 10.4-5.1.5.7-.3.6-.7 1.7-.3 1.1-1.1 1.4-2.3 1.6-1.2.2-2.3.7-3.2 1.5-.7.7 0 1 1.5.6 1.4-.4 1.6.2 2.2 0 .6-.2.1-.9.3-1.1.4-.2 1.2.3 1.2.3l2.1 1.3-2.5 1.3c-.2.1-.4.2-.4.6 0 .5 1.3.3 1.7.3.4 0 .5.7.5.7-.7.8-2.4.8-2.4.8.4.8 2.6.7 3 .7.4 0 .5.7.7 1.7.2 1 1.7 1.5 1.7 1.5.5 1.5-1.4 2-2.6 2-7-.1-6.3-9-6.3-9zM57.8 24l5 1.6s.9 1.8-.9 1.2c-1.9-.5-3.7-1.1-3.7-1.1s-1-.6-.4-1.7zm-4.7.2c-1.1-.1-.3-2-1.1-2.1-.3 0-.4 2.1-.8 1.8-.7-.6-.2-2-.1-2.6.1-.6.4-1.4-.3-.9s-1 1.5-1.2 2.3c-.2.8.2 1.2.5 2.2.3 1-.3.6-.3.6-3.1-1.9-.8-5.8-.8-5.8 1.3-2.3 3.3-1.6 3.3-1.6.4.1.5.4.5.9s.1.7.7.8c.6.1.8.8.8 2 0 1-.7 2.4-1.2 2.4zm2.5 0s-.8-.2-.5-1.3c.1-.4.2-.4.2-1s.2-1.3.6-1.5c0 0 .8 0 .8 2.2 0 .8-1.1 1.6-1.1 1.6zm0 19.2s-2 3.9-4.7 3.9c-1.1 0-1.9-.8-1.9-1.9 0-1.1 1.4-5.1 7.2-5.1 1.4 0 2.5.3 2.5 1.1s-1.4 2.3-3.1 2zM66 39.1s-.3 2.3-3.1 2.3c-2.7 0-5.2-4-6.1-13 .7 1.1 1.4 2.1 1.9 3.3 0-1.3.6-3.4-2.2-5.6 0 0 7.4 1.6 7.6 9.3 0 1.3-.8 2.7-1.3 3.2 0 0-.3.3-.1.7.2.4.7.3 1.4-.1.8-.5 1.9-1.3 1.9-.1zm.7-9.3s-1.9.5-3.9-1.6c0 0 .8.1 1-1 0 0 1.1 2.2 2.9 2.6zM18 54.4c3.7 2.2 11.9 4.7 13.6 9.3 0 0 .6 1-2.6 1-2.4 0-3.1-.6-4.8-2.7-2.5-3.1-7.6-4.9-7.6-7.2 0 0 0-1.2 1.4-.4z", fill: fill })] })));
+};
+//# sourceMappingURL=logo-company-title.js.map

package/dist/components/logo/logo-company-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo-company-title.js","sourceRoot":"","sources":["../../../src/components/logo/logo-company-title.tsx"],"names":[],"mappings":";AAEA,qCAAqC;AACrC,MAAM,CAAC,MAAM,gBAAgB,GAA8C,CAAC,EACxE,SAAS,EACT,IAAI,GACP,EAAE,EAAE;IACD,OAAO,CACH,6BACI,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,KAAK,EACX,OAAO,EAAC,YAAY,EACpB,KAAK,EAAC,4BAA4B,iBAElC,eACI,CAAC,EAAC,m3BAAm3B,EACr3B,IAAI,EAAE,IAAI,GACZ,EACF,eACI,CAAC,EAAC,22KAA22K,EAC72K,IAAI,EAAE,IAAI,GACZ,KACA,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/logo/logo-titan-text.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+export interface LogoTitanTextProps {
+    mantleFill?: string;
+    className?: string;
+    title: string;
+    description: string;
+}
+export declare const LogoTitanText: FC<LogoTitanTextProps>;
+//# sourceMappingURL=logo-titan-text.d.ts.map

package/dist/components/logo/logo-titan-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo-titan-text.d.ts","sourceRoot":"","sources":["../../../src/components/logo/logo-titan-text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,MAAM,WAAW,kBAAkB;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAsBhD,CAAC"}

package/dist/components/logo/logo-titan-text.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { LogoTitan } from './logo-titan';
+import * as Styles from './logo-titan-text.module.less';
+export const LogoTitanText = ({ className, description, mantleFill, title, }) => (_jsxs("div", Object.assign({ className: classNames('d-f', Styles.container, className) }, { children: [_jsx("div", Object.assign({ className: classNames('bg-white d-if justify-content-center align-items-center', Styles.logoWrapper) }, { children: _jsx(LogoTitan, { width: 40, height: 40, mantleFill: mantleFill }) })), _jsxs("div", Object.assign({ className: "d-if p-l-1 c-white flex-column justify-content-center align-items-start" }, { children: [_jsx("span", Object.assign({ className: classNames(Styles.logoTextTitle, 'ff-display') }, { children: title })), _jsx("span", Object.assign({ className: classNames(Styles.logoTextDescription, 'fs-1 t-truncate m-b-1') }, { children: description }))] }))] })));
+//# sourceMappingURL=logo-titan-text.js.map

package/dist/components/logo/logo-titan-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo-titan-text.js","sourceRoot":"","sources":["../../../src/components/logo/logo-titan-text.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,MAAM,MAAM,+BAA+B,CAAC;AASxD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EAClD,SAAS,EACT,WAAW,EACX,UAAU,EACV,KAAK,GACR,EAAE,EAAE,CAAC,CACF,6BAAK,SAAS,EAAE,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,iBAC1D,4BACI,SAAS,EAAE,UAAU,CACjB,yDAAyD,EACzD,MAAM,CAAC,WAAW,CACrB,gBAED,KAAC,SAAS,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,GAAI,IAC1D,EACN,6BAAK,SAAS,EAAC,yEAAyE,iBACpF,6BAAM,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,aAAa,EAAE,YAAY,CAAC,gBAAG,KAAK,IAAQ,EAC/E,6BAAM,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,gBAC3E,WAAW,IACT,KACL,KACJ,CACT,CAAC"}

package/dist/components/logo/logo-titan-text.module.less

@@ -0,0 +1,25 @@
+@import (reference) '@servicetitan/tokens/core/tokens.less';
+
+.container {
+    height: 56px;
+    max-width: 200px;
+
+    .logo-wrapper {
+        height: 56px;
+        width: 56px;
+
+        svg {
+            fill: @color-black;
+        }
+    }
+
+    .logo-text-title {
+        font-weight: @font-weight-semibold;
+        font-size: 19px;
+        max-width: 140px;
+    }
+
+    .logo-text-description {
+        max-width: 140px;
+    }
+}

package/dist/components/logo/logo-titan.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+export interface LogoTitanProps {
+    height?: number;
+    width?: number;
+    fill?: string;
+    mantleFill?: string;
+}
+export declare const LogoTitan: FC<LogoTitanProps>;
+//# sourceMappingURL=logo-titan.d.ts.map

package/dist/components/logo/logo-titan.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo-titan.d.ts","sourceRoot":"","sources":["../../../src/components/logo/logo-titan.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,MAAM,WAAW,cAAc;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAGD,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAgDxC,CAAC"}

package/dist/components/logo/logo-titan.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* tslint:disable: max-line-length */
+export const LogoTitan = (props) => {
+    var _a, _b, _c, _d;
+    const dimensions = {
+        width: (_a = props.width) !== null && _a !== void 0 ? _a : 116,
+        height: (_b = props.height) !== null && _b !== void 0 ? _b : 106,
+    };
+    const fill = (_c = props.fill) !== null && _c !== void 0 ? _c : '#3A3A3A';
+    const mantleFill = (_d = props.mantleFill) !== null && _d !== void 0 ? _d : fill;
+    return (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink" }, dimensions, { viewBox: "0 0 116 106" }, { children: [_jsx("defs", { children: _jsx("path", { id: "a", d: "M0 .12h63.625V40H0z" }) }), _jsxs("g", Object.assign({ fill: "none", fillRule: "evenodd" }, { children: [_jsx("path", { fill: mantleFill, d: "M10.33 96S17 98.545 17 101.089c0 0-.403 1.911-2.671 1.911C12.066 103 9 99.581 9 97.908 9 96.236 10.33 96 10.33 96" }), _jsxs("g", Object.assign({ transform: "translate(0 66)" }, { children: [_jsx("mask", Object.assign({ id: "b", fill: "#fff" }, { children: _jsx("use", { xlinkHref: "#a" }) })), _jsx("path", { fill: mantleFill, d: "M3.733.453A.416.416 0 0 0 3.51.167a.403.403 0 0 0-.36-.01C1.968.677 0 2.1 0 5.058 0 15.962 29.34 17.19 45.224 36.706a8.92 8.92 0 0 0 7.085 3.293c3.607-.068 7.2-.258 10.388-.773a1.1 1.1 0 0 0 .84-.663c.15-.352.105-.757-.112-1.07C44.077 9.88 7.247 16.268 3.733.453", mask: "url(#b)" })] })), _jsx("path", { fill: fill, d: "M45 32.862c-1.712-1.879-6.568-.445-9.176 1.978-2.68 2.49-1.615 4.16-1.615 4.16 2.177-3.367 5.588-4.741 7.514-5.01 2.36-.328 3.277-1.128 3.277-1.128" }), _jsx("path", { fill: fill, d: "M105.301 37.812s-3.795.958-7.721-3.088c0 0 1.52.174 1.913-2.045 0 0 2.14 4.393 5.808 5.133m-1.397 18.16s-.596 4.407-6.07 4.407c-5.473 0-10.251-7.73-12.135-25.417 1.354 2.102 2.738 4.128 3.767 6.507.003-2.493 1.17-6.633-4.396-10.887 0 0 14.727 3.053 15.077 18.144 0 2.603-1.53 5.282-2.512 6.262 0 0-.674.577-.256 1.424.415.842 1.441.641 2.828-.29 1.389-.933 3.697-2.53 3.697-.15M83.19 64.374s-3.986 7.51-9.403 7.51c-2.21 0-3.79-1.577-3.79-3.756 0-2.182 2.681-9.984 14.331-9.984 2.783 0 4.963.508 4.963 2.184 0 1.677-2.644 4.559-6.1 4.046m0-37.55s-1.54-.301-1.045-2.59c.241-.777.415-.764.415-1.948s.311-2.563 1.255-2.969c0 0 1.618.003 1.618 4.222 0 1.83-2.244 3.286-2.244 3.286m-5.027 0c-2.25-.238-.649-3.865-2.267-4.086-.62-.086-.77 4.103-1.503 3.464-1.449-1.27-.378-3.862-.226-5.07.151-1.214.743-2.727-.567-1.816-1.31.911-2.008 2.83-2.455 4.467-.445 1.634.447 2.412 1.056 4.303.609 1.895-.522 1.243-.522 1.243-6.098-3.642-1.704-11.315-1.704-11.315 2.644-4.504 6.597-3.16 6.597-3.16.77.275.962.723.962 1.68s.259 1.262 1.394 1.53c1.136.27 1.673 1.658 1.673 3.91 0 2.252-1.434 4.956-2.438 4.85m9.368-.414l10.035 3.026s1.842 3.414-1.869 2.414c-3.712-1.003-7.336-2.134-7.336-2.134s-1.965-1-.83-3.306M38.182 41.47c-7.117 1.26-9.637-.916-9.637-2.753 0-5.601 16.175-9.942 20.728-10.011.917 1.382-.696 1.144-1.357 3.229-.658 2.082-2.269 2.743-4.622 3.028-2.356.285-4.826 1.5-6.38 2.924-1.44 1.322 0 1.93 2.938 1.087 2.873-.824 3.223.406 4.399-.03 1.173-.435.129-1.844.628-2.104.756-.394 2.327.673 2.327.673l4.092 2.595s-4.597 2.328-4.92 2.506c-.323.178-.872.483-.872 1.11 0 .99 2.547.628 3.42.628.874 0 1.008 1.424 1.008 1.424-1.337 1.538-4.818 1.55-4.818 1.55.775 1.637 5.156 1.372 6.043 1.401.882.033.974 1.273 1.422 3.296.45 2.028 3.287 2.89 3.287 2.89.92 3-2.706 3.872-5.106 3.872-14.063 0-12.58-17.315-12.58-17.315m1.6-22.275a.437.437 0 0 1-.385-.373C38.64 13.21 41.11 6.368 41.11 6.368s-5.997 4.821-5.763 12.524c-5.09-.126-12.575.424-16.988 4.182-6.188 5.265-7.204 15.201-7.366 17.81a.419.419 0 0 1-.631.33c-1.459-.876-4.898-3.776-2.425-10.632C11.023 22.032 20.546 4.298 39.539 3.1c0 0 5.813-.243 9.737 1.835a.432.432 0 0 1 .23.341.438.438 0 0 1-.163.38c-1.628 1.29-6.688 5.803-8.502 13.28a.44.44 0 0 1-.48.33c-.15-.022-.345-.044-.578-.072m14.12 23.535s1.754 7.649 5.283 10.355c0 0-.132.773-1.245.773-1.11 0-3.208-1.773-4.038-5.906-.83-4.135 0-5.222 0-5.222m5.283-19.013c-4.453 0-6.419-3.771-6.419-3.771s5.107 4.816 12.204.896c0 0-1.33 2.875-5.785 2.875m54.718 6.38c-1.125-2.282-2.882-4.117-6.24-4.94-3.265-.801-6.145-.39-8.12 1.328l-6.541-2.214c-.741-1.6-1.357-3.06-1.8-4.32a4.647 4.647 0 0 0-2.1-2.509c-4.279-2.431-15.872-8.208-20.362-2.305 0 0-.236.263-.554.733l-1.402-.475c-.725-2.514-3.116-4.442-6.431-5.255-2.04-.5-4.048-.373-5.713.238-1.21.446-1.268 1.857-.05 2.283l5.216 1.822a2.261 2.261 0 0 1 1.394 2.885l-.007.017a2.273 2.273 0 0 1-2.895 1.39s-3.323-.981-5.651-1.672c-1.233-.366-2.359.78-1.988 2.003.748 2.491 3.208 4.697 6.496 5.502 2.79.681 5.524.196 7.4-1.104l1.228.413c.092 2.83 2.284 6.21 4.336 7.426 3.144 1.86 6.026.206 9.3-1.387 0 0 8.195 6.527 4.395 25.033-10.492 1.1-14.289 4.86-18.096 8.657-2.386-.944-9.597-1.407-13.437-.523 1.089-1.084 2.893-2.364 5.107-3.219a2.601 2.601 0 0 0 1.668-2.424s4.803-1.53 4.803-3.29c0-1.758-5.931-1.578-8.37-14.22-.394-1.469-.842-2.7-3.108-3.757 0 0-.631-1.324.283-2.773.917-1.448 1.588-2.12 1.345-3.268-.241-1.15-1.939-2.095-1.939-2.095v-1.924s-4.856-3.526-4.856-8.572c0-5.046 6.583-11.11 8.378-12.868a.452.452 0 0 0 .134-.394.492.492 0 0 0-.241-.339C53.17 2.545 48.577 0 41.515 0 13.618 0 7.089 24.934 1.11 37.047c-.131.27-.154.582-.02.85C7.06 49.753 16.697 48.79 17.223 58.734c.423 7.955-1.443 8.131-3.302 7.963-1.22-.112-3.007-1.196-4.093-1.932a.423.423 0 0 0-.492.013c-.144.109-.201.297-.144.468.728 2.169 2.877 6.638 9.04 6.638 3.134 0 4.13-2.833 4.13-5.442v-8.99c0-.887-.293-1.727-.969-2.304-2.12-1.817-6.637-6.182-6.637-10.057 0-1.654 1.106-2.514 2.395-2.514 2.426 0 4.77 3.628 6.59 8.204.423 1.07 1.032 1.827 1.589 2.196a.26.26 0 0 0 .288-.005.25.25 0 0 0 .094-.268c-.75-2.659-.999-5.432-1.078-6.799a1.997 1.997 0 0 0-.696-1.394c-1.8-1.53-6.667-6.339-6.667-13.524 0-9.681 15.469-8.872 18.59-8.607.927 3.226 2.866 4.625 4.158 5.215-4.677 1.718-15.241 5.17-15.241 11.127 0 6.388 10.586 5.923 10.586 5.923s-1.68 12.754 10.244 16.6c0 0-1.864 1.876-8.268 1.876-5.977 0-8.894-2.659-10.316-5.796a.36.36 0 0 0-.664.015c-.325.812-.583 2.285.548 4.127 1.757 2.855 4.023 4.494 4.023 8.124 0 2.684-2.416 4.368-3.407 4.945a.178.178 0 0 0-.09.183.18.18 0 0 0 .14.151c2.345.567 13.031 3.241 20.225 6.641.058.03.125.025.18-.007.805-.506 7.027-4.556 7.382-9.897 0 0 .473-3.492-4.76-4.123 0 0 2.263-.871 6.36-.871 4.084 0 8.542 3.3.515 19.744a.183.183 0 0 0 .065.235c1.232.775 10.367 6.579 16.21 12.227a.645.645 0 0 0 .964-.077c.755-.993 2.214-3.657 3.29-10.216a1.59 1.59 0 0 1 1.13-1.268c3.487-1.003 15.433-4.86 20.662-12.029 6.16-8.44 8.295-9.35 8.295-9.35s4.03-2.248 2.326-8.198c-.892-3.105-5.584-11.253-10.201-19.593a10.952 10.952 0 0 0 3.757 1.704c2.808.686 5.557.255 7.527-.968a1.323 1.323 0 1 0-.263-2.372l-5.196-1.815a2.394 2.394 0 0 1-1.474-3.053l.007-.02a2.407 2.407 0 0 1 3.064-1.468l4.638 1.621c.462.161.979.045 1.327-.302.345-.346.517-.879.3-1.32" }), _jsx("path", { fill: mantleFill, d: "M44.151 45s-2.766.605-2.025 3.75C42.868 51.914 46 52 46 52c-2.723-2.607-1.849-7-1.849-7M8.875 84.576c7.098 4.115 22.77 8.899 26.046 17.51 0 0 1.12 1.914-5.066 1.914-4.685 0-5.949-1.166-9.277-5.101C15.69 93.119 6 89.753 6 85.29c0 0 .064-2.343 2.875-.714" })] }))] })));
+};
+//# sourceMappingURL=logo-titan.js.map

package/dist/components/logo/logo-titan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo-titan.js","sourceRoot":"","sources":["../../../src/components/logo/logo-titan.tsx"],"names":[],"mappings":";AASA,qCAAqC;AACrC,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,KAAqB,EAAE,EAAE;;IACnE,MAAM,UAAU,GAAG;QACf,KAAK,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,GAAG;QACzB,MAAM,EAAE,MAAA,KAAK,CAAC,MAAM,mCAAI,GAAG;KAC9B,CAAC;IACF,MAAM,IAAI,GAAG,MAAA,KAAK,CAAC,IAAI,mCAAI,SAAS,CAAC;IACrC,MAAM,UAAU,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,IAAI,CAAC;IAE5C,OAAO,CACH,6BACI,KAAK,EAAC,4BAA4B,EAClC,UAAU,EAAC,8BAA8B,IACrC,UAAU,IACd,OAAO,EAAC,aAAa,iBAErB,yBACI,eAAM,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,qBAAqB,GAAG,GACpC,EACP,2BAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,iBAC7B,eACI,IAAI,EAAE,UAAU,EAChB,CAAC,EAAC,mHAAmH,GACvH,EACF,2BAAG,SAAS,EAAC,iBAAiB,iBAC1B,6BAAM,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,MAAM,gBACpB,cAAK,SAAS,EAAC,IAAI,GAAG,IACnB,EACP,eACI,IAAI,EAAE,UAAU,EAChB,CAAC,EAAC,wQAAwQ,EAC1Q,IAAI,EAAC,SAAS,GAChB,KACF,EACJ,eACI,IAAI,EAAE,IAAI,EACV,CAAC,EAAC,qJAAqJ,GACzJ,EACF,eACI,IAAI,EAAE,IAAI,EACV,CAAC,EAAC,klKAAklK,GACtlK,EACF,eACI,IAAI,EAAE,UAAU,EAChB,CAAC,EAAC,8PAA8P,GAClQ,KACF,KACF,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/logo/logo.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./logo-titan").LogoTitanProps>;
+    parameters: {};
+};
+export default _default;
+export declare const logoTitan: () => JSX.Element;
+export declare const logoTitanBlueMantle: () => JSX.Element;
+export declare const logoCompanyTitle: () => JSX.Element;
+export declare const logoTitanText: () => JSX.Element;
+//# sourceMappingURL=logo.stories.d.ts.map

package/dist/components/logo/logo.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo.stories.d.ts","sourceRoot":"","sources":["../../../src/components/logo/logo.stories.tsx"],"names":[],"mappings":";;;;;;AAIA,wBAIE;AAEF,eAAO,MAAM,SAAS,mBAAsB,CAAC;AAC7C,eAAO,MAAM,mBAAmB,mBAA2C,CAAC;AAC5E,eAAO,MAAM,gBAAgB,mBAA6B,CAAC;AAC3D,eAAO,MAAM,aAAa,mBAOzB,CAAC"}

package/dist/components/logo/logo.stories.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LogoTitan } from './logo-titan';
+import { LogoCompanyTitle } from './logo-company-title';
+import { LogoTitanText } from './logo-titan-text';
+export default {
+    title: 'Navigation/Logo',
+    component: LogoTitan,
+    parameters: {},
+};
+export const logoTitan = () => _jsx(LogoTitan, {});
+export const logoTitanBlueMantle = () => _jsx(LogoTitan, { mantleFill: "#2270EE" });
+export const logoCompanyTitle = () => _jsx(LogoCompanyTitle, {});
+export const logoTitanText = () => (_jsx(LogoTitanText, { className: "bg-neutral-300 border", mantleFill: "#2270EE", title: "Commercial", description: "tenant tenant tenant tenant tenant" }));
+//# sourceMappingURL=logo.stories.js.map

package/dist/components/logo/logo.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo.stories.js","sourceRoot":"","sources":["../../../src/components/logo/logo.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,eAAe;IACX,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,KAAC,SAAS,KAAG,CAAC;AAC7C,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,KAAC,SAAS,IAAC,UAAU,EAAC,SAAS,GAAG,CAAC;AAC5E,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,KAAC,gBAAgB,KAAG,CAAC;AAC3D,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,CAC/B,KAAC,aAAa,IACV,SAAS,EAAC,uBAAuB,EACjC,UAAU,EAAC,SAAS,EACpB,KAAK,EAAC,YAAY,EAClB,WAAW,EAAC,oCAAoC,GAClD,CACL,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/header-navigation/header-navigation';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kDAAkD,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from './components/header-navigation/header-navigation';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kDAAkD,CAAC"}

package/dist/utils/navigation.d.ts

@@ -0,0 +1,38 @@
+import { IconPropsStrict } from '@servicetitan/design-system';
+import { FC, ReactNode } from 'react';
+export interface HeaderNavigationLinkData {
+    /** link href */
+    key: string;
+    /** link href */
+    to: string;
+    /** link title */
+    title: string;
+    /** link description */
+    hint: string;
+    /** callback to return active state. By default it compares link href with current pathname */
+    isActive?: boolean | ((pathname: string) => boolean);
+    /** flag if the link is not shown (based on FG and/or user permissions) */
+    isHidden?: boolean;
+    /** custom className (can be used for mdi icons) */
+    iconClassName?: string;
+    /** anvil's icon name of item */
+    iconName?: IconPropsStrict['name'];
+    /** icon component of item (<svg />) */
+    iconComponent?: FC;
+    /** item counter (optional). shown if it is set and greater than 0 */
+    counter?: number;
+    /** class name of link item */
+    className?: string;
+}
+export interface HeaderNavigationComponentPropsStrict {
+    to: string;
+    title: string;
+    className?: string;
+    activeClassName?: string;
+    children: ReactNode;
+    isActive?: (pathname: string) => boolean;
+}
+export interface HeaderNavigationComponentProps extends HeaderNavigationComponentPropsStrict {
+    [key: string]: any;
+}
+//# sourceMappingURL=navigation.d.ts.map

package/dist/utils/navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/utils/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,WAAW,wBAAwB;IACrC,gBAAgB;IAChB,GAAG,EAAE,MAAM,CAAC;IAEZ,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IAEb,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;IAErD,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAEnC,uCAAuC;IACvC,aAAa,CAAC,EAAE,EAAE,CAAC;IAEnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,oCAAoC;IACjD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;CAC5C;AAED,MAAM,WAAW,8BAA+B,SAAQ,oCAAoC;IACxF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB"}

package/dist/utils/navigation.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=navigation.js.map

package/dist/utils/navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../src/utils/navigation.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,47 @@
+{
+    "name": "@servicetitan/navigation",
+    "version": "0.1.0",
+    "description": "Navigation components",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/servicetitan/anvil-uikit-contrib",
+        "directory": "packages/navigation"
+    },
+    "main": "./dist/index.js",
+    "typings": "./dist/index.d.ts",
+    "files": [
+        "dist",
+        "src"
+    ],
+    "dependencies": {
+        "classnames": "~2.3.1"
+    },
+    "peerDependencies": {
+        "@servicetitan/design-system": ">=13.2.1",
+        "@servicetitan/react-ioc": "~14.1.1",
+        "@servicetitan/tokens": ">=12.2.1",
+        "mobx": "~6.3.2",
+        "mobx-react": "~7.2.0",
+        "react": "~17.0.2",
+        "react-router-dom": "~5.3.0"
+    },
+    "devDependencies": {
+        "@servicetitan/design-system": ">=12.4.1",
+        "@servicetitan/react-ioc": "~14.1.1",
+        "@servicetitan/tokens": ">=12.1.11",
+        "@testing-library/react": "^12.0.0",
+        "@types/react": "~17.0.15",
+        "mobx": "~6.3.2",
+        "mobx-react": "~7.2.0",
+        "react": "~17.0.2",
+        "react-router-dom": "~5.3.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "cli": {
+        "less": true,
+        "webpack": false
+    },
+    "gitHead": "d29437d247da3428ed25fd9fc4004c1f3a94cf1e"
+}

package/src/components/header-navigation/header-navigation.module.less

@@ -0,0 +1,116 @@
+/* stylelint-disable no-descending-specificity */
+@import (reference) '@servicetitan/tokens/core/tokens.less';
+
+.link {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+
+    .icon {
+        display: inline-block;
+    }
+
+    & * {
+        text-decoration: none;
+        white-space: nowrap;
+    }
+}
+
+.header {
+    min-width: 800px;
+    height: 56px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    background-color: @color-neutral-300;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
+
+    .link {
+        padding: 18px 12px;
+        max-height: 56px;
+
+        color: @color-white;
+        font-family: @base-font-family;
+
+        position: relative;
+
+        ins {
+            margin-left: @spacing-half;
+        }
+
+        .counter {
+            color: @color-white;
+            position: absolute;
+            top: @spacing-1;
+            right: -@spacing-half;
+
+            font-size: @typescale-0;
+            font-weight: @font-weight-semibold;
+        }
+
+        &.active {
+            color: @color-blue-300;
+        }
+
+        &:hover:not(.active) {
+            color: @color-neutral-60;
+        }
+    }
+
+    &.minimized .link {
+        ins {
+            display: none;
+            color: @color-white;
+        }
+
+        &:hover:not(.active) {
+            ins {
+                display: inline-block;
+                margin-left: @spacing-0;
+                position: absolute;
+                z-index: @z-index-notification;
+                background-color: @color-neutral-300;
+                bottom: -@spacing-half;
+                left: 50%;
+                transform: translate3d(-50%, 100%, 0);
+                padding: @spacing-1;
+                border-radius: @default-border-radius;
+            }
+        }
+    }
+}
+
+.overflow-popover {
+    padding: @spacing-1 @spacing-0 !important;
+
+    .link {
+        display: block;
+        color: @color-black;
+        padding: @spacing-1 12px;
+        position: relative;
+
+        &.active {
+            color: @color-blue-500;
+        }
+
+        &:hover {
+            background-color: @color-blue-500;
+            color: @color-white;
+        }
+
+        ins {
+            margin-left: @spacing-1;
+        }
+
+        .counter {
+            color: @color-white;
+            position: absolute;
+            top: @spacing-1;
+            margin-left: @spacing-half;
+
+            font-size: @typescale-0;
+            font-weight: @font-weight-semibold;
+        }
+    }
+}

package/src/components/header-navigation/header-navigation.module.less.d.ts

@@ -0,0 +1,9 @@
+export const __esModule: true;
+export const link: string;
+export const icon: string;
+export const header: string;
+export const counter: string;
+export const active: string;
+export const minimized: string;
+export const overflowPopover: string;
+

package/src/components/header-navigation/header-navigation.stories.tsx

@@ -0,0 +1,80 @@
+import { HeaderNavigation } from './header-navigation';
+import { HeaderNavigationComponentProps, HeaderNavigationLinkData } from '../../utils/navigation';
+import { LogoCompanyTitle } from '../logo/logo-company-title';
+import { FC } from 'react';
+import { LogoTitanText } from '../logo/logo-titan-text';
+
+export default {
+    title: 'Navigation/HeaderNavigation',
+    component: HeaderNavigation,
+    parameters: {},
+};
+
+const getItem = (
+    key: string,
+    data: Partial<HeaderNavigationLinkData>
+): HeaderNavigationLinkData => ({
+    key,
+    to: '/',
+    title: key[0].toUpperCase() + key.substring(1),
+    hint: key,
+    ...(data ?? {}),
+});
+
+const items = {
+    dashboard: getItem('dashboard', { iconName: 'dashboard', isActive: true }),
+    calendar: getItem('calendar', { iconName: 'schedule' }),
+    calls: getItem('calls', { iconName: 'phone', isActive: true, counter: 12 }),
+    accounting: getItem('accounting', { iconName: 'assignment' }),
+    dispatch: getItem('dispatch', { iconName: 'location_disabled' }),
+    fleet: getItem('fleet', { iconName: 'fleet-pro', title: 'Fleet Pro' }),
+};
+
+const NavLinkMock: FC<HeaderNavigationComponentProps> = props => (
+    <a
+        href="#"
+        onClick={e => {
+            e.preventDefault();
+        }}
+        className={props.className}
+    >
+        {props.children}
+    </a>
+);
+
+export const defaultNavigation = () => (
+    <HeaderNavigation
+        left={<LogoCompanyTitle className="m-l-1" fill="#fff" />}
+        items={[
+            items.dashboard,
+            items.calendar,
+            items.calls,
+            items.accounting,
+            items.dispatch,
+            items.fleet,
+        ]}
+        navigationComponent={NavLinkMock}
+    />
+);
+
+export const withLogoTextAndOverflow = () => (
+    <HeaderNavigation
+        left={
+            <LogoTitanText
+                mantleFill="#2270EE"
+                title="Commercial"
+                description="tenant tenant tenant tenant tenant"
+            />
+        }
+        items={[
+            items.dashboard,
+            items.calendar,
+            items.calls,
+            items.accounting,
+            items.dispatch,
+            items.fleet,
+        ]}
+        itemsOverflow={[items.calls, items.accounting, items.dispatch]}
+        navigationComponent={NavLinkMock}
+    />
+);

package/src/components/header-navigation/header-navigation.tsx

@@ -0,0 +1,204 @@
+import { Icon, Popover, Tag } from '@servicetitan/design-system';
+import classNames from 'classnames';
+import {
+    FC,
+    ReactElement,
+    ReactNode,
+    useCallback,
+    useEffect,
+    useLayoutEffect,
+    useRef,
+    useState,
+} from 'react';
+import { NavLink } from 'react-router-dom';
+import { HeaderNavigationComponentProps, HeaderNavigationLinkData } from '../../utils/navigation';
+
+import * as Styles from './header-navigation.module.less';
+
+function useForceUpdate() {
+    const [, setTick] = useState(0);
+    return useCallback(() => {
+        setTick(tick => tick + 1);
+    }, []);
+}
+
+const DefaultNavigationComponent: FC<HeaderNavigationComponentProps> = props => (
+    <NavLink
+        {...props}
+        isActive={props.isActive && ((_, { pathname }) => props.isActive!(pathname))}
+    />
+);
+
+const HeaderNavigationLink: FC<{
+    item: HeaderNavigationLinkData;
+    navigationComponent?: FC<HeaderNavigationComponentProps>;
+}> = ({
+    item: { iconComponent: IconComponent, ...item },
+    navigationComponent: NavigationComponent = DefaultNavigationComponent,
+}) => (
+    <NavigationComponent
+        key={item.key}
+        to={item.to}
+        title={item.hint}
+        className={classNames(Styles.link, item.className, {
+            [Styles.active]: item.isActive === true,
+        })}
+        isActive={typeof item.isActive === 'function' ? item.isActive : undefined}
+        activeClassName={Styles.active}
+        data-cy={`nav-item-${item.key}`}
+    >
+        {IconComponent ? (
+            <i className={Styles.icon}>
+                <IconComponent />
+            </i>
+        ) : item.iconName ? (
+            <Icon name={item.iconName} size={20} className={Styles.icon} />
+        ) : (
+            <i className={classNames(Styles.icon, item.iconClassName)} />
+        )}
+
+        <ins>{item.title}</ins>
+        {!!item.counter && (
+            <Tag className={Styles.counter} compact badge color="critical">
+                {item.counter}
+            </Tag>
+        )}
+    </NavigationComponent>
+);
+
+const HeaderNavigationOverflow: FC<{
+    items: HeaderNavigationLinkData[];
+    navigationComponent?: FC<HeaderNavigationComponentProps>;
+}> = ({ items, navigationComponent }) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <Popover
+            open={isOpen}
+            trigger={
+                <Icon
+                    name="more_vert"
+                    size="24px"
+                    className="c-pointer"
+                    onClick={() => setIsOpen(true)}
+                    color="white"
+                />
+            }
+            direction="bl"
+            width="xs"
+            onClickOutside={() => setIsOpen(false)}
+            wrapperClassName="d-if-i align-items-center"
+            popoverContentClassName={Styles.overflowPopover}
+            portal
+        >
+            <div onClick={() => setIsOpen(false)}>
+                {items.map(item => (
+                    <HeaderNavigationLink
+                        key={item.key}
+                        item={item}
+                        navigationComponent={navigationComponent}
+                    />
+                ))}
+            </div>
+        </Popover>
+    );
+};
+
+export interface HeaderNavigationProps {
+    children?: ReactNode;
+    className?: string;
+    contentClassName?: string;
+    id?: string;
+    left?: ReactElement;
+    leftClassName?: string;
+    items?: HeaderNavigationLinkData[];
+    itemsOverflow?: HeaderNavigationLinkData[];
+    navigationComponent?: FC<HeaderNavigationComponentProps>;
+}
+
+export const HeaderNavigation: FC<HeaderNavigationProps> = ({
+    children,
+    className,
+    contentClassName,
+    id,
+    items,
+    itemsOverflow,
+    left,
+    leftClassName,
+    navigationComponent,
+}) => {
+    const leftRef = useRef<HTMLDivElement>(null);
+    const rightRef = useRef<HTMLDivElement>(null);
+    const centerRef = useRef<HTMLDivElement>(null);
+    const navigationRef = useRef<HTMLDivElement>(null);
+    const forceUpdate = useForceUpdate();
+    const [isMinimized, setIsMinimized] = useState(false);
+
+    useEffect(() => {
+        const handleResize = () => {
+            setIsMinimized(false);
+            forceUpdate();
+        };
+
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [forceUpdate]);
+
+    useLayoutEffect(() => {
+        if (leftRef.current && rightRef.current && centerRef.current) {
+            const diff = leftRef.current.clientWidth - rightRef.current.clientWidth;
+            const margin = 8;
+
+            centerRef.current.style.marginLeft = `${margin + (diff < 0 ? -diff : 0)}px`;
+            centerRef.current.style.marginRight = `${margin + (diff > 0 ? diff : 0)}px`;
+        }
+    }, []);
+
+    const updateIsMinimized = () => {
+        if (centerRef.current && navigationRef.current) {
+            if (navigationRef.current.clientWidth >= centerRef.current.clientWidth) {
+                setIsMinimized(true);
+            }
+        }
+    };
+
+    useEffect(() => {
+        updateIsMinimized();
+    });
+
+    return (
+        <div
+            className={classNames(Styles.header, className, {
+                [Styles.minimized]: isMinimized,
+            })}
+            id={id}
+        >
+            <div className={leftClassName} ref={leftRef}>
+                {left}
+            </div>
+            <div ref={centerRef} className="d-if justify-content-center flex-grow-1 flex-basis-0">
+                <div ref={navigationRef} className="d-if">
+                    {items?.map(item => (
+                        <HeaderNavigationLink
+                            key={item.key}
+                            item={item}
+                            navigationComponent={navigationComponent}
+                        />
+                    ))}
+                    {!!itemsOverflow?.length && (
+                        <HeaderNavigationOverflow
+                            items={itemsOverflow}
+                            navigationComponent={navigationComponent}
+                        />
+                    )}
+                </div>
+            </div>
+            <div
+                className={classNames('d-f flex-row justify-content-end', contentClassName)}
+                ref={rightRef}
+            >
+                {children}
+            </div>
+        </div>
+    );
+};

package/src/components/logo/logo-company-title.tsx

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+
+/* tslint:disable: max-line-length */
+export const LogoCompanyTitle: FC<{ className?: string; fill?: string }> = ({
+    className,
+    fill,
+}) => {
+    return (
+        <svg
+            className={className}
+            width="162"
+            viewBox="0 0 322 80"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M102.9 34.5c-1-.6-3.6-1.8-5.9-1.8-2 0-3.4.8-3.4 2.3 0 1.1.7 2 3.5 2.8.6.2 1.3.4 1.9.6 2.5.8 4.3 1.9 5.4 3.3 1.1 1.4 1.7 3.2 1.7 5.4 0 6.3-4.4 9.7-11.5 9.7-3.9 0-7.3-1.3-10-3.3l2.6-6.1c1.1 1 4.5 3 7.5 3 2.3 0 3.6-1.1 3.6-2.6 0-1.7-1.1-2.4-4-3.4-1-.3-2.5-.8-3.5-1.2-2.8-1.1-5-3.6-5-7.9 0-5.2 4.3-8.9 10.7-8.9 3.6 0 7 1.1 8.6 2.2l-2.2 5.9zm11.4 12.9c0 3 1.9 4.5 4.1 4.5 1.5 0 2.6-.6 3.3-1.9h6.3c-.8 3.7-4.2 6.8-9.7 6.8-7.4 0-11.2-4.6-11.2-10.7 0-6.2 4.5-10.5 10.8-10.5 6.8 0 10.6 4 10.6 10v1.8h-14.2zm7.8-4c-.2-1-.6-3.2-3.8-3.2-2.8 0-3.5 2.2-3.7 3.2h7.5zm79.1 4c0 3 1.9 4.5 4.1 4.5 1.5 0 2.6-.6 3.3-1.9h6.3c-.8 3.7-4.2 6.8-9.7 6.8-7.4 0-11.2-4.6-11.2-10.7 0-6.2 4.5-10.5 10.8-10.5 6.8 0 10.6 4 10.6 10v1.8h-14.2zm7.7-4c-.2-1-.6-3.2-3.8-3.2-2.8 0-3.5 2.2-3.7 3.2h7.5zm-78.4-7h6.8v3.1h.2c1.6-2.8 2.9-3.6 5.1-3.6 1 0 1.8.4 2 .4v6.4c-.7-.4-1.5-.7-2.6-.7-2.4 0-4.5 2.2-4.5 5.9v8.2h-7V36.4z"
+                fill={fill}
+            />
+            <path
+                d="M150.4 36.4l4.7 10.1 4.8-10.1h7.8l-10.3 19.8h-4.7l-10.2-19.8h7.9zm17-6.7c0-.5.1-1 .3-1.5.2-.5.5-.9.8-1.3.4-.4.8-.6 1.3-.8.5-.2 1-.3 1.5-.3s1 .1 1.5.3c.5.2.9.5 1.3.8.4.4.6.8.8 1.3.2.5.3 1 .3 1.5s-.1 1-.3 1.5c-.2.5-.5.9-.8 1.3-.4.4-.8.6-1.3.8-.5.2-1 .3-1.5.3s-1-.1-1.5-.3c-.5-.2-.9-.5-1.3-.8s-.6-.8-.8-1.3c-.2-.5-.3-1-.3-1.5zm.5 6.7h7v19.8h-7zm25 6.4c-1.2-.8-2.8-1.2-4.1-1.2-2.8 0-4.8 1.9-4.8 4.8 0 2.8 2 4.7 4.8 4.7 1.3 0 2.9-.4 4.1-1.4v5.9c-.7.5-2.6 1.1-4.9 1.1-6.8 0-11.2-4-11.2-10.4s4.5-10.6 11.4-10.6c1.7 0 3.3.4 4.7 1.1v6zm36.2-9.3v22.7h-7.6V33.5h-6.2v-6.4h20v6.4h-6.2zm7.1-3.8c0-.5.1-1 .3-1.5.2-.5.5-.9.8-1.3.4-.4.8-.6 1.3-.8.5-.2 1-.3 1.5-.3s1 .1 1.5.3c.5.2.9.5 1.3.8.4.4.6.8.8 1.3.2.5.3 1 .3 1.5s-.1 1-.3 1.5c-.2.5-.5.9-.8 1.3-.4.4-.8.6-1.3.8-.5.2-1 .3-1.5.3s-1-.1-1.5-.3c-.5-.2-.9-.5-1.3-.8s-.6-.8-.8-1.3c-.2-.5-.3-1-.3-1.5zm.5 6.7h7v19.8h-7zm18.7 5.8v14h-7v-14h-2.7v-5.8h2.7v-5.9h7v5.9h3.5v5.8h-3.5zm29.1-5.8h7V40c1-1.8 3.4-4 6.3-4 1.4 0 2.6.2 3.6.7 1 .5 1.8 1.1 2.5 1.9.6.7 1 1.4 1.2 2.2.2.8.3 1.8.3 2.8v12.6h-7v-10c0-1-.1-1.8-.2-2.4-.1-.6-.4-1.1-.8-1.4-.3-.3-.7-.5-1-.7-.4-.1-.8-.2-1.2-.2-1.2 0-3.7 1.2-3.7 4.5v10.1h-7V36.4zm25.4-3.5c.5 0 1.1.1 1.6.4.5.3.9.7 1.2 1.2.3.5.4 1.1.4 1.6 0 .6-.1 1.1-.4 1.6s-.7.9-1.2 1.2-1.1.4-1.6.4-1.1-.1-1.6-.4-.9-.7-1.2-1.2c-.3-.5-.4-1.1-.4-1.6 0-.6.1-1.1.4-1.6s.7-.9 1.2-1.2c.5-.2 1-.4 1.6-.4zm0 .6c-.5 0-.9.1-1.3.4-.4.2-.8.6-1 1-.2.4-.4.9-.4 1.4 0 .5.1.9.4 1.3s.6.8 1 1 .9.4 1.3.4.9-.1 1.3-.4.8-.6 1-1 .4-.9.4-1.3c0-.5-.1-.9-.4-1.4-.2-.4-.6-.8-1-1-.4-.3-.9-.4-1.3-.4zm-1.5 4.5v-3.5h1.2c.4 0 .7 0 .9.1s.3.2.4.3c.1.2.2.3.2.5 0 .3-.1.5-.3.7-.2.2-.4.3-.7.3.1.1.2.1.3.2.1.1.3.4.5.7l.4.7h-.7l-.3-.6c-.2-.4-.4-.7-.6-.8-.1-.1-.3-.1-.5-.1h-.2V38h-.6zm.6-2h.7c.3 0 .6 0 .7-.1.1-.1.2-.2.2-.4 0-.1 0-.2-.1-.3l-.2-.2c-.1 0-.3-.1-.6-.1h-.7V36zm-34.3.4h7v19.8h-7v-2.4c-1.5 1.9-3.3 2.9-5.8 2.9-5.7 0-9.9-4.4-9.9-10.5 0-6 4.1-10.3 9.8-10.3 2.5 0 4.3 1 5.9 2.7v-2.2zm-8.6 9.8c0 2.6 1.8 4.6 4.4 4.6 2.9 0 4.5-2.1 4.5-4.5 0-2.3-1.6-4.5-4.5-4.5-2.6 0-4.4 1.8-4.4 4.4zM18.3 60s2.9 1.3 2.9 2.6c0 0-.2 1-1.2 1s-2.3-1.7-2.3-2.6c0-.9.6-1 .6-1zm-3.4-15.2c0-.1-.1-.1-.1-.1h-.2c-1 .4-1.6 1.4-1.5 2.5 0 5.5 14.4 6.1 22.3 15.9.8 1.1 2.1 1.7 3.5 1.7 1.8 0 3.5-.1 5.1-.4.2 0 .3-.2.4-.3.1-.2.1-.4-.1-.5-9.5-14-27.7-10.8-29.4-18.8zm56.2-19c-.6-1.2-1.5-2.1-3.1-2.5-1.6-.4-3.1-.2-4.1.7l-3.3-1.1c-.3-.7-.6-1.5-.9-2.2-.2-.5-.6-1-1.1-1.3-2.2-1.2-8-4.2-10.2-1.2 0 0-.1.1-.3.4l-.7-.2c-.4-1.4-1.6-2.4-3.3-2.8-1-.3-2-.2-2.9.1-.6.2-.6.9 0 1.2l2.6.9c.6.2.9.9.7 1.5-.2.6-.8.9-1.4.7 0 0-1.7-.5-2.8-.9-.6-.2-1.2.4-1 1 .4 1.3 1.6 2.4 3.3 2.8 1.4.4 2.8.1 3.7-.6l.6.2c0 1.5 1.1 3.2 2.2 3.8 1.6.9 3 .1 4.7-.7 0 0 4.1 3.3 2.2 12.8-5.3.6-7.2 2.5-9.1 4.4-1.2-.5-4.8-.7-6.8-.3.5-.6 1.4-1.2 2.6-1.7.5-.2.8-.7.8-1.2 0 0 2.4-.8 2.4-1.7s-3-.8-4.2-7.3c-.2-.8-.4-1.4-1.6-1.9 0 0-.3-.7.1-1.4.5-.7.7-1.1.6-1.7-.1-.6-1-1.1-1-1.1v-1s-2.4-1.8-2.4-4.4 3.3-5.7 4.3-6.6c.1-.1.1-.1.1-.2s-.1-.1-.1-.2c-2.1-1.4-4.5-2.1-7-2-14.1 0-17.3 12.7-20.3 19-.1.1-.1.3 0 .4 3 6.1 7.8 5.6 8.1 10.7.2 4.1-.7 4.2-1.7 4.1-.6-.1-1.5-.6-2.1-1-.1-.1-.2 0-.3 0-.1.1-.1.2-.1.2.4 1.1 1.4 3.4 4.5 3.4 1.6 0 2-1.5 2-2.8v-4.6c0-.5-.1-.9-.4-1.2-1.1-.9-3.3-3.2-3.3-5.2 0-.8.6-1.3 1.2-1.3 1.2 0 2.4 1.9 3.3 4.2.2.6.5.9.8 1.1h.1s.1-.1 0-.1c-.4-1.4-.5-2.8-.5-3.5 0-.3-.1-.5-.3-.7-.9-.8-3.4-3.3-3.4-6.9 0-5 7.8-4.5 9.4-4.4.5 1.7 1.5 2.4 2.1 2.7-2.4.9-7.7 2.6-7.7 5.7 0 3.3 5.3 3 5.3 3s-.8 6.5 5.2 8.5c0 0-.9 1-4.2 1-3 0-4.5-1.4-5.2-3 0-.1-.1-.1-.2-.1s-.1 0-.2.1c-.2.4-.3 1.2.3 2.1.9 1.5 2 2.3 2 4.2 0 1.4-1.2 2.2-1.7 2.5 0 0-.1.1 0 .1 0 0 0 .1.1.1 1.2.3 6.6 1.7 10.2 3.4h.1c.4-.3 3.5-2.3 3.7-5.1 0 0 .2-1.8-2.4-2.1 0 0 1.1-.5 3.2-.5 2 0 4.3 1.7.3 10.1v.1c.6.4 5.2 3.4 8.2 6.3.1.1.2.1.3.1.1 0 .2-.1.2-.1.4-.5 1.1-1.9 1.7-5.2 0-.3.3-.6.6-.7 1.8-.5 7.8-2.5 10.4-6.2 3.1-4.3 4.2-4.8 4.2-4.8s2-1.1 1.2-4.2c-.4-1.6-2.8-5.8-5.1-10 .5.4 1.2.7 1.9.9 1.4.4 2.8.1 3.8-.5.2-.1.3-.4.3-.7 0-.3-.2-.5-.4-.6l-2.6-.9c-.6-.2-1-.9-.7-1.6.2-.6.9-1 1.5-.8l2.3.8c.2.1.5 0 .7-.2 0 .5.1.2 0-.1zm-27.6-3.2c-2.2 0-3.2-1.9-3.2-1.9s2.6 2.5 6.1.5c0-.1-.6 1.4-2.9 1.4zm-2.6 9.7s.9 3.9 2.7 5.3c0 0-.1.4-.6.4s-1.6-.9-2-3c-.6-2.1-.1-2.7-.1-2.7zm-7.1-12c-.1 0-.2-.1-.2-.2-.4-2.9.9-6.4.9-6.4s-3 2.5-2.9 6.4c-2.6-.1-6.4.2-8.6 2.1-3.1 2.7-3.6 7.8-3.7 9.1 0 .1 0 .1-.1.2H19c-.7-.5-2.5-1.9-1.2-5.4 1.5-4.4 6.3-13.5 15.9-14.1 0 0 2.9-.1 4.9.9.1 0 .1.1.1.2s0 .1-.1.2c-.8.7-3.4 3-4.3 6.8 0 .1-.1.2-.2.2h-.3zm-.9 11.4c-3.6.7-4.9-.5-4.9-1.4 0-2.9 8.1-5.1 10.4-5.1.5.7-.3.6-.7 1.7-.3 1.1-1.1 1.4-2.3 1.6-1.2.2-2.3.7-3.2 1.5-.7.7 0 1 1.5.6 1.4-.4 1.6.2 2.2 0 .6-.2.1-.9.3-1.1.4-.2 1.2.3 1.2.3l2.1 1.3-2.5 1.3c-.2.1-.4.2-.4.6 0 .5 1.3.3 1.7.3.4 0 .5.7.5.7-.7.8-2.4.8-2.4.8.4.8 2.6.7 3 .7.4 0 .5.7.7 1.7.2 1 1.7 1.5 1.7 1.5.5 1.5-1.4 2-2.6 2-7-.1-6.3-9-6.3-9zM57.8 24l5 1.6s.9 1.8-.9 1.2c-1.9-.5-3.7-1.1-3.7-1.1s-1-.6-.4-1.7zm-4.7.2c-1.1-.1-.3-2-1.1-2.1-.3 0-.4 2.1-.8 1.8-.7-.6-.2-2-.1-2.6.1-.6.4-1.4-.3-.9s-1 1.5-1.2 2.3c-.2.8.2 1.2.5 2.2.3 1-.3.6-.3.6-3.1-1.9-.8-5.8-.8-5.8 1.3-2.3 3.3-1.6 3.3-1.6.4.1.5.4.5.9s.1.7.7.8c.6.1.8.8.8 2 0 1-.7 2.4-1.2 2.4zm2.5 0s-.8-.2-.5-1.3c.1-.4.2-.4.2-1s.2-1.3.6-1.5c0 0 .8 0 .8 2.2 0 .8-1.1 1.6-1.1 1.6zm0 19.2s-2 3.9-4.7 3.9c-1.1 0-1.9-.8-1.9-1.9 0-1.1 1.4-5.1 7.2-5.1 1.4 0 2.5.3 2.5 1.1s-1.4 2.3-3.1 2zM66 39.1s-.3 2.3-3.1 2.3c-2.7 0-5.2-4-6.1-13 .7 1.1 1.4 2.1 1.9 3.3 0-1.3.6-3.4-2.2-5.6 0 0 7.4 1.6 7.6 9.3 0 1.3-.8 2.7-1.3 3.2 0 0-.3.3-.1.7.2.4.7.3 1.4-.1.8-.5 1.9-1.3 1.9-.1zm.7-9.3s-1.9.5-3.9-1.6c0 0 .8.1 1-1 0 0 1.1 2.2 2.9 2.6zM18 54.4c3.7 2.2 11.9 4.7 13.6 9.3 0 0 .6 1-2.6 1-2.4 0-3.1-.6-4.8-2.7-2.5-3.1-7.6-4.9-7.6-7.2 0 0 0-1.2 1.4-.4z"
+                fill={fill}
+            />
+        </svg>
+    );
+};

package/src/components/logo/logo-titan-text.module.less

@@ -0,0 +1,25 @@
+@import (reference) '@servicetitan/tokens/core/tokens.less';
+
+.container {
+    height: 56px;
+    max-width: 200px;
+
+    .logo-wrapper {
+        height: 56px;
+        width: 56px;
+
+        svg {
+            fill: @color-black;
+        }
+    }
+
+    .logo-text-title {
+        font-weight: @font-weight-semibold;
+        font-size: 19px;
+        max-width: 140px;
+    }
+
+    .logo-text-description {
+        max-width: 140px;
+    }
+}

package/src/components/logo/logo-titan-text.module.less.d.ts

@@ -0,0 +1,6 @@
+export const __esModule: true;
+export const container: string;
+export const logoWrapper: string;
+export const logoTextTitle: string;
+export const logoTextDescription: string;
+

package/src/components/logo/logo-titan-text.tsx

@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+import { FC } from 'react';
+import { LogoTitan } from './logo-titan';
+import * as Styles from './logo-titan-text.module.less';
+
+export interface LogoTitanTextProps {
+    mantleFill?: string;
+    className?: string;
+    title: string;
+    description: string;
+}
+
+export const LogoTitanText: FC<LogoTitanTextProps> = ({
+    className,
+    description,
+    mantleFill,
+    title,
+}) => (
+    <div className={classNames('d-f', Styles.container, className)}>
+        <div
+            className={classNames(
+                'bg-white d-if justify-content-center align-items-center',
+                Styles.logoWrapper
+            )}
+        >
+            <LogoTitan width={40} height={40} mantleFill={mantleFill} />
+        </div>
+        <div className="d-if p-l-1 c-white flex-column justify-content-center align-items-start">
+            <span className={classNames(Styles.logoTextTitle, 'ff-display')}>{title}</span>
+            <span className={classNames(Styles.logoTextDescription, 'fs-1 t-truncate m-b-1')}>
+                {description}
+            </span>
+        </div>
+    </div>
+);

package/src/components/logo/logo-titan.tsx

@@ -0,0 +1,59 @@
+import { FC } from 'react';
+
+export interface LogoTitanProps {
+    height?: number;
+    width?: number;
+    fill?: string;
+    mantleFill?: string;
+}
+
+/* tslint:disable: max-line-length */
+export const LogoTitan: FC<LogoTitanProps> = (props: LogoTitanProps) => {
+    const dimensions = {
+        width: props.width ?? 116,
+        height: props.height ?? 106,
+    };
+    const fill = props.fill ?? '#3A3A3A';
+    const mantleFill = props.mantleFill ?? fill;
+
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+            {...dimensions}
+            viewBox="0 0 116 106"
+        >
+            <defs>
+                <path id="a" d="M0 .12h63.625V40H0z" />
+            </defs>
+            <g fill="none" fillRule="evenodd">
+                <path
+                    fill={mantleFill}
+                    d="M10.33 96S17 98.545 17 101.089c0 0-.403 1.911-2.671 1.911C12.066 103 9 99.581 9 97.908 9 96.236 10.33 96 10.33 96"
+                />
+                <g transform="translate(0 66)">
+                    <mask id="b" fill="#fff">
+                        <use xlinkHref="#a" />
+                    </mask>
+                    <path
+                        fill={mantleFill}
+                        d="M3.733.453A.416.416 0 0 0 3.51.167a.403.403 0 0 0-.36-.01C1.968.677 0 2.1 0 5.058 0 15.962 29.34 17.19 45.224 36.706a8.92 8.92 0 0 0 7.085 3.293c3.607-.068 7.2-.258 10.388-.773a1.1 1.1 0 0 0 .84-.663c.15-.352.105-.757-.112-1.07C44.077 9.88 7.247 16.268 3.733.453"
+                        mask="url(#b)"
+                    />
+                </g>
+                <path
+                    fill={fill}
+                    d="M45 32.862c-1.712-1.879-6.568-.445-9.176 1.978-2.68 2.49-1.615 4.16-1.615 4.16 2.177-3.367 5.588-4.741 7.514-5.01 2.36-.328 3.277-1.128 3.277-1.128"
+                />
+                <path
+                    fill={fill}
+                    d="M105.301 37.812s-3.795.958-7.721-3.088c0 0 1.52.174 1.913-2.045 0 0 2.14 4.393 5.808 5.133m-1.397 18.16s-.596 4.407-6.07 4.407c-5.473 0-10.251-7.73-12.135-25.417 1.354 2.102 2.738 4.128 3.767 6.507.003-2.493 1.17-6.633-4.396-10.887 0 0 14.727 3.053 15.077 18.144 0 2.603-1.53 5.282-2.512 6.262 0 0-.674.577-.256 1.424.415.842 1.441.641 2.828-.29 1.389-.933 3.697-2.53 3.697-.15M83.19 64.374s-3.986 7.51-9.403 7.51c-2.21 0-3.79-1.577-3.79-3.756 0-2.182 2.681-9.984 14.331-9.984 2.783 0 4.963.508 4.963 2.184 0 1.677-2.644 4.559-6.1 4.046m0-37.55s-1.54-.301-1.045-2.59c.241-.777.415-.764.415-1.948s.311-2.563 1.255-2.969c0 0 1.618.003 1.618 4.222 0 1.83-2.244 3.286-2.244 3.286m-5.027 0c-2.25-.238-.649-3.865-2.267-4.086-.62-.086-.77 4.103-1.503 3.464-1.449-1.27-.378-3.862-.226-5.07.151-1.214.743-2.727-.567-1.816-1.31.911-2.008 2.83-2.455 4.467-.445 1.634.447 2.412 1.056 4.303.609 1.895-.522 1.243-.522 1.243-6.098-3.642-1.704-11.315-1.704-11.315 2.644-4.504 6.597-3.16 6.597-3.16.77.275.962.723.962 1.68s.259 1.262 1.394 1.53c1.136.27 1.673 1.658 1.673 3.91 0 2.252-1.434 4.956-2.438 4.85m9.368-.414l10.035 3.026s1.842 3.414-1.869 2.414c-3.712-1.003-7.336-2.134-7.336-2.134s-1.965-1-.83-3.306M38.182 41.47c-7.117 1.26-9.637-.916-9.637-2.753 0-5.601 16.175-9.942 20.728-10.011.917 1.382-.696 1.144-1.357 3.229-.658 2.082-2.269 2.743-4.622 3.028-2.356.285-4.826 1.5-6.38 2.924-1.44 1.322 0 1.93 2.938 1.087 2.873-.824 3.223.406 4.399-.03 1.173-.435.129-1.844.628-2.104.756-.394 2.327.673 2.327.673l4.092 2.595s-4.597 2.328-4.92 2.506c-.323.178-.872.483-.872 1.11 0 .99 2.547.628 3.42.628.874 0 1.008 1.424 1.008 1.424-1.337 1.538-4.818 1.55-4.818 1.55.775 1.637 5.156 1.372 6.043 1.401.882.033.974 1.273 1.422 3.296.45 2.028 3.287 2.89 3.287 2.89.92 3-2.706 3.872-5.106 3.872-14.063 0-12.58-17.315-12.58-17.315m1.6-22.275a.437.437 0 0 1-.385-.373C38.64 13.21 41.11 6.368 41.11 6.368s-5.997 4.821-5.763 12.524c-5.09-.126-12.575.424-16.988 4.182-6.188 5.265-7.204 15.201-7.366 17.81a.419.419 0 0 1-.631.33c-1.459-.876-4.898-3.776-2.425-10.632C11.023 22.032 20.546 4.298 39.539 3.1c0 0 5.813-.243 9.737 1.835a.432.432 0 0 1 .23.341.438.438 0 0 1-.163.38c-1.628 1.29-6.688 5.803-8.502 13.28a.44.44 0 0 1-.48.33c-.15-.022-.345-.044-.578-.072m14.12 23.535s1.754 7.649 5.283 10.355c0 0-.132.773-1.245.773-1.11 0-3.208-1.773-4.038-5.906-.83-4.135 0-5.222 0-5.222m5.283-19.013c-4.453 0-6.419-3.771-6.419-3.771s5.107 4.816 12.204.896c0 0-1.33 2.875-5.785 2.875m54.718 6.38c-1.125-2.282-2.882-4.117-6.24-4.94-3.265-.801-6.145-.39-8.12 1.328l-6.541-2.214c-.741-1.6-1.357-3.06-1.8-4.32a4.647 4.647 0 0 0-2.1-2.509c-4.279-2.431-15.872-8.208-20.362-2.305 0 0-.236.263-.554.733l-1.402-.475c-.725-2.514-3.116-4.442-6.431-5.255-2.04-.5-4.048-.373-5.713.238-1.21.446-1.268 1.857-.05 2.283l5.216 1.822a2.261 2.261 0 0 1 1.394 2.885l-.007.017a2.273 2.273 0 0 1-2.895 1.39s-3.323-.981-5.651-1.672c-1.233-.366-2.359.78-1.988 2.003.748 2.491 3.208 4.697 6.496 5.502 2.79.681 5.524.196 7.4-1.104l1.228.413c.092 2.83 2.284 6.21 4.336 7.426 3.144 1.86 6.026.206 9.3-1.387 0 0 8.195 6.527 4.395 25.033-10.492 1.1-14.289 4.86-18.096 8.657-2.386-.944-9.597-1.407-13.437-.523 1.089-1.084 2.893-2.364 5.107-3.219a2.601 2.601 0 0 0 1.668-2.424s4.803-1.53 4.803-3.29c0-1.758-5.931-1.578-8.37-14.22-.394-1.469-.842-2.7-3.108-3.757 0 0-.631-1.324.283-2.773.917-1.448 1.588-2.12 1.345-3.268-.241-1.15-1.939-2.095-1.939-2.095v-1.924s-4.856-3.526-4.856-8.572c0-5.046 6.583-11.11 8.378-12.868a.452.452 0 0 0 .134-.394.492.492 0 0 0-.241-.339C53.17 2.545 48.577 0 41.515 0 13.618 0 7.089 24.934 1.11 37.047c-.131.27-.154.582-.02.85C7.06 49.753 16.697 48.79 17.223 58.734c.423 7.955-1.443 8.131-3.302 7.963-1.22-.112-3.007-1.196-4.093-1.932a.423.423 0 0 0-.492.013c-.144.109-.201.297-.144.468.728 2.169 2.877 6.638 9.04 6.638 3.134 0 4.13-2.833 4.13-5.442v-8.99c0-.887-.293-1.727-.969-2.304-2.12-1.817-6.637-6.182-6.637-10.057 0-1.654 1.106-2.514 2.395-2.514 2.426 0 4.77 3.628 6.59 8.204.423 1.07 1.032 1.827 1.589 2.196a.26.26 0 0 0 .288-.005.25.25 0 0 0 .094-.268c-.75-2.659-.999-5.432-1.078-6.799a1.997 1.997 0 0 0-.696-1.394c-1.8-1.53-6.667-6.339-6.667-13.524 0-9.681 15.469-8.872 18.59-8.607.927 3.226 2.866 4.625 4.158 5.215-4.677 1.718-15.241 5.17-15.241 11.127 0 6.388 10.586 5.923 10.586 5.923s-1.68 12.754 10.244 16.6c0 0-1.864 1.876-8.268 1.876-5.977 0-8.894-2.659-10.316-5.796a.36.36 0 0 0-.664.015c-.325.812-.583 2.285.548 4.127 1.757 2.855 4.023 4.494 4.023 8.124 0 2.684-2.416 4.368-3.407 4.945a.178.178 0 0 0-.09.183.18.18 0 0 0 .14.151c2.345.567 13.031 3.241 20.225 6.641.058.03.125.025.18-.007.805-.506 7.027-4.556 7.382-9.897 0 0 .473-3.492-4.76-4.123 0 0 2.263-.871 6.36-.871 4.084 0 8.542 3.3.515 19.744a.183.183 0 0 0 .065.235c1.232.775 10.367 6.579 16.21 12.227a.645.645 0 0 0 .964-.077c.755-.993 2.214-3.657 3.29-10.216a1.59 1.59 0 0 1 1.13-1.268c3.487-1.003 15.433-4.86 20.662-12.029 6.16-8.44 8.295-9.35 8.295-9.35s4.03-2.248 2.326-8.198c-.892-3.105-5.584-11.253-10.201-19.593a10.952 10.952 0 0 0 3.757 1.704c2.808.686 5.557.255 7.527-.968a1.323 1.323 0 1 0-.263-2.372l-5.196-1.815a2.394 2.394 0 0 1-1.474-3.053l.007-.02a2.407 2.407 0 0 1 3.064-1.468l4.638 1.621c.462.161.979.045 1.327-.302.345-.346.517-.879.3-1.32"
+                />
+                <path
+                    fill={mantleFill}
+                    d="M44.151 45s-2.766.605-2.025 3.75C42.868 51.914 46 52 46 52c-2.723-2.607-1.849-7-1.849-7M8.875 84.576c7.098 4.115 22.77 8.899 26.046 17.51 0 0 1.12 1.914-5.066 1.914-4.685 0-5.949-1.166-9.277-5.101C15.69 93.119 6 89.753 6 85.29c0 0 .064-2.343 2.875-.714"
+                />
+            </g>
+        </svg>
+    );
+};

package/src/components/logo/logo.stories.tsx

@@ -0,0 +1,21 @@
+import { LogoTitan } from './logo-titan';
+import { LogoCompanyTitle } from './logo-company-title';
+import { LogoTitanText } from './logo-titan-text';
+
+export default {
+    title: 'Navigation/Logo',
+    component: LogoTitan,
+    parameters: {},
+};
+
+export const logoTitan = () => <LogoTitan />;
+export const logoTitanBlueMantle = () => <LogoTitan mantleFill="#2270EE" />;
+export const logoCompanyTitle = () => <LogoCompanyTitle />;
+export const logoTitanText = () => (
+    <LogoTitanText
+        className="bg-neutral-300 border"
+        mantleFill="#2270EE"
+        title="Commercial"
+        description="tenant tenant tenant tenant tenant"
+    />
+);

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components/header-navigation/header-navigation';

package/src/utils/navigation.ts

@@ -0,0 +1,50 @@
+import { IconPropsStrict } from '@servicetitan/design-system';
+import { FC, ReactNode } from 'react';
+
+export interface HeaderNavigationLinkData {
+    /** link href */
+    key: string;
+
+    /** link href */
+    to: string;
+
+    /** link title */
+    title: string;
+
+    /** link description */
+    hint: string;
+
+    /** callback to return active state. By default it compares link href with current pathname */
+    isActive?: boolean | ((pathname: string) => boolean);
+
+    /** flag if the link is not shown (based on FG and/or user permissions) */
+    isHidden?: boolean;
+
+    /** custom className (can be used for mdi icons) */
+    iconClassName?: string;
+
+    /** anvil's icon name of item */
+    iconName?: IconPropsStrict['name'];
+
+    /** icon component of item (<svg />) */
+    iconComponent?: FC;
+
+    /** item counter (optional). shown if it is set and greater than 0 */
+    counter?: number;
+
+    /** class name of link item */
+    className?: string;
+}
+
+export interface HeaderNavigationComponentPropsStrict {
+    to: string;
+    title: string;
+    className?: string;
+    activeClassName?: string;
+    children: ReactNode;
+    isActive?: (pathname: string) => boolean;
+}
+
+export interface HeaderNavigationComponentProps extends HeaderNavigationComponentPropsStrict {
+    [key: string]: any;
+}