@sphereon/ui-components.ssi-react 0.1.3-unstable.6 → 0.1.3-unstable.62

package/dist/styles/components/components/SSIToastContainer/index.js

@@ -0,0 +1,314 @@
+import styled from 'styled-components';
+import { ToastContainer } from 'react-toastify';
+export const SSIToastContainerContainerStyled = styled(ToastContainer) `
+  &.Toastify__toast-container {
+    z-index: 9999;
+    -webkit-transform: translate3d(0, 0, 9999);
+    position: fixed;
+    box-sizing: border-box;
+  }
+
+  &.Toastify__toast-container--top-left {
+    top: 1em;
+    left: 1em;
+  }
+  &.Toastify__toast-container--top-center {
+    top: 1em;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  &.Toastify__toast-container--top-right {
+    top: 1em;
+    right: 1em;
+  }
+  &.Toastify__toast-container--bottom-left {
+    bottom: 1em;
+    left: 1em;
+  }
+  &.Toastify__toast-container--bottom-center {
+    bottom: 1em;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  &.Toastify__toast-container--bottom-right {
+    bottom: 1em;
+    right: 1em;
+  }
+
+  @media only screen and (max-width: 480px) {
+    .Toastify__toast-container {
+      width: 100vw;
+      padding: 0;
+      left: 0;
+      margin: 0;
+    }
+    .Toastify__toast-container--top-left,
+    .Toastify__toast-container--top-center,
+    .Toastify__toast-container--top-right {
+      top: 0;
+      transform: translateX(0);
+    }
+    .Toastify__toast-container--bottom-left,
+    .Toastify__toast-container--bottom-center,
+    .Toastify__toast-container--bottom-right {
+      bottom: 0;
+      transform: translateX(0);
+    }
+    .Toastify__toast-container--rtl {
+      right: 0;
+      left: initial;
+    }
+  }
+
+  .Toastify__toast {
+    position: relative;
+    box-sizing: border-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    overflow: hidden;
+    cursor: default;
+    direction: ltr;
+    z-index: 0;
+  }
+
+  .Toastify__toast--rtl {
+    direction: rtl;
+  }
+
+  .Toastify__toast--close-on-click {
+    cursor: pointer;
+  }
+
+  .Toastify__toast-body {
+    margin: auto 0;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    padding: 6px;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+  .Toastify__toast-body > div:last-child {
+    word-break: break-word;
+    -ms-flex: 1;
+    flex: 1;
+  }
+
+  .Toastify--animate {
+    animation-fill-mode: both;
+    animation-duration: 0.7s;
+  }
+
+  @media only screen and (max-width: 480px) {
+    .Toastify__toast {
+      margin-bottom: 0;
+      border-radius: 0;
+    }
+  }
+
+  @keyframes Toastify__trackProgress {
+    0% {
+      transform: scaleX(1);
+    }
+    100% {
+      transform: scaleX(0);
+    }
+  }
+
+  .Toastify__progress-bar--animated {
+    animation: Toastify__trackProgress linear 1 forwards;
+  }
+  .Toastify__progress-bar--controlled {
+    transition: transform 0.2s;
+  }
+  .Toastify__progress-bar--rtl {
+    right: 0;
+    left: initial;
+    transform-origin: right;
+  }
+
+  @keyframes Toastify__bounceInRight {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    from {
+      opacity: 0;
+      transform: translate3d(3000px, 0, 0);
+    }
+    60% {
+      opacity: 1;
+      transform: translate3d(-25px, 0, 0);
+    }
+    75% {
+      transform: translate3d(10px, 0, 0);
+    }
+    90% {
+      transform: translate3d(-5px, 0, 0);
+    }
+    to {
+      transform: none;
+    }
+  }
+  @keyframes Toastify__bounceOutRight {
+    20% {
+      opacity: 1;
+      transform: translate3d(-20px, 0, 0);
+    }
+    to {
+      opacity: 0;
+      transform: translate3d(2000px, 0, 0);
+    }
+  }
+  @keyframes Toastify__bounceInLeft {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    0% {
+      opacity: 0;
+      transform: translate3d(-3000px, 0, 0);
+    }
+    60% {
+      opacity: 1;
+      transform: translate3d(25px, 0, 0);
+    }
+    75% {
+      transform: translate3d(-10px, 0, 0);
+    }
+    90% {
+      transform: translate3d(5px, 0, 0);
+    }
+    to {
+      transform: none;
+    }
+  }
+  @keyframes Toastify__bounceOutLeft {
+    20% {
+      opacity: 1;
+      transform: translate3d(20px, 0, 0);
+    }
+    to {
+      opacity: 0;
+      transform: translate3d(-2000px, 0, 0);
+    }
+  }
+  @keyframes Toastify__bounceInUp {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    from {
+      opacity: 0;
+      transform: translate3d(0, 3000px, 0);
+    }
+    60% {
+      opacity: 1;
+      transform: translate3d(0, -20px, 0);
+    }
+    75% {
+      transform: translate3d(0, 10px, 0);
+    }
+    90% {
+      transform: translate3d(0, -5px, 0);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+  @keyframes Toastify__bounceOutUp {
+    20% {
+      transform: translate3d(0, -10px, 0);
+    }
+    40%,
+    45% {
+      opacity: 1;
+      transform: translate3d(0, 20px, 0);
+    }
+    to {
+      opacity: 0;
+      transform: translate3d(0, -2000px, 0);
+    }
+  }
+  @keyframes Toastify__bounceInDown {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    0% {
+      opacity: 0;
+      transform: translate3d(0, -3000px, 0);
+    }
+    60% {
+      opacity: 1;
+      transform: translate3d(0, 25px, 0);
+    }
+    75% {
+      transform: translate3d(0, -10px, 0);
+    }
+    90% {
+      transform: translate3d(0, 5px, 0);
+    }
+    to {
+      transform: none;
+    }
+  }
+  @keyframes Toastify__bounceOutDown {
+    20% {
+      transform: translate3d(0, 10px, 0);
+    }
+    40%,
+    45% {
+      opacity: 1;
+      transform: translate3d(0, -20px, 0);
+    }
+    to {
+      opacity: 0;
+      transform: translate3d(0, 2000px, 0);
+    }
+  }
+  .Toastify__bounce-enter--top-left,
+  .Toastify__bounce-enter--bottom-left {
+    animation-name: Toastify__bounceInLeft;
+  }
+  .Toastify__bounce-enter--top-right,
+  .Toastify__bounce-enter--bottom-right {
+    animation-name: Toastify__bounceInRight;
+  }
+  .Toastify__bounce-enter--top-center {
+    animation-name: Toastify__bounceInDown;
+  }
+  .Toastify__bounce-enter--bottom-center {
+    animation-name: Toastify__bounceInUp;
+  }
+
+  .Toastify__bounce-exit--top-left,
+  .Toastify__bounce-exit--bottom-left {
+    animation-name: Toastify__bounceOutLeft;
+  }
+  .Toastify__bounce-exit--top-right,
+  .Toastify__bounce-exit--bottom-right {
+    animation-name: Toastify__bounceOutRight;
+  }
+  .Toastify__bounce-exit--top-center {
+    animation-name: Toastify__bounceOutUp;
+  }
+  .Toastify__bounce-exit--bottom-center {
+    animation-name: Toastify__bounceOutDown;
+  }
+`;

