@sphereon/ui-components.ssi-react-native 0.2.1-unstable.8 → 0.2.1-unstable.86

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react-native",
   "private": false,
-  "version": "0.2.1-unstable.8+97f28d8",
+  "version": "0.2.1-unstable.86+4f37b20",
   "description": "SSI UI components for React-Native",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -29,24 +29,22 @@
   },
   "dependencies": {
     "@react-native-community/blur": "^4.4.0",
-    "@react-native-masked-view/masked-view": "0.3.1",
-    "@sphereon/ui-components.core": "0.2.1-unstable.8+97f28d8",
-    "expo-linear-gradient": "~12.7.2",
+    "@react-native-masked-view/masked-view": "^0.3.1",
+    "@sphereon/ui-components.core": "0.2.1-unstable.86+4f37b20",
+    "expo-linear-gradient": "~13.0.2",
     "react-native-fast-image": "^8.6.3",
-    "react-native-size-matters": "^0.4.0",
-    "react-native-svg": "14.1.0",
-    "styled-components": "^5.3.3"
+    "react-native-size-matters": "^0.4.2",
+    "react-native-svg": "15.2.0",
+    "styled-components": "^6.1.12"
   },
   "devDependencies": {
-    "@types/react": "~18.2.67",
-    "@types/react-native": "0.73.0",
-    "@types/styled-components": "^5.1.15",
-    "@types/styled-components-react-native": "^5.1.2",
-    "typescript": "4.9.5"
+    "@types/react": "~18.2.79",
+    "expo": "^51.0.22",
+    "typescript": "~5.3.3"
   },
   "peerDependencies": {
     "react": ">= 18",
-    "react-native": "~0.73.6"
+    "react-native": "~0.74.3"
   },
-  "gitHead": "97f28d8d19895339b6834e6fc793d774ecce88ae"
+  "gitHead": "4f37b208cf3a2e90a109d7e76b174a2ed674b466"
 }

package/dist/components/assets/badges/SSICheckmarkBadge/index.d.ts

@@ -1,9 +0,0 @@
-import { FC } from 'react';
-import { ColorValue } from 'react-native';
-type Props = {
-    size?: number;
-    color?: ColorValue;
-    backgroundColor?: ColorValue;
-};
-declare const SSICheckmarkBadge: FC<Props>;
-export default SSICheckmarkBadge;

package/dist/components/assets/badges/SSICheckmarkBadge/index.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import Svg, { Circle, Path } from 'react-native-svg';
-import { fontColors, statusColors } from '@sphereon/ui-components.core';
-const SSICheckmarkBadge = (props) => {
-    const { size = 15, color = fontColors.light, backgroundColor = statusColors.valid } = props;
-    return (<View style={{ width: size, aspectRatio: 1 }}>
-      <Svg width="100%" height="100%" viewBox="0 0 15 15" fill="none">
-        <Circle cx="7.5" cy="7.5" r="7.5" fill={backgroundColor}/>
-        <Path d="M5.91233 11.0361H5.9092C5.84998 11.0357 5.79144 11.0236 5.73697 11.0005C5.6825 10.9774 5.63319 10.9437 5.59192 10.9015L3.13412 8.38546C3.09155 8.34399 3.05776 8.29447 3.03473 8.23981C3.0117 8.18516 2.99989 8.12647 3 8.06722C3.00011 8.00796 3.01214 7.94932 3.03538 7.89475C3.05862 7.84018 3.09259 7.79079 3.13531 7.74947C3.17803 7.70815 3.22863 7.67575 3.28412 7.65417C3.33962 7.63259 3.3989 7.62226 3.45847 7.6238C3.51804 7.62534 3.5767 7.63871 3.63099 7.66312C3.68529 7.68754 3.73413 7.72251 3.77463 7.76597L5.91665 9.95833L10.9927 4.91088C11.077 4.82993 11.1898 4.78514 11.307 4.78615C11.4242 4.78716 11.5363 4.8339 11.6191 4.91629C11.702 4.99869 11.749 5.11015 11.75 5.22667C11.751 5.34319 11.706 5.45544 11.6246 5.53926L6.22827 10.9059C6.14448 10.9893 6.03084 11.0361 5.91233 11.0361Z" fill={color}/>
-      </Svg>
-    </View>);
-};
-export default SSICheckmarkBadge;

package/dist/components/assets/badges/SSIExclamationMarkBadge/index.d.ts

@@ -1,9 +0,0 @@
-import { FC } from 'react';
-import { ColorValue } from 'react-native';
-type Props = {
-    size?: number;
-    color?: ColorValue;
-    backgroundColor?: ColorValue;
-};
-declare const SSIExclamationMarkBadge: FC<Props>;
-export default SSIExclamationMarkBadge;

