@sphereon/ui-components.ssi-react 0.1.3-unstable.14 → 0.1.3-unstable.145

package/dist/components/fields/JSONForms/PassportPhotoControl/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { RankedTester } from '@jsonforms/core';
+export declare const passportPhotoControlTester: RankedTester;
+declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
+export default _default;

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+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 { FileSelectionFieldType } from '../../../../types';
+const PassportPhotoControl = (props) => {
+    const { data, handleChange, path } = props;
+    const [image, setImage] = useState(data && { file: base64UriToFile(data.base64Uri, data.fileName, data.mimeType), base64Uri: data.base64Uri });
+    const onAddImage = async (file) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            const result = reader.result;
+            if (typeof result === 'string') {
+                const parsedBase64Uri = parseBase64Uri(result);
+                setImage({ file, base64Uri: result });
+                handleChange(path, { fileName: file.name, mimeType: parsedBase64Uri.mimeType, base64Uri: result });
+            }
+        };
+        reader.readAsDataURL(file);
+    };
+    const onRemoveImage = async () => {
+        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 })] }));
+};
+export const passportPhotoControlTester = rankWith(3, and(isObjectControl, optionIs('type', 'passportPhoto')));
+export default withJsonFormsControlProps(PassportPhotoControl);

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

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from 'react';
+export interface IProps {
+    onValueChange?: (isChecked: boolean) => Promise<void>;
+    initialValue?: boolean;
+    isChecked?: boolean;
+    label?: string | ReactNode;
+    disabled?: boolean;
+    backgroundColor?: string;
+    borderColor?: string;
+    selectedColor?: string;
+    labelColor?: string;
+    checkmarkColor?: string;
+}
+declare const SSICheckbox: FC<IProps>;
+export default SSICheckbox;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 [isChecked, setChecked] = React.useState(initialValue);
+    const value = props.isChecked !== undefined ? props.isChecked : isChecked;
+    const onValueChange = async () => {
+        const { onValueChange } = props;
+        if (disabled) {
+            return;
+        }
+        if (onValueChange) {
+            await onValueChange(!isChecked);
+        }
+        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)] }));
+};
+export default SSICheckbox;

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export type Props = {
+    text: string;
+    truncationLength?: number;
+    enableHover?: boolean;
+};
+declare const SSIHoverText: FC<Props>;
+export default SSIHoverText;

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

@@ -0,0 +1,8 @@
+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;
+    return (_jsxs(Container, { children: [_jsx(Text, { children: value }), enableHover && _jsx(TextHover, { children: text })] }));
+};
+export default SSIHoverText;

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

@@ -0,0 +1,9 @@
+import { CSSProperties, FC } from 'react';
+import { ProgressIndicatorStep } from '../../../types';
+type Props = {
+    steps: Array<ProgressIndicatorStep>;
+    activeStep: number;
+    style?: CSSProperties;
+};
+declare const ProgressStepIndicator: FC<Props>;
+export default ProgressStepIndicator;

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { elementColors, fontColors } 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 { StepStatus } from '../../../types';
+const getStepRowElement = (stepNumber, status, step, maxSteps) => {
+    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: {
+                            ...(status === StepStatus.CURRENT && {
+                                background: gradientColors['100'],
+                                backgroundClip: 'text',
+                                WebkitBackgroundClip: 'text',
+                                WebkitTextFillColor: 'transparent',
+                            }),
+                            ...(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: {
+                        ...(status === StepStatus.COMPLETED && {
+                            backgroundColor: elementColors.purple,
+                        }),
+                    } }) }))] }));
+};
+const getStepStatus = (stepNumber, activeStep) => {
+    if (stepNumber < activeStep) {
+        return StepStatus.COMPLETED;
+    }
+    else if (stepNumber > activeStep) {
+        return StepStatus.NEXT;
+    }
+    else if (stepNumber === activeStep) {
+        return StepStatus.CURRENT;
+    }
+    throw new Error('Unable to determine step status');
+};
+const getStepElements = (activeStep, steps) => {
+    return steps.map((step, index) => {
+        const stepNumber = index + 1;
+        const stepStatus = getStepStatus(stepNumber, activeStep);
+        return getStepRowElement(stepNumber, stepStatus, step, steps.length);
+    });
+};
+const ProgressStepIndicator = (props) => {
+    const { activeStep, steps = [], style } = props;
+    return (_jsx(Container, { style: style, children: _jsx(GridContainer, { children: getStepElements(activeStep, steps) }) }));
+};
+export default ProgressStepIndicator;

package/dist/components/indicators/SSIActivityIndicator/index.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+interface Props {
+    size?: string | number;
+    color?: string;
+    style?: {
+        [key: string]: string;
+    };
+}
+declare const SSIActivityIndicator: FC<Props>;
+export default SSIActivityIndicator;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Oval } from 'react-loader-spinner';
+import { elementColors } from '@sphereon/ui-components.core';
+const SSIActivityIndicator = (props) => {
+    const { size = 80, color = elementColors.blue, style } = props;
+    return (_jsx(Oval, { width: size, height: size, color: color, secondaryColor: color, strokeWidth: 5, strokeWidthSecondary: 5, visible: true, wrapperStyle: style }));
+};
+export default SSIActivityIndicator;

package/dist/components/labels/SSIStatusLabel/index.d.ts

@@ -1,5 +1,5 @@
-import { LabelStatus } from '@sphereon/ui-components.core';
 import { CSSProperties, FC } from 'react';
+import { LabelStatus } from '@sphereon/ui-components.core';
 type Props = {
     status: LabelStatus;
     showIcon?: boolean;

package/dist/components/labels/SSIStatusLabel/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CredentialStatus, IssuerStatus, statusColors, getStatusTranslation } from '@sphereon/ui-components.core';
-import { SSIStatusLabelBadgeContainer as BadgeContainer, SSIStatusLabelContainerStyled as Container, SSIStatusLabelStatusCaptionStyled as StatusCaption, } from '../../../styles/components';
 import SSICheckmarkBadge from '../../../components/assets/badges/SSICheckmarkBadge';
 import SSIExclamationMarkBadge from '../../../components/assets/badges/SSIExclamationMarkBadge';