package/dist/styles/components/components/index.d.ts

@@ -1,5 +1,5 @@
-export * from './SSICardView';
-export * from './SSIMiniCardView';
+export * from './SSICredentialCardView';
+export * from './SSICredentialMiniCardView';
 export * from './SSIStatusLabel';
 export * from './SSIPrimaryButton';
 export * from './SSISecondaryButton';
@@ -10,3 +10,8 @@ export * from './SSITableViewHeader';
 export * from './SSITableView';
 export * from './SSITabViewHeader';
 export * from './SSITabView';
+export * from './SSIToast';
+export * from './SSIToastContainer';
+export * from './SSIProfileIcon';
+export * from './SSIHoverText';
+export * from './SSICheckbox';

package/dist/styles/components/components/index.js

@@ -1,5 +1,5 @@
-export * from './SSICardView';
-export * from './SSIMiniCardView';
+export * from './SSICredentialCardView';
+export * from './SSICredentialMiniCardView';
 export * from './SSIStatusLabel';
 export * from './SSIPrimaryButton';
 export * from './SSISecondaryButton';
@@ -10,3 +10,8 @@ export * from './SSITableViewHeader';
 export * from './SSITableView';
 export * from './SSITabViewHeader';
 export * from './SSITabView';
+export * from './SSIToast';
+export * from './SSIToastContainer';
+export * from './SSIProfileIcon';
+export * from './SSIHoverText';
+export * from './SSICheckbox';