package/dist/components/assets/badges/SSIExclamationMarkBadge/index.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import Svg, { Circle, Path } from 'react-native-svg';
-import { fontColors, statusColors } from '@sphereon/ui-components.core';
-const SSIExclamationMarkBadge = (props) => {
-    const { size = 15, color = fontColors.light, backgroundColor = statusColors.error } = props;
-    return (<View style={{ width: size, aspectRatio: 1 }}>
-      <Svg width="100%" height="100%" viewBox="0 0 15 15" fill="none">
-        <Circle cx="7.5" cy="7.5" r="7.5" fill={backgroundColor}/>
-        <Path fill-rule="evenodd" clip-rule="evenodd" d="M6.78571 3.48218C6.78571 3.33429 6.94559 3.21429 7.14279 3.21429H7.8572C8.05439 3.21429 8.21428 3.33429 8.21428 3.48218V9.37504C8.21428 9.52293 8.05439 9.64283 7.8572 9.64283H7.14279C6.94559 9.64283 6.78571 9.52292 6.78571 9.37504V3.48218ZM6.78571 10.9822C6.78571 10.8342 6.94559 10.7143 7.14279 10.7143H7.8572C8.05439 10.7143 8.21428 10.8342 8.21428 10.9822V11.5178C8.21428 11.6657 8.05439 11.7857 7.8572 11.7857H7.14279C6.94559 11.7857 6.78571 11.6657 6.78571 11.5178V10.9822Z" fill={color}/>
-      </Svg>
-    </View>);
-};
-export default SSIExclamationMarkBadge;

package/dist/components/assets/logos/SSILogo/index.d.ts

@@ -1,11 +0,0 @@
-import { FC } from 'react';
-import { ColorValue, ViewStyle } from 'react-native';
-import { ImageAttributes } from '@sphereon/ui-components.core';
-type Props = {
-    logo?: ImageAttributes;
-    size?: number;
-    color?: ColorValue;
-    style?: ViewStyle;
-};
-declare const SSILogo: FC<Props>;
-export default SSILogo;

package/dist/components/assets/logos/SSILogo/index.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import FastImage from 'react-native-fast-image';
-import { calculateAspectRatio, logoColors } from '@sphereon/ui-components.core';
-import SSIPlaceholderLogo from '../SSIPlaceholderLogo';
-const SSILogo = (props) => {
-    const { logo, color = logoColors.default, size = 32, style } = props;
-    const source = { ...logo, priority: FastImage.priority.high };
-    return logo ? (<FastImage style={{
-            ...style,
-            ...(logo?.dimensions && { aspectRatio: calculateAspectRatio(logo?.dimensions.width, logo?.dimensions.height) }),
-            height: size,
-        }} resizeMode={FastImage.resizeMode.contain} source={source}/>) : (<SSIPlaceholderLogo style={style} size={size} color={color}/>);
-};
-export default SSILogo;

package/dist/components/assets/logos/SSIPlaceholderLogo/index.d.ts

@@ -1,9 +0,0 @@
-import { FC } from 'react';
-import { ColorValue, ViewStyle } from 'react-native';
-type Props = {
-    size?: number;
-    color?: ColorValue;
-    style?: ViewStyle;
-};
-declare const SSIPlaceholderLogo: FC<Props>;
-export default SSIPlaceholderLogo;

