@sphereon/ui-components.ssi-react 0.1.3-unstable.134 → 0.1.3-unstable.144

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

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

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

@@ -0,0 +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;
+    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/DocumentIcon/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 DocumentIcon: FC<Props>;
+export default DocumentIcon;

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

@@ -0,0 +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;
+    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.d.ts

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

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

@@ -0,0 +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;
+    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.d.ts

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

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

@@ -0,0 +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;
+    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/fields/ComboBox/index.d.ts

@@ -0,0 +1,20 @@
+import { CSSProperties, ReactElement } from 'react';
+type ComboBoxOption = {
+    label: string;
+    value: any;
+};
+type Props<T extends ComboBoxOption> = {
+    onChange?: (value: any) => Promise<void>;
+    noOptionsMessage?: string;
+    placeholder?: string;
+    defaultValue?: T;
+    inlineOption?: InlineOption;
+    options: Array<T>;
+    style?: CSSProperties;
+};
+type InlineOption = {
+    caption: string;
+    onCreate: (name: string) => Promise<void>;
+};
+declare const ComboBox: <T extends ComboBoxOption>(props: Props<T>) => ReactElement;
+export default ComboBox;

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 creatableProps = inlineOption
+        ? {
+            allowCreateWhileLoading: true,
+            isValidNewOption: () => true,
+            onCreateOption: inlineOption.onCreate,
+            createOptionPosition: 'last',
+            formatCreateLabel: (inputValue) => `${inlineOption.caption}`,
+        }
+        : {};
+    return (_jsx(CreatableSelect, { styles: {
+            control: (provided, state) => ({
+                ...provided,
+                maxWidth: 455,
+                borderColor: state.isFocused ? '#7276F7' : provided.borderColor,
+                '&:hover': {
+                    borderColor: '#7276F7',
+                },
+                boxShadow: 'none',
+                height: 48,
+                backgroundColor: backgroundColors.primaryLight,
+            }),
+            menu: (provided) => ({
+                ...provided,
+                maxWidth: 455,
+            }),
+            option: (provided, state) => ({
+                ...provided,
+                color: 'rgba(17, 17, 19, 0.60)',
+                backgroundColor: state.isSelected ? '#7B61FF' : state.isFocused ? '#B7B8D9' : backgroundColors.primaryLight,
+                '&:hover': {
+                    backgroundColor: '#B7B8D9',
+                },
+            }),
+            singleValue: (provided) => ({
+                ...provided,
+                color: fontColors.dark,
+            }),
+        }, defaultValue: defaultValue, onChange: onChange, options: options, placeholder: placeholder, noOptionsMessage: noOptionsMessage ? () => noOptionsMessage : undefined, maxMenuHeight: 210, ...creatableProps }));
+};
+export default ComboBox;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    caption: string;
+    description?: string;
+    onChangeFile: (file: File) => Promise<void>;
+};
+declare const DragAndDropBox: React.FC<Props>;
+export default DragAndDropBox;

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

@@ -0,0 +1,30 @@
+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';
+const DragAndDropBox = (props) => {
+    const { caption, description, onChangeFile } = props;
+    const inputFile = useRef(null);
+    const onSelect = async () => {
+        inputFile.current?.click();
+    };
+    const onChange = async (event) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            await onChangeFile(file);
+        }
+    };
+    const onDrop = async (event) => {
+        event.preventDefault();
+        const file = event.dataTransfer.files[0];
+        const reader = new FileReader();
+        reader.onload = async () => {
+            await onChangeFile(file);
+        };
+        reader.readAsText(file);
+    };
+    const onDragOver = async (event) => {
+        event.preventDefault();
+    };
+    return (_jsxs(Container, { onClick: onSelect, onDrop: onDrop, onDragOver: onDragOver, children: [_jsx(HiddenInput, { ref: inputFile, type: 'file', onChange: onChange }), _jsxs(CaptionContainer, { children: [_jsx(Caption, { children: caption }), _jsx(Description, { children: description })] })] }));
+};
+export default DragAndDropBox;

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

