@servicetitan/navigation 3.3.0 → 4.1.0

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

@@ -3,6 +3,7 @@ declare const _default: {
     title: string;
     component: FC<import("./header-navigation").HeaderNavigationProps>;
     parameters: {};
+    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default _default;
 export declare const defaultNavigation: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"header-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;AAQrC,wBAIE;AAmEF,eAAO,MAAM,iBAAiB,+CAa7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAqBnC,CAAC;AA+BF,eAAO,MAAM,mBAAmB,+CA+D/B,CAAC"}
+{"version":3,"file":"header-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;;AASrC,wBAKE;AAGF,eAAO,MAAM,iBAAiB,+CAY7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAoBnC,CAAC;AAiCF,eAAO,MAAM,mBAAmB,+CA0E/B,CAAC"}

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

@@ -1,38 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Popover } from '@servicetitan/design-system';
 import { useState } from 'react';
+import { SearchIcon, items, withMemoryRouter } from '../../test/data.stories';
 import { LogoCompanyTitle } from '../logo/logo-company-title';
 import { LogoTitanText } from '../logo/logo-titan-text';
 import { ProfileDropdown } from '../profile-dropdown/profile-dropdown';
+import { HeaderNavigationLink, HeaderNavigationTrigger } from './header-navigation-links';
 import * as Styles from './header-navigation-stories.module.less';
-import { HeaderNavigation, HeaderNavigationLink, HeaderNavigationTrigger } from './';
+import { HeaderNavigation } from './';
 export default {
     title: 'Navigation/HeaderNavigation',
     component: HeaderNavigation,
     parameters: {},
+    decorators: [withMemoryRouter],
 };