package/dist/components/assets/logos/SSIPlaceholderLogo/index.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import Svg, { Path } from 'react-native-svg';
-import { logoColors } from '@sphereon/ui-components.core';
-const SSIPlaceholderLogo = (props) => {
-    const { color = logoColors.default, size = 32, style } = props;
-    return (<View style={[style, { width: size, height: size }]}>
-      <Svg width="100%" height="100%" viewBox="0 0 32 32" fill="none">
-        <Path d="M15.9997 31.9999C11.7563 31.9999 7.68645 30.3141 4.68603 27.3136C1.68548 24.313 0 20.2435 0 15.9999C0 11.7563 1.68548 7.68669 4.68603 4.68627C7.68657 1.68572 11.7561 0 15.9997 0C20.2433 0 24.3129 1.68572 27.3133 4.68627C30.3139 7.68657 31.9994 11.7563 31.9994 15.9999C31.9947 20.2419 30.3075 24.3089 27.3079 27.3082C24.3083 30.3077 20.2415 31.9949 15.9997 31.9999ZM15.9997 0.914927V0.914691C11.9987 0.914691 8.16186 2.50412 5.33238 5.33317C2.50339 8.1624 0.9139 11.9997 0.9139 16.0005C0.9139 20.0015 2.50333 23.8383 5.33238 26.6678C8.16137 29.4968 11.9983 31.0863 15.9997 31.0863C20.0011 31.0863 23.8375 29.4968 26.667 26.6678C29.496 23.8388 31.0855 20.0018 31.0855 16.0005C31.081 12.0009 29.4901 8.16627 26.662 5.33861C23.834 2.51059 19.9997 0.919705 16.0002 0.915174L15.9997 0.914927Z" fill={color}/>
-        <Path d="M30.1659 10.0545C30.0927 10.0545 30.0205 10.0368 29.9556 10.0028C26.3647 8.13584 21.2781 7.06476 15.9997 7.06476C10.7214 7.06476 5.63448 8.13578 2.04387 10.0028C1.93604 10.0625 1.80862 10.0762 1.6904 10.0405C1.57241 10.0049 1.47355 9.92327 1.41668 9.81378C1.35981 9.70429 1.34966 9.5764 1.38836 9.45936C1.42706 9.34232 1.51154 9.24581 1.62244 9.19177C5.39433 7.23065 10.4993 6.15039 16 6.15039C21.5006 6.15039 26.6056 7.23065 30.3775 9.19177C30.5643 9.28899 30.6604 9.50136 30.6104 9.70594C30.5603 9.91052 30.377 10.0545 30.1663 10.0545L30.1659 10.0545Z" fill={color}/>
-        <Path d="M15.9996 25.848C10.4929 25.848 5.38486 24.7664 1.61726 22.8022C1.39333 22.6856 1.30626 22.4095 1.42282 22.1856C1.53963 21.9617 1.8157 21.8746 2.03964 21.9912C5.62728 23.8614 10.7147 24.9339 15.9997 24.9339C21.2848 24.9339 26.3722 23.8614 29.9598 21.9914V21.9912C30.1838 21.8746 30.4598 21.9617 30.5766 22.1856C30.6932 22.4096 30.6061 22.6856 30.3822 22.8022C26.6146 24.7666 21.5066 25.8481 15.9999 25.8481L15.9996 25.848Z" fill={color}/>
-        <Path d="M15.9995 32.0001C11.3852 32.0001 7.77148 24.9717 7.77148 16.0007C7.77148 7.02959 11.3855 0.0012207 15.9995 0.0012207C20.6136 0.0012207 24.2276 7.02899 24.2276 16.0007C24.2276 24.9723 20.6136 32.0001 15.9995 32.0001ZM15.9995 0.915181C11.9666 0.915181 8.68545 7.68078 8.68545 16.0007C8.68545 24.3205 11.9668 31.0861 15.9995 31.0861C20.0323 31.0861 23.3136 24.3205 23.3136 16.0007C23.3136 7.68078 20.0323 0.915181 15.9995 0.915181Z" fill={color}/>
-        <Path d="M16 31.9998C15.7476 31.9998 15.543 31.795 15.543 31.5425V0.457553C15.543 0.205069 15.7476 0.000488281 16 0.000488281C16.2525 0.000488281 16.4571 0.205069 16.4571 0.457553V31.5425C16.4571 31.6638 16.409 31.7801 16.3233 31.8658C16.2377 31.9514 16.1213 31.9998 16 31.9998V31.9998Z" fill={color}/>
-        <Path d="M31.542 16.4571H0.457065C0.204581 16.4571 0 16.2525 0 16C0 15.7476 0.204581 15.543 0.457065 15.543H31.542C31.7945 15.543 31.9991 15.7476 31.9991 16C31.9991 16.2525 31.7945 16.4571 31.542 16.4571Z" fill={color}/>
-      </Svg>
-    </View>);
-};
-export default SSIPlaceholderLogo;

package/dist/components/buttons/PrimaryButton/index.d.ts

@@ -1,12 +0,0 @@
-import { FC } from 'react';
-import { ColorValue, PressableProps, ViewStyle } from 'react-native';
-export interface Props extends Omit<PressableProps, 'disabled'> {
-    caption: string;
-    onPress: () => void;
-    disabled?: boolean | (() => boolean);
-    backgroundColors?: Array<string>;
-    captionColor?: ColorValue;
-    style?: ViewStyle;
-}
-declare const PrimaryButton: FC<Props>;
-export default PrimaryButton;

package/dist/components/buttons/PrimaryButton/index.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { fontColors, gradientsColors, OpacityStyleEnum } from '@sphereon/ui-components.core';
-import { SSITouchableOpacityButtonFlexRowStyled as Button, SSITextH2LightStyled as ButtonCaption, SSIRoundedCenteredLinearGradientStyled as LinearGradient, } from '../../../styles';
-const PrimaryButton = (props) => {
-    const { captionColor = fontColors.light, backgroundColors = [gradientsColors['100'].secondaryColor, gradientsColors['100'].primaryColor], onPress, style, caption, } = props;
-    const disabled = typeof props.disabled === 'function' ? props.disabled() : props.disabled ?? false;
-    if (backgroundColors.length === 1) {
-        backgroundColors.push(backgroundColors[0]);
-    }
-    return (<Button onPress={onPress} disabled={disabled} activeOpacity={OpacityStyleEnum.DISABLED} style={{
-            ...(disabled && { opacity: OpacityStyleEnum.DISABLED }),
-        }}>
-      <LinearGradient style={{ ...style }} colors={backgroundColors}>
-        <ButtonCaption style={{ color: captionColor }}>{caption}</ButtonCaption>
-      </LinearGradient>
-    </Button>);
-};
-export default PrimaryButton;