package/dist/styles/components/fonts/index.d.ts

@@ -1,10 +1,12 @@
 export declare const SSITextH1Styled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SSITextH2Styled: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SSITextH2SemiBoldStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SSITextH3Styled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SSITextH3LightStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SSITextH4Styled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SSITextH4SemiBoldStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SSITextH4LightStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SSITextH4DarkStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SSITextH4SemiBoldLightStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SSITextH5Styled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SSITextH5LightStyled: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/styles/components/fonts/index.js

@@ -1,12 +1,15 @@
 import styled from 'styled-components';
 import { fontColors } from '@sphereon/ui-components.core';
-import { SSITextH1Css, SSITextH2Css, SSITextH3Css, SSITextH4Css, SSITextH4SemiBoldCss, SSITextH5Css, SSITextH6Css } from '../../css';
+import { SSITextH1Css, SSITextH2Css, SSITextH2SemiBoldStyledCss, SSITextH3Css, SSITextH4Css, SSITextH4SemiBoldCss, SSITextH5Css, SSITextH6Css, } from '../../css';
 export const SSITextH1Styled = styled.span `
   ${SSITextH1Css}
 `;
 export const SSITextH2Styled = styled.span `
   ${SSITextH2Css}
 `;
+export const SSITextH2SemiBoldStyled = styled.span `
+  ${SSITextH2SemiBoldStyledCss}
+`;
 export const SSITextH3Styled = styled.span `
   ${SSITextH3Css}
 `;
@@ -22,6 +25,9 @@ export const SSITextH4SemiBoldStyled = styled.span `
 export const SSITextH4LightStyled = styled(SSITextH4Styled) `
   color: ${fontColors.light};
 `;
+export const SSITextH4DarkStyled = styled(SSITextH4Styled) `
+  color: ${fontColors.dark};
+`;
 export const SSITextH4SemiBoldLightStyled = styled(SSITextH4SemiBoldStyled) `
   color: ${fontColors.light};
 `;

package/dist/styles/css/index.d.ts

@@ -1,5 +1,6 @@
 export declare const SSITextH1Css: import("styled-components").FlattenSimpleInterpolation;
 export declare const SSITextH2Css: import("styled-components").FlattenSimpleInterpolation;
+export declare const SSITextH2SemiBoldStyledCss: import("styled-components").FlattenSimpleInterpolation;
 export declare const SSITextH3Css: import("styled-components").FlattenSimpleInterpolation;
 export declare const SSITextH4Css: import("styled-components").FlattenSimpleInterpolation;
 export declare const SSITextH4SemiBoldCss: import("styled-components").FlattenSimpleInterpolation;

package/dist/styles/css/index.js

@@ -14,6 +14,13 @@ export const SSITextH2Css = css `
   line-height: ${fontStyle.h2Regular.lineHeight}px;
   height: auto;
 `;
+export const SSITextH2SemiBoldStyledCss = css `
+  font-family: ${fontStyle.h2SemiBold.fontFamily};
+  font-size: ${fontStyle.h2SemiBold.fontSize}px;
+  font-weight: ${fontStyle.h2SemiBold.fontWeight};
+  line-height: ${fontStyle.h2SemiBold.lineHeight}px;
+  height: auto;
+`;
 export const SSITextH3Css = css `
   font-family: ${fontStyle.h3Regular.fontFamily};
   font-size: ${fontStyle.h3Regular.fontSize}px;

