@sphereon/ui-components.ssi-react 0.1.3-unstable.99 → 0.2.1-next.105

package/dist/components/fields/SSICheckbox/index.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import { CSSProperties, FC, ReactNode } from 'react';
 export interface IProps {
     onValueChange?: (isChecked: boolean) => Promise<void>;
     initialValue?: boolean;
@@ -10,6 +10,7 @@ export interface IProps {
     selectedColor?: string;
     labelColor?: string;
     checkmarkColor?: string;
+    style?: CSSProperties;
 }
 declare const SSICheckbox: FC<IProps>;
 export default SSICheckbox;

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, } = 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 () => {
@@ -16,6 +16,6 @@ const SSICheckbox = (props) => {
         }
         setChecked(!isChecked);
     };
-    return (_jsxs(Container, { onClick: onValueChange, style: { ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, children: [value ? (_jsx(SelectedContainer, { style: { backgroundColor: selectedColor, border: `1px solid ${borderColor}` } })) : (_jsx(UnselectedContainer, { style: { backgroundColor, border: `1px solid ${borderColor}` } })), label && (typeof label === 'string' ? _jsx(LabelCaption, { style: { color: labelColor }, children: label }) : label)] }));
+    return (_jsxs(Container, { onClick: onValueChange, style: { ...style, ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, children: [value ? (_jsx(SelectedContainer, { style: { backgroundColor: selectedColor, border: `1px solid ${borderColor}` } })) : (_jsx(UnselectedContainer, { style: { backgroundColor, border: `1px solid ${borderColor}` } })), label && (typeof label === 'string' ? _jsx(LabelCaption, { style: { color: labelColor }, children: label }) : label)] }));
 };
 export default SSICheckbox;

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.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties, FC } from 'react';
+type Props = {
+    initialValue?: string;
+    value?: string;
+    onChangeValue?: (value: string) => Promise<void>;
+    placeholder?: string;
+    maxLength?: number;
+    label?: string;
+    style?: CSSProperties;
+};
+declare const TextInputField: FC<Props>;
+export default TextInputField;

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

@@ -0,0 +1,20 @@
+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 [value, setValue] = React.useState(initialValue);
+    const [isFocused, setIsFocused] = useState(false);
+    const onChange = async (event) => {
+        setValue(event.target.value);
+        await onChangeValue?.(event.target.value);
+    };
+    const onFocus = () => {
+        setIsFocused(true);
+    };
+    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 })] }));
+};
+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.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { ButtonIcon } from '@sphereon/ui-components.core';
+import { Button } from '../../../types';
+export type Props = {
+    icon: ButtonIcon;
+    buttons: Array<Button>;
+    showBorder?: boolean;
+};
+declare const DropDownList: FC<Props>;
+export default DropDownList;

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

@@ -0,0 +1,34 @@
+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 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;
+    const [showActionsMenu, setShowActionsMenu] = useState(false);
+    const dropdownRef = useRef(null);
+    const onMore = (event) => {
+        setShowActionsMenu(!showActionsMenu);
+        event.stopPropagation();
+    };
+    useEffect(() => {
+        const onClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setShowActionsMenu(false);
+            }
+        };
+        document.addEventListener('mousedown', onClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', onClickOutside);
+        };
+    }, [showActionsMenu]);
+    const getItems = () => {
+        return buttons.map((item, index) => {
+            const showBorder = buttons.length > 1 && index !== buttons.length - 1;
+            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(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.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { ButtonIcon } from '@sphereon/ui-components.core';
+type Props = {
+    label: string;
+    onClick: (args?: any) => Promise<void>;
+    disabled?: boolean;
+    icon?: ButtonIcon;
+    fontColor?: string;
+    showBorder?: boolean;
+    borderColor?: string;
+};
+declare const DropDownListItem: FC<Props>;
+export default DropDownListItem;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 onContainerClick = async (event) => {
+        event.stopPropagation();
+        if (onClick) {
+            await onClick();
+        }
+    };
+    return (_jsxs(Container, { onClick: onContainerClick, style: { ...(showBorder && { borderBottomWidth: 2, borderBottomColor: borderColor }) }, children: [_jsx(ListItemCaption, { children: label }), icon && _jsx(IconContainer, { children: getIcon(icon) })] }));
+};
+export default DropDownListItem;

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

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { CredentialFormData, CredentialFormSelectionType } from '../../../types';
+type Props = {
+    credentialTypes: Array<CredentialFormSelectionType>;
+    onSelectCredentialTypeChange?: (credentialType: CredentialFormSelectionType) => Promise<void>;
+    onCredentialFormDataChange?: (credentialFormData: CredentialFormData) => Promise<void>;
+    credentialData?: Record<any, any>;
+};
+declare const CredentialIssuanceWizardView: FC<Props>;
+export default CredentialIssuanceWizardView;

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

@@ -0,0 +1,40 @@
+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 { 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';
+const CredentialIssuanceWizardView = (props) => {
+    const { credentialData, credentialTypes, onSelectCredentialTypeChange, onCredentialFormDataChange } = props;
+    const [selectedCredentialType, setSelectedCredentialType] = useState(null);
+    const [credentialInput, setCredentialInput] = useState(null);
+    const [evidence, setEvidence] = useState([]);
+    const onCredentialTypeChange = (event, value) => {
+        setCredentialInput(null);
+        setEvidence([]);
+        setSelectedCredentialType(value);
+        onSelectCredentialTypeChange?.(value);
+    };
+    const onCredentialFormInputChange = async (state) => {
+        setCredentialInput(state);
+        onCredentialFormDataChange?.({ ...state, evidence });
+    };
+    const onAddEvidence = async (file) => {
+        const evidenceFiles = [...evidence, file];
+        setEvidence(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, data: { ...(credentialInput?.data ?? {}) } });
+    };
+    const getEvidenceElements = () => {
+        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()] })] }) })] }))] }));
+};
+export default CredentialIssuanceWizardView;

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

