@servicetitan/navigation 12.0.2 → 13.0.0-canary.256.5761ed1.0

package/dist/components/titan-layout/layout-sidebar-links.js

@@ -3,43 +3,58 @@ import { getCounterTag } from '../../utils/side-nav';
 import { useTitanLayoutContext } from './layout-context';
 import { InternalSideNavigationLink, InternalSideNavigationTrigger } from './layout-sidebar-links-internal';
 import { useNotificationsContext } from './notifications-context';
-const WrappedLink = ({ children, wrapper: WrapperComponent })=>{
+const WrappedLink = ({ children, isMobile, wrapper: WrapperComponent })=>{
     const { sidebar } = useTitanLayoutContext();
     return /*#__PURE__*/ _jsx(WrapperComponent, {
+        isMobile: isMobile,
         context: sidebar,
         children: children
     });
 };
-/** Side Navigation menu link */ export function TitanLayoutSidebarLink({ wrapper, ...props }) {
+/** Side Navigation menu link */ export function LayoutSidebarLink({ id, to, title, isActive, icon, iconActive, counter, tag, className, tooltip, wrapper, extra, side, ...rest }) {
     const { NavigationComponent, breakpoint: { isMobile } } = useTitanLayoutContext();
     const { onNotificationsUpdate } = useNotificationsContext();
-    const tag = getCounterTag(props.counter, props.tag);
-    onNotificationsUpdate(props.id, !!tag);
+    var _side_counter;
+    const tagData = getCounterTag((_side_counter = side === null || side === void 0 ? void 0 : side.counter) !== null && _side_counter !== void 0 ? _side_counter : counter, tag);
+    onNotificationsUpdate(id, !!tagData);
     const element = /*#__PURE__*/ _jsx(InternalSideNavigationLink, {
-        ...props,
+        id: id,
+        to: to,
+        title: title,
+        isActive: isActive,
+        icon: icon,
+        iconActive: iconActive,
+        tag: tagData,
+        className: className,
+        ...rest,
         navigationComponent: NavigationComponent,
-        submenuExpanded: undefined,
-        dataPrefix: "navigation-item",
-        tag: tag
+        submenuExpanded: undefined
     });
-    return wrapper && !isMobile ? /*#__PURE__*/ _jsx(WrappedLink, {
+    return wrapper ? /*#__PURE__*/ _jsx(WrappedLink, {
+        isMobile: isMobile,
         wrapper: wrapper,
         children: element
     }) : element;
 }
-/** Side Navigation menu trigger */ export function TitanLayoutSidebarTrigger({ wrapper, onMobileClick, onClick, ...props }) {
+/** Side Navigation menu trigger */ export function LayoutSidebarTrigger({ id, title, isActive, icon, iconActive, counter, tag, className, tooltip, wrapper, extra, side, ...rest }) {
     const { breakpoint: { isMobile } } = useTitanLayoutContext();
     const { onNotificationsUpdate } = useNotificationsContext();
-    const tag = getCounterTag(props.counter, props.tag);
-    onNotificationsUpdate(props.id, !!tag);
+    var _side_counter;
+    const tagData = getCounterTag((_side_counter = side === null || side === void 0 ? void 0 : side.counter) !== null && _side_counter !== void 0 ? _side_counter : counter, tag);
+    onNotificationsUpdate(id, !!tagData);
     const element = /*#__PURE__*/ _jsx(InternalSideNavigationTrigger, {
-        ...props,
-        submenuExpanded: undefined,
-        dataPrefix: "navigation-trigger",
-        tag: tag,
-        onClick: isMobile && !!onMobileClick ? onMobileClick : onClick
+        id: id,
+        title: title,
+        isActive: isActive,
+        icon: icon,
+        iconActive: iconActive,
+        tag: tagData,
+        className: className,
+        ...rest,
+        submenuExpanded: undefined
     });
-    return wrapper && (!isMobile || !onMobileClick) ? /*#__PURE__*/ _jsx(WrappedLink, {
+    return wrapper ? /*#__PURE__*/ _jsx(WrappedLink, {
+        isMobile: isMobile,
         wrapper: wrapper,
         children: element
     }) : element;

package/dist/components/titan-layout/layout-sidebar-links.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar-links.tsx"],"sourcesContent":["import { FC, ReactElement } from 'react';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { TitanLayoutSidebarLinkProps, TitanLayoutSidebarTriggerProps } from './interface';\nimport { useTitanLayoutContext } from './layout-context';\nimport {\n    InternalSideNavigationLink,\n    InternalSideNavigationTrigger,\n} from './layout-sidebar-links-internal';\nimport { useNotificationsContext } from './notifications-context';\n\nconst WrappedLink: FC<{\n    children: ReactElement<any>;\n    wrapper: NonNullable<TitanLayoutSidebarLinkProps['wrapper']>;\n}> = ({ children, wrapper: WrapperComponent }) => {\n    const { sidebar } = useTitanLayoutContext();\n    return <WrapperComponent context={sidebar}>{children}</WrapperComponent>;\n};\n\n/** Side Navigation menu link */\nexport function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebarLinkProps) {\n    const {\n        NavigationComponent,\n        breakpoint: { isMobile },\n    } = useTitanLayoutContext();\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const tag = getCounterTag(props.counter, props.tag);\n\n    onNotificationsUpdate(props.id, !!tag);\n\n    const element = (\n        <InternalSideNavigationLink\n            {...props}\n            navigationComponent={NavigationComponent}\n            submenuExpanded={undefined}\n            dataPrefix=\"navigation-item\"\n            tag={tag}\n        />\n    );\n\n    return wrapper && !isMobile ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;\n}\n\n/** Side Navigation menu trigger */\nexport function TitanLayoutSidebarTrigger({\n    wrapper,\n    onMobileClick,\n    onClick,\n    ...props\n}: TitanLayoutSidebarTriggerProps) {\n    const {\n        breakpoint: { isMobile },\n    } = useTitanLayoutContext();\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const tag = getCounterTag(props.counter, props.tag);\n\n    onNotificationsUpdate(props.id, !!tag);\n\n    const element = (\n        <InternalSideNavigationTrigger\n            {...props}\n            submenuExpanded={undefined}\n            dataPrefix=\"navigation-trigger\"\n            tag={tag}\n            onClick={isMobile && !!onMobileClick ? onMobileClick : onClick}\n        />\n    );\n    return wrapper && (!isMobile || !onMobileClick) ? (\n        <WrappedLink wrapper={wrapper}>{element}</WrappedLink>\n    ) : (\n        element\n    );\n}\n"],"names":["getCounterTag","useTitanLayoutContext","InternalSideNavigationLink","InternalSideNavigationTrigger","useNotificationsContext","WrappedLink","children","wrapper","WrapperComponent","sidebar","context","TitanLayoutSidebarLink","props","NavigationComponent","breakpoint","isMobile","onNotificationsUpdate","tag","counter","id","element","navigationComponent","submenuExpanded","undefined","dataPrefix","TitanLayoutSidebarTrigger","onMobileClick","onClick"],"mappings":";AACA,SAASA,aAAa,QAAQ,uBAAuB;AAErD,SAASC,qBAAqB,QAAQ,mBAAmB;AACzD,SACIC,0BAA0B,EAC1BC,6BAA6B,QAC1B,kCAAkC;AACzC,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE,MAAMC,cAGD,CAAC,EAAEC,QAAQ,EAAEC,SAASC,gBAAgB,EAAE;IACzC,MAAM,EAAEC,OAAO,EAAE,GAAGR;IACpB,qBAAO,KAACO;QAAiBE,SAASD;kBAAUH;;AAChD;AAEA,8BAA8B,GAC9B,OAAO,SAASK,uBAAuB,EAAEJ,OAAO,EAAE,GAAGK,OAAoC;IACrF,MAAM,EACFC,mBAAmB,EACnBC,YAAY,EAAEC,QAAQ,EAAE,EAC3B,GAAGd;IACJ,MAAM,EAAEe,qBAAqB,EAAE,GAAGZ;IAClC,MAAMa,MAAMjB,cAAcY,MAAMM,OAAO,EAAEN,MAAMK,GAAG;IAElDD,sBAAsBJ,MAAMO,EAAE,EAAE,CAAC,CAACF;IAElC,MAAMG,wBACF,KAAClB;QACI,GAAGU,KAAK;QACTS,qBAAqBR;QACrBS,iBAAiBC;QACjBC,YAAW;QACXP,KAAKA;;IAIb,OAAOV,WAAW,CAACQ,yBAAW,KAACV;QAAYE,SAASA;kBAAUa;SAAyBA;AAC3F;AAEA,iCAAiC,GACjC,OAAO,SAASK,0BAA0B,EACtClB,OAAO,EACPmB,aAAa,EACbC,OAAO,EACP,GAAGf,OAC0B;IAC7B,MAAM,EACFE,YAAY,EAAEC,QAAQ,EAAE,EAC3B,GAAGd;IACJ,MAAM,EAAEe,qBAAqB,EAAE,GAAGZ;IAClC,MAAMa,MAAMjB,cAAcY,MAAMM,OAAO,EAAEN,MAAMK,GAAG;IAElDD,sBAAsBJ,MAAMO,EAAE,EAAE,CAAC,CAACF;IAElC,MAAMG,wBACF,KAACjB;QACI,GAAGS,KAAK;QACTU,iBAAiBC;QACjBC,YAAW;QACXP,KAAKA;QACLU,SAASZ,YAAY,CAAC,CAACW,gBAAgBA,gBAAgBC;;IAG/D,OAAOpB,WAAY,CAAA,CAACQ,YAAY,CAACW,aAAY,kBACzC,KAACrB;QAAYE,SAASA;kBAAUa;SAEhCA;AAER"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar-links.tsx"],"sourcesContent":["import { FC, ReactElement } from 'react';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { TitanLayoutLinkProps, TitanLayoutTriggerProps } from './interface';\nimport { useTitanLayoutContext } from './layout-context';\nimport {\n    InternalSideNavigationLink,\n    InternalSideNavigationTrigger,\n} from './layout-sidebar-links-internal';\nimport { useNotificationsContext } from './notifications-context';\n\nconst WrappedLink: FC<{\n    children: ReactElement<any>;\n    wrapper: NonNullable<TitanLayoutLinkProps['wrapper']>;\n    isMobile: boolean;\n}> = ({ children, isMobile, wrapper: WrapperComponent }) => {\n    const { sidebar } = useTitanLayoutContext();\n    return (\n        <WrapperComponent isMobile={isMobile} context={sidebar}>\n            {children}\n        </WrapperComponent>\n    );\n};\n\n/** Side Navigation menu link */\nexport function LayoutSidebarLink({\n    id,\n    to,\n    title,\n    isActive,\n    icon,\n    iconActive,\n    counter,\n    tag,\n    className,\n\n    tooltip,\n    wrapper,\n    extra,\n    side,\n    ...rest\n}: TitanLayoutLinkProps) {\n    const {\n        NavigationComponent,\n        breakpoint: { isMobile },\n    } = useTitanLayoutContext();\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const tagData = getCounterTag(side?.counter ?? counter, tag);\n\n    onNotificationsUpdate(id, !!tagData);\n\n    const element = (\n        <InternalSideNavigationLink\n            id={id}\n            to={to}\n            title={title}\n            isActive={isActive}\n            icon={icon}\n            iconActive={iconActive}\n            tag={tagData}\n            className={className}\n            {...rest}\n            navigationComponent={NavigationComponent}\n            submenuExpanded={undefined}\n        />\n    );\n\n    return wrapper ? (\n        <WrappedLink isMobile={isMobile} wrapper={wrapper}>\n            {element}\n        </WrappedLink>\n    ) : (\n        element\n    );\n}\n\n/** Side Navigation menu trigger */\nexport function LayoutSidebarTrigger({\n    id,\n    title,\n    isActive,\n    icon,\n    iconActive,\n    counter,\n    tag,\n    className,\n\n    tooltip,\n    wrapper,\n    extra,\n    side,\n    ...rest\n}: TitanLayoutTriggerProps) {\n    const {\n        breakpoint: { isMobile },\n    } = useTitanLayoutContext();\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const tagData = getCounterTag(side?.counter ?? counter, tag);\n\n    onNotificationsUpdate(id, !!tagData);\n\n    const element = (\n        <InternalSideNavigationTrigger\n            id={id}\n            title={title}\n            isActive={isActive}\n            icon={icon}\n            iconActive={iconActive}\n            tag={tagData}\n            className={className}\n            {...rest}\n            submenuExpanded={undefined}\n        />\n    );\n    return wrapper ? (\n        <WrappedLink isMobile={isMobile} wrapper={wrapper}>\n            {element}\n        </WrappedLink>\n    ) : (\n        element\n    );\n}\n"],"names":["getCounterTag","useTitanLayoutContext","InternalSideNavigationLink","InternalSideNavigationTrigger","useNotificationsContext","WrappedLink","children","isMobile","wrapper","WrapperComponent","sidebar","context","LayoutSidebarLink","id","to","title","isActive","icon","iconActive","counter","tag","className","tooltip","extra","side","rest","NavigationComponent","breakpoint","onNotificationsUpdate","tagData","element","navigationComponent","submenuExpanded","undefined","LayoutSidebarTrigger"],"mappings":";AACA,SAASA,aAAa,QAAQ,uBAAuB;AAErD,SAASC,qBAAqB,QAAQ,mBAAmB;AACzD,SACIC,0BAA0B,EAC1BC,6BAA6B,QAC1B,kCAAkC;AACzC,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE,MAAMC,cAID,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,SAASC,gBAAgB,EAAE;IACnD,MAAM,EAAEC,OAAO,EAAE,GAAGT;IACpB,qBACI,KAACQ;QAAiBF,UAAUA;QAAUI,SAASD;kBAC1CJ;;AAGb;AAEA,8BAA8B,GAC9B,OAAO,SAASM,kBAAkB,EAC9BC,EAAE,EACFC,EAAE,EACFC,KAAK,EACLC,QAAQ,EACRC,IAAI,EACJC,UAAU,EACVC,OAAO,EACPC,GAAG,EACHC,SAAS,EAETC,OAAO,EACPd,OAAO,EACPe,KAAK,EACLC,IAAI,EACJ,GAAGC,MACgB;IACnB,MAAM,EACFC,mBAAmB,EACnBC,YAAY,EAAEpB,QAAQ,EAAE,EAC3B,GAAGN;IACJ,MAAM,EAAE2B,qBAAqB,EAAE,GAAGxB;QACJoB;IAA9B,MAAMK,UAAU7B,cAAcwB,CAAAA,gBAAAA,iBAAAA,2BAAAA,KAAML,OAAO,cAAbK,2BAAAA,gBAAiBL,SAASC;IAExDQ,sBAAsBf,IAAI,CAAC,CAACgB;IAE5B,MAAMC,wBACF,KAAC5B;QACGW,IAAIA;QACJC,IAAIA;QACJC,OAAOA;QACPC,UAAUA;QACVC,MAAMA;QACNC,YAAYA;QACZE,KAAKS;QACLR,WAAWA;QACV,GAAGI,IAAI;QACRM,qBAAqBL;QACrBM,iBAAiBC;;IAIzB,OAAOzB,wBACH,KAACH;QAAYE,UAAUA;QAAUC,SAASA;kBACrCsB;SAGLA;AAER;AAEA,iCAAiC,GACjC,OAAO,SAASI,qBAAqB,EACjCrB,EAAE,EACFE,KAAK,EACLC,QAAQ,EACRC,IAAI,EACJC,UAAU,EACVC,OAAO,EACPC,GAAG,EACHC,SAAS,EAETC,OAAO,EACPd,OAAO,EACPe,KAAK,EACLC,IAAI,EACJ,GAAGC,MACmB;IACtB,MAAM,EACFE,YAAY,EAAEpB,QAAQ,EAAE,EAC3B,GAAGN;IACJ,MAAM,EAAE2B,qBAAqB,EAAE,GAAGxB;QACJoB;IAA9B,MAAMK,UAAU7B,cAAcwB,CAAAA,gBAAAA,iBAAAA,2BAAAA,KAAML,OAAO,cAAbK,2BAAAA,gBAAiBL,SAASC;IAExDQ,sBAAsBf,IAAI,CAAC,CAACgB;IAE5B,MAAMC,wBACF,KAAC3B;QACGU,IAAIA;QACJE,OAAOA;QACPC,UAAUA;QACVC,MAAMA;QACNC,YAAYA;QACZE,KAAKS;QACLR,WAAWA;QACV,GAAGI,IAAI;QACRO,iBAAiBC;;IAGzB,OAAOzB,wBACH,KAACH;QAAYE,UAAUA;QAAUC,SAASA;kBACrCsB;SAGLA;AAER"}

package/dist/components/titan-layout/layout-sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAEH,EAAE,EAGF,YAAY,EAGf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAyB,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAavE,MAAM,WAAW,kBAAkB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,YAAY,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAC/C,iBAAiB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3C,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5C,qBAAqB,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC9D;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA4FhD,CAAC"}
+{"version":3,"file":"layout-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAEH,EAAE,EAGF,YAAY,EAGf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAyB,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAavE,MAAM,WAAW,kBAAkB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,YAAY,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAC/C,iBAAiB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3C,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5C,qBAAqB,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC9D;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAkGhD,CAAC"}

package/dist/components/titan-layout/layout-sidebar.js

@@ -49,16 +49,22 @@ export const LayoutSidebar = ({ className, mobile, barExpanded, submenuExpanded,
                             /*#__PURE__*/ _jsx("div", {
                                 "data-cy": "navigation-items",
                                 children: mainItems === null || mainItems === void 0 ? void 0 : mainItems.map((item)=>item.submenu ? /*#__PURE__*/ _jsx(SideNavigationGroupItem, {
+                                        item: item,
                                         barExpanded: mobile ? drawerOpened : barExpanded,
                                         submenuExpanded: !!item.id && submenuExpanded === item.id,
                                         onSubmenuExpand: onSubmenuExpandChange,
-                                        navigationComponent: navigationComponent,
-                                        ...item
+                                        navigationComponent: navigationComponent
                                     }, item.id) : /*#__PURE__*/ _jsx(InternalSideNavigationLink, {
+                                        id: item.id,
+                                        to: item.to,
+                                        title: item.title,
+                                        isActive: item.isActive,
+                                        icon: item.icon,
+                                        iconActive: item.iconActive,
+                                        className: item.className,
+                                        tag: getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag)),
                                         submenuExpanded: undefined,
-                                        navigationComponent: navigationComponent,
-                                        ...item,
-                                        tag: getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag))
+                                        navigationComponent: navigationComponent
                                     }, item.id))
                             }),
                             !!bottom && /*#__PURE__*/ _jsx(SidebarBottom, {
@@ -111,31 +117,38 @@ LayoutSidebar.displayName = 'LayoutSidebar';
     }), appearance === 'expand' ? 'Expand Menu' : appearance === 'collapse' ? 'Collapse Menu' : undefined, {
         placement: 'right'
     });
-/** Side Navigation menu item */ const SideNavigationGroupItem = ({ onSubmenuExpand, barExpanded, submenuExpanded, ...props })=>{
-    var _props_submenu, _props_submenu1;
+/** Side Navigation menu item */ const SideNavigationGroupItem = ({ item, onSubmenuExpand, barExpanded, submenuExpanded, navigationComponent })=>{
+    var _item_submenu, _item_submenu1;
     const onExpandToggle = useCallback((e)=>{
         e.preventDefault();
         e.stopPropagation();
-        if (props.id) {
-            onSubmenuExpand === null || onSubmenuExpand === void 0 ? void 0 : onSubmenuExpand(props.id, !submenuExpanded);
+        if (item.id) {
+            onSubmenuExpand === null || onSubmenuExpand === void 0 ? void 0 : onSubmenuExpand(item.id, !submenuExpanded);
         }
     }, [
-        props.id,
+        item.id,
         submenuExpanded,
         onSubmenuExpand
     ]);
     const { sidebar: { styles: { popoverContent } } } = useTitanLayoutContext();
-    const tag = getSubmenuGroupTag(props.submenu, getCounterTag(props.counter, props.tag));
-    var _props_submenu_groups, _props_submenu_groups1;
+    const tag = getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag));
+    var _item_submenu_groups, _item_submenu_groups1;
     return barExpanded ? /*#__PURE__*/ _jsx(InternalSideNavigationGroup, {
-        ...props,
+        id: item.id,
+        to: item.to,
+        title: item.title,
+        isActive: item.isActive,
+        icon: item.icon,
+        iconActive: item.iconActive,
+        className: item.className,
+        tag: tag,
         submenuExpanded: submenuExpanded,
         onExpandToggle: onExpandToggle,
-        tag: tag,
+        navigationComponent: navigationComponent,
         children: /*#__PURE__*/ _jsx(SideNavigationGroupContent, {
-            parentId: props.id,
-            groups: (_props_submenu_groups = (_props_submenu = props.submenu) === null || _props_submenu === void 0 ? void 0 : _props_submenu.groups) !== null && _props_submenu_groups !== void 0 ? _props_submenu_groups : [],
-            navigationComponent: props.navigationComponent
+            parentId: item.id,
+            groups: (_item_submenu_groups = (_item_submenu = item.submenu) === null || _item_submenu === void 0 ? void 0 : _item_submenu.groups) !== null && _item_submenu_groups !== void 0 ? _item_submenu_groups : [],
+            navigationComponent: navigationComponent
         })
     }) : /*#__PURE__*/ _jsxs(Popover, {
         placement: "right-start",
@@ -146,9 +159,16 @@ LayoutSidebar.displayName = 'LayoutSidebar';
                 children: (triggerProps)=>/*#__PURE__*/ _jsx("div", {
                         ...triggerProps,
                         children: /*#__PURE__*/ _jsx(InternalSideNavigationLink, {
-                            ...props,
+                            id: item.id,
+                            to: item.to,
+                            title: item.title,
+                            isActive: item.isActive,
+                            icon: item.icon,
+                            iconActive: item.iconActive,
+                            className: item.className,
+                            tag: tag,
                             submenuExpanded: undefined,
-                            tag: tag
+                            navigationComponent: navigationComponent
                         })
                     })
             }),
@@ -163,12 +183,12 @@ LayoutSidebar.displayName = 'LayoutSidebar';
                             el: "h4",
                             size: "small",
                             className: "c-white m-b-half-i m-t-1",
-                            children: props.title
+                            children: item.title
                         }),
                         /*#__PURE__*/ _jsx(SideNavigationGroupContent, {
-                            parentId: props.id,
-                            groups: (_props_submenu_groups1 = (_props_submenu1 = props.submenu) === null || _props_submenu1 === void 0 ? void 0 : _props_submenu1.groups) !== null && _props_submenu_groups1 !== void 0 ? _props_submenu_groups1 : [],
-                            navigationComponent: props.navigationComponent
+                            parentId: item.id,
+                            groups: (_item_submenu_groups1 = (_item_submenu1 = item.submenu) === null || _item_submenu1 === void 0 ? void 0 : _item_submenu1.groups) !== null && _item_submenu_groups1 !== void 0 ? _item_submenu_groups1 : [],
+                            navigationComponent: navigationComponent
                         })
                     ]
                 })
@@ -193,7 +213,12 @@ const SideNavigationGroupContent = ({ groups, parentId, navigationComponent })=>
                 children: title
             }, `:group:${parentId}:${index}:title`));
             out.push(...group.links.map((link, index)=>/*#__PURE__*/ _jsx(InternalSideNavigationGroupLink, {
-                    ...link,
+                    id: link.id,
+                    to: link.to,
+                    title: link.title,
+                    isActive: link.isActive,
+                    className: undefined,
+                    tag: getCounterTag(link.counter, link.tag),
                     parentId: parentId,
                     navigationComponent: navigationComponent
                 }, `:${parentId}:${link.id}:${index}`)));

