@datalayer/core 1.2.17 → 1.2.19

package/lib/cli-login.js

@@ -5,9 +5,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useCallback, useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import { Box, Button, Spinner, Text } from '@primer/react';
+import { Button, Spinner, Text } from '@primer/react';
 import { ShieldLockIcon } from '@primer/octicons-react';
-import { DatalayerThemeProvider, themeConfigs, createThemeStore, } from '@datalayer/primer-addons';
+import { Box, DatalayerThemeProvider, themeConfigs, createThemeStore, } from '@datalayer/primer-addons';
 import { SvgLinesLogo, SvgUsecasesHero } from '@datalayer/design';
 import { AppearanceControlsWithStore } from '@datalayer/primer-addons/lib/components/appearance';
 import { ConfettiSuccess } from './components/confetti/index.js';
@@ -90,58 +90,12 @@ function SignInCLIApp() {
             setState('signin');
         });
     }, [finalizeCliAuthentication]);
-    const renderLayout = (content) => (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: cfg.primerTheme, themeStyles: cfg.themeStyles, children: _jsxs(Box, { sx: {
-                minHeight: '100vh',
-                bg: 'canvas.default',
-                color: 'fg.default',
-                position: 'relative',
-            }, children: [_jsx(Box, { sx: {
-                        position: 'fixed',
-                        top: 0,
-                        right: 0,
-                        zIndex: 20,
-                        p: 3,
-                        display: 'flex',
-                        justifyContent: 'flex-end',
-                    }, children: _jsx(AppearanceControlsWithStore, { useStore: useCliThemeStore }) }), content] }) }));
+    const renderLayout = (content) => (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: cfg.primerTheme, themeStyles: cfg.themeStyles, children: _jsxs(Box, { minHeight: "100vh", bg: "canvas.default", color: "fg.default", position: "relative", children: [_jsx(Box, { position: "fixed", top: 0, right: 0, zIndex: 20, p: 3, display: "flex", justifyContent: "flex-end", children: _jsx(AppearanceControlsWithStore, { useStore: useCliThemeStore }) }), content] }) }));
     if (state === 'checking') {
-        return renderLayout(_jsx(Box, { sx: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                minHeight: '100vh',
-            }, children: _jsx(Spinner, {}) }));
+        return renderLayout(_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", minHeight: "100vh", children: _jsx(Spinner, {}) }));
     }
     if (state === 'success') {
-        return renderLayout(_jsxs(Box, { sx: {
-                minHeight: '100vh',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                px: 3,
-                position: 'relative',
-                overflow: 'hidden',
-            }, children: [_jsx(Box, { sx: {
-                        position: 'absolute',
-                        inset: 0,
-                        opacity: 0.45,
-                        pointerEvents: 'none',
-                    }, children: _jsx(SvgUsecasesHero, {}) }), _jsx(Box, { sx: {
-                        position: 'absolute',
-                        inset: 0,
-                        pointerEvents: 'none',
-                        zIndex: 2,
-                    }, children: _jsx(ConfettiSuccess, {}) }), _jsxs(Box, { sx: {
-                        position: 'relative',
-                        zIndex: 3,
-                        textAlign: 'center',
-                        maxWidth: 560,
-                        p: 4,
-                        borderRadius: 2,
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        bg: 'canvas.default',
-                    }, children: [_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', mb: 3 }, children: _jsx(Box, { sx: { width: 210 }, children: _jsx(SvgLinesLogo, { height: 32 }) }) }), _jsx(Text, { as: "h2", sx: { display: 'block', fontSize: 3, fontWeight: 600, mb: 2 }, children: message || 'Successfully logged in.' }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', mb: 3 }, children: "You can close this window." }), closeHelp && (_jsx(Text, { as: "p", sx: { color: 'fg.accent', mb: 3 }, children: closeHelp })), _jsx(Box, { sx: { display: 'flex', justifyContent: 'center' }, children: _jsx(Button, { onClick: handleCloseWindow, children: "Close this window" }) })] })] }));
+        return renderLayout(_jsxs(Box, { minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", px: 3, position: "relative", overflow: "hidden", children: [_jsx(Box, { position: "absolute", inset: 0, opacity: 0.45, pointerEvents: "none", children: _jsx(SvgUsecasesHero, {}) }), _jsx(Box, { position: "absolute", inset: 0, pointerEvents: "none", zIndex: 2, children: _jsx(ConfettiSuccess, {}) }), _jsxs(Box, { position: "relative", zIndex: 3, textAlign: "center", maxWidth: 560, p: 4, borderRadius: 2, border: "1px solid", borderColor: "border.default", bg: "canvas.default", children: [_jsx(Box, { display: "flex", justifyContent: "center", mb: 3, children: _jsx(Box, { width: 210, children: _jsx(SvgLinesLogo, { height: 32 }) }) }), _jsx(Text, { as: "h2", sx: { display: 'block', fontSize: 3, fontWeight: 600, mb: 2 }, children: message || 'Successfully logged in.' }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', mb: 3 }, children: "You can close this window." }), closeHelp && (_jsx(Text, { as: "p", sx: { color: 'fg.accent', mb: 3 }, children: closeHelp })), _jsx(Box, { display: "flex", justifyContent: "center", children: _jsx(Button, { onClick: handleCloseWindow, children: "Close this window" }) })] })] }));
     }
     return renderLayout(_jsx(SignInSimple, { name: "Datalayer CLI", description: "Sign in to continue in your CLI session.", icon: _jsx(ShieldLockIcon, { size: 24 }), github: true, google: true, linkedin: true, signUp: true, apiKey: false, socialSignInNavigationTarget: null, onSignIn: async (token, handle) => {
             window.localStorage.setItem(DATALAYER_IAM_TOKEN_KEY, token);

package/lib/components/anonymous/AnonymousKeyExpired.js

@@ -24,21 +24,7 @@ export function AnonymousKeyExpired({ agentName, sandboxStillRuns = false, tempo
         // the key — so clearing it is `onSignedIn`'s job, not this panel's.
         onSignedIn?.();
     }, [onSignedIn]);
-    return (_jsx(Box, { sx: {
-            height: '100%',
-            minHeight: 0,
-            overflowY: 'auto',
-            bg: 'canvas.default',
-            px: 4,
-            py: 4,
-        }, children: _jsxs(Box, { sx: { maxWidth: 440, mx: 'auto' }, children: [_jsxs(Box, { sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        gap: 2,
-                        color: 'attention.fg',
-                        mb: 2,
-                    }, children: [_jsx(KeyIcon, { size: 20 }), _jsx(Text, { sx: { fontSize: 2, fontWeight: 'semibold', color: 'fg.default' }, children: temporary
+    return (_jsx(Box, { height: "100%", minHeight: 0, overflowY: "auto", bg: "canvas.default", px: 4, py: 4, children: _jsxs(Box, { maxWidth: 440, mx: "auto", children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: 2, color: "attention.fg", mb: 2, children: [_jsx(KeyIcon, { size: 20 }), _jsx(Text, { sx: { fontSize: 2, fontWeight: 'semibold', color: 'fg.default' }, children: temporary
                                 ? 'This demo runs on a shared key'
                                 : 'Your key has expired' })] }), _jsxs(Text, { as: "p", sx: {
                         fontSize: 1,

package/lib/components/anonymous/AnonymousKeyTimer.js

@@ -81,20 +81,10 @@ export function AnonymousKeyTimer({ expiresAt, grantedMs, label = 'Trial key', w
         : fraction <= warnAt
             ? 'attention.fg'
             : 'fg.muted';
-    return (_jsxs(Box, { sx: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 1,
-            px: 2,
-            py: '2px',
-            borderRadius: '999px',
-            border: '1px solid',
-            borderColor: 'border.muted',
-            bg: 'canvas.subtle',
-            color: tone,
-            // The clock is the point; the row it sits in must not resize as the
-            // digits change width.
-            fontVariantNumeric: 'tabular-nums',
+    return (_jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, px: 2, py: "2px", borderRadius: "999px", border: "1px solid", borderColor: "border.muted", bg: "canvas.subtle", color: tone, 
+        // The clock is the point; the row it sits in must not resize as the
+        // digits change width.
+        fontVariantNumeric: "tabular-nums", sx: {
             /*
               The last few percent, breathing.
     
@@ -135,6 +125,6 @@ export function AnonymousKeyTimer({ expiresAt, grantedMs, label = 'Trial key', w
           A status readout rather than a control, so the hint rides on the native
           attribute: Primer's `Tooltip` requires an interactive child.
         */
-        title: `${label}: this workspace is talking to the agent on a temporary key issued to nobody in particular. When it runs out the chat asks you to sign in. Sign in now for an account of your own.`, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', color: tone }, children: _jsx(KeyIcon, { size: 12 }) }), _jsxs(Box, { as: "svg", "aria-hidden": "true", focusable: "false", width: RING, height: RING, viewBox: `0 0 ${RING} ${RING}`, sx: { display: 'block', flexShrink: 0 }, children: [_jsx("circle", { cx: RING / 2, cy: RING / 2, r: RADIUS, fill: "none", stroke: "currentColor", strokeWidth: STROKE, opacity: 0.2 }), _jsx("circle", { cx: RING / 2, cy: RING / 2, r: RADIUS, fill: "none", stroke: "currentColor", strokeWidth: STROKE, strokeLinecap: "round", strokeDasharray: CIRCUMFERENCE, strokeDashoffset: CIRCUMFERENCE * (1 - fraction), transform: `rotate(-90 ${RING / 2} ${RING / 2})`, style: { transition: 'stroke-dashoffset 0.5s linear' } })] }), _jsx(Text, { sx: { fontSize: 0, color: tone, fontWeight: 'semibold' }, children: format(left) })] }));
+        title: `${label}: this workspace is talking to the agent on a temporary key issued to nobody in particular. When it runs out the chat asks you to sign in. Sign in now for an account of your own.`, children: [_jsx(Box, { display: "flex", alignItems: "center", color: tone, children: _jsx(KeyIcon, { size: 12 }) }), _jsxs(Box, { as: "svg", "aria-hidden": "true", focusable: "false", width: RING, height: RING, viewBox: `0 0 ${RING} ${RING}`, display: "block", flexShrink: 0, children: [_jsx("circle", { cx: RING / 2, cy: RING / 2, r: RADIUS, fill: "none", stroke: "currentColor", strokeWidth: STROKE, opacity: 0.2 }), _jsx("circle", { cx: RING / 2, cy: RING / 2, r: RADIUS, fill: "none", stroke: "currentColor", strokeWidth: STROKE, strokeLinecap: "round", strokeDasharray: CIRCUMFERENCE, strokeDashoffset: CIRCUMFERENCE * (1 - fraction), transform: `rotate(-90 ${RING / 2} ${RING / 2})`, style: { transition: 'stroke-dashoffset 0.5s linear' } })] }), _jsx(Text, { sx: { fontSize: 0, color: tone, fontWeight: 'semibold' }, children: format(left) })] }));
 }
 export default AnonymousKeyTimer;

package/lib/components/auth/SignIn.js

@@ -179,7 +179,7 @@ export const SignIn = (props) => {
                     : 'Your password may not be empty.',
         });
     }, [formValues]);
-    return (_jsxs(PageLayout, { containerWidth: "medium", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: [_jsx(PageLayout.Header, { children: _jsx(Heading, { children: heading || 'Sign in to Datalayer' }) }), _jsx(PageLayout.Content, { children: loadingWithToken < 0 ? (_jsx(_Fragment, { children: _jsxs(Box, { display: "flex", children: [showEmailLogin && (_jsxs(Box, { sx: { label: { marginTop: 2 }, paddingRight: '10%' }, children: [_jsx(Box, { mt: 5, children: _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Your username" }), _jsx(TextInput, { autoFocus: true, placeholder: "Your username", value: formValues.handle, disabled: loading, onChange: handleHandleChange, onKeyDown: handleKeyDown }), validationResult.handle && (_jsx(FormControl.Validation, { variant: validationResult.handle ? 'error' : 'success', children: validationResult.handle }))] }) }), _jsx(Box, { children: _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Your password" }), _jsx(TextInput, { placeholder: "Your password", type: passwordVisibility ? 'text' : 'password', value: formValues.password, disabled: loading, onChange: handlePasswordChange, onKeyDown: handleKeyDown, trailingAction: _jsx(TextInput.Action, { onClick: () => {
+    return (_jsxs(PageLayout, { containerWidth: "medium", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: [_jsx(PageLayout.Header, { children: _jsx(Heading, { children: heading || 'Sign in to Datalayer' }) }), _jsx(PageLayout.Content, { children: loadingWithToken < 0 ? (_jsx(_Fragment, { children: _jsxs(Box, { display: "flex", children: [showEmailLogin && (_jsxs(Box, { paddingRight: "10%", sx: { label: { marginTop: 2 } }, children: [_jsx(Box, { mt: 5, children: _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Your username" }), _jsx(TextInput, { autoFocus: true, placeholder: "Your username", value: formValues.handle, disabled: loading, onChange: handleHandleChange, onKeyDown: handleKeyDown }), validationResult.handle && (_jsx(FormControl.Validation, { variant: validationResult.handle ? 'error' : 'success', children: validationResult.handle }))] }) }), _jsx(Box, { children: _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Your password" }), _jsx(TextInput, { placeholder: "Your password", type: passwordVisibility ? 'text' : 'password', value: formValues.password, disabled: loading, onChange: handlePasswordChange, onKeyDown: handleKeyDown, trailingAction: _jsx(TextInput.Action, { onClick: () => {
                                                             setPasswordVisibility(!passwordVisibility);
                                                         }, disabled: loading, icon: passwordVisibility ? EyeClosedIcon : EyeIcon, "aria-label": passwordVisibility
                                                             ? 'Hide password'
@@ -189,7 +189,7 @@ export const SignIn = (props) => {
                                                     ? 'Sign In…'
                                                     : heading
                                                         ? 'Sign in with Datalayer'
-                                                        : 'Sign In' }), _jsx(Box, { pt: 6 }), _jsx(Link, { href: "https://datalayer.ai/password", target: "_blank", children: "Forgot password?" })] })] })), _jsx(Box, { children: _jsxs(Box, { display: "flex", flexDirection: "column", sx: { margin: 'auto' }, children: [showGitHubLogin &&
+                                                        : 'Sign In' }), _jsx(Box, { pt: 6 }), _jsx(Link, { href: "https://datalayer.ai/password", target: "_blank", children: "Forgot password?" })] })] })), _jsx(Box, { children: _jsxs(Box, { display: "flex", flexDirection: "column", margin: "auto", children: [showGitHubLogin &&
                                             iamProvidersAuthorizationURL[IAMProvidersSpecs.GitHub.name] && (_jsx(Button, { leadingVisual: pendingOAuthProvider === IAMProvidersSpecs.GitHub.name
                                                 ? () => _jsx(Spinner, { size: "small" })
                                                 : MarkGithubIcon, onClick: () => startOAuthSignIn(IAMProvidersSpecs.GitHub), disabled: socialButtonsDisabled, style: { margin: '10px 0' }, children: "Sign in with GitHub" })), showGoogleLogin &&

package/lib/components/avatars/UserAvatar.js

@@ -30,28 +30,11 @@ export const UserAvatar = ({ avatarUrl, avatarIcon, avatarEmoji, size = 100, squ
         ? { boxShadow: '0 0 0 1px var(--borderColor-default, currentColor)' }
         : undefined;
     if (avatarEmoji) {
-        return (_jsx(Box, { role: "img", "aria-label": avatarEmoji, className: className, sx: {
-                width: size,
-                height: size,
-                borderRadius: square ? 2 : '50%',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                bg: fallbackBackground || 'canvas.default',
-                ...ringSx,
-            }, children: _jsx(FluentEmoji, { emoji: avatarEmoji, size: iconSize ?? Math.round(size * 0.6), label: "" }) }));
+        return (_jsx(Box, { role: "img", "aria-label": avatarEmoji, className: className, width: size, height: size, borderRadius: square ? 2 : '50%', display: "flex", alignItems: "center", justifyContent: "center", bg: fallbackBackground || 'canvas.default', sx: ringSx, children: _jsx(FluentEmoji, { emoji: avatarEmoji, size: iconSize ?? Math.round(size * 0.6), label: "" }) }));
     }
     const SelectedIcon = getPrincipalAvatarIcon(avatarIcon);
     if (SelectedIcon) {
-        return (_jsx(Box, { className: className, sx: {
-                width: size,
-                height: size,
-                borderRadius: square ? 2 : '50%',
-                overflow: 'hidden',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                bg: fallbackBackground || 'accent.subtle',
+        return (_jsx(Box, { className: className, width: size, height: size, borderRadius: square ? 2 : '50%', overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center", bg: fallbackBackground || 'accent.subtle', sx: {
                 '--datalayer-icon-fg': fallbackForeground || palette.primary,
                 ...ringSx,
             }, children: _jsx(SelectedIcon, { size: iconSize ?? Math.round(size * 0.62), themed: true, colormode: true }) }));
@@ -60,14 +43,7 @@ export const UserAvatar = ({ avatarUrl, avatarIcon, avatarEmoji, size = 100, squ
         return (_jsx(DLAvatar, { className: className, square: square, src: avatarUrl, size: size, sx: ringSx }));
     }
     const resolvedIconSize = iconSize ?? Math.round(size * 0.48);
-    return (_jsx(Box, { className: className, sx: {
-            width: size,
-            height: size,
-            borderRadius: square ? 2 : '50%',
-            bg: fallbackBackground || 'accent.subtle',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
+    return (_jsx(Box, { className: className, width: size, height: size, borderRadius: square ? 2 : '50%', bg: fallbackBackground || 'accent.subtle', display: "flex", alignItems: "center", justifyContent: "center", sx: {
             '--datalayer-icon-fg': fallbackForeground || palette.primary,
             ...ringSx,
         }, children: _jsx(AlienIcon, { size: resolvedIconSize, themed: true, colormode: true }) }));

package/lib/components/billing/BillingEntitySelect.js

@@ -313,50 +313,21 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
         hasEligibleAccount,
         onAccountsResolved,
     ]);
-    return (_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: label }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'center' }, children: _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Button, { variant: "default", disabled: disabled || !hasEligibleAccount, sx: { width, justifyContent: 'space-between' }, children: isLoading ? (_jsxs(Box, { sx: {
-                                        display: 'inline-flex',
-                                        alignItems: 'center',
-                                        gap: 2,
-                                    }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1 }, children: "Loading plan status..." })] })) : selectedAccount ? (_jsxs(Box, { sx: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'space-between',
-                                        width: '100%',
-                                        minWidth: 0,
-                                        gap: 2,
-                                    }, children: [_jsxs(Text, { sx: {
+    return (_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: label }), _jsx(Box, { display: "flex", justifyContent: "center", children: _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Button, { variant: "default", disabled: disabled || !hasEligibleAccount, sx: { width, justifyContent: 'space-between' }, children: isLoading ? (_jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 2, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1 }, children: "Loading plan status..." })] })) : selectedAccount ? (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", minWidth: 0, gap: 2, children: [_jsxs(Text, { sx: {
                                                 minWidth: 0,
                                                 overflow: 'hidden',
                                                 textOverflow: 'ellipsis',
                                                 whiteSpace: 'nowrap',
-                                            }, children: ["@", selectedAccount.accountName] }), _jsxs(Box, { sx: {
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                justifyContent: 'flex-end',
-                                                gap: 1,
-                                                flexShrink: 0,
-                                            }, children: [_jsx(Label, { size: "small", variant: "secondary", title: selectedAccount.accountType === 'organization'
+                                            }, children: ["@", selectedAccount.accountName] }), _jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 1, flexShrink: 0, children: [_jsx(Label, { size: "small", variant: "secondary", title: selectedAccount.accountType === 'organization'
                                                         ? 'Organization'
                                                         : selectedAccount.accountType === 'team'
                                                             ? 'Team'
-                                                            : 'User', children: selectedAccount.accountType === 'organization' ? (_jsx(OrganizationIcon, { size: 12 })) : selectedAccount.accountType === 'team' ? (_jsx(PeopleIcon, { size: 12 })) : (_jsx(PersonIcon, { size: 12 })) }), selectedAccount.isAwsBilled ? _jsx(AwsBilledLabel, {}) : null, _jsx(Label, { size: "small", variant: selectedAccount.isPaidPlan ? 'success' : 'attention', children: formatBillingEntityPlanLabel(selectedAccount.planName) })] })] })) : !hasEligibleAccount ? (emptyMessage) : ('Select a billing entity') }) }), _jsxs(ActionMenu.Overlay, { width: "large", children: [_jsx(Box, { sx: { p: 2 }, children: _jsxs(Box, { sx: {
-                                            borderRadius: 2,
-                                            border: '1px solid',
-                                            borderColor: 'border.default',
-                                            bg: 'canvas.subtle',
-                                            color: 'fg.muted',
-                                            px: 3,
-                                            py: 2,
-                                        }, children: [_jsx(Text, { sx: { fontSize: 1, lineHeight: 1.5 }, children: flashMessage }), accounts.some(account => account.isAwsBilled) ? (_jsx(Text, { sx: {
+                                                            : 'User', children: selectedAccount.accountType === 'organization' ? (_jsx(OrganizationIcon, { size: 12 })) : selectedAccount.accountType === 'team' ? (_jsx(PeopleIcon, { size: 12 })) : (_jsx(PersonIcon, { size: 12 })) }), selectedAccount.isAwsBilled ? _jsx(AwsBilledLabel, {}) : null, _jsx(Label, { size: "small", variant: selectedAccount.isPaidPlan ? 'success' : 'attention', children: formatBillingEntityPlanLabel(selectedAccount.planName) })] })] })) : !hasEligibleAccount ? (emptyMessage) : ('Select a billing entity') }) }), _jsxs(ActionMenu.Overlay, { width: "large", children: [_jsx(Box, { p: 2, children: _jsxs(Box, { borderRadius: 2, border: "1px solid", borderColor: "border.default", bg: "canvas.subtle", color: "fg.muted", px: 3, py: 2, children: [_jsx(Text, { sx: { fontSize: 1, lineHeight: 1.5 }, children: flashMessage }), accounts.some(account => account.isAwsBilled) ? (_jsx(Text, { sx: {
                                                     display: 'block',
                                                     fontSize: 1,
                                                     lineHeight: 1.5,
                                                     mt: 2,
-                                                }, children: "Entries marked AWS are billed through AWS Marketplace: only work started under them is reported to AWS. Work started under any other entry is charged to the credits of that account and never reaches the AWS bill." })) : null] }) }), _jsx(ActionList, { selectionVariant: "single", children: isLoading ? (_jsx(ActionList.Item, { disabled: true, children: _jsxs(Box, { sx: {
-                                                display: 'inline-flex',
-                                                alignItems: 'center',
-                                                gap: 2,
-                                            }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1 }, children: "Loading plan status..." })] }) })) : !hasEligibleAccount ? (_jsx(ActionList.Item, { disabled: true, children: emptyMessage })) : ((() => {
+                                                }, children: "Entries marked AWS are billed through AWS Marketplace: only work started under them is reported to AWS. Work started under any other entry is charged to the credits of that account and never reaches the AWS bill." })) : null] }) }), _jsx(ActionList, { selectionVariant: "single", children: isLoading ? (_jsx(ActionList.Item, { disabled: true, children: _jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 2, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1 }, children: "Loading plan status..." })] }) })) : !hasEligibleAccount ? (_jsx(ActionList.Item, { disabled: true, children: emptyMessage })) : ((() => {
                                         const typeOrder = {
                                             user: 0,
                                             organization: 1,
@@ -372,25 +343,12 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
                                                             if (account.isEligible) {
                                                                 handleAccountSelect(account.accountUid);
                                                             }
-                                                        }, children: [_jsxs(Box, { sx: {
-                                                                    display: 'flex',
-                                                                    alignItems: 'center',
-                                                                    justifyContent: 'space-between',
-                                                                    width: '100%',
-                                                                    minWidth: 0,
-                                                                    gap: 2,
-                                                                }, children: [_jsxs(Text, { sx: {
+                                                        }, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", minWidth: 0, gap: 2, children: [_jsxs(Text, { sx: {
                                                                             minWidth: 0,
                                                                             overflow: 'hidden',
                                                                             textOverflow: 'ellipsis',
                                                                             whiteSpace: 'nowrap',
-                                                                        }, children: ["@", account.accountName] }), _jsxs(Box, { sx: {
-                                                                            display: 'flex',
-                                                                            alignItems: 'center',
-                                                                            justifyContent: 'flex-end',
-                                                                            gap: 1,
-                                                                            flexShrink: 0,
-                                                                        }, children: [_jsx(Label, { size: "small", variant: "secondary", title: account.accountType === 'organization'
+                                                                        }, children: ["@", account.accountName] }), _jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 1, flexShrink: 0, children: [_jsx(Label, { size: "small", variant: "secondary", title: account.accountType === 'organization'
                                                                                     ? 'Organization'
                                                                                     : account.accountType === 'team'
                                                                                         ? 'Team'