@sphereon/ui-components.ssi-react 0.1.3-unstable.7 → 0.1.3-unstable.70

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/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/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;

package/dist/components/views/SSITabView/SSITabViewHeader/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TabNavigationState } from '../../../../types';
-export type Props = {
+import { TabNavigationState } from '@sphereon/ui-components.core';
+type Props = {
     navigationState: TabNavigationState;
     onIndexChange: (index: number) => void;
 };

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/components';
+import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTitleContainerStyled as TitleContainer, SSITextH3Styled as TitleCaption, } from '../../../../styles';
 const SSITabViewHeader = (props) => {
     const { navigationState, onIndexChange } = props;
     return (_jsx(Container, { children: navigationState.routes.map((value, index) => {

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TabViewRoute } from '../../../types';
-export type Props = {
+import { TabViewRoute } from '@sphereon/ui-components.core';
+type Props = {
     routes: Array<TabViewRoute>;
 };
 declare const SSITabView: React.FC<Props>;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import SSITabViewHeader from './SSITabViewHeader';
-import { SSITabViewContainerStyled as Container } from '../../../styles/components';
+import { SSITabViewContainerStyled as Container } from '../../../styles';
 const Tab = (props) => {
     return _jsx(React.Fragment, { children: props.children });
 };

package/dist/components/views/SSITableView/SSITableViewHeader/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from '../../../../types';
-export type Props = {
+type Props = {
     enableFiltering?: boolean;
     enableMostRecent?: boolean;
     actions?: Array<Button>;

package/dist/components/views/SSITableView/SSITableViewHeader/index.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Localization } from '@sphereon/ui-components.core';
+import { ButtonIcon, Localization } from '@sphereon/ui-components.core';
 import SSIIconButton from '../../../buttons/SSIIconButton';
-import { ButtonIconsEnum } from '../../../../types';
 import SSIDropDownList from '../../../lists/SSIDropDownList';
 import SSIPrimaryButton from '../../../buttons/SSIPrimaryButton';
-import { SSITableViewHeaderActionsContainerStyled as ActionsContainer, SSITableViewHeaderContainerStyled as Container, SSITableViewHeaderContentContainerStyled as ContentContainer, SSITextH3Styled as FilterCaption, SSITableViewHeaderFilterContainerStyled as FilterContainer, SSITableViewHeaderShowOptionContainerStyled as ShowOptionContainer, } from '../../../../styles/components';
+import { SSITableViewHeaderActionsContainerStyled as ActionsContainer, SSITableViewHeaderContainerStyled as Container, SSITableViewHeaderContentContainerStyled as ContentContainer, SSITextH3Styled as FilterCaption, SSITableViewHeaderFilterContainerStyled as FilterContainer, SSITableViewHeaderShowOptionContainerStyled as ShowOptionContainer, } from '../../../../styles';
 const SSITableViewHeader = (props) => {
     const { enableFiltering = false, enableMostRecent = false, actions = [] } = props;
-    return (_jsx(Container, { children: _jsx(ContentContainer, { children: _jsxs(ActionsContainer, { children: [enableFiltering && (_jsxs(FilterContainer, { children: [_jsx(SSIIconButton, { icon: ButtonIconsEnum.FILTER, onClick: async () => console.log('add filter clicked') }), _jsx(FilterCaption, { children: Localization.translate('action_filter_caption') })] })), enableMostRecent &&
-                        _jsx(ShowOptionContainer, { children: _jsx(SSIDropDownList, { label: Localization.translate('action_show_caption'), initialValue: 'Most recent' }) }), actions.map((action, index) => (_jsx(SSIPrimaryButton, { caption: action.caption, onClick: action.onClick, icon: action.icon }, index)))] }) }) }));
+    return (_jsx(Container, { children: _jsx(ContentContainer, { children: _jsxs(ActionsContainer, { children: [enableFiltering && (_jsxs(FilterContainer, { children: [_jsx(SSIIconButton, { icon: ButtonIcon.FILTER, onClick: async () => console.log('add filter clicked') }), _jsx(FilterCaption, { children: Localization.translate('action_filter_caption') })] })), enableMostRecent && (_jsx(ShowOptionContainer, { children: _jsx(SSIDropDownList, { label: Localization.translate('action_show_caption'), initialValue: 'Most recent' }) })), actions.map((action, index) => (_jsx(SSIPrimaryButton, { caption: action.caption, onClick: action.onClick, icon: action.icon }, index)))] }) }) }));
 };
 export default SSITableViewHeader;

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

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { ColumnResizeMode, Row } from '@tanstack/react-table';
 import { Button, ColumnHeader } from '../../../types';
-export type Props<T> = {
+type Props<T> = {
     data: Array<T>;
     columns: Array<ColumnHeader<T>>;
     onRowClick?: (data: Row<T>) => Promise<void>;