@@ -6,6 +6,6 @@ const CredentialMiniCardView = (props) => {
     const { backgroundColor = credentialCardColors.default, backgroundImage, logo, logoColor, style } = props;
     return (_jsx(Container, { style: { ...style, backgroundColor }, children: _jsx(BackgroundImage, { style: {
                 ...(backgroundImage?.uri && { background: `url(${backgroundImage.uri})`, backgroundSize: 'cover' }),
-            }, children: (!backgroundImage || logo) && _jsx(SSILogo, { logo: logo, color: logoColor }) }) }));
+            }, children: (!backgroundImage || logo) && _jsx(SSILogo, { logo: logo, color: logoColor, size: logo?.style?.height }) }) }));
 };
 export default CredentialMiniCardView;

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

@@ -0,0 +1,16 @@
+import { CSSProperties, FC } from 'react';
+import { CredentialStatus } from '@sphereon/ui-components.core';
+import { CredentialMiniCardViewProps } from '../CredentialMiniCardView';
+type Props = {
+    credentialTitle: string;
+    credentialStatus: CredentialStatus;
+    issuerName: string;
+    issueDate: number;
+    expirationDate?: number;
+    showTime?: boolean;
+    showCard?: boolean;
+    credentialBranding?: CredentialMiniCardViewProps;
+    style?: CSSProperties;
+};
+declare const CredentialViewItem: FC<Props>;
+export default CredentialViewItem;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Localization, toLocalDateString, toLocalDateTimeString } from '@sphereon/ui-components.core';
+import SSIStatusLabel from '../../labels/SSIStatusLabel';
+import CredentialMiniCardView from '../CredentialMiniCardView';
+import { CredentialViewItemContainerStyled as Container, CredentialViewItemDetailsContainerStyled as DetailsContainer, SSIFlexDirectionRowViewStyled as ContentRowContainer, CredentialViewItemTitleCaptionStyled as TitleCaption, SSITextH4Styled as IssuerCaption, CredentialViewItemStatusContainerStyled as StatusContainer, SSITextH5Styled as IssueDateCaption, CredentialViewItemExpirationDateCaptionStyled as ExpirationDateCaption, } from '../../../styles';
+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('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 })] })] })] }));
+};
+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/FormView/styles.css

@@ -0,0 +1,105 @@
+.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
+    border-color: #7276F7 !important;
+}
+
+.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
+    border-color: #7276F7 !important;
+}
+
+.MuiTypography-h6 {
+    font-size: 16px !important;
+    font-style: normal !important;
+    font-weight: 600 !important;
+}
+
+.MuiGrid-container {
+    padding: 0 !important;
+}
+
+.MuiFormControl-root {
+    padding: 0 !important;
+
+}
+
+.MuiCardContent-root {
+    padding: 0 !important;
+}
+
+.MuiCardHeader-root {
+    padding: 0 !important;
+}
+
+.MuiPaper-root {
+    margin: 0 !important;
+    background-color: #FBFBFB !important;
+    box-shadow: none !important;
+    border-radius: 4px !important;
+}
+
+.MuiCardHeader-title {
+    font-family: Poppins, serif !important;
+    font-size: 16px !important;
+    font-style: normal !important;
+    font-weight: 400 !important;
+    margin-bottom: 10px !important;
+}
+
+.MuiGrid-root.MuiGrid-container.MuiGrid-direction-xs-column {
+    gap: 24px !important;
+}
+
+.MuiFormLabel-root.MuiInputLabel-root {
+    font-family: 'Poppins', sans-serif !important;
+}
+
+.MuiInputBase-root.MuiOutlinedInput-root .MuiInputBase-input {
+    font-family: 'Poppins', sans-serif !important;
+}
+
+.MuiInputBase-root.MuiOutlinedInput-root {
+    font-family: 'Poppins', sans-serif !important;
+}
+
+.MuiTypography-root {
+    font-family: 'Poppins', sans-serif !important;
+    color: #303030 !important;
+}
+
+.MuiDateCalendar-root {
+    background-color: #ECE6F0 !important;
+    border-radius: 16px !important;
+}
+
+.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation8.MuiPickersPopper-paper {
+    border-radius: 16px !important;
+}
+
+.MuiButtonBase-root.MuiPickersDay-root.Mui-selected.MuiPickersDay-dayWithMargin {
+    background-color: #7276F7 !important;
+}
+
+.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;

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+type Props = {
+    data: Record<string, any>;
+    showHeader?: boolean;
+    shouldExpandNodeInitially?: (() => boolean) | boolean;
+};
+declare const JSONDataView: FC<Props>;
+export default JSONDataView;

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

