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

package/dist/styles/fonts/index.js

@@ -1,69 +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.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;
+import styled from 'styled-components/native';
+import { fontColors } from '@sphereon/ui-components.core';
+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;
 `;
-exports.SSITextH2LightStyled = (0, native_1.default)(exports.SSITextH2Styled) `
-  color: ${ui_components_core_1.fontColors.light};
+export const SSITextH2LightStyled = styled(SSITextH2Styled) `
+  color: ${fontColors.light};
 `;
-exports.SSITextH2SecondaryButtonStyled = (0, native_1.default)(exports.SSITextH2Styled) `
-  color: ${ui_components_core_1.fontColors.secondaryButton};
+export const SSITextH2SecondaryButtonStyled = styled(SSITextH2Styled) `
+  color: ${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;
+export const SSITextH4Styled = styled.Text `
+  font-family: ${fontStyle.h4Regular.fontFamily};
+  font-size: ${fontStyle.h4Regular.fontSize}px;
+  font-weight: ${fontStyle.h4Regular.fontWeight};
+  line-height: ${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;
+export const SSITextH4SemiBoldStyled = styled.Text `
+  font-family: ${fontStyle.h4SemiBold.fontFamily};
+  font-size: ${fontStyle.h4SemiBold.fontSize}px;
+  font-weight: ${fontStyle.h4SemiBold.fontWeight};
+  line-height: ${fontStyle.h4SemiBold.lineHeight}px;
   height: auto;
 `;
-exports.SSITextH4LightStyled = (0, native_1.default)(exports.SSITextH4Styled) `
-  color: ${ui_components_core_1.fontColors.light};
+export const SSITextH4LightStyled = styled(SSITextH4Styled) `
+  color: ${fontColors.light};
 `;
-exports.SSITextH4SemiBoldLightStyled = (0, native_1.default)(exports.SSITextH4SemiBoldStyled) `
-  color: ${ui_components_core_1.fontColors.light};
+export const SSITextH4SemiBoldLightStyled = styled(SSITextH4SemiBoldStyled) `
+  color: ${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;
+export const SSITextH5Styled = styled.Text `
+  font-family: ${fontStyle.h5Regular.fontFamily};
+  font-size: ${fontStyle.h5Regular.fontSize}px;
+  font-weight: ${fontStyle.h5Regular.fontWeight};
+  line-height: ${fontStyle.h5Regular.lineHeight}px;
   height: auto;
 `;
-exports.SSITextH5LightStyled = (0, native_1.default)(exports.SSITextH5Styled) `
-  color: ${ui_components_core_1.fontColors.light};
+export const SSITextH5LightStyled = styled(SSITextH5Styled) `
+  color: ${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;
+export const SSITextH6Styled = styled.Text `
+  font-family: ${fontStyle.h6.fontFamily};
+  font-size: ${fontStyle.h6.fontSize}px;
+  font-weight: ${fontStyle.h6.fontWeight};
+  line-height: ${fontStyle.h6.lineHeight}px;
   height: auto;
 `;
-exports.SSITextH6LightStyled = (0, native_1.default)(exports.SSITextH6Styled) `
-  color: ${ui_components_core_1.fontColors.light};
+export const SSITextH6LightStyled = styled(SSITextH6Styled) `
+  color: ${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;
+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

@@ -1,30 +1,23 @@
-/// <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>>;
+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

@@ -1,17 +1,11 @@
-"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],
+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 },
 })) ``;
