@sphereon/ui-components.ssi-react 0.1.3-unstable.24 → 0.1.3-unstable.30

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/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/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,9 @@
+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 = false } = 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/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/SSICredentialCardView/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { backgroundColors, credentialCardColors, Localization, toLocalDateString } from '@sphereon/ui-components.core';
+import { 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/components';
+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 ?? {};
@@ -17,8 +17,7 @@ const SSICredentialCardView = (props) => {
     };
     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
+            }, 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 }) }))] }))] }) }) }));
 };

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

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { credentialCardColors } from '@sphereon/ui-components.core';
 import SSILogo from '../../assets/logos/SSILogo';
-import { SSICredentialMiniCardViewContainerStyled as Container, SSICredentialMiniCardViewBackgroundImageStyled as BackgroundImage, } from '../../../styles/components';
+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(BackgroundImage, { style: {
                 ...(backgroundImage?.uri && { background: `url(${backgroundImage.uri})`, backgroundSize: 'cover' }),
-            }, children: (!backgroundImage || logo) &&
-                _jsx(SSILogo, { logo: logo, color: logoColor }) }) }));
+            }, children: (!backgroundImage || logo) && _jsx(SSILogo, { logo: logo, color: logoColor }) }) }));
 };
 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>;

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

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { createColumnHelper, flexRender, getCoreRowModel, useReactTable, } from '@tanstack/react-table';
 import { Localization } from '@sphereon/ui-components.core';
-import { TableCellTypeEnum } from '../../../types';
 import SSITableViewHeader from './SSITableViewHeader';
 import SSITypeLabel from '../../labels/SSITypeLabel';