package/dist/components/buttons/SecondaryButton/index.d.ts

@@ -1,12 +0,0 @@
-import { FC } from 'react';
-import { ColorValue, PressableProps, ViewStyle } from 'react-native';
-export interface Props extends Omit<PressableProps, 'disabled'> {
-    caption: string;
-    onPress: () => void;
-    disabled?: boolean | (() => boolean);
-    borderColors?: Array<string>;
-    captionColor?: ColorValue;
-    style?: ViewStyle;
-}
-declare const SecondaryButton: FC<Props>;
-export default SecondaryButton;

package/dist/components/buttons/SecondaryButton/index.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import MaskedView from '@react-native-masked-view/masked-view';
-import { fontColors, gradientsColors, OpacityStyleEnum } from '@sphereon/ui-components.core';
-import { SSITouchableOpacityButtonFlexRowStyled as Button, SSITextH2SecondaryButtonStyled as ButtonCaption, SecondaryButtonLinearGradientStyled as LinearGradient, SecondaryButtonMaskContainerStyled as MaskContainer, } from '../../../styles';
-const SecondaryButton = (props) => {
-    const { caption, captionColor = fontColors.secondaryButton, borderColors = [gradientsColors['100'].secondaryColor, gradientsColors['100'].primaryColor], onPress, style, } = props;
-    const disabled = typeof props.disabled === 'function' ? props.disabled() : props.disabled ?? false;
-    if (borderColors.length === 1) {
-        borderColors.push(borderColors[0]);
-    }
-    return (<Button onPress={onPress} disabled={disabled} activeOpacity={OpacityStyleEnum.DISABLED} style={{
-            ...(disabled && { opacity: OpacityStyleEnum.DISABLED }),
-        }}>
-      <MaskedView maskElement={<MaskContainer>
-            <ButtonCaption>{caption}</ButtonCaption>
-          </MaskContainer>}>
-        <LinearGradient style={style} colors={borderColors}>
-          <ButtonCaption style={{ color: captionColor }}>{caption}</ButtonCaption>
-        </LinearGradient>
-      </MaskedView>
-    </Button>);
-};
-export default SecondaryButton;

package/dist/components/indicators/SSIActivityIndicator/index.d.ts

@@ -1,9 +0,0 @@
-import { FC } from 'react';
-import { ColorValue, StyleProp, ViewStyle } from 'react-native';
-type Props = {
-    size?: number | 'small' | 'large';
-    color?: ColorValue;
-    style?: StyleProp<ViewStyle>;
-};
-declare const SSIActivityIndicator: FC<Props>;
-export default SSIActivityIndicator;

package/dist/components/indicators/SSIActivityIndicator/index.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import { ActivityIndicator } from 'react-native';
-import { elementColors } from '@sphereon/ui-components.core';
-const SSIActivityIndicator = (props) => {
-    const { color = elementColors.blue, style, size = 80 } = props;
-    return <ActivityIndicator style={style} size={size} color={color}/>;
-};
-export default SSIActivityIndicator;

package/dist/components/labels/SSIStatusLabel/index.d.ts

@@ -1,11 +0,0 @@
-import { FC } from 'react';
-import { ColorValue, ViewStyle } from 'react-native';
-import { LabelStatus } from '@sphereon/ui-components.core';
-type Props = {
-    status: LabelStatus;
-    showIcon?: boolean;
-    color?: ColorValue;
-    style?: ViewStyle;
-};
-declare const SSIStatusLabel: FC<Props>;
-export default SSIStatusLabel;

package/dist/components/labels/SSIStatusLabel/index.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import { CredentialStatus, IssuerStatus, statusColors, getStatusTranslation } from '@sphereon/ui-components.core';
-import SSICheckmarkBadge from '../../../components/assets/badges/SSICheckmarkBadge';
-import SSIExclamationMarkBadge from '../../../components/assets/badges/SSIExclamationMarkBadge';
-import { SSIStatusLabelBadgeContainer as BadgeContainer, SSIStatusLabelContainerStyled as Container, SSIStatusLabelStatusCaptionStyled as StatusCaption, } from '../../../styles';
-const SSIStatusLabel = (props) => {
-    const { status, color = statusColors[status], style, showIcon = false } = props;
-    return (<Container style={[style, { borderColor: color }]}>
-      {showIcon && <BadgeContainer>{getStatusBadge(status, color)}</BadgeContainer>}
-      <StatusCaption style={{ color }}>{getStatusTranslation(status)}</StatusCaption>
-    </Container>);
-};
-const getStatusBadge = (status, backgroundColor) => {
-    switch (status) {
-        case IssuerStatus.VERIFIED:
-            return <SSICheckmarkBadge backgroundColor={backgroundColor}/>;
-        case IssuerStatus.UNVERIFIED:
-            return <SSIExclamationMarkBadge backgroundColor={backgroundColor}/>;
-        case CredentialStatus.VALID:
-            return <SSICheckmarkBadge backgroundColor={backgroundColor}/>;
-        case CredentialStatus.EXPIRED:
-            return <SSIExclamationMarkBadge backgroundColor={backgroundColor}/>;
-        case CredentialStatus.REVOKED:
-            throw new Error(`${status} not yet implemented`);
-        default:
-            throw new Error(`${status} not supported`);
-    }
-};
-export default SSIStatusLabel;

