@sphereon/ui-components.ssi-react 0.1.3-next.8 → 0.1.3-next.84

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/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/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/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/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,7 +1,7 @@
 import { FC } from 'react';
-import { ButtonIconsEnum } from '../../../types';
-export type Props = {
-    icon: ButtonIconsEnum;
+import { ButtonIcon } from '@sphereon/ui-components.core';
+type Props = {
+    icon: ButtonIcon;
     onClick: () => Promise<void>;
     disabled?: boolean;
     color?: string;

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

@@ -1,21 +1,20 @@
 import { jsx as _jsx } 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 } from '../../../styles';
 const SSIIconButton = (props) => {
     const { icon, onClick, disabled = false, color = fontColors.dark } = props;
     return _jsx(Container, { onClick: onClick, children: getIcon(icon, color) });
 };
 const getIcon = (icon, color) => {
     switch (icon) {
-        case ButtonIconsEnum.ADD:
+        case ButtonIcon.ADD:
             return _jsx(SSIAddIcon, { color: color });
-        case ButtonIconsEnum.FILTER:
+        case ButtonIcon.FILTER:
             return _jsx(SSIFilterIcon, { color: color });
-        case ButtonIconsEnum.ARROW_DOWN:
+        case ButtonIcon.ARROW_DOWN:
             return _jsx(SSIArrowDownIcon, { 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,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { fontColors } from '@sphereon/ui-components.core';
+import { ButtonIcon, fontColors } 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:
+            case ButtonIcon.ADD:
                 return _jsx(SSIAddIcon, { style: { ...(disabled && { opacity: 0.5 }) }, color: color });
             default:
                 return _jsx("div", {});

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,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { gradientColors } from '@sphereon/ui-components.core';
+import { ButtonIcon, gradientColors } 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';
 const SSISecondaryButton = (props) => {
     const { caption, icon, onClick, disabled = false, style = {} } = props;
     const getIcon = (icon, color) => {
         switch (icon) {
-            case ButtonIconsEnum.ADD:
+            case ButtonIcon.ADD:
                 return _jsx(SSIAddIcon, { style: { ...(disabled && { opacity: 0.5 }) }, color: color });
             default:
                 return _jsx("div", {});

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, selectionElements } 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 = selectionElements.primaryBorderDark, disabled = false, initialValue = false, label, selectedColor = selectionElements.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,54 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { elements, fontColors, gradientColors } from '@sphereon/ui-components.core';
+import StepMarker from '../../assets/markers/StepMarker';
+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: elements.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: elements.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 { elements } from '@sphereon/ui-components.core';
+const SSIActivityIndicator = (props) => {
+    const { size = 80, color = elements.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,11 @@
 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, gradientColors, LabelType } from '@sphereon/ui-components.core';
+import { SSITypeLabelContainerStyled as Container } from '../../../styles';
 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/SSIDropDownList/index.d.ts

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

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { ButtonIcon } from '@sphereon/ui-components.core';
 import SSIIconButton from '../../buttons/SSIIconButton';
-import { ButtonIconsEnum } from '../../../types';
-import { SSIDropDownListContainerStyled as Container, SSITextH3Styled as LabelCaption, SSIDropDownListSelectedValueStyled as SelectedValue, } from '../../../styles/components';
+import { SSIDropDownListContainerStyled as Container, SSITextH3Styled as LabelCaption, SSIDropDownListSelectedValueStyled as SelectedValue, } from '../../../styles';
 const SSIDropDownList = (props) => {
     const { initialValue, label } = props;
     const [value, setValue] = React.useState(initialValue);
-    return (_jsxs(Container, { children: [label && _jsx(LabelCaption, { children: label }), _jsx(SelectedValue, { children: value }), _jsx(SSIIconButton, { icon: ButtonIconsEnum.ARROW_DOWN, onClick: async () => console.log('drop down clicked') })] }));
+    return (_jsxs(Container, { children: [label && _jsx(LabelCaption, { children: label }), _jsx(SelectedValue, { children: value }), _jsx(SSIIconButton, { icon: ButtonIcon.ARROW_DOWN, onClick: async () => console.log('drop down clicked') })] }));
 };
 export default SSIDropDownList;

package/dist/components/messageBoxes/toasts/SSIToast/index.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { ToastType } from '@sphereon/ui-components.core';
+type Props = {
+    type: ToastType;
+    title?: string;
+    message?: string;
+    showBadge?: boolean;
+    onClick?: () => Promise<void>;
+};
+declare const SSIToast: FC<Props>;
+export default SSIToast;

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

@@ -0,0 +1,20 @@
+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';
+const getBadge = (type) => {
+    switch (type) {
+        case ToastType.SUCCESS:
+            return _jsx(SSICheckmarkBadge, {});
+        case ToastType.ERROR:
+            return _jsx(SSIExclamationMarkBadge, {});
+        default:
+            return _jsx("div", {});
+    }
+};
+const SSIToast = (props) => {
+    const { type, title, message, showBadge = true, onClick } = props;
+    return (_jsxs(Container, { onClick: onClick, children: [title && (_jsxs(TitleContainer, { children: [showBadge && _jsx(ToastBadgeContainer, { children: getBadge(type) }), _jsx(TitleText, { children: title })] })), _jsxs(MessageContainer, { children: [!title && showBadge && _jsx(ToastBadgeContainer, { children: getBadge(type) }), message && _jsx(MessageText, { style: { ...(showBadge && { textAlign: 'center' }) }, children: message })] })] }));
+};
+export default SSIToast;

package/dist/components/messageBoxes/toasts/SSIToastContainer/index.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { ToastPosition } from 'react-toastify';
+type Props = {
+    autoHide?: boolean;
+    visibilityTimeMs?: number;
+    position?: ToastPosition;
+    pauseOnHover?: boolean;
+};
+declare const SSIToastContainer: FC<Props>;
+export default SSIToastContainer;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SSIToastContainerContainerStyled as Container } from '../../../../styles';
+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 }));
+};
+export default SSIToastContainer;

package/dist/components/views/{SSICardView → SSICredentialCardView}/index.d.ts

@@ -28,5 +28,5 @@ type Props = {
     footer?: CardFooter;
     display?: CardDisplay;
 };
-declare const SSICardView: FC<Props>;
-export default SSICardView;
+declare const SSICredentialCardView: FC<Props>;
+export default SSICredentialCardView;

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

@@ -0,0 +1,24 @@
+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';
+const SSICredentialCardView = (props) => {
+    const { header, body, footer } = props;
+    const { credentialTitle, credentialSubtitle, logo } = props.header ?? {};
+    const { issuerName, properties } = props.body ?? {};
+    const { credentialStatus, expirationDate } = props.footer ?? {};
+    const { backgroundColor = credentialCardColors.default, backgroundImage, textColor = backgroundColors.primaryLight } = props.display ?? {};
+    const getPropertyElementsFrom = (properties) => {
+        return properties.slice(0, 2).map((property, index) => (_jsxs(PropertyContainer, { style: {
+                ...(properties.length > 1 && { width: 140 }),
+                ...(index > 0 && { marginLeft: 10 }),
+            }, children: [_jsx(H4Text, { style: { color: textColor }, children: property.name }), _jsx(PropertyValueText, { style: { color: textColor }, children: property.value })] }, index)));
+    };
+    return (_jsx(Container, { style: { backgroundColor }, children: _jsx(BackgroundImage, { style: {
+                ...(backgroundImage?.uri && { background: `url(${backgroundImage.uri})`, backgroundSize: 'cover' }),
+            }, children: _jsxs(AlphaContainer, { children: [header && (_jsxs(HeaderContainer, { children: [(!backgroundImage || logo) && (_jsx(LogoContainer, { children: _jsx(SSILogo, { logo: logo, color: textColor }) })), credentialTitle && (_jsxs(TitleContainer, { children: [_jsx(CredentialTitleText, { style: { color: textColor }, children: credentialTitle }), credentialSubtitle && _jsx(CredentialSubtitleText, { style: { color: textColor }, children: credentialSubtitle })] }))] })), body && (_jsx(ContentMainContainer, { children: _jsxs(ContentSubContainer, { children: [issuerName && (_jsx(IssueNameContainer, { children: _jsx(H4Text, { style: { color: textColor }, children: issuerName }) })), properties && _jsx(PropertiesContainer, { children: getPropertyElementsFrom(properties) })] }) })), footer && (_jsxs(FooterContainer, { children: [_jsx(ExpirationDateText, { style: { color: textColor }, children: expirationDate
+                                    ? `${Localization.translate('credential_card_expires_message')} ${toLocalDateString(expirationDate)}`
+                                    : Localization.translate('credential_status_never_expires_date_label') }), credentialStatus && (_jsx(StatusContainer, { children: credentialStatus && _jsx(SSIStatusLabel, { status: credentialStatus, color: textColor }) }))] }))] }) }) }));
+};
+export default SSICredentialCardView;

package/dist/components/views/{SSIMiniCardView → SSICredentialMiniCardView}/index.d.ts

@@ -7,5 +7,5 @@ type Props = {
     logoColor?: string;
     style?: CSSProperties;
 };
-declare const SSIMiniCardView: FC<Props>;
-export default SSIMiniCardView;
+declare const SSICredentialMiniCardView: FC<Props>;
+export default SSICredentialMiniCardView;

package/dist/components/views/{SSIMiniCardView → SSICredentialMiniCardView}/index.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { credentialCardColors } from '@sphereon/ui-components.core';
-import { SSIMiniCardViewContainerStyled as Container } from '../../../styles/components';
 import SSILogo from '../../assets/logos/SSILogo';
-const SSIMiniCardView = (props) => {
+import { SSICredentialMiniCardViewContainerStyled as Container, SSICredentialMiniCardViewBackgroundImageStyled as BackgroundImage, } from '../../../styles';
+const SSICredentialMiniCardView = (props) => {
     const { backgroundColor = credentialCardColors.default, backgroundImage, logo, logoColor, style } = props;
-    return (_jsx(Container, { style: { ...style, backgroundColor }, children: _jsx("div", { style: {
+    return (_jsx(Container, { style: { ...style, backgroundColor }, children: _jsx(BackgroundImage, { style: {
                 ...(backgroundImage?.uri && { background: `url(${backgroundImage.uri})`, backgroundSize: 'cover' }),
-            }, children: _jsx(SSILogo, { logo: logo, color: logoColor }) }) }));
+            }, children: (!backgroundImage || logo) && _jsx(SSILogo, { logo: logo, color: logoColor }) }) }));
 };
-export default SSIMiniCardView;
+export default SSICredentialMiniCardView;