@@ -0,0 +1,12 @@
+import React, { CSSProperties } from 'react';
+import { AssetFilePermission, FileSelectionFieldType } from '../../../types';
+type Props = {
+    file: File;
+    fileType?: FileSelectionFieldType;
+    permission?: AssetFilePermission;
+    onPermissionChange?: (permission: AssetFilePermission) => Promise<void>;
+    onRemove?: () => Promise<void>;
+    style?: CSSProperties;
+};
+declare const FileSelection: React.FC<Props>;
+export default FileSelection;

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ComboBox from '../ComboBox';
+import DocumentIcon from '../../assets/icons/DocumentIcon';
+import ImageIcon from '../../assets/icons/ImageIcon';
+import CrossIcon from '../../assets/icons/CrossIcon';
+import { FileSelectionFieldContainerStyled as Container, FileSelectionFieldContentContainerStyled as ContentContainer, FileSelectionFieldRemoveContainerStyled as RemoveContainer, FileSelectionFieldRemoveButtonStyled as RemoveButton, FileSelectionFieldRemoveButtonCircleIconStyled as RemoveButtonCircleIcon, FileSelectionFieldIconContainerStyled as IconContainer, FileSelectionFieldFileDataContainerStyled as FileDataContainer, FileSelectionFieldFileNameCaptionStyled as FileNameCaption, FileSelectionFieldFileSizeCaptionStyled as FileSizeCaption, FileSelectionFieldPermissionSelectionContainerStyled as PermissionSelectionContainer } from '../../../styles';
+import { FileSelectionFieldType } from '../../../types';
+const filePermissions = [
+    { label: 'Public', value: 'public' },
+    { label: 'Private', value: 'private' },
+];
+const getFileSizeDisplay = (bytes) => {
+    if (bytes < 1024) {
+        return `${bytes} B`;
+    }
+    else if (bytes <= 1024 * 1024) {
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    }
+    else if (bytes <= 1024 * 1024 * 1024) {
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    }
+    else {
+        return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+    }
+};
+const FileSelection = (props) => {
+    const { file, fileType = FileSelectionFieldType.FILE, permission, onPermissionChange, onRemove, style } = props;
+    const onChange = async (selection) => {
+        if (onPermissionChange) {
+            await onPermissionChange(selection.value);
+        }
+    };
+    return (_jsxs(Container, { style: style, children: [_jsxs(ContentContainer, { children: [_jsx(IconContainer, { children: getIcon(fileType) }), _jsxs(FileDataContainer, { children: [_jsx(FileNameCaption, { children: file.name }), file.size && _jsx(FileSizeCaption, { children: getFileSizeDisplay(file.size) })] }), permission && (_jsx(PermissionSelectionContainer, { children: _jsx(ComboBox, { style: { width: 152, marginLeft: 'auto' }, defaultValue: filePermissions.find((selection) => selection.value === permission), onChange: onChange, options: filePermissions }) }))] }), onRemove &&
+                _jsx(RemoveContainer, { children: _jsx(RemoveButton, { onClick: onRemove, children: _jsx(RemoveButtonCircleIcon, { children: _jsx(CrossIcon, { size: 10 }) }) }) })] }));
+};
+const getIcon = (fileType) => {
+    switch (fileType) {
+        case FileSelectionFieldType.FILE:
+            return _jsx(DocumentIcon, {});
+        case FileSelectionFieldType.IMAGE:
+            return _jsx(ImageIcon, {});
+        default:
+            return _jsx("div", {});
+    }
+};
+export default FileSelection;

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

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

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { and, isObjectControl, optionIs, rankWith, } from '@jsonforms/core';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { base64toFile, Localization } from '@sphereon/ui-components.core';
+import DragAndDropBox from '../../DragAndDropBox';
+import PersonPlaceholder from '../../../assets/placeholders/PersonPlaceholder';
+import FileSelection from '../../FileSelection';
+import { PassportPhotoControlContainerStyled as Container, PassportPhotoControlDragAndDropBoxContainerStyled as DragAndDropBoxContainer, PassportPhotoControlPassportPhotoContainerStyled as PassportPhotoContainer, PassportPhotoControlPassportPhotoImageStyled as PassportPhotoImage } from '../../../../styles';
+import { FileSelectionFieldType } from '../../../../types';
+const PassportPhotoControl = (props) => {
+    const { data, handleChange, path } = props;
+    const [image, setImage] = useState(data && { file: base64toFile(data.base64, data.fileName, data.mimeType), base64: data.base64 });
+    const onAddImage = async (file) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            const result = reader.result;
+            if (typeof result === 'string') {
+                const base64Parts = result.split(';base64,');
+                const mimeType = base64Parts[0].replace("data:", "");
+                setImage({ file, base64: result });
+                handleChange(path, { fileName: file.name, mimeType, base64: result });
+            }
+        };
+        reader.readAsDataURL(file);
+    };
+    const onRemoveImage = async () => {
+        setImage(undefined);
+        handleChange(path, undefined);
+    };
+    return (_jsxs(Container, { children: [_jsxs(DragAndDropBoxContainer, { children: [_jsx(DragAndDropBox, { caption: Localization.translate('drag_and_drop_upload_image_caption'), description: Localization.translate('credential_attach_image_description'), onChangeFile: onAddImage }), _jsx(PassportPhotoContainer, { children: image
+                            ? _jsx(PassportPhotoImage, { src: image.base64, alt: Localization.translate('passport_photo_alt') })
+                            : _jsx(PersonPlaceholder, {}) })] }), image &&
+                _jsx(FileSelection, { file: image.file, fileType: FileSelectionFieldType.IMAGE, onRemove: onRemoveImage })] }));
+};
+export const passportPhotoControlTester = rankWith(3, and(isObjectControl, optionIs('type', 'passportPhoto')));
+export default withJsonFormsControlProps(PassportPhotoControl);

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

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

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Autocomplete, TextField } from '@mui/material';
+import { materialCells } from '@jsonforms/material-renderers';
+import { JsonForms } from '@jsonforms/react';
+import { Localization } from '@sphereon/ui-components.core';
+import FileSelection from '../../fields/FileSelection';
+import DragAndDropBox from '../../fields/DragAndDropBox';
+import { jsonFormsMaterialRenderers } from '../../../renders/jsonFormsRenders';
+import { CredentialIssuanceWizardViewContainerStyled as Container, CredentialIssuanceWizardViewCredentialTypeContainerStyled as CredentialTypeContainer, CredentialIssuanceWizardViewCredentialTypeTitleStyled as CredentialTypeTitle, CredentialIssuanceWizardViewFormContainerStyled as FormContainer, CredentialIssuanceWizardViewEvidenceContainerStyled as EvidenceContainer, CredentialIssuanceWizardViewEvidenceContentContainerStyled as EvidenceContentContainer, CredentialIssuanceWizardViewEvidenceTitleContainerStyled as EvidenceTitleContainer, SSITextH2SemiBoldDarkStyled as EvidenceTitle, CredentialIssuanceWizardViewEvidenceTitleOptionalStyled as EvidenceTitleOptional, SSITextH2DarkStyled as EvidenceDescription, CredentialIssuanceWizardViewEvidenceFilesContainerStyled as EvidenceFilesContainer } from '../../../styles';
+const CredentialIssuanceWizardView = (props) => {
+    const { credentialData, credentialTypes, onSelectCredentialTypeChange, onCredentialFormDataChange } = props;
+    const [selectedCredentialType, setSelectedCredentialType] = useState(null);
+    const [credentialInput, setCredentialInput] = useState(null);
+    const [evidence, setEvidence] = useState([]);
+    const onCredentialTypeChange = (event, value) => {
+        setCredentialInput(null);
+        setEvidence([]);
+        setSelectedCredentialType(value);
+        onSelectCredentialTypeChange?.(value);
+    };
+    const onCredentialFormInputChange = (state) => {
+        setCredentialInput(state);
+        onCredentialFormDataChange?.({ ...state, evidence });
+    };
+    const onAddEvidence = async (file) => {
+        const evidenceFiles = [...evidence, file];
+        setEvidence(evidenceFiles);
+        onCredentialFormDataChange?.({ ...credentialInput, evidence: evidenceFiles });
+    };
+    const onRemoveEvidence = async (index) => {
+        evidence.splice(index, 1);
+        const evidenceFiles = [...evidence];
+        setEvidence(evidenceFiles);
+        onCredentialFormDataChange?.({ ...credentialInput, evidence: evidenceFiles });
+    };
+    const getEvidenceElements = () => {
+        return evidence.map((file, index) => _jsx(FileSelection, { file: file, onRemove: async () => onRemoveEvidence(index) }, index));
+    };
+    return (_jsxs(Container, { children: [_jsxs(CredentialTypeContainer, { children: [_jsx(CredentialTypeTitle, { children: Localization.translate('credential_issuance_wizard_title') }), _jsx(Autocomplete, { options: credentialTypes, sx: { flexGrow: 1 }, renderInput: (params) => _jsx(TextField, { ...params, label: Localization.translate('credential_issuance_wizard_credential_type_label') }), onChange: onCredentialTypeChange })] }), selectedCredentialType &&
+                _jsxs(_Fragment, { children: [_jsx(FormContainer, { children: _jsx(JsonForms, { schema: selectedCredentialType.schema, uischema: selectedCredentialType.uiSchema, data: credentialData, renderers: jsonFormsMaterialRenderers, cells: materialCells, onChange: onCredentialFormInputChange }) }), _jsx(EvidenceContainer, { children: _jsxs(EvidenceContentContainer, { children: [_jsxs("div", { children: [_jsxs(EvidenceTitleContainer, { children: [_jsx(EvidenceTitle, { children: Localization.translate('credential_issuance_wizard_evidence_title') }), _jsx(EvidenceTitleOptional, { children: Localization.translate('credential_issuance_wizard_evidence_optional_title') })] }), _jsx(EvidenceDescription, { children: Localization.translate('credential_issuance_wizard_evidence_description') })] }), _jsxs(EvidenceFilesContainer, { children: [_jsx(DragAndDropBox, { caption: Localization.translate('drag_and_drop_upload_evidence_caption'), description: Localization.translate('credential_attach_evidence_description'), onChangeFile: onAddEvidence }), getEvidenceElements()] })] }) })] })] }));
+};
+export default CredentialIssuanceWizardView;

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

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