package/dist/components/views/SSICredentialCardView/index.d.ts

@@ -1,33 +0,0 @@
-import { FC } from 'react';
-import { ColorValue } from 'react-native';
-import { CredentialStatus, ImageAttributes } from '@sphereon/ui-components.core';
-type CardProperty = {
-    name: string;
-    value: string;
-};
-type CardHeader = {
-    credentialTitle?: string;
-    credentialSubtitle?: string;
-    logo?: ImageAttributes;
-};
-type CardBody = {
-    issuerName?: string;
-    properties?: Array<CardProperty>;
-};
-type CardFooter = {
-    expirationDate?: number;
-    credentialStatus?: CredentialStatus;
-};
-type CardDisplay = {
-    backgroundColor?: ColorValue;
-    backgroundImage?: ImageAttributes;
-    textColor?: ColorValue;
-};
-type Props = {
-    header?: CardHeader;
-    body?: CardBody;
-    footer?: CardFooter;
-    display?: CardDisplay;
-};
-declare const SSICredentialCardView: FC<Props>;
-export default SSICredentialCardView;

package/dist/components/views/SSICredentialCardView/index.js

@@ -1,60 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { backgroundColors, credentialCardColors, Localization, toLocalDateString, } from '@sphereon/ui-components.core';
-import SSILogo from '../../assets/logos/SSILogo';
-import SSIStatusLabel from '../../labels/SSIStatusLabel';
-import { SSIAlphaContainerStyled as AlphaContainer, SSICredentialCardViewBackgroundImageStyled as BackgroundImage, SSIBlurredContainerStyled as BlurredView, SSICredentialCardViewContainerStyled as Container, SSICredentialCardViewContentMainContainerStyled as ContentMainContainer, SSICredentialCardViewContentSubContainerStyled as ContentSubContainer, SSICredentialCardViewStatusContainerStyled as StatusContainer, SSICredentialCardViewCredentialSubtitleTextStyled as CredentialSubtitleText, SSICredentialCardViewCredentialTitleTextStyled as CredentialTitleText, SSITextH5LightStyled as ExpirationDateText, SSICredentialCardViewFooterContainerStyled as FooterContainer, SSICredentialCardViewFooterContentContainerStyled as FooterContentContainer, SSITextH4LightStyled as H4Text, SSICredentialCardViewHeaderContainerStyled as HeaderContainer, SSICredentialCardViewContentIssueNameContainerStyled as IssueNameContainer, SSICredentialCardViewHeaderLogoContainerStyled as LogoContainer, SSICredentialCardViewContentPropertiesContainerStyled as PropertiesContainer, SSITextH6LightStyled as PropertyValueText, SSICredentialCardViewHeaderTitleContainerStyled as TitleContainer, } from '../../../styles';
-const SSICredentialCardView = (props) => {
-    const { header, body, footer } = props;
-    const { credentialTitle, credentialSubtitle, logo } = props.header ?? {};
-    const { issuerName, properties } = props.body ?? {};
-    const { credentialStatus, expirationDate } = props.footer ?? {};
-    const { backgroundColor = credentialCardColors.default, backgroundImage, textColor = backgroundColors.primaryLight } = props.display ?? {};
-    const getPropertyElementsFrom = (properties) => {
-        return properties.slice(0, 2).map((property, index) => (<View key={index} style={{
-                ...(properties.length > 1 && { width: 140 }),
-                ...(index > 0 && { marginLeft: 10 }),
-            }}>
-        <H4Text style={{ color: textColor }}>{property.name}</H4Text>
-        <PropertyValueText style={{ color: textColor }}>{property.value}</PropertyValueText>
-      </View>));
-    };
-    return (<Container style={{ backgroundColor }}>
-      <BackgroundImage source={backgroundImage}>
-        <AlphaContainer>
-          {header && (<HeaderContainer>
-              {(!backgroundImage || logo) && (<LogoContainer>
-                  <SSILogo logo={logo} color={textColor}/>
-                </LogoContainer>)}
-              {credentialTitle && (<TitleContainer>
-                  <CredentialTitleText style={{ color: textColor }} numberOfLines={2}>
-                    {credentialTitle}
-                  </CredentialTitleText>
-                  {credentialSubtitle && <CredentialSubtitleText style={{ color: textColor }}>{credentialSubtitle}</CredentialSubtitleText>}
-                </TitleContainer>)}
-            </HeaderContainer>)}
-          {body && (<ContentMainContainer>
-              <ContentSubContainer>
-                {issuerName && (<IssueNameContainer>
-                    <H4Text style={{ color: textColor }}>{issuerName}</H4Text>
-                  </IssueNameContainer>)}
-                {properties && <PropertiesContainer>{getPropertyElementsFrom(properties)}</PropertiesContainer>}
-              </ContentSubContainer>
-            </ContentMainContainer>)}
-          {footer && (<FooterContainer>
-              <BlurredView>
-                <FooterContentContainer>
-                  <ExpirationDateText style={{ color: textColor }}>
-                    {expirationDate
-                ? `${Localization.translate('credential_card_expires_message')} ${toLocalDateString(expirationDate)}`
-                : Localization.translate('credential_status_never_expires_date_label')}
-                  </ExpirationDateText>
-                  {credentialStatus && (<StatusContainer>{credentialStatus && <SSIStatusLabel status={credentialStatus} color={textColor}/>}</StatusContainer>)}
-                </FooterContentContainer>
-              </BlurredView>
-            </FooterContainer>)}
-        </AlphaContainer>
-      </BackgroundImage>
-    </Container>);
-};
-export default SSICredentialCardView;

