@datalayer/core 1.1.66 → 1.2.10

package/lib/components/billing/BillingEntitySelect.d.ts

@@ -17,6 +17,12 @@ export type BillingEntity = {
     planName: string;
     isEligible: boolean;
     isPaidPlan: boolean;
+    /**
+     * Billed through the AWS Marketplace: an organization created from an AWS
+     * subscription, or one of its teams. Work started under it is metered and
+     * reaches the AWS bill; work started under any other entry never does.
+     */
+    isAwsBilled: boolean;
     sourceOrganizationUid?: string;
     sourceOrganizationHandle?: string;
     teamHandle?: string;

package/lib/components/billing/BillingEntitySelect.js

@@ -6,6 +6,7 @@ import { Box } from '@datalayer/primer-addons';
 import { useCache } from '../../hooks/useCache.js';
 import { useSelectedPrincipal } from '../../hooks/useSelectedPrincipal.js';
 import { useIAMStore } from '../../state/index.js';
+import { isBillingEntityEligible } from './eligibility.js';
 const PLAN_FREE_TERMS = ['free', 'starter'];
 const PLAN_PRO_TERMS = ['pro', 'paid', 'team', 'enterprise', 'business'];
 const BILLING_ENTITY_COOKIE = 'datalayer-billing-entity-uid';
@@ -24,6 +25,19 @@ function writeBillingEntityCookie(value) {
         `${BILLING_ENTITY_COOKIE}=${encodeURIComponent(value)};` +
             ` path=/; max-age=${BILLING_ENTITY_COOKIE_MAX_AGE}; SameSite=Lax`;
 }
+const AWS_ORIGIN_PREFIX = 'urn:dla:iam:ext::aws:';
+const AWS_BILLING_PROVIDER = 'aws-marketplace';
+/** Whether an origin URN names an AWS Marketplace subscription. */
+const isAwsOriginUrn = (origin) => String(origin ?? '')
+    .trim()
+    .toLowerCase()
+    .startsWith(AWS_ORIGIN_PREFIX);
+/** Whether IAM names the AWS Marketplace as who bills an account. */
+const isAwsBillingProvider = (provider) => String(provider ?? '')
+    .trim()
+    .toLowerCase() === AWS_BILLING_PROVIDER;
+/** The label beside an entry billed through the AWS Marketplace. */
+const AwsBilledLabel = () => (_jsx(Label, { size: "small", variant: "accent", title: "Billed through AWS Marketplace: work started here is reported to AWS", children: "AWS" }));
 const planContains = (value, terms) => terms.some(term => value.includes(term));
 export function resolveBillingPlanTier(value) {
     const normalized = String(value ?? '').toLowerCase();
@@ -57,6 +71,8 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
             String(entry.account_handle || '').trim() ||
             String(entry.account_uid || '').trim(),
         planName: String(entry?.subscription?.plan_name || entry?.plan?.plan_name || '').trim(),
+        isAwsBilled: isAwsBillingProvider(entry?.billing_provider) ||
+            isAwsBillingProvider(entry?.plan?.billing_provider),
     })), [eligibleAccountsRaw]);
     const personalAccountUid = String(user?.id || '');
     const allContextAccounts = useMemo(() => {
@@ -68,6 +84,7 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
                 accountHandle: String(user?.handle || '').trim(),
                 accountName: String(user?.handle || '').trim() || personalAccountUid,
                 planName: '',
+                isAwsBilled: false,
             });
         }
         for (const organization of (userOrganizationsQuery.data || [])) {
@@ -84,6 +101,8 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
                 planName: String(organization?.subscription?.plan_name ||
                     organization?.plan_name ||
                     '').trim(),
+                isAwsBilled: Boolean(organization?.awsMarketplace) ||
+                    isAwsOriginUrn(organization?.origin ?? organization?.origin_s),
             });
         }
         return Array.from(accountMap.values());
@@ -117,6 +136,11 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
             accountMap.set(a.accountUid, a);
         const merged = Array.from(accountMap.values());
         const mergedByUid = new Map(merged.map(a => [a.accountUid, a]));
+        // Either list may say it: the organizations carry their origin, and IAM
+        // names the billing provider on each eligible entry.
+        const awsBilledUids = new Set([...allContextAccounts, ...eligibleAccounts]
+            .filter(a => a.isAwsBilled)
+            .map(a => a.accountUid));
         return merged.map(account => {
             const eligible = eligibleAccountByUid.get(account.accountUid);
             const details = detailsByUid.get(account.accountUid);
@@ -132,15 +156,22 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
                     details?.wallet_balance ??
                     0));
             const hasPositiveWallet = Number.isFinite(walletBalance) && walletBalance > 0;
-            const isEligible = accountType === 'team'
-                ? hasPositiveWallet
-                : typeof details?.is_eligible === 'boolean'
-                    ? details.is_eligible ||
-                        (accountType === 'user' && hasPositiveWallet)
-                    : Boolean(eligible);
             const sourceOrganizationUid = accountType === 'team'
                 ? String(details?.plan_source_account_uid || '').trim() || undefined
                 : undefined;
+            // A team inherits it from the organization that pays for it.
+            const isAwsBilled = awsBilledUids.has(account.accountUid) ||
+                Boolean(sourceOrganizationUid && awsBilledUids.has(sourceOrganizationUid)) ||
+                isAwsBillingProvider(details?.subscription?.billing_provider);
+            const isEligible = isBillingEntityEligible({
+                accountType,
+                iamEligible: typeof details?.is_eligible === 'boolean'
+                    ? details.is_eligible
+                    : undefined,
+                isAwsBilled,
+                hasPositiveWallet,
+                listedEligible: Boolean(eligible),
+            });
             const sourceOrgDetails = sourceOrganizationUid
                 ? detailsByUid.get(sourceOrganizationUid)
                 : undefined;
@@ -160,6 +191,7 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
                 planName,
                 isEligible,
                 isPaidPlan: resolveBillingPlanTier(planName || 'free') === 'pro',
+                isAwsBilled,
                 sourceOrganizationUid,
                 sourceOrganizationHandle,
                 teamHandle: accountType === 'team' ? accountHandle : undefined,
@@ -307,7 +339,7 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
                                                         ? '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 })) }), _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: _jsx(Box, { 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, { sx: { p: 2 }, children: _jsxs(Box, { sx: {
                                             borderRadius: 2,
                                             border: '1px solid',
                                             borderColor: 'border.default',
@@ -315,7 +347,12 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
                                             color: 'fg.muted',
                                             px: 3,
                                             py: 2,
-                                        }, children: _jsx(Text, { sx: { fontSize: 1, lineHeight: 1.5 }, children: flashMessage }) }) }), _jsx(ActionList, { selectionVariant: "single", children: isLoading ? (_jsx(ActionList.Item, { disabled: true, children: _jsxs(Box, { sx: {
+                                        }, 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,
@@ -357,9 +394,11 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
                                                                                     ? 'Organization'
                                                                                     : account.accountType === 'team'
                                                                                         ? 'Team'
-                                                                                        : 'User', children: account.accountType === 'organization' ? (_jsx(OrganizationIcon, { size: 12 })) : account.accountType === 'team' ? (_jsx(PeopleIcon, { size: 12 })) : (_jsx(PersonIcon, { size: 12 })) }), !account.isEligible &&
+                                                                                        : 'User', children: account.accountType === 'organization' ? (_jsx(OrganizationIcon, { size: 12 })) : account.accountType === 'team' ? (_jsx(PeopleIcon, { size: 12 })) : (_jsx(PersonIcon, { size: 12 })) }), account.isAwsBilled ? _jsx(AwsBilledLabel, {}) : null, !account.isEligible &&
                                                                                 account.accountType === 'team' && (_jsx(Label, { size: "small", variant: "attention", children: "No credits" })), _jsx(Label, { size: "small", variant: account.isPaidPlan ? 'success' : 'attention', children: formatBillingEntityPlanLabel(account.planName) })] })] }), _jsx(ActionList.Description, { variant: "block", children: account.isEligible
-                                                                    ? 'Eligible'
+                                                                    ? account.isAwsBilled
+                                                                        ? 'Eligible — billed through AWS Marketplace'
+                                                                        : 'Eligible'
                                                                     : account.accountType === 'team'
                                                                         ? 'Not eligible — no team credits allocated'
                                                                         : 'Not eligible — activate a plan or add credits to use this account' })] })] }, account.accountUid));