package/dist/index.d.ts

@@ -25,10 +25,19 @@ import SSIActivityIndicator from './components/indicators/SSIActivityIndicator';
 import SSIHoverText from './components/fields/SSIHoverText';
 import ProgressStepIndicator from './components/indicators/ProgressStepIndicator';
 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 FileSelection from './components/fields/FileSelection';
+import ComboBox from './components/fields/ComboBox';
+import DragAndDropBox from './components/fields/DragAndDropBox';
+import PersonPlaceholder from './components/assets/placeholders/PersonPlaceholder';
+import PassportPhotoControl, { passportPhotoControlTester } from './components/fields/JSONForms/PassportPhotoControl';
+import CredentialIssuanceWizardView from './components/views/CredentialIssuanceWizardView';
 import PaginationControls from './components/views/SSITableView/PaginationControls';
 import PaginationControlsProps from './components/views/SSITableView/PaginationControls';
 import { Row } from '@tanstack/react-table';
 export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
-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, };
+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, };

package/dist/index.js

@@ -24,9 +24,18 @@ import SSIActivityIndicator from './components/indicators/SSIActivityIndicator';
 import SSIHoverText from './components/fields/SSIHoverText';
 import ProgressStepIndicator from './components/indicators/ProgressStepIndicator';
 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 FileSelection from './components/fields/FileSelection';
