@dxos/react-ui 0.1.22 → 0.1.24-next.6b1f434

package/src/panels/JoinPanel/view-states/ViewState.tsx

@@ -0,0 +1,204 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CheckCircle, HourglassSimple, X } from 'phosphor-react';
+import React, { ComponentProps, ComponentPropsWithoutRef, ReactNode, useMemo } from 'react';
+
+import type { AuthenticatingInvitationObservable, Profile } from '@dxos/client';
+import { Invitation } from '@dxos/client';
+import { useInvitationStatus } from '@dxos/react-client';
+import { mx, useTranslation, Trans, Avatar, useId, getSize, strongShimmer } from '@dxos/react-components';
+
+import { defaultSurface, subduedSurface, resolvedBgColor, activeBgColor, inactiveBgColor } from '../../../styles';
+import { invitationStatusValue } from '../../../util';
+import { JoinDispatch } from '../JoinPanelProps';
+
+export interface ViewStateProps extends ComponentProps<'div'> {
+  active: boolean;
+  dispatch: JoinDispatch;
+  selectedIdentity?: true | Profile;
+  activeInvitation?: true | AuthenticatingInvitationObservable;
+}
+
+const stripe = mx('rounded-full grow', getSize(3));
+
+export const ViewStateHeading = ({ children, className, ...props }: ComponentPropsWithoutRef<'h2'>) => {
+  return (
+    <h2 {...props} className={mx('font-system-medium text-sm md:text-base mbe-1 mli-1 text-center', className)}>
+      {children}
+    </h2>
+  );
+};
+
+const PureViewStateInvitation = ({
+  halted,
+  cursor,
+  label,
+  resolvedColor
+}: {
+  halted?: boolean;
+  cursor: number;
+  label: ReactNode;
+  resolvedColor: string;
+}) => {
+  const labelId = useId('invitationState');
+  return (
+    <div role='none' className={mx(defaultSurface, 'pli-2 pbs-2')}>
+      <div role='status' aria-labelledby={labelId} className='flex gap-2 items-center mlb-1'>
+        <div
+          role='none'
+          className={mx(
+            stripe,
+            !halted && cursor === 1 && strongShimmer,
+            cursor === 2 ? (halted ? resolvedColor : activeBgColor) : cursor > 1 ? resolvedColor : inactiveBgColor
+          )}
+        />
+        <div
+          role='none'
+          className={mx(
+            stripe,
+            !halted && cursor === 3 && strongShimmer,
+            cursor === 3 ? (halted ? resolvedColor : activeBgColor) : cursor > 3 ? resolvedColor : inactiveBgColor
+          )}
+        />
+        <div
+          role='none'
+          className={mx(stripe, cursor > 3 ? (halted ? resolvedColor : resolvedColor) : inactiveBgColor)}
+        />
+      </div>
+      <ViewStateHeading id={labelId} className='mbs-2 flex justify-center items-center gap-2'>
+        {label}
+      </ViewStateHeading>
+    </div>
+  );
+};
+
+const ViewStateInvitationStatus = ({ activeInvitation }: { activeInvitation: AuthenticatingInvitationObservable }) => {
+  const { t } = useTranslation('os');
+  const { status, haltedAt } = useInvitationStatus(activeInvitation);
+
+  const halted =
+    status === Invitation.State.CANCELLED || status === Invitation.State.TIMEOUT || status === Invitation.State.ERROR;
+
+  const cursor = invitationStatusValue.get(halted ? haltedAt! : status)!;
+
+  const resolvedColor = resolvedBgColor(status);
+
+  const statusLabelMap = useMemo(
+    () =>
+      new Map<Invitation.State, ReactNode>([
+        [
+          Invitation.State.ERROR,
+          <>
+            <X weight='bold' className={mx(getSize(4), 'text-error-600 dark:text-error-400')} />
+            <span>{t('error status label')}</span>
+          </>
+        ],
+        [
+          Invitation.State.TIMEOUT,
+          <>
+            <HourglassSimple weight='fill' className={mx(getSize(4), 'text-warning-600 dark:text-warning-400')} />
+            <span>{t('timeout status label')}</span>
+          </>
+        ],
+        [
+          Invitation.State.CANCELLED,
+          <>
+            <X weight='bold' className={mx(getSize(4), 'text-warning-600 dark:text-warning-400')} />
+            <span>{t('cancelled status label')}</span>
+          </>
+        ],
+        [Invitation.State.INIT, t('init status label')],
+        [Invitation.State.CONNECTING, t('connecting status label')],
+        [Invitation.State.CONNECTED, t('connected status label')],
+        [Invitation.State.AUTHENTICATING, t('authenticating status label')],
+        [
+          Invitation.State.SUCCESS,
+          <>
+            <CheckCircle weight='fill' className={mx(getSize(4), 'text-success-600 dark:text-success-400')} />
+            <span>{t('success status label')}</span>
+          </>
+        ]
+      ]),
+    [t]
+  );
+
+  return (
+    <PureViewStateInvitation
+      {...{
+        label: statusLabelMap.get(status)!,
+        resolvedColor,
+        cursor,
+        halted
+      }}
+    />
+  );
+};
+
+export const ViewState = ({
+  active,
+  children,
+  className,
+  dispatch,
+  selectedIdentity,
+  activeInvitation,
+  ...props
+}: ViewStateProps) => {
+  // note (thure): reserve `order-1` and `order-3` for outgoing steps in different directions
+  const { t } = useTranslation('os');
+  const identityLabel = useId('selectedIdentityLabel');
+
+  return (
+    <div
+      role='none'
+      {...props}
+      {...(!active && { 'aria-hidden': true })}
+      className={mx('is-[50%] flex flex-col', active ? 'order-2' : 'order-4', className)}
+    >
+      {selectedIdentity && (
+        <div role='none' className={mx(subduedSurface, 'flex-none flex items-center gap-1 pli-2 pbe-1.5')}>
+          <Trans
+            {...{
+              defaults: t('join space as identity heading'),
+              components: {
+                icon: (
+                  <Avatar
+                    size={4}
+                    fallbackValue={selectedIdentity === true ? '' : selectedIdentity.identityKey.toHex()}
+                    labelId={identityLabel}
+                  />
+                ),
+                label: <span id={identityLabel} />,
+                part: <span role='none' className='flex items-center gap-1 leading-none' />
+              },
+              values: {
+                labelValue:
+                  selectedIdentity === true
+                    ? ' '
+                    : selectedIdentity.displayName ?? selectedIdentity.identityKey.truncate()
+              }
+            }}
+          />
+        </div>
+      )}
+      {activeInvitation &&
+        (activeInvitation === true ? (
+          <PureViewStateInvitation
+            {...{
+              halted: false,
+              status: Invitation.State.INIT,
+              label: t('invitation input label'),
+              cursor: 0,
+              resolvedColor: inactiveBgColor
+            }}
+          />
+        ) : (
+          <ViewStateInvitationStatus {...{ activeInvitation }} />
+        ))}
+      <div role='region' className={mx(defaultSurface, 'rounded-be-md grow shrink-0 flex flex-col gap-1 p-2')}>
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/panels/JoinPanel/view-states/index.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './AdditionMethodSelector';
+export * from './IdentityAdded';
+export * from './IdentitySelector';
+export * from './IdentityInput';
+export * from './InvitationAccepted';
+export * from './InvitationInput';
+export * from './InvitationRescuer';
+export * from './InvitationAuthenticator';

package/src/panels/SpacePanel/SpacePanel.stories.tsx

@@ -0,0 +1,53 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { StoryContext, StoryFn } from '@storybook/react';
+import React, { useEffect, useState } from 'react';
+
+import { Client, Space } from '@dxos/client';
+import { TestBuilder } from '@dxos/client/testing';
+import { ClientContext } from '@dxos/react-client';
+import { Loading } from '@dxos/react-components';
+
+import { SpacePanel } from './SpacePanel';
+
+export default {
+  component: SpacePanel
+};
+
+const SpaceDecorator = (Story: StoryFn, { args }: StoryContext) => {
+  const testBuilder = new TestBuilder();
+  const [client, setClient] = useState<Client>();
+  const [space, setSpace] = useState<Space>();
+
+  useEffect(() => {
+    const timeout = setTimeout(async () => {
+      const client = new Client({ services: testBuilder.createClientServicesHost() });
+      await client.initialize();
+      setClient(client);
+
+      await client.halo.createProfile();
+      const space = await client.echo.createSpace();
+      space.properties.name = 'Q3 2022 Planning';
+
+      setSpace(space);
+    });
+
+    return () => clearTimeout(timeout);
+  }, []);
+
+  if (!client || !space) {
+    return <Loading label='Setting things up…' />;
+  }
+
+  return (
+    <ClientContext.Provider value={{ client }}>
+      <Story args={{ space, ...args }} />
+    </ClientContext.Provider>
+  );
+};
+
+export const Default = {
+  decorators: [SpaceDecorator]
+};

package/src/panels/SpacePanel/SpacePanel.tsx

@@ -0,0 +1,174 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CaretLeft, CaretRight, Intersect, PlusCircle, UserPlus } from 'phosphor-react';
+import React, { cloneElement, useReducer } from 'react';
+
+import { Space, SpaceMember } from '@dxos/client';
+import { useClient, useSpaceInvitations, useSpaces } from '@dxos/react-client';
+import { Button, getSize, mx, Tooltip, useTranslation } from '@dxos/react-components';
+
+import { InvitationList, PanelSeparator, SpaceListItem, SpaceMemberListContainer } from '../../components';
+import { defaultSurface, subduedSurface } from '../../styles';
+
+export type SpacePanelProps = {
+  titleId?: string;
+  space?: Space;
+  initialState?: SpaceView;
+  createInvitationUrl: (invitationCode: string) => string;
+  onClickJoinSpace?: () => void;
+  onClickMember?: (member: SpaceMember) => void;
+  doneActionParent?: Parameters<typeof cloneElement>[0];
+  onDone?: (result: Space | null) => void;
+};
+
+export type SpaceView = 'current space' | 'space list';
+
+export type SpaceState = {
+  activeView: SpaceView;
+};
+
+const CurrentSpaceView = ({
+  space,
+  createInvitationUrl,
+  onClickMember,
+  onShowAll,
+  titleId
+}: { onShowAll: () => void } & SpacePanelProps) => {
+  const { t } = useTranslation('os');
+  const invitations = useSpaceInvitations(space?.key);
+  const name = space?.properties.name;
+
+  if (!space) {
+    return null;
+  }
+
+  return (
+    <div role='none' className='flex flex-col'>
+      <div role='none' className={mx(subduedSurface, 'rounded-bs-md flex items-center p-2 gap-2')}>
+        <Tooltip content={t('show all spaces label')} zIndex='z-50'>
+          <Button compact variant='ghost' onClick={onShowAll} data-testid='show-all-spaces'>
+            <CaretLeft className={getSize(4)} weight='bold' />
+          </Button>
+        </Tooltip>
+        {/* TODO(wittjosiah): Label this as the space panel. */}
+        <h2 id={titleId} className={mx('grow font-system-medium', !name && 'font-mono')}>
+          {name ?? space.key.truncate()}
+        </h2>
+      </div>
+      <div role='region' className={mx(defaultSurface, 'rounded-be-md p-2')}>
+        <InvitationList
+          invitations={invitations}
+          onClickRemove={({ invitation }) => invitation && space?.removeInvitation(invitation.invitationId!)}
+          createInvitationUrl={createInvitationUrl}
+        />
+        <Button
+          className='is-full flex gap-2 mbs-2'
+          compact
+          onClick={() => space?.createInvitation()}
+          data-testid='create-space-invitation'
+        >
+          <span>{t('create space invitation label')}</span>
+          <UserPlus className={getSize(4)} weight='bold' />
+        </Button>
+        <PanelSeparator />
+        <SpaceMemberListContainer spaceKey={space.key} includeSelf onSelect={onClickMember} />
+      </div>
+    </div>
+  );
+};
+
+const SpaceListView = ({
+  doneActionParent,
+  onDone,
+  onClickJoinSpace,
+  onShowCurrent,
+  titleId
+}: { onShowCurrent: () => void } & SpacePanelProps) => {
+  const { t } = useTranslation('os');
+  const client = useClient();
+  const spaces = useSpaces();
+
+  const handleCreateSpace = async () => {
+    const space = await client.echo.createSpace();
+    onDone?.(space);
+  };
+
+  return (
+    <div role='none' className='flex flex-col'>
+      <div role='none' className={mx(subduedSurface, 'rounded-bs-md flex items-center p-2 gap-2')}>
+        <h2 id={titleId} className='grow font-system-medium'>
+          {t('all spaces label')}
+        </h2>
+        <Tooltip content={t('show current space label')} zIndex='z-50'>
+          <Button compact variant='ghost' onClick={onShowCurrent} data-testid='show-current-space'>
+            <CaretRight className={getSize(4)} weight='bold' />
+          </Button>
+        </Tooltip>
+      </div>
+      <div role='region' className={mx(defaultSurface, 'rounded-be-md p-2')}>
+        <ul className='flex flex-col gap-2'>
+          {spaces.map((space) => {
+            const key = space.key.toHex();
+            const listItem = <SpaceListItem key={key} space={space} onClick={() => onDone?.(space)} />;
+            return doneActionParent ? cloneElement(doneActionParent, { key }, listItem) : listItem;
+          })}
+        </ul>
+        <Button className='is-full flex gap-2 mbs-2' compact onClick={handleCreateSpace} data-testid='create-space'>
+          <span>{t('create space label')}</span>
+          <PlusCircle className={getSize(4)} weight='bold' />
+        </Button>
+        {onClickJoinSpace && (
+          <Button
+            className='is-full flex gap-2 mbs-2'
+            compact
+            onClick={() => onClickJoinSpace?.()}
+            data-testid='join-space'
+          >
+            <span>{t('join space label')}</span>
+            <Intersect className={getSize(4)} weight='bold' />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+interface SpacePanelState {
+  activeView: SpaceView;
+}
+
+interface SpacePanelAction {
+  type: 'deselect space' | 'select space';
+}
+
+export const SpacePanel = (props: SpacePanelProps) => {
+  const reducer = (state: SpacePanelState, action: SpacePanelAction) => {
+    const nextState = { ...state };
+    switch (action.type) {
+      case 'deselect space':
+        nextState.activeView = 'space list';
+        break;
+      case 'select space':
+        nextState.activeView = 'current space';
+        break;
+    }
+    return nextState;
+  };
+
+  const [panelState, dispatch] = useReducer(reducer, {
+    activeView: props.initialState ?? 'current space'
+  });
+
+  // TODO(wittjosiah): Use ViewState or similar.
+  return (
+    <>
+      {panelState.activeView === 'current space' ? (
+        <CurrentSpaceView {...props} onShowAll={() => dispatch({ type: 'deselect space' })} />
+      ) : (
+        <SpaceListView {...props} onShowCurrent={() => dispatch({ type: 'select space' })} />
+      )}
+    </>
+  );
+};

package/src/panels/SpacePanel/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './SpacePanel';

package/src/panels/index.ts

@@ -2,4 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './DevicesPanel';
 export * from './IdentityPanel';
+export * from './JoinPanel';
+export * from './SpacePanel';

package/src/styles/dialogStyles.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export const defaultOverlay =
+  'fixed inset-0 backdrop-blur z-50 overflow-auto grid place-items-center p-2 md:p-4 lg:p-8';
+
+export const defaultDialogContent = 'is-full min-is-[260px] max-is-[320px] rounded-md shadow-md backdrop-blur-md';

package/src/styles/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './dialogStyles';
 export * from './panelStyles';
+export * from './invitationStatusStyles';

package/src/styles/invitationStatusStyles.ts

@@ -0,0 +1,42 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Invitation } from '@dxos/client';
+
+export const inactiveBgColor = 'bg-neutral-100 dark:bg-neutral-600';
+export const activeBgColor = 'bg-primary-500 dark:bg-primary-400';
+export const successBgColor = 'bg-success-500 dark:bg-success-400';
+export const errorBgColor = 'bg-error-500 dark:bg-error-400';
+export const cancelledBgColor = 'bg-warning-500 dark:bg-warning-400';
+
+export const inactiveTextColor = 'text-neutral-100 dark:text-neutral-600';
+export const activeTextColor = 'text-primary-400 dark:text-primary-500';
+export const successTextColor = 'text-success-400 dark:text-success-500';
+export const errorTextColor = 'text-error-400 dark:text-error-500';
+export const cancelledTextColor = 'text-warning-400 dark:text-warning-500';
+
+export const inactiveStrokeColor = 'stroke-neutral-100 dark:stroke-neutral-700';
+export const activeStrokeColor = 'stroke-primary-500 dark:stroke-primary-150';
+export const successStrokeColor = 'stroke-success-400 dark:stroke-primary-400';
+export const errorStrokeColor = 'stroke-error-400 dark:stroke-error-500';
+export const cancelledStrokeColor = 'stroke-warning-400 dark:stroke-warning-500';
+
+export const resolvedStrokeColor = (status: Invitation.State) =>
+  status === Invitation.State.ERROR
+    ? errorStrokeColor
+    : status === Invitation.State.CANCELLED || status === Invitation.State.TIMEOUT
+    ? cancelledStrokeColor
+    : successStrokeColor;
+export const resolvedBgColor = (status: Invitation.State) =>
+  status === Invitation.State.ERROR
+    ? errorBgColor
+    : status === Invitation.State.CANCELLED || status === Invitation.State.TIMEOUT
+    ? cancelledBgColor
+    : successBgColor;
+export const resolvedTextColor = (status: Invitation.State) =>
+  status === Invitation.State.ERROR
+    ? errorTextColor
+    : status === Invitation.State.CANCELLED || status === Invitation.State.TIMEOUT
+    ? cancelledTextColor
+    : successTextColor;

package/src/styles/panelStyles.ts

@@ -2,5 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-export const defaultPanel = 'p-2 backdrop-blur-md bg-neutral-50/[.66] dark:bg-neutral-950/[.66]';
+export const defaultSurface = 'bg-neutral-50/[.72] dark:bg-neutral-950/[.72]';
+export const subduedSurface = 'bg-neutral-100/[.66] dark:bg-neutral-900/[.66]';
 export const defaultArrow = 'text-neutral-50/[.66] dark:text-neutral-950/[.66]';

package/src/testing/ClientProvider.tsx

@@ -11,7 +11,7 @@ const configProvider = async () => new Config(await Dynamics(), Defaults());
 
 export const ClientProvider = ({ children }: PropsWithChildren<{}>) => {
   return (
-    <NaturalClientProvider config={configProvider} fallback={<span>Starting client…</span>}>
+    <NaturalClientProvider config={configProvider} fallback={() => <span>Starting client…</span>}>
       {children}
     </NaturalClientProvider>
   );

package/src/translations/locales/en-US.ts

@@ -5,5 +5,57 @@
 export const os = {
   'manage profile label': 'Manage identity',
   'identity offline description': 'Offline',
-  'sidebar label': 'DXOS sidebar'
+  'sidebar label': 'DXOS sidebar',
+  'copy invitation code label': 'Copy',
+  'open share panel label': 'Share',
+  'joining heading': '<small>Joining</small><large>{{name}}</large>',
+  'join space heading': 'Join a space',
+  'halo heading': 'Initialize device identity',
+  'exit label': 'Exit',
+  'identity selector title': 'Join as',
+  'identity radio group title': 'Select an identity you’ve associated with this device already',
+  'add identity label': 'Add',
+  'continue label': 'Continue',
+  'back label': 'Back',
+  'next label': 'Next',
+  'close label': 'Close',
+  'auth choices label': 'Choose an identity',
+  'create identity label': 'Create an identity',
+  'create identity description': 'Create a new identity.',
+  'recover identity label': 'Use a seed phrase',
+  'recover identity description': 'Enter your seed phrase to log in manually.',
+  'join identity label': 'Use an authed device',
+  'join identity description': 'Add this device to an identity you’re already logged into on another device.',
+  'deselect identity label': 'Back to identities',
+  'addition method selector title': 'Add an identity to this device',
+  'new identity input label': 'Add a display name',
+  'recover identity input label': 'Type or paste your seed phrase',
+  'failed to create identity message': 'Failed to create an identity.',
+  'failed to recover identity message': 'Failed to recover an identity from the provided seed phrase.',
+  'failed to authenticate message': 'Incorrect PIN.',
+  'identity added label': 'Created identity & added to this device:',
+  'join space as identity heading': '<part>as </part><part><icon/><label>{{labelValue}}</label></part>',
+  'error status label': 'Failed',
+  'timeout status label': 'Timed out',
+  'cancelled status label': 'Cancelled',
+  'init status label': 'Ready to connect',
+  'connecting status label': 'Connecting…',
+  'connected status label': 'Enter confirmation PIN',
+  'authenticating status label': 'Enter confirmation PIN',
+  'success status label': 'Success',
+  'connect label': 'Connect',
+  'reconnect label': 'Reconnect',
+  'cancel label': 'Cancel',
+  'done label': 'Done',
+  'reset label': 'Start over',
+  'auth code input label': 'Auth code provided by the invitation sender',
+  'invitation input label': 'Paste an invitation code or URL',
+  'create space invitation label': 'Invite',
+  'qr label': 'Scan to accept invitation',
+  'empty invitations message': 'No pending invitations',
+  'show all spaces label': 'All spaces',
+  'all spaces label': 'All spaces',
+  'create space label': 'Create a new space',
+  'join space label': 'Join a space',
+  'show current space label': 'Current space'
 };

package/src/util/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './invitationStatusValue';

package/src/util/invitationStatusValue.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Invitation } from '@dxos/client';
+
+/**
+ * This map assigns a numeric value to invitation states to facilitate
+ * more terse code which uses combinations of `>`, `<`, and `=` instead of
+ * longer sequences of `===` and `||` predicates.
+ */
+export const invitationStatusValue = new Map<Invitation.State, number>([
+  [Invitation.State.ERROR, -3],
+  [Invitation.State.TIMEOUT, -2],
+  [Invitation.State.CANCELLED, -1],
+  [Invitation.State.INIT, 0],
+  [Invitation.State.CONNECTING, 1],
+  [Invitation.State.CONNECTED, 2],
+  [Invitation.State.AUTHENTICATING, 3],
+  [Invitation.State.SUCCESS, 4]
+]);

package/theme-extensions.js

@@ -0,0 +1,11 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+module.exports = {
+  osThemeExtension: {
+    spacing: {
+      sidebar: '272px'
+    }
+  }
+};

package/dist/types/src/components/IdentityListItem/IdentityListItem.d.ts

@@ -1,6 +0,0 @@
-import { Profile, SpaceMember } from '@dxos/client';
-export declare const IdentityListItem: ({ identity, presence }: {
-    identity: Profile;
-    presence?: SpaceMember.PresenceState | undefined;
-}) => JSX.Element;
-//# sourceMappingURL=IdentityListItem.d.ts.map

package/dist/types/src/components/IdentityListItem/IdentityListItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IdentityListItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/IdentityListItem/IdentityListItem.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGpD,eAAO,MAAM,gBAAgB;cAAwC,OAAO;;iBAuB3E,CAAC"}

package/dist/types/src/components/IdentityListItem/IdentityListItem.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IdentityListItem.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/IdentityListItem/IdentityListItem.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;;;;;;;AAIpB,wBAEE;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;CAUnB,CAAC"}