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

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

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+const CopyIcon = (props) => {
+    const { width = 14, height = 19, color = fontColors.dark, style } = props;
+    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 14 19", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M10.8054 0.456417C10.5328 0.161924 10.1706 0 9.78556 0H4.50625C3.71044 0 3.0625 0.700723 3.0625 1.56242V4.26115H1.44375C0.647938 4.26115 0 4.96187 0 5.82357V17.4376C0 18.2988 0.6475 19 1.44375 19H9.49375C10.2896 19 10.9375 18.2993 10.9375 17.4376V14.7403H12.5563C13.3521 14.7403 14 14.0395 14 13.1778V4.55517C14 4.13758 13.8495 3.74508 13.5761 3.44917L10.8054 0.456417ZM10.6461 1.62255L12.5051 3.63003H10.8793C10.7529 3.63003 10.6461 3.5145 10.6461 3.37767V1.62255ZM10.0629 17.4381C10.0629 17.7775 9.80787 18.0536 9.49419 18.0536H1.44375C1.13006 18.0536 0.875 17.7775 0.875 17.4381V5.82405C0.875 5.48458 1.13006 5.20855 1.44375 5.20855H3.0625V13.1783C3.0625 14.0395 3.71 14.7407 4.50625 14.7407H10.0625L10.0629 17.4381ZM12.5567 13.7938H10.5079C10.5053 13.7938 10.5031 13.7924 10.5004 13.7924C10.4978 13.7924 10.4956 13.7938 10.493 13.7938H4.50669C4.193 13.7938 3.93794 13.5178 3.93794 13.1783V1.56242C3.93794 1.22295 4.193 0.946922 4.50669 0.946922H9.77156V3.3772C9.77156 4.03862 10.2686 4.57648 10.8798 4.57648H13.1254V13.1778C13.1254 13.5173 12.8704 13.7938 12.5567 13.7938Z", fill: color }) }) }));
+};
+export default CopyIcon;

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+const ViewIcon = (props) => {
+    const { width = 16, height = 17, color = fontColors.dark, style } = props;
+    return (_jsx("div", { style: { ...style, width: width, height: height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0 14.7857V2.21429C0 1.26743 0.767429 0.5 1.71429 0.5H14.2857C15.2326 0.5 16 1.26743 16 2.21429V14.7857C16 15.7326 15.2326 16.5 14.2857 16.5C14.2857 16.5 10.2846 16.5 10.2817 16.5H1.71429C0.767429 16.5 0 15.7326 0 14.7857ZM14.8571 13.1566V2.21429C14.8571 1.89886 14.6011 1.64286 14.2857 1.64286H1.71429C1.39886 1.64286 1.14286 1.89886 1.14286 2.21429V10.3863L3.06628 7.08857C3.37714 6.55657 3.94915 6.232 4.56515 6.23829C5.18115 6.24457 5.74628 6.58114 6.04571 7.12L8.60172 11.72L9.52171 10.1869C9.81028 9.70571 10.3166 9.396 10.8766 9.35829C11.4366 9.32057 11.9794 9.55943 12.3303 9.99771L14.8571 13.1566ZM10.6217 15.3571H14.2857C14.5423 15.3571 14.76 15.1874 14.832 14.9543L11.4377 10.712C11.3206 10.5657 11.14 10.4863 10.9531 10.4989C10.7663 10.5114 10.5977 10.6143 10.5017 10.7749L9.24229 12.8737L10.6217 15.3571ZM1.14286 12.6543V14.7857C1.14286 15.1011 1.39886 15.3571 1.71429 15.3571H9.31428L5.04686 7.67486C4.94686 7.49543 4.75828 7.38343 4.55314 7.38114C4.34799 7.37886 4.15714 7.48743 4.05371 7.66457L1.14286 12.6543ZM8 6.21429C7.68457 6.21429 7.42857 5.95829 7.42857 5.64286C7.42857 5.32743 7.68457 5.07143 8 5.07143H10.2857C10.6011 5.07143 10.8571 5.32743 10.8571 5.64286C10.8571 5.95829 10.6011 6.21429 10.2857 6.21429H8ZM3.42857 3.92857C3.11314 3.92857 2.85714 3.67257 2.85714 3.35714C2.85714 3.04171 3.11314 2.78571 3.42857 2.78571H5.71429C6.02971 2.78571 6.28571 3.04171 6.28571 3.35714C6.28571 3.67257 6.02971 3.92857 5.71429 3.92857H3.42857ZM10.8571 3.92857C10.5417 3.92857 10.2857 3.67257 10.2857 3.35714C10.2857 3.04171 10.5417 2.78571 10.8571 2.78571H13.1429C13.4583 2.78571 13.7143 3.04171 13.7143 3.35714C13.7143 3.67257 13.4583 3.92857 13.1429 3.92857H10.8571Z", fill: color }) }) }));
+};
+export default ViewIcon;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,13 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Autocomplete, TextField } from '@mui/material';
-import { materialCells } from '@jsonforms/material-renderers';
-import { JsonForms } from '@jsonforms/react';
 import { Localization } from '@sphereon/ui-components.core';
 import FileSelection from '../../fields/FileSelection';
 import DragAndDropBox from '../../fields/DragAndDropBox';
-import { jsonFormsMaterialRenderers } from '../../../renders/jsonFormsRenders';
 import { CredentialIssuanceWizardViewContainerStyled as Container, CredentialIssuanceWizardViewCredentialTypeContainerStyled as CredentialTypeContainer, CredentialIssuanceWizardViewCredentialTypeTitleStyled as CredentialTypeTitle, CredentialIssuanceWizardViewFormContainerStyled as FormContainer, CredentialIssuanceWizardViewEvidenceContainerStyled as EvidenceContainer, CredentialIssuanceWizardViewEvidenceContentContainerStyled as EvidenceContentContainer, CredentialIssuanceWizardViewEvidenceTitleContainerStyled as EvidenceTitleContainer, SSITextH2SemiBoldStyled as EvidenceTitle, CredentialIssuanceWizardViewEvidenceTitleOptionalStyled as EvidenceTitleOptional, SSITextH2Styled as EvidenceDescription, CredentialIssuanceWizardViewEvidenceFilesContainerStyled as EvidenceFilesContainer } from '../../../styles';
+import FormView from "../FormView";
 const CredentialIssuanceWizardView = (props) => {
     const { credentialData, credentialTypes, onSelectCredentialTypeChange, onCredentialFormDataChange } = props;
     const [selectedCredentialType, setSelectedCredentialType] = useState(null);
@@ -19,7 +17,7 @@ const CredentialIssuanceWizardView = (props) => {
         setSelectedCredentialType(value);
         onSelectCredentialTypeChange?.(value);
     };
-    const onCredentialFormInputChange = (state) => {
+    const onCredentialFormInputChange = async (state) => {
         setCredentialInput(state);
         onCredentialFormDataChange?.({ ...state, evidence });
     };
@@ -38,6 +36,7 @@ const CredentialIssuanceWizardView = (props) => {
         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()] })] }) })] })] }));