+import ComboBox from './components/fields/ComboBox';
+import DragAndDropBox from './components/fields/DragAndDropBox';
+import PersonPlaceholder from './components/assets/placeholders/PersonPlaceholder';
+import PassportPhotoControl, { passportPhotoControlTester } from './components/fields/JSONForms/PassportPhotoControl';
+import CredentialIssuanceWizardView from './components/views/CredentialIssuanceWizardView';
 import PaginationControls from './components/views/SSITableView/PaginationControls';
 import PaginationControlsProps from './components/views/SSITableView/PaginationControls';
 export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
-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, };
+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, };

package/dist/renders/jsonFormsRenders.d.ts

@@ -0,0 +1,2 @@
+import { JsonFormsRendererRegistryEntry } from '@jsonforms/core';
+export declare const jsonFormsMaterialRenderers: Array<JsonFormsRendererRegistryEntry>;

package/dist/renders/jsonFormsRenders.js

@@ -0,0 +1,6 @@
+import { materialRenderers } from '@jsonforms/material-renderers';
+import PassportPhotoControl, { passportPhotoControlTester } from '../components/fields/JSONForms/PassportPhotoControl';
+export const jsonFormsMaterialRenderers = [
+    ...materialRenderers,
+    { tester: passportPhotoControlTester, renderer: PassportPhotoControl },
+];

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