package/dist/components/titan-layout/layout-sidebar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"sourcesContent":["import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';\nimport SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';\nimport SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';\nimport SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';\nimport classNames from 'classnames';\nimport {\n    Children,\n    FC,\n    Fragment,\n    MouseEvent,\n    ReactElement,\n    isValidElement,\n    useCallback,\n} from 'react';\nimport { NavigationItemData, NavigationSubmenuData } from '../../utils/navigation';\nimport { NavLinkComponentProps } from '../../utils/navigation-context';\nimport { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';\nimport { NavigationComponentProps } from './interface-internal';\nimport { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';\nimport {\n    InternalSideNavigationGroup,\n    InternalSideNavigationGroupLink,\n    InternalSideNavigationLink,\n} from './layout-sidebar-links-internal';\nimport * as Styles from './layout-sidebar.module.less';\n\nimport { withTooltip } from './with-tooltip';\n\nexport interface LayoutSidebarProps {\n    className?: string;\n    top?: ReactElement[];\n    bottom?: ReactElement;\n    mainItems?: NavigationItemData[];\n    barExpanded: boolean;\n    submenuExpanded: string | undefined;\n    drawerOpened: boolean;\n    mobile: boolean;\n    navigationComponent: FC<NavLinkComponentProps>;\n    onBarExpandChange(expanded: boolean): void;\n    onDrawerOpenChange(expanded: boolean): void;\n    onSubmenuExpandChange(id: string, expanded: boolean): void;\n}\n\nexport const LayoutSidebar: FC<LayoutSidebarProps> = ({\n    className,\n    mobile,\n    barExpanded,\n    submenuExpanded,\n    drawerOpened,\n    onBarExpandChange,\n    onSubmenuExpandChange,\n    onDrawerOpenChange,\n    mainItems,\n    top,\n    bottom,\n    navigationComponent,\n}) => {\n    const closeDrawer = () => {\n        if (mobile) {\n            onDrawerOpenChange?.(false);\n        }\n    };\n\n    return (\n        <LayoutPlacementContext.Provider value=\"side\">\n            {mobile && drawerOpened && (\n                <div className={Styles.navDrawerBackdrop} onClick={closeDrawer} />\n            )}\n            <div\n                className={classNames(\n                    Styles.nav,\n                    mobile && Styles.navDrawer,\n                    mobile && drawerOpened && Styles.navDrawerOpened,\n                    !mobile && (barExpanded ? Styles.navWide : Styles.navSlim),\n                    className\n                )}\n                data-cy=\"side-navigation\"\n                onClick={closeDrawer}\n            >\n                <ThemeProvider mode=\"dark\" className={Styles.navMain}>\n                    {mobile && (\n                        <div className={Styles.navCloseWrapper}>\n                            <div\n                                className={Styles.navClose}\n                                onClick={() => onBarExpandChange(false)}\n                            >\n                                <Icon svg={SvgClose} size=\"large\" />\n                            </div>\n                        </div>\n                    )}\n                    {!!top?.length && <SidebarTop>{top}</SidebarTop>}\n\n                    <div data-cy=\"navigation-items\">\n                        {mainItems?.map(item =>\n                            item.submenu ? (\n                                <SideNavigationGroupItem\n                                    key={item.id}\n                                    barExpanded={mobile ? drawerOpened : barExpanded}\n                                    submenuExpanded={!!item.id && submenuExpanded === item.id}\n                                    onSubmenuExpand={onSubmenuExpandChange}\n                                    navigationComponent={navigationComponent}\n                                    {...item}\n                                />\n                            ) : (\n                                <InternalSideNavigationLink\n                                    key={item.id}\n                                    submenuExpanded={undefined}\n                                    navigationComponent={navigationComponent}\n                                    {...item}\n                                    tag={getSubmenuGroupTag(\n                                        item.submenu,\n                                        getCounterTag(item.counter, item.tag)\n                                    )}\n                                />\n                            )\n                        )}\n                    </div>\n\n                    {!!bottom && <SidebarBottom>{bottom}</SidebarBottom>}\n                </ThemeProvider>\n\n                {!mobile && (\n                    <div className={Styles.navFooter}>\n                        <div className={Styles.divider} />\n                        <div className={Styles.toggleWrapper}>\n                            <SideNavigationOptionsToggle\n                                appearance={barExpanded ? 'collapse-button' : 'expand'}\n                                onExpandedChange={() => onBarExpandChange(!barExpanded)}\n                            />\n                        </div>\n                    </div>\n                )}\n            </div>\n        </LayoutPlacementContext.Provider>\n    );\n};\nLayoutSidebar.displayName = 'LayoutSidebar';\n\n/** Side Navigation options toggle */\nconst SideNavigationOptionsToggle: FC<{\n    appearance: 'expand' | 'collapse' | 'collapse-button';\n    onExpandedChange?(expanded: boolean): void;\n}> = ({ appearance, onExpandedChange }) =>\n    withTooltip(\n        <div\n            data-cy=\"navigation-left-options\"\n            data-pendo=\"navigation-left-options\"\n            className={classNames(Styles.toggle)}\n            onClick={() => onExpandedChange?.(appearance === 'expand')}\n        >\n            <div className={Styles.toggleContent}>\n                <div className={Styles.toggleIconWrapper}>\n                    <Icon\n                        className={Styles.toggleIcon}\n                        svg={appearance === 'expand' ? SvgExpand : SvgCollapse}\n                    />\n                </div>\n\n                {appearance === 'collapse-button' && (\n                    <span className={Styles.toggleText}>Collapse Menu</span>\n                )}\n            </div>\n        </div>,\n        appearance === 'expand'\n            ? 'Expand Menu'\n            : appearance === 'collapse'\n              ? 'Collapse Menu'\n              : undefined,\n        { placement: 'right' }\n    );\n\n/** Side Navigation menu item */\nconst SideNavigationGroupItem: FC<\n    NavigationItemData & {\n        navigationComponent: FC<NavLinkComponentProps>;\n        barExpanded: boolean;\n        submenuExpanded: boolean;\n        onSubmenuExpand: undefined | ((id: string, expanded: boolean) => void);\n    }\n> = ({ onSubmenuExpand, barExpanded, submenuExpanded, ...props }) => {\n    const onExpandToggle = useCallback(\n        (e: MouseEvent<never>) => {\n            e.preventDefault();\n            e.stopPropagation();\n\n            if (props.id) {\n                onSubmenuExpand?.(props.id, !submenuExpanded);\n            }\n        },\n        [props.id, submenuExpanded, onSubmenuExpand]\n    );\n    const {\n        sidebar: {\n            styles: { popoverContent },\n        },\n    } = useTitanLayoutContext();\n\n    const tag = getSubmenuGroupTag(props.submenu, getCounterTag(props.counter, props.tag));\n\n    return barExpanded ? (\n        <InternalSideNavigationGroup\n            {...props}\n            submenuExpanded={submenuExpanded}\n            onExpandToggle={onExpandToggle}\n            tag={tag}\n        >\n            <SideNavigationGroupContent\n                parentId={props.id}\n                groups={props.submenu?.groups ?? []}\n                navigationComponent={props.navigationComponent}\n            />\n        </InternalSideNavigationGroup>\n    ) : (\n        <Popover placement=\"right-start\" openOnHover delay={500}>\n            <Popover.Trigger>\n                {(triggerProps: any) => (\n                    <div {...triggerProps}>\n                        <InternalSideNavigationLink\n                            {...props}\n                            submenuExpanded={undefined}\n                            tag={tag}\n                        />\n                    </div>\n                )}\n            </Popover.Trigger>\n            <Popover.Content style={popoverContent} className=\"z-global-nav-i\">\n                <div className={Styles.submenuPopover}>\n                    <Text\n                        variant=\"headline\"\n                        el=\"h4\"\n                        size=\"small\"\n                        className=\"c-white m-b-half-i m-t-1\"\n                    >\n                        {props.title}\n                    </Text>\n                    <SideNavigationGroupContent\n                        parentId={props.id}\n                        groups={props.submenu?.groups ?? []}\n                        navigationComponent={props.navigationComponent}\n                    />\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n};\nconst SideNavigationGroupContent: FC<\n    NavigationSubmenuData & NavigationComponentProps & { parentId: string }\n> = ({ groups, parentId, navigationComponent }) => {\n    return (\n        <Fragment>\n            {groups.reduce((out, group, index) => {\n                if (!group.links.length) {\n                    return out;\n                }\n\n                const title = group.title?.trim() ?? '';\n                /* eslint-disable react/no-array-index-key */\n                out.push(\n                    <Text\n                        key={`:group:${parentId}:${index}:title`}\n                        variant=\"eyebrow\"\n                        className={classNames(Styles.submenuGroupHeader, {\n                            [Styles.submenuGroupHeaderEmpty]: !title,\n                        })}\n                    >\n                        {title}\n                    </Text>\n                );\n                out.push(\n                    ...group.links.map((link, index) => (\n                        <InternalSideNavigationGroupLink\n                            key={`:${parentId}:${link.id}:${index}`}\n                            {...link}\n                            parentId={parentId}\n                            navigationComponent={navigationComponent}\n                        />\n                    ))\n                );\n                /* eslint-enable react/no-array-index-key */\n\n                return out;\n            }, [] as ReactElement[])}\n        </Fragment>\n    );\n};\n\nfunction SidebarTop({ children }: any) {\n    const list = Children.map(children, child => {\n        return child && isValidElement(child) ? child : null;\n    });\n    return list?.length ? (\n        <ThemeProvider mode=\"dark\" className={Styles.navTop} data-cy=\"navigation-items-top\">\n            {list}\n            <div className={Styles.divider} />\n        </ThemeProvider>\n    ) : null;\n}\n\nfunction SidebarBottom({ children }: any) {\n    return (\n        <ThemeProvider mode=\"dark\" className={Styles.navBottom} data-cy=\"navigation-items-bottom\">\n            <div className={Styles.divider} />\n            {children}\n        </ThemeProvider>\n    );\n}\n"],"names":["Icon","Popover","Text","ThemeProvider","SvgClose","SvgCollapse","SvgExpand","classNames","Children","Fragment","isValidElement","useCallback","getCounterTag","getSubmenuGroupTag","LayoutPlacementContext","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupLink","InternalSideNavigationLink","Styles","withTooltip","LayoutSidebar","className","mobile","barExpanded","submenuExpanded","drawerOpened","onBarExpandChange","onSubmenuExpandChange","onDrawerOpenChange","mainItems","top","bottom","navigationComponent","closeDrawer","Provider","value","div","navDrawerBackdrop","onClick","nav","navDrawer","navDrawerOpened","navWide","navSlim","data-cy","mode","navMain","navCloseWrapper","navClose","svg","size","length","SidebarTop","map","item","submenu","SideNavigationGroupItem","id","onSubmenuExpand","undefined","tag","counter","SidebarBottom","navFooter","divider","toggleWrapper","SideNavigationOptionsToggle","appearance","onExpandedChange","displayName","data-pendo","toggle","toggleContent","toggleIconWrapper","toggleIcon","span","toggleText","placement","props","onExpandToggle","e","preventDefault","stopPropagation","sidebar","styles","popoverContent","SideNavigationGroupContent","parentId","groups","openOnHover","delay","Trigger","triggerProps","Content","style","submenuPopover","variant","el","title","reduce","out","group","index","links","trim","push","submenuGroupHeader","submenuGroupHeaderEmpty","link","children","list","child","navTop","navBottom"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"sourcesContent":["import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';\nimport SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';\nimport SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';\nimport SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';\nimport classNames from 'classnames';\nimport {\n    Children,\n    FC,\n    Fragment,\n    MouseEvent,\n    ReactElement,\n    isValidElement,\n    useCallback,\n} from 'react';\nimport { NavigationItemData, NavigationSubmenuData } from '../../utils/navigation';\nimport { NavLinkComponentProps } from '../../utils/navigation-context';\nimport { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';\nimport { NavigationComponentProps } from './interface-internal';\nimport { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';\nimport {\n    InternalSideNavigationGroup,\n    InternalSideNavigationGroupLink,\n    InternalSideNavigationLink,\n} from './layout-sidebar-links-internal';\nimport * as Styles from './layout-sidebar.module.less';\n\nimport { withTooltip } from './with-tooltip';\n\nexport interface LayoutSidebarProps {\n    className?: string;\n    top?: ReactElement[];\n    bottom?: ReactElement;\n    mainItems?: NavigationItemData[];\n    barExpanded: boolean;\n    submenuExpanded: string | undefined;\n    drawerOpened: boolean;\n    mobile: boolean;\n    navigationComponent: FC<NavLinkComponentProps>;\n    onBarExpandChange(expanded: boolean): void;\n    onDrawerOpenChange(expanded: boolean): void;\n    onSubmenuExpandChange(id: string, expanded: boolean): void;\n}\n\nexport const LayoutSidebar: FC<LayoutSidebarProps> = ({\n    className,\n    mobile,\n    barExpanded,\n    submenuExpanded,\n    drawerOpened,\n    onBarExpandChange,\n    onSubmenuExpandChange,\n    onDrawerOpenChange,\n    mainItems,\n    top,\n    bottom,\n    navigationComponent,\n}) => {\n    const closeDrawer = () => {\n        if (mobile) {\n            onDrawerOpenChange?.(false);\n        }\n    };\n\n    return (\n        <LayoutPlacementContext.Provider value=\"side\">\n            {mobile && drawerOpened && (\n                <div className={Styles.navDrawerBackdrop} onClick={closeDrawer} />\n            )}\n            <div\n                className={classNames(\n                    Styles.nav,\n                    mobile && Styles.navDrawer,\n                    mobile && drawerOpened && Styles.navDrawerOpened,\n                    !mobile && (barExpanded ? Styles.navWide : Styles.navSlim),\n                    className\n                )}\n                data-cy=\"side-navigation\"\n                onClick={closeDrawer}\n            >\n                <ThemeProvider mode=\"dark\" className={Styles.navMain}>\n                    {mobile && (\n                        <div className={Styles.navCloseWrapper}>\n                            <div\n                                className={Styles.navClose}\n                                onClick={() => onBarExpandChange(false)}\n                            >\n                                <Icon svg={SvgClose} size=\"large\" />\n                            </div>\n                        </div>\n                    )}\n                    {!!top?.length && <SidebarTop>{top}</SidebarTop>}\n\n                    <div data-cy=\"navigation-items\">\n                        {mainItems?.map(item =>\n                            item.submenu ? (\n                                <SideNavigationGroupItem\n                                    key={item.id}\n                                    item={item}\n                                    barExpanded={mobile ? drawerOpened : barExpanded}\n                                    submenuExpanded={!!item.id && submenuExpanded === item.id}\n                                    onSubmenuExpand={onSubmenuExpandChange}\n                                    navigationComponent={navigationComponent}\n                                />\n                            ) : (\n                                <InternalSideNavigationLink\n                                    key={item.id}\n                                    id={item.id}\n                                    to={item.to}\n                                    title={item.title}\n                                    isActive={item.isActive}\n                                    icon={item.icon}\n                                    iconActive={item.iconActive}\n                                    className={item.className}\n                                    tag={getSubmenuGroupTag(\n                                        item.submenu,\n                                        getCounterTag(item.counter, item.tag)\n                                    )}\n                                    submenuExpanded={undefined}\n                                    navigationComponent={navigationComponent}\n                                />\n                            )\n                        )}\n                    </div>\n\n                    {!!bottom && <SidebarBottom>{bottom}</SidebarBottom>}\n                </ThemeProvider>\n\n                {!mobile && (\n                    <div className={Styles.navFooter}>\n                        <div className={Styles.divider} />\n                        <div className={Styles.toggleWrapper}>\n                            <SideNavigationOptionsToggle\n                                appearance={barExpanded ? 'collapse-button' : 'expand'}\n                                onExpandedChange={() => onBarExpandChange(!barExpanded)}\n                            />\n                        </div>\n                    </div>\n                )}\n            </div>\n        </LayoutPlacementContext.Provider>\n    );\n};\nLayoutSidebar.displayName = 'LayoutSidebar';\n\n/** Side Navigation options toggle */\nconst SideNavigationOptionsToggle: FC<{\n    appearance: 'expand' | 'collapse' | 'collapse-button';\n    onExpandedChange?(expanded: boolean): void;\n}> = ({ appearance, onExpandedChange }) =>\n    withTooltip(\n        <div\n            data-cy=\"navigation-left-options\"\n            data-pendo=\"navigation-left-options\"\n            className={classNames(Styles.toggle)}\n            onClick={() => onExpandedChange?.(appearance === 'expand')}\n        >\n            <div className={Styles.toggleContent}>\n                <div className={Styles.toggleIconWrapper}>\n                    <Icon\n                        className={Styles.toggleIcon}\n                        svg={appearance === 'expand' ? SvgExpand : SvgCollapse}\n                    />\n                </div>\n\n                {appearance === 'collapse-button' && (\n                    <span className={Styles.toggleText}>Collapse Menu</span>\n                )}\n            </div>\n        </div>,\n        appearance === 'expand'\n            ? 'Expand Menu'\n            : appearance === 'collapse'\n              ? 'Collapse Menu'\n              : undefined,\n        { placement: 'right' }\n    );\n\n/** Side Navigation menu item */\nconst SideNavigationGroupItem: FC<{\n    item: NavigationItemData;\n    navigationComponent: FC<NavLinkComponentProps>;\n    barExpanded: boolean;\n    submenuExpanded: boolean;\n    onSubmenuExpand: undefined | ((id: string, expanded: boolean) => void);\n}> = ({ item, onSubmenuExpand, barExpanded, submenuExpanded, navigationComponent }) => {\n    const onExpandToggle = useCallback(\n        (e: MouseEvent<never>) => {\n            e.preventDefault();\n            e.stopPropagation();\n\n            if (item.id) {\n                onSubmenuExpand?.(item.id, !submenuExpanded);\n            }\n        },\n        [item.id, submenuExpanded, onSubmenuExpand]\n    );\n    const {\n        sidebar: {\n            styles: { popoverContent },\n        },\n    } = useTitanLayoutContext();\n\n    const tag = getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag));\n\n    return barExpanded ? (\n        <InternalSideNavigationGroup\n            id={item.id}\n            to={item.to}\n            title={item.title}\n            isActive={item.isActive}\n            icon={item.icon}\n            iconActive={item.iconActive}\n            className={item.className}\n            tag={tag}\n            submenuExpanded={submenuExpanded}\n            onExpandToggle={onExpandToggle}\n            navigationComponent={navigationComponent}\n        >\n            <SideNavigationGroupContent\n                parentId={item.id}\n                groups={item.submenu?.groups ?? []}\n                navigationComponent={navigationComponent}\n            />\n        </InternalSideNavigationGroup>\n    ) : (\n        <Popover placement=\"right-start\" openOnHover delay={500}>\n            <Popover.Trigger>\n                {(triggerProps: any) => (\n                    <div {...triggerProps}>\n                        <InternalSideNavigationLink\n                            id={item.id}\n                            to={item.to}\n                            title={item.title}\n                            isActive={item.isActive}\n                            icon={item.icon}\n                            iconActive={item.iconActive}\n                            className={item.className}\n                            tag={tag}\n                            submenuExpanded={undefined}\n                            navigationComponent={navigationComponent}\n                        />\n                    </div>\n                )}\n            </Popover.Trigger>\n            <Popover.Content style={popoverContent} className=\"z-global-nav-i\">\n                <div className={Styles.submenuPopover}>\n                    <Text\n                        variant=\"headline\"\n                        el=\"h4\"\n                        size=\"small\"\n                        className=\"c-white m-b-half-i m-t-1\"\n                    >\n                        {item.title}\n                    </Text>\n                    <SideNavigationGroupContent\n                        parentId={item.id}\n                        groups={item.submenu?.groups ?? []}\n                        navigationComponent={navigationComponent}\n                    />\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n};\nconst SideNavigationGroupContent: FC<\n    NavigationSubmenuData & NavigationComponentProps & { parentId: string }\n> = ({ groups, parentId, navigationComponent }) => {\n    return (\n        <Fragment>\n            {groups.reduce((out, group, index) => {\n                if (!group.links.length) {\n                    return out;\n                }\n\n                const title = group.title?.trim() ?? '';\n                /* eslint-disable react/no-array-index-key */\n                out.push(\n                    <Text\n                        key={`:group:${parentId}:${index}:title`}\n                        variant=\"eyebrow\"\n                        className={classNames(Styles.submenuGroupHeader, {\n                            [Styles.submenuGroupHeaderEmpty]: !title,\n                        })}\n                    >\n                        {title}\n                    </Text>\n                );\n                out.push(\n                    ...group.links.map((link, index) => (\n                        <InternalSideNavigationGroupLink\n                            key={`:${parentId}:${link.id}:${index}`}\n                            id={link.id}\n                            to={link.to}\n                            title={link.title}\n                            isActive={link.isActive}\n                            className={undefined}\n                            tag={getCounterTag(link.counter, link.tag)}\n                            parentId={parentId}\n                            navigationComponent={navigationComponent}\n                        />\n                    ))\n                );\n                /* eslint-enable react/no-array-index-key */\n\n                return out;\n            }, [] as ReactElement[])}\n        </Fragment>\n    );\n};\n\nfunction SidebarTop({ children }: any) {\n    const list = Children.map(children, child => {\n        return child && isValidElement(child) ? child : null;\n    });\n    return list?.length ? (\n        <ThemeProvider mode=\"dark\" className={Styles.navTop} data-cy=\"navigation-items-top\">\n            {list}\n            <div className={Styles.divider} />\n        </ThemeProvider>\n    ) : null;\n}\n\nfunction SidebarBottom({ children }: any) {\n    return (\n        <ThemeProvider mode=\"dark\" className={Styles.navBottom} data-cy=\"navigation-items-bottom\">\n            <div className={Styles.divider} />\n            {children}\n        </ThemeProvider>\n    );\n}\n"],"names":["Icon","Popover","Text","ThemeProvider","SvgClose","SvgCollapse","SvgExpand","classNames","Children","Fragment","isValidElement","useCallback","getCounterTag","getSubmenuGroupTag","LayoutPlacementContext","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupLink","InternalSideNavigationLink","Styles","withTooltip","LayoutSidebar","className","mobile","barExpanded","submenuExpanded","drawerOpened","onBarExpandChange","onSubmenuExpandChange","onDrawerOpenChange","mainItems","top","bottom","navigationComponent","closeDrawer","Provider","value","div","navDrawerBackdrop","onClick","nav","navDrawer","navDrawerOpened","navWide","navSlim","data-cy","mode","navMain","navCloseWrapper","navClose","svg","size","length","SidebarTop","map","item","submenu","SideNavigationGroupItem","id","onSubmenuExpand","to","title","isActive","icon","iconActive","tag","counter","undefined","SidebarBottom","navFooter","divider","toggleWrapper","SideNavigationOptionsToggle","appearance","onExpandedChange","displayName","data-pendo","toggle","toggleContent","toggleIconWrapper","toggleIcon","span","toggleText","placement","onExpandToggle","e","preventDefault","stopPropagation","sidebar","styles","popoverContent","SideNavigationGroupContent","parentId","groups","openOnHover","delay","Trigger","triggerProps","Content","style","submenuPopover","variant","el","reduce","out","group","index","links","trim","push","submenuGroupHeader","submenuGroupHeaderEmpty","link","children","list","child","navTop","navBottom"],"mappings":"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"}

