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

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

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SSICredentialCardViewBackgroundImageStyled = exports.SSICredentialCardViewStatusContainerStyled = exports.SSICredentialCardViewCredentialSubtitleTextStyled = exports.SSICredentialCardViewCredentialTitleTextStyled = exports.SSICredentialCardViewFooterContainerStyled = exports.SSICredentialCardViewFooterContentContainerStyled = exports.SSICredentialCardViewContentPropertiesContainerStyled = exports.SSICredentialCardViewContentIssueNameContainerStyled = exports.SSICredentialCardViewContentSubContainerStyled = exports.SSICredentialCardViewContentMainContainerStyled = exports.SSICredentialCardViewHeaderTitleContainerStyled = exports.SSICredentialCardViewHeaderLogoContainerStyled = exports.SSICredentialCardViewHeaderContainerStyled = exports.SSICredentialCardViewContainerStyled = void 0;
+const native_1 = __importDefault(require("styled-components/native"));
+const react_native_fast_image_1 = __importDefault(require("react-native-fast-image"));
+const containers_1 = require("../../containers");
+const fonts_1 = require("../../../fonts");
+exports.SSICredentialCardViewContainerStyled = (0, native_1.default)(containers_1.SSIRoundedContainerStyled) `
+  width: 327px;
+  height: 186px;
+`;
+exports.SSICredentialCardViewHeaderContainerStyled = (0, native_1.default)(containers_1.SSIFlexDirectionRowViewStyled) `
+  height: 32px;
+  margin-top: 16px;
+`;
+exports.SSICredentialCardViewHeaderLogoContainerStyled = native_1.default.View `
+  margin: 0 12px 0 9px;
+`;
+exports.SSICredentialCardViewHeaderTitleContainerStyled = native_1.default.View `
+  flex: 1;
+  margin: 0 13px 0 auto;
+`;
+exports.SSICredentialCardViewContentMainContainerStyled = native_1.default.View `
+  flex: 1;
+`;
+exports.SSICredentialCardViewContentSubContainerStyled = native_1.default.View `
+  margin-top: auto;
+`;
+exports.SSICredentialCardViewContentIssueNameContainerStyled = native_1.default.View `
+  padding: 2px 9px 2px 12px;
+`;
+exports.SSICredentialCardViewContentPropertiesContainerStyled = (0, native_1.default)(containers_1.SSIFlexDirectionRowViewStyled) `
+  justify-content: flex-start;
+  margin: 1px 0;
+  padding: 2px 9px 4px 12px;
+`;
+exports.SSICredentialCardViewFooterContentContainerStyled = (0, native_1.default)(containers_1.SSIFlexDirectionRowViewStyled) `
+  padding: 11px 12px;
+  background-color: transparent;
+`;
+exports.SSICredentialCardViewFooterContainerStyled = native_1.default.View `
+  height: 39px;
+  margin-top: auto;
+  overflow: hidden;
+`;
+exports.SSICredentialCardViewCredentialTitleTextStyled = (0, native_1.default)(fonts_1.SSITextH4SemiBoldLightStyled) `
+  flex: 1;
+  text-align: right;
+`;
+exports.SSICredentialCardViewCredentialSubtitleTextStyled = (0, native_1.default)(fonts_1.SSITextH5LightStyled) `
+  text-align: right;
+`;
+exports.SSICredentialCardViewStatusContainerStyled = native_1.default.View `
+  margin-left: auto;
+`;
+exports.SSICredentialCardViewBackgroundImageStyled = (0, native_1.default)(react_native_fast_image_1.default).attrs({
+    resizeMode: 'cover',
+}) `
+  flex: 1;
+`;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const SSICredentialMiniCardViewContainerStyled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const SSICredentialMiniCardViewBackgroundImageStyled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").Substitute<import("styled-components/native/dist/types").Substitute<import("styled-components/native/dist/types").Substitute<import("react-native-fast-image").FastImageProps | (import("react-native-fast-image").FastImageProps & import("react").RefAttributes<import("react").Component<import("react-native-fast-image").FastImageProps, any, any>>), import("react-native-fast-image").FastImageProps & import("react").RefAttributes<import("react").Component<import("react-native-fast-image").FastImageProps, any, any>>>, import("styled-components/native/dist/types").BaseObject> | import("styled-components/native/dist/types").Substitute<import("styled-components/native/dist/types").Substitute<import("react-native-fast-image").FastImageProps | (import("react-native-fast-image").FastImageProps & import("react").RefAttributes<import("react").Component<import("react-native-fast-image").FastImageProps, any, any>>), import("react-native-fast-image").FastImageProps>, import("styled-components/native/dist/types").BaseObject>, import("styled-components/native/dist/types").BaseObject>>;

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

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SSICredentialMiniCardViewBackgroundImageStyled = exports.SSICredentialMiniCardViewContainerStyled = void 0;
+const native_1 = __importDefault(require("styled-components/native"));
+const react_native_fast_image_1 = __importDefault(require("react-native-fast-image"));
+exports.SSICredentialMiniCardViewContainerStyled = native_1.default.View `
+  width: 75px;
+  height: 50px;
+  border-radius: 4.6px;
+  overflow: hidden;
+`;
+exports.SSICredentialMiniCardViewBackgroundImageStyled = (0, native_1.default)(react_native_fast_image_1.default).attrs({
+    resizeMode: 'cover',
+}) `
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+`;

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

