@sphereon/ui-components.ssi-react 0.2.1-unstable.2 → 0.2.1-unstable.4

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/{SSIIconButton → IconButton}/index.js

@@ -1,14 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ButtonIcon, fontColors } from '@sphereon/ui-components.core';
+import { ButtonIcon, fontColors, OpacityStyleEnum } from '@sphereon/ui-components.core';
 import SSIAddIcon from '../../assets/icons/SSIAddIcon';
 import SSIFilterIcon from '../../assets/icons/SSIFilterIcon';
 import SSIArrowDownIcon from '../../assets/icons/SSIArrowDownIcon';
-import { SSIIconButtonContainerStyled as Container, SSITextH3Styled as Caption } from '../../../styles';
 import MeatBallsIcon from '../../assets/icons/MeatBallsIcon';
 import DeleteIcon from '../../assets/icons/DeleteIcon';
-const SSIIconButton = (props) => {
-    const { caption, icon, onClick, disabled = false, iconColor = fontColors.dark } = props;
-    return (_jsxs(Container, { onClick: onClick, children: [getIcon(icon, iconColor), caption && _jsx(Caption, { children: caption })] }));
+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 })] }));
 };
 const getIcon = (icon, color) => {
     switch (icon) {
@@ -26,4 +34,4 @@ const getIcon = (icon, color) => {
             return _jsx("div", {});
     }
 };
-export default SSIIconButton;
+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/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/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

@@ -11,15 +11,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';
@@ -40,9 +40,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, 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';
@@ -39,8 +39,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, 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}
 `;

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

@@ -3,9 +3,9 @@ export * from './DropDownListItem';
 export * from './SSICredentialCardView';
 export * from './SSICredentialMiniCardView';
 export * from './SSIStatusLabel';
-export * from './SSIPrimaryButton';
-export * from './SSISecondaryButton';
-export * from './SSIIconButton';
+export * from './PrimaryButton';
+export * from './SecondaryButton';
+export * from './IconButton';
 export * from './DropDownList';
 export * from './SSITypeLabel';
 export * from './SSITableViewHeader';

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

@@ -3,9 +3,9 @@ export * from './DropDownListItem';
 export * from './SSICredentialCardView';
 export * from './SSICredentialMiniCardView';
 export * from './SSIStatusLabel';
-export * from './SSIPrimaryButton';
-export * from './SSISecondaryButton';
-export * from './SSIIconButton';
+export * from './PrimaryButton';
+export * from './SecondaryButton';
+export * from './IconButton';
 export * from './DropDownList';
 export * from './SSITypeLabel';
 export * from './SSITableViewHeader';

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

@@ -1,6 +1,7 @@
 export type ProgressIndicatorStep = {
     title?: string;
     description?: string;
+    required?: boolean;
 };
 export declare enum StepStatus {
     CURRENT = "current",

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

@@ -1,6 +1,6 @@
 import { JsonFormsCore, JsonSchema, UISchemaElement } from '@jsonforms/core';
 import { ErrorObject } from 'ajv';
-export type CredentialFormInput = Pick<JsonFormsCore, 'data' | 'errors'>;
+export type JSONFormState = Pick<JsonFormsCore, 'data' | 'errors'>;
 export type CredentialFormData = {
     data?: any;
     errors?: ErrorObject[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.2.1-unstable.2+4c8020a",
+  "version": "0.2.1-unstable.4+0c3e560",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -40,7 +40,7 @@
     "@mui/styled-engine-sc": "^5.14.12",
     "@mui/system": "^5.15.12",
     "@mui/x-date-pickers": "^6.19.5",
-    "@sphereon/ui-components.core": "0.2.1-unstable.2+4c8020a",
+    "@sphereon/ui-components.core": "0.2.1-unstable.4+0c3e560",
     "@tanstack/react-table": "^8.9.3",
     "react-json-tree": "^0.18.0",
     "react-loader-spinner": "5.4.5",
@@ -59,5 +59,5 @@
   "peerDependencies": {
     "react": ">= 18"
   },
-  "gitHead": "4c8020a435287a10dca85c22eac2a8841a9ad6ed"
+  "gitHead": "0c3e560dd1878d1aa7a6074a7d2838816569a296"
 }

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

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

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

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

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

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