package/dist/components/titan-layout/titan-layout-default.stories.d.ts

@@ -0,0 +1,16 @@
+import { LayoutContentArgs } from '../../test/titan-layout';
+declare const _default: {
+    title: string;
+    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    parameters: {};
+    argTypes: {};
+    args: LayoutContentArgs;
+};
+export default _default;
+export declare const ContentLegacy: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const ContentAnvil1: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const ContentAnvil2: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const ExtraWithTitle: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const ExtraWithFlashing: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const ExtraWithTitleFlashing: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=titan-layout-default.stories.d.ts.map

package/dist/components/titan-layout/titan-layout-default.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"titan-layout-default.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout-default.stories.tsx"],"names":[],"mappings":"AAkBA,OAAO,EACH,iBAAiB,EAIpB,MAAM,yBAAyB,CAAC;;;;;;;;AASjC,wBAWE;AAmRF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CASpD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CAMpD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CAQpD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,MAAM,iBAAiB,4CAyBrD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CA0BxD,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,MAAM,iBAAiB,4CA0B7D,CAAC"}

package/dist/components/titan-layout/titan-layout-legacy.stories.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    title: string;
+    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    parameters: {};
+    argTypes: {};
+    args: import("../../test/titan-layout").LayoutContentArgs;
+};
+export default _default;
+export { ContentLegacy, ContentAnvil1, ContentAnvil2, ExtraWithTitle, ExtraWithFlashing, ExtraWithTitleFlashing, } from './titan-layout-default.stories';
+//# sourceMappingURL=titan-layout-legacy.stories.d.ts.map

