@datalayer/core 1.2.18 → 1.2.19

package/lib/components/mcp/ClientBadge.js

@@ -15,7 +15,7 @@ export const ClientBadge = ({ clientId, clientName, registration, clientHostname
     const byDocument = (registration ?? (isCimdClientId(clientId) ? 'cimd' : 'dcr')) === 'cimd';
     const hostname = clientHostname || (byDocument ? clientHostnameOf(clientId) : '');
     const name = clientName || (byDocument ? hostname : '') || clientId || 'Unknown client';
-    return (_jsxs(Box, { sx: { display: 'grid', gap: '2px', minWidth: 0 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, minWidth: 0 }, children: [_jsx(Text, { sx: {
+    return (_jsxs(Box, { display: "grid", gap: "2px", minWidth: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, minWidth: 0, children: [_jsx(Text, { sx: {
                             fontSize: 1,
                             fontWeight: 'semibold',
                             overflow: 'hidden',

package/lib/components/mcp/McpErrorBlankslate.js

@@ -12,6 +12,6 @@ const VISUAL = {
 };
 export const McpErrorBlankslate = ({ state, onRetry, border = true, }) => {
     const Icon = VISUAL[state.reason];
-    return (_jsx(Box, { sx: { width: '100%', minWidth: 0 }, children: _jsxs(Blankslate, { border: border, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(Icon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: state.heading }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: state.description }) }), state.retryable && onRetry && (_jsx(Button, { size: "small", onClick: onRetry, children: "Try again" }))] }) }));
+    return (_jsx(Box, { width: "100%", minWidth: 0, children: _jsxs(Blankslate, { border: border, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(Icon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: state.heading }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: state.description }) }), state.retryable && onRetry && (_jsx(Button, { size: "small", onClick: onRetry, children: "Try again" }))] }) }));
 };
 export default McpErrorBlankslate;

package/lib/components/mcp/ScopeList.js

@@ -9,6 +9,6 @@ export const ScopeList = ({ scopes, max = 3 }) => {
     }
     const shown = scopes.slice(0, max);
     const rest = scopes.length - shown.length;
-    return (_jsxs(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap', alignItems: 'center' }, children: [shown.map(scope => (_jsx(Label, { size: "small", variant: "secondary", children: scope }, scope))), rest > 0 && (_jsxs(Text, { as: "span", title: scopes.join('\n'), "aria-label": `and ${rest} more: ${scopes.slice(max).join(', ')}`, sx: { fontSize: 0, color: 'fg.muted' }, children: ["+", rest] }))] }));
+    return (_jsxs(Box, { display: "flex", gap: 1, flexWrap: "wrap", alignItems: "center", children: [shown.map(scope => (_jsx(Label, { size: "small", variant: "secondary", children: scope }, scope))), rest > 0 && (_jsxs(Text, { as: "span", title: scopes.join('\n'), "aria-label": `and ${rest} more: ${scopes.slice(max).join(', ')}`, sx: { fontSize: 0, color: 'fg.muted' }, children: ["+", rest] }))] }));
 };
 export default ScopeList;

package/lib/components/notebooks/JupyterNotebook.js

@@ -6,8 +6,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@datalayer/primer-addons';
 import { Lumino } from '@datalayer/jupyter-react';
 export const JupyterNotebook = ({ boxPanel, height = '100%', }) => {
-    return (_jsx("div", { style: { position: 'relative' }, children: _jsx(Box, { className: "jp-LabShell", sx: {
-                position: 'relative',
+    return (_jsx("div", { style: { position: 'relative' }, children: _jsx(Box, { className: "jp-LabShell", position: "relative", sx: {
                 '& .dla-Jupyter-Notebook': {
                     height,
                     maxHeight: 1000,

package/lib/components/principal/Principal.js

@@ -226,9 +226,7 @@ export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2
             hydratedEntity?.avatarUrl ||
             cachedPrincipal?.avatarUrl ||
             undefined,
-        avatarIcon: principal.avatarIcon ||
-            hydratedEntity?.avatarIcon ||
-            undefined,
+        avatarIcon: principal.avatarIcon || hydratedEntity?.avatarIcon || undefined,
         banner: principal.banner || hydratedEntity?.banner || undefined,
         firstName: principal.firstName ||
             hydratedEntity?.firstName ||
@@ -290,12 +288,6 @@ export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2
         resolvedIsPublic,
         upsertCachedPrincipal,
     ]);
-    return (_jsxs(Box, { sx: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap,
-            minWidth: 0,
-            ...sx,
-        }, children: [_jsx(PrincipalAvatar, { kind: resolvedPrincipal.kind, avatarUrl: resolvedPrincipal.avatarUrl, avatarIcon: resolvedPrincipal.avatarIcon, alt: resolvedPrincipal.displayName, size: avatarSize, square: square }), _jsx(PrincipalDetailsOverlay, { kind: resolvedPrincipal.kind, uid: resolvedPrincipal.uid, displayName: resolvedPrincipal.displayName, name: resolvedPrincipal.name, description: resolvedPrincipal.description, handle: resolvedPrincipal.handle, accountHandle: resolvedPrincipal.accountHandle, firstName: resolvedPrincipal.firstName, lastName: resolvedPrincipal.lastName, email: resolvedPrincipal.email, origin: resolvedPrincipal.origin, avatarUrl: resolvedPrincipal.avatarUrl, avatarIcon: resolvedPrincipal.avatarIcon, organizationName: teamOrganizationNameResolved, memberCount: teamMemberCount, isPublic: resolvedIsPublic, isAdmin: isAdmin })] }));
+    return (_jsxs(Box, { display: "inline-flex", alignItems: "center", gap: gap, minWidth: 0, sx: sx, children: [_jsx(PrincipalAvatar, { kind: resolvedPrincipal.kind, avatarUrl: resolvedPrincipal.avatarUrl, avatarIcon: resolvedPrincipal.avatarIcon, alt: resolvedPrincipal.displayName, size: avatarSize, square: square }), _jsx(PrincipalDetailsOverlay, { kind: resolvedPrincipal.kind, uid: resolvedPrincipal.uid, displayName: resolvedPrincipal.displayName, name: resolvedPrincipal.name, description: resolvedPrincipal.description, handle: resolvedPrincipal.handle, accountHandle: resolvedPrincipal.accountHandle, firstName: resolvedPrincipal.firstName, lastName: resolvedPrincipal.lastName, email: resolvedPrincipal.email, origin: resolvedPrincipal.origin, avatarUrl: resolvedPrincipal.avatarUrl, avatarIcon: resolvedPrincipal.avatarIcon, organizationName: teamOrganizationNameResolved, memberCount: teamMemberCount, isPublic: resolvedIsPublic, isAdmin: isAdmin })] }));
 };
 export default Principal;

package/lib/components/principal/PrincipalAppearance.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Suspense, lazy, useEffect, useState, } from 'react';
-import { Box, Button, Text, Tooltip } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Button, Text, Tooltip } from '@primer/react';
 import { Dialog } from '@primer/react/experimental';
 /**
  * An avatar icon, fetched the first time it is drawn.
@@ -583,13 +584,10 @@ export function PrincipalBannerImage({ banner, height = 180, }) {
     const Banner = PRINCIPAL_BANNERS.find(option => option.name === banner)?.Component;
     if (!Banner)
         return null;
-    return (_jsx(Box, { sx: {
+    return (_jsx(Box, { overflow: "hidden", borderRadius: 2, bg: "canvas.subtle", sx: {
             position: 'relative',
             width: '100%',
             height,
-            overflow: 'hidden',
-            borderRadius: 2,
-            bg: 'canvas.subtle',
             '& > svg': {
                 position: 'absolute',
                 inset: 0,
@@ -624,17 +622,14 @@ export function PrincipalAvatarPicker({ value, onChange, disabled = false, }) {
                         width: 'min(1080px, calc(100vw - 32px))',
                         maxWidth: 'none',
                     },
-                }, children: _jsx(Box, { sx: {
-                        display: 'grid',
-                        // Twelve to a line, whatever the dialog is wide: the columns
-                        // share it evenly and `minmax(0, …)` lets them shrink under
-                        // their content, which a long name would otherwise widen.
-                        gridTemplateColumns: [
-                            'repeat(6, minmax(0, 1fr))',
-                            'repeat(12, minmax(0, 1fr))',
-                        ],
-                        gap: 2,
-                    }, children: PRINCIPAL_AVATAR_ICONS.map(({ name, label, description, Icon }) => (
+                }, children: _jsx(Box, { display: "grid", 
+                    // Twelve to a line, whatever the dialog is wide: the columns
+                    // share it evenly and `minmax(0, …)` lets them shrink under
+                    // their content, which a long name would otherwise widen.
+                    gridTemplateColumns: [
+                        'repeat(6, minmax(0, 1fr))',
+                        'repeat(12, minmax(0, 1fr))',
+                    ], gap: 2, children: PRINCIPAL_AVATAR_ICONS.map(({ name, label, description, Icon }) => (
                     // A button drawn as a card rather than a Primer `Button`: the
                     // avatar is named under it, as the banners are under theirs.
                     // The name under a card is clipped when it is long, and a
@@ -643,25 +638,7 @@ export function PrincipalAvatarPicker({ value, onChange, disabled = false, }) {
                     _jsx(Tooltip, { text: description ? `${label} — ${description}` : label, direction: "n", children: _jsxs(Box, { as: "button", type: "button", "aria-label": description ? `${label} — ${description}` : label, "aria-pressed": value === name, onClick: () => {
                                 onChange(name);
                                 setOpen(false);
-                            }, sx: {
-                                display: 'block',
-                                width: '100%',
-                                p: 0,
-                                overflow: 'hidden',
-                                appearance: 'none',
-                                color: 'fg.default',
-                                cursor: 'pointer',
-                                border: '1px solid',
-                                borderRadius: 2,
-                                borderColor: value === name ? 'accent.emphasis' : 'border.default',
-                                bg: value === name ? 'accent.subtle' : 'canvas.default',
-                                ':hover': { borderColor: 'accent.emphasis' },
-                            }, children: [_jsx(Box, { sx: {
-                                        height: 72,
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                    }, children: _jsx(Icon, { size: 52, themed: true, colormode: true }) }), _jsx(Text, { sx: {
+                            }, display: "block", width: "100%", p: 0, overflow: "hidden", appearance: "none", color: "fg.default", cursor: "pointer", border: "1px solid", borderRadius: 2, borderColor: value === name ? 'accent.emphasis' : 'border.default', bg: value === name ? 'accent.subtle' : 'canvas.default', hover: { borderColor: 'accent.emphasis' }, children: [_jsx(Box, { height: 72, display: "flex", alignItems: "center", justifyContent: "center", children: _jsx(Icon, { size: 52, themed: true, colormode: true }) }), _jsx(Text, { sx: {
                                         display: 'block',
                                         px: 2,
                                         py: 1,
@@ -679,7 +656,7 @@ export function PrincipalBannerPicker({ value, onChange, disabled = false, showP
     const [selectedName, setSelectedName] = useState(value);
     useEffect(() => setSelectedName(value), [value]);
     const selected = PRINCIPAL_BANNERS.find(option => option.name === selectedName);
-    return (_jsxs(_Fragment, { children: [showPreview && selected ? (_jsx(Box, { sx: { mb: 2 }, children: _jsx(PrincipalBannerImage, { banner: selected.name, height: 120 }) })) : null, _jsx(Button, { type: "button", disabled: disabled, onClick: () => setOpen(true), children: selected ? `Change Banner (${selected.label})` : 'Choose Banner' }), open ? (_jsx(Dialog, { title: "Choose a Banner", onClose: () => setOpen(false), width: "xlarge", 
+    return (_jsxs(_Fragment, { children: [showPreview && selected ? (_jsx(Box, { mb: 2, children: _jsx(PrincipalBannerImage, { banner: selected.name, height: 120 }) })) : null, _jsx(Button, { type: "button", disabled: disabled, onClick: () => setOpen(true), children: selected ? `Change Banner (${selected.label})` : 'Choose Banner' }), open ? (_jsx(Dialog, { title: "Choose a Banner", onClose: () => setOpen(false), width: "xlarge", 
                 // Under `&&` for the reason given on the avatar picker: a plain
                 // `sx` ties with the named width and may lose to it.
                 sx: {
@@ -687,38 +664,17 @@ export function PrincipalBannerPicker({ value, onChange, disabled = false, showP
                         width: 'min(960px, calc(100vw - 32px))',
                         maxWidth: 'none',
                     },
-                }, children: _jsx(Box, { sx: {
-                        display: 'grid',
-                        // Four to a row, so a banner is seen against its neighbours
-                        // rather than one at a time; one column on a narrow overlay,
-                        // where four would be four slivers.
-                        gridTemplateColumns: ['1fr', 'repeat(4, minmax(0, 1fr))'],
-                        gap: 3,
-                    }, children: PRINCIPAL_BANNERS.map(({ name, label, Component }) => (_jsxs(Box, { as: "button", type: "button", "aria-label": label, "aria-pressed": selectedName === name, onClick: () => {
+                }, children: _jsx(Box, { display: "grid", 
+                    // Four to a row, so a banner is seen against its neighbours
+                    // rather than one at a time; one column on a narrow overlay,
+                    // where four would be four slivers.
+                    gridTemplateColumns: ['1fr', 'repeat(4, minmax(0, 1fr))'], gap: 3, children: PRINCIPAL_BANNERS.map(({ name, label, Component }) => (_jsxs(Box, { as: "button", type: "button", "aria-label": label, "aria-pressed": selectedName === name, onClick: () => {
                             setSelectedName(name);
                             onChange(name);
                             setOpen(false);
-                        }, sx: {
-                            display: 'block',
-                            width: '100%',
-                            p: 0,
-                            overflow: 'hidden',
-                            appearance: 'none',
-                            color: 'fg.default',
-                            cursor: 'pointer',
-                            border: '1px solid',
-                            borderRadius: 2,
-                            borderColor: selectedName === name
-                                ? 'accent.emphasis'
-                                : 'border.default',
-                            bg: selectedName === name ? 'accent.subtle' : 'canvas.default',
-                            textAlign: 'left',
-                            ':hover': { borderColor: 'accent.emphasis' },
-                        }, children: [_jsx(Box, { sx: {
+                        }, display: "block", width: "100%", p: 0, overflow: "hidden", appearance: "none", color: "fg.default", cursor: "pointer", border: "1px solid", borderRadius: 2, borderColor: selectedName === name ? 'accent.emphasis' : 'border.default', bg: selectedName === name ? 'accent.subtle' : 'canvas.default', textAlign: "left", hover: { borderColor: 'accent.emphasis' }, children: [_jsx(Box, { aspectRatio: "3 / 1", overflow: "hidden", sx: {
                                     position: 'relative',
                                     width: '100%',
-                                    aspectRatio: '3 / 1',
-                                    overflow: 'hidden',
                                     '& > svg': {
                                         position: 'absolute',
                                         inset: 0,

package/lib/components/principal/PrincipalAvatar.js

@@ -28,34 +28,14 @@ export function PrincipalAvatar({ kind, avatarUrl, avatarIcon, avatarEmoji, alt,
         return (_jsx(UserAvatar, { avatarUrl: avatarUrl, avatarIcon: avatarIcon, avatarEmoji: avatarEmoji, size: size, square: square, iconSize: getFallbackIconSize(size), ring: ring, className: className }));
     }
     if (SelectedIcon) {
-        return (_jsx(Box, { className: className, sx: {
-                width: size,
-                height: size,
-                display: 'inline-flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                overflow: 'hidden',
-                borderRadius: square ? 2 : '50%',
-                // The disc of `UserAvatar`, for the same reason: the shape is what
-                // says "avatar", and an icon drawn on nothing shows none of it.
-                bg: 'accent.subtle',
-                ...ringSx,
-            }, "aria-label": alt || `${kind} avatar`, children: _jsx(SelectedIcon, { size: getFallbackIconSize(size), themed: true, colormode: true }) }));
+        return (_jsx(Box, { className: className, width: size, height: size, display: "inline-flex", alignItems: "center", justifyContent: "center", overflow: "hidden", borderRadius: square ? 2 : '50%', 
+            // The disc of `UserAvatar`, for the same reason: the shape is what
+            // says "avatar", and an icon drawn on nothing shows none of it.
+            bg: "accent.subtle", sx: ringSx, "aria-label": alt || `${kind} avatar`, children: _jsx(SelectedIcon, { size: getFallbackIconSize(size), themed: true, colormode: true }) }));
     }
     const iconSize = getFallbackIconSize(size);
     const borderRadius = square ? 2 : '50%';
     const Icon = kind === 'team' ? PeopleIcon : OrganizationIcon;
-    return (_jsx(Box, { className: className, sx: {
-            width: size,
-            height: size,
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            bg: 'canvas.subtle',
-            borderRadius,
-            border: '1px solid',
-            borderColor: 'border.default',
-            ...ringSx,
-        }, "aria-label": alt || (kind === 'team' ? 'Team' : 'Organization'), children: _jsx(Icon, { size: iconSize }) }));
+    return (_jsx(Box, { className: className, width: size, height: size, display: "inline-flex", alignItems: "center", justifyContent: "center", bg: "canvas.subtle", borderRadius: borderRadius, border: "1px solid", borderColor: "border.default", sx: ringSx, "aria-label": alt || (kind === 'team' ? 'Team' : 'Organization'), children: _jsx(Icon, { size: iconSize }) }));
 }
 export default PrincipalAvatar;

package/lib/components/principal/PrincipalBadge.js

@@ -4,7 +4,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Distributed under the terms of the Modified BSD License.
  */
 import { useMemo } from 'react';
-import { Box, Label, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Label, Text } from '@primer/react';
 import { useCache } from '../../hooks/index.js';
 import { useIAMStore } from '../../state/substates/index.js';
 import { useSelectedPrincipal } from '../../hooks/useSelectedPrincipal.js';
@@ -220,17 +221,6 @@ export const PrincipalBadge = ({ principal: providedPrincipal, showPrincipalLabe
         resolvedOrganization?.avatarIcon,
         resolvedUser?.origin,
     ]);
-    return (_jsxs(Box, { sx: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 2,
-            px: 2,
-            py: 1,
-            border: '1px solid',
-            borderColor: 'border.default',
-            borderRadius: 2,
-            bg: 'canvas.subtle',
-            ...sx,
-        }, children: [showPrincipalLabel && (_jsx(Label, { size: "small", variant: "accent", children: principalLabel })), showApplyingToText && (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Applying to" })), _jsx(Principal, { principal: principal, isAdmin: isAdmin }), showOriginLabel && principal.origin && (_jsx(Label, { size: "small", variant: "secondary", children: principal.origin }))] }));
+    return (_jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 2, px: 2, py: 1, border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.subtle", sx: sx, children: [showPrincipalLabel && (_jsx(Label, { size: "small", variant: "accent", children: principalLabel })), showApplyingToText && (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Applying to" })), _jsx(Principal, { principal: principal, isAdmin: isAdmin }), showOriginLabel && principal.origin && (_jsx(Label, { size: "small", variant: "secondary", children: principal.origin }))] }));
 };
 export default PrincipalBadge;

package/lib/components/principal/PrincipalBanner.js

@@ -8,7 +8,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * (user, organization, or team) with a colored visual so a user
  * can immediately see which principal a settings page applies to.
  */
-import { Box, Label, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Label, Text } from '@primer/react';
 import { OrganizationIcon, PeopleIcon, PersonIcon, } from '@primer/octicons-react';
 import { useSelectedPrincipal } from '../../hooks/useSelectedPrincipal.js';
 import { useIAMStore } from '../../state/substates/index.js';
@@ -39,33 +40,7 @@ export const PrincipalBanner = ({ caption, rightContent, }) => {
             ? 'attention.muted'
             : 'accent.muted';
     const fg = isOrganization ? 'done.fg' : isTeam ? 'attention.fg' : 'accent.fg';
-    return (_jsxs(Box, { sx: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: 3,
-            p: 3,
-            border: '1px solid',
-            borderColor,
-            borderRadius: 2,
-            bg,
-        }, children: [_jsx(Box, { sx: {
-                    width: 40,
-                    height: 40,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderRadius: '50%',
-                    bg: 'canvas.default',
-                    border: '1px solid',
-                    borderColor,
-                    color: fg,
-                    flex: '0 0 auto',
-                }, children: _jsx(Icon, { size: 20 }) }), _jsxs(Box, { sx: { minWidth: 0, flex: 1 }, children: [_jsxs(Box, { sx: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 2,
-                            flexWrap: 'wrap',
-                        }, children: [_jsx(Text, { sx: {
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: 3, p: 3, border: "1px solid", borderColor: borderColor, borderRadius: 2, bg: bg, children: [_jsx(Box, { width: 40, height: 40, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", bg: "canvas.default", border: "1px solid", borderColor: borderColor, color: fg, flex: "0 0 auto", children: _jsx(Icon, { size: 20 }) }), _jsxs(Box, { minWidth: 0, flex: 1, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap", children: [_jsx(Text, { sx: {
                                     color: 'fg.muted',
                                     fontSize: 0,
                                     textTransform: 'uppercase',
@@ -76,9 +51,6 @@ export const PrincipalBanner = ({ caption, rightContent, }) => {
                                 ? 'Organization'
                                 : isTeam
                                     ? 'Team'
-                                    : 'User' }), caption && (_jsx(Text, { as: "p", sx: { m: 0, mt: 1, color: 'fg.muted', fontSize: 1 }, children: caption }))] }), rightContent ? (_jsx(Box, { sx: {
-                    flex: ['1 1 100%', '0 0 auto'],
-                    width: ['100%', 'min(640px, 58%)'],
-                }, children: rightContent })) : null] }));
+                                    : 'User' }), caption && (_jsx(Text, { as: "p", sx: { m: 0, mt: 1, color: 'fg.muted', fontSize: 1 }, children: caption }))] }), rightContent ? (_jsx(Box, { flex: ['1 1 100%', '0 0 auto'], width: ['100%', 'min(640px, 58%)'], children: rightContent })) : null] }));
 };
 export default PrincipalBanner;

package/lib/components/principal/PrincipalDetailsOverlay.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ActionMenu, Box, Button, Label, Text, ThemeProvider, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { ActionMenu, Button, Label, Text, ThemeProvider } from '@primer/react';
 import { useNavigate } from '../../hooks/index.js';
 import { PrincipalAvatar } from './PrincipalAvatar.js';
 import { displayHandleText } from '../display/DisplayHandle.js';
@@ -139,18 +140,13 @@ export function PrincipalDetailsCard({ kind, uid, displayName, name, description
     const organizationPath = teamOrganizationHandle
         ? `/${teamOrganizationHandle.replace(/^@+/, '')}`
         : '';
-    return (_jsxs(Box, { sx: { display: 'grid', gap: 3, p: 4, minWidth: 420 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(PrincipalAvatar, { kind: kind, avatarUrl: avatarUrl, avatarIcon: avatarIcon, avatarEmoji: avatarEmoji, alt: normalizedDisplayName, size: 40, 
+    return (_jsxs(Box, { display: "grid", gap: 3, p: 4, minWidth: 420, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(PrincipalAvatar, { kind: kind, avatarUrl: avatarUrl, avatarIcon: avatarIcon, avatarEmoji: avatarEmoji, alt: normalizedDisplayName, size: 40, 
                         // The card sets the avatar on its own ground, the same colour
                         // the avatar itself is on: without an edge of its own it has
                         // no visible shape at all. Round, and ringed.
-                        square: false, ring: true }), _jsxs(Box, { sx: { display: 'grid', gap: 0.5 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: normalizedDisplayName }), kind === 'team' ? (teamHandleOnly ? (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [displayHandleText(teamHandleOnly), teamOrganizationHandle
+                        square: false, ring: true }), _jsxs(Box, { display: "grid", gap: 0.5, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: normalizedDisplayName }), kind === 'team' ? (teamHandleOnly ? (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [displayHandleText(teamHandleOnly), teamOrganizationHandle
                                         ? ` · @${teamOrganizationHandle.replace(/^@+/, '')}`
-                                        : ''] })) : null) : resolvedHandle ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: displayHandleText(resolvedHandle) })) : null] })] }), _jsxs(Box, { sx: {
-                    display: 'grid',
-                    gridTemplateColumns: '110px 1fr',
-                    gap: 1,
-                    alignItems: 'baseline',
-                }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Kind" }), _jsx(Text, { sx: { fontSize: 1 }, children: kind }), resolvedHandle && kind !== 'team' ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Handle" }), _jsx(Text, { sx: { fontSize: 1 }, children: displayHandleText(resolvedHandle) })] })) : null, normalizedUid ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "UID" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedUid })] })) : null, kind === 'personal' ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "First name" }), _jsx(Text, { sx: { fontSize: 1 }, children: firstName || 'N/A' }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Last name" }), _jsx(Text, { sx: { fontSize: 1 }, children: lastName || 'N/A' }), email ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Email" }), _jsx(Text, { sx: { fontSize: 1 }, children: email })] })) : null, _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Origin" }), _jsx(Label, { size: "small", variant: "secondary", title: normalizedOrigin, sx: {
+                                        : ''] })) : null) : resolvedHandle ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: displayHandleText(resolvedHandle) })) : null] })] }), _jsxs(Box, { display: "grid", gridTemplateColumns: "110px 1fr", gap: 1, alignItems: "baseline", children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Kind" }), _jsx(Text, { sx: { fontSize: 1 }, children: kind }), resolvedHandle && kind !== 'team' ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Handle" }), _jsx(Text, { sx: { fontSize: 1 }, children: displayHandleText(resolvedHandle) })] })) : null, normalizedUid ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "UID" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedUid })] })) : null, kind === 'personal' ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "First name" }), _jsx(Text, { sx: { fontSize: 1 }, children: firstName || 'N/A' }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Last name" }), _jsx(Text, { sx: { fontSize: 1 }, children: lastName || 'N/A' }), email ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Email" }), _jsx(Text, { sx: { fontSize: 1 }, children: email })] })) : null, _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Origin" }), _jsx(Label, { size: "small", variant: "secondary", title: normalizedOrigin, sx: {
                                     justifySelf: 'start',
                                     width: 'fit-content',
                                     maxWidth: '100%',
