Merge pull request #46 from Sphereon-Opensource/feature/expo-20

Feature/expo 20
Sphereon-Opensource · Apr 25, 2024 · 8ee29ce · 8ee29ce
2 parents 017f20e + 724f948
commit 8ee29ce
Show file tree

Hide file tree

Showing 78 changed files with 2,833 additions and 4,373 deletions.
diff --git a/package.json b/package.json
@@ -35,16 +35,15 @@
     "prettier": "^2.8.8",
     "rimraf": "^4.4.0",
     "semantic-release": "^19.0.5",
-    "typescript": "4.9.5"
+    "typescript": "5.4.2"
   },
   "engines": {
     "node": ">= 18.0.0"
   },
   "pnpm": {
     "overrides": {
-      "@types/react-native": "0.71.3",
-      "@types/react": "~18.0.28",
-      "typescript": "4.9.5"
+      "@types/react-native": "0.73.0",
+      "@types/react": "~18.2.67"
     }
   }
 }
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -29,18 +29,18 @@
   "dependencies": {
     "i18n-js": "^3.8.0",
     "lodash.memoize": "^4.1.2",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.11"
   },
   "devDependencies": {
     "@types/i18n-js": "^3.8.4",
     "@types/lodash.memoize": "^4.1.7",
     "@types/node": "^20.4.0",
-    "@types/react": "~18.0.14",
-    "@types/styled-components": "^5.1.15",
+    "@types/react": "~18.2.67",
+    "@types/styled-components": "^5.1.34",
     "react": "18.2.0",
-    "typescript": "4.9.5"
+    "typescript": "5.4.2"
   },
   "peerDependencies": {
-    "react": ">= 16.8.0"
+    "react": ">= 18"
   }
 }
diff --git a/packages/core/src/styles/ssi/colors.ts b/packages/core/src/styles/ssi/colors.ts
@@ -107,7 +107,7 @@ export const elementColors: Record<Element, string> = {
   purple: '#7276F7',
   100: '#F25409',
   200: '#F78854',
-  300: '#8D9099'
+  300: '#8D9099',
 }
 
 type Button = 100

diff --git a/packages/core/src/types/base64/index.ts b/packages/core/src/types/base64/index.ts
@@ -1,5 +1,5 @@
 export type ParsedBase64Uri = {
-    base64Uri: string
-    base64: string
-    mimeType: string
+  base64Uri: string
+  base64: string
+  mimeType: string
 }