+                _jsxs(_Fragment, { children: [_jsx(FormContainer, { children: (selectedCredentialType.schema && selectedCredentialType.uiSchema) &&
+                                _jsx(FormView, { schema: selectedCredentialType.schema, uiSchema: selectedCredentialType.uiSchema, data: credentialData, onFormStateChange: onCredentialFormInputChange }) }), _jsx(EvidenceContainer, { children: _jsxs(EvidenceContentContainer, { children: [_jsxs("div", { children: [_jsxs(EvidenceTitleContainer, { children: [_jsx(EvidenceTitle, { children: Localization.translate('credential_issuance_wizard_evidence_title') }), _jsx(EvidenceTitleOptional, { children: Localization.translate('optional_label') })] }), _jsx(EvidenceDescription, { children: Localization.translate('credential_issuance_wizard_evidence_description') })] }), _jsxs(EvidenceFilesContainer, { children: [_jsx(DragAndDropBox, { caption: Localization.translate('drag_and_drop_upload_evidence_caption'), description: Localization.translate('credential_attach_evidence_description'), onChangeFile: onAddEvidence }), getEvidenceElements()] })] }) })] })] }));
 };
 export default CredentialIssuanceWizardView;

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

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

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

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

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

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

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

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

package/dist/index.d.ts

@@ -1,8 +1,7 @@
 import SSIToastContainer from './components/messageBoxes/toasts/SSIToastContainer';
 import SSIStatusLabel from './components/labels/SSIStatusLabel';
 import SSICredentialCardView from './components/views/SSICredentialCardView';
-import CredentialMiniCardView from './components/views/CredentialMiniCardView';
-import { CredentialMiniCardViewProps } from './components/views/CredentialMiniCardView';
+import CredentialMiniCardView, { CredentialMiniCardViewProps } from './components/views/CredentialMiniCardView';
 import SSICheckmarkBadge from './components/assets/badges/SSICheckmarkBadge';
 import SSIExclamationMarkBadge from './components/assets/badges/SSIExclamationMarkBadge';
 import SSIPlaceholderLogo from './components/assets/logos/SSIPlaceholderLogo';