package/dist/components/titan-layout/titan-layout-legacy.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"titan-layout-legacy.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout-legacy.stories.tsx"],"names":[],"mappings":";;;;;;;AAGA,wBAWE;AAEF,OAAO,EACH,aAAa,EACb,aAAa,EACb,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,sBAAsB,GACzB,MAAM,gCAAgC,CAAC"}

package/dist/components/titan-layout/titan-layout-links.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { TitanLayoutLinkProps, TitanLayoutTriggerProps } from './interface';
+export declare const TitanLayoutLink: FC<TitanLayoutLinkProps>;
+export declare const TitanLayoutTrigger: FC<TitanLayoutTriggerProps>;
+//# sourceMappingURL=titan-layout-links.d.ts.map

package/dist/components/titan-layout/titan-layout-links.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"titan-layout-links.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout-links.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,OAAO,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAK5E,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAYpD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAY1D,CAAC"}

package/dist/components/titan-layout/titan-layout-links.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTitanLayoutPlacementContext } from './layout-context';
+import { LayoutHeaderNavigationLink, LayoutHeaderNavigationTrigger } from './layout-header-links';
+import { LayoutSidebarLink, LayoutSidebarTrigger } from './layout-sidebar-links';
+export const TitanLayoutLink = (props)=>{
+    const placement = useTitanLayoutPlacementContext();
+    if (placement === 'top') {
+        return /*#__PURE__*/ _jsx(LayoutHeaderNavigationLink, {
+            ...props
+        });
+    }
+    if (placement === 'side') {
+        return /*#__PURE__*/ _jsx(LayoutSidebarLink, {
+            ...props
+        });
+    }
+    return null;
+};
+export const TitanLayoutTrigger = (props)=>{
+    const placement = useTitanLayoutPlacementContext();
+    if (placement === 'top') {
+        return /*#__PURE__*/ _jsx(LayoutHeaderNavigationTrigger, {
+            ...props
+        });
+    }
+    if (placement === 'side') {
+        return /*#__PURE__*/ _jsx(LayoutSidebarTrigger, {
+            ...props
+        });
+    }
+    return null;
+};
+
+//# sourceMappingURL=titan-layout-links.js.map