-const getItem = (id, data) => (Object.assign({ id, to: '/', title: id[0].toUpperCase() + id.substring(1), hint: id }, (data !== null && data !== void 0 ? data : {})));
-const InventoryIcon = () => (_jsxs("svg", { width: "20", xmlns: "http://www.w3.org/2000/svg", viewBox: "-293 385 24 24", fill: "currentColor", children: [_jsx("polyline", { points: "-288,400.9 -282,404.3 -282,397.6 -288,394.2 -288,400.9 " }), _jsx("path", { d: "M-272,401.5c0,0.4-0.2,0.7-0.5,0.9l-7.9,4.4c-0.2,0.1-0.4,0.2-0.6,0.2s-0.4-0.1-0.6-0.2l-7.9-4.4c-0.3-0.2-0.5-0.5-0.5-0.9v-9c0-0.4,0.2-0.7,0.5-0.9l7.9-4.4c0.2-0.1,0.4-0.2,0.6-0.2s0.4,0.1,0.6,0.2l7.9,4.4c0.3,0.2,0.5,0.5,0.5,0.9V401.5 M-287,392.5 l6,3.4l5.9-3.3l-5.9-3.4L-287,392.5 M-274,400.9v-6.7l-6,3.4v6.7L-274,400.9z" })] }));
-const SearchIcon = () => (_jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { transform: "translate(0,4)", children: _jsx("path", { d: "M0 15.7992V13.9992H12V15.7992H0ZM0 9.49922V7.69922H6V9.49922H0ZM0 3.19922V1.39922H6V3.19922H0ZM22.74 15.7992L17.94 10.9992C17.42 11.3992 16.86 11.6992 16.26 11.8992C15.66 12.0992 15.04 12.1992 14.4 12.1992C12.74 12.1992 11.325 11.6142 10.155 10.4442C8.985 9.27422 8.4 7.85922 8.4 6.19922C8.4 4.53922 8.985 3.12422 10.155 1.95422C11.325 0.784219 12.74 0.199219 14.4 0.199219C16.06 0.199219 17.475 0.784219 18.645 1.95422C19.815 3.12422 20.4 4.53922 20.4 6.19922C20.4 6.83922 20.3 7.45922 20.1 8.05922C19.9 8.65922 19.6 9.21922 19.2 9.73922L24 14.5392L22.74 15.7992ZM14.393 10.3992C15.5577 10.3992 16.55 9.99157 17.37 9.17627C18.19 8.36099 18.6 7.37099 18.6 6.20627C18.6 5.04157 18.1923 4.04922 17.377 3.22922C16.5618 2.40922 15.5718 1.99922 14.407 1.99922C13.2423 1.99922 12.25 2.40687 11.43 3.22217C10.61 4.03745 10.2 5.02745 10.2 6.19217C10.2 7.35687 10.6077 8.34922 11.423 9.16922C12.2382 9.98922 13.2282 10.3992 14.393 10.3992Z", fill: "white" }) }) }));
-const items = {
-    calendar: getItem('calendar', { iconName: 'event' }),
-    calls: getItem('calls', { iconName: 'local_phone', isActive: true, counter: 12 }),
-    dashboard: getItem('dashboard', { iconName: 'odometer', isActive: true }),
-    dispatch: getItem('dispatch', { iconName: 'location_disabled', counter: 1 }),
-    fleet: getItem('fleet', { iconName: 'fleet-pro', title: 'Fleet Pro' }),
-    followUps: getItem('followUps', { iconName: 'flag', title: 'Follow Ups' }),
-    inventory: getItem('inventory', { iconName: 'toys' }),
-    purchasing: getItem('purchasing', { iconComponent: InventoryIcon }),
-    accounting: getItem('accounting', { iconName: 'assignment' }),
-    marketing: getItem('marketing', { iconName: 'bullhorn' }),
-    priceBook: getItem('priceBook', { iconName: 'book' }),
-    pointOfSale: getItem('pointOfSale', { iconName: 'cash-register' }),
-    projects: getItem('projects', { iconName: 'folder_special' }),
-    reports: getItem('reports', { iconName: 'poll' }),
-};
-const NavLinkMock = props => (_jsx("a", { href: props.to, target: props.target, onClick: e => {
-        e.preventDefault();
-    }, className: props.className, children: props.children }));
+const SvgIcon = undefined;
 export const defaultNavigation = () => (_jsx(HeaderNavigation, { left: _jsx(LogoCompanyTitle, { className: "m-l-1", fill: "#fff" }), items: [
         items.dashboard,
         items.calendar,
@@ -40,7 +22,7 @@ export const defaultNavigation = () => (_jsx(HeaderNavigation, { left: _jsx(Logo
         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,
@@ -49,10 +31,10 @@ export const withLogoTextAndOverflow = () => (_jsx(HeaderNavigation, { left: _js
         items.dispatch,
         items.purchasing,
         items.fleet,
-    ], itemsOverflow: [items.calls, items.accounting, items.purchasing, items.dispatch], navigationComponent: NavLinkMock }));
+    ], itemsOverflow: [items.calls, items.accounting, items.purchasing, items.dispatch] }));
 const HelpCenterButton = () => {
     const [open, setOpen] = useState(false);
-    return (_jsx(Popover, { onClickOutside: () => setOpen(false), open: open, direction: "bl", width: "xs", trigger: _jsx(HeaderNavigationTrigger, { id: "help", iconName: "help_outline", onClick: () => setOpen(true) }), portal: true, children: "help center" }));
+    return (_jsx(Popover, { onClickOutside: () => setOpen(false), open: open, direction: "bl", width: "xs", trigger: _jsx(HeaderNavigationTrigger, { id: "help", iconName: "help_outline", onClick: () => setOpen(true), icon: SvgIcon, iconActive: SvgIcon }), portal: true, children: "help center" }));
 };
 const TimeZoneOffset = () => (_jsx("div", { className: "fs-2 ff-default p-r-2", children: _jsx("span", { children: "EST (-9 hrs)" }) }));
 export const withAllMonolithData = () => (_jsxs(HeaderNavigation, { left: _jsx(LogoCompanyTitle, { className: "m-l-1", fill: "#fff" }), items: [
@@ -68,5 +50,5 @@ export const withAllMonolithData = () => (_jsxs(HeaderNavigation, { left: _jsx(L
         items.priceBook,
         items.pointOfSale,
         items.reports,
-    ], navigationComponent: NavLinkMock, children: [_jsx(TimeZoneOffset, {}), _jsx(HeaderNavigationTrigger, { id: "dialpad", iconName: "phone", counter: 2 }), _jsx(HeaderNavigationLink, { id: "search", to: "https://google.com", target: "_blank", iconComponent: SearchIcon, hint: "Search: for all the questions" }), _jsx(HelpCenterButton, {}), _jsx(HeaderNavigationTrigger, { id: "titanAdvisor", iconName: "rocket", iconClassName: Styles.rocketIcon }), _jsx(HeaderNavigationLink, { id: "settings", to: "https://google.com", target: "_blank", iconName: "settings", "aria-label": "search", hint: "Settings", isActive: true }), _jsxs(ProfileDropdown, { children: [_jsx(ProfileDropdown.Link, { id: "tasks", to: "https://googgle.com", counter: 10, children: "Task Management" }), _jsx(ProfileDropdown.Divider, {}), _jsxs(ProfileDropdown.Link, { id: "sign-out", to: "https://googgle.com", children: ["Sign Out ", _jsx("span", { className: "c-neutral-100 m-l-half t-truncate", children: "James Bond" })] }), _jsx(ProfileDropdown.Section, { id: "userid", className: "c-neutral-100 fs-1", children: "User ID: 007" })] })] }));
+    ], children: [_jsx(TimeZoneOffset, {}), _jsx(HeaderNavigationTrigger, { id: "dialpad", iconName: "phone", counter: 2, icon: SvgIcon, iconActive: SvgIcon }), _jsx(HeaderNavigationLink, { id: "search", to: "https://google.com", target: "_blank", iconComponent: SearchIcon, hint: "Search: for all the questions", icon: SvgIcon, iconActive: SvgIcon }), _jsx(HelpCenterButton, {}), _jsx(HeaderNavigationTrigger, { id: "titanAdvisor", iconName: "rocket", iconClassName: Styles.rocketIcon, icon: SvgIcon, iconActive: SvgIcon }), _jsx(HeaderNavigationLink, { id: "settings", to: "https://google.com", target: "_blank", iconName: "settings", "aria-label": "search", hint: "Settings", isActive: true, icon: SvgIcon, iconActive: SvgIcon }), _jsxs(ProfileDropdown, { children: [_jsx(ProfileDropdown.Link, { id: "tasks", to: "https://googgle.com", counter: 10, children: "Task Management" }), _jsx(ProfileDropdown.Divider, {}), _jsxs(ProfileDropdown.Link, { id: "sign-out", to: "https://googgle.com", children: ["Sign Out ", _jsx("span", { className: "c-neutral-100 m-l-half t-truncate", children: "James Bond" })] }), _jsx(ProfileDropdown.Section, { id: "userid", className: "c-neutral-100 fs-1", children: "User ID: 007" })] })] }));
 //# sourceMappingURL=header-navigation.stories.js.map

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/header-navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/header-navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

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

@@ -1,6 +1,7 @@
 declare const _default: {
     title: string;
     parameters: {};
+    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default _default;
 export declare const LeftNavLayout: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"layout.stories.d.ts","sourceRoot":"","sources":["../../src/components/layout.stories.tsx"],"names":[],"mappings":";;;;AAMA,wBAGE;AAEF,eAAO,MAAM,aAAa,+CAUzB,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAUnC,CAAC"}
+{"version":3,"file":"layout.stories.d.ts","sourceRoot":"","sources":["../../src/components/layout.stories.tsx"],"names":[],"mappings":";;;;;AAOA,wBAIE;AAEF,eAAO,MAAM,aAAa,+CAUzB,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAUnC,CAAC"}

package/dist/components/layout.stories.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { WithAllMonolithData, WithAllMonolithDataCommercial, } from './header-navigation/header-navigation-tiny.stories';
-import { DefaultSideNavigation } from './side-navigation/side-navigation.stories';
+import { withAnvil, withMemoryRouter } from '../test/data.stories';
+import { WithAllMonolithData, WithAllMonolithDataCommercial, } from './left-navigation/header-navigation-tiny.stories';
+import { DefaultSideNavigation } from './left-navigation/side-navigation.stories';
 export default {
     title: 'Navigation/Layout',
     parameters: {},
+    decorators: [withMemoryRouter, withAnvil],
 };
 export const LeftNavLayout = () => {
     return (_jsxs("div", { className: "d-f border flex-column", style: { height: '800px' }, children: [_jsx(WithAllMonolithData, {}), _jsxs("div", { className: "flex-grow-1 flex-basis-0 d-f", children: [_jsx(DefaultSideNavigation, {}), _jsx("div", { className: "flex-grow-1 flex-basis-0" })] })] }));

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

@@ -1 +1 @@
-{"version":3,"file":"layout.stories.js","sourceRoot":"","sources":["../../src/components/layout.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EACH,mBAAmB,EACnB,6BAA6B,GAChC,MAAM,oDAAoD,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAElF,eAAe;IACX,KAAK,EAAE,mBAAmB;IAC1B,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAC9B,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,mBAAmB,KAAG,EACvB,eAAK,SAAS,EAAC,8BAA8B,aACzC,KAAC,qBAAqB,KAAG,EACzB,cAAK,SAAS,EAAC,0BAA0B,GAAG,IAC1C,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IACxC,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,6BAA6B,KAAG,EACjC,eAAK,SAAS,EAAC,8BAA8B,aACzC,KAAC,qBAAqB,KAAG,EACzB,cAAK,SAAS,EAAC,0BAA0B,GAAG,IAC1C,IACJ,CACT,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"layout.stories.js","sourceRoot":"","sources":["../../src/components/layout.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,EACH,mBAAmB,EACnB,6BAA6B,GAChC,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAElF,eAAe;IACX,KAAK,EAAE,mBAAmB;IAC1B,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,CAAC,gBAAgB,EAAE,SAAS,CAAC;CAC5C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAC9B,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,mBAAmB,KAAG,EACvB,eAAK,SAAS,EAAC,8BAA8B,aACzC,KAAC,qBAAqB,KAAG,EACzB,cAAK,SAAS,EAAC,0BAA0B,GAAG,IAC1C,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IACxC,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,6BAA6B,KAAG,EACjC,eAAK,SAAS,EAAC,8BAA8B,aACzC,KAAC,qBAAqB,KAAG,EACzB,cAAK,SAAS,EAAC,0BAA0B,GAAG,IAC1C,IACJ,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/left-navigation/header-navigation-tiny-links.d.ts

@@ -0,0 +1,16 @@
+import { IconProps } from '@servicetitan/anvil2';
+import { FC } from 'react';
+import { HeaderNavigationLinkProps, HeaderNavigationTriggerProps } from '../../utils/navigation';
+import { CounterTagPropsType } from '../counter-tag';
+/** Content for navigation items */
+export declare const HeaderNavigationItemContent: FC<{
+    counter?: CounterTagPropsType;
+    counterClassName?: string;
+    icon: IconProps['svg'] | undefined;
+    iconActive: IconProps['svg'] | undefined;
+}>;
+/** Navigation extra item with link */
+export declare const HeaderNavigationLink: FC<HeaderNavigationLinkProps>;
+/** Navigation extra item with icon button */
+export declare const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps>;
+//# sourceMappingURL=header-navigation-tiny-links.d.ts.map

package/dist/components/left-navigation/header-navigation-tiny-links.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-navigation-tiny-links.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/header-navigation-tiny-links.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,EAAE,EAAE,EAAwB,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,yBAAyB,EAAE,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AAGjG,OAAO,EAAc,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAGjE,mCAAmC;AACnC,eAAO,MAAM,2BAA2B,EAAE,EAAE,CAAC;IACzC,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACnC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;CAC5C,CAoBA,CAAC;AAEF,sCAAsC;AACtC,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAmC9D,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAiCpE,CAAC"}

package/dist/components/left-navigation/header-navigation-tiny-links.js

@@ -0,0 +1,43 @@
+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 { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@servicetitan/anvil2';
+import classNames from 'classnames';
+import { Fragment, useContext } from 'react';
+import { NavigationComponentContext } from '../../utils/navigation-context';
+import { withTooltip } from '../../utils/with-tooltip';
+import { CounterTag } from '../counter-tag';
+import * as Styles from './header-navigation-tiny.module.less';
+/** Content for navigation items */
+export const HeaderNavigationItemContent = ({ counter, counterClassName, icon, iconActive }) => {
+    return (_jsxs(Fragment, { children: [!!icon && _jsx(Icon, { svg: icon, className: Styles.navigationIcon }), !!iconActive && (_jsx(Icon, { svg: iconActive, className: classNames(Styles.navigationIcon, Styles.navigationIconActive) })), !!counter && (_jsx(CounterTag, { data: counter, className: classNames(Styles.navigationItemCounter, counterClassName), longClassName: Styles.navigationItemCounterLong }))] }));
+};
+/** Navigation extra item with link */
+export const HeaderNavigationLink = (_a) => {
+    var { id, to, hint, tooltip, counter, className, icon, iconActive, isActive, target } = _a, rest = __rest(_a, ["id", "to", "hint", "tooltip", "counter", "className", "icon", "iconActive", "isActive", "target"]);
+    const NavigationComponent = useContext(NavigationComponentContext);
+    return withTooltip(_createElement(NavigationComponent, Object.assign({ "data-cy": `navigation-link-${id}`, "data-pendo": `navigation-link-${id}` }, rest, { key: id, to: to, title: hint, className: classNames(Styles.navigationLink, className, {
+            [Styles.navigationItemActive]: isActive === true,
+            [Styles.navigationItemIconState]: !!icon && !!iconActive,
+        }), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.navigationItemActive, target: target }),
+        _jsx(HeaderNavigationItemContent, { counter: counter, icon: icon, iconActive: iconActive })), tooltip);
+};
+/** Navigation extra item with icon button */
+export const HeaderNavigationTrigger = (_a) => {
+    var { id, className, counter, icon, iconActive, isActive, hint, tooltip, title, titleClassName } = _a, rest = __rest(_a, ["id", "className", "counter", "icon", "iconActive", "isActive", "hint", "tooltip", "title", "titleClassName"]);
+    return withTooltip(_jsx("div", Object.assign({ "data-cy": `navigation-trigger-${id}`, "data-pendo": `navigation-trigger-${id}` }, rest, { title: hint, className: classNames(Styles.navigationLink, {
+            [Styles.navigationItemActive]: isActive === true,
+            [Styles.navigationItemIconState]: !!icon && !!iconActive,
+        }, 'cursor-pointer', className), children: _jsx(HeaderNavigationItemContent, { counter: counter, icon: icon, iconActive: iconActive }) })), tooltip);
+};
+//# sourceMappingURL=header-navigation-tiny-links.js.map

package/dist/components/left-navigation/header-navigation-tiny-links.js.map

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

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

@@ -0,0 +1,23 @@
+import { FC, ReactElement, ReactNode } from 'react';
+export interface HeaderNavigationTinyProps {
+    /** container class name */
+    className?: string;
+    /** extra navigation */
+    right?: ReactNode;
+    /** extra navigation container class name */
+    rightClassName?: string;
+    /** container id */
+    id?: string;
+    /** left content (usually used for logo) */
+    left?: ReactElement;
+    /** left container class name */
+    leftClassName?: string;
+    /** center content */
+    center?: ReactElement;
+    /** center container class name */
+    centerClassName?: string;
+    /** minimal width for navigation bar */
+    minWidth?: number;
+}
+export declare const HeaderNavigationTiny: FC<HeaderNavigationTinyProps>;
+//# sourceMappingURL=header-navigation-tiny.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-navigation-tiny.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/header-navigation-tiny.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpD,MAAM,WAAW,yBAAyB;IACtC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2CAA2C;IAC3C,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAuC9D,CAAC"}

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import * as Styles from './header-navigation-tiny.module.less';
+export const HeaderNavigationTiny = ({ className, id, left, leftClassName, right, rightClassName, center, centerClassName, minWidth = 800, }) => {
+    return (_jsxs("div", { className: classNames(Styles.headerTiny, className), style: { minWidth: `${minWidth}px` }, id: id, "data-cy": "header-navigation", children: [_jsx("div", { className: classNames(Styles.heTopLeft, leftClassName), "data-cy": "navigation-left", children: left }), _jsx("div", { className: classNames(Styles.heTopCenter, centerClassName), "data-cy": "navigation-center", children: center }), _jsx("div", { className: classNames('d-f flex-row justify-content-end align-items-center', Styles.heTopRight, rightClassName), "data-cy": "navigation-right", children: right })] }));
+};
+//# sourceMappingURL=header-navigation-tiny.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-navigation-tiny.js","sourceRoot":"","sources":["../../../src/components/left-navigation/header-navigation-tiny.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,KAAK,MAAM,MAAM,sCAAsC,CAAC;AAuB/D,MAAM,CAAC,MAAM,oBAAoB,GAAkC,CAAC,EAChE,SAAS,EACT,EAAE,EACF,IAAI,EACJ,aAAa,EACb,KAAK,EACL,cAAc,EACd,MAAM,EACN,eAAe,EACf,QAAQ,GAAG,GAAG,GACjB,EAAE,EAAE;IACD,OAAO,CACH,eACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,UAAU,EAAE,SAAS,CAAC,EACnD,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,QAAQ,IAAI,EAAE,EACpC,EAAE,EAAE,EAAE,aACE,mBAAmB,aAE3B,cAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE,aAAa,CAAC,aAAU,iBAAiB,YACjF,IAAI,GACH,EACN,cACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,WAAW,EAAE,eAAe,CAAC,aAClD,mBAAmB,YAE1B,MAAM,GACL,EACN,cACI,SAAS,EAAE,UAAU,CACjB,qDAAqD,EACrD,MAAM,CAAC,UAAU,EACjB,cAAc,CACjB,aACO,kBAAkB,YAEzB,KAAK,GACJ,IACJ,CACT,CAAC;AACN,CAAC,CAAC"}

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

@@ -0,0 +1,109 @@
+/* stylelint-disable no-descending-specificity */
+@import (reference) '@servicetitan/tokens/core/tokens.less';
+
+@size-links-tiny: 24px;
+
+.header-tiny {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 48px;
+
+    background-color: @color-white;
+    color: @color-black;
+
+    & > * {
+        overflow-y: hidden;
+    }
+
+    .he-top-left {
+        grid-column: span 1;
+    }
+
+    .he-top-center {
+        grid-column: span 1;
+    }
+
+    .he-top-right {
+        grid-column: span 1;
+
+        & > * {
+            color: @color-black;
+        }
+    }
+
+    :global(.profile-dropdown-image) {
+        height: 24px;
+        width: 24px;
+    }
+
+    :global(.profile-dropdown-trigger) {
+        height: 32px;
+        font-size: @size-links-tiny;
+    }
+
+    .navigation-link {
+        margin: 6px 2px;
+        padding: 6px 6px;
+        border-radius: 12px;
+        font-size: @size-links-tiny;
+        color: inherit;
+
+        &.navigation-item-active:not(.navigation-item-overflow) {
+            background-color: @color-blue-100 !important;
+            color: @color-blue-500 !important;
+        }
+        &:hover:not(.navigation-item-active):not(.navigation-item-overflow) {
+            background-color: rgba(0, 0, 0, 0.12) !important;
+        }
+
+        &.navigation-item-icon-state.navigation-item-active {
+            .navigation-icon:not(.navigation-icon-active) {
+                display: none;
+            }
+
+            .navigation-icon.navigation-icon-active[data-anv][data-anv] {
+                display: block;
+            }
+        }
+    }
+
+    .navigation-icon[data-anv][data-anv] {
+        display: inline-block;
+        color: inherit;
+        height: 24px;
+        width: 24px;
+
+        > svg {
+            height: @size-links-tiny;
+            width: @size-links-tiny;
+        }
+
+        &.navigation-icon-active {
+            display: none;
+        }
+    }
+}
+
+.navigation-link {
+    // styles specific to extra nav links
+    color: @color-black;
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    text-wrap: nowrap;
+
+    .navigation-item-counter {
+        color: @color-white;
+        font-weight: @font-weight-semibold;
+        font-size: 8px !important;
+        min-width: 12px;
+        position: absolute;
+        top: 4px;
+        right: -2px;
+    }
+
+    &.navigation-item-counter-long {
+        right: -8px;
+    }
+}

package/dist/components/{header-navigation → left-navigation}/header-navigation-tiny.stories.d.ts

@@ -1,12 +1,12 @@
 import { FC } from 'react';
 declare const _default: {
     title: string;
-    component: FC<import("./header-navigation").HeaderNavigationTinyProps>;
+    component: FC<import("./header-navigation-tiny").HeaderNavigationTinyProps>;
     parameters: {};
     decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default _default;
-export declare const defaultNavigation: () => import("react/jsx-runtime").JSX.Element;
+export declare const DefaultTinyNavigation: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithAllMonolithData: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithAllMonolithDataCommercial: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=header-navigation-tiny.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-navigation-tiny.stories.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/header-navigation-tiny.stories.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;;AAcrC,wBAaE;AAEF,eAAO,MAAM,qBAAqB,+CAMjC,CAAC;AAQF,eAAO,MAAM,mBAAmB,+CA4D/B,CAAC;AAEF,eAAO,MAAM,6BAA6B,+CA+DzC,CAAC"}

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SvgSearch from '@servicetitan/anvil2/assets/icons/material/round/search.svg';
+import SvgSettingsActive from '@servicetitan/anvil2/assets/icons/st/gnav_settings_active.svg';
+import SvgSettings from '@servicetitan/anvil2/assets/icons/st/gnav_settings_inactive.svg';
+import SvgRocketActive from '@servicetitan/anvil2/assets/icons/st/gnav_titan_advisor_active.svg';
+import SvgRocket from '@servicetitan/anvil2/assets/icons/st/gnav_titan_advisor_inactive.svg';
+import { Input, Stack } from '@servicetitan/design-system';
+import { Fragment } from 'react';
+import { CallsNavigationTrigger, SearchIcon, withAnvil, withMemoryRouter, } from '../../test/data.stories';
+import * as Styles from '../header-navigation/header-navigation-stories.module.less';
+import { LogoCompanyTitle } from '../logo/logo-company-title';
+import { LogoTitan, LogoTitanTitle } from '../logo/logo-titan-text';
+import { ProfileDropdown } from '../profile-dropdown/profile-dropdown';
+import { HeaderNavigationTiny } from './header-navigation-tiny';
+import { HeaderNavigationLink } from './header-navigation-tiny-links';
+export default {
+    title: 'Navigation/HeaderNavigationTiny',
+    component: HeaderNavigationTiny,
+    parameters: {},
+    decorators: [
+        withMemoryRouter,
+        withAnvil,
+        (Story) => (_jsx("div", { className: "border", style: { height: '500px' }, children: _jsx(Story, {}) })),
+    ],
+};
+export const DefaultTinyNavigation = () => (_jsx(HeaderNavigationTiny, { className: "border-bottom", left: _jsx(LogoCompanyTitle, { className: "m-l-1", size: "150" }), leftClassName: "d-f align-items-center" }));
+const TimeZoneOffset = () => (_jsx("div", { className: "fs-2 ff-default p-r-1", children: _jsx("span", { children: "EST (-9 hrs)" }) }));
+export const WithAllMonolithData = () => (_jsx(HeaderNavigationTiny, { className: "border-bottom", left: _jsx(LogoCompanyTitle, { className: "m-l-1", size: "150" }), leftClassName: "d-f align-items-center", right: _jsxs(Fragment, { children: [_jsx(TimeZoneOffset, {}), _jsx(HeaderNavigationLink, { id: "search", to: "https://google.com", target: "_blank", iconComponent: SearchIcon, hint: "Search: for all the questions", tooltip: "Search", icon: SvgSearch, iconActive: SvgSearch }), _jsx(CallsNavigationTrigger, {}), _jsx(HeaderNavigationLink, { id: "titanAdvisor", to: "titanAdvisor", iconName: "rocket", iconClassName: Styles.rocketIcon, icon: SvgRocket, iconActive: SvgRocketActive }), _jsx(HeaderNavigationLink, { id: "settings", to: "settings", target: "_blank", iconName: "settings", "aria-label": "search", hint: "Settings", icon: SvgSettings, iconActive: SvgSettingsActive }), _jsxs(ProfileDropdown, { children: [_jsx(ProfileDropdown.Link, { id: "tasks", to: "https://googgle.com", counter: 10, children: "Task Management" }), _jsx(ProfileDropdown.Divider, {}), _jsxs(ProfileDropdown.Link, { id: "sign-out", to: "https://googgle.com", children: ["Sign Out", ' ', _jsx("span", { className: "c-neutral-100 m-l-half t-truncate", children: "James Bond" })] }), _jsx(ProfileDropdown.Section, { id: "userid", className: "c-neutral-100 fs-1", children: "User ID: 007" })] })] }), center: _jsx(Input, { placeholder: "Search smth", size: "xsmall", className: "w-100" }), centerClassName: "d-f align-items-center" }));
+export const WithAllMonolithDataCommercial = () => (_jsx(HeaderNavigationTiny, { className: "border-bottom", left: _jsxs(Stack, { alignItems: "center", children: [_jsx(LogoTitan, { mantleFill: "#2270EE", className: "p-x-half", size: 48 }), _jsx(LogoTitanTitle, { children: "Commercial" })] }), leftClassName: "d-f align-items-center", right: _jsxs(Fragment, { children: [_jsx(TimeZoneOffset, {}), _jsx(HeaderNavigationLink, { id: "search", to: "https://google.com", target: "_blank", iconComponent: SearchIcon, hint: "Search: for all the questions", icon: SvgSearch, iconActive: SvgSearch }), _jsx(CallsNavigationTrigger, {}), _jsx(HeaderNavigationLink, { id: "titanAdvisor", to: "titanAdvisor", iconName: "rocket", iconClassName: Styles.rocketIcon, icon: SvgRocket, iconActive: SvgRocketActive }), _jsx(HeaderNavigationLink, { id: "settings", to: "settings", iconName: "settings", "aria-label": "search", hint: "Settings", icon: SvgSettings, iconActive: SvgSettingsActive }), _jsxs(ProfileDropdown, { children: [_jsx(ProfileDropdown.Link, { id: "tasks", to: "https://googgle.com", counter: 10, children: "Task Management" }), _jsx(ProfileDropdown.Divider, {}), _jsxs(ProfileDropdown.Link, { id: "sign-out", to: "https://googgle.com", children: ["Sign Out", ' ', _jsx("span", { className: "c-neutral-100 m-l-half t-truncate", children: "James Bond" })] }), _jsx(ProfileDropdown.Section, { id: "userid", className: "c-neutral-100 fs-1", children: "User ID: 007" })] })] }), center: _jsx(Input, { placeholder: "Search smth", size: "xsmall", className: "w-100" }), centerClassName: "d-f align-items-center" }));
+//# sourceMappingURL=header-navigation-tiny.stories.js.map

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

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

package/dist/components/left-navigation/index.d.ts

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

package/dist/components/left-navigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC"}

package/dist/components/left-navigation/index.js

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

package/dist/components/left-navigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/left-navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC"}

package/dist/components/{side-navigation → left-navigation}/side-navigation.d.ts

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import { FC } from 'react';
 import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
 export interface SideNavigationProps {
     /** container class name */
@@ -17,20 +17,9 @@ export interface SideNavigationProps {
     onExpandedChange(expanded: boolean): void;
 }
 export declare const SideNavigation: FC<SideNavigationProps>;
-interface SideNavigationItemProps extends HeaderNavigationItemData {
-    expanded?: boolean;
-}
-/** Side Navigation menu item */
-export declare const SideNavigationItem: FC<SideNavigationItemProps>;
 /** Side Navigation options toggle */
 export declare const SideNavigationOptionsToggle: FC<{
     expanded?: boolean;
     onExpandedChange(expanded: boolean): void;
 }>;
-/** Side Navigation options popover */
-export declare const SideNavigationOptionsPopover: FC<PropsWithChildren<{
-    expanded?: boolean;
-    onExpandedChange(expanded: boolean): void;
-}>>;
-export {};
 //# sourceMappingURL=side-navigation.d.ts.map

package/dist/components/left-navigation/side-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAMzF,MAAM,WAAW,mBAAmB;IAChC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4BAA4B;IAC5B,KAAK,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACnC,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACtC,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAChD,4BAA4B;IAC5B,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAoDlD,CAAC;AAsEF,qCAAqC;AACrC,eAAO,MAAM,2BAA2B,EAAE,EAAE,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C,CAgBI,CAAC"}

package/dist/components/left-navigation/side-navigation.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@servicetitan/anvil2';
+import SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';
+import SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';
+import classNames from 'classnames';
+import { Fragment } from 'react';
+import { DefaultNavLinkComponent } from '../../utils/navigation-context';
+import { withTooltip } from '../../utils/with-tooltip';
+import { CounterTag } from '../counter-tag';
+import * as Styles from './side-navigation.module.less';
+export const SideNavigation = ({ className, expanded, id, items, itemsTop, navigationComponent = DefaultNavLinkComponent, onExpandedChange, }) => {
+    return (_jsxs("div", { className: classNames(Styles.sideNav, expanded ? Styles.sideNavExpanded : Styles.sideNavSlim, className), id: id, "data-cy": "side-navigation", children: [!!(itemsTop === null || itemsTop === void 0 ? void 0 : itemsTop.length) && (_jsxs(Fragment, { children: [_jsx("div", { className: Styles.sideNavTop, "data-cy": "navigation-items-top", children: itemsTop.map(item => (_jsx(SideNavigationItem, Object.assign({ expanded: expanded, navigationComponent: navigationComponent }, item), item.id))) }), _jsx("div", { className: Styles.divider })] })), _jsx("div", { className: Styles.sideNavContent, "data-cy": "navigation-items", children: items === null || items === void 0 ? void 0 : items.map(item => (_jsx(SideNavigationItem, Object.assign({ expanded: expanded, navigationComponent: navigationComponent }, item), item.id))) }), _jsx("div", { className: Styles.sideNavBottom, children: _jsx(SideNavigationOptionsToggle, { expanded: expanded, onExpandedChange: onExpandedChange }) })] }));
+};
+/** Side Navigation menu item */
+const SideNavigationItem = ({ id, to, title, hint, counter, className, iconClassName, iconComponent: IconComponent, icon, iconActive, isActive, navigationComponent: NavigationComponent, expanded, }) => {
+    return withTooltip(_jsxs(NavigationComponent, { "data-cy": `navigation-item-${id}`, "data-pendo": `navigation-item-${id}`, to: to, title: hint, className: classNames(Styles.navigationItem, className, {
+            [Styles.navigationItemActive]: isActive === true,
+            [Styles.navigationItemIconState]: !!icon && !!iconActive,
+        }), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.navigationItemActive, children: [IconComponent ? (_jsx("i", { className: classNames(Styles.navigationIcon, iconClassName), children: _jsx(IconComponent, {}) })) : (_jsxs(Fragment, { children: [icon && (_jsx(Icon, { svg: icon, className: classNames(Styles.navigationIcon, iconClassName) })), iconActive && (_jsx(Icon, { svg: iconActive, className: classNames(Styles.navigationIcon, Styles.navigationIconActive, iconClassName) }))] })), !!expanded && _jsx("span", { className: Styles.navigationItemText, children: title }), !!counter && _jsx(CounterTag, { data: counter, className: Styles.navigationItemCounter })] }, id), expanded ? undefined : title, 'right');
+};
+/** Side Navigation options toggle */
+export const SideNavigationOptionsToggle = ({ expanded, onExpandedChange }) => withTooltip(_jsxs("div", { "data-cy": "navigation-left-options", "data-pendo": "navigation-left-options", className: classNames(Styles.optionsItem), onClick: () => onExpandedChange(!expanded), children: [_jsx("div", { className: Styles.optionsIconWrapper, children: _jsx(Icon, { className: Styles.optionsIcon, svg: expanded ? SvgCollapse : SvgExpand }) }), !!expanded && _jsx("span", { className: Styles.optionsItemText, children: "Collapse Menu" })] }), expanded ? undefined : 'Expand Menu', 'right');
+//# sourceMappingURL=side-navigation.js.map

package/dist/components/left-navigation/side-navigation.js.map

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