@@ -11,15 +10,15 @@ import SSIAddIcon from './components/assets/icons/SSIAddIcon';
 import SSIFilterIcon from './components/assets/icons/SSIFilterIcon';
 import SSIArrowDownIcon from './components/assets/icons/SSIArrowDownIcon';
 import SSITypeLabel from './components/labels/SSITypeLabel';
-import SSIIconButton from './components/buttons/SSIIconButton';
-import SSIPrimaryButton from './components/buttons/SSIPrimaryButton';
+import IconButton from './components/buttons/IconButton';
+import PrimaryButton from './components/buttons/PrimaryButton';
 import DropDownList from './components/lists/DropDownList';
 import SSITableView from './components/views/SSITableView';
 import SSITableViewHeader from './components/views/SSITableView/SSITableViewHeader';
 import SSITabView from './components/views/SSITabView';
 import SSITabViewHeader from './components/views/SSITabView/SSITabViewHeader';
 import SSIProfileIcon from './components/assets/icons/SSIProfileIcon';
-import SSISecondaryButton from './components/buttons/SSISecondaryButton';
+import SecondaryButton from './components/buttons/SecondaryButton';
 import SSICheckbox from './components/fields/SSICheckbox';
 import SSIActivityIndicator from './components/indicators/SSIActivityIndicator';
 import SSIHoverText from './components/fields/SSIHoverText';
@@ -28,6 +27,11 @@ import StepMarker from './components/assets/markers/StepMarker';
 import DocumentIcon from './components/assets/icons/DocumentIcon';
 import CrossIcon from './components/assets/icons/CrossIcon';
 import ImageIcon from './components/assets/icons/ImageIcon';
+import MeatBallsIcon from './components/assets/icons/MeatBallsIcon';
+import PencilIcon from './components/assets/icons/PencilIcon';
+import ViewIcon from './components/assets/icons/ViewIcon';
+import CopyIcon from './components/assets/icons/CopyIcon';
+import DeleteIcon from './components/assets/icons/DeleteIcon';
 import FileSelection from './components/fields/FileSelection';
 import ComboBox from './components/fields/ComboBox';
 import DragAndDropBox from './components/fields/DragAndDropBox';
@@ -40,9 +44,10 @@ import CredentialViewItem from './components/views/CredentialViewItem';
 import JSONDataView from './components/views/JSONDataView';
 import TextInputField from './components/fields/TextInputField';
 import WarningImage from './components/assets/images/WarningImage';
+import FormView from './components/views/FormView';
 import { 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, CredentialViewItem, JSONDataView, TextInputField, WarningImage };
+export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, };

package/dist/index.js

@@ -10,15 +10,15 @@ import SSIAddIcon from './components/assets/icons/SSIAddIcon';
 import SSIFilterIcon from './components/assets/icons/SSIFilterIcon';
 import SSIArrowDownIcon from './components/assets/icons/SSIArrowDownIcon';
 import SSITypeLabel from './components/labels/SSITypeLabel';
-import SSIIconButton from './components/buttons/SSIIconButton';
-import SSIPrimaryButton from './components/buttons/SSIPrimaryButton';
+import IconButton from './components/buttons/IconButton';
+import PrimaryButton from './components/buttons/PrimaryButton';
 import DropDownList from './components/lists/DropDownList';
 import SSITableView from './components/views/SSITableView';
 import SSITableViewHeader from './components/views/SSITableView/SSITableViewHeader';
 import SSITabView from './components/views/SSITabView';
 import SSITabViewHeader from './components/views/SSITabView/SSITabViewHeader';
 import SSIProfileIcon from './components/assets/icons/SSIProfileIcon';
-import SSISecondaryButton from './components/buttons/SSISecondaryButton';
+import SecondaryButton from './components/buttons/SecondaryButton';
 import SSICheckbox from './components/fields/SSICheckbox';
 import SSIActivityIndicator from './components/indicators/SSIActivityIndicator';
 import SSIHoverText from './components/fields/SSIHoverText';
@@ -27,6 +27,11 @@ import StepMarker from './components/assets/markers/StepMarker';
 import DocumentIcon from './components/assets/icons/DocumentIcon';
 import CrossIcon from './components/assets/icons/CrossIcon';
 import ImageIcon from './components/assets/icons/ImageIcon';