diff --git a/packages/core/src/types/credential/index.ts b/packages/core/src/types/credential/index.ts
@@ -2,7 +2,7 @@ export enum CredentialStatus {
   VALID = 'valid',
   EXPIRED = 'expired',
   REVOKED = 'revoked',
-  DRAFT = 'draft'
+  DRAFT = 'draft',
 }
 
 export enum IssuerStatus {

diff --git a/packages/core/src/utils/FileUtils.ts b/packages/core/src/utils/FileUtils.ts
@@ -1,24 +1,24 @@
-import {ParsedBase64Uri} from '../types';
+import {ParsedBase64Uri} from '../types'
 
 export const getFileSizeDisplay = (bytes: number): string => {
-    if (bytes < 1024) {
-        return `${bytes} B`
-    } else if (bytes <= 1024 * 1024) {
-        return `${(bytes / 1024).toFixed(1)} KB`
-    } else if (bytes <= 1024 * 1024 * 1024) {
-        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-    } else {
-        return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`
-    }
+  if (bytes < 1024) {
+    return `${bytes} B`
+  } else if (bytes <= 1024 * 1024) {
+    return `${(bytes / 1024).toFixed(1)} KB`
+  } else if (bytes <= 1024 * 1024 * 1024) {
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+  } else {
+    return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`
+  }
 }
 
 export const parseBase64Uri = (base64Uri: string): ParsedBase64Uri => {
-    const base64Parts = base64Uri.split(';base64,');
-    const mimeType = base64Parts[0].replace('data:', '')
+  const base64Parts = base64Uri.split(';base64,')
+  const mimeType = base64Parts[0].replace('data:', '')
 
-    return {
-        base64Uri,
-        base64: base64Parts[1],
-        mimeType
-    }
+  return {
+    base64Uri,
+    base64: base64Parts[1],
+    mimeType,
+  }
 }
diff --git a/packages/ssi-react-native/package.json b/packages/ssi-react-native/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react-native",
   "private": false,
-  "version": "0.1.2",
+  "version": "0.2.0-unstable.1",
   "description": "SSI UI components for React-Native",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -28,24 +28,24 @@
     "access": "public"
   },
   "dependencies": {
-    "@react-native-community/blur": "^4.3.0",
-    "@react-native-masked-view/masked-view": "^0.3.1",
+    "@react-native-community/blur": "^4.4.0",
+    "@react-native-masked-view/masked-view": "0.3.1",
     "@sphereon/ui-components.core": "workspace:*",
-    "expo-linear-gradient": "~12.1.2",
+    "expo-linear-gradient": "~12.7.2",
     "react-native-fast-image": "^8.6.3",
     "react-native-size-matters": "^0.4.0",
-    "react-native-svg": "13.4.0",
-    "styled-components": "^5.3.3"
+    "react-native-svg": "14.1.0",
+    "styled-components": "^5.3.11"
   },
   "devDependencies": {
-    "@types/react": "~18.0.14",
-    "@types/react-native": "0.71.3",
-    "@types/styled-components": "^5.1.15",
-    "@types/styled-components-react-native": "^5.1.2",
-    "typescript": "4.9.5"
+    "@types/react": "~18.2.67",
+    "@types/react-native": "0.73.0",
+    "@types/styled-components": "^5.1.34",
+    "@types/styled-components-react-native": "^5.2.5",
+    "typescript": "5.4.2"
   },
   "peerDependencies": {
-    "react": ">= 16.8.0",
+    "react": ">= 18",
     "react-native": ">= 0.64.0"
   }
 }
diff --git a/packages/ssi-react-native/tsconfig.json b/packages/ssi-react-native/tsconfig.json
@@ -8,7 +8,7 @@
     "module": "esnext",
     "lib": ["esnext"],
     "jsx": "react-native",
