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

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+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.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { CredentialStatus, IssuerStatus, statusColors, getStatusTranslation } from '@sphereon/ui-components.core';
-import { SSIStatusLabelBadgeContainer as BadgeContainer, SSIStatusLabelContainerStyled as Container, SSIStatusLabelStatusCaptionStyled as StatusCaption, } from '../../../styles/components';
 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 }]}>

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

@@ -1,15 +1,15 @@
 import React from 'react';
 import { View } from 'react-native';
-import { backgroundColors, credentialCardColors, Localization, toLocalDateString } from '@sphereon/ui-components.core';
+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/components';
+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 { 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 }),
@@ -23,10 +23,9 @@ const SSICredentialCardView = (props) => {
       <BackgroundImage source={backgroundImage}>
         <AlphaContainer>
           {header && (<HeaderContainer>
-              {(!backgroundImage || logo) &&
-                <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,9 +49,7 @@ const SSICredentialCardView = (props) => {
                 ? `${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>)}
+                  {credentialStatus && (<StatusContainer>{credentialStatus && <SSIStatusLabel status={credentialStatus} color={textColor}/>}</StatusContainer>)}
                 </FooterContentContainer>
               </BlurredView>
             </FooterContainer>)}

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

@@ -1,14 +1,11 @@
 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';
+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>);
+      <BackgroundImage source={backgroundImage}>{(!backgroundImage || logo) && <SSILogo logo={logo} color={logoColor}/>}</BackgroundImage>
+    </Container>);
 };
 export default SSICredentialMiniCardView;

package/dist/index.d.ts

@@ -5,4 +5,8 @@ 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 { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, 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

@@ -5,4 +5,8 @@ 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 { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, 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

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

@@ -0,0 +1,10 @@
+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.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native';
 import FastImage from 'react-native-fast-image';
 import { SSIFlexDirectionRowViewStyled, SSIRoundedContainerStyled } from '../../containers';
-import { SSITextH4SemiBoldLightStyled, SSITextH5LightStyled } from '../../fonts';
+import { SSITextH4SemiBoldLightStyled, SSITextH5LightStyled } from '../../../fonts';
 export const SSICredentialCardViewContainerStyled = styled(SSIRoundedContainerStyled) `
   width: 327px;
   height: 186px;

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

@@ -1,5 +1,5 @@
 import styled from 'styled-components/native';
-import FastImage from "react-native-fast-image";
+import FastImage from 'react-native-fast-image';
 export const SSICredentialMiniCardViewContainerStyled = styled.View `
   width: 75px;
   height: 50px;

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

@@ -1,9 +1,15 @@
 import styled from 'styled-components/native';
 import { SSIFlexDirectionRowViewStyled } from '../../containers';
-import { SSITextH5LightStyled } from '../../fonts';
+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;

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

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

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

@@ -0,0 +1,14 @@
+import styled from 'styled-components/native';
+import { SSILinearGradientStyled } from '../../../gradients';
+export const SecondaryButtonMaskContainerStyled = styled.View `
+  background-color: transparent;
+  flex: 1;
+  border-width: 1px;
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
+`;
+export const SecondaryButtonLinearGradientStyled = styled(SSILinearGradientStyled) `
+  align-items: center;
+  justify-content: center;
+`;

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

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

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

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

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

@@ -1,3 +1,3 @@
 export * from './containers';
 export * from './components';
-export * from './fonts';
+export * from './buttons';

package/dist/styles/components/index.js

@@ -1,3 +1,3 @@
 export * from './containers';
 export * from './components';
-export * from './fonts';
+export * from './buttons';

package/dist/styles/{components/fonts → fonts}/index.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="styled-components-react-native" />
+export declare const SSITextH2Styled: import("styled-components").StyledComponent<typeof import("react-native").Text, import("styled-components").DefaultTheme, {}, never>;
+export declare const SSITextH2LightStyled: import("styled-components").StyledComponent<typeof import("react-native").Text, any, {}, never>;
+export declare const SSITextH2SecondaryButtonStyled: import("styled-components").StyledComponent<typeof import("react-native").Text, any, {}, never>;
 export declare const SSITextH4Styled: import("styled-components").StyledComponent<typeof import("react-native").Text, import("styled-components").DefaultTheme, {}, never>;
 export declare const SSITextH4SemiBoldStyled: import("styled-components").StyledComponent<typeof import("react-native").Text, import("styled-components").DefaultTheme, {}, never>;
 export declare const SSITextH4LightStyled: import("styled-components").StyledComponent<typeof import("react-native").Text, any, {}, never>;
@@ -7,3 +10,4 @@ export declare const SSITextH5Styled: import("styled-components").StyledComponen
 export declare const SSITextH5LightStyled: import("styled-components").StyledComponent<typeof import("react-native").Text, any, {}, never>;
 export declare const SSITextH6Styled: import("styled-components").StyledComponent<typeof import("react-native").Text, import("styled-components").DefaultTheme, {}, never>;
 export declare const SSITextH6LightStyled: import("styled-components").StyledComponent<typeof import("react-native").Text, any, {}, never>;
+export declare const Text64Styled: import("styled-components").StyledComponent<typeof import("react-native").Text, import("styled-components").DefaultTheme, {}, never>;

package/dist/styles/{components/fonts → fonts}/index.js

@@ -1,6 +1,19 @@
 import styled from 'styled-components/native';
 import { fontColors } from '@sphereon/ui-components.core';
-import { fontStyle } from '../../typography';
+import { fontStyle } from '../typography';
+export const SSITextH2Styled = styled.Text `
+  font-family: ${fontStyle.h2Regular.fontFamily};
+  font-size: ${fontStyle.h2Regular.fontSize}px;
+  font-weight: ${fontStyle.h2Regular.fontWeight};
+  line-height: ${fontStyle.h2Regular.lineHeight}px;
+  height: auto;
+`;
+export const SSITextH2LightStyled = styled(SSITextH2Styled) `
+  color: ${fontColors.light};
+`;
+export const SSITextH2SecondaryButtonStyled = styled(SSITextH2Styled) `
+  color: ${fontColors.secondaryButton};
+`;
 export const SSITextH4Styled = styled.Text `
   font-family: ${fontStyle.h4Regular.fontFamily};
   font-size: ${fontStyle.h4Regular.fontSize}px;
@@ -41,3 +54,10 @@ export const SSITextH6Styled = styled.Text `
 export const SSITextH6LightStyled = styled(SSITextH6Styled) `
   color: ${fontColors.light};
 `;
+export const Text64Styled = styled.Text `
+  font-family: ${fontStyle.Regular64.fontFamily};
+  font-size: ${fontStyle.Regular64.fontSize}px;
+  font-weight: ${fontStyle.Regular64.fontWeight};
+  line-height: ${fontStyle.Regular64.lineHeight}px;
+  height: auto;
+`;

package/dist/styles/gradients/index.d.ts

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

package/dist/styles/gradients/index.js

@@ -0,0 +1,11 @@
+import { LinearGradient } from 'expo-linear-gradient';
+import styled from 'styled-components/native';
+import { gradientsColors, SSIRoundedEdgesCss } from '@sphereon/ui-components.core';
+export const SSILinearGradientStyled = styled(LinearGradient).attrs(props => ({
+    colors: props?.colors ?? [gradientsColors['100'].secondaryColor, gradientsColors['100'].primaryColor],
+    start: { x: 1, y: 1 },
+    end: { x: 0, y: 0 },
+})) ``;
+export const SSIRoundedLinearGradient = styled(SSILinearGradientStyled) `
+  ${SSIRoundedEdgesCss}
+`;

package/dist/styles/index.d.ts

@@ -0,0 +1,4 @@
+export * from './typography';
+export * from './components';
+export * from './gradients';
+export * from './fonts';

package/dist/styles/index.js

@@ -0,0 +1,4 @@
+export * from './typography';
+export * from './components';
+export * from './gradients';
+export * from './fonts';

package/dist/styles/typography.js

@@ -9,6 +9,7 @@ export const fontSize = {
     600: moderateScale(fontSizes['600']),
     700: moderateScale(fontSizes['700']),
     800: moderateScale(fontSizes['800']),
+    64: moderateScale(fontSizes['64']),
 };
 export const fontStyle = {
     h0SemiBold: {
@@ -83,10 +84,22 @@ export const fontStyle = {
         fontWeight: fontWeight[400],
         lineHeight: lineHeight[100],
     },
+    h7Regular: {
+        fontFamily: 'Poppins',
+        fontSize: fontSize[400],
+        fontWeight: fontWeight[400],
+        lineHeight: lineHeight[400],
+    },
     h7SemiBold: {
         fontFamily: 'Poppins-SemiBold',
         fontSize: fontSize[400],
         fontWeight: fontWeight[600],
         lineHeight: lineHeight[400],
     },
+    Regular64: {
+        fontFamily: 'Poppins',
+        fontSize: fontSize[64],
+        fontWeight: fontWeight[600],
+        lineHeight: lineHeight[64],
+    },
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react-native",
   "private": false,
-  "version": "0.1.3-next.16+40041e4",
+  "version": "0.1.3-next.161+017f20e",
   "description": "SSI UI components for React-Native",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -29,7 +29,9 @@
   },
   "dependencies": {
     "@react-native-community/blur": "^4.3.0",
-    "@sphereon/ui-components.core": "0.1.3-next.16+40041e4",
+    "@react-native-masked-view/masked-view": "^0.3.1",
+    "@sphereon/ui-components.core": "0.1.3-next.161+017f20e",
+    "expo-linear-gradient": "~12.1.2",
     "react-native-fast-image": "^8.6.3",
     "react-native-size-matters": "^0.4.0",
     "react-native-svg": "13.4.0",
@@ -46,5 +48,5 @@
     "react": ">= 16.8.0",
     "react-native": ">= 0.64.0"
   },
-  "gitHead": "40041e40ea53c6df6d736c79fb81e9f4792439af"
+  "gitHead": "017f20e9ee8bbab118ec9df50edeb5b1591b93aa"
 }