@@ -166,7 +162,7 @@ export function PrincipalDetailsCard({ kind, uid, displayName, name, description
                                     overflow: 'hidden',
                                     textOverflow: 'ellipsis',
                                     whiteSpace: 'nowrap',
-                                }, children: normalizedOrigin })] }))] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 2 }, children: [kind === 'team' && organizationPath ? (_jsx(Button, { size: "small", variant: "invisible", onClick: () => go(organizationPath), children: "View Organization" })) : null, _jsx(Button, { size: "small", onClick: () => go(targetPath), disabled: !targetPath, children: "View Profile" })] })] }));
+                                }, children: normalizedOrigin })] }))] }), _jsxs(Box, { display: "flex", justifyContent: "flex-end", gap: 2, children: [kind === 'team' && organizationPath ? (_jsx(Button, { size: "small", variant: "invisible", onClick: () => go(organizationPath), children: "View Organization" })) : null, _jsx(Button, { size: "small", onClick: () => go(targetPath), disabled: !targetPath, children: "View Profile" })] })] }));
 }
 /**
  * A principal's details, shown from a click on their name.
@@ -179,18 +175,6 @@ export function PrincipalDetailsOverlay(props) {
         normalize(props.handle) ||
         normalize(props.uid) ||
         'Principal';
-    return (_jsx(ThemeProvider, { children: _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Box, { as: "button", type: "button", sx: {
-                            fontWeight: 'semibold',
-                            color: 'accent.fg',
-                            textDecoration: 'underline',
-                            background: 'transparent',
-                            border: 0,
-                            padding: 0,
-                            margin: 0,
-                            cursor: 'pointer',
-                            ':hover': {
-                                textDecoration: 'underline',
-                            },
-                        }, children: normalizedDisplayName }) }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsx(PrincipalDetailsCard, { ...props }) })] }) }));
+    return (_jsx(ThemeProvider, { children: _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Box, { as: "button", type: "button", fontWeight: "semibold", color: "accent.fg", textDecoration: "underline", background: "transparent", border: 0, padding: 0, margin: 0, cursor: "pointer", hover: { textDecoration: 'underline' }, children: normalizedDisplayName }) }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsx(PrincipalDetailsCard, { ...props }) })] }) }));
 }
 export default PrincipalDetailsOverlay;

package/lib/components/principal/PrincipalHoverCard.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { AnchoredOverlay, Box, ThemeProvider } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { AnchoredOverlay, ThemeProvider } from '@primer/react';
 import { PrincipalDetailsCard, } from './PrincipalDetailsOverlay.js';
 /** How long the card lingers after the pointer leaves, to let it be entered. */
 const HIDE_DELAY_MS = 200;
