@sphereon/ui-components.ssi-react 0.1.3-next.149 → 0.1.3-next.157

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { fontColors } from '@sphereon/ui-components.core';
 const CrossIcon = (props) => {
-    const { size = 12, color = fontColors.dark, style = {} } = props;
+    const { size = 12, 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 12 12", fill: "none", children: _jsx("path", { d: "M11.3763 0.623718C11.2113 0.45875 10.9439 0.458771 10.7789 0.623718L5.99999 5.40265L1.22108 0.623744C1.05612 0.458776 0.788685 0.458776 0.62372 0.623744C0.458759 0.788692 0.458761 1.05613 0.623722 1.2211L5.40263 6L0.623735 10.7789C0.458779 10.9439 0.458773 11.2113 0.623733 11.3763C0.788697 11.5412 1.05614 11.5412 1.2211 11.3763L5.99999 6.59737L10.7789 11.3763C10.9439 11.5412 11.2113 11.5412 11.3763 11.3763C11.5412 11.2113 11.5412 10.9439 11.3763 10.7789L6.59736 6L11.3763 1.22107C11.5412 1.05612 11.5412 0.788687 11.3763 0.623718Z", fill: color }) }) }));
 };
 export default CrossIcon;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { fontColors } from '@sphereon/ui-components.core';
 const DeleteIcon = (props) => {
-    const { width = 20, height = 21, color = fontColors.dark, style = {} } = props;
+    const { width = 20, height = 21, color = fontColors.dark, style } = props;
     return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M17.3126 4.36542V18.0301C17.3126 19.6588 15.975 21 14.3509 21H4.70454C3.07718 21 1.73962 19.6588 1.73962 18.0301V4.36542H0.685498C-0.228499 4.36542 -0.228499 2.97308 0.685498 2.97308H6.09623V1.63823C6.09623 0.766423 6.77775 0 7.66627 0H11.3891C12.2745 0 12.9592 0.769617 12.9592 1.63823V2.97308H18.3667C19.2807 2.97308 19.2807 4.36542 18.3667 4.36542H17.3126ZM7.48474 2.97308H11.5675V1.63823C11.5675 1.53604 11.507 1.39234 11.3891 1.39234H7.66627C7.54525 1.39234 7.48474 1.53604 7.48474 1.63823V2.97308ZM12.5515 15.7181C12.5515 16.6314 11.163 16.6314 11.163 15.7181V8.13686C11.163 7.22354 12.5515 7.22354 12.5515 8.13686V15.7181ZM7.8892 15.7181C7.8892 16.6314 6.50068 16.6314 6.50068 15.7181V8.13686C6.50068 7.22354 7.8892 7.22035 7.8892 8.13686V15.7181ZM15.9241 4.36542C11.6598 4.36542 7.39557 4.36542 3.13132 4.36542V18.0301C3.13132 18.8987 3.83513 19.6077 4.70454 19.6077H14.3509C15.2171 19.6077 15.9241 18.8987 15.9241 18.0301V4.36542Z", fill: color }) }) }));
 };
 export default DeleteIcon;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { fontColors } from '@sphereon/ui-components.core';
 const DocumentIcon = (props) => {
-    const { width = 28, height = 38, color = fontColors.dark, style = {} } = props;
+    const { width = 28, height = 38, color = fontColors.dark, style } = props;
     return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 28 38", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M26.8828 7.409L21.4423 1.677C20.8054 1.006 19.6456 0.5 18.7458 0.5H17.5593H13.7627H3.32203C1.49064 0.5 0 2.0705 0 4V34C0 35.9295 1.49064 37.5 3.32203 37.5H24.678C26.5094 37.5 28 35.9295 28 34V19V11.5V10.25C28 9.3015 27.5197 8.08 26.8828 7.409ZM24.7643 8.0045C24.7349 8.004 24.7074 8 24.678 8H22.3051C21.5201 8 20.8814 7.327 20.8814 6.5V4C20.8814 3.9695 20.8776 3.94 20.8771 3.9095L24.7643 8.0045ZM26.1017 34C26.1017 34.827 25.4629 35.5 24.678 35.5H3.32203C2.53708 35.5 1.89831 34.827 1.89831 34V4C1.89831 3.173 2.53708 2.5 3.32203 2.5H13.7627H17.5593C18.3443 2.5 18.9831 3.173 18.9831 4V6.5C18.9831 8.4295 20.4737 10 22.3051 10H24.678C25.4629 10 26.1017 10.673 26.1017 11.5V19V34Z", fill: color }) }) }));
 };
 export default DocumentIcon;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { fontColors } from '@sphereon/ui-components.core';
 const ImageIcon = (props) => {
-    const { width = 38, height = 30, color = fontColors.dark, style = {} } = props;
+    const { width = 38, height = 30, color = fontColors.dark, style } = props;
     return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 38 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.773 8.1151C16.0717 8.1151 16.3637 8.20496 16.6121 8.37331C16.8604 8.54166 17.054 8.78094 17.1683 9.06089C17.2826 9.34083 17.3125 9.64888 17.2542 9.94605C17.1959 10.2432 17.052 10.5162 16.8407 10.7304C16.6295 10.9446 16.3603 11.0905 16.0673 11.1496C15.7743 11.2086 15.4707 11.1782 15.1947 11.0622C14.9187 10.9462 14.6829 10.7498 14.517 10.4978C14.3511 10.2458 14.2626 9.94961 14.2627 9.6466C14.2632 9.24048 14.4225 8.85116 14.7056 8.56399C14.9888 8.27682 15.3726 8.11567 15.773 8.1151ZM15.773 12.3833C16.3066 12.3833 16.8283 12.2229 17.272 11.9223C17.7157 11.6216 18.0616 11.1942 18.2659 10.6942C18.4702 10.1941 18.5236 9.64386 18.4196 9.11297C18.3155 8.58208 18.0586 8.09442 17.6813 7.71164C17.304 7.32887 16.8233 7.06819 16.2999 6.96256C15.7765 6.85693 15.234 6.9111 14.741 7.11822C14.248 7.32534 13.8266 7.6761 13.5301 8.12615C13.2336 8.5762 13.0754 9.10532 13.0754 9.6466C13.0766 10.3719 13.3612 11.0672 13.8668 11.58C14.3725 12.0929 15.0579 12.382 15.773 12.3833ZM2.81918 1.70473C2.38666 1.70507 1.97195 1.87947 1.66608 2.18964C1.3602 2.49982 1.18816 2.92043 1.18771 3.35914V22.6369L9.78458 13.9173C10.105 13.5935 10.5389 13.4116 10.9913 13.4116C11.4436 13.4116 11.8776 13.5935 12.198 13.9173L15.6007 17.3692L23.5385 9.32026C23.8587 8.99597 24.2927 8.81382 24.7452 8.81382C25.1977 8.81382 25.6317 8.99597 25.9519 9.32026L36.8123 20.338V3.35914C36.8118 2.9205 36.6399 2.49996 36.3341 2.1898C36.0283 1.87963 35.6137 1.70518 35.1812 1.70473H2.81918ZM35.1812 28.2957C35.6137 28.2951 36.0283 28.1206 36.3341 27.8104C36.6399 27.5001 36.8118 27.0795 36.8123 26.6409V22.0421L25.1104 10.1721C25.0129 10.0733 24.8807 10.0178 24.7429 10.0178C24.605 10.0178 24.4728 10.0733 24.3753 10.1721L16.0208 18.6467C15.9093 18.7597 15.7582 18.8231 15.6007 18.8231C15.4431 18.8231 15.292 18.7597 15.1806 18.6467L11.3578 14.7692C11.2604 14.6704 11.1283 14.615 10.9907 14.615C10.853 14.615 10.7209 14.6704 10.6235 14.7692L1.18771 24.3402V26.6409C1.18816 27.0796 1.36019 27.5003 1.66605 27.8105C1.97191 28.1208 2.38662 28.2952 2.81918 28.2957H35.1812ZM2.81918 29.5H35.1812C35.9286 29.4991 36.645 29.1976 37.1734 28.6616C37.7018 28.1256 37.9991 27.3989 38 26.6409V3.35914C37.9991 2.60113 37.7018 1.87442 37.1734 1.33843C36.645 0.802428 35.9286 0.500907 35.1812 0.5H2.81918C2.0718 0.500793 1.35525 0.802265 0.826731 1.33827C0.298214 1.87428 0.000894121 2.60106 0 3.35914V26.6409C0.000894121 27.3989 0.298214 28.1257 0.826731 28.6617C1.35525 29.1977 2.0718 29.4992 2.81918 29.5Z", fill: color }) }) }));
 };
 export default ImageIcon;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { fontColors } from '@sphereon/ui-components.core';
 const MeatBallsIcon = (props) => {
-    const { width = 20, height = 5, color = fontColors.dark, style = {} } = props;
+    const { width = 20, height = 5, color = fontColors.dark, style } = props;
     return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 20 5", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "2", cy: "2.5", r: "2", fill: color }), _jsx("circle", { cx: "10", cy: "2.5", r: "2", fill: color }), _jsx("circle", { cx: "18", cy: "2.5", r: "2", fill: color })] }) }));
 };
 export default MeatBallsIcon;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { fontColors } from '@sphereon/ui-components.core';
 const SSIAddIcon = (props) => {
-    const { size = 16, color = fontColors.dark, style = {} } = props;
+    const { size = 16, 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 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8 0.5C7.65483 0.5 7.375 0.779833 7.375 1.125V7.37503H1.125C0.779812 7.37503 0.5 7.65484 0.5 8.00003C0.5 8.34519 0.779812 8.62502 1.125 8.62502H7.375V14.875C7.375 15.2202 7.65483 15.5 8 15.5C8.34519 15.5 8.625 15.2202 8.625 14.875V8.62502H14.875C15.2202 8.62502 15.5 8.34519 15.5 8.00003C15.5 7.65484 15.2202 7.37503 14.875 7.37503H8.625V1.125C8.625 0.779833 8.34519 0.5 8 0.5Z", fill: color }) }) }));
 };
 export default SSIAddIcon;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { fontColors } from '@sphereon/ui-components.core';
 const SSIArrowDownIcon = (props) => {
-    const { width = 16, height = 8, color = fontColors.dark, style = {} } = props;
+    const { width = 16, height = 8, color = fontColors.dark, style } = props;
     return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8.03265 7.74886C8.14951 7.74175 8.26065 7.69465 8.34825 7.61511L15.3133 1.19499C15.367 1.1489 15.411 1.09224 15.4429 1.02837C15.4747 0.964504 15.4937 0.894731 15.4987 0.823204C15.5037 0.751676 15.4946 0.67985 15.4719 0.611995C15.4493 0.54414 15.4135 0.481647 15.3668 0.428216C15.3201 0.374784 15.2634 0.331504 15.2001 0.300961C15.1367 0.270419 15.068 0.253238 14.9981 0.250423C14.9281 0.247608 14.8583 0.259221 14.7928 0.28458C14.7273 0.309939 14.6675 0.348517 14.6168 0.398032L8 6.49492L1.38317 0.398032C1.33252 0.348517 1.27268 0.309939 1.20718 0.28458C1.14169 0.259221 1.07189 0.247597 1.00193 0.250412C0.931963 0.253227 0.863266 0.270419 0.799918 0.300961C0.736569 0.331504 0.679861 0.374784 0.633164 0.428216C0.586466 0.481647 0.550732 0.54414 0.528085 0.611995C0.505437 0.67985 0.496338 0.751676 0.501329 0.823204C0.506319 0.894731 0.525297 0.964504 0.557135 1.02837C0.588973 1.09224 0.633022 1.1489 0.686663 1.19499L7.65174 7.61511C7.70344 7.6621 7.76372 7.69811 7.82911 7.72107C7.89449 7.74403 7.96367 7.75348 8.03265 7.74886Z", fill: color }) }) }));
 };
 export default SSIArrowDownIcon;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { fontColors } from '@sphereon/ui-components.core';
 const SSIFilterIcon = (props) => {
-    const { height = 16, width = 18, color = fontColors.dark, style = {} } = props;
+    const { height = 16, width = 18, color = fontColors.dark, style } = props;
     return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 18 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M16.5 1.5H1.5L7.5 8.33222V13.0556L10.5 14.5V8.33222L16.5 1.5Z", stroke: color, strokeOpacity: "0.8", strokeWidth: "1.29412", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
 };
 export default SSIFilterIcon;

package/dist/components/assets/placeholders/PersonPlaceholder/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { elementColors } from '@sphereon/ui-components.core';
 const PersonPlaceholder = (props) => {
-    const { width = 79, height = 77, color = elementColors[300], style = {} } = props;
+    const { width = 79, height = 77, color = elementColors[300], style } = props;
     return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 79 77", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M22.8136 19.3766C22.8136 10.2672 30.2594 2.85265 39.4999 2.85265C48.7404 2.85265 56.1862 10.2672 56.1862 19.3766C56.1862 28.486 48.7404 35.9005 39.4999 35.9005C30.2594 35.9005 22.8136 28.486 22.8136 19.3766ZM3.52788 62.4042C3.52788 60.1881 4.62672 58.0491 6.89989 55.9687C9.18981 53.873 12.4868 52.0225 16.3463 50.4894C24.0686 47.4219 33.3853 45.8802 39.4999 45.8802C45.6144 45.8802 54.9312 47.4219 62.6534 50.4894C66.513 52.0225 69.81 53.873 72.0999 55.9687C74.3731 58.0491 75.4719 60.1881 75.4719 62.4042V74.1473H3.52788V62.4042Z", stroke: color, strokeWidth: "5.19882" }) }) }));
 };
 export default PersonPlaceholder;

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

