@licklist/design 0.78.5-dev.37 → 0.78.5-dev.38

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,CAyJ1D,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);

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,CAkJtD,CAAA"}

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

@@ -322,13 +322,17 @@ 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 ? 'Expand ]' : 'Collapse [',
+                        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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.5-dev.37",
+  "version": "0.78.5-dev.38",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"
@@ -226,5 +226,5 @@
     "yarn": "4.4.0"
   },
   "packageManager": "yarn@4.8.0",
-  "stableVersion": "0.78.5-dev.31"
+  "stableVersion": "0.78.5-dev.38"
 }

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)

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 ]' : 'Collapse ['} 
+                    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" />