On click of performance tab of an interface it says - not a valid component

{
a!columnsLayout(
columns: {
a!forEach(
items: ri!cardHeader,
expression: {
a!columnLayout(
contents: {
a!cardLayout(
contents: {
a!richTextDisplayField(
value: a!richTextItem(
text: fv!item,
color: "NEGATIVE",
style: "STRONG"
),
marginBelow: "NONE"
),
a!richTextDisplayField(
value: a!richTextItem(text: ri!cardInfo[fv!index]),
marginAbove: "NONE"
)
},
style: "STANDARD",
height: if(
a!isPageWidth("PHONE"),
"AUTO",
if(
or(
a!isPageWidth("TABLET_PORTRAIT"),
a!isPageWidth("TABLET_LANDSCAPE")
),
"MEDIUM_PLUS",
"MEDIUM"
)
)
),
a!richTextDisplayField(
value: {
a!richTextItem(
text: ri!cardDetails[fv!index],
style: "STRONG"
),
a!richTextBulletedList(
items: if(
fv!index = 1,
cons!DG_GLOBAL_PRINCIPLE_FRAMEWORK,
if(
fv!index = 2,
cons!DG_CGS_POLICIES,
if(
fv!index = 3,
cons!DG_CGS_PROCEDURES,
if(
fv!index = 4,
cons!DG_CGS_SPI,
cons!DG_GOVERNANCE_LIBRARY_TOPICS
)
)
)
)
),
a!richTextItem(
text: "(Note, policies are mostly held by Second Line of Defence (SLOD))",
showWhen: fv!index = 2
)
}
)
}
),
a!columnLayout(
contents: {
a!textField(readOnly: true),
a!richTextDisplayField(
value: a!richTextIcon(
icon: if(
a!isPageWidth("PHONE"),
"arrow-circle-down-alt",
"arrow-circle-right-alt"
),
size: "LARGE",
color: "NEGATIVE"
),
align: "CENTER"
)
},
width: "EXTRA_NARROW",
showWhen: not(length(ri!cardInfo) = fv!index)
)
}
)
},
spacing: "NONE"
),
a!columnsLayout(
columns: {
a!columnLayout(
contents: a!cardLayout(
contents: {
a!richTextDisplayField(
value: a!richTextItem(
text: "Training Materials, Handbooks and External Development Updates",
color: "NEGATIVE",
style: "STRONG"
),
marginBelow: "NONE"
),
a!richTextDisplayField(
value: a!richTextItem(
text: "The library also acts a repository for training materials, external development updates, SMCR information and other helpful reference documents"
),
marginAbove: "NONE"
)
},
style: "STANDARD"
)
)
}
)
}