+import MeatBallsIcon from './components/assets/icons/MeatBallsIcon';
+import PencilIcon from './components/assets/icons/PencilIcon';
+import ViewIcon from './components/assets/icons/ViewIcon';
+import CopyIcon from './components/assets/icons/CopyIcon';
+import DeleteIcon from './components/assets/icons/DeleteIcon';
 import FileSelection from './components/fields/FileSelection';
 import ComboBox from './components/fields/ComboBox';
 import DragAndDropBox from './components/fields/DragAndDropBox';
@@ -39,8 +44,9 @@ import CredentialViewItem from './components/views/CredentialViewItem';
 import JSONDataView from './components/views/JSONDataView';
 import TextInputField from './components/fields/TextInputField';
 import WarningImage from './components/assets/images/WarningImage';
+import FormView from './components/views/FormView';
 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, CredentialViewItem, JSONDataView, TextInputField, WarningImage };
+export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, };

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

@@ -0,0 +1 @@
+export declare const IconButtonContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/styles/components/components/{SSIIconButton → IconButton}/index.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-export const SSIIconButtonContainerStyled = styled.div `
+export const IconButtonContainerStyled = styled.div `
   gap: 8px;
   height: 32px;
   min-width: 32px;

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

@@ -0,0 +1 @@
+export declare const PrimaryButtonContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,13 +1,14 @@
 import styled from 'styled-components';
 import { SSIRoundedContainerStyled } from '../../containers';
 import { gradientColors } from '../../../colors';
-export const SSIPrimaryButtonContainerStyled = styled(SSIRoundedContainerStyled) `
+export const PrimaryButtonContainerStyled = styled(SSIRoundedContainerStyled) `
   background: ${gradientColors['100']};
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 8px;
-  padding: 9px 6px 9px 6px;
+  padding: 9px;
   cursor: pointer;
+  width: 180px;
 `;

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

@@ -5,4 +5,5 @@ export declare const ProgressStepIndicatorStepTextCellStyled: import("styled-com
 export declare const ProgressStepIndicatorSpacerLineCellStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ProgressStepIndicatorTitleTextStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ProgressStepIndicatorDescriptionTextStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProgressStepIndicatorOptionalTextStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ProgressStepIndicatorStepLineStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { backgroundColors, borderColors, elementColors, fontColors } from '@sphereon/ui-components.core';
 import { SSITextH1SemiBoldStyled, SSITextH3Styled } from '../../../fonts';
+import { SSITextH2Css } from "../../../css";
 export const ProgressStepIndicatorContainerStyled = styled.div `
   background-color: ${backgroundColors.primaryLight};
   border-radius: 24px;
@@ -36,11 +37,20 @@ export const ProgressStepIndicatorSpacerLineCellStyled = styled.div `
 `;
 export const ProgressStepIndicatorTitleTextStyled = styled(SSITextH1SemiBoldStyled) `
   word-break: break-word;
+  
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
 `;
 export const ProgressStepIndicatorDescriptionTextStyled = styled(SSITextH3Styled) `
   word-break: break-word;
   color: ${fontColors.lightGrey};
 `;
+export const ProgressStepIndicatorOptionalTextStyled = styled.div `
+  ${SSITextH2Css};
+  line-height: unset;
+  font-style: italic;
+`;
 export const ProgressStepIndicatorStepLineStyled = styled.div `
   width: 4px;
   display: flex;

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

@@ -0,0 +1,2 @@
+export declare const SecondaryButtonContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SecondaryButtonCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -2,15 +2,16 @@ import styled from 'styled-components';
 import { SSIRoundedContainerStyled } from '../../containers';
 import { SSITextH3Styled } from '../../../fonts';
 import { gradient100TextCss } from '../../../css';
-export const SSISecondaryButtonContainerStyled = styled(SSIRoundedContainerStyled) `
+export const SecondaryButtonContainerStyled = styled(SSIRoundedContainerStyled) `
   position: relative;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 8px;
-  padding: 9px 6px 9px 6px;
+  padding: 9px;
   cursor: pointer;
+  width: 180px;
 
   &::before {
     content: '';
@@ -27,6 +28,6 @@ export const SSISecondaryButtonContainerStyled = styled(SSIRoundedContainerStyle
     mask-composite: exclude;
   }
 `;
-export const SSISecondaryButtonCaptionStyled = styled(SSITextH3Styled) `
+export const SecondaryButtonCaptionStyled = styled(SSITextH3Styled) ` // FIXME H3 vs H2 mobile
   ${gradient100TextCss}
 `;