package/dist/styles/index.d.ts

@@ -0,0 +1,3 @@
+export * from './typography';
+export * from './css';
+export * from './components';

package/dist/styles/index.js

@@ -0,0 +1,3 @@
+export * from './typography';
+export * from './css';
+export * from './components';

package/dist/types/button/index.d.ts

@@ -0,0 +1,7 @@
+import { ButtonIcon } from '@sphereon/ui-components.core';
+export type Button = {
+    caption: string;
+    onClick: () => Promise<void>;
+    icon?: ButtonIcon;
+    disabled?: boolean;
+};

package/dist/types/button/index.js

@@ -0,0 +1 @@
+export {};

package/dist/types/component/index.d.ts

@@ -1,38 +0,0 @@
-import { ComponentType } from 'react';
-import { AccessorFn, DeepKeys } from '@tanstack/react-table';
-export type TabRoute = {
-    key: string;
-    title: string;
-};
-export type TabViewRoute = TabRoute & {
-    content: ComponentType<unknown>;
-};
-export type TabNavigationState = {
-    index: number;
-    routes: Array<TabViewRoute>;
-};
-export declare enum ButtonIconsEnum {
-    ADD = "add",
-    ARROW_DOWN = "arrowDown",
-    FILTER = "filter"
-}
-export type ColumnHeader<T> = {
-    accessor: AccessorFn<T> | DeepKeys<T>;
-    type: TableCellTypeEnum;
-    label?: string;
-    truncationLength?: number;
-};
-export type Button = {
-    caption: string;
-    onClick: () => Promise<void>;
-    icon?: ButtonIconsEnum;
-    disabled?: boolean;
-};
-export declare enum LabelTypeEnum {
-    ISSUER = "Issuer",
-    VERIFIER = "Verifier"
-}
-export declare enum TableCellTypeEnum {
-    TEXT = "text",
-    LABEL = "label"
-}

package/dist/types/component/index.js

@@ -1,16 +1 @@
-export var ButtonIconsEnum;
-(function (ButtonIconsEnum) {
-    ButtonIconsEnum["ADD"] = "add";
-    ButtonIconsEnum["ARROW_DOWN"] = "arrowDown";
-    ButtonIconsEnum["FILTER"] = "filter";
-})(ButtonIconsEnum || (ButtonIconsEnum = {}));
-export var LabelTypeEnum;
-(function (LabelTypeEnum) {
-    LabelTypeEnum["ISSUER"] = "Issuer";
-    LabelTypeEnum["VERIFIER"] = "Verifier";
-})(LabelTypeEnum || (LabelTypeEnum = {}));
-export var TableCellTypeEnum;
-(function (TableCellTypeEnum) {
-    TableCellTypeEnum["TEXT"] = "text";
-    TableCellTypeEnum["LABEL"] = "label";
-})(TableCellTypeEnum || (TableCellTypeEnum = {}));
+"use strict";

package/dist/types/index.d.ts

@@ -1 +1,3 @@
-export * from './component';
+export * from './button';
+export * from './table';
+export * from './toast';

package/dist/types/index.js

@@ -1 +1,3 @@
-export * from './component';
+export * from './button';
+export * from './table';
+export * from './toast';

package/dist/types/table/index.d.ts

@@ -0,0 +1,12 @@
+import { AccessorFn, DeepKeys } from '@tanstack/react-table';
+export declare enum TableCellType {
+    TEXT = "text",
+    LABEL = "label",
+    STATUS = "status"
+}
+export type ColumnHeader<T> = {
+    accessor: AccessorFn<T> | DeepKeys<T>;
+    type: TableCellType;
+    label?: string;
+    truncationLength?: number;
+};

package/dist/types/table/index.js

@@ -0,0 +1,6 @@
+export var TableCellType;
+(function (TableCellType) {
+    TableCellType["TEXT"] = "text";
+    TableCellType["LABEL"] = "label";
+    TableCellType["STATUS"] = "status";
+})(TableCellType || (TableCellType = {}));

package/dist/types/toast/index.d.ts