@@ -0,0 +1,9 @@
+export declare const CredentialIssuanceWizardViewContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewCredentialTypeContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewCredentialTypeTitleStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewFormContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewEvidenceContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewEvidenceContentContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewEvidenceTitleContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewEvidenceTitleOptionalStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewEvidenceFilesContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+import { backgroundColors, borderColors, SSIRoundedEdgesCss } from "@sphereon/ui-components.core";
+import { SSITextH1SemiBoldDarkStyled, SSITextH2DarkStyled } from "../../../fonts";
+export const CredentialIssuanceWizardViewContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 42px;
+  width: 560px;
+  height: fit-content;
+`;
+export const CredentialIssuanceWizardViewCredentialTypeContainerStyled = styled.div `
+  border: 1px solid ${borderColors.lightGrey};
+  ${SSIRoundedEdgesCss};
+  background-color: ${backgroundColors.primaryLight};
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  flex-grow: 1;
+`;
+export const CredentialIssuanceWizardViewCredentialTypeTitleStyled = styled(SSITextH1SemiBoldDarkStyled) `
+  text-align: left;
+`;
+export const CredentialIssuanceWizardViewFormContainerStyled = styled.div `
+  flex-grow: 1;
+  border: 1px solid ${borderColors.lightGrey};
+  background-color: ${backgroundColors.primaryLight};
+  ${SSIRoundedEdgesCss};
+  padding: 24px;
+`;
+export const CredentialIssuanceWizardViewEvidenceContainerStyled = styled.div `
+  flex-grow: 1;
+  border: 1px solid ${borderColors.lightGrey};
+  background-color: ${backgroundColors.primaryLight};
+  ${SSIRoundedEdgesCss};
+  padding: 24px;
+`;
+export const CredentialIssuanceWizardViewEvidenceContentContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+`;
+export const CredentialIssuanceWizardViewEvidenceTitleContainerStyled = styled.div `
+  display: flex; 
+  flex-direction: row;
+  gap: 4px;
+`;
+export const CredentialIssuanceWizardViewEvidenceTitleOptionalStyled = styled(SSITextH2DarkStyled) `
+  font-style: italic;
+`;
+export const CredentialIssuanceWizardViewEvidenceFilesContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;

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