+import { SSIStatusLabelBadgeContainer as BadgeContainer, SSIStatusLabelContainerStyled as Container, SSIStatusLabelStatusCaptionStyled as StatusCaption, } from '../../../styles';
 const SSIStatusLabel = (props) => {
     const { status, color = statusColors[status], style, showIcon = false } = props;
     return (_jsxs(Container, { style: { ...style, borderColor: color }, children: [showIcon && _jsx(BadgeContainer, { children: getStatusBadge(status, color) }), _jsx(StatusCaption, { style: { color }, children: getStatusTranslation(status) })] }));

package/dist/components/labels/SSITypeLabel/index.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import { LabelTypeEnum } from '../../../types';
-export type Props = {
-    type: LabelTypeEnum;
+import { LabelType } from '@sphereon/ui-components.core';
+type Props = {
+    type: LabelType;
 };
 declare const SSITypeLabel: FC<Props>;
 export default SSITypeLabel;

package/dist/components/labels/SSITypeLabel/index.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { LabelTypeEnum } from '../../../types';
-import { SSITypeLabelContainerStyled as Container } from '../../../styles/components';
-import { backgroundColors, gradientColors } from '@sphereon/ui-components.core';
+import { backgroundColors, LabelType } from '@sphereon/ui-components.core';
+import { SSITypeLabelContainerStyled as Container } from '../../../styles';
+import { gradientColors } from '../../../styles/colors';
 const getBackground = (type) => {
     switch (type) {
-        case LabelTypeEnum.ISSUER:
+        case LabelType.ISSUER:
             return gradientColors['200'];
-        case LabelTypeEnum.VERIFIER:
+        case LabelType.VERIFIER:
             return gradientColors['100'];
         default:
             return backgroundColors.primaryLight;

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 SSIIconButton from '../../buttons/SSIIconButton';
+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(SSIIconButton, { 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,23 @@
+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';
+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) {
+            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/messageBoxes/toasts/SSIToast/index.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { ToastType } from '@sphereon/ui-components.core';
+type Props = {
+    type: ToastType;
+    title?: string;
+    message?: string;
+    showBadge?: boolean;
+    onClick?: () => Promise<void>;
+};
+declare const SSIToast: FC<Props>;
+export default SSIToast;

package/dist/components/messageBoxes/toasts/SSIToast/index.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ToastType } from '@sphereon/ui-components.core';
+import SSICheckmarkBadge from '../../../assets/badges/SSICheckmarkBadge';
+import SSIExclamationMarkBadge from '../../../assets/badges/SSIExclamationMarkBadge';
+import { SSIToastContainerStyled as Container, SSIToastMessageTextStyled as MessageText, SSIFlexDirectionRowViewStyled as MessageContainer, SSITextH2SemiBoldStyled as TitleText, SSIToastTitleContainerStyled as TitleContainer, SSIToastBadgeContainerStyled as ToastBadgeContainer, } from '../../../../styles';
+const getBadge = (type) => {
+    switch (type) {
+        case ToastType.SUCCESS:
+            return _jsx(SSICheckmarkBadge, {});
+        case ToastType.ERROR:
+            return _jsx(SSIExclamationMarkBadge, {});
+        default:
+            return _jsx("div", {});
+    }
+};
+const SSIToast = (props) => {
+    const { type, title, message, showBadge = true, onClick } = props;
+    return (_jsxs(Container, { onClick: onClick, children: [title && (_jsxs(TitleContainer, { children: [showBadge && _jsx(ToastBadgeContainer, { children: getBadge(type) }), _jsx(TitleText, { children: title })] })), _jsxs(MessageContainer, { children: [!title && showBadge && _jsx(ToastBadgeContainer, { children: getBadge(type) }), message && _jsx(MessageText, { style: { ...(showBadge && { textAlign: 'center' }) }, children: message })] })] }));
+};
+export default SSIToast;

package/dist/components/messageBoxes/toasts/SSIToastContainer/index.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { ToastPosition } from 'react-toastify';
+type Props = {
+    autoHide?: boolean;
+    visibilityTimeMs?: number;
+    position?: ToastPosition;
+    pauseOnHover?: boolean;
+};
+declare const SSIToastContainer: FC<Props>;
+export default SSIToastContainer;

package/dist/components/messageBoxes/toasts/SSIToastContainer/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SSIToastContainerContainerStyled as Container } from '../../../../styles';
+const SSIToastContainer = (props) => {
+    const { position = 'top-right', autoHide = true, visibilityTimeMs = 6000, pauseOnHover = true } = props;
+    return (_jsx(Container, { position: position, autoClose: !autoHide ? autoHide : visibilityTimeMs, hideProgressBar: true, closeButton: false, pauseOnHover: pauseOnHover }));
+};
+export default SSIToastContainer;

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,43 @@
+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, SSITextH2SemiBoldDarkStyled as EvidenceTitle, CredentialIssuanceWizardViewEvidenceTitleOptionalStyled as EvidenceTitleOptional, SSITextH2DarkStyled as EvidenceDescription, CredentialIssuanceWizardViewEvidenceFilesContainerStyled as EvidenceFilesContainer } from '../../../styles';
+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 = (state) => {
+        setCredentialInput(state);
+        onCredentialFormDataChange?.({ ...state, evidence });
+    };
+    const onAddEvidence = async (file) => {
+        const evidenceFiles = [...evidence, file];
+        setEvidence(evidenceFiles);
+        onCredentialFormDataChange?.({ ...credentialInput, evidence: evidenceFiles });
+    };
+    const onRemoveEvidence = async (index) => {
+        evidence.splice(index, 1);
+        const evidenceFiles = [...evidence];
+        setEvidence(evidenceFiles);
+        onCredentialFormDataChange?.({ ...credentialInput, evidence: evidenceFiles });
+    };
+    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: _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()] })] }) })] })] }));
+};
+export default CredentialIssuanceWizardView;

package/dist/components/views/CredentialIssuanceWizardView/styles.css

@@ -0,0 +1,87 @@
+.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
+    border-color: #7276F7 !important;
+}
+
+.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
+    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;
+}
+
+.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;
+}
+
+.MuiCardHeader-title {
+    font-family: Poppins, serif !important;
+    font-size: 16px !important;
+    font-style: normal !important;
+    font-weight: 400 !important;
+    margin-bottom: 10px !important;
+    color: #303030 !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;
+}
+
+.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;
+}

package/dist/components/views/{SSICredentialMiniCardView → CredentialMiniCardView}/index.d.ts

