@dxos/react-ui 0.1.31 → 0.1.32-next.86f5578

package/dist/types/src/panels/JoinPanel/view-states/ViewState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewState.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/ViewState.tsx"],"names":[],"mappings":"AAKA,OAAc,EAAE,cAAc,EAAE,wBAAwB,EAAsB,MAAM,OAAO,CAAC;AAE5F,OAAO,KAAK,EAAE,kCAAkC,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAOjF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC3D,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,YAAY,CAAC;IACvB,gBAAgB,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC;IACnC,gBAAgB,CAAC,EAAE,IAAI,GAAG,kCAAkC,CAAC;CAC9D;AAID,eAAO,MAAM,gBAAgB,sCAAuC,yBAAyB,IAAI,CAAC,gBAMjG,CAAC;AA2GF,eAAO,MAAM,SAAS,4FAQnB,cAAc,gBAyDhB,CAAC"}
+{"version":3,"file":"ViewState.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/ViewState.tsx"],"names":[],"mappings":"AAKA,OAAc,EAAE,cAAc,EAAE,wBAAwB,EAAsB,MAAM,OAAO,CAAC;AAS5F,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC3D,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,QAAQ,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAID,eAAO,MAAM,gBAAgB,sCAAuC,yBAAyB,IAAI,CAAC,gBAMjG,CAAC;AA4GF,eAAO,MAAM,SAAS,mEAAoE,cAAc,gBAcvG,CAAC"}

package/dist/types/src/panels/JoinPanel/view-states/index.d.ts

@@ -1,6 +1,5 @@
 export * from './AdditionMethodSelector';
 export * from './IdentityAdded';
-export * from './IdentitySelector';
 export * from './IdentityInput';
 export * from './InvitationAccepted';
 export * from './InvitationInput';

package/dist/types/src/panels/JoinPanel/view-states/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/index.ts"],"names":[],"mappings":"AAIA,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/index.ts"],"names":[],"mappings":"AAIA,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC"}

