@sphereon/ui-components.ssi-react 0.1.3-next.13 → 0.1.3-next.20

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/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,24 @@
+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/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,25 @@
+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/components';
+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,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { credentialCardColors } from '@sphereon/ui-components.core';
-import { SSIMiniCardViewContainerStyled as Container, SSIMiniCardViewBackgroundImageStyled as BackgroundImage, } from '../../../styles/components';
 import SSILogo from '../../assets/logos/SSILogo';
-const SSIMiniCardView = (props) => {
+import { SSICredentialMiniCardViewContainerStyled as Container, SSICredentialMiniCardViewBackgroundImageStyled as BackgroundImage, } from '../../../styles/components';
+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: _jsx(SSILogo, { logo: logo, color: logoColor }) }) }));
+            }, children: (!backgroundImage || logo) &&
+                _jsx(SSILogo, { logo: logo, color: logoColor }) }) }));
 };
-export default SSIMiniCardView;
+export default SSICredentialMiniCardView;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import SSIStatusLabel from './components/labels/SSIStatusLabel';
-import SSICardView from './components/views/SSICardView';
-import SSIMiniCardView from './components/views/SSIMiniCardView';
+import SSICredentialCardView from './components/views/SSICredentialCardView';
+import SSICredentialMiniCardView from './components/views/SSICredentialMiniCardView';
 import SSICheckmarkBadge from './components/assets/badges/SSICheckmarkBadge';
 import SSIExclamationMarkBadge from './components/assets/badges/SSIExclamationMarkBadge';
 import SSIPlaceholderLogo from './components/assets/logos/SSIPlaceholderLogo';
@@ -18,6 +18,7 @@ import SSITabView from './components/views/SSITabView';
 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';
 export * from './types';
 export * from './styles/components/fonts';
-export { SSICardView, SSIMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, };
+export { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSICheckbox };

package/dist/index.js

@@ -1,6 +1,6 @@
 import SSIStatusLabel from './components/labels/SSIStatusLabel';
-import SSICardView from './components/views/SSICardView';
-import SSIMiniCardView from './components/views/SSIMiniCardView';
+import SSICredentialCardView from './components/views/SSICredentialCardView';
+import SSICredentialMiniCardView from './components/views/SSICredentialMiniCardView';
 import SSICheckmarkBadge from './components/assets/badges/SSICheckmarkBadge';
 import SSIExclamationMarkBadge from './components/assets/badges/SSIExclamationMarkBadge';
 import SSIPlaceholderLogo from './components/assets/logos/SSIPlaceholderLogo';
@@ -18,6 +18,7 @@ import SSITabView from './components/views/SSITabView';
 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';
 export * from './types';
 export * from './styles/components/fonts';
-export { SSICardView, SSIMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, };
+export { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSICheckbox };

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

@@ -0,0 +1,4 @@
+export declare const SSICheckboxContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICheckboxUnselectedContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICheckboxSelectedContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICheckboxLabelContainerStyled: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { SSITextH4LightStyled } from '../../fonts';
+import { SSIFlexDirectionRowViewStyled } from '../../containers';
+export const SSICheckboxContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+`;
+export const SSICheckboxUnselectedContainerStyled = styled.div `
+  width: 18px;
+  aspect-ratio: 1;
+  border-radius: 4px;
+  border-width: 1px;
+`;
+export const SSICheckboxSelectedContainerStyled = styled.div `
+  width: 18px; 
+  aspect-ratio: 1;
+  border-radius: 4px;
+  align-items: center;
+  justify-content: center;
+`;
+export const SSICheckboxLabelContainerStyled = styled(SSITextH4LightStyled) `
+  display: flex;
+  flex-wrap: wrap;
+`;

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

@@ -0,0 +1,13 @@
+export declare const SSICredentialCardViewContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICredentialCardViewBackgroundImageStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICredentialCardViewHeaderContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICredentialCardViewHeaderLogoContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICredentialCardViewHeaderTitleContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICredentialCardViewContentMainContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICredentialCardViewContentSubContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICredentialCardViewContentIssueNameContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICredentialCardViewContentPropertiesContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICredentialCardViewFooterContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICredentialCardViewCredentialTitleTextStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SSICredentialCardViewCredentialSubtitleTextStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SSICredentialCardViewStatusContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+import { SSIFlexDirectionColumnViewStyled, SSIFlexDirectionRowViewStyled, SSIRoundedContainerStyled } from '../../containers';
+import { SSITextH4SemiBoldLightStyled, SSITextH5LightStyled } from '../../fonts';
+export const SSICredentialCardViewContainerStyled = styled(SSIRoundedContainerStyled) `
+  width: 327px;
+  height: 186px;
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+`;
+export const SSICredentialCardViewBackgroundImageStyled = styled(SSIFlexDirectionColumnViewStyled) `
+  flex-grow: 1;
+`;
+export const SSICredentialCardViewHeaderContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  height: 32px;
+  margin-top: 16px;
+`;
+export const SSICredentialCardViewHeaderLogoContainerStyled = styled.div `
+  margin: 0 12px 0 9px;
+`;
+export const SSICredentialCardViewHeaderTitleContainerStyled = styled.div `
+  text-align: end;
+  margin: 0 13px 0 auto;
+`;
+export const SSICredentialCardViewContentMainContainerStyled = styled.div `
+  display: flex;
+  flex-grow: 1;
+`;
+export const SSICredentialCardViewContentSubContainerStyled = styled.div `
+  margin-top: auto;
+`;
+export const SSICredentialCardViewContentIssueNameContainerStyled = styled.div `
+  padding: 2px 9px 2px 12px;
+`;
+export const SSICredentialCardViewContentPropertiesContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  justify-content: flex-start;
+  margin: 1px 0;
+  padding: 2px 9px 4px 12px;
+`;
+export const SSICredentialCardViewFooterContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  margin-top: auto;
+  backdrop-filter: blur(3px);
+  background-color: rgba(255, 255, 255, 0.25);
+  padding: 12px;
+`;
+export const SSICredentialCardViewCredentialTitleTextStyled = styled(SSITextH4SemiBoldLightStyled) `
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+`;
+export const SSICredentialCardViewCredentialSubtitleTextStyled = styled(SSITextH5LightStyled) `
+  text-align: right;
+`;
+export const SSICredentialCardViewStatusContainerStyled = styled.div `
+  margin-left: auto;
+`;

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