@@ -0,0 +1,4 @@
+export declare const DragAndDropBoxContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DragAndDropBoxHiddenInputStyled: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const DragAndDropBoxCaptionContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DragAndDropBoxDescriptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,25 @@
+import { backgroundColors, borderColors, fontColors } from '@sphereon/ui-components.core';
+import styled from 'styled-components';
+import { SSITextH7RegularStyled } from '../../../fonts';
+export const DragAndDropBoxContainerStyled = styled.div `
+  background-color: ${backgroundColors.lightGrey};
+  flex-grow: 1;
+  height: 138px;
+  cursor: pointer;
+  border: 1px dashed ${borderColors.lightGrey};
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const DragAndDropBoxHiddenInputStyled = styled.input `
+  display: none;
+`;
+export const DragAndDropBoxCaptionContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+export const DragAndDropBoxDescriptionStyled = styled(SSITextH7RegularStyled) `
+  color: ${fontColors.lightGrey};
+`;

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

@@ -0,0 +1,10 @@
+export declare const FileSelectionFieldContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldContentContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldRemoveContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldRemoveButtonStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldRemoveButtonCircleIconStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldIconContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldFileDataContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldFileNameCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldFileSizeCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldPermissionSelectionContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+import { borderColors, fontColors } from '@sphereon/ui-components.core';
+import { SSITextH2SemiBoldDarkStyled, SSITextH7RegularStyled } from '../../../fonts';
+export const FileSelectionFieldContainerStyled = styled.div `
+  display: flex;
+  flex-grow: 1;
+  flex-direction: row;
+  border-radius: 6px;
+  border: 1px solid ${borderColors.lightGrey};
+  overflow: hidden;
+`;
+export const FileSelectionFieldContentContainerStyled = styled.div `
+  display: flex;
+  flex-direction: row;
+  padding: 5px 0 5px 8px;
+`;
+export const FileSelectionFieldRemoveContainerStyled = styled.div `
+  margin-left: auto;
+  border-left: 1px solid ${borderColors.lightGrey};
+  display: flex;
+  align-items: center;
+`;
+export const FileSelectionFieldRemoveButtonStyled = styled.div `
+  width: 42px;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`;
+export const FileSelectionFieldRemoveButtonCircleIconStyled = styled.div `
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${borderColors.darkGrey};
+  border-radius: 50%;
+`;
+export const FileSelectionFieldIconContainerStyled = styled.div `
+  margin-right: 12px;
+  width: 42px;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const FileSelectionFieldFileDataContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+`;
+export const FileSelectionFieldFileNameCaptionStyled = styled(SSITextH2SemiBoldDarkStyled) `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 350px;
+`;
+export const FileSelectionFieldFileSizeCaptionStyled = styled(SSITextH7RegularStyled) `
+  color: ${fontColors.lightGrey};
+`;
+export const FileSelectionFieldPermissionSelectionContainerStyled = styled.div `
+  width: 152px;
+  margin-left: auto;
+  margin-right: 5px;
+`;

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

@@ -1,4 +1,5 @@
-export declare const PaginationContainerStyled: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
-export declare const GoToInputStyled: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
-export declare const GoToInputContainer: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
-export declare const PaginationStyled: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+/// <reference types="react" />
+export declare const PaginationContainerStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const GoToInputStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const GoToInputContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PaginationStyled: import("@emotion/styled").StyledComponent<import("@mui/material").PaginationProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -0,0 +1,4 @@
+export declare const PassportPhotoControlContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PassportPhotoControlDragAndDropBoxContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PassportPhotoControlPassportPhotoContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PassportPhotoControlPassportPhotoImageStyled: import("styled-components").StyledComponent<"img", any, {}, never>;

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

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { backgroundColors, borderColors } from '@sphereon/ui-components.core';
+export const PassportPhotoControlContainerStyled = styled.div `
+  display: flex; 
+  flex-direction: column; 
+  gap: 12px;
+`;
+export const PassportPhotoControlDragAndDropBoxContainerStyled = styled.div `
+  display: flex; 
+  flex-direction: row; 
+  gap: 10px;
+`;
+export const PassportPhotoControlPassportPhotoContainerStyled = styled.div `
+  height: 138px;
+  width: 112px;
+  background-color: ${backgroundColors.lightGrey};
+  overflow: hidden;
+  border-radius: 4px;
+  border: 1px solid ${borderColors.lightGrey};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const PassportPhotoControlPassportPhotoImageStyled = styled.img `
+  width: 100%;
+  height: auto
+`;

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

