@antscorp/antsomi-ui 1.3.7-beta.7 → 1.3.7-beta.71

package/es/components/organism/LoginV2/components/OryConsent/OryConsent.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { OryConsentPreview, OryScopeCatalog } from '../../types/ory';
+type OryConsentProps = {
+    consentUrl: string;
+    csrfUrl?: string;
+    sessionUrl?: string;
+    /** Endpoint that declines the request; defaults to `<consentUrl>/reject`. */
+    rejectUrl?: string;
+    scopeCatalog?: OryScopeCatalog;
+    /** Render fixture data instead of calling the IAM API. */
+    preview?: OryConsentPreview;
+    onCancel?: () => void;
+    /** End the browser session so another account can sign in. */
+    onSwitchAccount?: () => Promise<unknown> | void;
+};
+export declare const OryConsent: React.FC<OryConsentProps>;
+export {};

package/es/components/organism/LoginV2/components/OryConsent/OryConsent.js

@@ -0,0 +1,204 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { Button } from '../../../../atoms/Button';
+import { Flex } from '../../../../atoms/Flex';
+import { Spin } from '../../../../atoms/Spin';
+import { Text } from '../../../../atoms/Text';
+import { Result } from '../../../../molecules/Result';
+import { buildOryConsentGrant, declineOryConsent, getInitialOryPortalId, getInitialSelectedScopes, getOryAccount, getOryPortals, requiresOryPortal, shouldPromptForOryPortal, } from '../../utils/oryConsent';
+import { OryAuthLayout } from './OryAuthLayout';
+import { PortalSelect } from './PortalSelect';
+import { ScopeConsent } from './ScopeConsent';
+const JSON_HEADERS = { Accept: 'application/json' };
+const readJSON = async (response) => {
+    try {
+        return await response.json();
+    }
+    catch (error) {
+        return null;
+    }
+};
+const errorText = (cause, fallback) => cause?.userMessage ||
+    (cause instanceof Error && cause.message) ||
+    fallback;
+export const OryConsent = ({ consentUrl, csrfUrl = '/api/csrf', sessionUrl = '/api/session', rejectUrl, scopeCatalog, preview, onCancel, onSwitchAccount, }) => {
+    const [loading, setLoading] = useState(true);
+    const [loadError, setLoadError] = useState('');
+    const [request, setRequest] = useState(null);
+    const [portals, setPortals] = useState([]);
+    const [account, setAccount] = useState({});
+    const [step, setStep] = useState('scopes');
+    const [portalId, setPortalId] = useState('');
+    const [selected, setSelected] = useState([]);
+    const [remember, setRemember] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [switching, setSwitching] = useState(false);
+    const [declining, setDeclining] = useState(false);
+    const [submitError, setSubmitError] = useState('');
+    const challenge = useMemo(() => new URLSearchParams(window.location.search).get('consent_challenge') || '', []);
+    const catalog = useMemo(() => scopeCatalog || {}, [scopeCatalog]);
+    const canChoosePortal = shouldPromptForOryPortal(portals);
+    const portal = portals.find(item => item.id === portalId);
+    useEffect(() => {
+        const hydrate = (nextRequest, nextPortals, nextAccount, portalsLoaded) => {
+            const needs = requiresOryPortal(nextRequest);
+            const preferred = new URLSearchParams(window.location.search).get('portal_id');
+            setRequest(nextRequest);
+            setPortals(nextPortals);
+            setAccount(nextAccount);
+            setSelected(getInitialSelectedScopes(nextRequest));
+            setPortalId(getInitialOryPortalId(nextPortals, preferred));
+            setStep(shouldPromptForOryPortal(nextPortals, preferred) ? 'portal' : 'scopes');
+            if (needs && nextPortals.length === 0) {
+                setLoadError(portalsLoaded
+                    ? 'Your account does not have a portal that can authorize this application.'
+                    : 'Unable to load your portals. Please try again.');
+            }
+            setLoading(false);
+        };
+        if (preview) {
+            hydrate(preview.request, preview.portals, preview.account, true);
+            return undefined;
+        }
+        const controller = new AbortController();
+        if (!challenge) {
+            setLoadError('Consent challenge is required');
+            setLoading(false);
+            return () => controller.abort();
+        }
+        const consent = new URL(consentUrl, window.location.origin);
+        consent.searchParams.set('consent_challenge', challenge);
+        const get = (url) => fetch(url, { credentials: 'include', headers: JSON_HEADERS, signal: controller.signal });
+        Promise.all([
+            get(consent.toString()),
+            // The session is optional context: without it only portal choice is lost.
+            get(sessionUrl).catch(cause => {
+                if (cause?.name === 'AbortError')
+                    throw cause;
+                return null;
+            }),
+        ])
+            .then(async ([consentResponse, sessionResponse]) => {
+            const consentPayload = await readJSON(consentResponse);
+            if (!consentResponse.ok || !consentPayload?.data) {
+                throw new Error('Unable to load the authorization request');
+            }
+            const sessionPayload = sessionResponse?.ok ? await readJSON(sessionResponse) : null;
+            hydrate(consentPayload.data, getOryPortals(sessionPayload), getOryAccount(sessionPayload, consentPayload.data.subject), Boolean(sessionPayload));
+        })
+            .catch(cause => {
+            if (cause?.name === 'AbortError')
+                return;
+            setLoadError('Unable to load the authorization request');
+            setLoading(false);
+        });
+        return () => controller.abort();
+    }, [challenge, consentUrl, sessionUrl, preview]);
+    const leave = () => {
+        if (onCancel)
+            onCancel();
+        window.history.replaceState({}, document.title, window.location.pathname);
+    };
+    // Declining tells Hydra, which sends the user back to the application with
+    // access_denied. If that call fails the user can still leave the page.
+    const close = async () => {
+        if (preview || !challenge) {
+            leave();
+            return;
+        }
+        setDeclining(true);
+        try {
+            const { redirectTo } = await declineOryConsent({
+                location: window.location,
+                rejectUrl: rejectUrl || `${consentUrl.replace(/\/$/, '')}/reject`,
+                csrfUrl,
+                challenge,
+            });
+            window.location.assign(redirectTo);
+        }
+        catch (cause) {
+            leave();
+        }
+    };
+    const switchAccount = async () => {
+        if (!onSwitchAccount)
+            return;
+        setSwitching(true);
+        setSubmitError('');
+        try {
+            await onSwitchAccount();
+        }
+        catch (cause) {
+            setSubmitError(errorText(cause, 'Unable to sign out. Please try again.'));
+            setSwitching(false);
+        }
+    };
+    const toggleScope = (scope, granted) => setSelected(current => granted
+        ? [...current.filter(item => item !== scope), scope]
+        : current.filter(item => item !== scope));
+    const authorize = async () => {
+        if (!request)
+            return;
+        const grant = buildOryConsentGrant({
+            request,
+            selected,
+            portalId: portal?.id || '',
+            remember,
+            catalog,
+        });
+        setSaving(true);
+        setSubmitError('');
+        if (preview) {
+            preview.onAuthorize?.(grant);
+            window.setTimeout(() => setSaving(false), 600);
+            return;
+        }
+        try {
+            const csrfResponse = await fetch(csrfUrl, { credentials: 'include', headers: JSON_HEADERS });
+            const csrfPayload = await readJSON(csrfResponse);
+            const csrfToken = csrfPayload?.token || csrfPayload?.data?.token;
+            if (!csrfResponse.ok || !csrfToken)
+                throw new Error('CSRF token is unavailable');
+            // The chosen portal travels in the body only; a portal_id in the query
+            // string would have to match it exactly.
+            const url = new URL(consentUrl, window.location.origin);
+            url.searchParams.set('consent_challenge', challenge);
+            const response = await fetch(url.toString(), {
+                method: 'POST',
+                credentials: 'include',
+                redirect: 'manual',
+                headers: { ...JSON_HEADERS, 'Content-Type': 'application/json', 'X-CSRF-Token': csrfToken },
+                body: JSON.stringify(grant),
+            });
+            if (response.status >= 300 && response.status < 400) {
+                const location = response.headers.get('Location');
+                if (!location)
+                    throw new Error('Authorization did not provide a redirect');
+                window.location.assign(location);
+                return;
+            }
+            const payload = await readJSON(response);
+            const redirectTo = payload?.data?.redirectTo || payload?.redirectTo;
+            if (!response.ok || !redirectTo)
+                throw new Error('Authorization request was rejected');
+            window.location.assign(new URL(redirectTo, window.location.origin).toString());
+        }
+        catch (cause) {
+            setSubmitError(errorText(cause, 'Unable to authorize application'));
+            setSaving(false);
+        }
+    };
+    if (loading) {
+        return (_jsx(OryAuthLayout, { title: "Authorize application", children: _jsxs(Flex, { vertical: true, align: "center", gap: 12, style: { padding: '48px 0' }, role: "status", children: [_jsx(Spin, {}), _jsx(Text, { type: "secondary", children: "Loading authorization request\u2026" })] }) }));
+    }
+    if (loadError || !request) {
+        return (_jsx(OryAuthLayout, { title: "Authorize application", children: _jsx(Result, { status: "warning", title: "We couldn't continue", subTitle: loadError || 'Unable to load the authorization request', extra: [
+                    _jsx(Button, { type: "primary", onClick: () => window.location.reload(), children: "Try again" }, "retry"),
+                    _jsx(Button, { onClick: close, children: "Cancel & Return" }, "cancel"),
+                ] }) }));
+    }
+    if (step === 'portal' && canChoosePortal) {
+        return (_jsx(PortalSelect, { account: account, clientName: request.client?.client_name || request.client?.client_id, portals: portals, selectedId: portalId, onSelect: setPortalId, onContinue: () => setStep('scopes'), onSwitchAccount: onSwitchAccount ? switchAccount : undefined, switching: switching, error: submitError }));
+    }
+    return (_jsx(ScopeConsent, { request: request, account: account, catalog: catalog, portal: portal, selected: selected, remember: remember, saving: saving, declining: declining, error: submitError, onToggle: toggleScope, onRememberChange: setRemember, onAuthorize: authorize, onCancel: close, onSwitchPortal: canChoosePortal ? () => setStep('portal') : undefined }));
+};

