Feature/cwall 247 vp UI

package.json

@@ -47,3 +47,4 @@
     }
   }
 }
+

packages/core/src/localization/translations/en.json

@@ -29,6 +29,11 @@
   "credential_issuance_wizard_credential_type_label": "Credential type",
   "credential_issuance_wizard_evidence_title": "Evidence",
   "credential_issuance_wizard_evidence_description": "Optionally, you can upload one or more documents or files that you want to attach to this credential.",
+  "information_request_title": "Information request",
+  "information_request_header_description": "{{partyName}} would like to receive the following information from you for verification",
+  "information_request_purpose_label": "Purpose",
+  "information_request_form_label": "Request form",
+  "information_request_interacting_with": "You're interacting with Relying party {{partyName}}",
   "file_permission_public_label": "Public",
   "file_permission_private_label": "Private",
   "credentials_view_item_expires_on": "Expires on",

packages/core/src/styles/ssi/colors.ts

@@ -70,7 +70,7 @@ export const borderColors: Record<Border, string> = {
   light: '#E3E3E3',
   lightGrey: '#ACACAC',
   darkGrey: '#303030',
-  purple: '#7276F7'
+  purple: '#7276F7',
 }
 
 type Profile = 100 | 200 | 300 | 400 | 500
@@ -107,7 +107,7 @@ export const elementColors: Record<Element, string> = {
   purple: '#7276F7',
   100: '#F25409',
   200: '#F78854',
-  300: '#8D9099'
+  300: '#8D9099',
 }
 
 type Button = 100

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
 }

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 {

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,
+  }
 }

packages/core/src/utils/ImageUtils.ts