@@ -10,6 +10,7 @@ export const ProgressStepIndicatorContainerStyled = styled.div `
   padding: 48px 24px;
   cursor: default;
   min-width: 325px;
+  height: fit-content;
 `;
 export const ProgressStepIndicatorContentGridContainerStyled = styled.div `
   display: grid;

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

@@ -19,4 +19,8 @@ export * from './SSIHoverText';
 export * from './SSICheckbox';
 export * from './ProgressStepIndicator';
 export * from './StepMarker';
+export * from './FileSelectionField';
+export * from './DragAndDropBox';
+export * from './PassportPhotoControl';
+export * from './CredentialIssuanceWizardView';
 export * from './Pagination';

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

@@ -19,4 +19,8 @@ export * from './SSIHoverText';
 export * from './SSICheckbox';
 export * from './ProgressStepIndicator';
 export * from './StepMarker';
+export * from './FileSelectionField';
+export * from './DragAndDropBox';
+export * from './PassportPhotoControl';
+export * from './CredentialIssuanceWizardView';
 export * from './Pagination';

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

@@ -7,4 +7,5 @@ export declare const SSITextH4Css: import("styled-components").FlattenSimpleInte
 export declare const SSITextH4SemiBoldCss: import("styled-components").FlattenSimpleInterpolation;
 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 gradient100TextCss: import("styled-components").FlattenSimpleInterpolation;

package/dist/styles/css/index.js

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

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

@@ -1,9 +1,11 @@
 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>;
@@ -15,3 +17,4 @@ export declare const SSITextH5Styled: import("styled-components").StyledComponen
 export declare const SSITextH5LightStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITextH6Styled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITextH6LightStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITextH7RegularStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/styles/fonts/index.js

@@ -1,12 +1,15 @@
 import styled from 'styled-components';
 import { fontColors } from '@sphereon/ui-components.core';
-import { SSITextH1Css, SSITextH1SemiBoldCss, SSITextH2Css, SSITextH2SemiBoldStyledCss, SSITextH3Css, SSITextH4Css, SSITextH4SemiBoldCss, SSITextH5Css, SSITextH6Css, } from '../css';
+import { SSITextH1Css, SSITextH1SemiBoldCss, SSITextH2Css, SSITextH2SemiBoldStyledCss, SSITextH3Css, SSITextH4Css, SSITextH4SemiBoldCss, SSITextH5Css, SSITextH6Css, SSITextH7RegularCss, } from '../css';
 export const SSITextH1Styled = styled.div `
   ${SSITextH1Css}
 `;
 export const SSITextH1SemiBoldStyled = styled.div `
   ${SSITextH1SemiBoldCss}
 `;
+export const SSITextH1SemiBoldDarkStyled = styled(SSITextH1SemiBoldStyled) `
+  color: ${fontColors.dark};
+`;
 export const SSITextH1SemiBoldLightStyled = styled(SSITextH1SemiBoldStyled) `
   color: ${fontColors.light};
 `;
@@ -19,6 +22,9 @@ export const SSITextH2DarkStyled = styled(SSITextH2Styled) `
 export const SSITextH2SemiBoldStyled = styled.div `
   ${SSITextH2SemiBoldStyledCss}
 `;
+export const SSITextH2SemiBoldDarkStyled = styled(SSITextH2SemiBoldStyled) `
+  color: ${fontColors.dark};
+`;
 export const SSITextH3Styled = styled.div `
   ${SSITextH3Css};
   color: ${fontColors.dark};
@@ -53,3 +59,6 @@ export const SSITextH6Styled = styled.div `
 export const SSITextH6LightStyled = styled(SSITextH6Styled) `
   color: ${fontColors.light};
 `;
+export const SSITextH7RegularStyled = styled.div `
+  ${SSITextH7RegularCss}
+`;

package/dist/styles/typography.js

@@ -72,6 +72,12 @@ export const fontStyle = {
         fontWeight: fontWeight[400],
         lineHeight: lineHeight[100],
     },
