@sphereon/ui-components.ssi-react 0.1.3-next.12 → 0.1.3-next.124

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

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

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ToastType } from '@sphereon/ui-components.core';
+import SSIToast from '../../components/messageBoxes/toasts/SSIToast';
+export const toastConfig = {
+    ssiToastSuccess: (params) => {
+        const { title, message, onClick, props } = params;
+        return _jsx(SSIToast, { type: ToastType.SUCCESS, title: title, message: message, showBadge: props?.showBadge, onClick: onClick });
+    },
+    ssiToastError: (params) => {
+        const { title, message, onClick, props } = params;
+        return _jsx(SSIToast, { type: ToastType.ERROR, title: title, message: message, showBadge: props?.showBadge, onClick: onClick });
+    },
+};

package/dist/components/assets/badges/SSICheckmarkBadge/index.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { fontColors, statusColors } from '@sphereon/ui-components.core';
 const SSICheckmarkBadge = (props) => {
     const { size = 15, color = fontColors.light, backgroundColor = statusColors.valid } = props;
-    return (_jsx("div", { style: { width: size, aspectRatio: 1 }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 15 15", fill: "none", children: [_jsx("circle", { cx: "7.5", cy: "7.5", r: "7.5", fill: backgroundColor }), _jsx("path", { d: "M5.91233 11.0361H5.9092C5.84998 11.0357 5.79144 11.0236 5.73697 11.0005C5.6825 10.9774 5.63319 10.9437 5.59192 10.9015L3.13412 8.38546C3.09155 8.34399 3.05776 8.29447 3.03473 8.23981C3.0117 8.18516 2.99989 8.12647 3 8.06722C3.00011 8.00796 3.01214 7.94932 3.03538 7.89475C3.05862 7.84018 3.09259 7.79079 3.13531 7.74947C3.17803 7.70815 3.22863 7.67575 3.28412 7.65417C3.33962 7.63259 3.3989 7.62226 3.45847 7.6238C3.51804 7.62534 3.5767 7.63871 3.63099 7.66312C3.68529 7.68754 3.73413 7.72251 3.77463 7.76597L5.91665 9.95833L10.9927 4.91088C11.077 4.82993 11.1898 4.78514 11.307 4.78615C11.4242 4.78716 11.5363 4.8339 11.6191 4.91629C11.702 4.99869 11.749 5.11015 11.75 5.22667C11.751 5.34319 11.706 5.45544 11.6246 5.53926L6.22827 10.9059C6.14448 10.9893 6.03084 11.0361 5.91233 11.0361Z", fill: color })] }) }));
+    return (_jsx("div", { style: { width: size, height: size }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 15 15", fill: "none", children: [_jsx("circle", { cx: "7.5", cy: "7.5", r: "7.5", fill: backgroundColor }), _jsx("path", { d: "M5.91233 11.0361H5.9092C5.84998 11.0357 5.79144 11.0236 5.73697 11.0005C5.6825 10.9774 5.63319 10.9437 5.59192 10.9015L3.13412 8.38546C3.09155 8.34399 3.05776 8.29447 3.03473 8.23981C3.0117 8.18516 2.99989 8.12647 3 8.06722C3.00011 8.00796 3.01214 7.94932 3.03538 7.89475C3.05862 7.84018 3.09259 7.79079 3.13531 7.74947C3.17803 7.70815 3.22863 7.67575 3.28412 7.65417C3.33962 7.63259 3.3989 7.62226 3.45847 7.6238C3.51804 7.62534 3.5767 7.63871 3.63099 7.66312C3.68529 7.68754 3.73413 7.72251 3.77463 7.76597L5.91665 9.95833L10.9927 4.91088C11.077 4.82993 11.1898 4.78514 11.307 4.78615C11.4242 4.78716 11.5363 4.8339 11.6191 4.91629C11.702 4.99869 11.749 5.11015 11.75 5.22667C11.751 5.34319 11.706 5.45544 11.6246 5.53926L6.22827 10.9059C6.14448 10.9893 6.03084 11.0361 5.91233 11.0361Z", fill: color })] }) }));
 };
 export default SSICheckmarkBadge;

package/dist/components/assets/badges/SSIExclamationMarkBadge/index.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { fontColors, statusColors } from '@sphereon/ui-components.core';
 const SSIExclamationMarkBadge = (props) => {
     const { size = 15, color = fontColors.light, backgroundColor = statusColors.error } = props;
-    return (_jsx("div", { style: { width: size, aspectRatio: 1 }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 15 15", fill: "none", children: [_jsx("circle", { cx: "7.5", cy: "7.5", r: "7.5", fill: backgroundColor }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.78571 3.48218C6.78571 3.33429 6.94559 3.21429 7.14279 3.21429H7.8572C8.05439 3.21429 8.21428 3.33429 8.21428 3.48218V9.37504C8.21428 9.52293 8.05439 9.64283 7.8572 9.64283H7.14279C6.94559 9.64283 6.78571 9.52292 6.78571 9.37504V3.48218ZM6.78571 10.9822C6.78571 10.8342 6.94559 10.7143 7.14279 10.7143H7.8572C8.05439 10.7143 8.21428 10.8342 8.21428 10.9822V11.5178C8.21428 11.6657 8.05439 11.7857 7.8572 11.7857H7.14279C6.94559 11.7857 6.78571 11.6657 6.78571 11.5178V10.9822Z", fill: color })] }) }));
+    return (_jsx("div", { style: { width: size, height: size }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 15 15", fill: "none", children: [_jsx("circle", { cx: "7.5", cy: "7.5", r: "7.5", fill: backgroundColor }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.78571 3.48218C6.78571 3.33429 6.94559 3.21429 7.14279 3.21429H7.8572C8.05439 3.21429 8.21428 3.33429 8.21428 3.48218V9.37504C8.21428 9.52293 8.05439 9.64283 7.8572 9.64283H7.14279C6.94559 9.64283 6.78571 9.52292 6.78571 9.37504V3.48218ZM6.78571 10.9822C6.78571 10.8342 6.94559 10.7143 7.14279 10.7143H7.8572C8.05439 10.7143 8.21428 10.8342 8.21428 10.9822V11.5178C8.21428 11.6657 8.05439 11.7857 7.8572 11.7857H7.14279C6.94559 11.7857 6.78571 11.6657 6.78571 11.5178V10.9822Z", fill: color })] }) }));
 };
 export default SSIExclamationMarkBadge;

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

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

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

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

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

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

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

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

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