package/lib/components/billing/eligibility.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Whether work may be started under a billing entity: the rule the launch
+ * picker enables an entry by.
+ *
+ * IAM answers `is_eligible` from what its reservation door would accept, for
+ * every kind of account. For an entity AWS does not pay for, that door reads
+ * the entity's own wallet and asks no plan — so credits in the wallet make it
+ * eligible, personal, organization or team, on a paid plan or none. That is
+ * said here as well as in IAM, so an IAM that still asked organizations for a
+ * paid plan does not grey out an organization with credits to spend. An
+ * entity AWS pays for has no wallet: IAM alone decides it, from the
+ * subscription.
+ */
+export declare function isBillingEntityEligible({ accountType, iamEligible, isAwsBilled, hasPositiveWallet, listedEligible, }: {
+    accountType: string;
+    /** `is_eligible` from IAM's account details, when it answered one. */
+    iamEligible?: boolean;
+    isAwsBilled: boolean;
+    hasPositiveWallet: boolean;
+    /** Whether IAM's eligible-accounts listing named the entity. */
+    listedEligible: boolean;
+}): boolean;

package/lib/components/billing/eligibility.js

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Whether work may be started under a billing entity: the rule the launch
+ * picker enables an entry by.
+ *
+ * IAM answers `is_eligible` from what its reservation door would accept, for
+ * every kind of account. For an entity AWS does not pay for, that door reads
+ * the entity's own wallet and asks no plan — so credits in the wallet make it
+ * eligible, personal, organization or team, on a paid plan or none. That is
+ * said here as well as in IAM, so an IAM that still asked organizations for a
+ * paid plan does not grey out an organization with credits to spend. An
+ * entity AWS pays for has no wallet: IAM alone decides it, from the
+ * subscription.
+ */
+export function isBillingEntityEligible({ accountType, iamEligible, isAwsBilled, hasPositiveWallet, listedEligible, }) {
+    if (typeof iamEligible === 'boolean') {
+        return iamEligible || (!isAwsBilled && hasPositiveWallet);
+    }
+    return accountType === 'team' ? hasPositiveWallet : listedEligible;
+}

package/lib/components/billing/index.d.ts

@@ -1 +1,2 @@
 export * from './BillingEntitySelect';
+export * from './eligibility';

package/lib/components/billing/index.js

@@ -3,3 +3,4 @@
  * Distributed under the terms of the Modified BSD License.
  */
 export * from './BillingEntitySelect.js';
+export * from './eligibility.js';

package/lib/components/collaboration/LiveEditorCollaborators.d.ts

