@sphereon/ui-components.ssi-react 0.1.3-unstable.150 → 0.1.3-unstable.151

package/dist/@config/toasts/index.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { ToastCustomProps } from '@sphereon/ui-components.core';
-import { ToastConfigParams } from '../../types';
+import { ToastConfigParams } from '../../types/index.js';
 export declare const toastConfig: {
-    ssiToastSuccess: (params: ToastConfigParams<ToastCustomProps>) => JSX.Element;
-    ssiToastError: (params: ToastConfigParams<ToastCustomProps>) => JSX.Element;
+    ssiToastSuccess: (params: ToastConfigParams<ToastCustomProps>) => import("react/jsx-runtime.js").JSX.Element;
+    ssiToastError: (params: ToastConfigParams<ToastCustomProps>) => import("react/jsx-runtime.js").JSX.Element;
 };

package/dist/@config/toasts/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ToastType } from '@sphereon/ui-components.core';
-import SSIToast from '../../components/messageBoxes/toasts/SSIToast';
+import SSIToast from '../../components/messageBoxes/toasts/SSIToast/index.js';
 export const toastConfig = {
     ssiToastSuccess: (params) => {
         const { title, message, onClick, props } = params;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { fontColors, getInitials, profileColors } from '@sphereon/ui-components.core';
-import { SSIProfileIconContainerStyled as Container, SSITextH2Styled as ProfileIconText } from '../../../../styles';
+import { SSIProfileIconContainerStyled as Container, SSITextH2Styled as ProfileIconText } from '../../../../styles/index.js';
 const ProfileIcon = (props) => {
     const { fontColor = fontColors.light, backgroundColor = profileColors['100'], fullName } = props;
     return (_jsx(Container, { style: { backgroundColor }, children: _jsx(ProfileIconText, { style: { color: fontColor }, children: getInitials(fullName) }) }));

package/dist/components/assets/logos/SSILogo/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { calculateAspectRatio, logoColors } from '@sphereon/ui-components.core';
-import SSIPlaceholderLogo from '../SSIPlaceholderLogo';
+import SSIPlaceholderLogo from '../SSIPlaceholderLogo/index.js';
 const SSILogo = (props) => {
     const { logo, color = logoColors.default, size = 32, style } = props;
     return logo ? (_jsx("div", { style: {

package/dist/components/assets/markers/StepMarker/index.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { StepStatus } from '../../../../types';
+import { StepStatus } from '../../../../types/index.js';
 type Props = {
     stepNumber: number;
     status?: StepStatus;

package/dist/components/assets/markers/StepMarker/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { StepMarkerActiveContainerStyled as ActiveContainer, StepMarkerActiveOuterContainerStyled as ActiveOuterContainer, StepMarkerGradientContainerStyled as GradientContainer, SSITextH1SemiBoldLightStyled as StepNumberText, StepMarkerInactiveContainerStyled as InactiveContainer, } from '../../../../styles';
-import { StepStatus } from '../../../../types';
+import { StepMarkerActiveContainerStyled as ActiveContainer, StepMarkerActiveOuterContainerStyled as ActiveOuterContainer, StepMarkerGradientContainerStyled as GradientContainer, SSITextH1SemiBoldLightStyled as StepNumberText, StepMarkerInactiveContainerStyled as InactiveContainer, } from '../../../../styles/index.js';
+import { StepStatus } from '../../../../types/index.js';
 const getCurrentMarkerElement = (stepNumber) => {
     return (_jsx(ActiveContainer, { children: _jsx(ActiveOuterContainer, { children: _jsx(GradientContainer, { children: _jsx(StepNumberText, { children: stepNumber }) }) }) }));
 };

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

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

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ButtonIcon, fontColors } 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';
+import SSIAddIcon from '../../assets/icons/SSIAddIcon/index.js';
+import SSIFilterIcon from '../../assets/icons/SSIFilterIcon/index.js';
+import SSIArrowDownIcon from '../../assets/icons/SSIArrowDownIcon/index.js';
+import { SSIIconButtonContainerStyled as Container, SSITextH3Styled as Caption } from '../../../styles/index.js';
+import MeatBallsIcon from '../../assets/icons/MeatBallsIcon/index.js';
+import DeleteIcon from '../../assets/icons/DeleteIcon/index.js';
 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 })] }));

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

@@ -1,9 +1,9 @@
 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';
+import SSIAddIcon from '../../assets/icons/SSIAddIcon/index.js';
+import { SSIPrimaryButtonContainerStyled as Container, SSITextH3LightStyled as Caption } from '../../../styles/index.js';
 const SSIPrimaryButton = (props) => {
-    const { caption, icon, onClick, disabled = false, style } = props;
+    const { caption, icon, onClick, disabled = false, style = {} } = props;
     const getIcon = (icon, color) => {
         switch (icon) {
             case ButtonIcon.ADD:

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
-import { DragAndDropBoxContainerStyled as Container, DragAndDropBoxHiddenInputStyled as HiddenInput, DragAndDropBoxCaptionContainerStyled as CaptionContainer, SSITextH2Styled as Caption, DragAndDropBoxDescriptionStyled as Description } from '../../../styles';
+import { DragAndDropBoxContainerStyled as Container, DragAndDropBoxHiddenInputStyled as HiddenInput, DragAndDropBoxCaptionContainerStyled as CaptionContainer, SSITextH2DarkStyled as Caption, DragAndDropBoxDescriptionStyled as Description, } from '../../../styles/index.js';
 const DragAndDropBox = (props) => {
     const { caption, description, onChangeFile } = props;
     const inputFile = useRef(null);
@@ -25,6 +25,6 @@ const DragAndDropBox = (props) => {
     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 })] })] }));
