@sphereon/ui-components.ssi-react-native 0.1.3-next.13 → 0.1.3-next.16

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

@@ -1,6 +1,6 @@
-import { ImageAttributes } from '@sphereon/ui-components.core';
 import { FC } from 'react';
 import { ColorValue, ViewStyle } from 'react-native';
+import { ImageAttributes } from '@sphereon/ui-components.core';
 type Props = {
     logo?: ImageAttributes;
     size?: number;

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

@@ -1,6 +1,6 @@
-import { calculateAspectRatio, logoColors } from '@sphereon/ui-components.core';
 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;

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

@@ -4,7 +4,7 @@ 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, aspectRatio: 1 }]}>
+    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}/>

package/dist/components/views/{SSICardView → SSICredentialCardView}/index.d.ts

@@ -29,5 +29,5 @@ type Props = {
     footer?: CardFooter;
     display?: CardDisplay;
 };
-declare const SSICardView: FC<Props>;
-export default SSICardView;
+declare const SSICredentialCardView: FC<Props>;
+export default SSICredentialCardView;

package/dist/components/views/{SSICardView → SSICredentialCardView}/index.js

@@ -1,16 +1,15 @@
 import React from 'react';
 import { View } from 'react-native';
-import FastImage from 'react-native-fast-image';
-import { backgroundColors, credentialCardColors, Localization, toLocalDateString, } from '@sphereon/ui-components.core';
-import { SSIAlphaContainerStyled as AlphaContainer, SSIBlurredContainerStyled as BlurredView, SSICardViewContainerStyled as Container, SSICardViewContentMainContainerStyled as ContentMainContainer, SSICardViewContentSubContainerStyled as ContentSubContainer, SSICardViewSSICredentialStatusStyled as CredentialStatusContainer, SSICardViewCredentialSubtitleTextStyled as CredentialSubtitleText, SSICardViewCredentialTitleTextStyled as CredentialTitleText, SSITextH5LightStyled as ExpirationDateText, SSICardViewFooterContainerStyled as FooterContainer, SSICardViewFooterContentContainerStyled as FooterContentContainer, SSITextH4LightStyled as H4Text, SSICardViewHeaderContainerStyled as HeaderContainer, SSICardViewContentIssueNameContainerStyled as IssueNameContainer, SSICardViewHeaderLogoContainerStyled as LogoContainer, SSICardViewContentPropertiesContainerStyled as PropertiesContainer, SSITextH6LightStyled as PropertyValueText, SSICardViewHeaderTitleContainerStyled as TitleContainer, } from '../../../styles/components';
+import { backgroundColors, credentialCardColors, Localization, toLocalDateString } from '@sphereon/ui-components.core';
 import SSILogo from '../../assets/logos/SSILogo';
 import SSIStatusLabel from '../../labels/SSIStatusLabel';
-const SSICardView = (props) => {
+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/components';
+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 = { uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=' }, textColor = backgroundColors.primaryLight, } = props.display ?? {};
+    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 }),
@@ -21,12 +20,13 @@ const SSICardView = (props) => {
       </View>));
     };
     return (<Container style={{ backgroundColor }}>
-      <FastImage style={{ flex: 1 }} source={backgroundImage} resizeMode="cover">
+      <BackgroundImage source={backgroundImage}>
         <AlphaContainer>
           {header && (<HeaderContainer>
-              <LogoContainer>
-                <SSILogo logo={logo} color={textColor}/>
-              </LogoContainer>
+              {(!backgroundImage || logo) &&
+                <LogoContainer>
+                    <SSILogo logo={logo} color={textColor}/>
+                  </LogoContainer>}
               {credentialTitle && (<TitleContainer>
                   <CredentialTitleText style={{ color: textColor }} numberOfLines={2}>
                     {credentialTitle}
@@ -50,14 +50,14 @@ const SSICardView = (props) => {
                 ? `${Localization.translate('credential_card_expires_message')} ${toLocalDateString(expirationDate)}`
                 : Localization.translate('credential_status_never_expires_date_label')}
                   </ExpirationDateText>
-                  {credentialStatus && (<CredentialStatusContainer>
+                  {credentialStatus && (<StatusContainer>
                       {credentialStatus && <SSIStatusLabel status={credentialStatus} color={textColor}/>}
-                    </CredentialStatusContainer>)}
+                    </StatusContainer>)}
                 </FooterContentContainer>
               </BlurredView>
             </FooterContainer>)}
         </AlphaContainer>
-      </FastImage>
+      </BackgroundImage>
     </Container>);
 };
-export default SSICardView;
+export default SSICredentialCardView;

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,14 @@
+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/components';
+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,7 +1,8 @@
 import SSIStatusLabel from './components/labels/SSIStatusLabel';
-import SSICardView from './components/views/SSICardView';
+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';
-export { SSICardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo };
+export { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo };

package/dist/index.js

@@ -1,7 +1,8 @@
 import SSIStatusLabel from './components/labels/SSIStatusLabel';
-import SSICardView from './components/views/SSICardView';
+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';
-export { SSICardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo };
+export { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo };

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

@@ -0,0 +1,18 @@
+/// <reference types="styled-components-react-native" />
+/// <reference types="react" />
+export declare const SSICredentialCardViewContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, any, {}, never>;
+export declare const SSICredentialCardViewHeaderContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, any, {}, never>;
+export declare const SSICredentialCardViewHeaderLogoContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
+export declare const SSICredentialCardViewHeaderTitleContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
+export declare const SSICredentialCardViewContentMainContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
+export declare const SSICredentialCardViewContentSubContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
+export declare const SSICredentialCardViewContentIssueNameContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
+export declare const SSICredentialCardViewContentPropertiesContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, any, {}, never>;
+export declare const SSICredentialCardViewFooterContentContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, any, {}, never>;
+export declare const SSICredentialCardViewFooterContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
+export declare const SSICredentialCardViewCredentialTitleTextStyled: import("styled-components").StyledComponent<typeof import("react-native").Text, any, {}, never>;
+export declare const SSICredentialCardViewCredentialSubtitleTextStyled: import("styled-components").StyledComponent<typeof import("react-native").Text, any, {}, never>;
+export declare const SSICredentialCardViewStatusContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,6 @@
+/// <reference types="styled-components-react-native" />
+/// <reference types="react" />
+export declare const SSICredentialMiniCardViewContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").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

@@ -0,0 +1,15 @@
+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/index.d.ts

@@ -1,2 +1,3 @@
-export * from './SSICardView';
+export * from './SSICredentialCardView';
+export * from './SSICredentialMiniCardView';
 export * from './SSIStatusLabel';

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

@@ -1,2 +1,3 @@
-export * from './SSICardView';
+export * from './SSICredentialCardView';
+export * from './SSICredentialMiniCardView';
 export * from './SSIStatusLabel';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react-native",
   "private": false,
-  "version": "0.1.3-next.13+433837d",
+  "version": "0.1.3-next.16+40041e4",
   "description": "SSI UI components for React-Native",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@react-native-community/blur": "^4.3.0",
-    "@sphereon/ui-components.core": "0.1.3-next.13+433837d",
+    "@sphereon/ui-components.core": "0.1.3-next.16+40041e4",
     "react-native-fast-image": "^8.6.3",
     "react-native-size-matters": "^0.4.0",
     "react-native-svg": "13.4.0",
@@ -46,5 +46,5 @@
     "react": ">= 16.8.0",
     "react-native": ">= 0.64.0"
   },