@@ -24,6 +24,11 @@ export type LiveCollaborator = {
     name: string;
     avatarUrl?: string;
     avatarIcon?: string;
+    /**
+     * A literal emoji, for a face this platform draws rather than a person's
+     * own — an agent's — checked before `avatarUrl`/`avatarIcon`.
+     */
+    avatarEmoji?: string;
     /** Cursor color of the presence, worn by the initials disc. */
     color?: string;
     /** The platform uid, when the face is a real account — for its profile. */

package/lib/components/collaboration/LiveEditorCollaborators.js

@@ -37,6 +37,7 @@ function collaboratorOfState(clientId, state) {
         name,
         avatarUrl: user.avatar_url || user.avatarUrl || undefined,
         avatarIcon: user.avatar_icon_s || user.avatarIcon || undefined,
+        avatarEmoji: user.avatar_emoji_s || user.avatarEmoji || undefined,
         color: user.color || undefined,
         uid: uid ? String(uid) : undefined,
         handle: user.handle || username || undefined,
@@ -58,6 +59,7 @@ function mergeCollaborators(known, incoming) {
         handle: known.handle || incoming.handle,
         avatarUrl: known.avatarUrl || incoming.avatarUrl,
         avatarIcon: known.avatarIcon || incoming.avatarIcon,
+        avatarEmoji: known.avatarEmoji || incoming.avatarEmoji,
         color: known.color || incoming.color,
     };
 }
@@ -157,6 +159,6 @@ export function LiveEditorCollaborators(props) {
         // person arrives now under their uid, now under a client id, and a
         // key that followed that would unmount the hover card mid-open and
         // leak its overlay. Their identity, not their arrival, names them.
-        , { kind: "personal", uid: face.uid, handle: face.handle, displayName: face.name, name: face.name, avatarUrl: face.avatarUrl, avatarIcon: face.avatarIcon, onNavigate: onNavigate, children: _jsx(PrincipalAvatar, { kind: "personal", size: size, alt: face.name, avatarUrl: face.avatarUrl, avatarIcon: face.avatarIcon, square: false }) }, face.uid || face.handle || face.name.trim().toLowerCase()))) }));
+        , { kind: "personal", uid: face.uid, handle: face.handle, displayName: face.name, name: face.name, avatarUrl: face.avatarUrl, avatarIcon: face.avatarIcon, avatarEmoji: face.avatarEmoji, onNavigate: onNavigate, children: _jsx(PrincipalAvatar, { kind: "personal", size: size, alt: face.name, avatarUrl: face.avatarUrl, avatarIcon: face.avatarIcon, avatarEmoji: face.avatarEmoji, square: false }) }, face.uid || face.handle || face.name.trim().toLowerCase()))) }));
 }
 export default LiveEditorCollaborators;

package/lib/components/display/DatalayerBox.d.ts