-    "moduleResolution": "nodenext"
+    "moduleResolution": "bundler"
   },
   "references": [
     {

diff --git a/packages/ssi-react/package.json b/packages/ssi-react/package.json
@@ -6,6 +6,7 @@
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
   "license": "Apache-2.0",
+  "type": "module",
   "keywords": [
     "Frontend",
     "User interface",
@@ -46,17 +47,17 @@
     "react-loader-spinner": "^5.4.5",
     "react-select": "^5.8.0",
     "react-toastify": "^9.1.3",
-    "styled-components": "^5.3.3",
+    "styled-components": "^5.3.11",
     "uint8arrays": "^3.1.1"
   },
   "devDependencies": {
-    "@types/react": "~18.0.14",
-    "@types/styled-components": "^5.1.15",
+    "@types/react": "~18.2.67",
+    "@types/styled-components": "^5.1.34",
     "ajv": "^8.12.0",
     "cpy-cli": "^5.0.0",
     "typescript": "4.9.5"
   },
   "peerDependencies": {
-    "react": ">= 16.8.0"
+    "react": ">= 18"
   }
 }
diff --git a/packages/ssi-react/src/@config/toasts/index.tsx b/packages/ssi-react/src/@config/toasts/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import {ToastCustomProps, ToastType} from '@sphereon/ui-components.core'
-import SSIToast from '../../components/messageBoxes/toasts/SSIToast'
-import {ToastConfigParams} from '../../types'
+import SSIToast from '../../components/messageBoxes/toasts/SSIToast/index.js'
+import {ToastConfigParams} from '../../types/index.js'
 
 export const toastConfig = {
   ssiToastSuccess: (params: ToastConfigParams<ToastCustomProps>) => {

diff --git a/packages/ssi-react/src/@types/index.d.ts b/packages/ssi-react/src/@types/index.d.ts
@@ -1,4 +1,4 @@
 declare module 'uint8arrays' {
-    export function fromString(input: string, encoding?: string): Uint8Array;
-    // Add other functions from the uint8arrays module if needed
+  export function fromString(input: string, encoding?: string): Uint8Array
+  // Add other functions from the uint8arrays module if needed
 }
diff --git a/packages/ssi-react/src/components/assets/icons/CrossIcon/index.tsx b/packages/ssi-react/src/components/assets/icons/CrossIcon/index.tsx
@@ -14,8 +14,8 @@ const CrossIcon: FC<Props> = (props: Props): ReactElement => {
     <div style={{...style, width: size, height: size, display: 'flex'}}>
       <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
         <path
-            d="M11.3763 0.623718C11.2113 0.45875 10.9439 0.458771 10.7789 0.623718L5.99999 5.40265L1.22108 0.623744C1.05612 0.458776 0.788685 0.458776 0.62372 0.623744C0.458759 0.788692 0.458761 1.05613 0.623722 1.2211L5.40263 6L0.623735 10.7789C0.458779 10.9439 0.458773 11.2113 0.623733 11.3763C0.788697 11.5412 1.05614 11.5412 1.2211 11.3763L5.99999 6.59737L10.7789 11.3763C10.9439 11.5412 11.2113 11.5412 11.3763 11.3763C11.5412 11.2113 11.5412 10.9439 11.3763 10.7789L6.59736 6L11.3763 1.22107C11.5412 1.05612 11.5412 0.788687 11.3763 0.623718Z"
-            fill={color}
+          d="M11.3763 0.623718C11.2113 0.45875 10.9439 0.458771 10.7789 0.623718L5.99999 5.40265L1.22108 0.623744C1.05612 0.458776 0.788685 0.458776 0.62372 0.623744C0.458759 0.788692 0.458761 1.05613 0.623722 1.2211L5.40263 6L0.623735 10.7789C0.458779 10.9439 0.458773 11.2113 0.623733 11.3763C0.788697 11.5412 1.05614 11.5412 1.2211 11.3763L5.99999 6.59737L10.7789 11.3763C10.9439 11.5412 11.2113 11.5412 11.3763 11.3763C11.5412 11.2113 11.5412 10.9439 11.3763 10.7789L6.59736 6L11.3763 1.22107C11.5412 1.05612 11.5412 0.788687 11.3763 0.623718Z"
+          fill={color}
         />
       </svg>
     </div>

diff --git a/packages/ssi-react/src/components/assets/icons/DocumentIcon/index.tsx b/packages/ssi-react/src/components/assets/icons/DocumentIcon/index.tsx
@@ -1,5 +1,5 @@
 import React, {CSSProperties, FC, ReactElement} from 'react'
-import {fontColors} from '@sphereon/ui-components.core';
+import {fontColors} from '@sphereon/ui-components.core'
 
 export type Props = {
   width?: number

diff --git a/packages/ssi-react/src/components/assets/icons/ImageIcon/index.tsx b/packages/ssi-react/src/components/assets/icons/ImageIcon/index.tsx
@@ -2,27 +2,27 @@ import React, {CSSProperties, FC, ReactElement} from 'react'
 import {fontColors} from '@sphereon/ui-components.core'
 
 type Props = {
-    width?: number
-    height?: number
-    color?: string
-    style?: CSSProperties
+  width?: number
+  height?: number
+  color?: string
+  style?: CSSProperties
 }
 
 const ImageIcon: FC<Props> = (props: Props): ReactElement => {
     const {width = 38, height = 30, color = fontColors.dark, style} = props
 
-    return (
-        <div style={{...style, width, height, display: 'flex'}}>
-            <svg width="100%" height="100%" viewBox="0 0 38 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path
-                    fillRule="evenodd"
-                    clipRule="evenodd"
-                    d="M15.773 8.1151C16.0717 8.1151 16.3637 8.20496 16.6121 8.37331C16.8604 8.54166 17.054 8.78094 17.1683 9.06089C17.2826 9.34083 17.3125 9.64888 17.2542 9.94605C17.1959 10.2432 17.052 10.5162 16.8407 10.7304C16.6295 10.9446 16.3603 11.0905 16.0673 11.1496C15.7743 11.2086 15.4707 11.1782 15.1947 11.0622C14.9187 10.9462 14.6829 10.7498 14.517 10.4978C14.3511 10.2458 14.2626 9.94961 14.2627 9.6466C14.2632 9.24048 14.4225 8.85116 14.7056 8.56399C14.9888 8.27682 15.3726 8.11567 15.773 8.1151ZM15.773 12.3833C16.3066 12.3833 16.8283 12.2229 17.272 11.9223C17.7157 11.6216 18.0616 11.1942 18.2659 10.6942C18.4702 10.1941 18.5236 9.64386 18.4196 9.11297C18.3155 8.58208 18.0586 8.09442 17.6813 7.71164C17.304 7.32887 16.8233 7.06819 16.2999 6.96256C15.7765 6.85693 15.234 6.9111 14.741 7.11822C14.248 7.32534 13.8266 7.6761 13.5301 8.12615C13.2336 8.5762 13.0754 9.10532 13.0754 9.6466C13.0766 10.3719 13.3612 11.0672 13.8668 11.58C14.3725 12.0929 15.0579 12.382 15.773 12.3833ZM2.81918 1.70473C2.38666 1.70507 1.97195 1.87947 1.66608 2.18964C1.3602 2.49982 1.18816 2.92043 1.18771 3.35914V22.6369L9.78458 13.9173C10.105 13.5935 10.5389 13.4116 10.9913 13.4116C11.4436 13.4116 11.8776 13.5935 12.198 13.9173L15.6007 17.3692L23.5385 9.32026C23.8587 8.99597 24.2927 8.81382 24.7452 8.81382C25.1977 8.81382 25.6317 8.99597 25.9519 9.32026L36.8123 20.338V3.35914C36.8118 2.9205 36.6399 2.49996 36.3341 2.1898C36.0283 1.87963 35.6137 1.70518 35.1812 1.70473H2.81918ZM35.1812 28.2957C35.6137 28.2951 36.0283 28.1206 36.3341 27.8104C36.6399 27.5001 36.8118 27.0795 36.8123 26.6409V22.0421L25.1104 10.1721C25.0129 10.0733 24.8807 10.0178 24.7429 10.0178C24.605 10.0178 24.4728 10.0733 24.3753 10.1721L16.0208 18.6467C15.9093 18.7597 15.7582 18.8231 15.6007 18.8231C15.4431 18.8231 15.292 18.7597 15.1806 18.6467L11.3578 14.7692C11.2604 14.6704 11.1283 14.615 10.9907 14.615C10.853 14.615 10.7209 14.6704 10.6235 14.7692L1.18771 24.3402V26.6409C1.18816 27.0796 1.36019 27.5003 1.66605 27.8105C1.97191 28.1208 2.38662 28.2952 2.81918 28.2957H35.1812ZM2.81918 29.5H35.1812C35.9286 29.4991 36.645 29.1976 37.1734 28.6616C37.7018 28.1256 37.9991 27.3989 38 26.6409V3.35914C37.9991 2.60113 37.7018 1.87442 37.1734 1.33843C36.645 0.802428 35.9286 0.500907 35.1812 0.5H2.81918C2.0718 0.500793 1.35525 0.802265 0.826731 1.33827C0.298214 1.87428 0.000894121 2.60106 0 3.35914V26.6409C0.000894121 27.3989 0.298214 28.1257 0.826731 28.6617C1.35525 29.1977 2.0718 29.4992 2.81918 29.5Z"
-                    fill={color}
-                />
-            </svg>
-        </div>
-    )
+  return (
+    <div style={{...style, width, height, display: 'flex'}}>
+      <svg width="100%" height="100%" viewBox="0 0 38 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M15.773 8.1151C16.0717 8.1151 16.3637 8.20496 16.6121 8.37331C16.8604 8.54166 17.054 8.78094 17.1683 9.06089C17.2826 9.34083 17.3125 9.64888 17.2542 9.94605C17.1959 10.2432 17.052 10.5162 16.8407 10.7304C16.6295 10.9446 16.3603 11.0905 16.0673 11.1496C15.7743 11.2086 15.4707 11.1782 15.1947 11.0622C14.9187 10.9462 14.6829 10.7498 14.517 10.4978C14.3511 10.2458 14.2626 9.94961 14.2627 9.6466C14.2632 9.24048 14.4225 8.85116 14.7056 8.56399C14.9888 8.27682 15.3726 8.11567 15.773 8.1151ZM15.773 12.3833C16.3066 12.3833 16.8283 12.2229 17.272 11.9223C17.7157 11.6216 18.0616 11.1942 18.2659 10.6942C18.4702 10.1941 18.5236 9.64386 18.4196 9.11297C18.3155 8.58208 18.0586 8.09442 17.6813 7.71164C17.304 7.32887 16.8233 7.06819 16.2999 6.96256C15.7765 6.85693 15.234 6.9111 14.741 7.11822C14.248 7.32534 13.8266 7.6761 13.5301 8.12615C13.2336 8.5762 13.0754 9.10532 13.0754 9.6466C13.0766 10.3719 13.3612 11.0672 13.8668 11.58C14.3725 12.0929 15.0579 12.382 15.773 12.3833ZM2.81918 1.70473C2.38666 1.70507 1.97195 1.87947 1.66608 2.18964C1.3602 2.49982 1.18816 2.92043 1.18771 3.35914V22.6369L9.78458 13.9173C10.105 13.5935 10.5389 13.4116 10.9913 13.4116C11.4436 13.4116 11.8776 13.5935 12.198 13.9173L15.6007 17.3692L23.5385 9.32026C23.8587 8.99597 24.2927 8.81382 24.7452 8.81382C25.1977 8.81382 25.6317 8.99597 25.9519 9.32026L36.8123 20.338V3.35914C36.8118 2.9205 36.6399 2.49996 36.3341 2.1898C36.0283 1.87963 35.6137 1.70518 35.1812 1.70473H2.81918ZM35.1812 28.2957C35.6137 28.2951 36.0283 28.1206 36.3341 27.8104C36.6399 27.5001 36.8118 27.0795 36.8123 26.6409V22.0421L25.1104 10.1721C25.0129 10.0733 24.8807 10.0178 24.7429 10.0178C24.605 10.0178 24.4728 10.0733 24.3753 10.1721L16.0208 18.6467C15.9093 18.7597 15.7582 18.8231 15.6007 18.8231C15.4431 18.8231 15.292 18.7597 15.1806 18.6467L11.3578 14.7692C11.2604 14.6704 11.1283 14.615 10.9907 14.615C10.853 14.615 10.7209 14.6704 10.6235 14.7692L1.18771 24.3402V26.6409C1.18816 27.0796 1.36019 27.5003 1.66605 27.8105C1.97191 28.1208 2.38662 28.2952 2.81918 28.2957H35.1812ZM2.81918 29.5H35.1812C35.9286 29.4991 36.645 29.1976 37.1734 28.6616C37.7018 28.1256 37.9991 27.3989 38 26.6409V3.35914C37.9991 2.60113 37.7018 1.87442 37.1734 1.33843C36.645 0.802428 35.9286 0.500907 35.1812 0.5H2.81918C2.0718 0.500793 1.35525 0.802265 0.826731 1.33827C0.298214 1.87428 0.000894121 2.60106 0 3.35914V26.6409C0.000894121 27.3989 0.298214 28.1257 0.826731 28.6617C1.35525 29.1977 2.0718 29.4992 2.81918 29.5Z"
+          fill={color}
+        />
+      </svg>
+    </div>
+  )
 }
 
 export default ImageIcon
diff --git a/packages/ssi-react/src/components/assets/icons/SSIProfileIcon/index.tsx b/packages/ssi-react/src/components/assets/icons/SSIProfileIcon/index.tsx
@@ -1,6 +1,6 @@
 import React, {FC, ReactElement} from 'react'
 import {fontColors, getInitials, profileColors} from '@sphereon/ui-components.core'
-import {SSIProfileIconContainerStyled as Container, SSITextH2Styled as ProfileIconText} from '../../../../styles'
+import {SSIProfileIconContainerStyled as Container, SSITextH2Styled as ProfileIconText} from '../../../../styles/index.js'
 
 type Props = {
   fullName: string

diff --git a/packages/ssi-react/src/components/assets/logos/SSILogo/index.tsx b/packages/ssi-react/src/components/assets/logos/SSILogo/index.tsx
@@ -1,6 +1,6 @@
 import React, {CSSProperties, FC, ReactElement} from 'react'
 import {calculateAspectRatio, ImageAttributes, logoColors} from '@sphereon/ui-components.core'
-import SSIPlaceholderLogo from '../SSIPlaceholderLogo'
+import SSIPlaceholderLogo from '../SSIPlaceholderLogo/index.js'
 
 type Props = {
   logo?: ImageAttributes

diff --git a/packages/ssi-react/src/components/assets/markers/StepMarker/index.tsx b/packages/ssi-react/src/components/assets/markers/StepMarker/index.tsx
@@ -5,8 +5,8 @@ import {
   StepMarkerGradientContainerStyled as GradientContainer,
   SSITextH1SemiBoldLightStyled as StepNumberText,
   StepMarkerInactiveContainerStyled as InactiveContainer,
-} from '../../../../styles'
-import {StepStatus} from '../../../../types'
+} from '../../../../styles/index.js'
+import {StepStatus} from '../../../../types/index.js'
 
 type Props = {
   stepNumber: number

diff --git a/packages/ssi-react/src/components/assets/placeholders/PersonPlaceholder/index.tsx b/packages/ssi-react/src/components/assets/placeholders/PersonPlaceholder/index.tsx
@@ -15,9 +15,9 @@ const PersonPlaceholder: FC<Props> = (props: Props): ReactElement => {
     <div style={{...style, width, height, display: 'flex'}}>
       <svg width="100%" height="100%" viewBox="0 0 79 77" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
-            d="M22.8136 19.3766C22.8136 10.2672 30.2594 2.85265 39.4999 2.85265C48.7404 2.85265 56.1862 10.2672 56.1862 19.3766C56.1862 28.486 48.7404 35.9005 39.4999 35.9005C30.2594 35.9005 22.8136 28.486 22.8136 19.3766ZM3.52788 62.4042C3.52788 60.1881 4.62672 58.0491 6.89989 55.9687C9.18981 53.873 12.4868 52.0225 16.3463 50.4894C24.0686 47.4219 33.3853 45.8802 39.4999 45.8802C45.6144 45.8802 54.9312 47.4219 62.6534 50.4894C66.513 52.0225 69.81 53.873 72.0999 55.9687C74.3731 58.0491 75.4719 60.1881 75.4719 62.4042V74.1473H3.52788V62.4042Z"
-            stroke={color}
-            strokeWidth="5.19882"
+          d="M22.8136 19.3766C22.8136 10.2672 30.2594 2.85265 39.4999 2.85265C48.7404 2.85265 56.1862 10.2672 56.1862 19.3766C56.1862 28.486 48.7404 35.9005 39.4999 35.9005C30.2594 35.9005 22.8136 28.486 22.8136 19.3766ZM3.52788 62.4042C3.52788 60.1881 4.62672 58.0491 6.89989 55.9687C9.18981 53.873 12.4868 52.0225 16.3463 50.4894C24.0686 47.4219 33.3853 45.8802 39.4999 45.8802C45.6144 45.8802 54.9312 47.4219 62.6534 50.4894C66.513 52.0225 69.81 53.873 72.0999 55.9687C74.3731 58.0491 75.4719 60.1881 75.4719 62.4042V74.1473H3.52788V62.4042Z"
+          stroke={color}
+          strokeWidth="5.19882"
         />
       </svg>
     </div>

diff --git a/packages/ssi-react/src/components/buttons/SSIIconButton/index.tsx b/packages/ssi-react/src/components/buttons/SSIIconButton/index.tsx
@@ -1,11 +1,11 @@
 import React, {FC, MouseEventHandler, ReactElement} from 'react'
 import {ButtonIcon, fontColors} from '@sphereon/ui-components.core'
-import SSIAddIcon from '../../assets/icons/SSIAddIcon'
-import SSIFilterIcon from '../../assets/icons/SSIFilterIcon'
-import SSIArrowDownIcon from '../../assets/icons/SSIArrowDownIcon'
-import {SSIIconButtonContainerStyled as Container, SSITextH3Styled as Caption} from '../../../styles'
-import MeatBallsIcon from '../../assets/icons/MeatBallsIcon'
-import DeleteIcon from '../../assets/icons/DeleteIcon'
+import SSIAddIcon from '../../assets/icons/SSIAddIcon/index.js'
+import SSIFilterIcon from '../../assets/icons/SSIFilterIcon/index.js'
+import SSIArrowDownIcon from '../../assets/icons/SSIArrowDownIcon/index.js'
+import {SSIIconButtonContainerStyled as Container, SSITextH3Styled as Caption} from '../../../styles/index.js'
+import MeatBallsIcon from '../../assets/icons/MeatBallsIcon/index.js'
+import DeleteIcon from '../../assets/icons/DeleteIcon/index.js'
 
 type Props = {
   icon: ButtonIcon

diff --git a/packages/ssi-react/src/components/buttons/SSIPrimaryButton/index.tsx b/packages/ssi-react/src/components/buttons/SSIPrimaryButton/index.tsx
@@ -1,7 +1,7 @@
 import React, {CSSProperties, FC, ReactElement} from 'react'
 import {ButtonIcon, fontColors, OpacityStyleEnum} from '@sphereon/ui-components.core'
-import SSIAddIcon from '../../assets/icons/SSIAddIcon'
-import {SSIPrimaryButtonContainerStyled as Container, SSITextH3LightStyled as Caption} from '../../../styles'
+import SSIAddIcon from '../../assets/icons/SSIAddIcon/index.js'
+import {SSIPrimaryButtonContainerStyled as Container, SSITextH3LightStyled as Caption} from '../../../styles/index.js'
 
 type Props = {
   caption: string

diff --git a/packages/ssi-react/src/components/buttons/SSISecondaryButton/index.tsx b/packages/ssi-react/src/components/buttons/SSISecondaryButton/index.tsx
@@ -1,8 +1,8 @@
 import React, {CSSProperties, FC, ReactElement} from 'react'
 import {ButtonIcon, OpacityStyleEnum} from '@sphereon/ui-components.core'
-import SSIAddIcon from '../../assets/icons/SSIAddIcon'
-import {SSISecondaryButtonCaptionStyled as Caption, SSISecondaryButtonContainerStyled as Container} from '../../../styles'
-import {gradientColors} from '../../../styles/colors'
+import SSIAddIcon from '../../assets/icons/SSIAddIcon/index.js'
+import {SSISecondaryButtonCaptionStyled as Caption, SSISecondaryButtonContainerStyled as Container} from '../../../styles/index.js'
+import {gradientColors} from '../../../styles/colors.js'
 
 type Props = {
   caption: string

diff --git a/packages/ssi-react/src/components/fields/DragAndDropBox/index.tsx b/packages/ssi-react/src/components/fields/DragAndDropBox/index.tsx
@@ -4,8 +4,8 @@ import {
   DragAndDropBoxHiddenInputStyled as HiddenInput,
   DragAndDropBoxCaptionContainerStyled as CaptionContainer,
   SSITextH2Styled as Caption,
-  DragAndDropBoxDescriptionStyled as Description
-} from '../../../styles';
+  DragAndDropBoxDescriptionStyled as Description,
+} from '../../../styles/index.js'
 
 type Props = {
   caption: string
@@ -45,14 +45,8 @@ const DragAndDropBox: React.FC<Props> = (props: Props): ReactElement => {
   }
 
   return (
-    <Container onClick={onSelect}
-               onDrop={onDrop}
-               onDragOver={onDragOver}
-    >
-      <HiddenInput ref={inputFile}
-                   type='file'
-                   onChange={onChange}
-      />
+    <Container onClick={onSelect} onDrop={onDrop} onDragOver={onDragOver}>
+      <HiddenInput ref={inputFile} type="file" onChange={onChange} />
       <CaptionContainer>
         <Caption>{caption}</Caption>
         <Description>{description}</Description>