package/dist/types/src/playwright/invitations-manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"invitations-manager.d.ts","sourceRoot":"","sources":["../../../../src/playwright/invitations-manager.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAkB,IAAI,EAAE,MAAM,YAAY,CAAC;AAIhE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,4CAA4C,CAAC;AAO7E,oBAAY,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5E,qBAAa,kBAAkB;IAOjB,OAAO,CAAC,QAAQ,CAAC,QAAQ;IANrC,IAAI,EAAG,IAAI,CAAC;IAEZ,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,eAAe,CAAyB;IAChD,OAAO,CAAC,mBAAmB,CAAyB;gBAEvB,QAAQ,EAAE,OAAO;IAExC,IAAI;IAiBJ,cAAc,CAAC,EAAE,EAAE,MAAM;IAKzB,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM;IAK1C,sBAAsB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO;IAO3D,gBAAgB,CAAC,EAAE,EAAE,MAAM;IAOrB,kBAAkB,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe;IASrD,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS;IA2BtC,cAAc,CAAC,EAAE,EAAE,MAAM;IASzB,WAAW,CAAC,EAAE,EAAE,MAAM;IAItB,gBAAgB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAE,OAAO,CAAC,EAAE,kBAAkB,GAAG,OAAO,CAAC,MAAM,CAAC;IAsBrG,gBAAgB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAE,UAAU,EAAE,MAAM;IAQzE,gBAAgB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO;IAO7E,uBAAuB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO;IAO5D,qBAAqB,IAAI,OAAO,CAAC,MAAM,CAAC;IAKxC,sBAAsB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAE,kBAAkB,EAAE,MAAM;IAOvF,uBAAuB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO;IAO5D,eAAe,CAAC,EAAE,EAAE,MAAM;IAO1B,cAAc,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO;IAOzD,OAAO,CAAC,KAAK;YAIC,iBAAiB;CAUhC"}
+{"version":3,"file":"invitations-manager.d.ts","sourceRoot":"","sources":["../../../../src/playwright/invitations-manager.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAkB,IAAI,EAAE,MAAM,YAAY,CAAC;AAIhE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,4CAA4C,CAAC;AAO7E,oBAAY,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5E,qBAAa,kBAAkB;IAOjB,OAAO,CAAC,QAAQ,CAAC,QAAQ;IANrC,IAAI,EAAG,IAAI,CAAC;IAEZ,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,eAAe,CAAyB;IAChD,OAAO,CAAC,mBAAmB,CAAyB;gBAEvB,QAAQ,EAAE,OAAO;IAExC,IAAI;IAiBJ,cAAc,CAAC,EAAE,EAAE,MAAM;IAKzB,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM;IAK1C,sBAAsB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO;IAO3D,gBAAgB,CAAC,EAAE,EAAE,MAAM;IAOrB,kBAAkB,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe;IASrD,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS;IA2BtC,cAAc,CAAC,EAAE,EAAE,MAAM;IASzB,WAAW,CAAC,EAAE,EAAE,MAAM;IAItB,gBAAgB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAE,OAAO,CAAC,EAAE,kBAAkB,GAAG,OAAO,CAAC,MAAM,CAAC;IAsBrG,gBAAgB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAE,UAAU,EAAE,MAAM;IAUzE,gBAAgB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO;IAO7E,uBAAuB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO;IAO5D,qBAAqB,IAAI,OAAO,CAAC,MAAM,CAAC;IAKxC,sBAAsB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAE,kBAAkB,EAAE,MAAM;IAOvF,uBAAuB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO;IAO5D,eAAe,CAAC,EAAE,EAAE,MAAM;IAO1B,cAAc,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO;IASzD,OAAO,CAAC,KAAK;YAIC,iBAAiB;CAUhC"}

package/dist/types/src/translations/locales/en-US.d.ts

@@ -4,7 +4,7 @@ export declare const os: {
     'sidebar label': string;
     'copy invitation code label': string;
     'open share panel label': string;
-    'joining heading': string;
+    'joining space heading': string;
     'join space heading': string;
     'halo heading': string;
     'exit label': string;
@@ -59,5 +59,7 @@ export declare const os: {
     'toggle sidebar label': string;
     'open sidebar label': string;
     'close sidebar label': string;
+    'welcome message': string;
+    'selecting identity heading': string;
 };
 //# sourceMappingURL=en-US.d.ts.map

package/dist/types/src/translations/locales/en-US.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en-US.d.ts","sourceRoot":"","sources":["../../../../../src/translations/locales/en-US.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6Dd,CAAC"}
+{"version":3,"file":"en-US.d.ts","sourceRoot":"","sources":["../../../../../src/translations/locales/en-US.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Dd,CAAC"}

package/dist/types/src/util/index.d.ts

@@ -1,2 +1,3 @@
 export * from './invitationStatusValue';
+export * from './toEmoji';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/util/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,yBAAyB,CAAC;AACxC,cAAc,WAAW,CAAC"}

package/dist/types/src/util/toEmoji.d.ts

@@ -0,0 +1,2 @@
+export declare const toEmoji: (keyAsHex: string) => string;
+//# sourceMappingURL=toEmoji.d.ts.map

package/dist/types/src/util/toEmoji.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toEmoji.d.ts","sourceRoot":"","sources":["../../../../src/util/toEmoji.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,OAAO,aAAc,MAAM,WAAiD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.1.31",
+  "version": "0.1.32-next.86f5578",
   "description": "A React component library for DXOS’s OS experiences",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -19,32 +19,36 @@
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-radio-group": "^1.1.2",
     "@react-hook/async": "^3.1.1",
+    "@xstate/react": "^3.2.1",
     "debug": "^4.3.3",
+    "lodash.toarray": "^4.4.0",
     "qrcode.react": "^3.1.0",
     "url-join": "^5.0.0",
-    "@dxos/client": "0.1.31",
-    "@dxos/config": "0.1.31",
-    "@dxos/debug": "0.1.31",
-    "@dxos/keys": "0.1.31",
-    "@dxos/protocols": "0.1.31",
-    "@dxos/react-client": "0.1.31",
-    "@dxos/react-components": "0.1.31",
-    "@dxos/util": "0.1.31"
+    "xstate": "^4.37.0",
+    "@dxos/client": "0.1.32-next.86f5578",
+    "@dxos/config": "0.1.32-next.86f5578",
+    "@dxos/debug": "0.1.32-next.86f5578",
+    "@dxos/keys": "0.1.32-next.86f5578",
+    "@dxos/protocols": "0.1.32-next.86f5578",
+    "@dxos/react-client": "0.1.32-next.86f5578",
+    "@dxos/react-components": "0.1.32-next.86f5578",
+    "@dxos/util": "0.1.32-next.86f5578"
   },
   "devDependencies": {
     "@faker-js/faker": "^7.6.0",
     "@phosphor-icons/react": "^2.0.5",
     "@types/debug": "^4.1.7",
+    "@types/lodash.toarray": "^4.4.7",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "vite": "4.0.4",
-    "@dxos/async": "0.1.31",
-    "@dxos/client-services": "0.1.31",
-    "@dxos/log": "0.1.31",
-    "@dxos/react-async": "0.1.31"
+    "vite": "^4.2.0",
+    "@dxos/async": "0.1.32-next.86f5578",
+    "@dxos/client-services": "0.1.32-next.86f5578",
+    "@dxos/log": "0.1.32-next.86f5578",
+    "@dxos/react-async": "0.1.32-next.86f5578"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",

package/src/components/IdentityList/SpaceMemberListContainer.tsx

@@ -20,8 +20,12 @@ export const SpaceMemberListContainer = ({ spaceKey, includeSelf, onSelect }: Sp
   const members = useMemo(
     () =>
       includeSelf
-        ? allUnsortedMembers.sort((a) => (a.identity.identityKey.equals(client.halo.identity!.identityKey) ? -1 : 1))
-        : allUnsortedMembers.filter((member) => !member.identity.identityKey.equals(client.halo.identity!.identityKey)),
+        ? allUnsortedMembers.sort((a) =>
+            a.identity.identityKey.equals(client.halo.identity.get()!.identityKey) ? -1 : 1
+          )
+        : allUnsortedMembers.filter(
+            (member) => !member.identity.identityKey.equals(client.halo.identity.get()!.identityKey)
+          ),
     [allUnsortedMembers]
   );
   return <SpaceMemberList members={members} onSelect={onSelect} />;

package/src/components/InvitationList/InvitationList.stories.tsx

@@ -37,7 +37,7 @@ export const Default = {
 
         await clients[0].halo.createIdentity({ displayName: 'Os Mutantes' });
 
-        const space = await clients[0].echo.createSpace();
+        const space = await clients[0].createSpace();
         log.info('[space created]', space);
         space.properties.name = 'Q3 2022 Planning';
         log.info('[space title set]', space?.properties.name);

package/src/composites/JoinDialog/JoinDialog.stories.tsx

@@ -35,6 +35,9 @@ const JoinClientDecorator = (Story: StoryFn, { args }: StoryContext) => {
       log.info('[next invitation code]', { nextInvitationCode });
       setInvitationCode(nextInvitationCode);
     }
+    if (invitation.authenticationCode) {
+      log.info('[verification code]', invitation.authenticationCode);
+    }
   }, []);
 
   useAsyncEffect(async () => {
@@ -43,12 +46,11 @@ const JoinClientDecorator = (Story: StoryFn, { args }: StoryContext) => {
 
     await clients[0].halo.createIdentity({ displayName: 'Os Mutantes' });
 
-    const space = await clients[0].echo.createSpace();
+    const space = await clients[0].createSpace();
     log.info('[space created]', space);
     space.properties.name = 'Q3 2022 Planning';
 
     const invitation = space.createInvitation({ type: Invitation.Type.INTERACTIVE });
-    log.info('[invitation created]', invitation);
 
     invitation.subscribe({
       onAuthenticating: onInvitationEvent,

package/src/composites/Shell/Shell.stories.tsx

@@ -45,7 +45,7 @@ const ShellControls = () => {
       <TooltipRoot>
         <TooltipContent>Create Space</TooltipContent>
         <TooltipTrigger asChild>
-          <Button onClick={() => client.echo.createSpace({ name: faker.animal.bird() })}>
+          <Button onClick={() => client.createSpace({ name: faker.animal.bird() })}>
             <PlusCircle weight='fill' className={getSize(6)} />
           </Button>
         </TooltipTrigger>

package/src/composites/Shell/Shell.tsx

@@ -49,7 +49,7 @@ export const Shell = ({ runtime, origin }: { runtime: ShellRuntime; origin: stri
           initialInvitationCode={invitationCode}
           onDone={async () => {
             // TODO(wittjosiah): Is this app-specific?
-            spaces.length > 0 || (await client.echo.createSpace());
+            spaces.length > 0 || (await client.createSpace());
             await runtime.setAppContext({ display: ShellDisplay.NONE });
             runtime.setLayout(ShellLayout.DEFAULT);
           }}

package/src/panels/JoinPanel/JoinHeading.tsx

@@ -1,20 +1,21 @@
 //
 // Copyright 2023 DXOS.org
 //
-import { ProhibitInset } from '@phosphor-icons/react';
+import { X } from '@phosphor-icons/react';
 import React, { cloneElement, ForwardedRef, forwardRef } from 'react';
 
-import { AuthenticatingInvitationObservable } from '@dxos/client';
 import { useSpace } from '@dxos/react-client';
-import { Avatar, Button, getSize, Heading, mx, Trans, useId, useTranslation } from '@dxos/react-components';
+import { Button, defaultDescription, getSize, Heading, mx, useId, useTranslation } from '@dxos/react-components';
 
-import { subduedSurface } from '../../styles';
+import { defaultSurface } from '../../styles';
+import { toEmoji } from '../../util';
 import { JoinPanelMode } from './JoinPanelProps';
+import { JoinState } from './joinMachine';
 
 export interface JoinSpaceHeadingProps {
   mode?: JoinPanelMode;
   titleId: string;
-  invitation?: AuthenticatingInvitationObservable;
+  joinState?: JoinState;
   onExit?: () => void;
   exitActionParent?: Parameters<typeof cloneElement>[0];
   preventExit?: boolean;
@@ -23,56 +24,57 @@ export interface JoinSpaceHeadingProps {
 // TODO(wittjosiah): Accesses the space properties directly which will trigger ECHO warnings without observer.
 export const JoinHeading = forwardRef(
   (
-    { mode, titleId, invitation, onExit, exitActionParent, preventExit }: JoinSpaceHeadingProps,
+    { mode, titleId, joinState, onExit, exitActionParent, preventExit }: JoinSpaceHeadingProps,
     ref: ForwardedRef<HTMLDivElement>
   ) => {
     const { t } = useTranslation('os');
 
-    const space = useSpace(invitation?.invitation?.spaceKey);
-    const name = mode === 'halo-only' ? '(Unknown identity)' : space?.properties.name ?? '(Space name not available)';
+    const space = useSpace(joinState?.context.space.invitation?.spaceKey);
+    const name = space?.properties.name;
     const nameId = useId(mode === 'halo-only' ? 'identityDisplayName' : 'spaceDisplayName');
 
-    const invitationKey =
-      mode === 'halo-only'
-        ? invitation?.invitation?.identityKey?.toHex()
-        : invitation?.invitation?.identityKey?.toHex();
+    const invitationKey = joinState?.context[mode === 'halo-only' ? 'halo' : 'space'].invitation?.invitationId;
+    const invitationEmoji = invitationKey && toEmoji(invitationKey);
 
     const exitButton = (
-      <Button variant='ghost' {...(onExit && { onClick: onExit })} className='grow-0 shrink-0' data-testid='join-exit'>
-        <ProhibitInset className={getSize(5)} />
+      <Button
+        variant='ghost'
+        {...(onExit && { onClick: onExit })}
+        className={mx(defaultDescription, 'plb-0 pli-2 absolute block-start-1.5 inline-end-2 z-[1]')}
+        data-testid='join-exit'
+      >
+        <X weight='bold' className={getSize(4)} />
         <span className='sr-only'>{t('exit label')}</span>
       </Button>
     );
 
     return (
-      <div role='none' className={mx(subduedSurface, 'p-2 rounded-bs-md')} ref={ref}>
-        <div role='group' className='flex items-center gap-2'>
-          {invitationKey ? (
-            <Avatar fallbackValue={invitationKey} labelId={nameId} />
-          ) : (
-            <span role='none' className={mx(getSize(10), 'bg-neutral-300 dark:bg-neutral-700 rounded-full')} />
+      <div role='none' className={mx(defaultSurface, 'pbs-3 pbe-1 rounded-bs-md relative')} ref={ref}>
+        {!preventExit &&
+          mode !== 'halo-only' &&
+          (exitActionParent ? cloneElement(exitActionParent, {}, exitButton) : exitButton)}
+        <Heading
+          level={1}
+          className={mx(
+            defaultDescription,
+            'font-body font-system-normal text-center text-sm grow pbe-2',
+            mode === 'halo-only' && (preventExit ? 'sr-only' : 'opacity-0')
           )}
-          <Heading level={1} className='font-body font-normal text-base grow' id={titleId}>
-            {invitation ? (
-              <Trans
-                {...{
-                  defaults: t('joining heading'),
-                  components: {
-                    small: <span className='block leading-none mbe-1 font-system-medium text-sm' />,
-                    large: <span className='block leading-none' id={nameId} />
-                  },
-                  values: { name }
-                }}
-              />
-            ) : (
-              <span className='block leading-none font-system-medium text-sm'>
-                {mode === 'halo-only' ? t('halo heading') : t('join space heading')}
-              </span>
+          id={titleId}
+        >
+          {t(mode === 'halo-only' ? 'selecting identity heading' : 'joining space heading')}
+        </Heading>
+        <div role='group' className='flex items-center justify-center gap-2'>
+          <span
+            role='none'
+            className={mx(
+              getSize(12),
+              'bg-neutral-300 dark:bg-neutral-700 rounded-full text-center text-4xl leading-[3rem]'
             )}
-          </Heading>
-          {!preventExit &&
-            mode !== 'halo-only' &&
-            (exitActionParent ? cloneElement(exitActionParent, {}, exitButton) : exitButton)}
+          >
+            {invitationEmoji}
+          </span>
+          {name && <p id={nameId}>{name}</p>}
         </div>
       </div>
     );