@@ -0,0 +1,6 @@
+export type ToastConfigParams<Props> = {
+    title?: string;
+    message?: string;
+    onClick?: () => Promise<void>;
+    props?: Props;
+};

package/dist/types/toast/index.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.1.3-unstable.6+259823c",
+  "version": "0.1.3-unstable.62+06e4b40",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -28,8 +28,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@sphereon/ui-components.core": "0.1.3-unstable.6+259823c",
+    "@sphereon/ui-components.core": "0.1.3-unstable.62+06e4b40",
     "@tanstack/react-table": "^8.9.3",
+    "react-loader-spinner": "^5.4.5",
+    "react-toastify": "^9.1.3",
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
@@ -40,5 +42,5 @@
   "peerDependencies": {
     "react": ">= 16.8.0"
   },
-  "gitHead": "259823ca9b628b40559c1ff9d000007d6f04c237"
+  "gitHead": "06e4b405dd8b50321044e44e348a5c00a97104de"
 }

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

@@ -1,7 +0,0 @@
-import { FC } from 'react';
-export type Props = {
-    truncationLength?: number;
-    value: string;
-};
-declare const SSIText: FC<Props>;
-export default SSIText;

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

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SSITruncatedTextStyled, SSITruncatedContainerStyled, SSITruncatedFullTextStyled } from '../../../styles/components/components/SSIText';
-const SSIText = (props) => {
-    const { value, truncationLength } = props;
-    if (truncationLength && value.length > truncationLength) {
-        const truncatedText = value.substring(0, truncationLength);
-        return (_jsxs(SSITruncatedContainerStyled, { children: [_jsx(SSITruncatedTextStyled, { children: truncatedText }), _jsx(SSITruncatedFullTextStyled, { children: value })] }));
-    }
-    else {
-        return _jsx("p", { children: value });
-    }
-};
-export default SSIText;

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

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { backgroundColors, credentialCardColors, Localization, toLocalDateString, } from '@sphereon/ui-components.core';
-import { SSIAlphaContainerStyled as AlphaContainer, SSICardViewContainerStyled as Container, SSICardViewBackgroundImageStyled as BackgroundImage, SSICardViewContentMainContainerStyled as ContentMainContainer, SSICardViewContentSubContainerStyled as ContentSubContainer, SSICardViewSSICredentialStatusStyled as CredentialStatusContainer, SSICardViewCredentialSubtitleTextStyled as CredentialSubtitleText, SSICardViewCredentialTitleTextStyled as CredentialTitleText, SSITextH5LightStyled as ExpirationDateText, SSICardViewFooterContainerStyled as FooterContainer, SSITextH4LightStyled as H4Text, SSICardViewHeaderContainerStyled as HeaderContainer, SSICardViewContentIssueNameContainerStyled as IssueNameContainer, SSICardViewHeaderLogoContainerStyled as LogoContainer, SSICardViewContentPropertiesContainerStyled as PropertiesContainer, SSITextH6LightStyled as PropertyValueText, SSICardViewHeaderTitleContainerStyled as TitleContainer, SSIFlexDirectionColumnViewStyled as PropertyContainer, } from '../../../styles/components';
-import SSILogo from '../../assets/logos/SSILogo';
-import SSIStatusLabel from '../../labels/SSIStatusLabel';
-const SSICardView = (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: [_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(CredentialStatusContainer, { children: credentialStatus && _jsx(SSIStatusLabel, { status: credentialStatus, color: textColor }) }))] }))] }) }) }));
-};
-export default SSICardView;

package/dist/styles/components/components/SSICardView/index.d.ts

@@ -1,13 +0,0 @@
-export declare const SSICardViewContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSICardViewBackgroundImageStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSICardViewHeaderContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSICardViewHeaderLogoContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSICardViewHeaderTitleContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSICardViewContentMainContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSICardViewContentSubContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSICardViewContentIssueNameContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSICardViewContentPropertiesContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSICardViewFooterContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSICardViewCredentialTitleTextStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const SSICardViewCredentialSubtitleTextStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const SSICardViewSSICredentialStatusStyled: import("styled-components").StyledComponent<"div", any, {}, never>;