@@ -1,11 +1,11 @@
 import { CSSProperties, FC } from 'react';
 import { ImageAttributes } from '@sphereon/ui-components.core';
-type Props = {
+export type CredentialMiniCardViewProps = {
     backgroundImage?: ImageAttributes;
     backgroundColor?: string;
     logo?: ImageAttributes;
     logoColor?: string;
     style?: CSSProperties;
 };
-declare const SSICredentialMiniCardView: FC<Props>;
-export default SSICredentialMiniCardView;
+declare const CredentialMiniCardView: FC<CredentialMiniCardViewProps>;
+export default CredentialMiniCardView;

package/dist/components/views/{SSICredentialMiniCardView → CredentialMiniCardView}/index.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { credentialCardColors } from '@sphereon/ui-components.core';
 import SSILogo from '../../assets/logos/SSILogo';
-import { SSICredentialMiniCardViewContainerStyled as Container, SSICredentialMiniCardViewBackgroundImageStyled as BackgroundImage, } from '../../../styles/components';
-const SSICredentialMiniCardView = (props) => {
+import { SSICredentialMiniCardViewContainerStyled as Container, SSICredentialMiniCardViewBackgroundImageStyled as BackgroundImage, } from '../../../styles';
+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: _jsx(SSILogo, { logo: logo, color: logoColor }) }) }));
+            }, children: (!backgroundImage || logo) && _jsx(SSILogo, { logo: logo, color: logoColor }) }) }));
 };
-export default SSICredentialMiniCardView;
+export default CredentialMiniCardView;

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { backgroundColors, credentialCardColors, Localization, toLocalDateString } from '@sphereon/ui-components.core';
+import { backgroundColors, credentialCardColors, Localization, toLocalDateString, } from '@sphereon/ui-components.core';
 import SSILogo from '../../assets/logos/SSILogo';
 import SSIStatusLabel from '../../labels/SSIStatusLabel';