-import SSIText from '../../labels/SSIText';
-import { SSITableViewCellContainerStyled as CellContainer, SSITableViewContainerStyled as Container, SSITableViewHeaderCellContainerStyled as HeaderCellContainer, SSITableViewLabelCellStyled as LabelCell, SSITableViewResultCountCaptionStyled as ResultCountCaption, SSITableViewRowContainerStyled as RowContainer, SSITableViewTableContainerStyled as TableContainer, } from '../../../styles/components';
+import SSIHoverText from '../../fields/SSIHoverText';
+import { SSITableViewCellContainerStyled as CellContainer, SSITableViewContainerStyled as Container, SSITableViewHeaderCellContainerStyled as HeaderCellContainer, SSITableViewLabelCellStyled as LabelCell, SSITableViewResultCountCaptionStyled as ResultCountCaption, SSITableViewRowContainerStyled as RowContainer, SSITableViewTableContainerStyled as TableContainer, } from '../../../styles';
+import { TableCellType } from '../../../types';
 function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -18,9 +18,9 @@ function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
 }
 const getCellFormatting = (type, value, truncationLength) => {
     switch (type) {
-        case TableCellTypeEnum.TEXT:
-            return _jsx(SSIText, { value: value, ...(truncationLength && { truncationLength }) });
-        case TableCellTypeEnum.LABEL: {
+        case TableCellType.TEXT:
+            return _jsx(SSIHoverText, { text: value, ...(truncationLength && { truncationLength }) });
+        case TableCellType.LABEL: {
             const labels = Array.isArray(value) ? value.map((label) => _jsx(SSITypeLabel, { type: label })) : _jsx(SSITypeLabel, { type: value });
             return _jsx(LabelCell, { children: labels });
         }
@@ -29,7 +29,7 @@ const getCellFormatting = (type, value, truncationLength) => {
     }
 };
 const SSITableView = (props) => {
-    const { columns, data, enableRowSelection = false, enableFiltering = false, enableMostRecent = false, enableResultCount = false, columnResizeMode = 'onChange', actions = [], onRowClick } = props;
+    const { columns, data, enableRowSelection = false, enableFiltering = false, enableMostRecent = false, enableResultCount = false, columnResizeMode = 'onChange', actions = [], onRowClick, } = props;
     const [rowSelection, setRowSelection] = React.useState({});
     const columnHelper = createColumnHelper();
     let availableColumns = columns.map((header) => columnHelper.accessor(header.accessor, {
@@ -72,12 +72,10 @@ const SSITableView = (props) => {
             await onRowClick(row);
         }
     };
-    return (_jsx(Container, { children: _jsxs("div", { className: "overflow-x-auto", children: [enableResultCount &&
-                    _jsx(ResultCountCaption, { children: Localization.translate('result_count_label', {
-                            count: data.length,
-                            maxCount: data.length,
-                        }) }), (enableFiltering || enableMostRecent || actions.length > 0) &&
-                    _jsx(SSITableViewHeader, { actions: actions, enableFiltering: enableFiltering, enableMostRecent: enableMostRecent }), _jsxs(TableContainer, { children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx(RowContainer, { children: headerGroup.headers.map((header) => (_jsxs(HeaderCellContainer, { colSpan: header.colSpan, style: { width: header.getSize() }, children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), _jsx("div", { className: `resizer ${header.column.getIsResizing() ? 'isResizing' : ''}`, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), style: {
+    return (_jsx(Container, { children: _jsxs("div", { className: "overflow-x-auto", children: [enableResultCount && (_jsx(ResultCountCaption, { children: Localization.translate('result_count_label', {
+                        count: data.length,
+                        maxCount: data.length,
+                    }) })), (enableFiltering || enableMostRecent || actions.length > 0) && (_jsx(SSITableViewHeader, { actions: actions, enableFiltering: enableFiltering, enableMostRecent: enableMostRecent })), _jsxs(TableContainer, { children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx(RowContainer, { children: headerGroup.headers.map((header) => (_jsxs(HeaderCellContainer, { colSpan: header.colSpan, style: { width: header.getSize() }, children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), _jsx("div", { className: `resizer ${header.column.getIsResizing() ? 'isResizing' : ''}`, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), style: {
                                                 transform: columnResizeMode === 'onEnd' && header.column.getIsResizing()
                                                     ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)`
                                                     : '',

package/dist/helpers/index.d.ts

@@ -0,0 +1 @@
+export * from './toastHelper';

package/dist/helpers/index.js

@@ -0,0 +1 @@
+export * from './toastHelper';

package/dist/helpers/toastHelper.d.ts

@@ -0,0 +1,3 @@
+import { ToastCustomProps, ToastType } from '@sphereon/ui-components.core';
+import { ToastConfigParams } from '../types';
+export declare const showToast: (type: ToastType, params: ToastConfigParams<ToastCustomProps>) => Promise<void>;

package/dist/helpers/toastHelper.js

@@ -0,0 +1,14 @@
+import { toast } from 'react-toastify';
+import { toastConfig } from '../@config/toasts';
+export const showToast = async (type, params) => {
+    const { title, message, onClick, props } = params;
+    if (!toastConfig.hasOwnProperty(type)) {
+        return Promise.reject('Unknown toast type');
+    }
+    toast(toastConfig[type]({
+        title,
+        message,
+        onClick,
+        props,
+    }));
+};

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import SSIToastContainer from './components/messageBoxes/toasts/SSIToastContainer';
 import SSIStatusLabel from './components/labels/SSIStatusLabel';
 import SSICredentialCardView from './components/views/SSICredentialCardView';
 import SSICredentialMiniCardView from './components/views/SSICredentialMiniCardView';
@@ -19,7 +20,8 @@ import SSITabViewHeader from './components/views/SSITabView/SSITabViewHeader';
 import SSIProfileIcon from './components/assets/icons/SSIProfileIcon';
 import SSISecondaryButton from './components/buttons/SSISecondaryButton';
 import SSICheckbox from './components/fields/SSICheckbox';
-import SSILoader from "./components/assets/loaders/SSILoader";
-export * from './types';
+import SSIHoverText from './components/fields/SSIHoverText';
 export * from './styles/components/fonts';
-export { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSICheckbox, SSILoader };
+export * from './types';
+export * from './helpers';
+export { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIHoverText };