@sphereon/ui-components.ssi-react 0.2.1-unstable.52 → 0.2.1-unstable.67

package/dist/components/fields/ComboBox/index.js

@@ -32,7 +32,7 @@ const ComboBox = (props) => {
             }),
             menu: (provided) => ({
                 ...provided,
-                maxWidth: 455
+                maxWidth: 455,
             }),
             option: (provided, state) => ({
                 ...provided,

package/dist/components/fields/DragAndDropBox/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
-import { DragAndDropBoxContainerStyled as Container, DragAndDropBoxHiddenInputStyled as HiddenInput, DragAndDropBoxCaptionContainerStyled as CaptionContainer, SSITextH2Styled as Caption, DragAndDropBoxDescriptionStyled as Description } from '../../../styles';
+import { DragAndDropBoxContainerStyled as Container, DragAndDropBoxHiddenInputStyled as HiddenInput, DragAndDropBoxCaptionContainerStyled as CaptionContainer, SSITextH2Styled as Caption, DragAndDropBoxDescriptionStyled as Description, } from '../../../styles';
 const DragAndDropBox = (props) => {
     const { caption, description, onChangeFile } = props;
     const inputFile = useRef(null);
@@ -25,6 +25,6 @@ const DragAndDropBox = (props) => {
     const onDragOver = async (event) => {
         event.preventDefault();
     };
-    return (_jsxs(Container, { onClick: onSelect, onDrop: onDrop, onDragOver: onDragOver, children: [_jsx(HiddenInput, { ref: inputFile, type: 'file', onChange: onChange }), _jsxs(CaptionContainer, { children: [_jsx(Caption, { children: caption }), _jsx(Description, { children: description })] })] }));
+    return (_jsxs(Container, { onClick: onSelect, onDrop: onDrop, onDragOver: onDragOver, children: [_jsx(HiddenInput, { ref: inputFile, type: "file", onChange: onChange }), _jsxs(CaptionContainer, { children: [_jsx(Caption, { children: caption }), _jsx(Description, { children: description })] })] }));
 };
 export default DragAndDropBox;

package/dist/components/fields/FileSelection/index.js

@@ -4,7 +4,7 @@ import ComboBox from '../ComboBox';
 import DocumentIcon from '../../assets/icons/DocumentIcon';
 import ImageIcon from '../../assets/icons/ImageIcon';
 import CrossIcon from '../../assets/icons/CrossIcon';
-import { FileSelectionFieldContainerStyled as Container, FileSelectionFieldContentContainerStyled as ContentContainer, FileSelectionFieldRemoveContainerStyled as RemoveContainer, FileSelectionFieldRemoveButtonStyled as RemoveButton, FileSelectionFieldRemoveButtonCircleIconStyled as RemoveButtonCircleIcon, FileSelectionFieldIconContainerStyled as IconContainer, FileSelectionFieldFileDataContainerStyled as FileDataContainer, FileSelectionFieldFileNameCaptionStyled as FileNameCaption, FileSelectionFieldFileSizeCaptionStyled as FileSizeCaption, FileSelectionFieldPermissionSelectionContainerStyled as PermissionSelectionContainer } from '../../../styles';
+import { FileSelectionFieldContainerStyled as Container, FileSelectionFieldContentContainerStyled as ContentContainer, FileSelectionFieldRemoveContainerStyled as RemoveContainer, FileSelectionFieldRemoveButtonStyled as RemoveButton, FileSelectionFieldRemoveButtonCircleIconStyled as RemoveButtonCircleIcon, FileSelectionFieldIconContainerStyled as IconContainer, FileSelectionFieldFileDataContainerStyled as FileDataContainer, FileSelectionFieldFileNameCaptionStyled as FileNameCaption, FileSelectionFieldFileSizeCaptionStyled as FileSizeCaption, FileSelectionFieldPermissionSelectionContainerStyled as PermissionSelectionContainer, } from '../../../styles';
 import { FileSelectionFieldType } from '../../../types';
 const filePermissions = [
     { label: Localization.translate('file_permission_public_label'), value: 'public' },
@@ -17,8 +17,7 @@ const FileSelection = (props) => {
             await onPermissionChange(selection.value);
         }
     };
-    return (_jsxs(Container, { style: style, children: [_jsxs(ContentContainer, { children: [_jsx(IconContainer, { children: getIcon(fileType) }), _jsxs(FileDataContainer, { children: [_jsx(FileNameCaption, { children: file.name }), file.size && _jsx(FileSizeCaption, { children: getFileSizeDisplay(file.size) })] }), permission && (_jsx(PermissionSelectionContainer, { children: _jsx(ComboBox, { style: { width: 152, marginLeft: 'auto' }, defaultValue: filePermissions.find((selection) => selection.value === permission), onChange: onChange, options: filePermissions }) }))] }), onRemove &&
-                _jsx(RemoveContainer, { children: _jsx(RemoveButton, { onClick: onRemove, children: _jsx(RemoveButtonCircleIcon, { children: _jsx(CrossIcon, { size: 10 }) }) }) })] }));
+    return (_jsxs(Container, { style: style, children: [_jsxs(ContentContainer, { children: [_jsx(IconContainer, { children: getIcon(fileType) }), _jsxs(FileDataContainer, { children: [_jsx(FileNameCaption, { children: file.name }), file.size && _jsx(FileSizeCaption, { children: getFileSizeDisplay(file.size) })] }), permission && (_jsx(PermissionSelectionContainer, { children: _jsx(ComboBox, { style: { width: 152, marginLeft: 'auto' }, defaultValue: filePermissions.find((selection) => selection.value === permission), onChange: onChange, options: filePermissions }) }))] }), onRemove && (_jsx(RemoveContainer, { children: _jsx(RemoveButton, { onClick: onRemove, children: _jsx(RemoveButtonCircleIcon, { children: _jsx(CrossIcon, { size: 10 }) }) }) }))] }));
 };
 const getIcon = (fileType) => {
     switch (fileType) {

package/dist/components/fields/JSONForms/PassportPhotoControl/index.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { and, isObjectControl, optionIs, rankWith, } from '@jsonforms/core';
+import { and, isObjectControl, optionIs, rankWith } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
 import { Localization, parseBase64Uri } from '@sphereon/ui-components.core';
 import DragAndDropBox from '../../DragAndDropBox';
 import PersonPlaceholder from '../../../assets/placeholders/PersonPlaceholder';
 import FileSelection from '../../FileSelection';
 import { base64UriToFile } from '../../../../utils';
-import { PassportPhotoControlContainerStyled as Container, PassportPhotoControlDragAndDropBoxContainerStyled as DragAndDropBoxContainer, PassportPhotoControlPassportPhotoContainerStyled as PassportPhotoContainer, PassportPhotoControlPassportPhotoImageStyled as PassportPhotoImage } from '../../../../styles';
+import { PassportPhotoControlContainerStyled as Container, PassportPhotoControlDragAndDropBoxContainerStyled as DragAndDropBoxContainer, PassportPhotoControlPassportPhotoContainerStyled as PassportPhotoContainer, PassportPhotoControlPassportPhotoImageStyled as PassportPhotoImage, } from '../../../../styles';
 import { FileSelectionFieldType } from '../../../../types';
 const PassportPhotoControl = (props) => {
     const { data, handleChange, path } = props;
@@ -28,10 +28,7 @@ const PassportPhotoControl = (props) => {
         setImage(undefined);
         handleChange(path, undefined);
     };
-    return (_jsxs(Container, { children: [_jsxs(DragAndDropBoxContainer, { children: [_jsx(DragAndDropBox, { caption: Localization.translate('drag_and_drop_upload_image_caption'), description: Localization.translate('credential_attach_image_description'), onChangeFile: onAddImage }), _jsx(PassportPhotoContainer, { children: image
-                            ? _jsx(PassportPhotoImage, { src: image.base64Uri, alt: Localization.translate('passport_photo_alt') })
-                            : _jsx(PersonPlaceholder, {}) })] }), image &&
-                _jsx(FileSelection, { file: image.file, fileType: FileSelectionFieldType.IMAGE, onRemove: onRemoveImage })] }));
+    return (_jsxs(Container, { children: [_jsxs(DragAndDropBoxContainer, { children: [_jsx(DragAndDropBox, { caption: Localization.translate('drag_and_drop_upload_image_caption'), description: Localization.translate('credential_attach_image_description'), onChangeFile: onAddImage }), _jsx(PassportPhotoContainer, { children: image ? _jsx(PassportPhotoImage, { src: image.base64Uri, alt: Localization.translate('passport_photo_alt') }) : _jsx(PersonPlaceholder, {}) })] }), image && _jsx(FileSelection, { file: image.file, fileType: FileSelectionFieldType.IMAGE, onRemove: onRemoveImage })] }));
 };
 export const passportPhotoControlTester = rankWith(3, and(isObjectControl, optionIs('type', 'passportPhoto')));
 export default withJsonFormsControlProps(PassportPhotoControl);

package/dist/components/fields/SSICheckbox/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { OpacityStyleEnum, fontColors, selectionElementColors } from '@sphereon/ui-components.core';
 import { SSICheckboxContainerStyled as Container, SSICheckboxLabelContainerStyled as LabelCaption, SSICheckboxSelectedContainerStyled as SelectedContainer, SSICheckboxUnselectedContainerStyled as UnselectedContainer, } from '../../../styles/components';
 const SSICheckbox = (props) => {
-    const { backgroundColor, borderColor = selectionElementColors.primaryBorderDark, disabled = false, initialValue = false, label, selectedColor = selectionElementColors.primaryDark, labelColor = fontColors.light, checkmarkColor = fontColors.dark, style } = props;
+    const { backgroundColor, borderColor = selectionElementColors.primaryBorderDark, disabled = false, initialValue = false, label, selectedColor = selectionElementColors.primaryDark, labelColor = fontColors.light, checkmarkColor = fontColors.dark, style, } = props;
     const [isChecked, setChecked] = React.useState(initialValue);
     const value = props.isChecked !== undefined ? props.isChecked : isChecked;
     const onValueChange = async () => {

package/dist/components/fields/TextInputField/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import { TextFieldInputContainerStyled as Container, TextFieldInputInputStyled as Input, SSITextH2Styled as Label } from '../../../styles';
 const TextInputField = (props) => {
-    const { initialValue, label, placeholder, maxLength, onChangeValue, style, } = props;
+    const { initialValue, label, placeholder, maxLength, onChangeValue, style } = props;
     const [value, setValue] = React.useState(initialValue);
     const [isFocused, setIsFocused] = useState(false);
     const onChange = async (event) => {
@@ -15,7 +15,6 @@ const TextInputField = (props) => {
     const onBlur = () => {
         setIsFocused(false);
     };
-    return (_jsxs(Container, { style: { ...style }, children: [label &&
-                _jsx(Label, { children: label }), _jsx(Input, { onChange: onChange, value: value, placeholder: isFocused ? '' : placeholder, type: 'text', onFocus: onFocus, onBlur: onBlur, maxLength: maxLength })] }));
+    return (_jsxs(Container, { style: { ...style }, children: [label && _jsx(Label, { children: label }), _jsx(Input, { onChange: onChange, value: value, placeholder: isFocused ? '' : placeholder, type: 'text', onFocus: onFocus, onBlur: onBlur, maxLength: maxLength })] }));
 };
 export default TextInputField;

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

@@ -20,8 +20,7 @@ const getStepRowElement = (stepNumber, status, step, maxSteps) => {
                             }),
                             ...(status === StepStatus.COMPLETED && { color: fontColors.dark }),
                             ...(status === StepStatus.NEXT && { color: fontColors.lightGrey }),
-                        }, children: [_jsx("div", { children: title }), !required &&
-                                _jsx(OptionalText, { children: Localization.translate('optional_label') })] })), description && (_jsx(DescriptionText, { style: { ...((status === StepStatus.CURRENT || status === StepStatus.COMPLETED) && { color: fontColors.dark }) }, children: description }))] }), stepNumber < maxSteps && (_jsx(SpacerLineCell, { style: { gridRow: gridRowNumber + 1 }, children: _jsx(StepLine, { style: {
+                        }, children: [_jsx("div", { children: title }), !required && _jsx(OptionalText, { children: Localization.translate('optional_label') })] })), description && (_jsx(DescriptionText, { style: { ...((status === StepStatus.CURRENT || status === StepStatus.COMPLETED) && { color: fontColors.dark }) }, children: description }))] }), stepNumber < maxSteps && (_jsx(SpacerLineCell, { style: { gridRow: gridRowNumber + 1 }, children: _jsx(StepLine, { style: {
                         ...(status === StepStatus.COMPLETED && {
                             backgroundColor: elementColors.purple,
                         }),

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

@@ -4,8 +4,8 @@ import { Autocomplete, TextField } from '@mui/material';
 import { Localization } from '@sphereon/ui-components.core';
 import FileSelection from '../../fields/FileSelection';
 import DragAndDropBox from '../../fields/DragAndDropBox';
-import { CredentialIssuanceWizardViewContainerStyled as Container, CredentialIssuanceWizardViewCredentialTypeContainerStyled as CredentialTypeContainer, CredentialIssuanceWizardViewCredentialTypeTitleStyled as CredentialTypeTitle, CredentialIssuanceWizardViewFormContainerStyled as FormContainer, CredentialIssuanceWizardViewEvidenceContainerStyled as EvidenceContainer, CredentialIssuanceWizardViewEvidenceContentContainerStyled as EvidenceContentContainer, CredentialIssuanceWizardViewEvidenceTitleContainerStyled as EvidenceTitleContainer, SSITextH2SemiBoldStyled as EvidenceTitle, CredentialIssuanceWizardViewEvidenceTitleOptionalStyled as EvidenceTitleOptional, SSITextH2Styled as EvidenceDescription, CredentialIssuanceWizardViewEvidenceFilesContainerStyled as EvidenceFilesContainer } from '../../../styles';
-import FormView from "../FormView";
+import { CredentialIssuanceWizardViewContainerStyled as Container, CredentialIssuanceWizardViewCredentialTypeContainerStyled as CredentialTypeContainer, CredentialIssuanceWizardViewCredentialTypeTitleStyled as CredentialTypeTitle, CredentialIssuanceWizardViewFormContainerStyled as FormContainer, CredentialIssuanceWizardViewEvidenceContainerStyled as EvidenceContainer, CredentialIssuanceWizardViewEvidenceContentContainerStyled as EvidenceContentContainer, CredentialIssuanceWizardViewEvidenceTitleContainerStyled as EvidenceTitleContainer, SSITextH2SemiBoldStyled as EvidenceTitle, CredentialIssuanceWizardViewEvidenceTitleOptionalStyled as EvidenceTitleOptional, SSITextH2Styled as EvidenceDescription, CredentialIssuanceWizardViewEvidenceFilesContainerStyled as EvidenceFilesContainer, } from '../../../styles';
+import FormView from '../FormView';
 const CredentialIssuanceWizardView = (props) => {
     const { credentialData, credentialTypes, onSelectCredentialTypeChange, onCredentialFormDataChange } = props;
     const [selectedCredentialType, setSelectedCredentialType] = useState(null);
@@ -33,10 +33,8 @@ const CredentialIssuanceWizardView = (props) => {
         onCredentialFormDataChange?.({ ...credentialInput, evidence: evidenceFiles });
     };
     const getEvidenceElements = () => {
-        return evidence.map((file, index) => _jsx(FileSelection, { file: file, onRemove: async () => onRemoveEvidence(index) }, index));
+        return evidence.map((file, index) => (_jsx(FileSelection, { file: file, onRemove: async () => onRemoveEvidence(index) }, index)));
     };
-    return (_jsxs(Container, { children: [_jsxs(CredentialTypeContainer, { children: [_jsx(CredentialTypeTitle, { children: Localization.translate('credential_issuance_wizard_title') }), _jsx(Autocomplete, { options: credentialTypes, sx: { flexGrow: 1 }, renderInput: (params) => _jsx(TextField, { ...params, label: Localization.translate('credential_issuance_wizard_credential_type_label') }), onChange: onCredentialTypeChange })] }), selectedCredentialType &&
-                _jsxs(_Fragment, { children: [_jsx(FormContainer, { children: (selectedCredentialType.schema && selectedCredentialType.uiSchema) &&
-                                _jsx(FormView, { schema: selectedCredentialType.schema, uiSchema: selectedCredentialType.uiSchema, data: credentialData, onFormStateChange: onCredentialFormInputChange }) }), _jsx(EvidenceContainer, { children: _jsxs(EvidenceContentContainer, { children: [_jsxs("div", { children: [_jsxs(EvidenceTitleContainer, { children: [_jsx(EvidenceTitle, { children: Localization.translate('credential_issuance_wizard_evidence_title') }), _jsx(EvidenceTitleOptional, { children: Localization.translate('optional_label') })] }), _jsx(EvidenceDescription, { children: Localization.translate('credential_issuance_wizard_evidence_description') })] }), _jsxs(EvidenceFilesContainer, { children: [_jsx(DragAndDropBox, { caption: Localization.translate('drag_and_drop_upload_evidence_caption'), description: Localization.translate('credential_attach_evidence_description'), onChangeFile: onAddEvidence }), getEvidenceElements()] })] }) })] })] }));
+    return (_jsxs(Container, { children: [_jsxs(CredentialTypeContainer, { children: [_jsx(CredentialTypeTitle, { children: Localization.translate('credential_issuance_wizard_title') }), _jsx(Autocomplete, { options: credentialTypes, sx: { flexGrow: 1 }, renderInput: (params) => (_jsx(TextField, { ...params, label: Localization.translate('credential_issuance_wizard_credential_type_label') })), onChange: onCredentialTypeChange })] }), selectedCredentialType && (_jsxs(_Fragment, { children: [_jsx(FormContainer, { children: selectedCredentialType.schema && selectedCredentialType.uiSchema && (_jsx(FormView, { schema: selectedCredentialType.schema, uiSchema: selectedCredentialType.uiSchema, data: credentialData, onFormStateChange: onCredentialFormInputChange })) }), _jsx(EvidenceContainer, { children: _jsxs(EvidenceContentContainer, { children: [_jsxs("div", { children: [_jsxs(EvidenceTitleContainer, { children: [_jsx(EvidenceTitle, { children: Localization.translate('credential_issuance_wizard_evidence_title') }), _jsx(EvidenceTitleOptional, { children: Localization.translate('optional_label') })] }), _jsx(EvidenceDescription, { children: Localization.translate('credential_issuance_wizard_evidence_description') })] }), _jsxs(EvidenceFilesContainer, { children: [_jsx(DragAndDropBox, { caption: Localization.translate('drag_and_drop_upload_evidence_caption'), description: Localization.translate('credential_attach_evidence_description'), onChangeFile: onAddEvidence }), getEvidenceElements()] })] }) })] }))] }));
 };
 export default CredentialIssuanceWizardView;

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

@@ -7,11 +7,8 @@ const CredentialViewItem = (props) => {
     const { credentialStatus, credentialTitle, issuerName, showTime = false, showCard = true, credentialBranding, style } = props;
     const issueDate = showTime ? toLocalDateTimeString(props.issueDate) : toLocalDateString(props.issueDate);
     const expirationDate = props.expirationDate
-        ? `${Localization.translate('credentials_view_item_expires_on')} ${showTime
-            ? toLocalDateTimeString(props.expirationDate)
-            : toLocalDateString(props.expirationDate)}`
+        ? `${Localization.translate('credentials_view_item_expires_on')} ${showTime ? toLocalDateTimeString(props.expirationDate) : toLocalDateString(props.expirationDate)}`
         : Localization.translate('credential_status_never_expires_date_label');
-    return (_jsxs(Container, { style: { ...style }, children: [showCard &&
-                _jsx(CredentialMiniCardView, { ...credentialBranding }), _jsxs(DetailsContainer, { children: [_jsxs(ContentRowContainer, { children: [_jsxs("div", { children: [_jsx(TitleCaption, { children: credentialTitle }), _jsx(IssuerCaption, { children: issuerName })] }), _jsx(StatusContainer, { children: _jsx(SSIStatusLabel, { status: credentialStatus }) })] }), _jsxs(ContentRowContainer, { children: [_jsx(IssueDateCaption, { children: issueDate }), _jsx(ExpirationDateCaption, { children: expirationDate })] })] })] }));
+    return (_jsxs(Container, { style: { ...style }, children: [showCard && _jsx(CredentialMiniCardView, { ...credentialBranding }), _jsxs(DetailsContainer, { children: [_jsxs(ContentRowContainer, { children: [_jsxs("div", { children: [_jsx(TitleCaption, { children: credentialTitle }), _jsx(IssuerCaption, { children: issuerName })] }), _jsx(StatusContainer, { children: _jsx(SSIStatusLabel, { status: credentialStatus }) })] }), _jsxs(ContentRowContainer, { children: [_jsx(IssueDateCaption, { children: issueDate }), _jsx(ExpirationDateCaption, { children: expirationDate })] })] })] }));
 };
 export default CredentialViewItem;

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

@@ -3,10 +3,10 @@ import { JsonForms } from '@jsonforms/react';
 import { materialCells } from '@jsonforms/material-renderers';
 import { jsonFormsMaterialRenderers } from '../../../renders/jsonFormsRenders';
 const FormView = (props) => {
-    const { data, schema, uiSchema, validationMode = 'ValidateAndShow', renderers = jsonFormsMaterialRenderers, cells = materialCells, style, onFormStateChange } = props;
+    const { data, schema, uiSchema, validationMode = 'ValidateAndShow', renderers = jsonFormsMaterialRenderers, cells = materialCells, style, onFormStateChange, } = props;
     const onFormStateChanged = (state) => {
         void onFormStateChange?.(state);
     };
-    return _jsx("div", { style: style, children: _jsx(JsonForms, { schema: schema, uischema: uiSchema, data: data, renderers: renderers, cells: cells, onChange: onFormStateChanged, validationMode: validationMode }) });
+    return (_jsx("div", { style: style, children: _jsx(JsonForms, { schema: schema, uischema: uiSchema, data: data, renderers: renderers, cells: cells, onChange: onFormStateChanged, validationMode: validationMode }) }));
 };
 export default FormView;

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

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { CredentialStatus, ImageAttributes } from '@sphereon/ui-components.core';
+type Props = {
+    relyingPartyName: string;
+    purpose: string;
+    credentialStatus: CredentialStatus;
+    credentialTitle?: string;
+    credentialSubtitle?: string;
+    uri?: string;
+    logo?: ImageAttributes;
+    textColor?: string;
+};
+declare const InformationRequestView: FC<Props>;
+export default InformationRequestView;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Localization } from '@sphereon/ui-components.core';
+import { InformationRequestViewCardSubtitle as CardSubtitle, InformationRequestViewCardTextContainer as CardTextContainer, InformationRequestViewCardTitle as CardTitle, InformationRequestViewContainerStyled as Container, InformationRequestViewContentContainerStyled as ContentContainer, InformationRequestViewFormContainerStyled as FormContainer, InformationRequestViewFormContainerStyled as PurposeContainer, InformationRequestViewHeaderContainerStyled as HeaderContainer, InformationRequestViewLogoContainerStyled as LogoContainer, InformationRequestViewRPCardContainerStyled as RPCardContainer, InformationRequestViewTitleStyled as HeaderTitle, InformationRequestViewParagraphStyled as PurposeTitle, InformationRequestViewParagraphStyled as FormTitle, InformationRequestViewDescriptionStyled as Description, } from '../../../styles/components';
+import SSIStatusLabel from '../../labels/SSIStatusLabel';
+import SSILogo from '../../assets/logos/SSILogo';
+const InformationRequestView = (args) => {
+    const { relyingPartyName, purpose, uri, credentialStatus, logo, textColor } = args;
+    return (_jsx(Container, { children: _jsxs(ContentContainer, { children: [_jsxs(HeaderContainer, { children: [_jsx(HeaderTitle, { children: Localization.translate('information_request_title') }), _jsx(Description, { children: Localization.translate('information_request_header_description', {
+                                partyName: relyingPartyName,
+                            }) })] }), _jsxs(PurposeContainer, { children: [_jsx(PurposeTitle, { children: Localization.translate('information_request_purpose_label') }), _jsx(Description, { children: purpose })] }), _jsxs(FormContainer, { children: [_jsx(FormTitle, { children: Localization.translate('information_request_form_label') }), _jsx(Description, { children: Localization.translate('information_request_interacting_with', {
+                                partyName: relyingPartyName,
+                            }) }), _jsxs(RPCardContainer, { children: [_jsx(LogoContainer, { children: _jsx(SSILogo, { logo: logo, color: textColor ?? '#000' }) }), _jsxs(CardTextContainer, { children: [_jsx(CardTitle, { children: relyingPartyName }), _jsx(CardSubtitle, { children: "Verifier" }), uri && _jsx(CardSubtitle, { children: uri })] }), _jsx(SSIStatusLabel, { status: credentialStatus })] })] })] }) }));
+};
+export default InformationRequestView;

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;
@@ -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/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

@@ -45,9 +45,10 @@ 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, 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, };
+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

@@ -45,8 +45,9 @@ 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, 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, };
+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/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/ProgressStepIndicator/index.js

@@ -1,7 +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";
+import { SSITextH2Css } from '../../../css';
 export const ProgressStepIndicatorContainerStyled = styled.div `
   background-color: ${backgroundColors.primaryLight};
   border-radius: 24px;
@@ -37,7 +37,7 @@ export const ProgressStepIndicatorSpacerLineCellStyled = styled.div `
 `;
 export const ProgressStepIndicatorTitleTextStyled = styled(SSITextH1SemiBoldStyled) `
   word-break: break-word;
-  
+
   display: flex;
   flex-direction: row;
   gap: 4px;

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.js

@@ -28,6 +28,7 @@ export const SecondaryButtonContainerStyled = styled(SSIRoundedContainerStyled)
     mask-composite: exclude;
   }
 `;
-export const SecondaryButtonCaptionStyled = styled(SSITextH3Styled) ` // FIXME H3 vs H2 mobile
+export const SecondaryButtonCaptionStyled = styled(SSITextH3Styled) `
+  // FIXME H3 vs H2 mobile
   ${gradient100TextCss}
 `;

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

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

@@ -27,3 +27,4 @@ export * from './Pagination';
 export * from './CredentialViewItem';
 export * from './JSONDataView';
 export * from './TextInputField';
+export * from './InformationRequestView';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.2.1-unstable.52+d8b6eef",
+  "version": "0.2.1-unstable.67+9cddb26",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -40,7 +40,7 @@
     "@mui/styled-engine-sc": "^5.14.12",
     "@mui/system": "^5.15.12",
     "@mui/x-date-pickers": "^6.19.5",
-    "@sphereon/ui-components.core": "0.2.1-unstable.52+d8b6eef",
+    "@sphereon/ui-components.core": "0.2.1-unstable.67+9cddb26",
     "@tanstack/react-table": "^8.9.3",
     "react-json-tree": "^0.18.0",
     "react-loader-spinner": "5.4.5",
@@ -59,5 +59,5 @@
   "peerDependencies": {
     "react": ">= 18"
   },
-  "gitHead": "d8b6eef1718b727f7a6fb17fe98069e4899b5900"
+  "gitHead": "9cddb26b8a2dc52d5bdab44c05ae7b01863c23b1"
 }