-exports.SSIRoundedLinearGradient = (0, native_1.default)(exports.SSILinearGradientStyled) `
-  ${ui_components_core_1.SSIRoundedEdgesCss}
+export const SSIRoundedLinearGradient = styled(SSILinearGradientStyled) `
+  ${SSIRoundedEdgesCss}
 `;

package/dist/styles/index.js

@@ -1,20 +1,4 @@
-"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);
+export * from './typography';
+export * from './components';
+export * from './gradients';
+export * from './fonts';

package/dist/styles/typography.js

@@ -1,108 +1,105 @@
-"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']),
+import { fontSize as fontSizes, fontWeight, lineHeight } from '@sphereon/ui-components.core';
+import { moderateScale } from 'react-native-size-matters';
+export const fontSize = {
+    100: moderateScale(fontSizes['100']),
+    200: moderateScale(fontSizes['200']),
+    300: moderateScale(fontSizes['300']),
+    400: moderateScale(fontSizes['400']),
+    500: moderateScale(fontSizes['500']),
+    600: moderateScale(fontSizes['600']),
+    700: moderateScale(fontSizes['700']),
+    800: moderateScale(fontSizes['800']),
+    64: moderateScale(fontSizes['64']),
 };
-exports.fontStyle = {
+export const fontStyle = {
     h0SemiBold: {
         fontFamily: 'Poppins-SemiBold',
-        fontSize: exports.fontSize[800],
-        fontWeight: ui_components_core_1.fontWeight[600],
-        lineHeight: ui_components_core_1.lineHeight[800],
+        fontSize: fontSize[800],
+        fontWeight: fontWeight[600],
+        lineHeight: lineHeight[800],
     },
     h1SemiBold: {
         fontFamily: 'Poppins-SemiBold',
-        fontSize: exports.fontSize[700],
-        fontWeight: ui_components_core_1.fontWeight[600],
-        lineHeight: ui_components_core_1.lineHeight[700],
+        fontSize: fontSize[700],
+        fontWeight: fontWeight[600],
+        lineHeight: lineHeight[700],
     },
     h1Regular: {
         fontFamily: 'Poppins-Regular',
-        fontSize: exports.fontSize[700],
-        fontWeight: ui_components_core_1.fontWeight[400],
-        lineHeight: ui_components_core_1.lineHeight[700],
+        fontSize: fontSize[700],
+        fontWeight: fontWeight[400],
+        lineHeight: lineHeight[700],
     },
     h2Regular: {
         fontFamily: 'Poppins-Regular',
-        fontSize: exports.fontSize[600],
-        fontWeight: ui_components_core_1.fontWeight[400],
-        lineHeight: ui_components_core_1.lineHeight[600],
+        fontSize: fontSize[600],
+        fontWeight: fontWeight[400],
+        lineHeight: lineHeight[600],
     },
     h2SemiBold: {
         fontFamily: 'Poppins-SemiBold',
-        fontSize: exports.fontSize[600],
-        fontWeight: ui_components_core_1.fontWeight[600],
-        lineHeight: ui_components_core_1.lineHeight[600],
+        fontSize: fontSize[600],
+        fontWeight: fontWeight[600],
+        lineHeight: lineHeight[600],
     },
     h3Regular: {
         fontFamily: 'Poppins-Regular',
-        fontSize: exports.fontSize[500],
-        fontWeight: ui_components_core_1.fontWeight[400],
-        lineHeight: ui_components_core_1.lineHeight[500],
+        fontSize: fontSize[500],
+        fontWeight: fontWeight[400],
+        lineHeight: lineHeight[500],
     },
     h3SemiBold: {
         fontFamily: 'Poppins-SemiBold',
-        fontSize: exports.fontSize[500],
-        fontWeight: ui_components_core_1.fontWeight[600],
-        lineHeight: ui_components_core_1.lineHeight[500],
+        fontSize: fontSize[500],
+        fontWeight: fontWeight[600],
+        lineHeight: lineHeight[500],
     },
     h4Regular: {
         fontFamily: 'Poppins-Regular',
-        fontSize: exports.fontSize[300],
-        fontWeight: ui_components_core_1.fontWeight[400],
-        lineHeight: ui_components_core_1.lineHeight[300],
+        fontSize: fontSize[300],
+        fontWeight: fontWeight[400],
+        lineHeight: lineHeight[300],
     },
     h4SemiBold: {
         fontFamily: 'Poppins-SemiBold',
-        fontSize: exports.fontSize[300],
-        fontWeight: ui_components_core_1.fontWeight[400],
-        lineHeight: ui_components_core_1.lineHeight[300],
+        fontSize: fontSize[300],
+        fontWeight: fontWeight[400],
+        lineHeight: lineHeight[300],
     },
     h5Regular: {
         fontFamily: 'Poppins-Regular',
-        fontSize: exports.fontSize[200],
-        fontWeight: ui_components_core_1.fontWeight[400],
-        lineHeight: ui_components_core_1.lineHeight[200],
+        fontSize: fontSize[200],
+        fontWeight: fontWeight[400],
+        lineHeight: lineHeight[200],
     },
     h5SemiBold: {
         fontFamily: 'Poppins-SemiBold',
-        fontSize: exports.fontSize[200],
-        fontWeight: ui_components_core_1.fontWeight[600],
-        lineHeight: ui_components_core_1.lineHeight[200],
+        fontSize: fontSize[200],
+        fontWeight: fontWeight[600],
+        lineHeight: lineHeight[200],
     },
     h6: {
         fontFamily: 'Poppins',
-        fontSize: exports.fontSize[100],
-        fontWeight: ui_components_core_1.fontWeight[400],
-        lineHeight: ui_components_core_1.lineHeight[100],
+        fontSize: fontSize[100],
+        fontWeight: fontWeight[400],
+        lineHeight: lineHeight[100],
     },
     h7Regular: {
         fontFamily: 'Poppins',
-        fontSize: exports.fontSize[400],
-        fontWeight: ui_components_core_1.fontWeight[400],
-        lineHeight: ui_components_core_1.lineHeight[400],
+        fontSize: fontSize[400],
+        fontWeight: fontWeight[400],
+        lineHeight: lineHeight[400],
     },
     h7SemiBold: {
         fontFamily: 'Poppins-SemiBold',
-        fontSize: exports.fontSize[400],
-        fontWeight: ui_components_core_1.fontWeight[600],
-        lineHeight: ui_components_core_1.lineHeight[400],
+        fontSize: fontSize[400],
+        fontWeight: fontWeight[600],
+        lineHeight: lineHeight[400],
     },
     Regular64: {
         fontFamily: 'Poppins',
-        fontSize: exports.fontSize[64],
-        fontWeight: ui_components_core_1.fontWeight[600],
-        lineHeight: ui_components_core_1.lineHeight[64],
+        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.2.1-unstable.87+6894ab8",
+  "version": "0.2.1-unstable.88+3ec6b08",
   "description": "SSI UI components for React-Native",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -29,22 +29,24 @@
   },
   "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.87+6894ab8",
-    "expo-linear-gradient": "~13.0.2",
+    "@react-native-masked-view/masked-view": "0.3.1",
+    "@sphereon/ui-components.core": "0.2.1-unstable.88+3ec6b08",
+    "expo-linear-gradient": "~12.7.2",
     "react-native-fast-image": "^8.6.3",
-    "react-native-size-matters": "^0.4.2",
-    "react-native-svg": "15.2.0",
-    "styled-components": "^6.1.12"
+    "react-native-size-matters": "^0.4.0",
+    "react-native-svg": "14.1.0",
+    "styled-components": "^5.3.3"
   },
   "devDependencies": {
-    "@types/react": "~18.2.79",
-    "expo": "^51.0.22",
-    "typescript": "~5.3.3"
+    "@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"
   },
   "peerDependencies": {
     "react": ">= 18",
-    "react-native": "~0.74.3"
+    "react-native": "~0.73.6"
   },
-  "gitHead": "6894ab8498cb051bfdaf85973cb44e3f419956ce"
+  "gitHead": "3ec6b0844a3bfe519d6baef0b47c6b96e914ae75"
 }