package/dist/components/views/SSICredentialMiniCardView/index.d.ts

@@ -1,12 +0,0 @@
-import { FC } from 'react';
-import { ColorValue, ViewStyle } from 'react-native';
-import { ImageAttributes } from '@sphereon/ui-components.core';
-type Props = {
-    backgroundImage?: ImageAttributes;
-    backgroundColor?: ColorValue;
-    logo?: ImageAttributes;
-    logoColor?: ColorValue;
-    style?: ViewStyle;
-};
-declare const SSICredentialMiniCardView: FC<Props>;
-export default SSICredentialMiniCardView;

package/dist/components/views/SSICredentialMiniCardView/index.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { credentialCardColors } from '@sphereon/ui-components.core';
-import SSILogo from '../../assets/logos/SSILogo';
-import { SSICredentialMiniCardViewBackgroundImageStyled as BackgroundImage, SSICredentialMiniCardViewContainerStyled as Container, } from '../../../styles';
-const SSICredentialMiniCardView = (props) => {
-    const { backgroundColor = credentialCardColors.default, backgroundImage, logo, logoColor, style } = props;
-    return (<Container style={[style, { backgroundColor }]}>
-      <BackgroundImage source={backgroundImage}>{(!backgroundImage || logo) && <SSILogo logo={logo} color={logoColor}/>}</BackgroundImage>
-    </Container>);
-};
-export default SSICredentialMiniCardView;

package/dist/index.d.ts

@@ -1,12 +0,0 @@
-import SSIStatusLabel from './components/labels/SSIStatusLabel';
-import SSICredentialCardView from './components/views/SSICredentialCardView';
-import SSICredentialMiniCardView from './components/views/SSICredentialMiniCardView';
-import SSICheckmarkBadge from './components/assets/badges/SSICheckmarkBadge';
-import SSIExclamationMarkBadge from './components/assets/badges/SSIExclamationMarkBadge';
-import SSIPlaceholderLogo from './components/assets/logos/SSIPlaceholderLogo';
-import SSILogo from './components/assets/logos/SSILogo';
-import SSIActivityIndicator from './components/indicators/SSIActivityIndicator';
-import PrimaryButton from './components/buttons/PrimaryButton/index';
-import SecondaryButton from './components/buttons/SecondaryButton/index';
-export * from './styles/fonts';
-export { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIActivityIndicator, PrimaryButton, SecondaryButton, };

package/dist/index.js

@@ -1,12 +0,0 @@
-import SSIStatusLabel from './components/labels/SSIStatusLabel';
-import SSICredentialCardView from './components/views/SSICredentialCardView';
-import SSICredentialMiniCardView from './components/views/SSICredentialMiniCardView';
-import SSICheckmarkBadge from './components/assets/badges/SSICheckmarkBadge';
-import SSIExclamationMarkBadge from './components/assets/badges/SSIExclamationMarkBadge';
-import SSIPlaceholderLogo from './components/assets/logos/SSIPlaceholderLogo';
-import SSILogo from './components/assets/logos/SSILogo';
-import SSIActivityIndicator from './components/indicators/SSIActivityIndicator';
-import PrimaryButton from './components/buttons/PrimaryButton/index';
-import SecondaryButton from './components/buttons/SecondaryButton/index';
-export * from './styles/fonts';
-export { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIActivityIndicator, PrimaryButton, SecondaryButton, };