package/dist/components/titan-layout/titan-layout-links.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/titan-layout/titan-layout-links.tsx"],"sourcesContent":["import { FC } from 'react';\n\nimport { TitanLayoutLinkProps, TitanLayoutTriggerProps } from './interface';\nimport { useTitanLayoutPlacementContext } from './layout-context';\nimport { LayoutHeaderNavigationLink, LayoutHeaderNavigationTrigger } from './layout-header-links';\nimport { LayoutSidebarLink, LayoutSidebarTrigger } from './layout-sidebar-links';\n\nexport const TitanLayoutLink: FC<TitanLayoutLinkProps> = props => {\n    const placement = useTitanLayoutPlacementContext();\n\n    if (placement === 'top') {\n        return <LayoutHeaderNavigationLink {...props} />;\n    }\n\n    if (placement === 'side') {\n        return <LayoutSidebarLink {...props} />;\n    }\n\n    return null;\n};\n\nexport const TitanLayoutTrigger: FC<TitanLayoutTriggerProps> = props => {\n    const placement = useTitanLayoutPlacementContext();\n\n    if (placement === 'top') {\n        return <LayoutHeaderNavigationTrigger {...props} />;\n    }\n\n    if (placement === 'side') {\n        return <LayoutSidebarTrigger {...props} />;\n    }\n\n    return null;\n};\n"],"names":["useTitanLayoutPlacementContext","LayoutHeaderNavigationLink","LayoutHeaderNavigationTrigger","LayoutSidebarLink","LayoutSidebarTrigger","TitanLayoutLink","props","placement","TitanLayoutTrigger"],"mappings":";AAGA,SAASA,8BAA8B,QAAQ,mBAAmB;AAClE,SAASC,0BAA0B,EAAEC,6BAA6B,QAAQ,wBAAwB;AAClG,SAASC,iBAAiB,EAAEC,oBAAoB,QAAQ,yBAAyB;AAEjF,OAAO,MAAMC,kBAA4CC,CAAAA;IACrD,MAAMC,YAAYP;IAElB,IAAIO,cAAc,OAAO;QACrB,qBAAO,KAACN;YAA4B,GAAGK,KAAK;;IAChD;IAEA,IAAIC,cAAc,QAAQ;QACtB,qBAAO,KAACJ;YAAmB,GAAGG,KAAK;;IACvC;IAEA,OAAO;AACX,EAAE;AAEF,OAAO,MAAME,qBAAkDF,CAAAA;IAC3D,MAAMC,YAAYP;IAElB,IAAIO,cAAc,OAAO;QACrB,qBAAO,KAACL;YAA+B,GAAGI,KAAK;;IACnD;IAEA,IAAIC,cAAc,QAAQ;QACtB,qBAAO,KAACH;YAAsB,GAAGE,KAAK;;IAC1C;IAEA,OAAO;AACX,EAAE"}