@@ -30,23 +31,19 @@ export function PrincipalHoverCard({ children, className, ...principal }) {
             onMouseEnter: show,
             onMouseLeave: hide,
             preventFocusOnOpen: true,
-        }, renderAnchor: anchorProps => (_jsx(Box, { ...anchorProps, className: [className, anchorProps.className]
+        }, renderAnchor: anchorProps => (_jsx(Box
+        // Primer's anchor props, as the record of props Box takes.
+        , { ...anchorProps, className: [className, anchorProps.className]
                 .filter(Boolean)
-                .join(' '), onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, sx: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                cursor: 'pointer',
-                /*
-                 * Round, like the face it holds.
-                 *
-                 * This box stands between the stack and the avatar — it is the
-                 * element `AvatarStack` sizes and clips as one of its items — so a
-                 * square one clipped a round avatar into a square. It takes the
-                 * shape of what it wraps.
-                 */
-                borderRadius: '50%',
-                overflow: 'hidden',
-            }, children: children })), children: _jsx(ThemeProvider, { children: _jsx(PrincipalDetailsCard, { ...principal }) }) }));
+                .join(' '), onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", 
+            /*
+             * Round, like the face it holds.
+             *
+             * This box stands between the stack and the avatar — it is the
+             * element `AvatarStack` sizes and clips as one of its items — so a
+             * square one clipped a round avatar into a square. It takes the
+             * shape of what it wraps.
+             */
+            borderRadius: "50%", overflow: "hidden", children: children })), children: _jsx(ThemeProvider, { children: _jsx(PrincipalDetailsCard, { ...principal }) }) }));
 }
 export default PrincipalHoverCard;