@@ -3,7 +3,7 @@ import { ButtonIcon, fontColors, OpacityStyleEnum } from '@sphereon/ui-component
 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;
+    const { caption, icon, onClick, disabled = false, style } = props;
     const getIcon = (icon, color) => {
         switch (icon) {
             case ButtonIcon.ADD:

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

@@ -4,7 +4,7 @@ import SSIAddIcon from '../../assets/icons/SSIAddIcon';
 import { SSISecondaryButtonCaptionStyled as Caption, SSISecondaryButtonContainerStyled as Container } from '../../../styles';
 import { gradientColors } from '../../../styles/colors';
 const SSISecondaryButton = (props) => {
-    const { caption, icon, onClick, disabled = false, style = {} } = props;
+    const { caption, icon, onClick, disabled = false, style } = props;
     const getIcon = (icon, color) => {
         switch (icon) {
             case ButtonIcon.ADD:

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

@@ -4,10 +4,11 @@ type ComboBoxOption = {
     value: any;
 };
 type Props<T extends ComboBoxOption> = {
-    onChange?: (value: any) => Promise<void>;
+    onChange?: (value: T) => Promise<void>;
     noOptionsMessage?: string;
     placeholder?: string;
     defaultValue?: T;
+    value?: T;
     inlineOption?: InlineOption;
     options: Array<T>;
     style?: CSSProperties;

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

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import CreatableSelect from 'react-select/creatable';
 import { backgroundColors, fontColors } from '@sphereon/ui-components.core';
 const ComboBox = (props) => {
     const { onChange, noOptionsMessage, placeholder, defaultValue, inlineOption, options = [] } = props;
+    const [value, setValue] = React.useState(props.value);
     const creatableProps = inlineOption
         ? {
             allowCreateWhileLoading: true,
@@ -12,7 +14,11 @@ const ComboBox = (props) => {
             formatCreateLabel: () => `${inlineOption.caption}`,
         }
         : {};
-    return (_jsx(CreatableSelect, { styles: {
+    const onValueChange = async (newValue) => {
+        setValue(newValue);
+        await onChange?.(newValue);
+    };
+    return (_jsx(CreatableSelect, { menuPortalTarget: document.querySelector('body'), styles: {
             control: (provided, state) => ({
                 ...provided,
                 maxWidth: 455,
@@ -26,7 +32,7 @@ const ComboBox = (props) => {
             }),
             menu: (provided) => ({
                 ...provided,
-                maxWidth: 455,
+                maxWidth: 455
             }),
             option: (provided, state) => ({
                 ...provided,
@@ -40,6 +46,6 @@ const ComboBox = (props) => {
                 ...provided,
                 color: fontColors.dark,
             }),
-        }, defaultValue: defaultValue, onChange: onChange, options: options, placeholder: placeholder, noOptionsMessage: noOptionsMessage ? () => noOptionsMessage : undefined, maxMenuHeight: 210, ...creatableProps }));
+        }, defaultValue: defaultValue, onChange: onValueChange, value: value, options: options, placeholder: placeholder, noOptionsMessage: noOptionsMessage ? () => noOptionsMessage : undefined, maxMenuHeight: 210, ...creatableProps }));
 };
 export default ComboBox;

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, SSITextH2DarkStyled 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);

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

@@ -7,7 +7,7 @@ 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';
+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';
 const CredentialIssuanceWizardView = (props) => {
     const { credentialData, credentialTypes, onSelectCredentialTypeChange, onCredentialFormDataChange } = props;
     const [selectedCredentialType, setSelectedCredentialType] = useState(null);

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,17 @@
+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/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,85 @@
+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).map(async ([key, value]) => {
+            if (typeof value === 'object' && value !== null) {
+                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/index.d.ts

@@ -8,6 +8,7 @@ type Props<T> = {
     onRowClick?: (data: Row<T>) => Promise<void>;
     onDelete?: (rows: Array<T>) => Promise<void>;
     enableRowSelection?: boolean;
+    enableRowHover?: boolean;
     enableFiltering?: boolean;
     enableMostRecent?: boolean;
     enableResultCount?: boolean;

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

@@ -8,9 +8,11 @@ import SSIHoverText from '../../fields/SSIHoverText';
 import SSIStatusLabel from '../../labels/SSIStatusLabel';
 import CredentialMiniCardView from '../CredentialMiniCardView';
 import DropDownList from '../../lists/DropDownList';
-import { SSITableViewCellContainerStyled as CellContainer, SSITableViewContainerStyled as Container, SSITableViewHeaderCellContainerStyled as HeaderCellContainer, SSITableViewLabelCellStyled as LabelCell, SSITableViewResultCountCaptionStyled as ResultCountCaption, SSITableViewRowContainerStyled as RowContainer, SSITableViewTableContainerStyled as TableContainer, TableViewRowSelectionCheckboxContainerStyled as RowSelectionCheckboxContainer, } from '../../../styles';
+import { SSITableViewCellContainerStyled as CellContainer, SSITableViewContainerStyled as Container, SSITableViewHeaderCellContainerStyled as HeaderCellContainer, SSITableViewLabelCellStyled as LabelCell, SSITableViewResultCountCaptionStyled as ResultCountCaption, SSITableViewHeaderRowContainerStyled as HeaderRowContainer, SSITableViewRowContainerStyled as RowContainer, SSITableViewTableContainerStyled as TableContainer, TableViewRowSelectionCheckboxContainerStyled as RowSelectionCheckboxContainer, } from '../../../styles';
 import { TableCellType } from '../../../types';
 import PaginationControls from './PaginationControls';
+import ComboBox from "../../fields/ComboBox";
+import CredentialDetailsView from "../CredentialViewItem";
 function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -20,10 +22,10 @@ function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     }, [ref, indeterminate]);
     return _jsx("input", { type: "checkbox", ref: ref, className: className + ' cursor-pointer', ...rest });
 }
-const getCellFormatting = (type, value, row, opts) => {
+const getCellFormatting = (type, value, row, options) => {
     switch (type) {
         case TableCellType.TEXT:
-            const { truncationLength, enableHover = false } = opts ?? {};
+            const { truncationLength, enableHover = false } = options ?? {};
             return _jsx(SSIHoverText, { text: value, truncationLength: truncationLength, enableHover: enableHover });
         case TableCellType.LABEL: {
             const labels = Array.isArray(value) ? value.map((label) => _jsx(SSITypeLabel, { type: label })) : _jsx(SSITypeLabel, { type: value });
@@ -35,13 +37,20 @@ const getCellFormatting = (type, value, row, opts) => {
         case TableCellType.CREDENTIAL_CARD: {
             return _jsx(CredentialMiniCardView, { ...value });
         }
-        case TableCellType.ACTION_GROUP: {
-            const { actionGroup = { actions: [] } } = opts ?? { actions: [] };
-            const actions = actionGroup.actions.map((action) => ({
+        case TableCellType.CREDENTIAL_DETAILS: {
+            return _jsx(CredentialDetailsView, { ...value, style: { maxWidth: 261 } });
+        }
+        case TableCellType.ACTIONS: {
+            const { actions = [] } = options ?? {};
+            const buttons = actions.map((action) => ({
                 ...action,
                 onClick: () => action.onClick(row),
             }));
-            return _jsx(DropDownList, { icon: ButtonIcon.MEATBALLS, buttons: actions, showBorder: true });
+            return _jsx(DropDownList, { icon: ButtonIcon.MEATBALLS, buttons: buttons, showBorder: true });
+        }
+        case TableCellType.COMBOBOX: {
+            const { defaultValue, onChange, selectOptions = [] } = options ?? {};
+            return _jsx(ComboBox, { defaultValue: defaultValue, value: value, onChange: onChange, options: selectOptions });
         }
         default:
             return _jsx("div", {});
@@ -55,17 +64,17 @@ const toRowSelectionObject = (rows) => {
     return rowSelectionObject;
 };
 const SSITableView = (props) => {
-    const { columns, data, enableRowSelection = false, enableFiltering = false, enableMostRecent = false, enableResultCount = false, columnResizeMode = 'onChange', actions = [], onRowClick, onDelete, pagination, } = props;
+    const { columns, data, enableRowSelection = false, enableRowHover = true, enableFiltering = false, enableMostRecent = false, enableResultCount = false, columnResizeMode = 'onChange', actions = [], onRowClick, onDelete, pagination, } = props;
     const [rowSelection, setRowSelection] = React.useState([]);
     const [focusedRowId, setFocusedRowId] = React.useState();
     const columnHelper = createColumnHelper();
     let availableColumns = columns.map((header) => columnHelper.accessor(header.accessor, {
         id: header.accessor,
         header: header.label,
-        cell: (info) => getCellFormatting(header.type, info.getValue(), info.row, header.opts),
-        minSize: header.opts?.columnMinWidth,
-        maxSize: header.opts?.columnMaxWidth,
-        size: header.opts?.columnWidth,
+        cell: (info) => getCellFormatting(header.type, info.getValue(), info.row, header.columnOptions?.cellOptions),
+        minSize: header.columnOptions?.columnMinWidth,
+        maxSize: header.columnOptions?.columnMaxWidth,
+        size: header.columnOptions?.columnWidth,
     }));
     if (enableRowSelection) {
         availableColumns = [
@@ -122,7 +131,7 @@ const SSITableView = (props) => {
     return (_jsxs(Container, { children: [_jsxs("div", { className: "overflow-x-auto", children: [enableResultCount && (_jsx(ResultCountCaption, { children: Localization.translate('result_count_label', {
                             count: data.length,
                             maxCount: data.length,
-                        }) })), (enableFiltering || enableMostRecent || actions.length > 0) && (_jsx(SSITableViewHeader, { actions: actions, enableFiltering: enableFiltering, enableMostRecent: enableMostRecent, ...(onDelete && { onDelete: onDeleteClicked }) })), _jsxs(TableContainer, { children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx(RowContainer, { children: headerGroup.headers.map((header) => (_jsxs(HeaderCellContainer, { colSpan: header.colSpan, style: {
+                        }) })), (enableFiltering || enableMostRecent || actions.length > 0) && (_jsx(SSITableViewHeader, { actions: actions, enableFiltering: enableFiltering, enableMostRecent: enableMostRecent, ...(onDelete && { onDelete: onDeleteClicked }) })), _jsxs(TableContainer, { children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx(HeaderRowContainer, { children: headerGroup.headers.map((header) => (_jsxs(HeaderCellContainer, { colSpan: header.colSpan, style: {
                                             ...(header.column.columnDef.minSize && { minWidth: header.column.columnDef.minSize }),
                                             ...(header.column.columnDef.maxSize && { maxWidth: header.column.columnDef.maxSize }),
                                             ...(header.column.columnDef.size !== 0 && { width: header.column.columnDef.size }),
@@ -130,7 +139,7 @@ const SSITableView = (props) => {
                                                     transform: columnResizeMode === 'onEnd' && header.column.getIsResizing()
                                                         ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)`
                                                         : '',
-                                                } })] }, header.id))) }, headerGroup.id))) }), _jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsx(RowContainer, { onClick: () => onRowClicked(row), onMouseEnter: () => onFocusRow(row.id), onMouseLeave: () => onFocusRow(), style: { ...(row.getIsSelected() && { backgroundColor: selectionElementColors.selectedRow }) }, children: row.getVisibleCells().map((cell) => (_jsx(CellContainer, { style: {
+                                                } })] }, header.id))) }, headerGroup.id))) }), _jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsx(RowContainer, { enableHover: enableRowHover, onClick: () => onRowClicked(row), onMouseEnter: () => onFocusRow(row.id), onMouseLeave: () => onFocusRow(), style: { ...(row.getIsSelected() && { backgroundColor: selectionElementColors.selectedRow }) }, children: row.getVisibleCells().map((cell) => (_jsx(CellContainer, { style: {
                                             ...(cell.column.columnDef.minSize && { minWidth: cell.column.columnDef.minSize }),
                                             ...(cell.column.columnDef.maxSize && { maxWidth: cell.column.columnDef.maxSize }),
                                             ...(cell.column.columnDef.size !== 0 && { width: cell.column.columnDef.size }),

package/dist/index.d.ts

@@ -36,9 +36,11 @@ import PassportPhotoControl, { passportPhotoControlTester } from './components/f
 import CredentialIssuanceWizardView from './components/views/CredentialIssuanceWizardView';
 import PaginationControls from './components/views/SSITableView/PaginationControls';
 import PaginationControlsProps from './components/views/SSITableView/PaginationControls';
+import CredentialViewItem from './components/views/CredentialViewItem';
+import JSONDataView from './components/views/JSONDataView';
 import { Row } from '@tanstack/react-table';
 export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
 export * from './utils';
-export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, };
+export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView };

package/dist/index.js

@@ -35,8 +35,10 @@ import PassportPhotoControl, { passportPhotoControlTester } from './components/f
 import CredentialIssuanceWizardView from './components/views/CredentialIssuanceWizardView';
 import PaginationControls from './components/views/SSITableView/PaginationControls';
 import PaginationControlsProps from './components/views/SSITableView/PaginationControls';
+import CredentialViewItem from './components/views/CredentialViewItem';
+import JSONDataView from './components/views/JSONDataView';
 export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
 export * from './utils';
-export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, };
+export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView };

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { backgroundColors, borderColors, SSIRoundedEdgesCss } from "@sphereon/ui-components.core";
-import { SSITextH1SemiBoldDarkStyled, SSITextH2DarkStyled } from "../../../fonts";
+import { SSITextH1SemiBoldStyled, SSITextH2Styled } from "../../../fonts";
 export const CredentialIssuanceWizardViewContainerStyled = styled.div `
   display: flex;
   flex-direction: column;
@@ -18,7 +18,7 @@ export const CredentialIssuanceWizardViewCredentialTypeContainerStyled = styled.
   gap: 24px;
   flex-grow: 1;
 `;
-export const CredentialIssuanceWizardViewCredentialTypeTitleStyled = styled(SSITextH1SemiBoldDarkStyled) `
+export const CredentialIssuanceWizardViewCredentialTypeTitleStyled = styled(SSITextH1SemiBoldStyled) `
   text-align: left;
 `;
 export const CredentialIssuanceWizardViewFormContainerStyled = styled.div `
@@ -45,7 +45,7 @@ export const CredentialIssuanceWizardViewEvidenceTitleContainerStyled = styled.d
   flex-direction: row;
   gap: 4px;
 `;
-export const CredentialIssuanceWizardViewEvidenceTitleOptionalStyled = styled(SSITextH2DarkStyled) `
+export const CredentialIssuanceWizardViewEvidenceTitleOptionalStyled = styled(SSITextH2Styled) `
   font-style: italic;
 `;
 export const CredentialIssuanceWizardViewEvidenceFilesContainerStyled = styled.div `

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

@@ -0,0 +1,5 @@
+export declare const CredentialViewItemContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialViewItemDetailsContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialViewItemTitleCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialViewItemStatusContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialViewItemExpirationDateCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import { SSIFlexDirectionColumnViewStyled, SSIFlexDirectionRowViewStyled } from '../../containers';
+import { SSITextH3Styled, SSITextH5Styled } from '../../../fonts';
+export const CredentialViewItemContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  padding: 18px 24px;
+  gap: 8px;
+  align-items: center;
+`;
+export const CredentialViewItemDetailsContainerStyled = styled(SSIFlexDirectionColumnViewStyled) `
+  gap: 6px;
+  min-width: 245px;
+`;
+export const CredentialViewItemTitleCaptionStyled = styled(SSITextH3Styled) `
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-all;
+  text-overflow: ellipsis;
+`;
+export const CredentialViewItemStatusContainerStyled = styled.div `
+  margin-top: 3px;
+  margin-left: auto;
+  padding-left: 9px;
+`;
+export const CredentialViewItemExpirationDateCaptionStyled = styled(SSITextH5Styled) `
+  margin-left: auto;
+`;

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { SSIFlexDirectionRowViewStyled } from '../../containers';
-import { SSITextH2DarkStyled } from '../../../fonts';
+import { SSITextH2Styled } from '../../../fonts';
 import { backgroundColors } from '@sphereon/ui-components.core';
 export const DropDownListItemContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
   flex-direction: row;
@@ -8,7 +8,7 @@ export const DropDownListItemContainerStyled = styled(SSIFlexDirectionRowViewSty
   background-color: ${backgroundColors.primaryLight};
   padding: 10px 16px;
 `;
-export const DropDownListItemCaptionContainerStyled = styled(SSITextH2DarkStyled) `
+export const DropDownListItemCaptionContainerStyled = styled(SSITextH2Styled) `
   flex: 1;
   margin-right: 8px;
 `;

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { borderColors, fontColors } from '@sphereon/ui-components.core';
-import { SSITextH2SemiBoldDarkStyled, SSITextH7RegularStyled } from '../../../fonts';
+import { SSITextH2SemiBoldStyled, SSITextH7RegularStyled } from '../../../fonts';
 export const FileSelectionFieldContainerStyled = styled.div `
   display: flex;
   flex-grow: 1;
@@ -49,7 +49,7 @@ export const FileSelectionFieldFileDataContainerStyled = styled.div `
   display: flex;
   flex-direction: column;
 `;
-export const FileSelectionFieldFileNameCaptionStyled = styled(SSITextH2SemiBoldDarkStyled) `
+export const FileSelectionFieldFileNameCaptionStyled = styled(SSITextH2SemiBoldStyled) `
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 350px;

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

@@ -0,0 +1,7 @@
+export declare const JSONDataViewContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const JSONDataViewHeaderContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const JSONDataViewColumnHeaderCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const JSONDataViewDataContainerCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const JSONDataViewDataImageValueStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const JSONDataViewDataTextValueStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const JSONDataViewDataLabelStyled: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+import { backgroundColors, borderColors, fontColors, SSIRoundedEdgesCss } from '@sphereon/ui-components.core';
+import { SSITextH2SemiBoldStyledCss, SSITextH5Css, SSITextH7SemiBoldCss } from '../../../css';
+export const JSONDataViewContainerStyled = styled.div `
+  ${SSIRoundedEdgesCss};
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: ${backgroundColors.primaryLight};
+  border: 1px solid ${borderColors.light};
+`;
+export const JSONDataViewHeaderContainerStyled = styled.div `
+  padding: 12px 24px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 2px solid ${borderColors.light};
+`;
+export const JSONDataViewColumnHeaderCaptionStyled = styled.div `
+  display: flex;
+  flex-grow: 1;
+  ${SSITextH2SemiBoldStyledCss};
+  color: ${fontColors.lightGrey};
+  max-width: 200px;
+`;
+export const JSONDataViewDataContainerCaptionStyled = styled.div `
+  padding-right: 24px;
+  padding-bottom: 24px;
+  padding-left: 12px;
+  display: flex;
+  flex-direction: row;
+`;
+export const JSONDataViewDataImageValueStyled = styled.div `
+  background-size: cover;
+  height: 130px;
+  border-radius: 10px;
+`;
+export const JSONDataViewDataTextValueStyled = styled.span `
+  color: ${fontColors.dark};
+  ${SSITextH7SemiBoldCss}
+`;
+export const JSONDataViewDataLabelStyled = styled.span `
+  color: ${fontColors.dark};
+  ${SSITextH5Css};
+  width: 212px;
+  display: inline-block;
+`;

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

@@ -5,6 +5,7 @@ export const SSIStatusLabelContainerStyled = styled(SSIFlexDirectionRowViewStyle
   border-radius: 9px;
   border: 1px solid #000;
   width: fit-content;
+  height: fit-content;
 `;
 export const SSIStatusLabelStatusCaptionStyled = styled(SSITextH5LightStyled) `
   margin-left: 7px;

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

@@ -2,5 +2,5 @@ import styled from 'styled-components';
 export const SSITabViewContainerStyled = styled.div `
   display: flex;
   flex-direction: column;
-  width: 100%;
+  flex-grow: 1;
 `;

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

@@ -1,2 +1,3 @@
 export declare const SSITabViewHeaderContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITabViewHeaderTitleContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITabViewHeaderTitleCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { SSITextH3Styled } from '../../../fonts';
 export const SSITabViewHeaderContainerStyled = styled.div `
   display: flex;
   flex-direction: row;
@@ -7,4 +8,8 @@ export const SSITabViewHeaderContainerStyled = styled.div `
 `;
 export const SSITabViewHeaderTitleContainerStyled = styled.div `
   cursor: pointer;
+  display: flex;
+`;
+export const SSITabViewHeaderTitleCaptionStyled = styled(SSITextH3Styled) `
+  margin-top: auto;
 `;

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

@@ -1,7 +1,10 @@
 export declare const SSITableViewContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITableViewLabelCellStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITableViewTableContainerStyled: import("styled-components").StyledComponent<"table", any, {}, never>;
-export declare const SSITableViewRowContainerStyled: import("styled-components").StyledComponent<"tr", any, {}, never>;
+export declare const SSITableViewHeaderRowContainerStyled: import("styled-components").StyledComponent<"tr", any, {}, never>;
+export declare const SSITableViewRowContainerStyled: import("styled-components").StyledComponent<"tr", any, {
+    enableHover?: boolean | undefined;
+}, never>;
 export declare const SSITableViewCellContainerStyled: import("styled-components").StyledComponent<"td", any, {}, never>;
 export declare const SSITableViewHeaderCellContainerStyled: import("styled-components").StyledComponent<"th", any, {}, never>;
 export declare const SSITableViewResultCountCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { backgroundColors, borderColors, fontColors } from '@sphereon/ui-components.core';
 import { SSITextH2Css, SSITextH3Css } from '../../../css';
 export const SSITableViewContainerStyled = styled.div `
@@ -17,13 +17,23 @@ export const SSITableViewTableContainerStyled = styled.table `
   border-collapse: collapse;
   background-color: ${backgroundColors.lightGrey};
 `;
-export const SSITableViewRowContainerStyled = styled.tr `
+export const SSITableViewHeaderRowContainerStyled = styled.tr `
   border-bottom: 1px solid ${borderColors.lightGrey};
   background-color: ${backgroundColors.primaryLight};
+`;
+export const SSITableViewRowContainerStyled = styled.tr `
+  background-color: ${backgroundColors.primaryLight};
 
-  &:hover {
-    background-color: #ececec;
+  &:not(:last-child) {
+    border-bottom: 1px solid ${borderColors.lightGrey};
   }
+  
+  ${props => props.enableHover &&
+    css `
+        &:hover {
+          background-color: #ececec; // TODO
+        }
+      `}
 `;
 export const SSITableViewCellContainerStyled = styled.td `
   ${SSITextH3Css};

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { alertColors } from '@sphereon/ui-components.core';
 import { SSIFlexDirectionRowViewStyled, SSIRoundedContainerStyled } from '../../containers';
-import { SSITextH4DarkStyled } from '../../../fonts';
+import { SSITextH4Styled } from '../../../fonts';
 export const SSIToastContainerStyled = styled(SSIRoundedContainerStyled) `
   //TODO we need better width, use a max width and use content to scale
   // 96.8%;
@@ -19,6 +19,6 @@ export const SSIToastTitleContainerStyled = styled(SSIFlexDirectionRowViewStyled
   margin-bottom: 12px;
   width: 100%;
 `;
-export const SSIToastMessageTextStyled = styled(SSITextH4DarkStyled) `
+export const SSIToastMessageTextStyled = styled(SSITextH4Styled) `
   width: 100%;
 `;

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

@@ -24,3 +24,5 @@ export * from './DragAndDropBox';
 export * from './PassportPhotoControl';
 export * from './CredentialIssuanceWizardView';
 export * from './Pagination';
+export * from './CredentialViewItem';
+export * from './JSONDataView';

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

@@ -24,3 +24,5 @@ export * from './DragAndDropBox';
 export * from './PassportPhotoControl';
 export * from './CredentialIssuanceWizardView';
 export * from './Pagination';
+export * from './CredentialViewItem';
+export * from './JSONDataView';

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

@@ -8,4 +8,5 @@ export declare const SSITextH4SemiBoldCss: import("styled-components").FlattenSi
 export declare const SSITextH5Css: import("styled-components").FlattenSimpleInterpolation;
 export declare const SSITextH6Css: import("styled-components").FlattenSimpleInterpolation;
 export declare const SSITextH7RegularCss: import("styled-components").FlattenSimpleInterpolation;
+export declare const SSITextH7SemiBoldCss: import("styled-components").FlattenSimpleInterpolation;
 export declare const gradient100TextCss: import("styled-components").FlattenSimpleInterpolation;

package/dist/styles/css/index.js

@@ -71,6 +71,13 @@ export const SSITextH7RegularCss = css `
   line-height: ${fontStyle.h7Regular.lineHeight}px;
   height: auto;
 `;
+export const SSITextH7SemiBoldCss = css `
+  font-family: ${fontStyle.h7SemiBold.fontFamily};
+  font-size: ${fontStyle.h7SemiBold.fontSize}px;
+  font-weight: ${fontStyle.h7SemiBold.fontWeight};
+  line-height: ${fontStyle.h7SemiBold.lineHeight}px;
+  height: auto;
+`;
 export const gradient100TextCss = css `
   background: ${gradientColors['100']};
   background-clip: text;

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

@@ -1,17 +1,13 @@
 export declare const SSITextH1Styled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITextH1SemiBoldStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITextH1SemiBoldDarkStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITextH1SemiBoldLightStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITextH2Styled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITextH2DarkStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITextH2SemiBoldStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITextH2SemiBoldDarkStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITextH3Styled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITextH3LightStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITextH4Styled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITextH4SemiBoldStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITextH4LightStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITextH4DarkStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITextH4SemiBoldLightStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITextH5Styled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITextH5LightStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/styles/fonts/index.js

@@ -2,27 +2,22 @@ import styled from 'styled-components';
 import { fontColors } from '@sphereon/ui-components.core';
 import { SSITextH1Css, SSITextH1SemiBoldCss, SSITextH2Css, SSITextH2SemiBoldStyledCss, SSITextH3Css, SSITextH4Css, SSITextH4SemiBoldCss, SSITextH5Css, SSITextH6Css, SSITextH7RegularCss, } from '../css';
 export const SSITextH1Styled = styled.div `
-  ${SSITextH1Css}
+  ${SSITextH1Css};
+  color: ${fontColors.dark};
 `;
 export const SSITextH1SemiBoldStyled = styled.div `
-  ${SSITextH1SemiBoldCss}
-`;
-export const SSITextH1SemiBoldDarkStyled = styled(SSITextH1SemiBoldStyled) `
+  ${SSITextH1SemiBoldCss};
   color: ${fontColors.dark};
 `;
 export const SSITextH1SemiBoldLightStyled = styled(SSITextH1SemiBoldStyled) `
   color: ${fontColors.light};
 `;
 export const SSITextH2Styled = styled.div `
-  ${SSITextH2Css}
-`;
-export const SSITextH2DarkStyled = styled(SSITextH2Styled) `
+  ${SSITextH2Css};
   color: ${fontColors.dark};
 `;
 export const SSITextH2SemiBoldStyled = styled.div `
-  ${SSITextH2SemiBoldStyledCss}
-`;
-export const SSITextH2SemiBoldDarkStyled = styled(SSITextH2SemiBoldStyled) `
+  ${SSITextH2SemiBoldStyledCss};
   color: ${fontColors.dark};
 `;
 export const SSITextH3Styled = styled.div `
@@ -33,32 +28,34 @@ export const SSITextH3LightStyled = styled(SSITextH3Styled) `
   color: ${fontColors.light};
 `;
 export const SSITextH4Styled = styled.div `
-  ${SSITextH4Css}
+  ${SSITextH4Css};
+  color: ${fontColors.dark};
 `;
 export const SSITextH4SemiBoldStyled = styled.div `
-  ${SSITextH4SemiBoldCss}
+  ${SSITextH4SemiBoldCss};
+  color: ${fontColors.dark};
 `;
 export const SSITextH4LightStyled = styled(SSITextH4Styled) `
   color: ${fontColors.light};
 `;
-export const SSITextH4DarkStyled = styled(SSITextH4Styled) `
-  color: ${fontColors.dark};
-`;
 export const SSITextH4SemiBoldLightStyled = styled(SSITextH4SemiBoldStyled) `
   color: ${fontColors.light};
 `;
 export const SSITextH5Styled = styled.div `
-  ${SSITextH5Css}
+  ${SSITextH5Css};
+  color: ${fontColors.dark};
 `;
 export const SSITextH5LightStyled = styled(SSITextH5Styled) `
   color: ${fontColors.light};
 `;
 export const SSITextH6Styled = styled.div `
-  ${SSITextH6Css}
+  ${SSITextH6Css};
+  color: ${fontColors.dark};
 `;
 export const SSITextH6LightStyled = styled(SSITextH6Styled) `
   color: ${fontColors.light};
 `;
 export const SSITextH7RegularStyled = styled.div `
-  ${SSITextH7RegularCss}
+  ${SSITextH7RegularCss};
+  color: ${fontColors.dark};
 `;

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

@@ -1,31 +1,41 @@
 import { AccessorFn, DeepKeys } from '@tanstack/react-table';
 import { Button } from '../button';
+import { ValueSelection } from '../field';
 export declare enum TableCellType {
     TEXT = "text",
     LABEL = "label",
     STATUS = "status",
     CREDENTIAL_CARD = "credentialCard",
-    ACTION_GROUP = "actionGroup"
+    CREDENTIAL_DETAILS = "credentialDetails",
+    ACTIONS = "actions",
+    COMBOBOX = "combobox"
 }
 export type ColumnHeader<T> = {
     accessor: AccessorFn<T> | DeepKeys<T>;
     type: TableCellType;
     label?: string;
-    opts?: TableCellOptions;
+    columnOptions?: TableColumnOptions;
 };
-export type TableCellOptions = {
-    truncationLength?: number;
-    enableHover?: boolean;
+export type TableColumnOptions = {
     columnMinWidth?: number;
     columnMaxWidth?: number;
     columnWidth?: number;
-    actionGroup?: TableColumnActionGroup;
-};
-export type TableColumnActionGroup = {
-    label?: string;
-    actions: Array<Button>;
+    cellOptions?: TableCellOptions;
 };
+export type TableCellOptions = TextCellOptions | ComboboxCellOptions | ActionsCellOptions;
 export type TableRowSelection = {
     rowId: string;
     rowData: any;
 };
+export type TextCellOptions = {
+    truncationLength?: number;
+    enableHover?: boolean;
+};
+export type ComboboxCellOptions = {
+    selectOptions?: Array<ValueSelection>;
+    defaultValue?: ValueSelection;
+    onChange?: (value: ValueSelection) => Promise<void>;
+};
+export type ActionsCellOptions = {
+    actions: Array<Button>;
+};

package/dist/types/table/index.js

@@ -4,5 +4,7 @@ export var TableCellType;
     TableCellType["LABEL"] = "label";
     TableCellType["STATUS"] = "status";
     TableCellType["CREDENTIAL_CARD"] = "credentialCard";
-    TableCellType["ACTION_GROUP"] = "actionGroup";
+    TableCellType["CREDENTIAL_DETAILS"] = "credentialDetails";
+    TableCellType["ACTIONS"] = "actions";
+    TableCellType["COMBOBOX"] = "combobox";
 })(TableCellType || (TableCellType = {}));

package/dist/utils/ImageUtils.d.ts

@@ -0,0 +1,2 @@
+import { ImageSize } from '@sphereon/ui-components.core';
+export declare const getImageSize: (uri: string) => Promise<ImageSize>;

package/dist/utils/ImageUtils.js

@@ -0,0 +1,12 @@
+export const getImageSize = (uri) => {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => {
+            resolve({ width: img.width, height: img.height });
+        };
+        img.onerror = (error) => {
+            reject(error);
+        };
+        img.src = uri;
+    });
+};

package/dist/utils/index.d.ts

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

package/dist/utils/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.1.3-next.149+b8b840c",
+  "version": "0.1.3-next.157+cd7d4db",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -40,8 +40,9 @@
     "@mui/styled-engine-sc": "^5.14.12",
     "@mui/system": "^5.15.12",
     "@mui/x-date-pickers": "^6.19.5",
-    "@sphereon/ui-components.core": "0.1.3-next.149+b8b840c",
+    "@sphereon/ui-components.core": "0.1.3-next.157+cd7d4db",
     "@tanstack/react-table": "^8.9.3",
+    "react-json-tree": "^0.18.0",
     "react-loader-spinner": "^5.4.5",
     "react-select": "^5.8.0",
     "react-toastify": "^9.1.3",
@@ -58,5 +59,5 @@
   "peerDependencies": {
     "react": ">= 16.8.0"
   },
-  "gitHead": "b8b840c0e9384f8386a29f0fbd58e272e77d264d"
+  "gitHead": "cd7d4dbd82651ce16d04d08b2aa309258455d1bc"
 }