package/es/components/organism/LoginV2/components/OryConsent/OryThemeProvider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * Antsomi theme and class prefix for the Ory screens. It is the antd part of
+ * the full antsomi ConfigProvider, without its global styles and app services,
+ * so the screens look the same in a host that has not mounted that provider.
+ * Inside a host that has, it is a no-op.
+ */
+export declare const OryThemeProvider: React.FC<React.PropsWithChildren>;

package/es/components/organism/LoginV2/components/OryConsent/OryThemeProvider.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConfigProvider } from 'antd';
+import { ANTSOMI_COMPONENT_PREFIX_CLS, THEME } from '@antscorp/antsomi-ui/es/constants';
+/**
+ * Antsomi theme and class prefix for the Ory screens. It is the antd part of
+ * the full antsomi ConfigProvider, without its global styles and app services,
+ * so the screens look the same in a host that has not mounted that provider.
+ * Inside a host that has, it is a no-op.
+ */
+export const OryThemeProvider = ({ children }) => (_jsx(ConfigProvider, { theme: THEME, prefixCls: ANTSOMI_COMPONENT_PREFIX_CLS, children: children }));

package/es/components/organism/LoginV2/components/OryConsent/PortalSelect.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { OryAccount, OryPortal } from '../../types/ory';
+type PortalSelectProps = {
+    account: OryAccount;
+    clientName?: string;
+    portals: OryPortal[];
+    selectedId: string;
+    onSelect: (portalId: string) => void;
+    onContinue: () => void;
+    onSwitchAccount?: () => void;
+    switching?: boolean;
+    error?: string;
+};
+export declare const PortalSelect: React.FC<PortalSelectProps>;
+export {};

