@sphereon/ui-components.ssi-react 0.2.1-unstable.9 → 0.2.1-unstable.92

package/dist/components/views/JSONDataView/index.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { JSONTree } from 'react-json-tree';
-import { backgroundColors, calculateAspectRatio, fontColors, isBase64ImageUri, isBoolean, Localization, parseToBoolean } from '@sphereon/ui-components.core';
+import { backgroundColors, calculateAspectRatio, fontColors, isBase64ImageUri, isBoolean, Localization, parseToBoolean, } from '@sphereon/ui-components.core';
 import SSICheckmarkBadge from '../../assets/badges/SSICheckmarkBadge';
 import SSIExclamationMarkBadge from '../../assets/badges/SSIExclamationMarkBadge';
 import { getImageSize } from '../../../utils';
-import { JSONDataViewContainerStyled as Container, JSONDataViewHeaderContainerStyled as HeaderContainer, JSONDataViewColumnHeaderCaptionStyled as ColumnHeaderCaption, JSONDataViewDataContainerCaptionStyled as ContainerCaption, JSONDataViewDataImageValueStyled as ImageValue, JSONDataViewDataTextValueStyled as TextValue, JSONDataViewDataLabelStyled as Label } from '../../../styles';
+import { JSONDataViewContainerStyled as Container, JSONDataViewHeaderContainerStyled as HeaderContainer, JSONDataViewColumnHeaderCaptionStyled as ColumnHeaderCaption, JSONDataViewDataContainerCaptionStyled as ContainerCaption, JSONDataViewDataImageValueStyled as ImageValue, JSONDataViewDataTextValueStyled as TextValue, JSONDataViewDataLabelStyled as Label, } from '../../../styles';
 const JSONDataView = (props) => {
     const { showHeader = true, shouldExpandNodeInitially = () => false } = props;
     const expandNodeInitially = typeof shouldExpandNodeInitially === 'function' ? shouldExpandNodeInitially : () => shouldExpandNodeInitially;
@@ -16,8 +16,8 @@ const JSONDataView = (props) => {
             return data;
         }
         const processedData = {};
-        await Promise.all(Object.entries(data).map(async ([key, value]) => {
-            if (typeof value === 'object' && value !== null) {
+        await Promise.all(Object.entries(data).filter(([_key, value]) => !!value).map(async ([key, value]) => {
+            if (typeof value === 'object') {
                 processedData[key] = await preprocessData(value);
             }
             else if (typeof value === 'string' && isBase64ImageUri(value)) {
@@ -28,8 +28,8 @@ const JSONDataView = (props) => {
                     dimensions: {
                         height: dimensions.height,
                         width: dimensions.width,
-                        aspectRatio: calculateAspectRatio(dimensions.width, dimensions.height)
-                    }
+                        aspectRatio: calculateAspectRatio(dimensions.width, dimensions.height),
+                    },
                 };
             }
             else {
@@ -48,14 +48,12 @@ const JSONDataView = (props) => {
         if (isBoolean(value)) {
             return parseToBoolean(value) ? _jsx(SSICheckmarkBadge, {}) : _jsx(SSIExclamationMarkBadge, {});
         }
-        if (typeof value === 'object'
-            && value !== null
-            && 'uri' in value) {
+        if (typeof value === 'object' && value !== null && 'uri' in value) {
             const imageData = value;
-            return _jsx(ImageValue, { style: {
+            return (_jsx(ImageValue, { style: {
                     aspectRatio: imageData.dimensions?.aspectRatio,
                     backgroundImage: `url(${imageData.uri})`,
-                } });
+                } }));
         }
         return _jsx(TextValue, { children: value?.toString() });
     };
@@ -65,21 +63,19 @@ const JSONDataView = (props) => {
     const isCustomNode = (value) => {
         return typeof value === 'object' && value !== null && 'uri' in value && 'dimensions' in value;
     };
-    return (_jsxs(Container, { children: [showHeader &&
-                _jsxs(HeaderContainer, { children: [_jsx(ColumnHeaderCaption, { children: Localization.translate('json_data_view_attribute_column_label') }), _jsx(ColumnHeaderCaption, { children: Localization.translate('json_data_view_value_column_label') })] }), _jsx(ContainerCaption, { onMouseEnter: () => setFocused(true), onMouseLeave: () => setFocused(false), children: data &&
-                    _jsx(JSONTree, { theme: {
-                            base0D: fontColors.dark,
-                            tree: {
-                                margin: 0,
-                                backgroundColor: backgroundColors.primaryLight,
-                            },
-                            arrowContainer: {
-                                paddingRight: 6,
-                            },
-                            arrow: {
-                                fontSize: 10,
-                                ...(!focused && { display: 'none' }),
-                            },
-                        }, hideRoot: true, shouldExpandNodeInitially: expandNodeInitially, getItemString: getItemString, labelRenderer: labelRenderer, valueRenderer: valueRenderer, isCustomNode: isCustomNode, data: data }) })] }));
+    return (_jsxs(Container, { children: [showHeader && (_jsxs(HeaderContainer, { children: [_jsx(ColumnHeaderCaption, { children: Localization.translate('json_data_view_attribute_column_label') }), _jsx(ColumnHeaderCaption, { children: Localization.translate('json_data_view_value_column_label') })] })), _jsx(ContainerCaption, { onMouseEnter: () => setFocused(true), onMouseLeave: () => setFocused(false), children: data && (_jsx(JSONTree, { theme: {
+                        base0D: fontColors.dark,
+                        tree: {
+                            margin: 0,
+                            backgroundColor: backgroundColors.primaryLight,
+                        },
+                        arrowContainer: {
+                            paddingRight: 6,
+                        },
+                        arrow: {
+                            fontSize: 10,
+                            ...(!focused && { display: 'none' }),
+                        },
+                    }, hideRoot: true, shouldExpandNodeInitially: expandNodeInitially, getItemString: getItemString, labelRenderer: labelRenderer, valueRenderer: valueRenderer, isCustomNode: isCustomNode, data: data })) })] }));
 };
 export default JSONDataView;

package/dist/components/views/SSITableView/SSITableViewHeader/index.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ButtonIcon, Localization, statusColors } from '@sphereon/ui-components.core';
-import SSIIconButton from '../../../buttons/SSIIconButton';
-import SSIPrimaryButton from '../../../buttons/SSIPrimaryButton';
+import IconButton from '../../../buttons/IconButton';
+import PrimaryButton from '../../../buttons/PrimaryButton';
 import { SSITableViewHeaderActionsContainerStyled as ActionsContainer, SSITableViewHeaderContainerStyled as Container, SSITableViewHeaderContentContainerStyled as ContentContainer, SSITextH3Styled as FilterCaption, SSITableViewHeaderFilterContainerStyled as FilterContainer, TableViewHeaderStaticActionsContainerStyled as StaticActionsContainer, } from '../../../../styles';
 const SSITableViewHeader = (props) => {
     const { enableFiltering = false, enableMostRecent = false, actions = [], onDelete } = props;
     const onDeleteClick = async () => {
         await onDelete?.();
     };
-    return (_jsxs(Container, { children: [_jsx(StaticActionsContainer, { children: onDelete && (_jsx(SSIIconButton, { caption: Localization.translate('action_delete_label'), icon: ButtonIcon.DELETE, iconColor: statusColors.error, onClick: onDeleteClick })) }), _jsx(ContentContainer, { style: { width: 'fit-content' }, children: _jsxs(ActionsContainer, { children: [enableFiltering && (_jsxs(FilterContainer, { children: [_jsx(SSIIconButton, { icon: ButtonIcon.FILTER, onClick: async () => console.log('add filter clicked') }), _jsx(FilterCaption, { children: Localization.translate('action_filter_caption') })] })), actions.map((action, index) => (_jsx(SSIPrimaryButton, { caption: action.caption, onClick: action.onClick, icon: action.icon }, index)))] }) })] }));
+    return (_jsxs(Container, { children: [_jsx(StaticActionsContainer, { children: onDelete && (_jsx(IconButton, { caption: Localization.translate('action_delete_label'), icon: ButtonIcon.DELETE, iconColor: statusColors.error, onClick: onDeleteClick })) }), _jsx(ContentContainer, { style: { width: 'fit-content' }, children: _jsxs(ActionsContainer, { children: [enableFiltering && (_jsxs(FilterContainer, { children: [_jsx(IconButton, { icon: ButtonIcon.FILTER, onClick: async () => console.log('add filter clicked') }), _jsx(FilterCaption, { children: Localization.translate('action_filter_caption') })] })), actions.map((action, index) => (_jsx(PrimaryButton, { caption: action.caption, onClick: action.onClick, icon: action.icon }, index)))] }) })] }));
 };
 export default SSITableViewHeader;

package/dist/components/views/SSITableView/index.js

@@ -9,10 +9,10 @@ import SSIStatusLabel from '../../labels/SSIStatusLabel';
 import CredentialMiniCardView from '../CredentialMiniCardView';
 import DropDownList from '../../lists/DropDownList';
 import { SSITableViewCellContainerStyled as CellContainer, SSITableViewContainerStyled as Container, SSITableViewHeaderCellContainerStyled as HeaderCellContainer, SSITableViewLabelCellStyled as LabelCell, SSITableViewResultCountCaptionStyled as ResultCountCaption, SSITableViewHeaderRowContainerStyled as HeaderRowContainer, SSITableViewRowContainerStyled as RowContainer, SSITableViewTableContainerStyled as TableContainer, TableViewRowSelectionCheckboxContainerStyled as RowSelectionCheckboxContainer, } from '../../../styles';
-import { TableCellType } from '../../../types';
+import { TableCellType, } from '../../../types';
 import PaginationControls from './PaginationControls';
-import ComboBox from "../../fields/ComboBox";
-import CredentialDetailsView from "../CredentialViewItem";
+import ComboBox from '../../fields/ComboBox';
+import CredentialDetailsView from '../CredentialViewItem';
 function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     const ref = React.useRef(null);
     React.useEffect(() => {

package/dist/index.d.ts

@@ -1,8 +1,7 @@
 import SSIToastContainer from './components/messageBoxes/toasts/SSIToastContainer';
 import SSIStatusLabel from './components/labels/SSIStatusLabel';
 import SSICredentialCardView from './components/views/SSICredentialCardView';
-import CredentialMiniCardView from './components/views/CredentialMiniCardView';
-import { CredentialMiniCardViewProps } from './components/views/CredentialMiniCardView';
+import CredentialMiniCardView, { CredentialMiniCardViewProps } from './components/views/CredentialMiniCardView';
 import SSICheckmarkBadge from './components/assets/badges/SSICheckmarkBadge';
 import SSIExclamationMarkBadge from './components/assets/badges/SSIExclamationMarkBadge';
 import SSIPlaceholderLogo from './components/assets/logos/SSIPlaceholderLogo';
@@ -11,15 +10,15 @@ import SSIAddIcon from './components/assets/icons/SSIAddIcon';
 import SSIFilterIcon from './components/assets/icons/SSIFilterIcon';
 import SSIArrowDownIcon from './components/assets/icons/SSIArrowDownIcon';
 import SSITypeLabel from './components/labels/SSITypeLabel';
-import SSIIconButton from './components/buttons/SSIIconButton';
-import SSIPrimaryButton from './components/buttons/SSIPrimaryButton';
+import IconButton from './components/buttons/IconButton';
+import PrimaryButton from './components/buttons/PrimaryButton';
 import DropDownList from './components/lists/DropDownList';
 import SSITableView from './components/views/SSITableView';
 import SSITableViewHeader from './components/views/SSITableView/SSITableViewHeader';
 import SSITabView from './components/views/SSITabView';
 import SSITabViewHeader from './components/views/SSITabView/SSITabViewHeader';
 import SSIProfileIcon from './components/assets/icons/SSIProfileIcon';
-import SSISecondaryButton from './components/buttons/SSISecondaryButton';
+import SecondaryButton from './components/buttons/SecondaryButton';
 import SSICheckbox from './components/fields/SSICheckbox';
 import SSIActivityIndicator from './components/indicators/SSIActivityIndicator';
 import SSIHoverText from './components/fields/SSIHoverText';
@@ -28,6 +27,11 @@ import StepMarker from './components/assets/markers/StepMarker';
 import DocumentIcon from './components/assets/icons/DocumentIcon';
 import CrossIcon from './components/assets/icons/CrossIcon';
 import ImageIcon from './components/assets/icons/ImageIcon';
+import MeatBallsIcon from './components/assets/icons/MeatBallsIcon';
+import PencilIcon from './components/assets/icons/PencilIcon';
+import ViewIcon from './components/assets/icons/ViewIcon';
+import CopyIcon from './components/assets/icons/CopyIcon';
+import DeleteIcon from './components/assets/icons/DeleteIcon';
 import FileSelection from './components/fields/FileSelection';
 import ComboBox from './components/fields/ComboBox';
 import DragAndDropBox from './components/fields/DragAndDropBox';
@@ -40,9 +44,11 @@ import CredentialViewItem from './components/views/CredentialViewItem';
 import JSONDataView from './components/views/JSONDataView';
 import TextInputField from './components/fields/TextInputField';
 import WarningImage from './components/assets/images/WarningImage';
+import FormView from './components/views/FormView';
+import InformationRequestView from './components/views/InformationRequestView';
 import { Row } from '@tanstack/react-table';
 export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
 export * from './utils';
-export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage };
+export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, };

package/dist/index.js

@@ -10,15 +10,15 @@ import SSIAddIcon from './components/assets/icons/SSIAddIcon';
 import SSIFilterIcon from './components/assets/icons/SSIFilterIcon';
 import SSIArrowDownIcon from './components/assets/icons/SSIArrowDownIcon';
 import SSITypeLabel from './components/labels/SSITypeLabel';
-import SSIIconButton from './components/buttons/SSIIconButton';
-import SSIPrimaryButton from './components/buttons/SSIPrimaryButton';
+import IconButton from './components/buttons/IconButton';
+import PrimaryButton from './components/buttons/PrimaryButton';
 import DropDownList from './components/lists/DropDownList';
 import SSITableView from './components/views/SSITableView';
 import SSITableViewHeader from './components/views/SSITableView/SSITableViewHeader';
 import SSITabView from './components/views/SSITabView';
 import SSITabViewHeader from './components/views/SSITabView/SSITabViewHeader';
 import SSIProfileIcon from './components/assets/icons/SSIProfileIcon';
-import SSISecondaryButton from './components/buttons/SSISecondaryButton';
+import SecondaryButton from './components/buttons/SecondaryButton';
 import SSICheckbox from './components/fields/SSICheckbox';
 import SSIActivityIndicator from './components/indicators/SSIActivityIndicator';
 import SSIHoverText from './components/fields/SSIHoverText';
@@ -27,6 +27,11 @@ import StepMarker from './components/assets/markers/StepMarker';
 import DocumentIcon from './components/assets/icons/DocumentIcon';
 import CrossIcon from './components/assets/icons/CrossIcon';
 import ImageIcon from './components/assets/icons/ImageIcon';
+import MeatBallsIcon from './components/assets/icons/MeatBallsIcon';
+import PencilIcon from './components/assets/icons/PencilIcon';
+import ViewIcon from './components/assets/icons/ViewIcon';
+import CopyIcon from './components/assets/icons/CopyIcon';
+import DeleteIcon from './components/assets/icons/DeleteIcon';
 import FileSelection from './components/fields/FileSelection';
 import ComboBox from './components/fields/ComboBox';
 import DragAndDropBox from './components/fields/DragAndDropBox';
@@ -39,8 +44,10 @@ import CredentialViewItem from './components/views/CredentialViewItem';
 import JSONDataView from './components/views/JSONDataView';
 import TextInputField from './components/fields/TextInputField';
 import WarningImage from './components/assets/images/WarningImage';
+import FormView from './components/views/FormView';
+import InformationRequestView from './components/views/InformationRequestView';
 export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
 export * from './utils';
-export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage };
+export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, };

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
-import { backgroundColors, borderColors, SSIRoundedEdgesCss } from "@sphereon/ui-components.core";
-import { SSITextH1SemiBoldStyled, SSITextH2Styled } from "../../../fonts";
+import { backgroundColors, borderColors, SSIRoundedEdgesCss } from '@sphereon/ui-components.core';
+import { SSITextH1SemiBoldStyled, SSITextH2Styled } from '../../../fonts';
 export const CredentialIssuanceWizardViewContainerStyled = styled.div `
   display: flex;
   flex-direction: column;
@@ -41,7 +41,7 @@ export const CredentialIssuanceWizardViewEvidenceContentContainerStyled = styled
   gap: 24px;
 `;
 export const CredentialIssuanceWizardViewEvidenceTitleContainerStyled = styled.div `
-  display: flex; 
+  display: flex;
   flex-direction: row;
   gap: 4px;
 `;

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

@@ -0,0 +1 @@
+export declare const IconButtonContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/styles/components/components/{SSIIconButton → IconButton}/index.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-export const SSIIconButtonContainerStyled = styled.div `
+export const IconButtonContainerStyled = styled.div `
   gap: 8px;
   height: 32px;
   min-width: 32px;

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

@@ -0,0 +1,16 @@
+export declare const InformationRequestViewContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InformationRequestViewContentContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InformationRequestViewHeaderContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InformationRequestViewPurposeContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InformationRequestViewTitleStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InformationRequestViewParagraphStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InformationRequestViewDescriptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InformationRequestViewSubSectionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InformationRequestViewFormContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InformationRequestViewFormTitleStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InformationRequestViewFormDetailsContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InformationRequestViewLogoContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InformationRequestViewRPCardContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InformationRequestViewCardTextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InformationRequestViewCardTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InformationRequestViewCardSubtitle: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,86 @@
+import styled from 'styled-components';
+import { SSITextH1Styled, SSITextH2Styled, SSITextH3Styled, SSITextH4Styled } from '../../../fonts';
+export const InformationRequestViewContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  margin: 0 auto;
+  padding: 24px;
+`;
+export const InformationRequestViewContentContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 500px; /* FIXME */
+  margin-right: auto;
+`;
+export const InformationRequestViewHeaderContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+export const InformationRequestViewPurposeContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background-color: #fbfbfb;
+`;
+export const InformationRequestViewTitleStyled = styled(SSITextH1Styled) `
+  text-align: left;
+  font-weight: bold;
+`;
+export const InformationRequestViewParagraphStyled = styled(SSITextH2Styled) `
+  text-align: left;
+  font-weight: bold;
+`;
+export const InformationRequestViewDescriptionStyled = styled(SSITextH3Styled) `
+  text-align: left;
+  font-weight: normal;
+`;
+export const InformationRequestViewSubSectionStyled = styled(SSITextH3Styled) `
+  text-align: left;
+  font-weight: bold;
+`;
+export const InformationRequestViewFormContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background-color: #fbfbfb;
+`;
+export const InformationRequestViewFormTitleStyled = styled(SSITextH2Styled) `
+  text-align: left;
+`;
+export const InformationRequestViewFormDetailsContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+export const InformationRequestViewLogoContainerStyled = styled.div `
+  margin: 0 12px 0 9px;
+`;
+export const InformationRequestViewRPCardContainerStyled = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background-color: #ffffff;
+`;
+export const InformationRequestViewCardTextContainer = styled.div `
+  flex-grow: 1;
+`;
+export const InformationRequestViewCardTitle = styled(SSITextH4Styled) `
+  font-weight: bold;
+`;
+export const InformationRequestViewCardSubtitle = styled(SSITextH4Styled) `
+  font-weight: normal;
+  color: #555;
+`;

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

@@ -1,13 +1,13 @@
 import styled from 'styled-components';
 import { backgroundColors, borderColors } from '@sphereon/ui-components.core';
 export const PassportPhotoControlContainerStyled = styled.div `
-  display: flex; 
-  flex-direction: column; 
+  display: flex;
+  flex-direction: column;
   gap: 12px;
 `;
 export const PassportPhotoControlDragAndDropBoxContainerStyled = styled.div `
-  display: flex; 
-  flex-direction: row; 
+  display: flex;
+  flex-direction: row;
   gap: 10px;
 `;
 export const PassportPhotoControlPassportPhotoContainerStyled = styled.div `
@@ -23,5 +23,5 @@ export const PassportPhotoControlPassportPhotoContainerStyled = styled.div `
 `;
 export const PassportPhotoControlPassportPhotoImageStyled = styled.img `
   width: 100%;
-  height: auto
+  height: auto;
 `;

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

@@ -0,0 +1 @@
+export declare const PrimaryButtonContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/styles/components/components/{SSIPrimaryButton → PrimaryButton}/index.js

@@ -1,13 +1,14 @@
 import styled from 'styled-components';
 import { SSIRoundedContainerStyled } from '../../containers';
 import { gradientColors } from '../../../colors';
-export const SSIPrimaryButtonContainerStyled = styled(SSIRoundedContainerStyled) `
+export const PrimaryButtonContainerStyled = styled(SSIRoundedContainerStyled) `
   background: ${gradientColors['100']};
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 8px;
-  padding: 9px 6px 9px 6px;
+  padding: 9px;
   cursor: pointer;
+  width: 180px;
 `;

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

@@ -5,4 +5,5 @@ export declare const ProgressStepIndicatorStepTextCellStyled: import("styled-com
 export declare const ProgressStepIndicatorSpacerLineCellStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ProgressStepIndicatorTitleTextStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ProgressStepIndicatorDescriptionTextStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProgressStepIndicatorOptionalTextStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ProgressStepIndicatorStepLineStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { backgroundColors, borderColors, elementColors, fontColors } from '@sphereon/ui-components.core';
 import { SSITextH1SemiBoldStyled, SSITextH3Styled } from '../../../fonts';
+import { SSITextH2Css } from '../../../css';
 export const ProgressStepIndicatorContainerStyled = styled.div `
   background-color: ${backgroundColors.primaryLight};
   border-radius: 24px;
@@ -36,11 +37,20 @@ export const ProgressStepIndicatorSpacerLineCellStyled = styled.div `
 `;
 export const ProgressStepIndicatorTitleTextStyled = styled(SSITextH1SemiBoldStyled) `
   word-break: break-word;
+
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
 `;
 export const ProgressStepIndicatorDescriptionTextStyled = styled(SSITextH3Styled) `
   word-break: break-word;
   color: ${fontColors.lightGrey};
 `;
+export const ProgressStepIndicatorOptionalTextStyled = styled.div `
+  ${SSITextH2Css};
+  line-height: unset;
+  font-style: italic;
+`;
 export const ProgressStepIndicatorStepLineStyled = styled.div `
   width: 4px;
   display: flex;

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

@@ -27,13 +27,13 @@ export const SSITableViewRowContainerStyled = styled.tr `
   &:not(:last-child) {
     border-bottom: 1px solid ${borderColors.lightGrey};
   }
-  
+
   ${props => props.enableHover &&
     css `
-        &:hover {
-          background-color: #ececec; // TODO
-        }
-      `}
+      &:hover {
+        background-color: #ececec; // TODO
+      }
+    `}
 `;
 export const SSITableViewCellContainerStyled = styled.td `
   ${SSITextH3Css};

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

@@ -0,0 +1,2 @@
+export declare const SecondaryButtonContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SecondaryButtonCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/styles/components/components/{SSISecondaryButton → SecondaryButton}/index.js

@@ -2,15 +2,16 @@ import styled from 'styled-components';
 import { SSIRoundedContainerStyled } from '../../containers';
 import { SSITextH3Styled } from '../../../fonts';
 import { gradient100TextCss } from '../../../css';
-export const SSISecondaryButtonContainerStyled = styled(SSIRoundedContainerStyled) `
+export const SecondaryButtonContainerStyled = styled(SSIRoundedContainerStyled) `
   position: relative;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 8px;
-  padding: 9px 6px 9px 6px;
+  padding: 9px;
   cursor: pointer;
+  width: 180px;
 
   &::before {
     content: '';
@@ -27,6 +28,7 @@ export const SSISecondaryButtonContainerStyled = styled(SSIRoundedContainerStyle
     mask-composite: exclude;
   }
 `;
-export const SSISecondaryButtonCaptionStyled = styled(SSITextH3Styled) `
+export const SecondaryButtonCaptionStyled = styled(SSITextH3Styled) `
+  // FIXME H3 vs H2 mobile
   ${gradient100TextCss}
 `;

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

@@ -3,9 +3,9 @@ export * from './DropDownListItem';
 export * from './SSICredentialCardView';
 export * from './SSICredentialMiniCardView';
 export * from './SSIStatusLabel';
-export * from './SSIPrimaryButton';
-export * from './SSISecondaryButton';
-export * from './SSIIconButton';
+export * from './PrimaryButton';
+export * from './SecondaryButton';
+export * from './IconButton';
 export * from './DropDownList';
 export * from './SSITypeLabel';
 export * from './SSITableViewHeader';
@@ -27,3 +27,4 @@ export * from './Pagination';
 export * from './CredentialViewItem';
 export * from './JSONDataView';
 export * from './TextInputField';
+export * from './InformationRequestView';

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

@@ -3,9 +3,9 @@ export * from './DropDownListItem';
 export * from './SSICredentialCardView';
 export * from './SSICredentialMiniCardView';
 export * from './SSIStatusLabel';
-export * from './SSIPrimaryButton';
-export * from './SSISecondaryButton';
-export * from './SSIIconButton';
+export * from './PrimaryButton';
+export * from './SecondaryButton';
+export * from './IconButton';
 export * from './DropDownList';
 export * from './SSITypeLabel';
 export * from './SSITableViewHeader';
@@ -27,3 +27,4 @@ export * from './Pagination';
 export * from './CredentialViewItem';
 export * from './JSONDataView';
 export * from './TextInputField';
+export * from './InformationRequestView';

package/dist/types/indicator/index.d.ts

@@ -1,6 +1,7 @@
 export type ProgressIndicatorStep = {
     title?: string;
     description?: string;
+    required?: boolean;
 };
 export declare enum StepStatus {
     CURRENT = "current",

package/dist/types/view/index.d.ts

@@ -1,9 +1,8 @@
 import { JsonFormsCore, JsonSchema, UISchemaElement } from '@jsonforms/core';
-import { ErrorObject } from 'ajv';
-export type CredentialFormInput = Pick<JsonFormsCore, 'data' | 'errors'>;
-export type CredentialFormData = {
-    data?: any;
-    errors?: ErrorObject[];
+export type JSONFormState<DataType = any> = Pick<JsonFormsCore, 'errors'> & {
+    data: DataType;
+};
+export type CredentialFormData = JSONFormState<Record<any, any>> & {
     evidence: Array<File>;
 };
 export type CredentialFormSelectionType = {

package/dist/utils/IconUtils.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+import { ButtonIcon } from '@sphereon/ui-components.core';
+export declare const getIcon: (icon: ButtonIcon, color?: string) => ReactElement;

package/dist/utils/IconUtils.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ButtonIcon, fontColors } from '@sphereon/ui-components.core';
+import SSIAddIcon from '../components/assets/icons/SSIAddIcon';
+import SSIArrowDownIcon from '../components/assets/icons/SSIArrowDownIcon';
+import MeatBallsIcon from '../components/assets/icons/MeatBallsIcon';
+import CopyIcon from '../components/assets/icons/CopyIcon';
+import DeleteIcon from '../components/assets/icons/DeleteIcon';
+import SSIFilterIcon from '../components/assets/icons/SSIFilterIcon';
+import PencilIcon from '../components/assets/icons/PencilIcon';
+import ViewIcon from '../components/assets/icons/ViewIcon';
+export const getIcon = (icon, color = fontColors.dark) => {
+    switch (icon) {
+        case ButtonIcon.ADD:
+            return _jsx(SSIAddIcon, { color: color });
+        case ButtonIcon.ARROW_DOWN:
+            return _jsx(SSIArrowDownIcon, { color: color });
+        case ButtonIcon.MEATBALLS:
+            return _jsx(MeatBallsIcon, { color: color });
+        case ButtonIcon.EDIT:
+            return _jsx(PencilIcon, { color: color });
+        case ButtonIcon.COPY:
+            return _jsx(CopyIcon, { color: color });
+        case ButtonIcon.DELETE:
+            return _jsx(DeleteIcon, { color: color });
+        case ButtonIcon.FILTER:
+            return _jsx(SSIFilterIcon, { color: color });
+        case ButtonIcon.VIEW:
+            return _jsx(ViewIcon, { color: color });
+        default:
+            return _jsx("div", {});
+    }
+};

package/dist/utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from './FileUtils';
 export * from './ImageUtils';
+export * from './IconUtils';

package/dist/utils/index.js

@@ -1,2 +1,3 @@
 export * from './FileUtils';
 export * from './ImageUtils';
+export * from './IconUtils';