@@ -0,0 +1,83 @@
+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 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';
+const JSONDataView = (props) => {
+    const { showHeader = true, shouldExpandNodeInitially = () => false } = props;
+    const expandNodeInitially = typeof shouldExpandNodeInitially === 'function' ? shouldExpandNodeInitially : () => shouldExpandNodeInitially;
+    const [focused, setFocused] = React.useState(false);
+    const [data, setData] = React.useState();
+    const preprocessData = async (data) => {
+        if (typeof data !== 'object' || data === null) {
+            return data;
+        }
+        const processedData = {};
+        await Promise.all(Object.entries(data)
+            .filter(([_key, value]) => !!value)
+            .map(async ([key, value]) => {
+            if (typeof value === 'object') {
+                processedData[key] = await preprocessData(value);
+            }
+            else if (typeof value === 'string' && isBase64ImageUri(value)) {
+                const base64Uri = value;
+                const dimensions = await getImageSize(base64Uri);
+                processedData[key] = {
+                    uri: base64Uri,
+                    dimensions: {
+                        height: dimensions.height,
+                        width: dimensions.width,
+                        aspectRatio: calculateAspectRatio(dimensions.width, dimensions.height),
+                    },
+                };
+            }
+            else {
+                processedData[key] = value;
+            }
+        }));
+        return processedData;
+    };
+    useEffect(() => {
+        preprocessData(props.data).then((data) => setData(data));
+    }, [props.data]);
+    const getItemString = () => {
+        return null;
+    };
+    const valueRenderer = (valueAsString, value) => {
+        if (isBoolean(value)) {
+            return parseToBoolean(value) ? _jsx(SSICheckmarkBadge, {}) : _jsx(SSIExclamationMarkBadge, {});
+        }
+        if (typeof value === 'object' && value !== null && 'uri' in value) {
+            const imageData = value;
+            return (_jsx(ImageValue, { style: {
+                    aspectRatio: imageData.dimensions?.aspectRatio,
+                    backgroundImage: `url(${imageData.uri})`,
+                } }));
+        }
+        return _jsx(TextValue, { children: value?.toString() });
+    };
+    const labelRenderer = ([key]) => {
+        return _jsx(Label, { children: key });
+    };
+    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 })) })] }));
+};
+export default JSONDataView;

package/dist/components/views/SSITabView/SSITabViewHeader/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTitleContainerStyled as TitleContainer, SSITextH3Styled as TitleCaption, } from '../../../../styles';
+import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTitleContainerStyled as TitleContainer, SSITabViewHeaderTitleCaptionStyled as TitleCaption, } from '../../../../styles';
 const SSITabViewHeader = (props) => {
     const { navigationState, onIndexChange } = props;
     return (_jsx(Container, { children: navigationState.routes.map((value, index) => {

package/dist/components/views/SSITableView/PaginationControls/index.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, FC } from 'react';
+import { PaginationProps } from '@mui/material';
+export type PaginationControlsProps = PaginationProps & {
+    goToInputId?: string;
+    containerStyle?: CSSProperties;
+};
+declare const PaginationControls: FC<PaginationControlsProps>;
+export default PaginationControls;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack } from '@mui/material';
+import { GoToInputContainer, GoToInputStyled, PaginationContainerStyled, PaginationStyled } from '../../../../styles';
+import { Localization } from '@sphereon/ui-components.core';
+const PaginationControls = (props) => {
+    const { onKeyDown, containerStyle, goToInputId = 'goTo' } = props;
+    return (_jsxs(PaginationContainerStyled, { style: containerStyle, children: [_jsx(Stack, { children: _jsx(PaginationStyled, { ...props }) }), _jsxs(GoToInputContainer, { children: [Localization.translate('table_pagination_input_caption_go_to'), _jsx(GoToInputStyled, { id: goToInputId, onKeyDown: onKeyDown }), Localization.translate('table_pagination_input_caption_page')] })] }));
+};
+export default PaginationControls;

package/dist/components/views/SSITableView/SSITableViewHeader/index.d.ts

@@ -4,6 +4,7 @@ type Props = {
     enableFiltering?: boolean;
     enableMostRecent?: boolean;
     actions?: Array<Button>;
+    onDelete?: () => Promise<void>;
 };
 declare const SSITableViewHeader: React.FC<Props>;
 export default SSITableViewHeader;

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

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