-import { SSIAlphaContainerStyled as AlphaContainer, SSICredentialCardViewContainerStyled as Container, SSICredentialCardViewBackgroundImageStyled as BackgroundImage, SSICredentialCardViewContentMainContainerStyled as ContentMainContainer, SSICredentialCardViewContentSubContainerStyled as ContentSubContainer, SSICredentialCardViewStatusContainerStyled as StatusContainer, SSICredentialCardViewCredentialSubtitleTextStyled as CredentialSubtitleText, SSICredentialCardViewCredentialTitleTextStyled as CredentialTitleText, SSITextH5LightStyled as ExpirationDateText, SSICredentialCardViewFooterContainerStyled as FooterContainer, SSITextH4LightStyled as H4Text, SSICredentialCardViewHeaderContainerStyled as HeaderContainer, SSICredentialCardViewContentIssueNameContainerStyled as IssueNameContainer, SSICredentialCardViewHeaderLogoContainerStyled as LogoContainer, SSICredentialCardViewContentPropertiesContainerStyled as PropertiesContainer, SSITextH6LightStyled as PropertyValueText, SSICredentialCardViewHeaderTitleContainerStyled as TitleContainer, SSIFlexDirectionColumnViewStyled as PropertyContainer, } from '../../../styles/components';
+import { SSIAlphaContainerStyled as AlphaContainer, SSICredentialCardViewContainerStyled as Container, SSICredentialCardViewBackgroundImageStyled as BackgroundImage, SSICredentialCardViewContentMainContainerStyled as ContentMainContainer, SSICredentialCardViewContentSubContainerStyled as ContentSubContainer, SSICredentialCardViewStatusContainerStyled as StatusContainer, SSICredentialCardViewCredentialSubtitleTextStyled as CredentialSubtitleText, SSICredentialCardViewCredentialTitleTextStyled as CredentialTitleText, SSITextH5LightStyled as ExpirationDateText, SSICredentialCardViewFooterContainerStyled as FooterContainer, SSITextH4LightStyled as H4Text, SSICredentialCardViewHeaderContainerStyled as HeaderContainer, SSICredentialCardViewContentIssueNameContainerStyled as IssueNameContainer, SSICredentialCardViewHeaderLogoContainerStyled as LogoContainer, SSICredentialCardViewContentPropertiesContainerStyled as PropertiesContainer, SSITextH6LightStyled as PropertyValueText, SSICredentialCardViewHeaderTitleContainerStyled as TitleContainer, SSIFlexDirectionColumnViewStyled as PropertyContainer, } from '../../../styles';
 const SSICredentialCardView = (props) => {
     const { header, body, footer } = props;
     const { credentialTitle, credentialSubtitle, logo } = props.header ?? {};
@@ -17,7 +17,7 @@ const SSICredentialCardView = (props) => {
     };
     return (_jsx(Container, { style: { backgroundColor }, children: _jsx(BackgroundImage, { style: {
                 ...(backgroundImage?.uri && { background: `url(${backgroundImage.uri})`, backgroundSize: 'cover' }),
-            }, children: _jsxs(AlphaContainer, { children: [header && (_jsxs(HeaderContainer, { children: [_jsx(LogoContainer, { children: _jsx(SSILogo, { logo: logo, color: textColor }) }), credentialTitle && (_jsxs(TitleContainer, { children: [_jsx(CredentialTitleText, { style: { color: textColor }, children: credentialTitle }), credentialSubtitle && _jsx(CredentialSubtitleText, { style: { color: textColor }, children: credentialSubtitle })] }))] })), body && (_jsx(ContentMainContainer, { children: _jsxs(ContentSubContainer, { children: [issuerName && (_jsx(IssueNameContainer, { children: _jsx(H4Text, { style: { color: textColor }, children: issuerName }) })), properties && _jsx(PropertiesContainer, { children: getPropertyElementsFrom(properties) })] }) })), footer && (_jsxs(FooterContainer, { children: [_jsx(ExpirationDateText, { style: { color: textColor }, children: expirationDate
+            }, children: _jsxs(AlphaContainer, { children: [header && (_jsxs(HeaderContainer, { children: [(!backgroundImage || logo) && (_jsx(LogoContainer, { children: _jsx(SSILogo, { logo: logo, color: textColor }) })), credentialTitle && (_jsxs(TitleContainer, { children: [_jsx(CredentialTitleText, { style: { color: textColor }, children: credentialTitle }), credentialSubtitle && _jsx(CredentialSubtitleText, { style: { color: textColor }, children: credentialSubtitle })] }))] })), body && (_jsx(ContentMainContainer, { children: _jsxs(ContentSubContainer, { children: [issuerName && (_jsx(IssueNameContainer, { children: _jsx(H4Text, { style: { color: textColor }, children: issuerName }) })), properties && _jsx(PropertiesContainer, { children: getPropertyElementsFrom(properties) })] }) })), footer && (_jsxs(FooterContainer, { children: [_jsx(ExpirationDateText, { style: { color: textColor }, children: expirationDate
                                     ? `${Localization.translate('credential_card_expires_message')} ${toLocalDateString(expirationDate)}`
                                     : Localization.translate('credential_status_never_expires_date_label') }), credentialStatus && (_jsx(StatusContainer, { children: credentialStatus && _jsx(SSIStatusLabel, { status: credentialStatus, color: textColor }) }))] }))] }) }) }));
 };

package/dist/components/views/SSITabView/SSITabViewHeader/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TabNavigationState } from '../../../../types';
-export type Props = {
+import { TabNavigationState } from '@sphereon/ui-components.core';
+type Props = {
     navigationState: TabNavigationState;
     onIndexChange: (index: number) => void;
 };

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/components';
+import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTitleContainerStyled as TitleContainer, SSITextH3Styled as TitleCaption, } from '../../../../styles';
 const SSITabViewHeader = (props) => {
     const { navigationState, onIndexChange } = props;
     return (_jsx(Container, { children: navigationState.routes.map((value, index) => {

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TabViewRoute } from '../../../types';
-export type Props = {
+import { TabViewRoute } from '@sphereon/ui-components.core';
+type Props = {
     routes: Array<TabViewRoute>;
 };
 declare const SSITabView: React.FC<Props>;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import SSITabViewHeader from './SSITabViewHeader';
-import { SSITabViewContainerStyled as Container } from '../../../styles/components';
+import { SSITabViewContainerStyled as Container } from '../../../styles';
 const Tab = (props) => {
     return _jsx(React.Fragment, { children: props.children });
 };