@procivis/one-react-native-components 0.3.27 → 0.3.47

package/src/components/entity/entity-details-with-buttons.tsx

@@ -1,15 +1,13 @@
-import { TrustEntityRoleEnum, TrustEntityStateEnum } from '@procivis/react-native-one-core';
-import { IdentifierListItem } from '@procivis/react-native-one-core/dist/src/identifier';
-import React, { FC, memo, useMemo } from 'react';
+import { IdentifierListItem, TrustEntityRoleEnum, TrustEntityStateEnum } from '@procivis/react-native-one-core';
+import React, { FC, memo } from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 
-import EntityCluster from '../../ui-components/entity/entity-cluster';
-import { EntityNotTrustedIcon, EntityTrustedIcon } from '../../ui-components/icons';
 import { AttributesLabels, EntityLabels, EntityType } from '../../ui-components/screens/nerd-mode-screen';
 import { useAppColorScheme } from '../../ui-components/theme/color-scheme-context';
-import { concatTestID, replaceBreakingHyphens, useIdentifierDetails } from '../../utils';
+import { concatTestID, useIdentifierDetails } from '../../utils';
 import { useTrustEntity } from '../../utils/hooks/core/trust-entity';
 import EntityAttributes from './entity-attributes';
+import EntityDetails from './entity-details';
 import EntityButtons from './EntityButtons';
 
 export type ContextRole = Exclude<TrustEntityRoleEnum, TrustEntityRoleEnum.BOTH>;