package/lib/components/principal/PrincipalSwitcherMenu.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { ActionList, ActionMenu, Box, Button, Text, ThemeProvider, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { ActionList, ActionMenu, Button, Text, ThemeProvider, } from '@primer/react';
 import { OrganizationIcon, PeopleIcon, PersonIcon, TriangleDownIcon, } from '@primer/octicons-react';
 import { useCache, useAuthorization } from '../../hooks/index.js';
 import { useCoreStore } from '../../state/index.js';
@@ -198,38 +199,12 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
         color: 'accent.fg',
         fontWeight: 'semibold',
     };
-    return (_jsx(ThemeProvider, { children: _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: showClosedBorder ? (_jsxs(Box, { as: "button", type: "button", "aria-label": "Switch principal", sx: {
-                            width: fullWidth ? '100%' : 'auto',
-                            boxSizing: 'border-box',
-                            px: 2,
-                            py: 2,
-                            fontSize: 0,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                            gap: 2,
+    return (_jsx(ThemeProvider, { children: _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: showClosedBorder ? (_jsxs(Box, { as: "button", type: "button", "aria-label": "Switch principal", width: fullWidth ? '100%' : 'auto', boxSizing: "border-box", px: 2, py: 2, fontSize: 0, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, bg: "canvas.subtle", border: "1px solid", borderColor: "border.default", borderRadius: 2, cursor: "pointer", textAlign: "left", transition: "background-color 120ms ease", hover: { bg: 'canvas.subtle' }, focusVisible: {
                             bg: 'canvas.subtle',
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                            borderRadius: 2,
-                            cursor: 'pointer',
-                            textAlign: 'left',
-                            transition: 'background-color 120ms ease',
-                            ':hover': {
-                                bg: 'canvas.subtle',
-                            },
-                            ':focus-visible': {
-                                bg: 'canvas.subtle',
-                                outline: '2px solid',
-                                outlineColor: 'accent.emphasis',
-                                outlineOffset: '2px',
-                            },
-                        }, children: [_jsx(Box, { sx: {
-                                    display: 'inline-flex',
-                                    alignItems: 'center',
-                                    color: 'fg.muted',
-                                    flexShrink: 0,
-                                }, children: selectedPrincipalKind === 'organization' ? (_jsx(PeopleIcon, { size: 16 })) : selectedPrincipalKind === 'team' ? (_jsx(OrganizationIcon, { size: 16 })) : (_jsx(PersonIcon, { size: 16 })) }), _jsx(Box, { sx: { minWidth: 0, flex: 1 }, children: _jsx(Text, { sx: {
+                            outline: '2px solid',
+                            outlineColor: 'accent.emphasis',
+                            outlineOffset: '2px',
+                        }, children: [_jsx(Box, { display: "inline-flex", alignItems: "center", color: "fg.muted", flexShrink: 0, children: selectedPrincipalKind === 'organization' ? (_jsx(PeopleIcon, { size: 16 })) : selectedPrincipalKind === 'team' ? (_jsx(OrganizationIcon, { size: 16 })) : (_jsx(PersonIcon, { size: 16 })) }), _jsx(Box, { minWidth: 0, flex: 1, children: _jsx(Text, { sx: {
                                         display: 'block',
                                         color: 'accent.fg',
                                         fontWeight: 'semibold',
@@ -238,35 +213,10 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                         overflow: 'hidden',
                                         textOverflow: 'ellipsis',
                                         maxWidth: '100%',
-                                    }, children: selectedPrincipalLabelClosed }) }), isPlatformAdmin && isCurrentUserPrincipal ? (_jsx(Box, { sx: {
-                                    flexShrink: 0,
-                                    display: 'inline-flex',
-                                    alignItems: 'center',
-                                }, children: _jsx(AdminLabel, {}) })) : null, _jsx(Box, { sx: {
-                                    display: 'inline-flex',
-                                    alignItems: 'center',
-                                    color: 'fg.muted',
-                                    flexShrink: 0,
-                                    ml: isPlatformAdmin && isCurrentUserPrincipal ? 1 : 0,
-                                }, children: _jsx(TriangleDownIcon, { size: 12 }) })] })) : (_jsx(Button, { variant: "invisible", size: "small", "aria-label": "Switch principal", trailingVisual: TriangleDownIcon, sx: {
+                                    }, children: selectedPrincipalLabelClosed }) }), isPlatformAdmin && isCurrentUserPrincipal ? (_jsx(Box, { flexShrink: 0, display: "inline-flex", alignItems: "center", children: _jsx(AdminLabel, {}) })) : null, _jsx(Box, { display: "inline-flex", alignItems: "center", color: "fg.muted", flexShrink: 0, ml: isPlatformAdmin && isCurrentUserPrincipal ? 1 : 0, children: _jsx(TriangleDownIcon, { size: 12 }) })] })) : (_jsx(Button, { variant: "invisible", size: "small", "aria-label": "Switch principal", trailingVisual: TriangleDownIcon, sx: {
                             maxWidth: fullWidth ? '100%' : ['200px', '260px', '360px'],
                             width: fullWidth ? '100%' : 'auto',
-                        }, children: _jsxs(Box, { sx: {
-                                display: 'inline-flex',
-                                alignItems: 'center',
-                                gap: 1,
-                                minWidth: 0,
-                            }, children: [_jsx(Box, { sx: {
-                                        display: 'inline-flex',
-                                        alignItems: 'center',
-                                        color: 'fg.muted',
-                                        flexShrink: 0,
-                                    }, children: selectedPrincipalKind === 'organization' ? (_jsx(PeopleIcon, { size: 16 })) : selectedPrincipalKind === 'team' ? (_jsx(OrganizationIcon, { size: 16 })) : (_jsx(PersonIcon, { size: 16 })) }), _jsx(Box, { sx: {
-                                        minWidth: 0,
-                                        overflow: 'hidden',
-                                        textOverflow: 'ellipsis',
-                                        whiteSpace: 'nowrap',
-                                    }, children: _jsx(Text, { sx: {
+                        }, children: _jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, minWidth: 0, children: [_jsx(Box, { display: "inline-flex", alignItems: "center", color: "fg.muted", flexShrink: 0, children: selectedPrincipalKind === 'organization' ? (_jsx(PeopleIcon, { size: 16 })) : selectedPrincipalKind === 'team' ? (_jsx(OrganizationIcon, { size: 16 })) : (_jsx(PersonIcon, { size: 16 })) }), _jsx(Box, { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: _jsx(Text, { sx: {
                                             color: 'accent.fg',
                                             fontWeight: 'semibold',
                                         }, children: selectedPrincipalLabelClosed }) }), isPlatformAdmin && isCurrentUserPrincipal ? (_jsx(AdminLabel, {})) : null] }) })) }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsxs(ActionList, { selectionVariant: "single", children: [_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Personal" }), _jsxs(ActionList.Item, { disabled: isCurrentUserPrincipal, selected: isCurrentUserPrincipal, sx: isCurrentUserPrincipal ? selectedItemSx : undefined, onSelect: () => {
@@ -276,16 +226,10 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                             if (personalUid && personalHandle) {
                                                 selectUser(personalUid, personalHandle);
                                             }
-                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(UserAvatar, { avatarUrl: user?.avatarUrl, avatarIcon: user?.avatarIcon, size: 16, square: false, ring: true }) }), _jsxs(Box, { as: "span", sx: {
-                                                    display: 'block',
-                                                    minWidth: 0,
-                                                    overflow: 'hidden',
-                                                    textOverflow: 'ellipsis',
-                                                    whiteSpace: 'nowrap',
-                                                }, children: [String(user?.friendlyName ||
+                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(UserAvatar, { avatarUrl: user?.avatarUrl, avatarIcon: user?.avatarIcon, size: 16, square: false, ring: true }) }), _jsxs(Box, { as: "span", display: "block", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: [String(user?.friendlyName ||
                                                         user?.displayName ||
                                                         personalHandle ||
-                                                        'Me').trim(), _jsxs(Box, { as: "span", sx: { color: 'fg.muted' }, children: [' ', "\u00B7 ", _jsx(DisplayHandle, { handle: personalHandle || 'me' })] })] }), isPlatformAdmin ? (_jsx(ActionList.TrailingVisual, { children: _jsx(AdminLabel, {}) })) : null] })] }), _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Organizations" }), organizations.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: "No organizations" })) : (organizations.map((organization) => {
+                                                        'Me').trim(), _jsxs(Box, { as: "span", color: "fg.muted", children: [' ', "\u00B7 ", _jsx(DisplayHandle, { handle: personalHandle || 'me' })] })] }), isPlatformAdmin ? (_jsx(ActionList.TrailingVisual, { children: _jsx(AdminLabel, {}) })) : null] })] }), _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Organizations" }), organizations.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: "No organizations" })) : (organizations.map((organization) => {
                                         const organizationUid = getOrganizationUid(organization);
                                         const isCurrentOrganizationPrincipal = selectedPrincipalKind === 'organization' &&
                                             selectedPrincipalUid === organizationUid;
@@ -298,17 +242,11 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                                 if (organizationUid && organization.handle) {
                                                     selectOrganization(organizationUid, organization.handle);
                                                 }
-                                            }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PeopleIcon, {}) }), _jsxs(Box, { as: "span", title: displayHandleText(organization.handle), sx: {
-                                                        display: 'block',
-                                                        minWidth: 0,
-                                                        overflow: 'hidden',
-                                                        textOverflow: 'ellipsis',
-                                                        whiteSpace: 'nowrap',
-                                                    }, children: [String(organization?.display_name ||
+                                            }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PeopleIcon, {}) }), _jsxs(Box, { as: "span", title: displayHandleText(organization.handle), display: "block", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: [String(organization?.display_name ||
                                                             organization?.displayName ||
                                                             organization?.name ||
                                                             organization?.handle ||
-                                                            'Organization').trim(), _jsxs(Box, { as: "span", sx: { color: 'fg.muted' }, children: [' ', "\u00B7 ", _jsx(DisplayHandle, { handle: organization.handle })] })] })] }, organizationUid));
+                                                            'Organization').trim(), _jsxs(Box, { as: "span", color: "fg.muted", children: [' ', "\u00B7 ", _jsx(DisplayHandle, { handle: organization.handle })] })] })] }, organizationUid));
                                     }))] }), _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Teams" }), teams.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: "No teams" })) : (teams.map(team => {
                                         const isCurrentTeamPrincipal = selectedPrincipalKind === 'team' &&
                                             selectedPrincipalUid === team.uid;