@@ -1,4 +1,4 @@
-import {base64UriValidationRegex} from '../regexes';
+import {base64UriValidationRegex} from '../regexes'
 
 export const calculateAspectRatio = (width: number, height: number): number => {
   return width / height

packages/core/src/utils/TypeUtils.ts

@@ -1,25 +1,25 @@
 export const isBoolean = (value: unknown): boolean => {
-    if (typeof value === 'boolean') {
-        return true
-    } else if (typeof value === 'string') {
-        const lowercaseValue = value.toLowerCase()
-        return lowercaseValue === 'true' || lowercaseValue === 'false'
-    } else {
-        return false
-    }
+  if (typeof value === 'boolean') {
+    return true
+  } else if (typeof value === 'string') {
+    const lowercaseValue = value.toLowerCase()
+    return lowercaseValue === 'true' || lowercaseValue === 'false'
+  } else {
+    return false
+  }
 }
 
 export const parseToBoolean = (value: unknown): boolean | null => {
-    if (typeof value === 'boolean') {
-        return value
-    } else if (typeof value === 'string') {
-        const lowercaseValue = value.toLowerCase()
-        if (lowercaseValue === 'true') {
-            return true
-        } else if (lowercaseValue === 'false') {
-            return false
-        }
+  if (typeof value === 'boolean') {
+    return value
+  } else if (typeof value === 'string') {
+    const lowercaseValue = value.toLowerCase()
+    if (lowercaseValue === 'true') {
+      return true
+    } else if (lowercaseValue === 'false') {
+      return false
     }
+  }
 
-    return null
+  return null
 }

packages/ssi-react-native/src/components/buttons/SecondaryButton/index.tsx

@@ -41,14 +41,7 @@ const SecondaryButton: FC<Props> = (props: Props): JSX.Element => {
       style={{
         ...(disabled && {opacity: OpacityStyleEnum.DISABLED}),
       }}>
-      <MaskedView
-        maskElement={
-          <MaskContainer>
-            {caption &&
-                <ButtonCaption>{caption}</ButtonCaption>
-            }
-          </MaskContainer>
-        }>
+      <MaskedView maskElement={<MaskContainer>{caption && <ButtonCaption>{caption}</ButtonCaption>}</MaskContainer>}>
         <LinearGradient style={style} colors={borderColors}>
           <ButtonCaption style={{color: captionColor}}>{caption}</ButtonCaption>
         </LinearGradient>

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
 }

packages/ssi-react/src/components/assets/icons/CopyIcon/index.tsx

@@ -16,7 +16,8 @@ const CopyIcon: FC<Props> = (props: Props): ReactElement => {
       <svg width="100%" height="100%" viewBox="0 0 14 19" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M10.8054 0.456417C10.5328 0.161924 10.1706 0 9.78556 0H4.50625C3.71044 0 3.0625 0.700723 3.0625 1.56242V4.26115H1.44375C0.647938 4.26115 0 4.96187 0 5.82357V17.4376C0 18.2988 0.6475 19 1.44375 19H9.49375C10.2896 19 10.9375 18.2993 10.9375 17.4376V14.7403H12.5563C13.3521 14.7403 14 14.0395 14 13.1778V4.55517C14 4.13758 13.8495 3.74508 13.5761 3.44917L10.8054 0.456417ZM10.6461 1.62255L12.5051 3.63003H10.8793C10.7529 3.63003 10.6461 3.5145 10.6461 3.37767V1.62255ZM10.0629 17.4381C10.0629 17.7775 9.80787 18.0536 9.49419 18.0536H1.44375C1.13006 18.0536 0.875 17.7775 0.875 17.4381V5.82405C0.875 5.48458 1.13006 5.20855 1.44375 5.20855H3.0625V13.1783C3.0625 14.0395 3.71 14.7407 4.50625 14.7407H10.0625L10.0629 17.4381ZM12.5567 13.7938H10.5079C10.5053 13.7938 10.5031 13.7924 10.5004 13.7924C10.4978 13.7924 10.4956 13.7938 10.493 13.7938H4.50669C4.193 13.7938 3.93794 13.5178 3.93794 13.1783V1.56242C3.93794 1.22295 4.193 0.946922 4.50669 0.946922H9.77156V3.3772C9.77156 4.03862 10.2686 4.57648 10.8798 4.57648H13.1254V13.1778C13.1254 13.5173 12.8704 13.7938 12.5567 13.7938Z"
-          fill={color} />
+          fill={color}
+        />
       </svg>
     </div>
   )

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>

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

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
+  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

packages/ssi-react/src/components/assets/icons/ViewIcon/index.tsx

@@ -14,9 +14,12 @@ const ViewIcon: FC<Props> = (props: Props): ReactElement => {
   return (
     <div style={{...style, width: width, height: height, display: 'flex'}}>
       <svg width="100%" height="100%" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path fill-rule="evenodd" clip-rule="evenodd"
-              d="M0 14.7857V2.21429C0 1.26743 0.767429 0.5 1.71429 0.5H14.2857C15.2326 0.5 16 1.26743 16 2.21429V14.7857C16 15.7326 15.2326 16.5 14.2857 16.5C14.2857 16.5 10.2846 16.5 10.2817 16.5H1.71429C0.767429 16.5 0 15.7326 0 14.7857ZM14.8571 13.1566V2.21429C14.8571 1.89886 14.6011 1.64286 14.2857 1.64286H1.71429C1.39886 1.64286 1.14286 1.89886 1.14286 2.21429V10.3863L3.06628 7.08857C3.37714 6.55657 3.94915 6.232 4.56515 6.23829C5.18115 6.24457 5.74628 6.58114 6.04571 7.12L8.60172 11.72L9.52171 10.1869C9.81028 9.70571 10.3166 9.396 10.8766 9.35829C11.4366 9.32057 11.9794 9.55943 12.3303 9.99771L14.8571 13.1566ZM10.6217 15.3571H14.2857C14.5423 15.3571 14.76 15.1874 14.832 14.9543L11.4377 10.712C11.3206 10.5657 11.14 10.4863 10.9531 10.4989C10.7663 10.5114 10.5977 10.6143 10.5017 10.7749L9.24229 12.8737L10.6217 15.3571ZM1.14286 12.6543V14.7857C1.14286 15.1011 1.39886 15.3571 1.71429 15.3571H9.31428L5.04686 7.67486C4.94686 7.49543 4.75828 7.38343 4.55314 7.38114C4.34799 7.37886 4.15714 7.48743 4.05371 7.66457L1.14286 12.6543ZM8 6.21429C7.68457 6.21429 7.42857 5.95829 7.42857 5.64286C7.42857 5.32743 7.68457 5.07143 8 5.07143H10.2857C10.6011 5.07143 10.8571 5.32743 10.8571 5.64286C10.8571 5.95829 10.6011 6.21429 10.2857 6.21429H8ZM3.42857 3.92857C3.11314 3.92857 2.85714 3.67257 2.85714 3.35714C2.85714 3.04171 3.11314 2.78571 3.42857 2.78571H5.71429C6.02971 2.78571 6.28571 3.04171 6.28571 3.35714C6.28571 3.67257 6.02971 3.92857 5.71429 3.92857H3.42857ZM10.8571 3.92857C10.5417 3.92857 10.2857 3.67257 10.2857 3.35714C10.2857 3.04171 10.5417 2.78571 10.8571 2.78571H13.1429C13.4583 2.78571 13.7143 3.04171 13.7143 3.35714C13.7143 3.67257 13.4583 3.92857 13.1429 3.92857H10.8571Z"
-              fill={color} />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M0 14.7857V2.21429C0 1.26743 0.767429 0.5 1.71429 0.5H14.2857C15.2326 0.5 16 1.26743 16 2.21429V14.7857C16 15.7326 15.2326 16.5 14.2857 16.5C14.2857 16.5 10.2846 16.5 10.2817 16.5H1.71429C0.767429 16.5 0 15.7326 0 14.7857ZM14.8571 13.1566V2.21429C14.8571 1.89886 14.6011 1.64286 14.2857 1.64286H1.71429C1.39886 1.64286 1.14286 1.89886 1.14286 2.21429V10.3863L3.06628 7.08857C3.37714 6.55657 3.94915 6.232 4.56515 6.23829C5.18115 6.24457 5.74628 6.58114 6.04571 7.12L8.60172 11.72L9.52171 10.1869C9.81028 9.70571 10.3166 9.396 10.8766 9.35829C11.4366 9.32057 11.9794 9.55943 12.3303 9.99771L14.8571 13.1566ZM10.6217 15.3571H14.2857C14.5423 15.3571 14.76 15.1874 14.832 14.9543L11.4377 10.712C11.3206 10.5657 11.14 10.4863 10.9531 10.4989C10.7663 10.5114 10.5977 10.6143 10.5017 10.7749L9.24229 12.8737L10.6217 15.3571ZM1.14286 12.6543V14.7857C1.14286 15.1011 1.39886 15.3571 1.71429 15.3571H9.31428L5.04686 7.67486C4.94686 7.49543 4.75828 7.38343 4.55314 7.38114C4.34799 7.37886 4.15714 7.48743 4.05371 7.66457L1.14286 12.6543ZM8 6.21429C7.68457 6.21429 7.42857 5.95829 7.42857 5.64286C7.42857 5.32743 7.68457 5.07143 8 5.07143H10.2857C10.6011 5.07143 10.8571 5.32743 10.8571 5.64286C10.8571 5.95829 10.6011 6.21429 10.2857 6.21429H8ZM3.42857 3.92857C3.11314 3.92857 2.85714 3.67257 2.85714 3.35714C2.85714 3.04171 3.11314 2.78571 3.42857 2.78571H5.71429C6.02971 2.78571 6.28571 3.04171 6.28571 3.35714C6.28571 3.67257 6.02971 3.92857 5.71429 3.92857H3.42857ZM10.8571 3.92857C10.5417 3.92857 10.2857 3.67257 10.2857 3.35714C10.2857 3.04171 10.5417 2.78571 10.8571 2.78571H13.1429C13.4583 2.78571 13.7143 3.04171 13.7143 3.35714C13.7143 3.67257 13.4583 3.92857 13.1429 3.92857H10.8571Z"
+          fill={color}
+        />
       </svg>
     </div>
   )

packages/ssi-react/src/components/assets/images/WarningImage/index.tsx

@@ -7,7 +7,7 @@ export type Props = {
 }
 
 const WarningImage: FC<Props> = (props: Props): JSX.Element => {
-  const {height = 162, width = 233, style} = props;
+  const {height = 162, width = 233, style} = props
 
   return (
     <div style={{...style, height, width}}>
@@ -95,7 +95,7 @@ const WarningImage: FC<Props> = (props: Props): JSX.Element => {
         </defs>
       </svg>
     </div>
-  );
-};
+  )
+}
 
 export default WarningImage