package/dist/components/titan-layout/titan-layout-stacked.stories.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    title: string;
+    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    parameters: {};
+    argTypes: {};
+    args: import("../../test/titan-layout").LayoutContentArgs;
+};
+export default _default;
+export { ContentLegacy, ContentAnvil1, ContentAnvil2, ExtraWithTitle, ExtraWithFlashing, ExtraWithTitleFlashing, } from './titan-layout-default.stories';
+//# sourceMappingURL=titan-layout-stacked.stories.d.ts.map

package/dist/components/titan-layout/titan-layout-stacked.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"titan-layout-stacked.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout-stacked.stories.tsx"],"names":[],"mappings":";;;;;;;AASA,wBAWE;AAEF,OAAO,EACH,aAAa,EACb,aAAa,EACb,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,sBAAsB,GACzB,MAAM,gCAAgC,CAAC"}

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

@@ -3,7 +3,6 @@ import { NavigationItemData } from '../../utils/navigation';
 import { NavLinkComponentProps } from '../../utils/navigation-context';
 import { TitanLayoutState } from './interface';
 import { TitanLayoutLogoProps } from './layout-logo';
-import { TitanLayoutSidebarLink, TitanLayoutSidebarTrigger } from './layout-sidebar-links';
 export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {
     /** layout appearance */
     appearance?: 'legacy' | 'anvil1' | 'anvil2';
@@ -32,8 +31,10 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     extraText?: string;
     minContentWidth?: number;
 };