+    h7Regular: {
+        fontFamily: 'Poppins',
+        fontSize: fontSize[400],
+        fontWeight: fontWeight[400],
+        lineHeight: lineHeight[400],
+    },
     h7SemiBold: {
         fontFamily: 'Poppins',
         fontSize: fontSize[400],

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

@@ -0,0 +1,21 @@
+export declare enum AssetFilePermission {
+    PUBLIC = "public",
+    PRIVATE = "private"
+}
+export type ValueSelection = {
+    label: string;
+    value: string;
+};
+export declare enum FileSelectionFieldType {
+    FILE = "file",
+    IMAGE = "image"
+}
+export type PassportPhoto = {
+    file: File;
+    base64: string;
+};
+export type PassportPhotoControlData = {
+    fileName: string;
+    mimeType: string;
+    base64: string;
+};

package/dist/types/field/index.js

@@ -0,0 +1,10 @@
+export var AssetFilePermission;
+(function (AssetFilePermission) {
+    AssetFilePermission["PUBLIC"] = "public";
+    AssetFilePermission["PRIVATE"] = "private";
+})(AssetFilePermission || (AssetFilePermission = {}));
+export var FileSelectionFieldType;
+(function (FileSelectionFieldType) {
+    FileSelectionFieldType["FILE"] = "file";
+    FileSelectionFieldType["IMAGE"] = "image";
+})(FileSelectionFieldType || (FileSelectionFieldType = {}));

package/dist/types/index.d.ts

@@ -2,3 +2,5 @@ export * from './button';
 export * from './table';
 export * from './toast';
 export * from './indicator';
+export * from './field';
+export * from './view';

package/dist/types/index.js

@@ -2,3 +2,5 @@ export * from './button';
 export * from './table';
 export * from './toast';
 export * from './indicator';
+export * from './field';
+export * from './view';

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

@@ -0,0 +1,13 @@
+import { JsonFormsCore, JsonSchema, UISchemaElement } from '@jsonforms/core';
+import { ErrorObject } from 'ajv';
+export type CredentialFormInput = Pick<JsonFormsCore, 'data' | 'errors'>;
+export type CredentialFormData = {
+    data?: any;
+    errors?: ErrorObject[];
+    evidence: Array<File>;
+};
+export type CredentialFormSelectionType = {
+    label: string;
+    schema?: JsonSchema;
+    uiSchema?: UISchemaElement;
+};

package/dist/types/view/index.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.1.3-unstable.134+7bbc921",
+  "version": "0.1.3-unstable.144+18cddf4",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -13,7 +13,8 @@
     "Self-sovereign identity (SSI)"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && pnpm run copy-css",
+    "copy-css": "cpy src/**/*.css dist --parents",
     "build:clean": "tsc --build --clean && tsc --build"
   },
   "source": "src/index.ts",
@@ -28,22 +29,33 @@
     "access": "public"
   },
   "dependencies": {
-    "@mui/icons-material": "^5.15.9",
-    "@mui/material": "^5.15.9",
-    "@mui/styled-engine-sc": "6.0.0-alpha.16",
-    "@sphereon/ui-components.core": "0.1.3-unstable.134+7bbc921",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
+    "@jsonforms/core": "^3.2.1",
+    "@jsonforms/material-renderers": "^3.2.1",
+    "@jsonforms/react": "^3.2.1",
+    "@jsonforms/vanilla-renderers": "^3.2.1",
+    "@mui/icons-material": "^5.15.11",
+    "@mui/material": "^5.15.12",
+    "@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-unstable.144+18cddf4",
     "@tanstack/react-table": "^8.9.3",
     "react-loader-spinner": "^5.4.5",
+    "react-select": "^5.8.0",
     "react-toastify": "^9.1.3",
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
     "@types/react": "~18.0.14",
     "@types/styled-components": "^5.1.15",
+    "ajv": "^8.12.0",
+    "cpy-cli": "^5.0.0",
     "typescript": "4.9.5"
   },
   "peerDependencies": {
     "react": ">= 16.8.0"
   },
-  "gitHead": "7bbc921908521224cc1ccca81d567641abebeb09"
+  "gitHead": "18cddf4c2d9265f91657a7c00d98674340ca5260"
 }