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

package/dist/components/assets/icons/CopyIcon/index.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties, FC } from 'react';
+type Props = {
+    width?: number;
+    height?: number;
+    color?: string;
+    style?: CSSProperties;
+};
+declare const CopyIcon: FC<Props>;
+export default CopyIcon;

package/dist/components/assets/icons/CopyIcon/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+const CopyIcon = (props) => {
+    const { width = 14, height = 19, color = fontColors.dark, style } = props;
+    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 14 19", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("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 }) }) }));
+};
+export default CopyIcon;

package/dist/components/assets/icons/PencilIcon/index.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, FC } from 'react';
+export type Props = {
+    size?: number;
+    color?: string;
+    style?: CSSProperties;
+};
+declare const PencilIcon: FC<Props>;
+export default PencilIcon;

package/dist/components/assets/icons/PencilIcon/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+const PencilIcon = (props) => {
+    const { size = 18, color = fontColors.dark, style } = props;
+    return (_jsx("div", { style: { ...style, width: size, height: size, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2.31294 17.953L5.45728 17.1188C5.71399 17.0513 5.9485 16.9105 6.13529 16.7119L16.5848 5.62715C17.1708 5.00553 17.5 4.16233 17.5 3.2832C17.5 2.40407 17.1708 1.56087 16.5848 0.939102C15.9896 0.336436 15.1982 0 14.3752 0C13.5522 0 12.7608 0.336436 12.1656 0.939102L1.71247 12.0224C1.5257 12.2205 1.39308 12.4688 1.32888 12.7407L0.543408 16.0762C0.434942 16.5376 0.53224 17.0264 0.807378 17.4019C1.08266 17.7773 1.50519 17.998 1.95343 18C2.0746 18.0001 2.19534 17.9844 2.3129 17.9532L2.31294 17.953ZM11.6618 3.34385L14.3151 6.15839L5.6098 15.3929L2.95655 12.5774L11.6618 3.34385ZM14.3742 1.29089C14.8719 1.29089 15.349 1.50057 15.7009 1.87373C16.0527 2.24704 16.2504 2.75317 16.2504 3.28108C16.2504 3.80884 16.0527 4.3151 15.7009 4.68827L15.2006 5.21899L12.5457 2.40623L13.046 1.87551C13.3971 1.49983 13.8756 1.28926 14.3742 1.29089ZM1.75661 16.4004L2.36287 13.8274L4.43498 16.0263L2.00676 16.6657C1.93543 16.6868 1.85921 16.6643 1.80826 16.6074C1.75758 16.5531 1.7379 16.4743 1.75661 16.4004Z", fill: color }) }) }));
+};
+export default PencilIcon;

package/dist/components/assets/icons/ViewIcon/index.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties, FC } from 'react';
+export type Props = {
+    width?: number;
+    height?: number;
+    color?: string;
+    style?: CSSProperties;
+};
+declare const ViewIcon: FC<Props>;
+export default ViewIcon;

package/dist/components/assets/icons/ViewIcon/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+const ViewIcon = (props) => {
+    const { width = 16, height = 17, color = fontColors.dark, style } = props;
+    return (_jsx("div", { style: { ...style, width: width, height: height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("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 }) }) }));
+};
+export default ViewIcon;

package/dist/components/buttons/{SSIIconButton → IconButton}/index.d.ts

@@ -4,8 +4,8 @@ type Props = {
     icon: ButtonIcon;
     caption?: string;
     onClick: MouseEventHandler;
-    disabled?: boolean;
+    disabled?: boolean | (() => boolean);
     iconColor?: string;
 };
-declare const SSIIconButton: FC<Props>;
-export default SSIIconButton;
+declare const IconButton: FC<Props>;
+export default IconButton;

package/dist/components/buttons/IconButton/index.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fontColors, OpacityStyleEnum } from '@sphereon/ui-components.core';
+import { getIcon } from '../../../utils';
+import { IconButtonContainerStyled as Container, SSITextH3Styled as Caption } from '../../../styles';
+const IconButton = (props) => {
+    const { caption, icon, iconColor = fontColors.dark } = props;
+    const disabled = typeof props.disabled === 'function' ? props.disabled() : props.disabled ?? false;
+    const onClick = async (event) => {
+        if (!disabled) {
+            props.onClick(event);
+        }
+    };
+    return (_jsxs(Container, { style: {
+            ...(disabled && { opacity: OpacityStyleEnum.DISABLED }),
+        }, onClick: onClick, children: [getIcon(icon, iconColor), caption && _jsx(Caption, { children: caption })] }));
+};
+export default IconButton;

package/dist/components/buttons/{SSISecondaryButton → PrimaryButton}/index.d.ts

@@ -4,8 +4,8 @@ type Props = {
     caption: string;
     onClick: () => Promise<void>;
     icon?: ButtonIcon;
-    disabled?: boolean;
+    disabled?: boolean | (() => boolean);
     style?: CSSProperties;
 };
-declare const SSISecondaryButton: FC<Props>;
-export default SSISecondaryButton;
+declare const PrimaryButton: FC<Props>;
+export default PrimaryButton;

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

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ButtonIcon, fontColors, OpacityStyleEnum } from '@sphereon/ui-components.core';
 import SSIAddIcon from '../../assets/icons/SSIAddIcon';
-import { SSIPrimaryButtonContainerStyled as Container, SSITextH3LightStyled as Caption } from '../../../styles';
-const SSIPrimaryButton = (props) => {
-    const { caption, icon, onClick, disabled = false, style } = props;
+import { PrimaryButtonContainerStyled as Container, SSITextH3LightStyled as Caption } from '../../../styles';
+const PrimaryButton = (props) => {
+    const { caption, icon, onClick, style } = props;
+    const disabled = typeof props.disabled === 'function' ? props.disabled() : props.disabled ?? false;
     const getIcon = (icon, color) => {
         switch (icon) {
             case ButtonIcon.ADD:
@@ -19,4 +20,4 @@ const SSIPrimaryButton = (props) => {
     };
     return (_jsxs(Container, { style: { ...style, ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, onClick: onClicked, children: [icon && getIcon(icon, fontColors.light), _jsx(Caption, { style: { ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, children: caption })] }));
 };
-export default SSIPrimaryButton;
+export default PrimaryButton;

package/dist/components/buttons/{SSIPrimaryButton → SecondaryButton}/index.d.ts

@@ -4,8 +4,8 @@ type Props = {
     caption: string;
     onClick: () => Promise<void>;
     icon?: ButtonIcon;
-    disabled?: boolean;
+    disabled?: boolean | (() => boolean);
     style?: CSSProperties;
 };
-declare const SSIPrimaryButton: FC<Props>;
-export default SSIPrimaryButton;
+declare const SecondaryButton: FC<Props>;
+export default SecondaryButton;

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ButtonIcon, OpacityStyleEnum } from '@sphereon/ui-components.core';
 import SSIAddIcon from '../../assets/icons/SSIAddIcon';
-import { SSISecondaryButtonCaptionStyled as Caption, SSISecondaryButtonContainerStyled as Container } from '../../../styles';
+import { SecondaryButtonCaptionStyled as Caption, SecondaryButtonContainerStyled as Container } from '../../../styles';
 import { gradientColors } from '../../../styles/colors';
-const SSISecondaryButton = (props) => {
-    const { caption, icon, onClick, disabled = false, style } = props;
+const SecondaryButton = (props) => {
+    const { caption, icon, onClick, style } = props;
+    const disabled = typeof props.disabled === 'function' ? props.disabled() : props.disabled ?? false;
     const getIcon = (icon, color) => {
         switch (icon) {
             case ButtonIcon.ADD:
@@ -20,4 +21,4 @@ const SSISecondaryButton = (props) => {
     };
     return (_jsxs(Container, { style: { ...style, ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, onClick: onClicked, children: [icon && getIcon(icon, gradientColors['100']), _jsx(Caption, { style: { ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, children: caption })] }));
 };
-export default SSISecondaryButton;
+export default SecondaryButton;

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/SSIHoverText/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SSIHoverTextTextStyled as Text, SSIHoverTextContainerStyled as Container, SSIHoverTextTextHoverStyled as TextHover, } from '../../../styles/components';
 const SSIHoverText = (props) => {
     const { text, truncationLength, enableHover = true } = props;
-    const value = truncationLength ? text.substring(0, truncationLength) : text;
+    const value = truncationLength ? `${text.substring(0, truncationLength)}...` : text;
     return (_jsxs(Container, { children: [_jsx(Text, { children: value }), enableHover && _jsx(TextHover, { children: text })] }));
 };
 export default SSIHoverText;

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

@@ -1,16 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { elementColors, fontColors } from '@sphereon/ui-components.core';
+import { elementColors, fontColors, Localization } from '@sphereon/ui-components.core';
 import StepMarker from '../../assets/markers/StepMarker';
 import { gradientColors } from '../../../styles/colors';
-import { ProgressStepIndicatorContainerStyled as Container, ProgressStepIndicatorContentGridContainerStyled as GridContainer, ProgressStepIndicatorStepMarkerCellStyled as StepMarkerCell, ProgressStepIndicatorStepLineStyled as StepLine, ProgressStepIndicatorStepTextCellStyled as StepTextCell, ProgressStepIndicatorTitleTextStyled as TitleText, ProgressStepIndicatorDescriptionTextStyled as DescriptionText, ProgressStepIndicatorSpacerLineCellStyled as SpacerLineCell, } from '../../../styles';
+import { ProgressStepIndicatorContainerStyled as Container, ProgressStepIndicatorContentGridContainerStyled as GridContainer, ProgressStepIndicatorStepMarkerCellStyled as StepMarkerCell, ProgressStepIndicatorStepLineStyled as StepLine, ProgressStepIndicatorStepTextCellStyled as StepTextCell, ProgressStepIndicatorTitleTextStyled as TitleText, ProgressStepIndicatorDescriptionTextStyled as DescriptionText, ProgressStepIndicatorOptionalTextStyled as OptionalText, ProgressStepIndicatorSpacerLineCellStyled as SpacerLineCell, } from '../../../styles';
 import { StepStatus } from '../../../types';
 const getStepRowElement = (stepNumber, status, step, maxSteps) => {
+    const { title, description, required = true } = step;
     const gridRowNumber = stepNumber * 2 - 1;
     return (_jsxs(_Fragment, { children: [_jsxs(StepMarkerCell, { style: { gridRow: gridRowNumber }, children: [_jsx(StepMarker, { stepNumber: stepNumber, status: status }), stepNumber < maxSteps && (_jsx(StepLine, { style: {
                             ...(status === StepStatus.COMPLETED && {
                                 backgroundColor: elementColors.purple,
                             }),
-                        } }))] }), _jsxs(StepTextCell, { style: { gridRow: gridRowNumber }, children: [step.title && (_jsx(TitleText, { style: {
+                        } }))] }), _jsxs(StepTextCell, { style: { gridRow: gridRowNumber }, children: [title && (_jsxs(TitleText, { style: {
                             ...(status === StepStatus.CURRENT && {
                                 background: gradientColors['100'],
                                 backgroundClip: 'text',
@@ -19,7 +20,7 @@ const getStepRowElement = (stepNumber, status, step, maxSteps) => {
                             }),
                             ...(status === StepStatus.COMPLETED && { color: fontColors.dark }),
                             ...(status === StepStatus.NEXT && { color: fontColors.lightGrey }),
-                        }, children: step.title })), step.description && (_jsx(DescriptionText, { style: { ...((status === StepStatus.CURRENT || status === StepStatus.COMPLETED) && { color: fontColors.dark }) }, children: step.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/lists/DropDownList/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from 'react';
 import { borderColors } from '@sphereon/ui-components.core';
 import DropDownListItem from '../DropDownListItem';
-import SSIIconButton from '../../buttons/SSIIconButton';
+import IconButton from '../../buttons/IconButton';
 import { DropDownListContainerStyled as Container, DropDownContainerStyled as DropDownContainer, DropDownListButtonStyled as ListButton, } from '../../../styles/components';
 const DropDownList = (props) => {
     const { icon, buttons, showBorder = false } = props;
@@ -29,6 +29,6 @@ const DropDownList = (props) => {
             return (_jsx(DropDownListItem, { showBorder: showBorder, label: item.caption, onClick: item.onClick, icon: item.icon, fontColor: item.fontColor }, index));
         });
     };
-    return (_jsxs(Container, { ref: dropdownRef, children: [_jsx(ListButton, { children: _jsx(SSIIconButton, { icon: icon, onClick: onMore }) }), showActionsMenu && (_jsx(DropDownContainer, { style: { ...(showBorder && { borderWidth: 2, borderColor: borderColors.lightGrey, borderStyle: 'solid' }) }, children: getItems() }))] }));
+    return (_jsxs(Container, { ref: dropdownRef, children: [_jsx(ListButton, { children: _jsx(IconButton, { icon: icon, onClick: onMore }) }), showActionsMenu && (_jsx(DropDownContainer, { style: { ...(showBorder && { borderWidth: 2, borderColor: borderColors.lightGrey, borderStyle: 'solid' }) }, children: getItems() }))] }));
 };
 export default DropDownList;

package/dist/components/lists/DropDownListItem/index.js

@@ -1,17 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DropDownListItemContainerStyled as Container, DropDownListItemIconContainerStyled as IconContainer, DropDownListItemCaptionContainerStyled as ListItemCaption, } from '../../../styles/components';
-import DeleteIcon from '../../assets/icons/DeleteIcon';
-import { borderColors, ButtonIcon, fontColors } from '@sphereon/ui-components.core';
+import { borderColors, fontColors } from '@sphereon/ui-components.core';
+import { getIcon } from '../../../utils';
+import { DropDownListItemCaptionContainerStyled as ListItemCaption, DropDownListItemContainerStyled as Container, DropDownListItemIconContainerStyled as IconContainer, } from '../../../styles/components';
 const DropDownListItem = (props) => {
     const { disabled, label, icon, showBorder = false, fontColor = fontColors.dark, borderColor = borderColors.light, onClick } = props;
-    const getIcon = (icon) => {
-        switch (icon) {
-            case ButtonIcon.DELETE:
-                return _jsx(DeleteIcon, { color: fontColors.dark });
-            default:
-                return _jsx("div", {});
-        }
-    };
     const onContainerClick = async (event) => {
         event.stopPropagation();
         if (onClick) {

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

@@ -1,13 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Autocomplete, TextField } from '@mui/material';
-import { materialCells } from '@jsonforms/material-renderers';
-import { JsonForms } from '@jsonforms/react';
 import { Localization } from '@sphereon/ui-components.core';
 import FileSelection from '../../fields/FileSelection';
 import DragAndDropBox from '../../fields/DragAndDropBox';
-import { jsonFormsMaterialRenderers } from '../../../renders/jsonFormsRenders';
-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 { 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);
@@ -19,25 +17,24 @@ const CredentialIssuanceWizardView = (props) => {
         setSelectedCredentialType(value);
         onSelectCredentialTypeChange?.(value);
     };
-    const onCredentialFormInputChange = (state) => {
+    const onCredentialFormInputChange = async (state) => {
         setCredentialInput(state);
         onCredentialFormDataChange?.({ ...state, evidence });
     };
     const onAddEvidence = async (file) => {
         const evidenceFiles = [...evidence, file];
         setEvidence(evidenceFiles);
-        onCredentialFormDataChange?.({ ...credentialInput, evidence: evidenceFiles });
+        onCredentialFormDataChange?.({ ...credentialInput, evidence: evidenceFiles, data: { ...(credentialInput?.data ?? {}) } });
     };
     const onRemoveEvidence = async (index) => {
         evidence.splice(index, 1);
         const evidenceFiles = [...evidence];
         setEvidence(evidenceFiles);
-        onCredentialFormDataChange?.({ ...credentialInput, evidence: evidenceFiles });
+        onCredentialFormDataChange?.({ ...credentialInput, evidence: evidenceFiles, data: { ...(credentialInput?.data ?? {}) } });
     };
     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: _jsx(JsonForms, { schema: selectedCredentialType.schema, uischema: selectedCredentialType.uiSchema, data: credentialData, renderers: jsonFormsMaterialRenderers, cells: materialCells, onChange: 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('credential_issuance_wizard_evidence_optional_title') })] }), _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.d.ts

@@ -0,0 +1,20 @@
+import { CSSProperties, FC } from 'react';
+import { JsonFormsCellRendererRegistryEntry, JsonFormsRendererRegistryEntry, JsonSchema, Middleware, UISchemaElement, ValidationMode } from '@jsonforms/core';
+import { JSONFormState } from '../../../types';
+import Ajv from 'ajv';
+type Props<DataType = Record<any, any>> = {
+    schema: JsonSchema;
+    uiSchema: UISchemaElement;
+    validationMode?: ValidationMode;
+    data?: DataType;
+    renderers?: Array<JsonFormsRendererRegistryEntry>;
+    cells?: Array<JsonFormsCellRendererRegistryEntry>;
+    onFormStateChange?: (state: JSONFormState) => Promise<void>;
+    style?: CSSProperties;
+    middleware?: Middleware;
+    ajv?: Ajv;
+    readonly?: boolean;
+    config?: any;
+};
+declare const FormView: FC<Props>;
+export default FormView;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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, middleware, ajv, onFormStateChange, readonly = false, config, } = 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, middleware: middleware, ajv: ajv, readonly: readonly, config: config }) }));
+};
+export default FormView;

package/dist/components/views/{CredentialIssuanceWizardView → FormView}/styles.css

@@ -6,12 +6,7 @@
     border-color: #7276F7 !important;
 }
 
-.MuiInputLabel-root.MuiFormLabel-root {
-    color: #303030 !important;
-}
-
 .MuiTypography-h6 {
-    color: #303030 !important;
     font-size: 16px !important;
     font-style: normal !important;
     font-weight: 600 !important;
@@ -38,6 +33,7 @@
     margin: 0 !important;
     background-color: #FBFBFB !important;
     box-shadow: none !important;
+    border-radius: 4px !important;
 }
 
 .MuiCardHeader-title {
@@ -46,7 +42,6 @@
     font-style: normal !important;
     font-weight: 400 !important;
     margin-bottom: 10px !important;
-    color: #303030 !important;
 }
 
 .MuiGrid-root.MuiGrid-container.MuiGrid-direction-xs-column {
@@ -67,6 +62,7 @@
 
 .MuiTypography-root {
     font-family: 'Poppins', sans-serif !important;
+    color: #303030 !important;
 }
 
 .MuiDateCalendar-root {
@@ -85,3 +81,25 @@
 .MuiButtonBase-root.MuiPickersDay-root.MuiPickersDay-dayWithMargin:hover {
     background-color: #B7B8D9 !important;
 }
+
+.base-Popper-root {
+    border-radius: 4px !important;
+}
+
+.MuiFormGroup-root.MuiFormGroup-row {
+    display: grid !important;
+    grid-template-columns: repeat(2, 1fr) !important;
+    grid-gap: 10px !important;
+}
+
+.MuiGrid-root.MuiGrid-item.MuiGrid-grid-xs-true:empty {
+    display: none !important;
+}
+
+textarea.MuiInputBase-input.MuiInputBase-inputMultiline {
+    min-height: 112px !important;
+}
+
+.MuiTabs-scroller.MuiTabs-fixed {
+    margin-bottom: 12px !important;
+}

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;