@licklist/design 0.78.25 → 0.78.27

package/dist/v2/components/UserPanel/UserPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserPanel.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/UserPanel/UserPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,kBAAkB,CAAA;AAEzB,MAAM,WAAW,cAAc;IAC3B,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;CAC7B;AAqBD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA+F9C,CAAA"}
+{"version":3,"file":"UserPanel.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/UserPanel/UserPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,kBAAkB,CAAA;AAGzB,MAAM,WAAW,cAAc;IAC3B,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;CAC7B;AAqBD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwF9C,CAAA"}

package/dist/v2/components/UserPanel/UserPanel.js

@@ -1,6 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import 'react';
 import './UserPanel.scss.js';
+import { UserAvatar } from '../UserAvatar/UserAvatar.js';
 
 // Icons as inline SVGs
 var CloseIcon = function() {
@@ -64,35 +65,10 @@ var UserPanel = function(param) {
                             /*#__PURE__*/ jsxs("div", {
                                 className: "user-panel__user-info",
                                 children: [
-                                    /*#__PURE__*/ jsx("div", {
-                                        className: "user-panel__avatar",
-                                        children: avatarUrl ? /*#__PURE__*/ jsx("img", {
-                                            src: avatarUrl,
-                                            alt: "Profile"
-                                        }) : /*#__PURE__*/ jsxs(Fragment, {
-                                            children: [
-                                                /*#__PURE__*/ jsx("svg", {
-                                                    width: "32",
-                                                    height: "32",
-                                                    viewBox: "0 0 32 32",
-                                                    fill: "none",
-                                                    className: "user-panel__avatar-bg",
-                                                    children: /*#__PURE__*/ jsx("circle", {
-                                                        cx: "16",
-                                                        cy: "16",
-                                                        r: "15",
-                                                        fill: "var(--fills-main-fill-secondary, #626A90)",
-                                                        fillOpacity: "0.2",
-                                                        stroke: "var(--fills-main-fill-secondary, #626A90)",
-                                                        strokeWidth: "2"
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ jsx("span", {
-                                                    className: "user-panel__avatar-initials",
-                                                    children: displayInitials
-                                                })
-                                            ]
-                                        })
+                                    /*#__PURE__*/ jsx(UserAvatar, {
+                                        initials: displayInitials,
+                                        avatarUrl: avatarUrl || undefined,
+                                        size: "md"
                                     }),
                                     /*#__PURE__*/ jsxs("div", {
                                         className: "user-panel__user-details",

package/dist/v2/navigation/DashboardLayout/DashboardLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardLayout.d.ts","sourceRoot":"","sources":["../../../../src/v2/navigation/DashboardLayout/DashboardLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAmB,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAG5D,OAAO,wBAAwB,CAAA;AAE/B,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAA;AAE9D,MAAM,WAAW,oBAAoB;IAEjC,WAAW,EAAE,eAAe,CAAA;IAE5B,eAAe,CAAC,EAAE,OAAO,CAAA;IAEzB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAE5B,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB,YAAY,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;IAEnC,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAErC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IAExB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IAEzB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IAExB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IAExB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAE3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAE1B,cAAc,CAAC,EAAE,OAAO,CAAA;IAExB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB,aAAa,CAAC,EAAE,OAAO,CAAA;IAEvB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;CACvB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAuI1D,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"DashboardLayout.d.ts","sourceRoot":"","sources":["../../../../src/v2/navigation/DashboardLayout/DashboardLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,EAAmB,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAG5D,OAAO,wBAAwB,CAAA;AAE/B,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAA;AAE9D,MAAM,WAAW,oBAAoB;IAEjC,WAAW,EAAE,eAAe,CAAA;IAE5B,eAAe,CAAC,EAAE,OAAO,CAAA;IAEzB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAE5B,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB,YAAY,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;IAEnC,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAErC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IAExB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IAEzB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IAExB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IAExB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAE3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAE1B,cAAc,CAAC,EAAE,OAAO,CAAA;IAExB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB,aAAa,CAAC,EAAE,OAAO,CAAA;IAEvB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;CACvB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA0J1D,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/v2/navigation/DashboardLayout/DashboardLayout.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { TopNavigation } from './TopNavigation.js';
 import { ProviderSidebar } from './ProviderSidebar.js';
 import { AdminSidebar } from './AdminSidebar.js';
@@ -55,6 +55,28 @@ function _unsupported_iterable_to_array(o, minLen) {
 var DashboardLayout = function(param) {
     var destination = param.destination, sidebarExpanded = param.sidebarExpanded, onSidebarToggle = param.onSidebarToggle, providerName = param.providerName, providerId = param.providerId, providerImage = param.providerImage, _param_providerType = param.providerType, providerType = _param_providerType === void 0 ? 'venue' : _param_providerType, companyName = param.companyName, companyId = param.companyId, companyImage = param.companyImage, userInitials = param.userInitials, userName = param.userName, userEmail = param.userEmail, userId = param.userId, userRole = param.userRole, _param_inboxCount = param.inboxCount, inboxCount = _param_inboxCount === void 0 ? 0 : _param_inboxCount, _param_bellCount = param.bellCount, bellCount = _param_bellCount === void 0 ? 0 : _param_bellCount, _param_activePath = param.activePath, activePath = _param_activePath === void 0 ? '/home' : _param_activePath, onNavigation = param.onNavigation, onUserClick = param.onUserClick, onInboxClick = param.onInboxClick, onBellClick = param.onBellClick, onHelpClick = param.onHelpClick, onProfileClick = param.onProfileClick, onLogoutClick = param.onLogoutClick, _param_hasAdminAccess = param.hasAdminAccess, hasAdminAccess = _param_hasAdminAccess === void 0 ? false : _param_hasAdminAccess, children = param.children, _param_isMobile = param.isMobile, isMobile = _param_isMobile === void 0 ? false : _param_isMobile, version = param.version, _param_showFooter = param.showFooter, showFooter = _param_showFooter === void 0 ? true : _param_showFooter, _param_userPanelOpen = param.userPanelOpen, userPanelOpen = _param_userPanelOpen === void 0 ? false : _param_userPanelOpen, navItems = param.navItems;
     var _useState = _sliced_to_array(useState(false), 2), mobileMenuOpen = _useState[0], setMobileMenuOpen = _useState[1];
+    var handleKeyDown = useCallback(function(event) {
+        var target = event.target;
+        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+            return;
+        }
+        if (event.key === '[' && sidebarExpanded) {
+            onSidebarToggle === null || onSidebarToggle === void 0 ? void 0 : onSidebarToggle();
+        } else if (event.key === ']' && !sidebarExpanded) {
+            onSidebarToggle === null || onSidebarToggle === void 0 ? void 0 : onSidebarToggle();
+        }
+    }, [
+        sidebarExpanded,
+        onSidebarToggle
+    ]);
+    useEffect(function() {
+        document.addEventListener('keydown', handleKeyDown);
+        return function() {
+            return document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [
+        handleKeyDown
+    ]);
     var handleSidebarToggle = function() {
         if (isMobile) {
             setMobileMenuOpen(!mobileMenuOpen);
@@ -124,6 +146,7 @@ var DashboardLayout = function(param) {
                         children: renderSidebar()
                     }),
                     /*#__PURE__*/ jsxs("main", {
+                        id: "scrollable",
                         className: "dashboard-layout__main",
                         style: {
                             marginLeft: isMobile ? 0 : sidebarWidth,
@@ -131,6 +154,7 @@ var DashboardLayout = function(param) {
                         },
                         children: [
                             /*#__PURE__*/ jsx("div", {
+                                id: "main",
                                 className: "dashboard-layout__content",
                                 children: children
                             }),

package/dist/v2/navigation/DashboardLayout/ProviderSidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProviderSidebar.d.ts","sourceRoot":"","sources":["../../../../src/v2/navigation/DashboardLayout/ProviderSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,wBAAwB,CAAA;AAI/B,MAAM,WAAW,OAAO;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,GAAG,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,MAAM,WAAW,oBAAoB;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;IACnC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;CACvB;AAGD,QAAA,MAAM,QAAQ,+CAIb,CAAA;AAED,QAAA,MAAM,SAAS,+CAId,CAAA;AAED,QAAA,MAAM,aAAa,+CAIlB,CAAA;AAED,QAAA,MAAM,WAAW,+CAIhB,CAAA;AAED,QAAA,MAAM,aAAa,+CAIlB,CAAA;AAED,QAAA,MAAM,WAAW,+CAIhB,CAAA;AAED,QAAA,MAAM,aAAa,+CAIlB,CAAA;AAED,QAAA,MAAM,aAAa,+CAIlB,CAAA;AAED,QAAA,MAAM,WAAW,+CAIhB,CAAA;AAED,QAAA,MAAM,YAAY,+CAIjB,CAAA;AAeD,OAAO,EACH,QAAQ,EACR,SAAS,EACT,aAAa,EACb,WAAW,EACX,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,YAAY,GACf,CAAA;AAgBD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2H1D,CAAA"}
+{"version":3,"file":"ProviderSidebar.d.ts","sourceRoot":"","sources":["../../../../src/v2/navigation/DashboardLayout/ProviderSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,wBAAwB,CAAA;AAI/B,MAAM,WAAW,OAAO;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,GAAG,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,MAAM,WAAW,oBAAoB;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;IACnC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;CACvB;AAGD,QAAA,MAAM,QAAQ,+CAIb,CAAA;AAED,QAAA,MAAM,SAAS,+CAId,CAAA;AAED,QAAA,MAAM,aAAa,+CAIlB,CAAA;AAED,QAAA,MAAM,WAAW,+CAIhB,CAAA;AAED,QAAA,MAAM,aAAa,+CAIlB,CAAA;AAED,QAAA,MAAM,WAAW,+CAIhB,CAAA;AAED,QAAA,MAAM,aAAa,+CAIlB,CAAA;AAED,QAAA,MAAM,aAAa,+CAIlB,CAAA;AAED,QAAA,MAAM,WAAW,+CAIhB,CAAA;AAED,QAAA,MAAM,YAAY,+CAIjB,CAAA;AAeD,OAAO,EACH,QAAQ,EACR,SAAS,EACT,aAAa,EACb,WAAW,EACX,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,YAAY,GACf,CAAA;AAgBD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAyI1D,CAAA"}

package/dist/v2/navigation/DashboardLayout/ProviderSidebar.js

@@ -275,6 +275,17 @@ var ProviderSidebar = function(param) {
                 })),
                 expanded ? /*#__PURE__*/ jsx("div", {
                     className: "provider-sidebar__header",
+                    onClick: function() {
+                        return handleNavClick('/profile');
+                    },
+                    role: "button",
+                    tabIndex: 0,
+                    onKeyDown: function(e) {
+                        return e.key === 'Enter' && handleNavClick('/profile');
+                    },
+                    style: {
+                        cursor: 'pointer'
+                    },
                     children: /*#__PURE__*/ jsx(EntityHeader, {
                         name: providerName,
                         id: providerId,
@@ -290,6 +301,17 @@ var ProviderSidebar = function(param) {
                     delayDuration: 100,
                     children: /*#__PURE__*/ jsx("div", {
                         className: "provider-sidebar__header provider-sidebar__header--collapsed",
+                        onClick: function() {
+                            return handleNavClick('/profile');
+                        },
+                        role: "button",
+                        tabIndex: 0,
+                        onKeyDown: function(e) {
+                            return e.key === 'Enter' && handleNavClick('/profile');
+                        },
+                        style: {
+                            cursor: 'pointer'
+                        },
                         children: /*#__PURE__*/ jsx(EntityHeader, {
                             name: providerName,
                             id: providerId,

package/dist/v2/navigation/DashboardLayout/ProviderSidebar.scss.js

@@ -1,6 +1,6 @@
 import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".provider-sidebar{align-items:flex-start;background:var(--surfaces-main-background-secondary,#f8f8fa);border-right:1px solid var(--borders-main-border-primary,#e8e9ef);box-sizing:border-box;display:flex;flex-direction:column;height:100%;overflow-y:auto;padding:8px;transition:width .3s ease}.provider-sidebar--expanded{width:268px}.provider-sidebar--collapsed{width:72px}@media (max-width:640px){.provider-sidebar{border-right:none;width:100%!important}}.provider-sidebar__content{display:flex;flex-direction:column;gap:4px;width:100%}.provider-sidebar__back-link{align-items:center;border-radius:8px;box-sizing:border-box;color:var(--fills-main-fill-primary,#14215a);cursor:pointer;display:flex;gap:8px;padding:8px;transition:all .2s ease;width:100%}.provider-sidebar__back-link:hover{background:var(--surfaces-main-background-secondary-hover,#f0f0f4)}.provider-sidebar__back-link:hover .provider-sidebar__icon--back .back-icon-default{display:none}.provider-sidebar__back-link:hover .provider-sidebar__icon--back .back-icon-hover{display:block}.provider-sidebar__back-link:active{background:var(--surfaces-main-background-secondary-pressed,#e8e8ec)}.provider-sidebar__back-link--collapsed{justify-content:center}.provider-sidebar__header{align-items:center;box-sizing:border-box;display:flex;width:100%}.provider-sidebar__header--collapsed{justify-content:center}.provider-sidebar__avatar{align-items:center;border-radius:50%;display:flex;flex-shrink:0;height:47px;justify-content:center;overflow:hidden;position:relative;width:47px}.provider-sidebar__avatar img{height:100%;object-fit:cover;width:100%}.provider-sidebar__avatar-placeholder{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}.provider-sidebar__avatar-placeholder:before{background:#626a9033;border:2px solid var(--fills-main-fill-secondary,#626a90);border-radius:50%;content:\"\";inset:0;position:absolute}.provider-sidebar__avatar-placeholder span{color:var(--labels-main-label-secondary,#626a90);font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:18px;font-weight:700;position:relative;z-index:1}.provider-sidebar__header-text{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}.provider-sidebar__title{color:var(--labels-main-label-primary,#121e52);font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:15px;font-weight:600;line-height:18px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.provider-sidebar__badge{align-items:center;background:var(--surfaces-main-background-tertiary,#e8e9ef);border-radius:8px;display:inline-flex;justify-content:center;padding:4px 8px;transition:background .2s ease;width:fit-content}.provider-sidebar__header:hover .provider-sidebar__badge{background:var(--surfaces-main-background-tertiary-hover,#dcdde3)}.provider-sidebar__badge span{color:var(--labels-main-label-secondary,#626a90);font-family:Geist Mono,SF Mono,Consolas,monospace;font-size:10px;font-weight:600;line-height:12px;white-space:nowrap}.provider-sidebar__nav{display:flex;flex-direction:column;gap:4px;padding-top:8px;width:100%}.provider-sidebar__link{align-items:center;border-radius:8px;box-sizing:border-box;color:var(--fills-main-fill-primary,#14215a);cursor:pointer;display:flex;gap:8px;outline:none;padding:8px;text-decoration:none;transition:all .2s ease;width:100%}.provider-sidebar__link:hover:not(.provider-sidebar__link--active){background:var(--surfaces-main-background-secondary-hover,#f0f0f4)}.provider-sidebar__link:active:not(.provider-sidebar__link--active){background:var(--surfaces-main-background-secondary-pressed,#e8e8ec)}.provider-sidebar__link:focus-visible{outline:2px solid var(--fills-main-fill-primary,#14215a);outline-offset:2px}.provider-sidebar__link--collapsed{justify-content:center}.provider-sidebar__link--active{background:linear-gradient(to top right,var(--gradient-stop3,#0e8ce2) 0,var(--gradient-stop2,#5d5bf4) 50%,var(--gradient-stop1,#6200ee) 100%);color:#fff;cursor:default}.provider-sidebar__link--active .provider-sidebar__icon{color:#fff}.provider-sidebar__link--active .provider-sidebar__icon svg path{fill:#fff}.provider-sidebar__link--active .provider-sidebar__link-text{color:#fff}.provider-sidebar__icon{align-items:center;display:flex;flex-shrink:0;height:24px;justify-content:center;width:24px}.provider-sidebar__icon svg{height:100%;width:100%}.provider-sidebar__icon--back .back-icon-default{display:block}.provider-sidebar__icon--back .back-icon-hover{display:none}.provider-sidebar__link-text{color:var(--labels-main-label-primary,#121e52);font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;line-height:16px;margin:0;white-space:nowrap}";
+var css_248z = ".provider-sidebar{align-items:flex-start;background:var(--surfaces-main-background-secondary,#f8f8fa);border-right:1px solid var(--borders-main-border-primary,#e8e9ef);box-sizing:border-box;display:flex;flex-direction:column;height:100%;overflow-y:auto;padding:8px;transition:width .3s ease}.provider-sidebar--expanded{width:268px}.provider-sidebar--collapsed{width:72px}@media (max-width:640px){.provider-sidebar{border-right:none;width:100%!important}}.provider-sidebar__content{display:flex;flex-direction:column;gap:4px;width:100%}.provider-sidebar__back-link{align-items:center;border-radius:8px;box-sizing:border-box;color:var(--fills-main-fill-primary,#14215a);cursor:pointer;display:flex;gap:8px;padding:8px;transition:all .2s ease;width:100%}.provider-sidebar__back-link:hover{background:var(--surfaces-main-background-secondary-hover,#f0f0f4)}.provider-sidebar__back-link:hover .provider-sidebar__icon--back .back-icon-default{display:none}.provider-sidebar__back-link:hover .provider-sidebar__icon--back .back-icon-hover{display:block}.provider-sidebar__back-link:active{background:var(--surfaces-main-background-secondary-pressed,#e8e8ec)}.provider-sidebar__back-link--collapsed{justify-content:center}.provider-sidebar__header{align-items:center;box-sizing:border-box;display:flex;width:100%}.provider-sidebar__header--collapsed{justify-content:center}.provider-sidebar__avatar{align-items:center;border-radius:50%;display:flex;flex-shrink:0;height:47px;justify-content:center;overflow:hidden;position:relative;width:47px}.provider-sidebar__avatar img{height:100%;object-fit:cover;width:100%}.provider-sidebar__avatar-placeholder{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}.provider-sidebar__avatar-placeholder:before{background:#626a9033;border:2px solid var(--fills-main-fill-secondary,#626a90);border-radius:50%;content:\"\";inset:0;position:absolute}.provider-sidebar__avatar-placeholder span{color:var(--labels-main-label-secondary,#626a90);font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:18px;font-weight:700;position:relative;z-index:1}.provider-sidebar__header-text{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}.provider-sidebar__title{color:var(--labels-main-label-primary,#121e52);font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:15px;font-weight:600;line-height:18px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.provider-sidebar__badge{align-items:center;background:var(--surfaces-main-background-tertiary,#e8e9ef);border-radius:8px;display:inline-flex;justify-content:center;padding:4px 8px;transition:background .2s ease;width:fit-content}.provider-sidebar__header:hover .provider-sidebar__badge{background:var(--surfaces-main-background-tertiary-hover,#dcdde3)}.provider-sidebar__badge span{color:var(--labels-main-label-secondary,#626a90);font-family:Geist Mono,SF Mono,Consolas,monospace;font-size:10px;font-weight:600;line-height:12px;white-space:nowrap}.provider-sidebar__nav{display:flex;flex-direction:column;gap:4px;padding-top:8px;width:100%}.provider-sidebar__link{align-items:center;border-radius:8px;box-sizing:border-box;color:var(--fills-main-fill-primary,#14215a);cursor:pointer;display:flex;gap:8px;outline:none;padding:8px;text-decoration:none;transition:all .2s ease;width:100%}.provider-sidebar__link:hover:not(.provider-sidebar__link--active){background:var(--surfaces-main-background-secondary-hover,#f0f0f4)}.provider-sidebar__link:active:not(.provider-sidebar__link--active){background:var(--surfaces-main-background-secondary-pressed,#e8e8ec)}.provider-sidebar__link:focus-visible{outline:2px solid var(--fills-main-fill-primary,#14215a);outline-offset:2px}.provider-sidebar__link--collapsed{justify-content:center}.provider-sidebar__link--active{background:linear-gradient(to top right,var(--gradient-stop3,#0e8ce2) 0,var(--gradient-stop2,#5d5bf4) 50%,var(--gradient-stop1,#6200ee) 100%);color:#fff;cursor:default}.provider-sidebar__link--active .provider-sidebar__icon{color:#fff}.provider-sidebar__link--active .provider-sidebar__icon svg path{fill:#fff}.provider-sidebar__link--active .provider-sidebar__link-text{color:#fff}.provider-sidebar__icon{align-items:center;color:var(--fills-main-fill-primary,#14215a);display:flex;flex-shrink:0;height:24px;justify-content:center;width:24px}.provider-sidebar__icon svg{height:100%;width:100%}.provider-sidebar__icon svg path{fill:var(--fills-main-fill-primary,#14215a)}.provider-sidebar__icon--back .back-icon-default{display:block}.provider-sidebar__icon--back .back-icon-hover{display:none}.provider-sidebar__link-text{color:var(--labels-main-label-primary,#121e52);font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;line-height:16px;margin:0;white-space:nowrap}";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist/v2/navigation/DashboardLayout/TopNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopNavigation.d.ts","sourceRoot":"","sources":["../../../../src/v2/navigation/DashboardLayout/TopNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,sBAAsB,CAAA;AAM7B,MAAM,WAAW,kBAAkB;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAA;IAChC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAA;CAC1B;AAoGD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6ItD,CAAA"}
+{"version":3,"file":"TopNavigation.d.ts","sourceRoot":"","sources":["../../../../src/v2/navigation/DashboardLayout/TopNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,sBAAsB,CAAA;AAM7B,MAAM,WAAW,kBAAkB;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAA;IAChC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAA;CAC1B;AAoGD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsJtD,CAAA"}

package/dist/v2/navigation/DashboardLayout/TopNavigation.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState } from 'react';
 import './TopNavigation.scss.js';
 import img from './assets/BookedLogo_Mark.png.js';
@@ -110,68 +110,6 @@ var SidebarCollapsedIcon = function() {
         ]
     });
 };
-var InboxIcon = function(param) {
-    var active = param.active, hovered = param.hovered;
-    return /*#__PURE__*/ jsxs("svg", {
-        width: "32",
-        height: "32",
-        viewBox: "0 0 32 32",
-        fill: "none",
-        children: [
-            hovered && !active && /*#__PURE__*/ jsx("path", {
-                d: "M11 10H21L22.5 18H19L18 20L16 20.5L14 20L13 18H9.5L11 10Z",
-                fill: "var(--fills-main-fill-secondary, #626A90)",
-                fillOpacity: "0.3"
-            }),
-            active && /*#__PURE__*/ jsx("path", {
-                d: "M11 10H21L22.5 18H19L18 20L16 20.5L14 20L13 18H9.5L11 10Z",
-                fill: "white",
-                fillOpacity: "0.3"
-            }),
-            /*#__PURE__*/ jsx("path", {
-                d: "M8.02381 7.78307C8.12549 7.32553 8.5313 7 9 7H23C23.4687 7 23.8745 7.32553 23.9762 7.78307L25.9762 16.7831C25.992 16.8543 26 16.927 26 17V24C26 24.5523 25.5523 25 25 25H7C6.44772 25 6 24.5523 6 24V17C6 16.927 6.00799 16.8543 6.02381 16.7831L8.02381 7.78307ZM9.80217 9L8.24662 16H13C13 17.6569 14.3431 19 16 19C17.6569 19 19 17.6569 19 16H23.7534L22.1978 9H9.80217ZM20.584 18C19.8124 19.7659 18.0503 21 16 21C13.9497 21 12.1876 19.7659 11.416 18H8V23H24V18H20.584Z",
-                fill: active ? 'white' : 'var(--fills-main-fill-secondary, #626A90)'
-            })
-        ]
-    });
-};
-var NotificationIcon = function(param) {
-    var active = param.active, hovered = param.hovered;
-    if (active) {
-        return /*#__PURE__*/ jsx("svg", {
-            width: "32",
-            height: "32",
-            viewBox: "0 0 32 32",
-            fill: "none",
-            children: /*#__PURE__*/ jsx("path", {
-                d: "M22 14C22 10.6863 19.3137 8 16 8C12.6863 8 10 10.6863 10 14V22H22V14ZM24 22.6667L24.4 23.2C24.5657 23.4209 24.5209 23.7343 24.3 23.9C24.2135 23.9649 24.1082 24 24 24H8C7.72386 24 7.5 23.7761 7.5 23.5C7.5 23.3918 7.53509 23.2865 7.6 23.2L8 22.6667V14C8 9.58172 11.5817 6 16 6C20.4183 6 24 9.58172 24 14V22.6667ZM13.5 25H18.5C18.5 26.3807 17.3807 27.5 16 27.5C14.6193 27.5 13.5 26.3807 13.5 25Z",
-                fill: "white"
-            })
-        });
-    }
-    if (hovered) {
-        return /*#__PURE__*/ jsx("svg", {
-            width: "32",
-            height: "32",
-            viewBox: "0 0 32 32",
-            fill: "none",
-            children: /*#__PURE__*/ jsx("path", {
-                d: "M22.4874 15.5353C23.2901 12.3202 21.3346 9.06324 18.1196 8.26054C14.9045 7.45785 11.6475 9.41342 10.8448 12.6284L8.90696 20.3902L20.5496 23.297L22.4874 15.5353ZM22.3285 24.4283L22.5874 25.0426C22.6947 25.2971 22.5753 25.5903 22.3208 25.6976C22.2212 25.7396 22.1105 25.7481 22.0055 25.7219L6.48205 21.8461C6.21413 21.7792 6.05118 21.5078 6.11806 21.2399C6.14427 21.1349 6.20382 21.0413 6.28775 20.9731L6.80502 20.5525L8.9044 12.144C9.97467 7.85727 14.3173 5.24985 18.604 6.32011C22.8907 7.39038 25.4981 11.733 24.4279 16.0197L22.3285 24.4283ZM15.4569 25.1176L20.308 26.3288C19.9735 27.6683 18.6164 28.4832 17.2768 28.1487C15.9373 27.8143 15.1224 26.4572 15.4569 25.1176Z",
-                fill: "var(--fills-main-fill-secondary, #626A90)"
-            })
-        });
-    }
-    return /*#__PURE__*/ jsx("svg", {
-        width: "32",
-        height: "32",
-        viewBox: "0 0 32 32",
-        fill: "none",
-        children: /*#__PURE__*/ jsx("path", {
-            d: "M22 14C22 10.6863 19.3137 8 16 8C12.6863 8 10 10.6863 10 14V22H22V14ZM24 22.6667L24.4 23.2C24.5657 23.4209 24.5209 23.7343 24.3 23.9C24.2135 23.9649 24.1082 24 24 24H8C7.72386 24 7.5 23.7761 7.5 23.5C7.5 23.3918 7.53509 23.2865 7.6 23.2L8 22.6667V14C8 9.58172 11.5817 6 16 6C20.4183 6 24 9.58172 24 14V22.6667ZM13.5 25H18.5C18.5 26.3807 17.3807 27.5 16 27.5C14.6193 27.5 13.5 26.3807 13.5 25Z",
-            fill: "var(--fills-main-fill-secondary, #626A90)"
-        })
-    });
-};
 var HelpIcon = function(param) {
     var hovered = param.hovered;
     return /*#__PURE__*/ jsxs("svg", {
@@ -299,16 +237,12 @@ var CloseIcon = function() {
     });
 };
 var TopNavigation = function(param) {
-    var _param_sidebarCollapsed = param.sidebarCollapsed, sidebarCollapsed = _param_sidebarCollapsed === void 0 ? false : _param_sidebarCollapsed, onSidebarToggle = param.onSidebarToggle, _param_userInitials = param.userInitials, userInitials = _param_userInitials === void 0 ? 'U' : _param_userInitials, _param_userName = param.userName, userName = _param_userName === void 0 ? 'User' : _param_userName, userEmail = param.userEmail, userAvatarUrl = param.userAvatarUrl, userId = param.userId, userRole = param.userRole, _param_inboxCount = param.inboxCount, inboxCount = _param_inboxCount === void 0 ? 0 : _param_inboxCount, _param_notificationCount = param.notificationCount, notificationCount = _param_notificationCount === void 0 ? 0 : _param_notificationCount, onUserClick = param.onUserClick, onInboxClick = param.onInboxClick, onNotificationClick = param.onNotificationClick, onHelpClick = param.onHelpClick, onProfileClick = param.onProfileClick, onLogoutClick = param.onLogoutClick, _param_mobileMenuOpen = param.mobileMenuOpen, mobileMenuOpen = _param_mobileMenuOpen === void 0 ? false : _param_mobileMenuOpen, onMobileMenuToggle = param.onMobileMenuToggle, _param_sidebarToggleDisabled = param.sidebarToggleDisabled, sidebarToggleDisabled = _param_sidebarToggleDisabled === void 0 ? false : _param_sidebarToggleDisabled, _param_userPanelOpen = param.userPanelOpen, userPanelOpen = _param_userPanelOpen === void 0 ? false : _param_userPanelOpen;
+    var _param_sidebarCollapsed = param.sidebarCollapsed, sidebarCollapsed = _param_sidebarCollapsed === void 0 ? false : _param_sidebarCollapsed, onSidebarToggle = param.onSidebarToggle, _param_userInitials = param.userInitials, userInitials = _param_userInitials === void 0 ? 'U' : _param_userInitials, _param_userName = param.userName, userName = _param_userName === void 0 ? 'User' : _param_userName, userEmail = param.userEmail, userAvatarUrl = param.userAvatarUrl, userId = param.userId, userRole = param.userRole; param.inboxCount; param.notificationCount; var onUserClick = param.onUserClick; param.onInboxClick; param.onNotificationClick; var onHelpClick = param.onHelpClick, onProfileClick = param.onProfileClick, onLogoutClick = param.onLogoutClick, _param_mobileMenuOpen = param.mobileMenuOpen, mobileMenuOpen = _param_mobileMenuOpen === void 0 ? false : _param_mobileMenuOpen, onMobileMenuToggle = param.onMobileMenuToggle, _param_sidebarToggleDisabled = param.sidebarToggleDisabled, sidebarToggleDisabled = _param_sidebarToggleDisabled === void 0 ? false : _param_sidebarToggleDisabled, _param_userPanelOpen = param.userPanelOpen, userPanelOpen = _param_userPanelOpen === void 0 ? false : _param_userPanelOpen;
     var _useState = _sliced_to_array(useState(null), 2), hoveredItem = _useState[0], setHoveredItem = _useState[1];
-    var _useState1 = _sliced_to_array(useState(false), 2), isNotificationActive = _useState1[0], setIsNotificationActive = _useState1[1];
+    var _useState1 = _sliced_to_array(useState(false), 2); _useState1[0]; _useState1[1];
     var handleUserClick = function() {
         onUserClick === null || onUserClick === void 0 ? void 0 : onUserClick();
     };
-    var handleNotificationClick = function() {
-        setIsNotificationActive(!isNotificationActive);
-        onNotificationClick === null || onNotificationClick === void 0 ? void 0 : onNotificationClick();
-    };
     return /*#__PURE__*/ jsxs("header", {
         className: "top-navigation",
         children: [
@@ -322,13 +256,31 @@ var TopNavigation = function(param) {
                         disabled: sidebarToggleDisabled,
                         children: mobileMenuOpen ? /*#__PURE__*/ jsx(CloseIcon, {}) : /*#__PURE__*/ jsx(BurgerIcon, {})
                     }),
-                    /*#__PURE__*/ jsx("button", {
-                        className: "top-navigation__toggle top-navigation__toggle--desktop ".concat(sidebarToggleDisabled ? 'top-navigation__toggle--disabled' : ''),
-                        onClick: sidebarToggleDisabled ? undefined : onSidebarToggle,
-                        "aria-label": "Toggle sidebar",
-                        disabled: sidebarToggleDisabled,
-                        title: sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar',
-                        children: sidebarCollapsed ? /*#__PURE__*/ jsx(SidebarCollapsedIcon, {}) : /*#__PURE__*/ jsx(SidebarOpenIcon, {})
+                    /*#__PURE__*/ jsx(Tooltip, {
+                        content: sidebarCollapsed ? /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                "Expand ",
+                                /*#__PURE__*/ jsx("strong", {
+                                    children: "]"
+                                })
+                            ]
+                        }) : /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                "Collapse ",
+                                /*#__PURE__*/ jsx("strong", {
+                                    children: "["
+                                })
+                            ]
+                        }),
+                        side: "bottom",
+                        sideOffset: 8,
+                        children: /*#__PURE__*/ jsx("button", {
+                            className: "top-navigation__toggle top-navigation__toggle--desktop ".concat(sidebarToggleDisabled ? 'top-navigation__toggle--disabled' : ''),
+                            onClick: sidebarToggleDisabled ? undefined : onSidebarToggle,
+                            "aria-label": "Toggle sidebar",
+                            disabled: sidebarToggleDisabled,
+                            children: sidebarCollapsed ? /*#__PURE__*/ jsx(SidebarCollapsedIcon, {}) : /*#__PURE__*/ jsx(SidebarOpenIcon, {})
+                        })
                     }),
                     /*#__PURE__*/ jsx("img", {
                         src: img,
@@ -364,66 +316,6 @@ var TopNavigation = function(param) {
                             })
                         })
                     }),
-                    /*#__PURE__*/ jsx(Tooltip, {
-                        content: "Inbox",
-                        side: "bottom",
-                        sideOffset: 8,
-                        children: /*#__PURE__*/ jsxs("button", {
-                            className: "top-navigation__button",
-                            onMouseEnter: function() {
-                                return setHoveredItem('inbox');
-                            },
-                            onMouseLeave: function() {
-                                return setHoveredItem(null);
-                            },
-                            onClick: onInboxClick,
-                            children: [
-                                /*#__PURE__*/ jsx("div", {
-                                    className: "top-navigation__icon",
-                                    children: /*#__PURE__*/ jsx(InboxIcon, {
-                                        hovered: hoveredItem === 'inbox'
-                                    })
-                                }),
-                                inboxCount > 0 && /*#__PURE__*/ jsx("div", {
-                                    className: "top-navigation__badge top-navigation__badge--green",
-                                    children: /*#__PURE__*/ jsx("span", {
-                                        children: inboxCount
-                                    })
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(Tooltip, {
-                        content: "Notifications",
-                        side: "bottom",
-                        sideOffset: 8,
-                        disabled: isNotificationActive,
-                        children: /*#__PURE__*/ jsxs("button", {
-                            className: "top-navigation__button ".concat(isNotificationActive ? 'top-navigation__button--active' : ''),
-                            onMouseEnter: function() {
-                                return setHoveredItem('notifications');
-                            },
-                            onMouseLeave: function() {
-                                return setHoveredItem(null);
-                            },
-                            onClick: handleNotificationClick,
-                            children: [
-                                /*#__PURE__*/ jsx("div", {
-                                    className: "top-navigation__icon",
-                                    children: /*#__PURE__*/ jsx(NotificationIcon, {
-                                        active: isNotificationActive,
-                                        hovered: hoveredItem === 'notifications'
-                                    })
-                                }),
-                                notificationCount > 0 && /*#__PURE__*/ jsx("div", {
-                                    className: "top-navigation__badge ".concat(isNotificationActive ? 'top-navigation__badge--active' : 'top-navigation__badge--orange'),
-                                    children: /*#__PURE__*/ jsx("span", {
-                                        children: notificationCount
-                                    })
-                                })
-                            ]
-                        })
-                    }),
                     /*#__PURE__*/ jsx(Tooltip, {
                         content: "Help & FAQ's",
                         side: "bottom",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.25",
+  "version": "0.78.27",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"

package/src/v2/components/UserPanel/UserPanel.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import './UserPanel.scss'
+import { UserAvatar } from '../UserAvatar'
 
 export interface UserPanelProps {
     isOpen: boolean
@@ -68,18 +69,11 @@ export const UserPanel: React.FC<UserPanelProps> = ({
                 {/* Header */}
                 <div className="user-panel__header">
                     <div className="user-panel__user-info">
-                        <div className="user-panel__avatar">
-                            {avatarUrl ? (
-                                <img src={avatarUrl} alt="Profile" />
-                            ) : (
-                                <>
-                                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" className="user-panel__avatar-bg">
-                                        <circle cx="16" cy="16" r="15" fill="var(--fills-main-fill-secondary, #626A90)" fillOpacity="0.2" stroke="var(--fills-main-fill-secondary, #626A90)" strokeWidth="2" />
-                                    </svg>
-                                    <span className="user-panel__avatar-initials">{displayInitials}</span>
-                                </>
-                            )}
-                        </div>
+                        <UserAvatar
+                            initials={displayInitials}
+                            avatarUrl={avatarUrl || undefined}
+                            size="md"
+                        />
                         <div className="user-panel__user-details">
                             <h2 className="user-panel__greeting">Hey {displayFirstName}</h2>
                             {email && (

package/src/v2/navigation/DashboardLayout/DashboardLayout.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import { TopNavigation } from './TopNavigation'
 import { ProviderSidebar, NavItem } from './ProviderSidebar'
 import { AdminSidebar } from './AdminSidebar'
@@ -111,6 +111,24 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
 }) => {
     const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
+    const handleKeyDown = useCallback((event: KeyboardEvent) => {
+        const target = event.target as HTMLElement
+        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+            return
+        }
+
+        if (event.key === '[' && sidebarExpanded) {
+            onSidebarToggle?.()
+        } else if (event.key === ']' && !sidebarExpanded) {
+            onSidebarToggle?.()
+        }
+    }, [sidebarExpanded, onSidebarToggle])
+
+    useEffect(() => {
+        document.addEventListener('keydown', handleKeyDown)
+        return () => document.removeEventListener('keydown', handleKeyDown)
+    }, [handleKeyDown])
+
     const handleSidebarToggle = () => {
         if (isMobile) {
             setMobileMenuOpen(!mobileMenuOpen)
@@ -188,13 +206,14 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
 
                 
                 <main 
+                    id="scrollable"
                     className="dashboard-layout__main"
                     style={{ 
                         marginLeft: isMobile ? 0 : sidebarWidth,
                         marginTop: topHatHeight 
                     }}
                 >
-                    <div className="dashboard-layout__content">
+                    <div id="main" className="dashboard-layout__content">
                         {children}
                     </div>
                     {showFooter && <DashboardFooter version={version} />}

package/src/v2/navigation/DashboardLayout/ProviderSidebar.scss

@@ -238,10 +238,15 @@
         display: flex;
         align-items: center;
         justify-content: center;
+        color: var(--fills-main-fill-primary, #14215A);
 
         svg {
             width: 100%;
             height: 100%;
+
+            path {
+                fill: var(--fills-main-fill-primary, #14215A);
+            }
         }
 
         &--back {

package/src/v2/navigation/DashboardLayout/ProviderSidebar.tsx

@@ -189,7 +189,14 @@ export const ProviderSidebar: React.FC<ProviderSidebarProps> = ({
 
                 
                 {expanded ? (
-                    <div className="provider-sidebar__header">
+                    <div 
+                        className="provider-sidebar__header"
+                        onClick={() => handleNavClick('/profile')}
+                        role="button"
+                        tabIndex={0}
+                        onKeyDown={(e) => e.key === 'Enter' && handleNavClick('/profile')}
+                        style={{ cursor: 'pointer' }}
+                    >
                         <EntityHeader
                             name={providerName}
                             id={providerId}
@@ -201,7 +208,14 @@ export const ProviderSidebar: React.FC<ProviderSidebarProps> = ({
                     </div>
                 ) : (
                     <Tooltip content={providerName} side="right" sideOffset={8} delayDuration={100}>
-                        <div className="provider-sidebar__header provider-sidebar__header--collapsed">
+                        <div 
+                            className="provider-sidebar__header provider-sidebar__header--collapsed"
+                            onClick={() => handleNavClick('/profile')}
+                            role="button"
+                            tabIndex={0}
+                            onKeyDown={(e) => e.key === 'Enter' && handleNavClick('/profile')}
+                            style={{ cursor: 'pointer' }}
+                        >
                             <EntityHeader
                                 name={providerName}
                                 id={providerId}

package/src/v2/navigation/DashboardLayout/TopNavigation.tsx

@@ -171,15 +171,20 @@ export const TopNavigation: React.FC<TopNavigationProps> = ({
                     {mobileMenuOpen ? <CloseIcon /> : <BurgerIcon />}
                 </button>
                 
-                <button 
-                    className={`top-navigation__toggle top-navigation__toggle--desktop ${sidebarToggleDisabled ? 'top-navigation__toggle--disabled' : ''}`}
-                    onClick={sidebarToggleDisabled ? undefined : onSidebarToggle}
-                    aria-label="Toggle sidebar"
-                    disabled={sidebarToggleDisabled}
-                    title={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+                <Tooltip 
+                    content={sidebarCollapsed ? <>Expand <strong>]</strong></> : <>Collapse <strong>[</strong></>}
+                    side="bottom" 
+                    sideOffset={8}
                 >
-                    {sidebarCollapsed ? <SidebarCollapsedIcon /> : <SidebarOpenIcon />}
-                </button>
+                    <button 
+                        className={`top-navigation__toggle top-navigation__toggle--desktop ${sidebarToggleDisabled ? 'top-navigation__toggle--disabled' : ''}`}
+                        onClick={sidebarToggleDisabled ? undefined : onSidebarToggle}
+                        aria-label="Toggle sidebar"
+                        disabled={sidebarToggleDisabled}
+                    >
+                        {sidebarCollapsed ? <SidebarCollapsedIcon /> : <SidebarOpenIcon />}
+                    </button>
+                </Tooltip>
                 
                 <img src={BookedLogoMark} alt="Booked it" className="top-navigation__logo-mark" />
                 <BookedLogoFull className="top-navigation__logo-full" />
@@ -202,6 +207,7 @@ export const TopNavigation: React.FC<TopNavigationProps> = ({
                     </button>
                 </Tooltip>
                 
+                {/* Inbox - temporarily hidden
                 <Tooltip content="Inbox" side="bottom" sideOffset={8}>
                     <button 
                         className="top-navigation__button"
@@ -219,7 +225,9 @@ export const TopNavigation: React.FC<TopNavigationProps> = ({
                         )}
                     </button>
                 </Tooltip>
+                */}
                 
+                {/* Notifications - temporarily hidden
                 <Tooltip content="Notifications" side="bottom" sideOffset={8} disabled={isNotificationActive}>
                     <button 
                         className={`top-navigation__button ${isNotificationActive ? 'top-navigation__button--active' : ''}`}
@@ -237,6 +245,7 @@ export const TopNavigation: React.FC<TopNavigationProps> = ({
                         )}
                     </button>
                 </Tooltip>
+                */}
                 
                 <Tooltip content="Help & FAQ's" side="bottom" sideOffset={8}>
                     <button