+    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

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-import { AssetFilePermission, FileSelectionFieldType } from '../../../types';
+import { AssetFilePermission, FileSelectionFieldType } from '../../../types/index.js';
 type Props = {
     file: File;
     fileType?: FileSelectionFieldType;

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getFileSizeDisplay, Localization } from '@sphereon/ui-components.core';
-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';
+import ComboBox from '../ComboBox/index.js';
+import DocumentIcon from '../../assets/icons/DocumentIcon/index.js';
+import ImageIcon from '../../assets/icons/ImageIcon/index.js';
+import CrossIcon from '../../assets/icons/CrossIcon/index.js';
+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/index.js';
+import { FileSelectionFieldType } from '../../../types/index.js';
 const filePermissions = [
     { label: Localization.translate('file_permission_public_label'), value: 'public' },
     { label: Localization.translate('file_permission_private_label'), value: 'private' },
@@ -17,8 +17,7 @@ const FileSelection = (props) => {
             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 }) }) }) })] }));
+    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) {

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

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { and, isObjectControl, optionIs, rankWith, } from '@jsonforms/core';
+import { and, isObjectControl, optionIs, rankWith } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
 import { Localization, parseBase64Uri } from '@sphereon/ui-components.core';
-import DragAndDropBox from '../../DragAndDropBox';
-import PersonPlaceholder from '../../../assets/placeholders/PersonPlaceholder';
-import FileSelection from '../../FileSelection';
-import { base64UriToFile } from '../../../../utils';
-import { PassportPhotoControlContainerStyled as Container, PassportPhotoControlDragAndDropBoxContainerStyled as DragAndDropBoxContainer, PassportPhotoControlPassportPhotoContainerStyled as PassportPhotoContainer, PassportPhotoControlPassportPhotoImageStyled as PassportPhotoImage } from '../../../../styles';
-import { FileSelectionFieldType } from '../../../../types';
+import DragAndDropBox from '../../DragAndDropBox/index.js';
+import PersonPlaceholder from '../../../assets/placeholders/PersonPlaceholder/index.js';
+import FileSelection from '../../FileSelection/index.js';
+import { base64UriToFile } from '../../../../utils/index.js';
+import { PassportPhotoControlContainerStyled as Container, PassportPhotoControlDragAndDropBoxContainerStyled as DragAndDropBoxContainer, PassportPhotoControlPassportPhotoContainerStyled as PassportPhotoContainer, PassportPhotoControlPassportPhotoImageStyled as PassportPhotoImage, } from '../../../../styles/index.js';
+import { FileSelectionFieldType } from '../../../../types/index.js';
 const PassportPhotoControl = (props) => {
     const { data, handleChange, path } = props;
     const [image, setImage] = useState(data && { file: base64UriToFile(data.base64Uri, data.fileName, data.mimeType), base64Uri: data.base64Uri });
@@ -28,10 +28,7 @@ const PassportPhotoControl = (props) => {
         setImage(undefined);
         handleChange(path, undefined);
     };
-    return (_jsxs(Container, { children: [_jsxs(DragAndDropBoxContainer, { children: [_jsx(DragAndDropBox, { caption: Localization.translate('drag_and_drop_upload_image_caption'), description: Localization.translate('credential_attach_image_description'), onChangeFile: onAddImage }), _jsx(PassportPhotoContainer, { children: image
-                            ? _jsx(PassportPhotoImage, { src: image.base64Uri, alt: Localization.translate('passport_photo_alt') })
-                            : _jsx(PersonPlaceholder, {}) })] }), image &&
-                _jsx(FileSelection, { file: image.file, fileType: FileSelectionFieldType.IMAGE, onRemove: onRemoveImage })] }));
+    return (_jsxs(Container, { children: [_jsxs(DragAndDropBoxContainer, { children: [_jsx(DragAndDropBox, { caption: Localization.translate('drag_and_drop_upload_image_caption'), description: Localization.translate('credential_attach_image_description'), onChangeFile: onAddImage }), _jsx(PassportPhotoContainer, { children: image ? _jsx(PassportPhotoImage, { src: image.base64Uri, alt: Localization.translate('passport_photo_alt') }) : _jsx(PersonPlaceholder, {}) })] }), image && _jsx(FileSelection, { file: image.file, fileType: FileSelectionFieldType.IMAGE, onRemove: onRemoveImage })] }));
 };
 export const passportPhotoControlTester = rankWith(3, and(isObjectControl, optionIs('type', 'passportPhoto')));
 export default withJsonFormsControlProps(PassportPhotoControl);

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { OpacityStyleEnum, fontColors, selectionElementColors } from '@sphereon/ui-components.core';
-import { SSICheckboxContainerStyled as Container, SSICheckboxLabelContainerStyled as LabelCaption, SSICheckboxSelectedContainerStyled as SelectedContainer, SSICheckboxUnselectedContainerStyled as UnselectedContainer, } from '../../../styles/components';
+import { SSICheckboxContainerStyled as Container, SSICheckboxLabelContainerStyled as LabelCaption, SSICheckboxSelectedContainerStyled as SelectedContainer, SSICheckboxUnselectedContainerStyled as UnselectedContainer, } from '../../../styles/components/index.js';
 const SSICheckbox = (props) => {
     const { backgroundColor, borderColor = selectionElementColors.primaryBorderDark, disabled = false, initialValue = false, label, selectedColor = selectionElementColors.primaryDark, labelColor = fontColors.light, checkmarkColor = fontColors.dark, } = props;
     const [isChecked, setChecked] = React.useState(initialValue);

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SSIHoverTextTextStyled as Text, SSIHoverTextContainerStyled as Container, SSIHoverTextTextHoverStyled as TextHover, } from '../../../styles/components';
+import { SSIHoverTextTextStyled as Text, SSIHoverTextContainerStyled as Container, SSIHoverTextTextHoverStyled as TextHover, } from '../../../styles/components/index.js';
 const SSIHoverText = (props) => {
     const { text, truncationLength, enableHover = true } = props;
     const value = truncationLength ? text.substring(0, truncationLength) : text;

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

@@ -1,5 +1,5 @@
 import { CSSProperties, FC } from 'react';
-import { ProgressIndicatorStep } from '../../../types';
+import { ProgressIndicatorStep } from '../../../types/index.js';
 type Props = {
     steps: Array<ProgressIndicatorStep>;
     activeStep: number;

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { elementColors, fontColors } from '@sphereon/ui-components.core';
-import StepMarker from '../../assets/markers/StepMarker';
-import { gradientColors } from '../../../styles/colors';
-import { ProgressStepIndicatorContainerStyled as Container, ProgressStepIndicatorContentGridContainerStyled as GridContainer, ProgressStepIndicatorStepMarkerCellStyled as StepMarkerCell, ProgressStepIndicatorStepLineStyled as StepLine, ProgressStepIndicatorStepTextCellStyled as StepTextCell, ProgressStepIndicatorTitleTextStyled as TitleText, ProgressStepIndicatorDescriptionTextStyled as DescriptionText, ProgressStepIndicatorSpacerLineCellStyled as SpacerLineCell, } from '../../../styles';
-import { StepStatus } from '../../../types';
+import StepMarker from '../../assets/markers/StepMarker/index.js';
+import { gradientColors } from '../../../styles/colors.js';
+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/index.js';
+import { StepStatus } from '../../../types/index.js';
 const getStepRowElement = (stepNumber, status, step, maxSteps) => {
     const gridRowNumber = stepNumber * 2 - 1;
     return (_jsxs(_Fragment, { children: [_jsxs(StepMarkerCell, { style: { gridRow: gridRowNumber }, children: [_jsx(StepMarker, { stepNumber: stepNumber, status: status }), stepNumber < maxSteps && (_jsx(StepLine, { style: {

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

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

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

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

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { backgroundColors, LabelType } from '@sphereon/ui-components.core';
-import { SSITypeLabelContainerStyled as Container } from '../../../styles';
-import { gradientColors } from '../../../styles/colors';
+import { SSITypeLabelContainerStyled as Container } from '../../../styles/index.js';
+import { gradientColors } from '../../../styles/colors.js';
 const getBackground = (type) => {
     switch (type) {
         case LabelType.ISSUER:

package/dist/components/lists/DropDownList/index.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { ButtonIcon } from '@sphereon/ui-components.core';
-import { Button } from '../../../types';
+import { Button } from '../../../types/index.js';
 export type Props = {
     icon: ButtonIcon;
     buttons: Array<Button>;

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from 'react';
 import { borderColors } from '@sphereon/ui-components.core';
-import DropDownListItem from '../DropDownListItem';
-import SSIIconButton from '../../buttons/SSIIconButton';
-import { DropDownListContainerStyled as Container, DropDownContainerStyled as DropDownContainer, DropDownListButtonStyled as ListButton, } from '../../../styles/components';
+import DropDownListItem from '../DropDownListItem/index.js';
+import SSIIconButton from '../../buttons/SSIIconButton/index.js';
+import { DropDownListContainerStyled as Container, DropDownContainerStyled as DropDownContainer, DropDownListButtonStyled as ListButton, } from '../../../styles/components/index.js';
 const DropDownList = (props) => {
     const { icon, buttons, showBorder = false } = props;
     const [showActionsMenu, setShowActionsMenu] = useState(false);

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DropDownListItemContainerStyled as Container, DropDownListItemIconContainerStyled as IconContainer, DropDownListItemCaptionContainerStyled as ListItemCaption, } from '../../../styles/components';
-import DeleteIcon from '../../assets/icons/DeleteIcon';
+import { DropDownListItemContainerStyled as Container, DropDownListItemIconContainerStyled as IconContainer, DropDownListItemCaptionContainerStyled as ListItemCaption, } from '../../../styles/components/index.js';
+import DeleteIcon from '../../assets/icons/DeleteIcon/index.js';
 import { borderColors, ButtonIcon, fontColors } from '@sphereon/ui-components.core';
 const DropDownListItem = (props) => {
     const { disabled, label, icon, showBorder = false, fontColor = fontColors.dark, borderColor = borderColors.light, onClick } = props;

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ToastType } from '@sphereon/ui-components.core';
-import SSICheckmarkBadge from '../../../assets/badges/SSICheckmarkBadge';
-import SSIExclamationMarkBadge from '../../../assets/badges/SSIExclamationMarkBadge';
-import { SSIToastContainerStyled as Container, SSIToastMessageTextStyled as MessageText, SSIFlexDirectionRowViewStyled as MessageContainer, SSITextH2SemiBoldStyled as TitleText, SSIToastTitleContainerStyled as TitleContainer, SSIToastBadgeContainerStyled as ToastBadgeContainer, } from '../../../../styles';
+import SSICheckmarkBadge from '../../../assets/badges/SSICheckmarkBadge/index.js';
+import SSIExclamationMarkBadge from '../../../assets/badges/SSIExclamationMarkBadge/index.js';
+import { SSIToastContainerStyled as Container, SSIToastMessageTextStyled as MessageText, SSIFlexDirectionRowViewStyled as MessageContainer, SSITextH2SemiBoldStyled as TitleText, SSIToastTitleContainerStyled as TitleContainer, SSIToastBadgeContainerStyled as ToastBadgeContainer, } from '../../../../styles/index.js';
 const getBadge = (type) => {
     switch (type) {
         case ToastType.SUCCESS:

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

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

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

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { CredentialFormData, CredentialFormSelectionType } from '../../../types';
+import { CredentialFormData, CredentialFormSelectionType } from '../../../types/index.js';
 type Props = {
     credentialTypes: Array<CredentialFormSelectionType>;
     onSelectCredentialTypeChange?: (credentialType: CredentialFormSelectionType) => Promise<void>;

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

@@ -4,10 +4,10 @@ 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 FileSelection from '../../fields/FileSelection/index.js';
+import DragAndDropBox from '../../fields/DragAndDropBox/index.js';
+import { jsonFormsMaterialRenderers } from '../../../renders/jsonFormsRenders.js';
+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/index.js';
 const CredentialIssuanceWizardView = (props) => {
     const { credentialData, credentialTypes, onSelectCredentialTypeChange, onCredentialFormDataChange } = props;
     const [selectedCredentialType, setSelectedCredentialType] = useState(null);
@@ -35,9 +35,8 @@ const CredentialIssuanceWizardView = (props) => {
         onCredentialFormDataChange?.({ ...credentialInput, evidence: evidenceFiles });
     };
     const getEvidenceElements = () => {
-        return evidence.map((file, index) => _jsx(FileSelection, { file: file, onRemove: async () => onRemoveEvidence(index) }, index));
+        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()] })] }) })] })] }));
+    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/CredentialMiniCardView/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { credentialCardColors } from '@sphereon/ui-components.core';
-import SSILogo from '../../assets/logos/SSILogo';
-import { SSICredentialMiniCardViewContainerStyled as Container, SSICredentialMiniCardViewBackgroundImageStyled as BackgroundImage, } from '../../../styles';
+import SSILogo from '../../assets/logos/SSILogo/index.js';
+import { SSICredentialMiniCardViewContainerStyled as Container, SSICredentialMiniCardViewBackgroundImageStyled as BackgroundImage, } from '../../../styles/index.js';
 const CredentialMiniCardView = (props) => {
     const { backgroundColor = credentialCardColors.default, backgroundImage, logo, logoColor, style } = props;
     return (_jsx(Container, { style: { ...style, backgroundColor }, children: _jsx(BackgroundImage, { style: {

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { backgroundColors, credentialCardColors, Localization, toLocalDateString, } from '@sphereon/ui-components.core';
-import SSILogo from '../../assets/logos/SSILogo';
-import SSIStatusLabel from '../../labels/SSIStatusLabel';
-import { SSIAlphaContainerStyled as AlphaContainer, SSICredentialCardViewContainerStyled as Container, SSICredentialCardViewBackgroundImageStyled as BackgroundImage, SSICredentialCardViewContentMainContainerStyled as ContentMainContainer, SSICredentialCardViewContentSubContainerStyled as ContentSubContainer, SSICredentialCardViewStatusContainerStyled as StatusContainer, SSICredentialCardViewCredentialSubtitleTextStyled as CredentialSubtitleText, SSICredentialCardViewCredentialTitleTextStyled as CredentialTitleText, SSITextH5LightStyled as ExpirationDateText, SSICredentialCardViewFooterContainerStyled as FooterContainer, SSITextH4LightStyled as H4Text, SSICredentialCardViewHeaderContainerStyled as HeaderContainer, SSICredentialCardViewContentIssueNameContainerStyled as IssueNameContainer, SSICredentialCardViewHeaderLogoContainerStyled as LogoContainer, SSICredentialCardViewContentPropertiesContainerStyled as PropertiesContainer, SSITextH6LightStyled as PropertyValueText, SSICredentialCardViewHeaderTitleContainerStyled as TitleContainer, SSIFlexDirectionColumnViewStyled as PropertyContainer, } from '../../../styles';
+import SSILogo from '../../assets/logos/SSILogo/index.js';
+import SSIStatusLabel from '../../labels/SSIStatusLabel/index.js';
+import { SSIAlphaContainerStyled as AlphaContainer, SSICredentialCardViewContainerStyled as Container, SSICredentialCardViewBackgroundImageStyled as BackgroundImage, SSICredentialCardViewContentMainContainerStyled as ContentMainContainer, SSICredentialCardViewContentSubContainerStyled as ContentSubContainer, SSICredentialCardViewStatusContainerStyled as StatusContainer, SSICredentialCardViewCredentialSubtitleTextStyled as CredentialSubtitleText, SSICredentialCardViewCredentialTitleTextStyled as CredentialTitleText, SSITextH5LightStyled as ExpirationDateText, SSICredentialCardViewFooterContainerStyled as FooterContainer, SSITextH4LightStyled as H4Text, SSICredentialCardViewHeaderContainerStyled as HeaderContainer, SSICredentialCardViewContentIssueNameContainerStyled as IssueNameContainer, SSICredentialCardViewHeaderLogoContainerStyled as LogoContainer, SSICredentialCardViewContentPropertiesContainerStyled as PropertiesContainer, SSITextH6LightStyled as PropertyValueText, SSICredentialCardViewHeaderTitleContainerStyled as TitleContainer, SSIFlexDirectionColumnViewStyled as PropertyContainer, } from '../../../styles/index.js';
 const SSICredentialCardView = (props) => {
     const { header, body, footer } = props;
     const { credentialTitle, credentialSubtitle, logo } = props.header ?? {};

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTitleContainerStyled as TitleContainer, SSITextH3Styled as TitleCaption, } from '../../../../styles';
+import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTitleContainerStyled as TitleContainer, SSITextH3Styled as TitleCaption, } from '../../../../styles/index.js';
 const SSITabViewHeader = (props) => {
     const { navigationState, onIndexChange } = props;
     return (_jsx(Container, { children: navigationState.routes.map((value, index) => {