package/es/components/organism/LoginV2/components/OryConsent/PortalSelect.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Alert } from '../../../../atoms/Alert';
+import { Button } from '../../../../atoms/Button';
+import { Flex } from '../../../../atoms/Flex';
+import { Icon } from '../../../../atoms/Icon';
+import { EmptyData } from '../../../../molecules/EmptyData';
+import { InputSearch } from '../../../../molecules/InputSearch';
+import { CheckSlimIcon } from '../../../../icons/CheckSlimIcon';
+import { ExitLogOutIcon } from '../../../../icons/ExitLogOutIcon';
+import { SearchNotFoundIcon } from '../../../../icons/SearchNotFoundIcon';
+import { StoreIcon } from '../../../../icons/StoreIcon';
+import { filterOryPortals, getOryAccountLabel } from '../../utils/oryConsent';
+import { OryAuthLayout } from './OryAuthLayout';
+import { Indicator, PortalGrid, PortalLogo, PortalName, PortalOption, SearchBox, } from './styled';
+export const PortalSelect = ({ account, clientName, portals, selectedId, onSelect, onContinue, onSwitchAccount, switching = false, error, }) => {
+    const [query, setQuery] = useState('');
+    const visible = useMemo(() => filterOryPortals(portals, { query }), [portals, query]);
+    const selected = portals.find(portal => portal.id === selectedId);
+    const footer = (_jsxs(_Fragment, { children: [error ? _jsx(Alert, { type: "error", showIcon: true, role: "alert", message: error }) : null, _jsx(Button, { type: "primary", size: "large", block: true, disabled: !selected, onClick: onContinue, children: _jsxs(Flex, { align: "center", justify: "center", gap: 8, children: [selected ? `Continue with ${selected.name}` : 'Select a portal to continue', _jsx(Icon, { type: "icon-ants-arrow-forward", size: 16 })] }) }), onSwitchAccount ? (_jsx(Button, { type: "text", loading: switching, onClick: onSwitchAccount, icon: _jsx(ExitLogOutIcon, { size: 16 }), children: "Sign in with a different account" })) : null] }));
+    return (_jsxs(OryAuthLayout, { title: "Select Portal", description: _jsxs(_Fragment, { children: ["Choose a portal to authorize ", _jsx("b", { children: clientName || 'the requested app' }), ".", _jsx("br", {}), _jsxs("small", { children: ["Signed in as ", _jsx("b", { children: getOryAccountLabel(account) })] })] }), footer: footer, children: [_jsx(SearchBox, { children: _jsx(InputSearch, { value: query, placeholder: "Search portals", "aria-label": "Search portals", onChange: event => setQuery(event.target.value) }) }), visible.length === 0 ? (_jsx(EmptyData, { icon: _jsx(SearchNotFoundIcon, {}), title: "No portal found", subTitle: "Check the spelling or try another name" })) : (_jsx(PortalGrid, { role: "radiogroup", "aria-label": "Available portals", children: visible.map(portal => {
+                    const isSelected = portal.id === selectedId;
+                    return (_jsxs(PortalOption, { "$selected": isSelected, role: "radio", "aria-checked": isSelected, tabIndex: 0, onClick: () => onSelect(portal.id), onKeyDown: event => {
+                            if (event.key === 'Enter' || event.key === ' ') {
+                                event.preventDefault();
+                                onSelect(portal.id);
+                            }
+                        }, children: [_jsx(Indicator, { "$selected": isSelected, "aria-hidden": "true", children: _jsx(CheckSlimIcon, { size: 12 }) }), _jsx(PortalLogo, { children: portal.logo ? (_jsx("img", { src: portal.logo, alt: "" })) : (_jsx(StoreIcon, { size: 28, fill: "currentColor" })) }), _jsx(PortalName, { "$selected": isSelected, children: portal.name })] }, portal.id));
+                }) }))] }));
+};