@@ -1,4 +1,3 @@
-import type { PropsWithChildren, ReactNode } from 'react';
 type DatalayerBoxProps = {
     id?: string;
     title: string;
@@ -9,7 +8,7 @@ type DatalayerBoxProps = {
      *
      * The link on the trailing edge leads somewhere; this stays here.
      */
-    titleAction?: ReactNode;
+    titleAction?: React.ReactNode;
 };
-export declare const DatalayerBox: (props: PropsWithChildren<DatalayerBoxProps>) => import("react").JSX.Element;
+export declare const DatalayerBox: (props: React.PropsWithChildren<DatalayerBoxProps>) => import("react").JSX.Element;
 export default DatalayerBox;

package/lib/components/display/DatalayerBox.js

@@ -8,7 +8,7 @@ import { Box } from '@datalayer/primer-addons';
 import { ArrowRightIcon } from '@primer/octicons-react';
 import { useNavigate } from '../../hooks/index.js';
 export const DatalayerBox = (props) => {
-    const { title, titleAction, linkLabel, linkRoute, children } = props;
+    const { title, linkLabel, linkRoute, titleAction, children } = props;
     const navigate = useNavigate();
     return (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
                     display: 'flex',

package/lib/components/display/NavLink.js

@@ -11,9 +11,10 @@ import { useNavigate } from '../../hooks/index.js';
  */
 export const NavLink = forwardRef(({ to, children, ...props }, ref) => {
     const navigate = useNavigate();
+    // The hook decides: a plain click navigates here, a modifier click lets
+    // the browser open the link in a new tab.
     const onClick = useCallback((e) => {
-        e.preventDefault();
-        navigate(to);
+        navigate(to, e);
     }, [to, navigate]);
     return (_jsx("a", { ref: ref, href: to, ...props, onClick: onClick, children: children }));
 });

package/lib/components/labels/StatusLabels.d.ts

@@ -9,8 +9,7 @@
  *
  * @module components/labels/StatusLabels
  */
-import type { JSX } from 'react';
-import type { ReactNode } from 'react';
+import type { JSX, ReactNode } from 'react';
 /** The tones a status pill is read in. */
 export type StatusLabelTone = 'accent' | 'attention' | 'success' | 'neutral';
 export type StatusLabelProps = {
@@ -40,13 +39,6 @@ export declare function AdminLabel(props?: StatusLabelProps): JSX.Element;
  * The one that is taken when none is chosen — the default space of an account.
  */
 export declare function DefaultLabel(props?: StatusLabelProps): JSX.Element;
-/**
- * Something announced and not there yet.
- *
- * A tone of its own, and deliberately not the accent an alpha wears: one says
- * "you may try this, it may bite", the other "there is nothing to try". Read
- * side by side in a navigation, two labels of one colour say the same thing
- * about two entries that mean different things.
- */
+/** "soon": what is announced but not yet there. */
 export declare function SoonLabel(props?: StatusLabelProps): JSX.Element;
 export default StatusLabel;

package/lib/components/labels/StatusLabels.js

@@ -33,24 +33,7 @@ export function StatusLabel(props) {
     return (_jsx(Label, { variant: "secondary", size: size, sx: {
             textTransform: 'lowercase',
             lineHeight: 1.2,
-            /*
-             * The tone, under a doubled selector.
-             *
-             * Primer ships `NavList` and `ActionList` as CSS modules, and the
-             * colour they set on the contents of an item ties with the one Emotion
-             * generates for `sx` — so the same label came out in the colour of the
-             * navigation in one place and in its own colour in another, depending
-             * on which stylesheet happened to come last. `&&` raises the
-             * specificity enough that the tone always lands, wherever the label is
-             * put.
-             */
-            '&&': {
-                ...TONES[tone],
-                // The navigation of Primer colours the contents of its items, and
-                // its stylesheet is loaded after ours: a doubled selector was not
-                // enough on its own, so the colour of the tone is stated as final.
-                color: `${TONES[tone].color} !important`,
-            },
+            ...TONES[tone],
             ...sx,
         }, children: children }));
 }
@@ -75,14 +58,7 @@ export function DefaultLabel(props = {}) {
     const { children = 'default', ...rest } = props;
     return (_jsx(StatusLabel, { tone: "accent", ...rest, children: children }));
 }
-/**
- * Something announced and not there yet.
- *
- * A tone of its own, and deliberately not the accent an alpha wears: one says
- * "you may try this, it may bite", the other "there is nothing to try". Read
- * side by side in a navigation, two labels of one colour say the same thing
- * about two entries that mean different things.
- */
+/** "soon": what is announced but not yet there. */
 export function SoonLabel(props = {}) {
     const { children = 'soon', ...rest } = props;
     return (_jsx(StatusLabel, { tone: "neutral", ...rest, children: children }));

package/lib/components/principal/PrincipalAppearance.d.ts

@@ -1,26 +1,5 @@
 import type { JSX } from 'react';
 import { type ComponentType, type SVGProps } from 'react';
-import { SvgAboutHero } from '@datalayer/design/lib/svg/SvgAboutHero';
-import { SvgAgentsHero } from '@datalayer/design/lib/svg/SvgAgentsHero';
-import { SvgAgentsHomeHero } from '@datalayer/design/lib/svg/SvgAgentsHomeHero';
-import { SvgBlogHero } from '@datalayer/design/lib/svg/SvgBlogHero';
-import { SvgCareersHero } from '@datalayer/design/lib/svg/SvgCareersHero';
-import { SvgChangelogHero } from '@datalayer/design/lib/svg/SvgChangelogHero';
-import { SvgCommunityHero } from '@datalayer/design/lib/svg/SvgCommunityHero';
-import { SvgContactHero } from '@datalayer/design/lib/svg/SvgContactHero';
-import { SvgEarthHero } from '@datalayer/design/lib/svg/SvgEarthHero';
-import { SvgEvalsHero } from '@datalayer/design/lib/svg/SvgEvalsHero';
-import { SvgEventsHero } from '@datalayer/design/lib/svg/SvgEventsHero';
-import { SvgIntegrationsHero } from '@datalayer/design/lib/svg/SvgIntegrationsHero';
-import { SvgLoginHero } from '@datalayer/design/lib/svg/SvgLoginHero';
-import { SvgPartnersHero } from '@datalayer/design/lib/svg/SvgPartnersHero';
-import { SvgPricingHero } from '@datalayer/design/lib/svg/SvgPricingHero';
-import { SvgPrivacyHero } from '@datalayer/design/lib/svg/SvgPrivacyHero';
-import { SvgResearchHero } from '@datalayer/design/lib/svg/SvgResearchHero';
-import { SvgStarsHero } from '@datalayer/design/lib/svg/SvgStarsHero';
-import { SvgTermsHero } from '@datalayer/design/lib/svg/SvgTermsHero';
-import { SvgTutorialsHero } from '@datalayer/design/lib/svg/SvgTutorialsHero';
-import { SvgUsecasesHero } from '@datalayer/design/lib/svg/SvgUsecasesHero';
 export type PrincipalType = 'personal' | 'organization' | 'team';
 type AvatarComponent = ComponentType<SVGProps<SVGSVGElement> & {
     size?: number | 'small' | 'medium' | 'large';
@@ -46,87 +25,87 @@ export declare const PRINCIPAL_AVATAR_ICONS: ReadonlyArray<{
 export declare const PRINCIPAL_BANNERS: readonly [{
     readonly name: "SvgAboutHero";
     readonly label: "About";
-    readonly Component: typeof SvgAboutHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgAgentsHero";
     readonly label: "Agents";
-    readonly Component: typeof SvgAgentsHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgAgentsHomeHero";
     readonly label: "Agents home";
-    readonly Component: typeof SvgAgentsHomeHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgBlogHero";
     readonly label: "Blog";
-    readonly Component: typeof SvgBlogHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgCareersHero";
     readonly label: "Careers";
-    readonly Component: typeof SvgCareersHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgChangelogHero";
     readonly label: "Changelog";
-    readonly Component: typeof SvgChangelogHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgCommunityHero";
     readonly label: "Community";
-    readonly Component: typeof SvgCommunityHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgContactHero";
     readonly label: "Contact";
-    readonly Component: typeof SvgContactHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgEarthHero";
     readonly label: "Earth";
-    readonly Component: typeof SvgEarthHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgEvalsHero";
     readonly label: "Evaluations";
-    readonly Component: typeof SvgEvalsHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgEventsHero";
     readonly label: "Events";
-    readonly Component: typeof SvgEventsHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgIntegrationsHero";
     readonly label: "Integrations";
-    readonly Component: typeof SvgIntegrationsHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgLoginHero";
     readonly label: "Login";
-    readonly Component: typeof SvgLoginHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgPartnersHero";
     readonly label: "Partners";
-    readonly Component: typeof SvgPartnersHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgPricingHero";
     readonly label: "Pricing";
-    readonly Component: typeof SvgPricingHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgPrivacyHero";
     readonly label: "Privacy";
-    readonly Component: typeof SvgPrivacyHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgResearchHero";
     readonly label: "Research";
-    readonly Component: typeof SvgResearchHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgStarsHero";
     readonly label: "Stars";
-    readonly Component: typeof SvgStarsHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgTermsHero";
     readonly label: "Terms";
-    readonly Component: typeof SvgTermsHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgTutorialsHero";
     readonly label: "Tutorials";
-    readonly Component: typeof SvgTutorialsHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgUsecasesHero";
     readonly label: "Use cases";
-    readonly Component: typeof SvgUsecasesHero;
+    readonly Component: ComponentType<any>;
 }];
 export declare function getPrincipalBannerForSeed(seed: string): string;
 export declare function getPrincipalAvatarIcon(name?: string): AvatarComponent | undefined;