package/dist/styles/components/buttons/index.d.ts

@@ -1,13 +0,0 @@
-import { TouchableOpacity } from 'react-native';
-export declare const SSITouchableOpacityButtonFlexRowStyled: import("styled-components").StyledComponent<typeof TouchableOpacity, any, {}, never>;
-export declare const SSIRoundedCenteredLinearGradientStyled: import("styled-components").StyledComponent<typeof import("expo-linear-gradient").LinearGradient, any, {
-    colors: string[];
-    start: {
-        x: number;
-        y: number;
-    };
-    end: {
-        x: number;
-        y: number;
-    };
-}, "end" | "start" | "colors">;

package/dist/styles/components/buttons/index.js

@@ -1,10 +0,0 @@
-import { TouchableOpacity } from 'react-native';
-import styled from 'styled-components/native';
-import { SSIRoundedLinearGradient } from '../../gradients';
-export const SSITouchableOpacityButtonFlexRowStyled = styled(TouchableOpacity) `
-  flex-direction: row;
-`;
-export const SSIRoundedCenteredLinearGradientStyled = styled(SSIRoundedLinearGradient) `
-  align-items: center;
-  justify-content: center;
-`;

package/dist/styles/components/components/SSICredentialCardView/index.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="styled-components-react-native" />
-/// <reference types="react" />
-export declare const SSICredentialCardViewContainerStyled: import("styled-components").StyledComponent<typeof import("react-native/types/index").View, any, {}, never>;
-export declare const SSICredentialCardViewHeaderContainerStyled: import("styled-components").StyledComponent<typeof import("react-native/types/index").View, any, {}, never>;
-export declare const SSICredentialCardViewHeaderLogoContainerStyled: import("styled-components").StyledComponent<typeof import("react-native/types/index").View, import("styled-components").DefaultTheme, {}, never>;
-export declare const SSICredentialCardViewHeaderTitleContainerStyled: import("styled-components").StyledComponent<typeof import("react-native/types/index").View, import("styled-components").DefaultTheme, {}, never>;
-export declare const SSICredentialCardViewContentMainContainerStyled: import("styled-components").StyledComponent<typeof import("react-native/types/index").View, import("styled-components").DefaultTheme, {}, never>;
-export declare const SSICredentialCardViewContentSubContainerStyled: import("styled-components").StyledComponent<typeof import("react-native/types/index").View, import("styled-components").DefaultTheme, {}, never>;
-export declare const SSICredentialCardViewContentIssueNameContainerStyled: import("styled-components").StyledComponent<typeof import("react-native/types/index").View, import("styled-components").DefaultTheme, {}, never>;
-export declare const SSICredentialCardViewContentPropertiesContainerStyled: import("styled-components").StyledComponent<typeof import("react-native/types/index").View, any, {}, never>;
-export declare const SSICredentialCardViewFooterContentContainerStyled: import("styled-components").StyledComponent<typeof import("react-native/types/index").View, any, {}, never>;
-export declare const SSICredentialCardViewFooterContainerStyled: import("styled-components").StyledComponent<typeof import("react-native/types/index").View, import("styled-components").DefaultTheme, {}, never>;
-export declare const SSICredentialCardViewCredentialTitleTextStyled: import("styled-components").StyledComponent<typeof import("react-native/types/index").Text, any, {}, never>;
-export declare const SSICredentialCardViewCredentialSubtitleTextStyled: import("styled-components").StyledComponent<typeof import("react-native/types/index").Text, any, {}, never>;
-export declare const SSICredentialCardViewStatusContainerStyled: import("styled-components").StyledComponent<typeof import("react-native/types/index").View, import("styled-components").DefaultTheme, {}, never>;
-export declare const SSICredentialCardViewBackgroundImageStyled: import("styled-components").StyledComponent<import("react").ComponentType<import("react-native-fast-image").FastImageProps> & import("react-native-fast-image").FastImageStaticProperties, any, {
-    resizeMode: "cover";
-}, "resizeMode">;

package/dist/styles/components/components/SSICredentialCardView/index.js