package/es/components/organism/LoginV2/components/OryConsent/ScopeConsent.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { OryAccount, OryConsentRequest, OryPortal, OryScopeCatalog } from '../../types/ory';
+type ScopeConsentProps = {
+    request: OryConsentRequest;
+    account: OryAccount;
+    catalog: OryScopeCatalog;
+    portal?: OryPortal;
+    selected: string[];
+    remember: boolean;
+    saving: boolean;
+    declining?: boolean;
+    error?: string;
+    onToggle: (scope: string, granted: boolean) => void;
+    onRememberChange: (remember: boolean) => void;
+    onAuthorize: () => void;
+    onCancel: () => void;
+    onSwitchPortal?: () => void;
+};
+export declare const ScopeConsent: React.FC<ScopeConsentProps>;
+export {};

package/es/components/organism/LoginV2/components/OryConsent/ScopeConsent.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Alert } from '../../../../atoms/Alert';
+import { Avatar } from '../../../../atoms/Avatar';
+import { Button } from '../../../../atoms/Button';
+import { Checkbox } from '../../../../atoms/Checkbox';
+import { Flex } from '../../../../atoms/Flex';
+import { Icon } from '../../../../atoms/Icon';
+import { Switch } from '../../../../atoms/Switch';
+import { Tag } from '../../../../atoms/Tag';
+import { Text } from '../../../../atoms/Text';
+import { StoreIcon } from '../../../../icons/StoreIcon';
+import { getInitials, getOryAccountLabel, getOryScopeInfo, OIDC_SCOPES, } from '../../utils/oryConsent';
+import { OryAuthLayout } from './OryAuthLayout';
+import { Caption, List, Mono, ScopeCard, ScopeGroup, ScopeGroups, SectionHeader, SummaryCard, SummaryRow, Truncate, } from './styled';
+export const ScopeConsent = ({ request, account, catalog, portal, selected, remember, saving, declining = false, error, onToggle, onRememberChange, onAuthorize, onCancel, onSwitchPortal, }) => {
+    const scopes = request.requested_scope || [];
+    const identityScopes = scopes.filter(scope => OIDC_SCOPES.includes(scope));
+    const resourceScopes = scopes.filter(scope => !OIDC_SCOPES.includes(scope));
+    const { client } = request;
+    const clientName = client?.client_name || client?.client_id || 'This application';
+    const isGranted = (scope) => Boolean(getOryScopeInfo(scope, catalog).required) || selected.includes(scope);
+    const grantedCount = scopes.filter(isGranted).length;
+    const footer = (_jsxs(_Fragment, { children: [error ? _jsx(Alert, { type: "error", showIcon: true, role: "alert", message: error }) : null, _jsx(Button, { type: "primary", size: "large", block: true, loading: saving, disabled: grantedCount === 0 || declining, onClick: onAuthorize, children: _jsxs(Flex, { align: "center", justify: "center", gap: 8, children: [_jsx(Icon, { type: "icon-ants-check-circle", size: 18 }), "Authorize Access"] }) }), _jsx(Button, { size: "large", block: true, loading: declining, disabled: saving, onClick: onCancel, children: "Cancel & Return" })] }));
+    const renderScopes = (items) => (_jsx(List, { children: items.map(scope => {
+            const info = getOryScopeInfo(scope, catalog);
+            return (_jsx(ScopeCard, { "$locked": info.required, children: _jsxs(Flex, { vertical: true, gap: 4, children: [_jsxs(Flex, { align: "flex-start", justify: "space-between", gap: 12, children: [_jsxs(Flex, { align: "center", gap: 8, wrap: "wrap", style: { minWidth: 0 }, children: [_jsx(Text, { bold: true, size: "medium", children: info.title }), info.sensitive ? (_jsx(Tag, { color: "warning", bordered: false, style: { marginInlineEnd: 0 }, children: "Can edit data" })) : null] }), info.required ? (_jsx(Tag, { bordered: false, style: { marginInlineEnd: 0 }, children: "Required" })) : (_jsx(Switch, { checked: isGranted(scope), disabled: saving, "aria-label": `Allow ${info.title}`, onChange: granted => onToggle(scope, granted) }))] }), _jsx(Mono, { children: scope }), _jsx(Text, { type: "secondary", children: info.description })] }) }, scope));
+        }) }));
+    return (_jsxs(OryAuthLayout, { title: "Resource Consent", description: _jsxs(_Fragment, { children: [_jsx("b", { children: clientName }), " is requesting permission to access", ' ', portal ? (_jsxs(_Fragment, { children: ["resources in your ", _jsx("b", { children: portal.name }), " portal"] })) : ('your Antsomi account'), "."] }), footer: footer, children: [_jsxs(SummaryCard, { children: [_jsxs(SummaryRow, { children: [_jsx(Avatar, { shape: "square", size: 40, src: client?.logo_uri, style: { flex: 'none', color: '#005eb8', background: '#eaf1fb' }, children: getInitials(clientName) }), _jsxs(Flex, { vertical: true, style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { bold: true, size: "medium", children: _jsx(Truncate, { children: clientName }) }), client?.client_id ? (_jsx(Text, { type: "secondary", children: _jsx(Truncate, { children: client.client_id }) })) : null] })] }), portal ? (_jsxs(SummaryRow, { children: [_jsx(Avatar, { shape: "square", size: 40, icon: _jsx(StoreIcon, { size: 20, fill: "currentColor" }), style: { flex: 'none', color: '#005eb8', background: '#eaf1fb' } }), _jsxs(Flex, { vertical: true, style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { bold: true, size: "medium", children: _jsx(Truncate, { children: portal.name }) }), _jsx(Text, { type: "secondary", children: _jsx(Truncate, { children: portal.slug || portal.id }) })] }), onSwitchPortal ? (_jsx(Button, { type: "text", size: "small", onClick: onSwitchPortal, children: "Switch" })) : null] })) : null] }), _jsxs(Flex, { vertical: true, gap: 12, children: [_jsxs(SectionHeader, { children: [_jsx(Text, { bold: true, size: "medium", children: "Requested scopes" }), _jsxs(Text, { type: "secondary", children: [grantedCount, " of ", scopes.length, " selected"] })] }), _jsxs(ScopeGroups, { children: [identityScopes.length ? (_jsxs(ScopeGroup, { children: [_jsx(Caption, { children: "Your identity" }), renderScopes(identityScopes)] })) : null, resourceScopes.length ? (_jsxs(ScopeGroup, { children: [_jsxs(Caption, { children: ["Portal data", portal ? ` · ${portal.name}` : ''] }), renderScopes(resourceScopes)] })) : null] })] }), _jsxs(Flex, { vertical: true, gap: 12, children: [_jsx(Alert, { type: "info", showIcon: true, message: "Only the permissions you keep switched on will be granted to this application." }), _jsx(Checkbox, { checked: remember, disabled: saving, onChange: e => onRememberChange(e.target.checked), children: "Remember my choice for this application" }), account.email || account.name ? (_jsxs(Text, { type: "secondary", style: { textAlign: 'center' }, children: ["Signed in as ", _jsx("b", { children: getOryAccountLabel(account) })] })) : null] })] }));
+};