@@ -2,6 +2,6 @@ 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;
-    return (_jsx("div", { style: { ...style, width: size, aspectRatio: 1, display: 'flex' }, children: _jsx("svg", { width: "16", height: "16", 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 }) }) }));
+    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.d.ts

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

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

@@ -2,6 +2,6 @@ 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;
-    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "16", height: "8", 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 }) }) }));
+    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.d.ts

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

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

@@ -2,6 +2,6 @@ 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;
-    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "18", height: "16", 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" }) }) }));
+    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.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-export type Props = {
+type Props = {
     fullName: string;
     fontColor?: string;
     backgroundColor?: string;

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { fontColors, getInitials, profileColors } from '@sphereon/ui-components.core';
-import { SSIProfileIconContainerStyled as Container } from '../../../../styles/components/components/SSIProfileIcon';
-import { SSITextH2Styled as ProfileIconText } from '../../../../styles/components';
+import { SSIProfileIconContainerStyled as Container, SSITextH2Styled as ProfileIconText } from '../../../../styles';
 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.d.ts

@@ -1,5 +1,5 @@
-import { ImageAttributes } from '@sphereon/ui-components.core';
 import { CSSProperties, FC } from 'react';
+import { ImageAttributes } from '@sphereon/ui-components.core';
 type Props = {
     logo?: ImageAttributes;
     size?: number;

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

@@ -5,7 +5,7 @@ const SSILogo = (props) => {
     const { logo, color = logoColors.default, size = 32, style } = props;
     return logo ? (_jsx("div", { style: {
             ...style,
-            aspectRatio: logo?.dimensions && calculateAspectRatio(logo?.dimensions.width, logo?.dimensions.height),
+            ...(logo?.dimensions && { aspectRatio: calculateAspectRatio(logo?.dimensions.width, logo?.dimensions.height) }),
             height: size,
             background: `url(${logo.uri})`,
             backgroundSize: 'cover',

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { StepStatus } from '../../../../types';
+type Props = {
+    stepNumber: number;
+    status?: StepStatus;
+};
+declare const StepMarker: FC<Props>;
+export default StepMarker;

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

@@ -0,0 +1,26 @@
+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';
+const getCurrentMarkerElement = (stepNumber) => {
+    return (_jsx(ActiveContainer, { children: _jsx(ActiveOuterContainer, { children: _jsx(GradientContainer, { children: _jsx(StepNumberText, { children: stepNumber }) }) }) }));
+};
+const getNextMarkerElement = (stepNumber) => {
+    return (_jsx(InactiveContainer, { children: _jsx(StepNumberText, { children: stepNumber }) }));
+};
+const getCompletedMarkerElement = (stepNumber) => {
+    return (_jsx(GradientContainer, { children: _jsx(StepNumberText, { children: stepNumber }) }));
+};
+const StepMarker = (props) => {
+    const { stepNumber, status = StepStatus.NEXT } = props;
+    switch (status) {
+        case StepStatus.CURRENT:
+            return getCurrentMarkerElement(stepNumber);
+        case StepStatus.COMPLETED:
+            return getCompletedMarkerElement(stepNumber);
+        case StepStatus.NEXT:
+            return getNextMarkerElement(stepNumber);
+        default:
+            return _jsx("div", {});
+    }
+};
+export default StepMarker;

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

@@ -1,10 +1,11 @@
-import { FC } from 'react';
-import { ButtonIconsEnum } from '../../../types';
-export type Props = {
-    icon: ButtonIconsEnum;
-    onClick: () => Promise<void>;
+import { FC, MouseEventHandler } from 'react';
+import { ButtonIcon } from '@sphereon/ui-components.core';
+type Props = {
+    icon: ButtonIcon;
+    caption?: string;
+    onClick: MouseEventHandler;
     disabled?: boolean;
-    color?: string;
+    iconColor?: string;
 };
 declare const SSIIconButton: FC<Props>;
 export default SSIIconButton;

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

@@ -1,22 +1,27 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+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 { ButtonIconsEnum } from '../../../types';
-import { SSIIconButtonContainerStyled as Container } from '../../../styles/components';
-import { fontColors } from '@sphereon/ui-components.core';
+import { SSIIconButtonContainerStyled as Container, SSITextH3Styled as Caption } from '../../../styles';
+import MeatBallsIcon from '../../assets/icons/MeatBallsIcon';
+import DeleteIcon from '../../assets/icons/DeleteIcon';
 const SSIIconButton = (props) => {
-    const { icon, onClick, disabled = false, color = fontColors.dark } = props;
-    return _jsx(Container, { onClick: onClick, children: getIcon(icon, color) });
+    const { caption, icon, onClick, disabled = false, iconColor = fontColors.dark } = props;
+    return _jsxs(Container, { onClick: onClick, children: [getIcon(icon, iconColor), caption && _jsx(Caption, { children: caption })] });
 };
 const getIcon = (icon, color) => {
     switch (icon) {
-        case ButtonIconsEnum.ADD:
+        case ButtonIcon.ADD:
             return _jsx(SSIAddIcon, { color: color });
-        case ButtonIconsEnum.FILTER:
-            return _jsx(SSIFilterIcon, { color: color });
-        case ButtonIconsEnum.ARROW_DOWN:
+        case ButtonIcon.ARROW_DOWN:
             return _jsx(SSIArrowDownIcon, { color: color });
+        case ButtonIcon.MEATBALLS:
+            return _jsx(MeatBallsIcon, { color: color });
+        case ButtonIcon.DELETE:
+            return _jsx(DeleteIcon, { color: color, width: 15, height: 16 });
+        case ButtonIcon.FILTER:
+            return _jsx(SSIFilterIcon, { color: color });
         default:
             return _jsx("div", {});
     }

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

@@ -1,9 +1,9 @@
 import { CSSProperties, FC } from 'react';
-import { ButtonIconsEnum } from '../../../types';
-export type Props = {
+import { ButtonIcon } from '@sphereon/ui-components.core';
+type Props = {
     caption: string;
     onClick: () => Promise<void>;
-    icon?: ButtonIconsEnum;
+    icon?: ButtonIcon;
     disabled?: boolean;
     style?: CSSProperties;
 };

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

@@ -1,14 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { fontColors } from '@sphereon/ui-components.core';
+import { ButtonIcon, fontColors, OpacityStyleEnum } from '@sphereon/ui-components.core';
 import SSIAddIcon from '../../assets/icons/SSIAddIcon';
-import { SSIPrimaryButtonContainerStyled as Container, SSITextH3LightStyled as Caption } from '../../../styles/components';
-import { ButtonIconsEnum } from '../../../types';
+import { SSIPrimaryButtonContainerStyled as Container, SSITextH3LightStyled as Caption } from '../../../styles';
 const SSIPrimaryButton = (props) => {
     const { caption, icon, onClick, disabled = false, style = {} } = props;
     const getIcon = (icon, color) => {
         switch (icon) {
-            case ButtonIconsEnum.ADD:
-                return _jsx(SSIAddIcon, { style: { ...(disabled && { opacity: 0.5 }) }, color: color });
+            case ButtonIcon.ADD:
+                return _jsx(SSIAddIcon, { style: { ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, color: color });
             default:
                 return _jsx("div", {});
         }
@@ -18,6 +17,6 @@ const SSIPrimaryButton = (props) => {
             await onClick();
         }
     };
-    return (_jsxs(Container, { style: { ...style, ...(disabled && { opacity: 0.5 }) }, onClick: onClicked, children: [icon && getIcon(icon, fontColors.light), _jsx(Caption, { style: { ...(disabled && { opacity: 0.5 }) }, children: caption })] }));
+    return (_jsxs(Container, { style: { ...style, ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, onClick: onClicked, children: [icon && getIcon(icon, fontColors.light), _jsx(Caption, { style: { ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, children: caption })] }));
 };
 export default SSIPrimaryButton;

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

@@ -1,9 +1,9 @@
 import { CSSProperties, FC } from 'react';
-import { ButtonIconsEnum } from '../../../types';
-export type Props = {
+import { ButtonIcon } from '@sphereon/ui-components.core';
+type Props = {
     caption: string;
     onClick: () => Promise<void>;
-    icon?: ButtonIconsEnum;
+    icon?: ButtonIcon;
     disabled?: boolean;
     style?: CSSProperties;
 };

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

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { gradientColors } from '@sphereon/ui-components.core';
+import { ButtonIcon, OpacityStyleEnum } from '@sphereon/ui-components.core';
 import SSIAddIcon from '../../assets/icons/SSIAddIcon';
-import { SSISecondaryButtonCaptionStyled as Caption, SSISecondaryButtonContainerStyled as Container, } from '../../../styles/components';
-import { ButtonIconsEnum } from '../../../types';
+import { SSISecondaryButtonCaptionStyled as Caption, SSISecondaryButtonContainerStyled as Container } from '../../../styles';
+import { gradientColors } from '../../../styles/colors';
 const SSISecondaryButton = (props) => {
     const { caption, icon, onClick, disabled = false, style = {} } = props;
     const getIcon = (icon, color) => {
         switch (icon) {
-            case ButtonIconsEnum.ADD:
-                return _jsx(SSIAddIcon, { style: { ...(disabled && { opacity: 0.5 }) }, color: color });
+            case ButtonIcon.ADD:
+                return _jsx(SSIAddIcon, { style: { ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, color: color });
             default:
                 return _jsx("div", {});
         }
@@ -18,6 +18,6 @@ const SSISecondaryButton = (props) => {
             await onClick();
         }
     };
-    return (_jsxs(Container, { style: { ...style, ...(disabled && { opacity: 0.5 }) }, onClick: onClicked, children: [icon && getIcon(icon, gradientColors['100']), _jsx(Caption, { style: { ...(disabled && { opacity: 0.5 }) }, children: caption })] }));
+    return (_jsxs(Container, { style: { ...style, ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, onClick: onClicked, children: [icon && getIcon(icon, gradientColors['100']), _jsx(Caption, { style: { ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, children: caption })] }));
 };
 export default SSISecondaryButton;

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

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from 'react';
+export interface IProps {
+    onValueChange?: (isChecked: boolean) => Promise<void>;
+    initialValue?: boolean;
+    isChecked?: boolean;
+    label?: string | ReactNode;
+    disabled?: boolean;
+    backgroundColor?: string;
+    borderColor?: string;
+    selectedColor?: string;
+    labelColor?: string;
+    checkmarkColor?: string;
+}
+declare const SSICheckbox: FC<IProps>;
+export default SSICheckbox;

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

@@ -0,0 +1,21 @@
+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';
+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);
+    const value = props.isChecked !== undefined ? props.isChecked : isChecked;
+    const onValueChange = async () => {
+        const { onValueChange } = props;
+        if (disabled) {
+            return;
+        }
+        if (onValueChange) {
+            await onValueChange(!isChecked);
+        }
+        setChecked(!isChecked);
+    };
+    return (_jsxs(Container, { onClick: onValueChange, style: { ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, children: [value ? (_jsx(SelectedContainer, { style: { backgroundColor: selectedColor, border: `1px solid ${borderColor}` } })) : (_jsx(UnselectedContainer, { style: { backgroundColor, border: `1px solid ${borderColor}` } })), label && (typeof label === 'string' ? _jsx(LabelCaption, { style: { color: labelColor }, children: label }) : label)] }));
+};
+export default SSICheckbox;

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export type Props = {
+    text: string;
+    truncationLength?: number;
+    enableHover?: boolean;
+};
+declare const SSIHoverText: FC<Props>;
+export default SSIHoverText;

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

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

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

@@ -0,0 +1,9 @@
+import { CSSProperties, FC } from 'react';
+import { ProgressIndicatorStep } from '../../../types';
+type Props = {
+    steps: Array<ProgressIndicatorStep>;
+    activeStep: number;
+    style?: CSSProperties;
+};
+declare const ProgressStepIndicator: FC<Props>;
+export default ProgressStepIndicator;

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

@@ -0,0 +1,51 @@
+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';
+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: {
+                            ...(status === StepStatus.COMPLETED && {
+                                backgroundColor: elementColors.purple,
+                            }),
+                        } }))] }), _jsxs(StepTextCell, { style: { gridRow: gridRowNumber }, children: [step.title && (_jsx(TitleText, { style: {
+                            ...(status === StepStatus.CURRENT && {
+                                background: gradientColors['100'],
+                                backgroundClip: 'text',
+                                WebkitBackgroundClip: 'text',
+                                WebkitTextFillColor: 'transparent',
+                            }),
+                            ...(status === StepStatus.COMPLETED && { color: fontColors.dark }),
+                            ...(status === StepStatus.NEXT && { color: fontColors.lightGrey }),
+                        }, children: step.title })), step.description && (_jsx(DescriptionText, { style: { ...((status === StepStatus.CURRENT || status === StepStatus.COMPLETED) && { color: fontColors.dark }) }, children: step.description }))] }), stepNumber < maxSteps && (_jsx(SpacerLineCell, { style: { gridRow: gridRowNumber + 1 }, children: _jsx(StepLine, { style: {
+                        ...(status === StepStatus.COMPLETED && {
+                            backgroundColor: elementColors.purple,
+                        }),
+                    } }) }))] }));
+};
+const getStepStatus = (stepNumber, activeStep) => {
+    if (stepNumber < activeStep) {
+        return StepStatus.COMPLETED;
+    }
+    else if (stepNumber > activeStep) {
+        return StepStatus.NEXT;
+    }
+    else if (stepNumber === activeStep) {
+        return StepStatus.CURRENT;
+    }
+    throw new Error('Unable to determine step status');
+};
+const getStepElements = (activeStep, steps) => {
+    return steps.map((step, index) => {
+        const stepNumber = index + 1;
+        const stepStatus = getStepStatus(stepNumber, activeStep);
+        return getStepRowElement(stepNumber, stepStatus, step, steps.length);
+    });
+};
+const ProgressStepIndicator = (props) => {
+    const { activeStep, steps = [], style } = props;
+    return (_jsx(Container, { style: style, children: _jsx(GridContainer, { children: getStepElements(activeStep, steps) }) }));
+};
+export default ProgressStepIndicator;

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

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+interface Props {
+    size?: string | number;
+    color?: string;
+    style?: {
+        [key: string]: string;
+    };
+}
+declare const SSIActivityIndicator: FC<Props>;
+export default SSIActivityIndicator;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Oval } from 'react-loader-spinner';
+import { elementColors } from '@sphereon/ui-components.core';
+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 }));
+};
+export default SSIActivityIndicator;

package/dist/components/labels/SSIStatusLabel/index.d.ts

@@ -1,5 +1,5 @@
-import { LabelStatus } from '@sphereon/ui-components.core';
 import { CSSProperties, FC } from 'react';
+import { LabelStatus } from '@sphereon/ui-components.core';
 type Props = {
     status: LabelStatus;
     showIcon?: boolean;

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 { SSIStatusLabelBadgeContainer as BadgeContainer, SSIStatusLabelContainerStyled as Container, SSIStatusLabelStatusCaptionStyled as StatusCaption, } from '../../../styles/components';
 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';
 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.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import { LabelTypeEnum } from '../../../types';
-export type Props = {
-    type: LabelTypeEnum;
+import { LabelType } from '@sphereon/ui-components.core';
+type Props = {
+    type: LabelType;
 };
 declare const SSITypeLabel: FC<Props>;
 export default SSITypeLabel;

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { LabelTypeEnum } from '../../../types';
-import { SSITypeLabelContainerStyled as Container } from '../../../styles/components';
-import { backgroundColors, gradientColors } from '@sphereon/ui-components.core';
+import { backgroundColors, LabelType } from '@sphereon/ui-components.core';
+import { SSITypeLabelContainerStyled as Container } from '../../../styles';
+import { gradientColors } from '../../../styles/colors';
 const getBackground = (type) => {
     switch (type) {
-        case LabelTypeEnum.ISSUER:
+        case LabelType.ISSUER:
             return gradientColors['200'];
-        case LabelTypeEnum.VERIFIER:
+        case LabelType.VERIFIER:
             return gradientColors['100'];
         default:
             return backgroundColors.primaryLight;

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

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { ButtonIcon } from '@sphereon/ui-components.core';
+import { Button } from '../../../types';
+export type Props = {
+    icon: ButtonIcon;
+    buttons: Array<Button>;
+    showBorder?: boolean;
+};
+declare const DropDownList: FC<Props>;
+export default DropDownList;