@@ -0,0 +1,3 @@
+export declare const SSIStatusLabelContainerStyled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>, never>>;
+export declare const SSIStatusLabelStatusCaptionStyled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<import("styled-components/native/dist/types").FastOmit<import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>, never>, never>>;
+export declare const SSIStatusLabelBadgeContainer: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;

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

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SSIStatusLabelBadgeContainer = exports.SSIStatusLabelStatusCaptionStyled = exports.SSIStatusLabelContainerStyled = void 0;
+const native_1 = __importDefault(require("styled-components/native"));
+const containers_1 = require("../../containers");
+const fonts_1 = require("../../../fonts");
+exports.SSIStatusLabelContainerStyled = (0, native_1.default)(containers_1.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;
+`;
+exports.SSIStatusLabelStatusCaptionStyled = (0, native_1.default)(fonts_1.SSITextH5LightStyled) `
+  margin-left: 7px;
+  margin-right: 7px;
+`;
+exports.SSIStatusLabelBadgeContainer = native_1.default.View `
+  margin-top: auto;
+  margin-bottom: auto;
+`;

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const SecondaryButtonMaskContainerStyled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const SecondaryButtonLinearGradientStyled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<Omit<import("styled-components/native/dist/types").FastOmit<import("styled-components/native/dist/types").FastOmit<import("styled-components/native/dist/types").Substitute<import("react-native").ViewProps & {
+    colors: readonly string[];
+    locations?: readonly number[] | null | undefined;
+    start?: import("expo-linear-gradient").LinearGradientPoint | null | undefined;
+    end?: import("expo-linear-gradient").LinearGradientPoint | null | undefined;
+    dither?: boolean | undefined;
+} & import("react").RefAttributes<import("expo-linear-gradient").LinearGradient>, import("react-native").ViewProps & {
+    colors: readonly string[];
+    locations?: readonly number[] | null | undefined;
+    start?: import("expo-linear-gradient").LinearGradientPoint | null | undefined;
+    end?: import("expo-linear-gradient").LinearGradientPoint | null | undefined;
+    dither?: boolean | undefined;
+} & import("react").RefAttributes<import("expo-linear-gradient").LinearGradient>>, never>, never>, "ref"> & {
+    ref?: ((instance: import("expo-linear-gradient").LinearGradient | null) => void) | import("react").RefObject<import("expo-linear-gradient").LinearGradient> | null | undefined;
+}, never>>;

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

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SecondaryButtonLinearGradientStyled = exports.SecondaryButtonMaskContainerStyled = void 0;
+const native_1 = __importDefault(require("styled-components/native"));
+const gradients_1 = require("../../../gradients");
+exports.SecondaryButtonMaskContainerStyled = native_1.default.View `
+  background-color: transparent;
+  flex: 1;
+  border-width: 1px;
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
+`;
+exports.SecondaryButtonLinearGradientStyled = (0, native_1.default)(gradients_1.SSILinearGradientStyled) `
+  align-items: center;
+  justify-content: center;
+  padding: 9px;
+  width: 180px;
+`;

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SSICredentialCardView"), exports);
+__exportStar(require("./SSICredentialMiniCardView"), exports);
+__exportStar(require("./SSIStatusLabel"), exports);
+__exportStar(require("./SecondaryButton"), exports);

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

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+export declare const SSIAlphaContainerStyled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const SSIBlurredContainerStyled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").Substitute<import("styled-components/native/dist/types").Substitute<import("styled-components/native/dist/types").Substitute<(Omit<import("react-native").ViewProps & {
+    blurType?: ("dark" | "light" | "regular" | "xlight" | "prominent" | "extraDark" | "chromeMaterial" | "material" | "thickMaterial" | "thinMaterial" | "ultraThinMaterial" | "chromeMaterialDark" | "materialDark" | "thickMaterialDark" | "thinMaterialDark" | "ultraThinMaterialDark" | "chromeMaterialLight" | "materialLight" | "thickMaterialLight" | "thinMaterialLight" | "ultraThinMaterialLight") | undefined;
+    blurAmount?: number | undefined;
+    reducedTransparencyFallbackColor?: string | undefined;
+} & import("react").RefAttributes<import("react-native").View>, "ref"> & {
+    ref?: ((instance: import("react-native").View | null) => void) | import("react").RefObject<import("react-native").View> | null | undefined;
+}) | (Omit<import("react-native").ViewProps & {
+    blurAmount?: number | undefined;
+    blurType?: "dark" | "light" | "xlight" | undefined;
+    blurRadius?: number | undefined;
+    downsampleFactor?: number | undefined;
+    overlayColor?: string | undefined;
+    enabled?: boolean | undefined;
+    autoUpdate?: boolean | undefined;
+} & import("react").RefAttributes<import("react-native").View>, "ref"> & {
+    ref?: ((instance: import("react-native").View | null) => void) | import("react").RefObject<import("react-native").View> | null | undefined;
+}), (Omit<import("react-native").ViewProps & {
+    blurType?: ("dark" | "light" | "regular" | "xlight" | "prominent" | "extraDark" | "chromeMaterial" | "material" | "thickMaterial" | "thinMaterial" | "ultraThinMaterial" | "chromeMaterialDark" | "materialDark" | "thickMaterialDark" | "thinMaterialDark" | "ultraThinMaterialDark" | "chromeMaterialLight" | "materialLight" | "thickMaterialLight" | "thinMaterialLight" | "ultraThinMaterialLight") | undefined;
+    blurAmount?: number | undefined;
+    reducedTransparencyFallbackColor?: string | undefined;
+} & import("react").RefAttributes<import("react-native").View>, "ref"> & {
+    ref?: ((instance: import("react-native").View | null) => void) | import("react").RefObject<import("react-native").View> | null | undefined;
+}) | (Omit<import("react-native").ViewProps & {
+    blurAmount?: number | undefined;
+    blurType?: "dark" | "light" | "xlight" | undefined;
+    blurRadius?: number | undefined;
+    downsampleFactor?: number | undefined;
+    overlayColor?: string | undefined;
+    enabled?: boolean | undefined;
+    autoUpdate?: boolean | undefined;
+} & import("react").RefAttributes<import("react-native").View>, "ref"> & {
+    ref?: ((instance: import("react-native").View | null) => void) | import("react").RefObject<import("react-native").View> | null | undefined;
+})>, import("styled-components/native/dist/types").BaseObject>, import("styled-components/native/dist/types").BaseObject>>;
+export declare const SSIFlexDirectionRowViewStyled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const SSIRoundedContainerStyled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;

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

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SSIRoundedContainerStyled = exports.SSIFlexDirectionRowViewStyled = exports.SSIBlurredContainerStyled = exports.SSIAlphaContainerStyled = void 0;
+const blur_1 = require("@react-native-community/blur");
+const native_1 = __importDefault(require("styled-components/native"));
+const ui_components_core_1 = require("@sphereon/ui-components.core");
+exports.SSIAlphaContainerStyled = native_1.default.View `
+  flex: 1;
+  background-color: rgba(0, 0, 0, 0.2);
+`;
+exports.SSIBlurredContainerStyled = (0, native_1.default)(blur_1.BlurView).attrs({
+    blurType: 'light',
+    blurAmount: 3,
+}) `
+  flex: 1;
+  background-color: rgba(255, 255, 255, 0.25);
+`;
+exports.SSIFlexDirectionRowViewStyled = native_1.default.View `
+  flex-direction: row;
+`;
+exports.SSIRoundedContainerStyled = native_1.default.View `
+  ${ui_components_core_1.SSIRoundedEdgesCss};
+  overflow: hidden;
+`;

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

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

package/dist/styles/components/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./containers"), exports);
+__exportStar(require("./components"), exports);
+__exportStar(require("./buttons"), exports);

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

@@ -0,0 +1,12 @@
+export declare const SSITextH2Styled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>>;
+export declare const SSITextH2LightStyled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>, never>>;
+export declare const SSITextH2SecondaryButtonStyled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>, never>>;
+export declare const SSITextH4Styled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>>;
+export declare const SSITextH4SemiBoldStyled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>>;
+export declare const SSITextH4LightStyled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>, never>>;
+export declare const SSITextH4SemiBoldLightStyled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>, never>>;
+export declare const SSITextH5Styled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>>;
+export declare const SSITextH5LightStyled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>, never>>;
+export declare const SSITextH6Styled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>>;
+export declare const SSITextH6LightStyled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>, never>>;
+export declare const Text64Styled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>>;

package/dist/styles/fonts/index.js

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text64Styled = exports.SSITextH6LightStyled = exports.SSITextH6Styled = exports.SSITextH5LightStyled = exports.SSITextH5Styled = exports.SSITextH4SemiBoldLightStyled = exports.SSITextH4LightStyled = exports.SSITextH4SemiBoldStyled = exports.SSITextH4Styled = exports.SSITextH2SecondaryButtonStyled = exports.SSITextH2LightStyled = exports.SSITextH2Styled = void 0;
+const native_1 = __importDefault(require("styled-components/native"));
+const ui_components_core_1 = require("@sphereon/ui-components.core");
+const typography_1 = require("../typography");
+exports.SSITextH2Styled = native_1.default.Text `
+  font-family: ${typography_1.fontStyle.h2Regular.fontFamily};
+  font-size: ${typography_1.fontStyle.h2Regular.fontSize}px;
+  font-weight: ${typography_1.fontStyle.h2Regular.fontWeight};
+  line-height: ${typography_1.fontStyle.h2Regular.lineHeight}px;
+  height: auto;
+`;
+exports.SSITextH2LightStyled = (0, native_1.default)(exports.SSITextH2Styled) `
+  color: ${ui_components_core_1.fontColors.light};
+`;
+exports.SSITextH2SecondaryButtonStyled = (0, native_1.default)(exports.SSITextH2Styled) `
+  color: ${ui_components_core_1.fontColors.secondaryButton};
+`;
+exports.SSITextH4Styled = native_1.default.Text `
+  font-family: ${typography_1.fontStyle.h4Regular.fontFamily};
+  font-size: ${typography_1.fontStyle.h4Regular.fontSize}px;
+  font-weight: ${typography_1.fontStyle.h4Regular.fontWeight};
+  line-height: ${typography_1.fontStyle.h4Regular.lineHeight}px;
+  height: auto;
+`;
+exports.SSITextH4SemiBoldStyled = native_1.default.Text `
+  font-family: ${typography_1.fontStyle.h4SemiBold.fontFamily};
+  font-size: ${typography_1.fontStyle.h4SemiBold.fontSize}px;
+  font-weight: ${typography_1.fontStyle.h4SemiBold.fontWeight};
+  line-height: ${typography_1.fontStyle.h4SemiBold.lineHeight}px;
+  height: auto;
+`;
+exports.SSITextH4LightStyled = (0, native_1.default)(exports.SSITextH4Styled) `
+  color: ${ui_components_core_1.fontColors.light};
+`;
+exports.SSITextH4SemiBoldLightStyled = (0, native_1.default)(exports.SSITextH4SemiBoldStyled) `
+  color: ${ui_components_core_1.fontColors.light};
+`;
+exports.SSITextH5Styled = native_1.default.Text `
+  font-family: ${typography_1.fontStyle.h5Regular.fontFamily};
+  font-size: ${typography_1.fontStyle.h5Regular.fontSize}px;
+  font-weight: ${typography_1.fontStyle.h5Regular.fontWeight};
+  line-height: ${typography_1.fontStyle.h5Regular.lineHeight}px;
+  height: auto;
+`;
+exports.SSITextH5LightStyled = (0, native_1.default)(exports.SSITextH5Styled) `
+  color: ${ui_components_core_1.fontColors.light};
+`;
+exports.SSITextH6Styled = native_1.default.Text `
+  font-family: ${typography_1.fontStyle.h6.fontFamily};
+  font-size: ${typography_1.fontStyle.h6.fontSize}px;
+  font-weight: ${typography_1.fontStyle.h6.fontWeight};
+  line-height: ${typography_1.fontStyle.h6.lineHeight}px;
+  height: auto;
+`;
+exports.SSITextH6LightStyled = (0, native_1.default)(exports.SSITextH6Styled) `
+  color: ${ui_components_core_1.fontColors.light};
+`;
+exports.Text64Styled = native_1.default.Text `
+  font-family: ${typography_1.fontStyle.Regular64.fontFamily};
+  font-size: ${typography_1.fontStyle.Regular64.fontSize}px;
+  font-weight: ${typography_1.fontStyle.Regular64.fontWeight};
+  line-height: ${typography_1.fontStyle.Regular64.lineHeight}px;
+  height: auto;
+`;

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { LinearGradient } from 'expo-linear-gradient';
+export declare const SSILinearGradientStyled: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<import("styled-components/native/dist/types").FastOmit<import("styled-components/native/dist/types").Substitute<import("react-native").ViewProps & {
+    colors: readonly string[];
+    locations?: readonly number[] | null | undefined;
+    start?: import("expo-linear-gradient").LinearGradientPoint | null | undefined;
+    end?: import("expo-linear-gradient").LinearGradientPoint | null | undefined;
+    dither?: boolean | undefined;
+} & import("react").RefAttributes<LinearGradient>, import("react-native").ViewProps & {
+    colors: readonly string[];
+    locations?: readonly number[] | null | undefined;
+    start?: import("expo-linear-gradient").LinearGradientPoint | null | undefined;
+    end?: import("expo-linear-gradient").LinearGradientPoint | null | undefined;
+    dither?: boolean | undefined;
+} & import("react").RefAttributes<LinearGradient>>, never>, never>>;
+export declare const SSIRoundedLinearGradient: import("styled-components/native").IStyledComponent<"native", import("styled-components/native/dist/types").FastOmit<Omit<import("styled-components/native/dist/types").FastOmit<import("styled-components/native/dist/types").FastOmit<import("styled-components/native/dist/types").Substitute<import("react-native").ViewProps & {
+    colors: readonly string[];
+    locations?: readonly number[] | null | undefined;
+    start?: import("expo-linear-gradient").LinearGradientPoint | null | undefined;
+    end?: import("expo-linear-gradient").LinearGradientPoint | null | undefined;
+    dither?: boolean | undefined;
+} & import("react").RefAttributes<LinearGradient>, import("react-native").ViewProps & {
+    colors: readonly string[];
+    locations?: readonly number[] | null | undefined;
+    start?: import("expo-linear-gradient").LinearGradientPoint | null | undefined;
+    end?: import("expo-linear-gradient").LinearGradientPoint | null | undefined;
+    dither?: boolean | undefined;
+} & import("react").RefAttributes<LinearGradient>>, never>, never>, "ref"> & {
+    ref?: ((instance: LinearGradient | null) => void) | import("react").RefObject<LinearGradient> | null | undefined;
+}, never>>;

package/dist/styles/gradients/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SSIRoundedLinearGradient = exports.SSILinearGradientStyled = void 0;
+const expo_linear_gradient_1 = require("expo-linear-gradient");
+const native_1 = __importDefault(require("styled-components/native"));
+const ui_components_core_1 = require("@sphereon/ui-components.core");
+exports.SSILinearGradientStyled = (0, native_1.default)(expo_linear_gradient_1.LinearGradient).attrs(props => ({
+    colors: props?.colors ?? [ui_components_core_1.gradientsColors['100'].secondaryColor, ui_components_core_1.gradientsColors['100'].primaryColor],
+    start: { x: 1, y: 1 },
+    end: { x: 0, y: 0 },
+})) ``;
+exports.SSIRoundedLinearGradient = (0, native_1.default)(exports.SSILinearGradientStyled) `
+  ${ui_components_core_1.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,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./typography"), exports);
+__exportStar(require("./components"), exports);
+__exportStar(require("./gradients"), exports);
+__exportStar(require("./fonts"), exports);

package/dist/styles/typography.d.ts

@@ -0,0 +1,4 @@
+import { FontStyle, FontSize } from '@sphereon/ui-components.core';
+import { TextStyle } from 'react-native';
+export declare const fontSize: Record<FontSize, number>;
+export declare const fontStyle: Record<FontStyle, TextStyle>;

package/dist/styles/typography.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fontStyle = exports.fontSize = void 0;
+const ui_components_core_1 = require("@sphereon/ui-components.core");
+const react_native_size_matters_1 = require("react-native-size-matters");
+exports.fontSize = {
+    100: (0, react_native_size_matters_1.moderateScale)(ui_components_core_1.fontSize['100']),
+    200: (0, react_native_size_matters_1.moderateScale)(ui_components_core_1.fontSize['200']),
+    300: (0, react_native_size_matters_1.moderateScale)(ui_components_core_1.fontSize['300']),
+    400: (0, react_native_size_matters_1.moderateScale)(ui_components_core_1.fontSize['400']),
+    500: (0, react_native_size_matters_1.moderateScale)(ui_components_core_1.fontSize['500']),
+    600: (0, react_native_size_matters_1.moderateScale)(ui_components_core_1.fontSize['600']),
+    700: (0, react_native_size_matters_1.moderateScale)(ui_components_core_1.fontSize['700']),
+    800: (0, react_native_size_matters_1.moderateScale)(ui_components_core_1.fontSize['800']),
+    64: (0, react_native_size_matters_1.moderateScale)(ui_components_core_1.fontSize['64']),
+};
+exports.fontStyle = {
+    h0SemiBold: {
+        fontFamily: 'Poppins-SemiBold',
+        fontSize: exports.fontSize[800],
+        fontWeight: ui_components_core_1.fontWeight[600],
+        lineHeight: ui_components_core_1.lineHeight[800],
+    },
+    h1SemiBold: {
+        fontFamily: 'Poppins-SemiBold',
+        fontSize: exports.fontSize[700],
+        fontWeight: ui_components_core_1.fontWeight[600],
+        lineHeight: ui_components_core_1.lineHeight[700],
+    },
+    h1Regular: {
+        fontFamily: 'Poppins-Regular',
+        fontSize: exports.fontSize[700],
+        fontWeight: ui_components_core_1.fontWeight[400],
+        lineHeight: ui_components_core_1.lineHeight[700],
+    },
+    h2Regular: {
+        fontFamily: 'Poppins-Regular',
+        fontSize: exports.fontSize[600],
+        fontWeight: ui_components_core_1.fontWeight[400],
+        lineHeight: ui_components_core_1.lineHeight[600],
+    },
+    h2SemiBold: {
+        fontFamily: 'Poppins-SemiBold',
+        fontSize: exports.fontSize[600],
+        fontWeight: ui_components_core_1.fontWeight[600],
+        lineHeight: ui_components_core_1.lineHeight[600],
+    },
+    h3Regular: {
+        fontFamily: 'Poppins-Regular',
+        fontSize: exports.fontSize[500],
+        fontWeight: ui_components_core_1.fontWeight[400],
+        lineHeight: ui_components_core_1.lineHeight[500],
+    },
+    h3SemiBold: {
+        fontFamily: 'Poppins-SemiBold',
+        fontSize: exports.fontSize[500],
+        fontWeight: ui_components_core_1.fontWeight[600],
+        lineHeight: ui_components_core_1.lineHeight[500],
+    },
+    h4Regular: {
+        fontFamily: 'Poppins-Regular',
+        fontSize: exports.fontSize[300],
+        fontWeight: ui_components_core_1.fontWeight[400],
+        lineHeight: ui_components_core_1.lineHeight[300],
+    },
+    h4SemiBold: {
+        fontFamily: 'Poppins-SemiBold',
+        fontSize: exports.fontSize[300],
+        fontWeight: ui_components_core_1.fontWeight[400],
+        lineHeight: ui_components_core_1.lineHeight[300],
+    },
+    h5Regular: {
+        fontFamily: 'Poppins-Regular',
+        fontSize: exports.fontSize[200],
+        fontWeight: ui_components_core_1.fontWeight[400],
+        lineHeight: ui_components_core_1.lineHeight[200],
+    },
+    h5SemiBold: {
+        fontFamily: 'Poppins-SemiBold',
+        fontSize: exports.fontSize[200],
+        fontWeight: ui_components_core_1.fontWeight[600],
+        lineHeight: ui_components_core_1.lineHeight[200],
+    },
+    h6: {
+        fontFamily: 'Poppins',
+        fontSize: exports.fontSize[100],
+        fontWeight: ui_components_core_1.fontWeight[400],
+        lineHeight: ui_components_core_1.lineHeight[100],
+    },
+    h7Regular: {
+        fontFamily: 'Poppins',
+        fontSize: exports.fontSize[400],
+        fontWeight: ui_components_core_1.fontWeight[400],
+        lineHeight: ui_components_core_1.lineHeight[400],
+    },
+    h7SemiBold: {
+        fontFamily: 'Poppins-SemiBold',
+        fontSize: exports.fontSize[400],
+        fontWeight: ui_components_core_1.fontWeight[600],
+        lineHeight: ui_components_core_1.lineHeight[400],
+    },
+    Regular64: {
+        fontFamily: 'Poppins',
+        fontSize: exports.fontSize[64],
+        fontWeight: ui_components_core_1.fontWeight[600],
+        lineHeight: ui_components_core_1.lineHeight[64],
+    },
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react-native",
   "private": false,
-  "version": "0.2.1-unstable.86+4f37b20",
+  "version": "0.2.1-unstable.87+6894ab8",
   "description": "SSI UI components for React-Native",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -30,7 +30,7 @@
   "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.86+4f37b20",
+    "@sphereon/ui-components.core": "0.2.1-unstable.87+6894ab8",
     "expo-linear-gradient": "~13.0.2",
     "react-native-fast-image": "^8.6.3",
     "react-native-size-matters": "^0.4.2",
@@ -46,5 +46,5 @@
     "react": ">= 18",
     "react-native": "~0.74.3"
   },
-  "gitHead": "4f37b208cf3a2e90a109d7e76b174a2ed674b466"
+  "gitHead": "6894ab8498cb051bfdaf85973cb44e3f419956ce"
 }