-  "gitHead": "433837da5d60749a8c05d7587eaf07619f74d89d"
+  "gitHead": "40041e40ea53c6df6d736c79fb81e9f4792439af"
 }

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

@@ -1,14 +0,0 @@
-/// <reference types="styled-components-react-native" />
-export declare const SSICardViewContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, any, {}, never>;
-export declare const SSICardViewHeaderContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, any, {}, never>;
-export declare const SSICardViewHeaderLogoContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
-export declare const SSICardViewHeaderTitleContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
-export declare const SSICardViewContentMainContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
-export declare const SSICardViewContentSubContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
-export declare const SSICardViewContentIssueNameContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
-export declare const SSICardViewContentPropertiesContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, any, {}, never>;
-export declare const SSICardViewFooterContentContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, any, {}, never>;
-export declare const SSICardViewFooterContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
-export declare const SSICardViewCredentialTitleTextStyled: import("styled-components").StyledComponent<typeof import("react-native").Text, any, {}, never>;
-export declare const SSICardViewCredentialSubtitleTextStyled: import("styled-components").StyledComponent<typeof import("react-native").Text, any, {}, never>;
-export declare const SSICardViewSSICredentialStatusStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;

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

@@ -1,52 +0,0 @@
-import styled from 'styled-components/native';
-import { SSIFlexDirectionRowViewStyled, SSIRoundedContainerStyled } from '../../containers';
-import { SSITextH4SemiBoldLightStyled, SSITextH5LightStyled } from '../../fonts';
-export const SSICardViewContainerStyled = styled(SSIRoundedContainerStyled) `
-  width: 327px;
-  height: 186px;
-`;
-export const SSICardViewHeaderContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
-  height: 32px;
-  margin-top: 16px;
-`;
-export const SSICardViewHeaderLogoContainerStyled = styled.View `
-  margin-left: 9px;
-  margin-right: 12px;
-`;
-export const SSICardViewHeaderTitleContainerStyled = styled.View `
-  flex: 1;
-  margin: 0px 13px 0px auto;
-`;
-export const SSICardViewContentMainContainerStyled = styled.View `
-  flex: 1;
-`;
-export const SSICardViewContentSubContainerStyled = styled.View `
-  margin-top: auto;
-`;
-export const SSICardViewContentIssueNameContainerStyled = styled.View `
-  padding: 2px 9px 2px 12px;
-`;
-export const SSICardViewContentPropertiesContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
-  justify-content: flex-start;
-  margin: 1px 0px 1px 0px;
-  padding: 2px 9px 4px 12px;
-`;
-export const SSICardViewFooterContentContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
-  padding: 11px 12px 11px 12px;
-  background-color: transparent;
-`;
-export const SSICardViewFooterContainerStyled = styled.View `
-  height: 39px; // 39
-  margin-top: auto;
-  overflow: hidden;
-`;
-export const SSICardViewCredentialTitleTextStyled = styled(SSITextH4SemiBoldLightStyled) `
-  flex: 1;
-  text-align: right;
-`;
-export const SSICardViewCredentialSubtitleTextStyled = styled(SSITextH5LightStyled) `
-  text-align: right;
-`;
-export const SSICardViewSSICredentialStatusStyled = styled.View `
-  margin-left: auto;
-`;