package/es/components/organism/LoginV2/components/OryConsent/index.d.ts

@@ -0,0 +1,2 @@
+export * from './OryConsent';
+export * from './OryThemeProvider';

package/es/components/organism/LoginV2/components/OryConsent/index.js

@@ -0,0 +1,2 @@
+export * from './OryConsent';
+export * from './OryThemeProvider';

package/es/components/organism/LoginV2/components/OryConsent/styled.d.ts

@@ -0,0 +1,31 @@
+export declare const Page: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Panel: import("styled-components").StyledComponent<"main", any, {}, never>;
+export declare const Banner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Body: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AuthHeader: import("styled-components").StyledComponent<"header", any, {}, never>;
+export declare const HeaderLogo: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const Footer: import("styled-components").StyledComponent<"footer", any, {}, never>;
+export declare const SearchBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const List: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PortalGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PortalOption: import("styled-components").StyledComponent<"div", any, {
+    $selected: boolean;
+}, never>;
+export declare const PortalLogo: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const PortalName: import("styled-components").StyledComponent<"span", any, {
+    $selected: boolean;
+}, never>;
+export declare const Indicator: import("styled-components").StyledComponent<"span", any, {
+    $selected: boolean;
+}, never>;
+export declare const SummaryCard: import("styled-components").StyledComponent<"section", any, {}, never>;
+export declare const SummaryRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SectionHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ScopeGroups: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ScopeGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Caption: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ScopeCard: import("styled-components").StyledComponent<"div", any, {
+    $locked?: boolean | undefined;
+}, never>;
+export declare const Mono: import("styled-components").StyledComponent<"code", any, {}, never>;
+export declare const Truncate: import("styled-components").StyledComponent<"span", any, {}, never>;