@@ -1,57 +0,0 @@
-import styled from 'styled-components/native';
-import FastImage from 'react-native-fast-image';
-import { SSIFlexDirectionRowViewStyled, SSIRoundedContainerStyled } from '../../containers';
-import { SSITextH4SemiBoldLightStyled, SSITextH5LightStyled } from '../../../fonts';
-export const SSICredentialCardViewContainerStyled = styled(SSIRoundedContainerStyled) `
-  width: 327px;
-  height: 186px;
-`;
-export const SSICredentialCardViewHeaderContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
-  height: 32px;
-  margin-top: 16px;
-`;
-export const SSICredentialCardViewHeaderLogoContainerStyled = styled.View `
-  margin: 0 12px 0 9px;
-`;
-export const SSICredentialCardViewHeaderTitleContainerStyled = styled.View `
-  flex: 1;
-  margin: 0 13px 0 auto;
-`;
-export const SSICredentialCardViewContentMainContainerStyled = styled.View `
-  flex: 1;
-`;
-export const SSICredentialCardViewContentSubContainerStyled = styled.View `
-  margin-top: auto;
-`;
-export const SSICredentialCardViewContentIssueNameContainerStyled = styled.View `
-  padding: 2px 9px 2px 12px;
-`;
-export const SSICredentialCardViewContentPropertiesContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
-  justify-content: flex-start;
-  margin: 1px 0;
-  padding: 2px 9px 4px 12px;
-`;
-export const SSICredentialCardViewFooterContentContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
-  padding: 11px 12px;
-  background-color: transparent;
-`;
-export const SSICredentialCardViewFooterContainerStyled = styled.View `
-  height: 39px;
-  margin-top: auto;
-  overflow: hidden;
-`;
-export const SSICredentialCardViewCredentialTitleTextStyled = styled(SSITextH4SemiBoldLightStyled) `
-  flex: 1;
-  text-align: right;
-`;
-export const SSICredentialCardViewCredentialSubtitleTextStyled = styled(SSITextH5LightStyled) `
-  text-align: right;
-`;
-export const SSICredentialCardViewStatusContainerStyled = styled.View `
-  margin-left: auto;
-`;
-export const SSICredentialCardViewBackgroundImageStyled = styled(FastImage).attrs({
-    resizeMode: 'cover',
-}) `
-  flex: 1;
-`;

package/dist/styles/components/components/SSICredentialMiniCardView/index.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="styled-components-react-native" />
-/// <reference types="react" />
-export declare const SSICredentialMiniCardViewContainerStyled: import("styled-components").StyledComponent<typeof import("react-native/types/index").View, import("styled-components").DefaultTheme, {}, never>;
-export declare const SSICredentialMiniCardViewBackgroundImageStyled: import("styled-components").StyledComponent<import("react").ComponentType<import("react-native-fast-image").FastImageProps> & import("react-native-fast-image").FastImageStaticProperties, any, {
-    resizeMode: "cover";
-}, "resizeMode">;

package/dist/styles/components/components/SSICredentialMiniCardView/index.js

@@ -1,15 +0,0 @@
-import styled from 'styled-components/native';
-import FastImage from 'react-native-fast-image';
-export const SSICredentialMiniCardViewContainerStyled = styled.View `
-  width: 75px;
-  height: 50px;
-  border-radius: 4.6px;
-  overflow: hidden;
-`;
-export const SSICredentialMiniCardViewBackgroundImageStyled = styled(FastImage).attrs({
-    resizeMode: 'cover',
-}) `
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-`;

package/dist/styles/components/components/SSIStatusLabel/index.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="styled-components-react-native" />
-export declare const SSIStatusLabelContainerStyled: import("styled-components").StyledComponent<typeof import("react-native/types/index").View, any, {}, never>;
-export declare const SSIStatusLabelStatusCaptionStyled: import("styled-components").StyledComponent<typeof import("react-native/types/index").Text, any, {}, never>;
-export declare const SSIStatusLabelBadgeContainer: import("styled-components").StyledComponent<typeof import("react-native/types/index").View, import("styled-components").DefaultTheme, {}, never>;

package/dist/styles/components/components/SSIStatusLabel/index.js

@@ -1,21 +0,0 @@
-import styled from 'styled-components/native';
-import { SSIFlexDirectionRowViewStyled } from '../../containers';
-import { SSITextH5LightStyled } from '../../../fonts';
-export const SSIStatusLabelContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
-  border-radius: 9px;
-  border-width: 1px;
-  /*
-    React-Native does not have a width: fit-content property to fix this like in the web version,
-    so we need to set align-self to something other than stretch to make the container fit the content
-    when the parent has a flex-grow: 1 CSS property set  
-   */
-  align-self: baseline;
-`;
-export const SSIStatusLabelStatusCaptionStyled = styled(SSITextH5LightStyled) `
-  margin-left: 7px;
-  margin-right: 7px;
-`;
-export const SSIStatusLabelBadgeContainer = styled.View `
-  margin-top: auto;
-  margin-bottom: auto;
-`;

package/dist/styles/components/components/SecondaryButton/index.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="styled-components-react-native" />
-export declare const SecondaryButtonMaskContainerStyled: import("styled-components").StyledComponent<typeof import("react-native/types/index").View, import("styled-components").DefaultTheme, {}, never>;
-export declare const SecondaryButtonLinearGradientStyled: import("styled-components").StyledComponent<typeof import("expo-linear-gradient").LinearGradient, any, {
-    colors: string[];
-    start: {
-        x: number;
-        y: number;
-    };
-    end: {
-        x: number;
-        y: number;
-    };
-}, "end" | "start" | "colors">;