@@ -0,0 +1,2 @@
+export declare const SSICredentialMiniCardViewContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICredentialMiniCardViewBackgroundImageStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { SSIFlexDirectionColumnViewStyled } from '../../containers';
+export const SSICredentialMiniCardViewContainerStyled = styled.div `
+  width: 75px;
+  height: 50px;
+  border-radius: 4.6px;
+  overflow: hidden;
+  display: flex;
+`;
+export const SSICredentialMiniCardViewBackgroundImageStyled = styled(SSIFlexDirectionColumnViewStyled) `
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+`;

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,4 @@ export * from './SSITableViewHeader';
 export * from './SSITableView';
 export * from './SSITabViewHeader';
 export * from './SSITabView';
+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,4 @@ export * from './SSITableViewHeader';
 export * from './SSITableView';
 export * from './SSITabViewHeader';
 export * from './SSITabView';
+export * from './SSICheckbox';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.1.3-next.13+433837d",
+  "version": "0.1.3-next.20+b81e1a1",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -28,7 +28,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sphereon/ui-components.core": "0.1.3-next.13+433837d",
+    "@sphereon/ui-components.core": "0.1.3-next.20+b81e1a1",
     "@tanstack/react-table": "^8.9.3",
     "styled-components": "^5.3.3"
   },
@@ -40,5 +40,5 @@
   "peerDependencies": {
     "react": ">= 16.8.0"
   },
-  "gitHead": "433837da5d60749a8c05d7587eaf07619f74d89d"
+  "gitHead": "b81e1a14c8515d7154b63cef2a5a889ba9c641ff"
 }

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

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

@@ -1,59 +0,0 @@
-import styled from 'styled-components';
-import { SSIFlexDirectionColumnViewStyled, SSIFlexDirectionRowViewStyled, SSIRoundedContainerStyled } from '../../containers';
-import { SSITextH4SemiBoldLightStyled, SSITextH5LightStyled } from '../../fonts';
-export const SSICardViewContainerStyled = styled(SSIRoundedContainerStyled) `
-  width: 327px;
-  height: 186px;
-  display: flex;
-  flex-direction: column;
-  user-select: none;
-`;
-export const SSICardViewBackgroundImageStyled = styled(SSIFlexDirectionColumnViewStyled) `
-  flex-grow: 1;
-`;
-export const SSICardViewHeaderContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
-  height: 32px;
-  margin-top: 16px;
-`;
-export const SSICardViewHeaderLogoContainerStyled = styled.div `
-  margin-left: 9px;
-  margin-right: 12px;
-`;
-export const SSICardViewHeaderTitleContainerStyled = styled.div `
-  text-align: end;
-  margin: 0px 13px 0px auto;
-`;
-export const SSICardViewContentMainContainerStyled = styled.div `
-  display: flex;
-  flex-grow: 1;
-`;
-export const SSICardViewContentSubContainerStyled = styled.div `
-  margin-top: auto;
-`;
-export const SSICardViewContentIssueNameContainerStyled = styled.div `
-  padding: 2px 9px 2px 12px;
-`;
-export const SSICardViewContentPropertiesContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
-  justify-content: flex-start;
-  margin: 1px 0px 1px 0px;
-  padding: 2px 9px 4px 12px;
-`;
-export const SSICardViewFooterContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
-  margin-top: auto;
-  backdrop-filter: blur(3px);
-  background-color: rgba(255, 255, 255, 0.25);
-  padding: 12px;
-`;
-export const SSICardViewCredentialTitleTextStyled = styled(SSITextH4SemiBoldLightStyled) `
-  word-break: break-all;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-`;
-export const SSICardViewCredentialSubtitleTextStyled = styled(SSITextH5LightStyled) `
-  text-align: right;
-`;
-export const SSICardViewSSICredentialStatusStyled = styled.div `
-  margin-left: auto;
-`;

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

@@ -1,2 +0,0 @@
-export declare const SSIMiniCardViewContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSIMiniCardViewBackgroundImageStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,14 +0,0 @@
-import styled from 'styled-components';
-import { SSIFlexDirectionColumnViewStyled } from "../../containers";
-export const SSIMiniCardViewContainerStyled = styled.div `
-  width: 75px;
-  height: 50px;
-  border-radius: 4.6px;
-  overflow: hidden;
-  display: flex;
-`;
-export const SSIMiniCardViewBackgroundImageStyled = styled(SSIFlexDirectionColumnViewStyled) `
-  flex-grow: 1;
-  align-items: center;
-  justify-content: center;
-`;