@@ -48,50 +46,21 @@ const EntityDetailsWithButtons: FC<EntityDetailsWithButtonsProps> = ({
     (trustEntity.role === TrustEntityRoleEnum.BOTH || trustEntity.role === role),
   );
 
-  const trustEntityName = useMemo(() => {
-    if (!trustEntity || !trusted) {
-      if (identifierDetail?.did) {
-        return replaceBreakingHyphens(identifierDetail.did.did);
-      }
-
-      return role === TrustEntityRoleEnum.ISSUER ? entityLabels.unknownIssuer : entityLabels.unknownVerifier;
-    }
-    return trustEntity.name;
-  }, [entityLabels, role, trustEntity, trusted, identifierDetail]);
-
-  const trustEntitySubline = useMemo(() => {
-    if (!trusted) {
-      return undefined;
-    }
-
-    return `${entityLabels.trusted} • ${trustEntity?.trustAnchor.name}`;
-  }, [trustEntity, trusted, entityLabels.trusted]);
-
-  const trustEntityStatusIcon = useMemo(() => {
-    if (!trusted) {
-      return <EntityNotTrustedIcon testID={concatTestID(testID, 'statusIcon', 'notTrusted')} />;
-    }
-    return <EntityTrustedIcon testID={concatTestID(testID, 'statusIcon', 'trusted')} />;
-  }, [testID, trusted]);
-
   return (
     <View style={{ backgroundColor: colorScheme.nerdView.background }}>
-      <EntityCluster
-        avatar={{
-          avatar: trusted && trustEntity?.logo ? { imageSource: { uri: trustEntity.logo } } : undefined,
-          placeholderText: trusted ? trustEntity?.name.substring(0, 1) : "U",
-          statusIcon: trustEntityStatusIcon,
-          testID: concatTestID(testID, 'avatar'),
+      <EntityDetails
+        identifier={identifier}
+        labels={{
+          unknown: role === TrustEntityRoleEnum.ISSUER ? entityLabels.unknownIssuer : entityLabels.unknownVerifier,
         }}
-        entityName={trustEntityName}
-        subline={trustEntitySubline}
-        sublineColor={trusted ? colorScheme.success : colorScheme.white}
+        role={role}
         testID={testID}
         {...props}
       />
       {trusted && <EntityButtons entity={trustEntity} labels={entityLabels} testID={concatTestID(testID, 'links')} />}
       <EntityAttributes
-        did={trustEntity?.did?.did}
+        certificate={identifierDetail?.certificates?.[0]?.chain}
+        did={identifierDetail?.did?.did}
         trustEntity={trustEntity}
         trusted={trusted}
         labels={attributesLabels}

package/src/components/entity/entity-details.tsx

@@ -1,8 +1,8 @@
-import { TrustEntity, TrustEntityRoleEnum, TrustEntityStateEnum } from '@procivis/react-native-one-core';
-import { IdentifierListItem } from '@procivis/react-native-one-core/dist/src/identifier';
+import { IdentifierCertificateDetail, IdentifierListItem,TrustEntity, TrustEntityRoleEnum, TrustEntityStateEnum } from '@procivis/react-native-one-core';
 import React, { FC, ReactNode, useMemo } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 
+import { AvatarProps } from '../../ui-components';
 import EntityCluster from '../../ui-components/entity/entity-cluster';
 import { EntityNotTrustedIcon, EntityTrustedIcon } from '../../ui-components/icons';
 import { concatTestID, replaceBreakingHyphens, useIdentifierDetails } from '../../utils';
@@ -17,6 +17,8 @@ export type EntityDetailsProps = {
   renderMore?: (trustEntity: TrustEntity) => ReactNode;
   role: Exclude<TrustEntityRoleEnum, TrustEntityRoleEnum.BOTH>;
   style?: StyleProp<ViewStyle>;
+  sublineColor?: string;
+  textColor?: string;
   testID?: string;
 } & (
     | {
@@ -27,52 +29,80 @@ export type EntityDetailsProps = {
     }
   );
 
-const EntityDetails: FC<EntityDetailsProps> = ({ labels, renderMore, role, style, testID, ...props }) => {
-  const { data } = useTrustEntity('identifier' in props ? props.identifier?.id : undefined);
+const getCertificateCommonName = (certificate: IdentifierCertificateDetail): string | undefined => {
+  return certificate.x509Attributes.subject.split(', ').find((s) => s.startsWith('CN'))?.split('=')?.pop();
+}
+
+const EntityDetails: FC<EntityDetailsProps> = ({ labels, renderMore, role, style, testID, sublineColor, textColor, ...props }) => {
+  const { data, isLoading: isLoadingTrustEntity } = useTrustEntity('identifier' in props ? props.identifier?.id : undefined);
   const trustEntity: TrustEntity | undefined = 'entity' in props ? props.entity : data ?? undefined;
-  const { data: identifierDetail } = useIdentifierDetails('identifier' in props ? props.identifier?.id : undefined);
+  const { data: identifierDetail, isLoading: isLoadingIdentifier } = useIdentifierDetails('identifier' in props ? props.identifier?.id : undefined);
 
   const trusted =
     trustEntity &&
     trustEntity.state === TrustEntityStateEnum.ACTIVE &&
     (trustEntity.role === TrustEntityRoleEnum.BOTH || trustEntity.role === role);
 
+  const isLoading = isLoadingIdentifier || isLoadingTrustEntity;
+
+  const avatarProps: AvatarProps | undefined = useMemo(() => {
+    if (isLoading) {
+      return undefined;
+    }
+
+    const avatar = trusted && identifierDetail?.type === 'DID' && trustEntity.logo ? { imageSource: { uri: trustEntity.logo } } : undefined;
+
+    const placeholderText = identifierDetail?.type === 'CERTIFICATE' && identifierDetail.certificates?.[0] ? getCertificateCommonName(identifierDetail.certificates[0])?.substring(0, 1) : 'D';
+
+    const statusIcon = trusted ? 
+      <EntityTrustedIcon testID={concatTestID(testID, 'statusIcon', 'trusted')} /> :
+      <EntityNotTrustedIcon testID={concatTestID(testID, 'statusIcon', 'notTrusted')} />;
+
+    if (trustEntity) {
+      return {
+        avatar,
+        placeholderText: trusted && identifierDetail?.type === 'DID' ? trustEntity.name.substring(0, 1) : placeholderText,
+        statusIcon,
+        testID: concatTestID(testID, 'avatar'),
+      };
+    }
+
+    return {
+      placeholderText,
+      statusIcon,
+    }
+  }, [trustEntity, trusted, identifierDetail, isLoading, testID]);
+
   const trustEntityName = useMemo(() => {
-    if (!trusted) {
-      if (identifierDetail?.did?.did) {
-        return replaceBreakingHyphens(identifierDetail.did.did);
+    if (isLoading) {
+      return '';
+    }
+    if (identifierDetail?.type === 'CERTIFICATE' && identifierDetail.certificates?.[0]) {
+      const commonName = getCertificateCommonName(identifierDetail.certificates[0]);
+      if (commonName) {
+        return commonName;
       }
-      return labels.unknown;
     }
-    return trustEntity.name;
-  }, [labels.unknown, trustEntity, trusted, identifierDetail]);
-
-  const trustEntityStatusIcon = useMemo(() => {
-    if (!trusted) {
-      return <EntityNotTrustedIcon testID={concatTestID(testID, 'statusIcon', 'notTrusted')} />;
+    if (trustEntity) {
+      return trustEntity.name;
+    }
+    if (identifierDetail?.did?.did) {
+      return replaceBreakingHyphens(identifierDetail.did.did);
     }
-    return <EntityTrustedIcon testID={concatTestID(testID, 'statusIcon', 'trusted')} />;
-  }, [testID, trusted]);
+
+    return labels.unknown;
+  }, [labels.unknown, trustEntity, identifierDetail, isLoading]);
 
   return (
     <>
       <EntityCluster
-        avatar={
-          trustEntity
-            ? {
-              avatar: trusted && trustEntity.logo ? { imageSource: { uri: trustEntity.logo } } : undefined,
-              placeholderText: trusted ? trustEntity.name.substring(0, 1) : "U",
-              statusIcon: trustEntityStatusIcon,
-              testID: concatTestID(testID, 'avatar'),
-            }
-            : {
-              statusIcon: trustEntityStatusIcon,
-              placeholderText: "U",
-            }
-        }
+        avatar={avatarProps}
         entityName={trustEntityName}
         style={style}
         testID={testID}
+        textColor={textColor}
+        sublineColor={sublineColor}
+        isLoading={isLoading}
       />
       {trustEntity && renderMore && renderMore(trustEntity)}
     </>

package/src/components/entity/index.ts

@@ -1,3 +1,4 @@
-import EntityDetails, { EntityDetailsLabels, EntityDetailsProps } from './entity-details';
+import type { EntityDetailsLabels, EntityDetailsProps } from './entity-details';
+import EntityDetails from './entity-details';
 
 export { EntityDetails, EntityDetailsLabels, EntityDetailsProps };

package/src/components/history/history-list-item.tsx

@@ -1,5 +1,5 @@
 import { HistoryActionEnum, HistoryEntityTypeEnum, HistoryListItem } from '@procivis/react-native-one-core';
-import React, { FC, useCallback } from 'react';
+import React, { FC, useCallback, useMemo } from 'react';
 
 import { HistoryItemView } from '../../ui-components';
 import { formatTime, useTrustEntity } from '../../utils';
@@ -29,20 +29,24 @@ export const HistoryListItemView: FC<HistoryListItemViewProps> = ({
   labels,
   last,
   onPress,
-  testID
+  testID,
 }) => {
-  const { data: entity } = useTrustEntity(infoLabelMode === 'entity' ? item.target : undefined);
+  const identifierId = infoLabelMode === 'entity' ? item.target : undefined;
+  const { data: trustEntity } = useTrustEntity(identifierId);
 
   const label = `${labels.entityTypes[item.entityType]} ${labels.actions[item.action]}`;
-  let infoLabel;
-  switch (infoLabelMode) {
-    case 'entity':
-      infoLabel = entity?.name;
-      break;
-    case 'associatedLabel':
-      infoLabel = item.name;
-      break;
-  }
+
+  const info = useMemo(() => {
+    switch (infoLabelMode) {
+      case 'entity':
+        return trustEntity?.name;
+      case 'associatedLabel':
+        return item.name;
+      case 'none':
+        return undefined;
+    }
+  }, [infoLabelMode, item, trustEntity]);
+
   const icon = <HistoryListItemIcon item={item} />;
 
   const pressHandler = useCallback(() => {
@@ -53,7 +57,7 @@ export const HistoryListItemView: FC<HistoryListItemViewProps> = ({
     <HistoryItemView
       first={first}
       icon={icon}
-      info={infoLabel}
+      info={info}
       label={label}
       last={last}
       onPress={pressHandler}

package/src/components/proof-request/share-credential.tsx

@@ -70,7 +70,6 @@ export const ShareCredential: FunctionComponent<{
     credential
       ? {
           ...credential,
-          issuerDid: credential?.issuerDid?.id,
           issuer: credential?.issuer?.id,
         }
       : undefined,

package/src/ui-components/blur/index.ts

@@ -1,3 +1,4 @@
-import BlurView, { BlurViewProps } from './blur-view';
+import type { BlurViewProps } from './blur-view';
+import BlurView from './blur-view';
 
 export { BlurView, BlurViewProps };

package/src/ui-components/buttons/hold-button.tsx

@@ -11,7 +11,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
-import { TouchableWithoutFeedback, TouchableWithoutFeedbackRef } from '../accessibility/accessibilityHistoryWrappers';
+import { TouchableOpacity, TouchableOpacityRef } from '../accessibility/accessibilityHistoryWrappers';
 import { Typography } from '../text';
 import { useAppColorScheme } from '../theme';
 
@@ -96,7 +96,7 @@ const Content = ({
 };
 
 interface HoldButtonLayoutedProps extends Omit<HoldButtonProps, 'style'> {
-  ref: React.ForwardedRef<TouchableWithoutFeedbackRef>;
+  ref: React.ForwardedRef<TouchableOpacityRef>;
   width: number;
   height: number;
 }
@@ -182,16 +182,17 @@ const HoldButtonLayouted = ({
         </Animated.View>
       )}
       <View style={styles.pressableLayer}>
-        <TouchableWithoutFeedback
+        <TouchableOpacity
           accessibilityRole="button"
           ref={ref}
           disabled={isFinished || disabled}
           onLongPress={onLongPress}
           onPressIn={isFinished ? undefined : onPressIn}
           onPressOut={isFinished ? undefined : onPressOut}
+          activeOpacity={1}
           {...props}>
           <View style={{ width, height }} />
-        </TouchableWithoutFeedback>
+        </TouchableOpacity>
       </View>
     </>
   );
@@ -202,7 +203,7 @@ const HoldButtonLayouted = ({
  *
  * follows design: https://www.figma.com/design/cCmAyBQrQWCQZuDi85pJfe/Procivis-One-Wallet-Developments-2025?node-id=1-871
  */
-const HoldButton = React.forwardRef<TouchableWithoutFeedbackRef, HoldButtonProps>(
+const HoldButton = React.forwardRef<TouchableOpacityRef, HoldButtonProps>(
   ({ style, disabled, ...props }, ref) => {
     const colorScheme = useAppColorScheme();
 

package/src/ui-components/camera/index.tsx

@@ -1,3 +1,4 @@
-import QRCodeScanner, { QRCodeScannerProps } from './qr-code-scanner';
+import type { QRCodeScannerProps } from './qr-code-scanner';
+import QRCodeScanner from './qr-code-scanner';
 
 export { QRCodeScanner, QRCodeScannerProps };

package/src/ui-components/control/index.ts

@@ -1,4 +1,6 @@
-import { Checkbox, CheckboxProps } from './checkbox';
-import { Switch, SwitchProps } from './switch';
+import type { CheckboxProps } from './checkbox';
+import { Checkbox } from './checkbox';
+import type { SwitchProps } from './switch';
+import { Switch } from './switch';
 
 export { Checkbox, CheckboxProps, Switch, SwitchProps };

package/src/ui-components/credential/card/credential-details-card.tsx

@@ -154,7 +154,7 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
       testID={concatTestID(card.testID, expanded ? 'expanded' : 'collapsed')}>
       <CredentialCard
         {...cardProps}
-        header={{ ...header, accessory: header.accessory ?? CaretIcon }}
+        header={{ ...header, accessory: header.accessory ?? (cardProps.onHeaderPress ? CaretIcon : undefined) }}
         style={[styles.card, cardProps.style]}
       />
       {previewAttributes.length > 0 && (

package/src/ui-components/credential/credential-carousel-images.tsx

@@ -64,17 +64,24 @@ type QrCodeProps = {
   content: string;
   padding?: number;
   testID?: string;
+  onError?: (err: string) => void;
 };
 
-export const QrCode: FC<QrCodeProps> = ({ content, padding, testID }) => {
+export const QrCode: FC<QrCodeProps> = ({ content, padding, testID, onError }) => {
   const qrCodeXml = useMemo(() => {
-    return new QRCode({
-      container: 'svg-viewbox',
-      content,
-      join: true,
-      padding: padding ?? 1,
-    }).svg();
-  }, [content, padding]);
+    try {
+      return new QRCode({
+        container: 'svg-viewbox',
+        content,
+        ecl: 'L',
+        join: true,
+        padding: padding ?? 1,
+      }).svg();
+    } catch (err) {
+      onError && onError(err instanceof Error ? err.message : 'Unknown error occurred.');
+      return null;
+    }
+  }, [content, onError, padding]);
   return <SvgXml height={'100%'} testID={testID} width={'100%'} xml={qrCodeXml} />;
 };
 

package/src/ui-components/entity/entity-cluster.tsx

@@ -1,6 +1,13 @@
-import React, { FunctionComponent, useMemo } from 'react';
+import React, { FunctionComponent, useEffect, useMemo } from 'react';
 import { Platform, StyleSheet, View, ViewProps } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
 
+import { LoaderView, LoaderViewState } from '../../ui-components/loader';
 import { concatTestID } from '../../utils';
 import Typography from '../text/typography';
 import { useAppColorScheme } from '../theme/color-scheme-context';
@@ -13,6 +20,7 @@ export type EntityClusterProps = ViewProps & {
   textColor?: string;
   sublineColor?: string;
   testID?: string;
+  isLoading?: boolean;
 };
 
 // https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=426-25595&mode=design&t=YI1oD2BfBie5HcvJ-0
@@ -24,31 +32,67 @@ const EntityCluster: FunctionComponent<EntityClusterProps> = ({
   style,
   sublineColor,
   testID,
+  isLoading,
   ...viewProps
 }) => {
   const colorScheme = useAppColorScheme();
+  
+  const opacity = useSharedValue<number>(1);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  useEffect(() => {
+    if (!isLoading) {
+      return;
+    }
+    opacity.value = withRepeat(
+      withTiming(0.3, { duration: 1000 }),
+      0,
+      true
+    );
+  }, [opacity, isLoading]);
 
   const avatarProps = useMemo<AvatarProps>(() => {
+    if (isLoading) {
+      return {
+        avatar: {
+          component: 
+            <View style={[styles.loaderWrapper, { backgroundColor: colorScheme.grayDark }]}>
+              <View style={styles.loader}>
+                <LoaderView animate={true} state={LoaderViewState.InProgress} />
+              </View>
+            </View>
+        }
+      }
+    }
     const initials = entityName.split(' ', 3).map((word: string) => word[0]);
     const placeholderText = initials.length > 0 ? initials.join('') : '';
     return {
       ...avatar,
       placeholderText: avatar?.placeholderText ?? placeholderText,
     };
-  }, [avatar, entityName]);
+  }, [avatar, entityName, colorScheme.grayDark, isLoading]);
 
   return (
     <View style={[styles.entity, style]} testID={testID} {...viewProps}>
       <Avatar testID={concatTestID(testID, 'avatar')} {...avatarProps} />
       <View style={styles.labels}>
-        <Typography
-          testID={concatTestID(testID, 'entityName')}
-          color={textColor ?? colorScheme.text}
-          numberOfLines={1}
-          preset="m"
-          style={styles.entityName}>
-          {entityName}
-        </Typography>
+        {isLoading ? (
+          <Animated.View style={[{ backgroundColor: colorScheme.grayDark }, animatedStyle]}>
+            <Typography color={colorScheme.grayDark} />
+          </Animated.View>
+        ) : (
+          <Typography
+            testID={concatTestID(testID, 'entityName')}
+            color={textColor ?? colorScheme.text}
+            numberOfLines={1}
+            preset="m"
+            style={styles.entityName}>
+            {!isLoading ? entityName : undefined}
+          </Typography>
+        )}
         {subline && (
           <View>
             <Typography
@@ -77,6 +121,15 @@ const styles = StyleSheet.create({
     flex: 1,
     marginLeft: 12,
   },
+  loader: {
+    transform: [{scale: 0.5}],
+  },
+  loaderWrapper: {
+    height: 72,
+    paddingLeft: 3,
+    paddingTop: 4,
+    width: 72,
+  }
 });
 
 export default EntityCluster;

package/src/ui-components/entity/index.ts

@@ -1,5 +1,7 @@
-import Avatar, { AvatarProps } from './avatar';
-import EntityCluster, { EntityClusterProps } from './entity-cluster';
+import type { AvatarProps } from './avatar';
+import Avatar from './avatar';
+import type { EntityClusterProps } from './entity-cluster';
+import EntityCluster from './entity-cluster';
 
 export { Avatar, AvatarProps };
 export { EntityCluster, EntityClusterProps };

package/src/ui-components/history/history-details.tsx

@@ -37,7 +37,10 @@ type CredentialDetails = Omit<
 type CredentialCard = Omit<
   CredentialDetailsCardListItemProps,
   'expanded' | 'labels' | 'lastItem' | 'onHeaderPress' | 'onImagePreview'
->;
+> & {
+  /** default: true */
+  headerPressable?: boolean;
+};
 
 export type HistoryDetailsViewProps = {
   assets?: {
@@ -195,7 +198,7 @@ export const HistoryDetailsView: FC<HistoryDetailsViewProps> = ({
             ...props.credentialCard,
             card: {
               ...props.credentialCard.card,
-              onHeaderPress,
+              onHeaderPress: props.credentialCard.headerPressable === false ? undefined : onHeaderPress,
             },
           };
           return (

package/src/ui-components/history/index.ts

@@ -1,7 +1,10 @@
-import DataItem, { DataItemProps } from './data-item';
-import HistoryItemView, { HistoryItemViewProps } from './history-item';
+import type { DataItemProps } from './data-item';
+import DataItem from './data-item';
+import type { HistoryItemViewProps } from './history-item';
+import HistoryItemView from './history-item';
 import HistorySectionHeaderView from './history-section-header';
-import HistorySectionListItem, { HistorySectionListItemProps } from './history-section-list-item';
+import type { HistorySectionListItemProps } from './history-section-list-item';
+import HistorySectionListItem from './history-section-list-item';
 
 export * from './history-details';
 export { DataItem, DataItemProps };

package/src/ui-components/icons/entity.tsx

@@ -30,28 +30,24 @@ export const EntityTrustedIcon: FC<SvgProps> = ({ ...props }) => {
   );
 };
 
-// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=415-5402&t=prmu1s6PuABrPg0l-0
+// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=415-5402&t=8jP7yF4eYj70Gm9A-0
 export const EntityNotTrustedIcon: FC<SvgProps> = ({ ...props }) => {
   const colorScheme = useAppColorScheme();
   return (
-    <Svg width={22} height={20} viewBox="0 0 22 20" fill="none" {...props}>
+    <Svg width={22} height={22} viewBox="0 0 22 22" fill="none" {...props}>
       <Path
-        d="M4.35742 17.9673C3.87598 17.9673 3.45817 17.8621 3.104 17.6519C2.74984 17.4416 2.47591 17.1593 2.28223 16.8052C2.09408 16.451 2 16.0581 2 15.6265C2 15.2059 2.11068 14.8047 2.33203 14.4229L8.75684 3.2251C8.97266 2.83219 9.26318 2.53613 9.62842 2.33691C9.99365 2.1377 10.3755 2.03809 10.7739 2.03809C11.1724 2.03809 11.5514 2.1377 11.9111 2.33691C12.2708 2.5306 12.5641 2.82666 12.791 3.2251L19.2158 14.4229C19.3265 14.611 19.4095 14.8075 19.4648 15.0122C19.5202 15.217 19.5479 15.4217 19.5479 15.6265C19.5479 16.0581 19.451 16.451 19.2573 16.8052C19.0636 17.1593 18.7897 17.4416 18.4355 17.6519C18.0869 17.8621 17.6719 17.9673 17.1904 17.9673H4.35742Z"
-        fill={colorScheme.warning}
+        d="M10.575 20a8.241 8.241 0 01-3.312-.672 8.649 8.649 0 01-2.74-1.851 8.837 8.837 0 01-1.85-2.74A8.242 8.242 0 012 11.425c0-1.173.224-2.277.672-3.312a8.793 8.793 0 014.582-4.59 8.243 8.243 0 013.312-.672c1.18 0 2.286.224 3.32.672a8.766 8.766 0 012.74 1.86 8.667 8.667 0 011.86 2.73 8.243 8.243 0 01.672 3.312 8.243 8.243 0 01-.673 3.312 8.768 8.768 0 01-4.598 4.59 8.241 8.241 0 01-3.312.673z"
+        fill={colorScheme.error}
       />
       <Path
-        d="M10.7744 1.03809C11.3435 1.03817 11.884 1.18254 12.3838 1.45703L12.3848 1.45605C12.386 1.45672 12.3874 1.45831 12.3887 1.45898C12.3908 1.46017 12.3933 1.46072 12.3955 1.46191L12.3945 1.46289C12.9333 1.75557 13.3522 2.19115 13.6582 2.72754L20.0781 13.916L20.1865 14.1162C20.2888 14.3193 20.3712 14.5309 20.4307 14.751C20.5082 15.0377 20.5479 15.331 20.5479 15.627C20.5478 16.2141 20.4144 16.7738 20.1348 17.2852C19.8533 17.7998 19.4512 18.2119 18.9463 18.5117L18.9453 18.5107C18.4159 18.8284 17.818 18.9678 17.1904 18.9678H4.35742C3.72707 18.9678 3.12678 18.8281 2.59375 18.5117C2.08885 18.2119 1.68678 17.7998 1.40527 17.2852L1.39941 17.2744C1.1288 16.765 1.00007 16.2092 1 15.627C1 15.0214 1.16165 14.4473 1.4668 13.9209L7.88965 2.72754C8.1894 2.18833 8.60891 1.75383 9.14941 1.45898C9.65481 1.18331 10.2012 1.03809 10.7744 1.03809Z"
+        d="M10.566 1.85c1.31 0 2.552.25 3.718.755a9.765 9.765 0 013.047 2.068l.321.335a9.671 9.671 0 011.751 2.708 9.244 9.244 0 01.755 3.71c0 1.304-.25 2.544-.755 3.709a9.766 9.766 0 01-5.123 5.112h0a9.242 9.242 0 01-3.705.753 9.244 9.244 0 01-3.706-.754 9.648 9.648 0 01-3.053-2.062l-.003-.002a9.836 9.836 0 01-2.058-3.047A9.242 9.242 0 011 11.425c0-1.304.25-2.544.755-3.71a9.793 9.793 0 015.1-5.11h.001a9.244 9.244 0 013.71-.754z"
         stroke={colorScheme.white}
-        strokeWidth={2}
         strokeOpacity={0.2}
+        strokeWidth={2}
       />
       <Path
-        d="M11.5376 11.5093C11.5265 12.0239 11.2747 12.2812 10.7822 12.2812C10.2786 12.2812 10.0186 12.0267 10.002 11.5176L9.88574 7.33398C9.87467 7.08496 9.95215 6.88021 10.1182 6.71973C10.2842 6.55371 10.5028 6.4707 10.7739 6.4707C11.0396 6.4707 11.2581 6.55371 11.4297 6.71973C11.6012 6.88021 11.6815 7.08773 11.6704 7.34229L11.5376 11.5093Z"
-        fill={colorScheme.black}
-      />
-      <Path
-        d="M11.4961 14.8711C11.2969 15.0482 11.0589 15.1367 10.7822 15.1367C10.5055 15.1367 10.2648 15.0482 10.0601 14.8711C9.86084 14.694 9.76123 14.4671 9.76123 14.1904C9.76123 13.9193 9.86084 13.6924 10.0601 13.5098C10.2593 13.3271 10.5 13.2358 10.7822 13.2358C11.0589 13.2358 11.2969 13.3271 11.4961 13.5098C11.6953 13.6924 11.7949 13.9193 11.7949 14.1904C11.7949 14.4671 11.6953 14.694 11.4961 14.8711Z"
-        fill={colorScheme.black}
+        d="M8.433 14.712a.822.822 0 01-.58.225.773.773 0 01-.557-.225.773.773 0 01-.224-.556c0-.216.077-.398.232-.548l2.167-2.174-2.167-2.159a.768.768 0 01-.232-.547c0-.227.074-.413.224-.557a.773.773 0 01.556-.224c.216 0 .401.072.556.216l2.175 2.167 2.183-2.167a.759.759 0 01.556-.232c.216 0 .399.077.548.232.155.15.232.332.232.548 0 .21-.077.396-.232.556l-2.175 2.167 2.167 2.166c.155.144.232.33.232.556a.759.759 0 01-.232.556.755.755 0 01-.556.225.765.765 0 01-.565-.225l-2.158-2.166-2.15 2.166z"
+        fill={colorScheme.white}
       />
     </Svg>
   )

package/src/ui-components/input/index.ts

@@ -1,6 +1,9 @@
-import RadioGroup, { RadioGroupItem, RadioGroupProps } from './radio-group';
-import SelectionInput, { SelectionInputChoice, SelectionInputProps } from './selection-input';
-import TextInput, { TextInputAccessory, TextInputProps } from './text-input';
+import type { RadioGroupItem, RadioGroupProps } from './radio-group';
+import RadioGroup from './radio-group';
+import type { SelectionInputChoice, SelectionInputProps } from './selection-input';
+import SelectionInput from './selection-input';
+import type { TextInputProps } from './text-input';
+import TextInput, { TextInputAccessory } from './text-input';
 
 export { RadioGroup, RadioGroupItem, RadioGroupProps };
 export { SelectionInput, SelectionInputChoice, SelectionInputProps };

package/src/ui-components/list/index.ts

@@ -1,5 +1,7 @@
-import ListSectionHeader, { ListSectionHeaderProps } from './list-section-header';
-import ListTitleHeader, { ListTitleHeaderProps } from './list-title-header';
+import type { ListSectionHeaderProps } from './list-section-header';
+import ListSectionHeader from './list-section-header';
+import type { ListTitleHeaderProps } from './list-title-header';
+import ListTitleHeader from './list-title-header';
 
 export { ListSectionHeader, ListSectionHeaderProps };
 export { ListTitleHeader, ListTitleHeaderProps };

package/src/ui-components/loader/index.ts

@@ -1,5 +1,7 @@
-import LoaderView, { LoaderViewProps, LoaderViewState } from './loader';
-import LoadingResultScreen, { LoadingResultScreenProps } from './loading-result';
+import type { LoaderViewProps } from './loader';
+import LoaderView, { LoaderViewState } from './loader';
+import type { LoadingResultScreenProps } from './loading-result';
+import LoadingResultScreen from './loading-result';
 
 export { LoaderView, LoaderViewProps, LoaderViewState };
 export { LoadingResultScreen, LoadingResultScreenProps };