-export declare const TitanLayout: FC<TitanLayoutProps> & {
-    Link: typeof TitanLayoutSidebarLink;
-    Trigger: typeof TitanLayoutSidebarTrigger;
+declare function TitanLayoutComponent({ appearance, navVariant, id, children, contentOnly, navigationComponent, header, top, profile, state, logo, onStateChange, navigationMainItems, navigationOverflowItems, extraLinks, extraLinksTop, extraText, minContentWidth, sideTop, }: TitanLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare const TitanLayout: typeof TitanLayoutComponent & {
+    Link: FC<import("./interface").TitanLayoutLinkProps>;
+    Trigger: FC<import("./interface").TitanLayoutTriggerProps>;
 };
+export {};
 //# sourceMappingURL=titan-layout.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,wBAAwB,EACxB,EAAE,EAEF,YAAY,EACZ,SAAS,EAMZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAA2B,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEhG,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAS/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAK3F,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,wBAAwB;IACxB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE5C,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAE5B,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAEhD,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE3C,sEAAsE;IACtE,uBAAuB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE/C,iBAAiB;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAE5B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAElD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAyXF,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}
+{"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,wBAAwB,EACxB,EAAE,EAGF,YAAY,EACZ,SAAS,EAMZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAA2B,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEhG,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAS/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAOrD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,wBAAwB;IACxB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE5C,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAE5B,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAEhD,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE3C,sEAAsE;IACtE,uBAAuB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE/C,iBAAiB;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAE5B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAElD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAyBF,iBAAS,oBAAoB,CAAC,EAC1B,UAAqB,EACrB,UAAmB,EACnB,EAAE,EACF,QAAQ,EACR,WAAW,EACX,mBAAmB,EACnB,MAAM,EACN,GAAG,EACH,OAAO,EACP,KAAK,EACL,IAAI,EACJ,aAAa,EACb,mBAAmB,EACnB,uBAAuB,EACvB,UAAU,EACV,aAAa,EACb,SAAS,EACT,eAAe,EACf,OAAO,GACV,EAAE,gBAAgB,2CAiPlB;AA6FD,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}

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

@@ -7,9 +7,9 @@ import { LayoutContext, LayoutPlacementContext } from './layout-context';
 import { LayoutHeader } from './layout-header';
 import { LayoutHeaderDark } from './layout-header-dark';
 import { LayoutSidebar } from './layout-sidebar';
-import { TitanLayoutSidebarLink, TitanLayoutSidebarTrigger } from './layout-sidebar-links';
 import { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';
 import { useNotificationsState } from './notifications-context';
+import { TitanLayoutLink, TitanLayoutTrigger } from './titan-layout-links';
 import * as Styles from './titan-layout.module.less';
 const defaultSidebarContext = {
     styles: {
@@ -32,7 +32,7 @@ const useAppearance = (appearance)=>useMemo(()=>{
     }, [
         appearance
     ]);
-const TitanLayoutComponent = ({ appearance = 'anvil2', navVariant = 'left', id, children, contentOnly, navigationComponent, header, top, profile, state, logo, onStateChange, navigationMainItems, navigationOverflowItems, extraLinks, extraLinksTop, extraText, minContentWidth, sideTop })=>{
+function TitanLayoutComponent({ appearance = 'anvil2', navVariant = 'left', id, children, contentOnly, navigationComponent, header, top, profile, state, logo, onStateChange, navigationMainItems, navigationOverflowItems, extraLinks, extraLinksTop, extraText, minContentWidth, sideTop }) {
     const breakpoint = useTitanBreakpoint();
     const context = useMemo(()=>({
             NavigationComponent: navigationComponent !== null && navigationComponent !== void 0 ? navigationComponent : DefaultNavLinkComponent,
@@ -229,10 +229,12 @@ const TitanLayoutComponent = ({ appearance = 'anvil2', navVariant = 'left', id,
                                     !!extraText && /*#__PURE__*/ _jsx(InternalSideNavigationTrigger, {
                                         id: "--extra-text",
                                         title: extraText,
-                                        submenuExpanded: undefined,
-                                        tag: undefined,
+                                        isActive: undefined,
                                         icon: undefined,
-                                        iconActive: undefined
+                                        iconActive: undefined,
+                                        tag: undefined,
+                                        className: undefined,
+                                        submenuExpanded: undefined
                                     })
                                 ]
                             }) : undefined
@@ -254,7 +256,7 @@ const TitanLayoutComponent = ({ appearance = 'anvil2', navVariant = 'left', id,
             })
         })
     });
-};
+}
 const TitanLayoutHeaderObserved = ({ children, heightChange })=>{
     const ref = useRef(null);
     useEffect(()=>{
@@ -338,8 +340,8 @@ const LayoutContentLegacy = ({ children, minWidth })=>{
     });
 };
 export const TitanLayout = Object.assign(TitanLayoutComponent, {
-    Link: TitanLayoutSidebarLink,
-    Trigger: TitanLayoutSidebarTrigger
+    Link: TitanLayoutLink,
+    Trigger: TitanLayoutTrigger
 });
 
 //# sourceMappingURL=titan-layout.js.map