@@ -320,16 +258,10 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                                     return;
                                                 }
                                                 selectTeam(team, orgHandle);
-                                            }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(OrganizationIcon, {}) }), _jsxs(Box, { as: "span", title: `${displayHandleText(orgHandle)}/${displayHandleText(team.handle, { withAt: false })}`, sx: {
-                                                        display: 'block',
-                                                        minWidth: 0,
-                                                        overflow: 'hidden',
-                                                        textOverflow: 'ellipsis',
-                                                        whiteSpace: 'nowrap',
-                                                    }, children: [String(team.displayName ||
+                                            }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(OrganizationIcon, {}) }), _jsxs(Box, { as: "span", title: `${displayHandleText(orgHandle)}/${displayHandleText(team.handle, { withAt: false })}`, display: "block", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: [String(team.displayName ||
                                                             team.name ||
                                                             team.handle ||
-                                                            'Team').trim(), _jsxs(Box, { as: "span", sx: { color: 'fg.muted' }, children: [' ', "\u00B7 ", _jsx(DisplayHandle, { handle: orgHandle }), "/", _jsx(DisplayHandle, { handle: team.handle, withAt: false })] })] })] }, team.uid));
+                                                            'Team').trim(), _jsxs(Box, { as: "span", color: "fg.muted", children: [' ', "\u00B7 ", _jsx(DisplayHandle, { handle: orgHandle }), "/", _jsx(DisplayHandle, { handle: team.handle, withAt: false })] })] })] }, team.uid));
                                     }))] })] }) })] }) }));
 }
 export default PrincipalSwitcherMenu;