@sphereon/ui-components.ssi-react 0.1.3-unstable.87 → 0.1.3-unstable.94

package/dist/components/assets/markers/StepMarker/index.js

@@ -2,13 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { StepMarkerActiveContainerStyled as ActiveContainer, StepMarkerActiveOuterContainerStyled as ActiveOuterContainer, StepMarkerGradientContainerStyled as GradientContainer, SSITextH1SemiBoldLightStyled as StepNumberText, StepMarkerInactiveContainerStyled as InactiveContainer, } from '../../../../styles';
 import { StepStatus } from '../../../../types';
 const getCurrentMarkerElement = (stepNumber) => {
-    return _jsx(ActiveContainer, { children: _jsx(ActiveOuterContainer, { children: _jsx(GradientContainer, { children: _jsx(StepNumberText, { children: stepNumber }) }) }) });
+    return (_jsx(ActiveContainer, { children: _jsx(ActiveOuterContainer, { children: _jsx(GradientContainer, { children: _jsx(StepNumberText, { children: stepNumber }) }) }) }));
 };
 const getNextMarkerElement = (stepNumber) => {
-    return _jsx(InactiveContainer, { children: _jsx(StepNumberText, { children: stepNumber }) });
+    return (_jsx(InactiveContainer, { children: _jsx(StepNumberText, { children: stepNumber }) }));
 };
 const getCompletedMarkerElement = (stepNumber) => {
-    return _jsx(GradientContainer, { children: _jsx(StepNumberText, { children: stepNumber }) });
+    return (_jsx(GradientContainer, { children: _jsx(StepNumberText, { children: stepNumber }) }));
 };
 const StepMarker = (props) => {
     const { stepNumber, status = StepStatus.NEXT } = props;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ButtonIcon, fontColors } from '@sphereon/ui-components.core';
+import { ButtonIcon, fontColors, OpacityStyleEnum } from '@sphereon/ui-components.core';
 import SSIAddIcon from '../../assets/icons/SSIAddIcon';
 import { SSIPrimaryButtonContainerStyled as Container, SSITextH3LightStyled as Caption } from '../../../styles';
 const SSIPrimaryButton = (props) => {
@@ -7,7 +7,7 @@ const SSIPrimaryButton = (props) => {
     const getIcon = (icon, color) => {
         switch (icon) {
             case ButtonIcon.ADD:
-                return _jsx(SSIAddIcon, { style: { ...(disabled && { opacity: 0.5 }) }, color: color });
+                return _jsx(SSIAddIcon, { style: { ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, color: color });
             default:
                 return _jsx("div", {});
         }
@@ -17,6 +17,6 @@ const SSIPrimaryButton = (props) => {
             await onClick();
         }
     };
-    return (_jsxs(Container, { style: { ...style, ...(disabled && { opacity: 0.5 }) }, onClick: onClicked, children: [icon && getIcon(icon, fontColors.light), _jsx(Caption, { style: { ...(disabled && { opacity: 0.5 }) }, children: caption })] }));
+    return (_jsxs(Container, { style: { ...style, ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, onClick: onClicked, children: [icon && getIcon(icon, fontColors.light), _jsx(Caption, { style: { ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, children: caption })] }));
 };
 export default SSIPrimaryButton;

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

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ButtonIcon, gradientColors } from '@sphereon/ui-components.core';
+import { ButtonIcon, OpacityStyleEnum } from '@sphereon/ui-components.core';
 import SSIAddIcon from '../../assets/icons/SSIAddIcon';
 import { SSISecondaryButtonCaptionStyled as Caption, SSISecondaryButtonContainerStyled as Container } from '../../../styles';
+import { gradientColors } from '../../../styles/colors';
 const SSISecondaryButton = (props) => {
     const { caption, icon, onClick, disabled = false, style = {} } = props;
     const getIcon = (icon, color) => {
         switch (icon) {
             case ButtonIcon.ADD:
-                return _jsx(SSIAddIcon, { style: { ...(disabled && { opacity: 0.5 }) }, color: color });
+                return _jsx(SSIAddIcon, { style: { ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, color: color });
             default:
                 return _jsx("div", {});
         }
@@ -17,6 +18,6 @@ const SSISecondaryButton = (props) => {
             await onClick();
         }
     };
-    return (_jsxs(Container, { style: { ...style, ...(disabled && { opacity: 0.5 }) }, onClick: onClicked, children: [icon && getIcon(icon, gradientColors['100']), _jsx(Caption, { style: { ...(disabled && { opacity: 0.5 }) }, children: caption })] }));
+    return (_jsxs(Container, { style: { ...style, ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, onClick: onClicked, children: [icon && getIcon(icon, gradientColors['100']), _jsx(Caption, { style: { ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, children: caption })] }));
 };
 export default SSISecondaryButton;

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

@@ -1,9 +1,9 @@
 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 { OpacityStyleEnum, fontColors, selectionElementColors } 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 { backgroundColor, borderColor = selectionElementColors.primaryBorderDark, disabled = false, initialValue = false, label, selectedColor = selectionElementColors.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 () => {

package/dist/components/indicators/ProgressStepIndicator/index.js

@@ -1,32 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { elements, fontColors, gradientColors } from '@sphereon/ui-components.core';
+import { elementColors, fontColors } from '@sphereon/ui-components.core';
 import StepMarker from '../../assets/markers/StepMarker';
-import { ProgressStepIndicatorContainerStyled as Container, ProgressStepIndicatorContentGridContainerStyled as GridContainer, ProgressStepIndicatorStepMarkerCellStyled as StepMarkerCell, ProgressStepIndicatorStepLineStyled as StepLine, ProgressStepIndicatorStepTextCellStyled as StepTextCell, ProgressStepIndicatorTitleTextStyled as TitleText, ProgressStepIndicatorDescriptionTextStyled as DescriptionText, ProgressStepIndicatorSpacerLineCellStyled as SpacerLineCell } from '../../../styles';
+import { gradientColors } from '../../../styles/colors';
+import { ProgressStepIndicatorContainerStyled as Container, ProgressStepIndicatorContentGridContainerStyled as GridContainer, ProgressStepIndicatorStepMarkerCellStyled as StepMarkerCell, ProgressStepIndicatorStepLineStyled as StepLine, ProgressStepIndicatorStepTextCellStyled as StepTextCell, ProgressStepIndicatorTitleTextStyled as TitleText, ProgressStepIndicatorDescriptionTextStyled as DescriptionText, ProgressStepIndicatorSpacerLineCellStyled as SpacerLineCell, } from '../../../styles';
 import { StepStatus } from '../../../types';
 const getStepRowElement = (stepNumber, status, step, maxSteps) => {
-    const gridRowNumber = (stepNumber * 2) - 1;
-    return (_jsxs(_Fragment, { children: [_jsxs(StepMarkerCell, { style: { gridRow: gridRowNumber }, children: [_jsx(StepMarker, { stepNumber: stepNumber, status: status }), stepNumber < maxSteps &&
-                        _jsx(StepLine, { style: {
-                                ...(status === StepStatus.COMPLETED && {
-                                    backgroundColor: elements.purple
-                                })
-                            } })] }), _jsxs(StepTextCell, { style: { gridRow: gridRowNumber }, children: [step.title &&
-                        _jsx(TitleText, { style: {
-                                ...(status === StepStatus.CURRENT && {
-                                    background: gradientColors['100'],
-                                    backgroundClip: 'text',
-                                    WebkitBackgroundClip: 'text',
-                                    WebkitTextFillColor: 'transparent'
-                                }),
-                                ...(status === StepStatus.COMPLETED && { color: fontColors.dark }),
-                                ...(status === StepStatus.NEXT && { color: fontColors.lightGrey })
-                            }, children: step.title }), step.description &&
-                        _jsx(DescriptionText, { style: { ...((status === StepStatus.CURRENT || status === StepStatus.COMPLETED) && { color: fontColors.dark }) }, children: step.description })] }), stepNumber < maxSteps &&
-                _jsx(SpacerLineCell, { style: { gridRow: gridRowNumber + 1 }, children: _jsx(StepLine, { style: {
+    const gridRowNumber = stepNumber * 2 - 1;
+    return (_jsxs(_Fragment, { children: [_jsxs(StepMarkerCell, { style: { gridRow: gridRowNumber }, children: [_jsx(StepMarker, { stepNumber: stepNumber, status: status }), stepNumber < maxSteps && (_jsx(StepLine, { style: {
                             ...(status === StepStatus.COMPLETED && {
-                                backgroundColor: elements.purple
-                            })
-                        } }) })] }));
+                                backgroundColor: elementColors.purple,
+                            }),
+                        } }))] }), _jsxs(StepTextCell, { style: { gridRow: gridRowNumber }, children: [step.title && (_jsx(TitleText, { style: {
+                            ...(status === StepStatus.CURRENT && {
+                                background: gradientColors['100'],
+                                backgroundClip: 'text',
+                                WebkitBackgroundClip: 'text',
+                                WebkitTextFillColor: 'transparent',
+                            }),
+                            ...(status === StepStatus.COMPLETED && { color: fontColors.dark }),
+                            ...(status === StepStatus.NEXT && { color: fontColors.lightGrey }),
+                        }, children: step.title })), step.description && (_jsx(DescriptionText, { style: { ...((status === StepStatus.CURRENT || status === StepStatus.COMPLETED) && { color: fontColors.dark }) }, children: step.description }))] }), stepNumber < maxSteps && (_jsx(SpacerLineCell, { style: { gridRow: gridRowNumber + 1 }, children: _jsx(StepLine, { style: {
+                        ...(status === StepStatus.COMPLETED && {
+                            backgroundColor: elementColors.purple,
+                        }),
+                    } }) }))] }));
 };
 const getStepStatus = (stepNumber, activeStep) => {
     if (stepNumber < activeStep) {
@@ -49,6 +46,6 @@ const getStepElements = (activeStep, steps) => {
 };
 const ProgressStepIndicator = (props) => {
     const { activeStep, steps = [], style } = props;
-    return _jsx(Container, { style: style, children: _jsx(GridContainer, { children: getStepElements(activeStep, steps) }) });
+    return (_jsx(Container, { style: style, children: _jsx(GridContainer, { children: getStepElements(activeStep, steps) }) }));
 };
 export default ProgressStepIndicator;

package/dist/components/indicators/SSIActivityIndicator/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Oval } from 'react-loader-spinner';
-import { elements } from '@sphereon/ui-components.core';
+import { elementColors } from '@sphereon/ui-components.core';
 const SSIActivityIndicator = (props) => {
-    const { size = 80, color = elements.blue, style } = props;
+    const { size = 80, color = elementColors.blue, style } = props;
     return (_jsx(Oval, { width: size, height: size, color: color, secondaryColor: color, strokeWidth: 5, strokeWidthSecondary: 5, visible: true, wrapperStyle: style }));
 };
 export default SSIActivityIndicator;

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { backgroundColors, gradientColors, LabelType } from '@sphereon/ui-components.core';
+import { backgroundColors, LabelType } from '@sphereon/ui-components.core';
 import { SSITypeLabelContainerStyled as Container } from '../../../styles';
+import { gradientColors } from '../../../styles/colors';
 const getBackground = (type) => {
     switch (type) {
         case LabelType.ISSUER:

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

@@ -29,6 +29,9 @@ const getCellFormatting = (type, value, opts) => {
         case TableCellType.STATUS: {
             return _jsx(SSIStatusLabel, { status: value });
         }
+        case TableCellType.REACT_ELEMENT: {
+            return value;
+        }
         default:
             return _jsx("div", {});
     }
@@ -66,7 +69,7 @@ const SSITableView = (props) => {
     }
     const table = useReactTable({
         defaultColumn: {
-            size: 0
+            size: 0,
         },
         state: {
             rowSelection,

package/dist/index.d.ts

@@ -25,7 +25,7 @@ import SSIHoverText from './components/fields/SSIHoverText';
 import ProgressStepIndicator from './components/indicators/ProgressStepIndicator';
 import StepMarker from './components/assets/markers/StepMarker';
 import { Row } from '@tanstack/react-table';
-export * from './styles/components/fonts';
+export * from './styles/fonts';
 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, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, Row };
+export { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, Row, };

package/dist/index.js

@@ -24,7 +24,7 @@ import SSIActivityIndicator from './components/indicators/SSIActivityIndicator';
 import SSIHoverText from './components/fields/SSIHoverText';
 import ProgressStepIndicator from './components/indicators/ProgressStepIndicator';
 import StepMarker from './components/assets/markers/StepMarker';
-export * from './styles/components/fonts';
+export * from './styles/fonts';
 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, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator };
+export { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, };

package/dist/styles/colors.d.ts

@@ -0,0 +1,3 @@
+type Gradient = 100 | 200;
+export declare const gradientColors: Record<Gradient, string>;
+export {};

package/dist/styles/colors.js

@@ -0,0 +1,5 @@
+import { gradientsColors } from '@sphereon/ui-components.core';
+export const gradientColors = {
+    100: `linear-gradient(135deg, ${gradientsColors[100].primaryColor} 0%, ${gradientsColors[100].secondaryColor} 100%)`,
+    200: `linear-gradient(135deg, ${gradientsColors[200].primaryColor} 0%, ${gradientsColors[200].secondaryColor} 100%)`,
+};

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
-import { backgroundColors, borderColors, elements, fontColors } from '@sphereon/ui-components.core';
-import { SSITextH1SemiBoldStyled, SSITextH3Styled } from '../../fonts';
+import { backgroundColors, borderColors, elementColors, fontColors } from '@sphereon/ui-components.core';
+import { SSITextH1SemiBoldStyled, SSITextH3Styled } from '../../../fonts';
 export const ProgressStepIndicatorContainerStyled = styled.div `
   background-color: ${backgroundColors.primaryLight};
   border-radius: 24px;
@@ -44,5 +44,5 @@ export const ProgressStepIndicatorStepLineStyled = styled.div `
   width: 4px;
   display: flex;
   flex-grow: 1;
-  background-color: ${elements.lightGrey};
+  background-color: ${elementColors.lightGrey};
 `;

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

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { SSITextH4LightStyled } from '../../fonts';
+import { SSITextH4LightStyled } from '../../../fonts';
 import { SSIFlexDirectionRowViewStyled } from '../../containers';
 export const SSICheckboxContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
   align-items: center;

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { SSIFlexDirectionColumnViewStyled, SSIFlexDirectionRowViewStyled, SSIRoundedContainerStyled } from '../../containers';
-import { SSITextH4SemiBoldLightStyled, SSITextH5LightStyled } from '../../fonts';
+import { SSITextH4SemiBoldLightStyled, SSITextH5LightStyled } from '../../../fonts';
 export const SSICredentialCardViewContainerStyled = styled(SSIRoundedContainerStyled) `
   width: 327px;
   height: 186px;

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { SSIFlexDirectionRowViewStyled } from '../../containers';
-import { SSITextH3Styled } from '../../fonts';
-import { gradient100TextCss } from "../../../css";
+import { SSITextH3Styled } from '../../../fonts';
+import { gradient100TextCss } from '../../../css';
 export const SSIDropDownListContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
   text-align: left;
   align-items: center;

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { SSIRoundedContainerStyled } from '../../containers';
-import { gradientColors } from '@sphereon/ui-components.core';
+import { gradientColors } from '../../../colors';
 export const SSIPrimaryButtonContainerStyled = styled(SSIRoundedContainerStyled) `
   background: ${gradientColors['100']};
   display: flex;

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { SSIRoundedContainerStyled } from '../../containers';
-import { SSITextH3Styled } from '../../fonts';
+import { SSITextH3Styled } from '../../../fonts';
 import { gradient100TextCss } from '../../../css';
 export const SSISecondaryButtonContainerStyled = styled(SSIRoundedContainerStyled) `
   position: relative;

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { SSIFlexDirectionRowViewStyled } from '../../containers';
-import { SSITextH5LightStyled } from '../../fonts';
+import { SSITextH5LightStyled } from '../../../fonts';
 export const SSIStatusLabelContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
   border-radius: 9px;
   border: 1px solid #000;

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { alertColors } from '@sphereon/ui-components.core';
 import { SSIFlexDirectionRowViewStyled, SSIRoundedContainerStyled } from '../../containers';
-import { SSITextH4DarkStyled } from '../../fonts';
+import { SSITextH4DarkStyled } from '../../../fonts';
 export const SSIToastContainerStyled = styled(SSIRoundedContainerStyled) `
   //TODO we need better width, use a max width and use content to scale
   // 96.8%;

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

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
-import { backgroundColors, elements, gradientColors } from '@sphereon/ui-components.core';
+import { backgroundColors, elementColors } from '@sphereon/ui-components.core';
+import { gradientColors } from '../../../colors';
 export const StepMarkerActiveContainerStyled = styled.div `
   width: 50px;
   height: 50px;
@@ -21,7 +22,7 @@ export const StepMarkerActiveOuterContainerStyled = styled.div `
 export const StepMarkerGradientContainerStyled = styled.div `
   width: 42px;
   height: 42px;
-  background: ${gradientColors["100"]};
+  background: ${gradientColors['100']};
   border-radius: 21px;
   display: flex;
   align-items: center;
@@ -30,7 +31,7 @@ export const StepMarkerGradientContainerStyled = styled.div `
 export const StepMarkerInactiveContainerStyled = styled.div `
   width: 42px;
   height: 42px;
-  background-color: ${elements.lightGrey};
+  background-color: ${elementColors.lightGrey};
   border-radius: 25px;
   display: flex;
   align-items: center;

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

@@ -1,3 +1,2 @@
 export * from './containers';
 export * from './components';
-export * from './fonts';

package/dist/styles/components/index.js

@@ -1,3 +1,2 @@
 export * from './containers';
 export * from './components';
-export * from './fonts';

package/dist/styles/css/index.js

@@ -1,6 +1,6 @@
 import { css } from 'styled-components';
-import { gradientColors } from '@sphereon/ui-components.core';
 import { fontStyle } from '../typography';
+import { gradientColors } from '../colors';
 export const SSITextH1Css = css `
   font-family: ${fontStyle.h1Regular.fontFamily};
   font-size: ${fontStyle.h1Regular.fontSize}px;

package/dist/styles/{components/fonts → fonts}/index.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { fontColors } from '@sphereon/ui-components.core';
-import { SSITextH1Css, SSITextH1SemiBoldCss, SSITextH2Css, SSITextH2SemiBoldStyledCss, SSITextH3Css, SSITextH4Css, SSITextH4SemiBoldCss, SSITextH5Css, SSITextH6Css, } from '../../css';
+import { SSITextH1Css, SSITextH1SemiBoldCss, SSITextH2Css, SSITextH2SemiBoldStyledCss, SSITextH3Css, SSITextH4Css, SSITextH4SemiBoldCss, SSITextH5Css, SSITextH6Css, } from '../css';
 export const SSITextH1Styled = styled.div `
   ${SSITextH1Css}
 `;
@@ -8,7 +8,7 @@ export const SSITextH1SemiBoldStyled = styled.div `
   ${SSITextH1SemiBoldCss}
 `;
 export const SSITextH1SemiBoldLightStyled = styled(SSITextH1SemiBoldStyled) `
-  color: ${fontColors.light}
+  color: ${fontColors.light};
 `;
 export const SSITextH2Styled = styled.div `
   ${SSITextH2Css}

package/dist/styles/index.d.ts

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

package/dist/styles/index.js

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

package/dist/styles/typography.js

@@ -78,4 +78,10 @@ export const fontStyle = {
         fontWeight: fontWeight[600],
         lineHeight: lineHeight[400],
     },
+    Regular64: {
+        fontFamily: 'Poppins',
+        fontSize: fontSize[64],
+        fontWeight: fontWeight[600],
+        lineHeight: lineHeight[64],
+    },
 };

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

@@ -2,7 +2,8 @@ import { AccessorFn, DeepKeys } from '@tanstack/react-table';
 export declare enum TableCellType {
     TEXT = "text",
     LABEL = "label",
-    STATUS = "status"
+    STATUS = "status",
+    REACT_ELEMENT = "reactElement"
 }
 export type ColumnHeader<T> = {
     accessor: AccessorFn<T> | DeepKeys<T>;

package/dist/types/table/index.js

@@ -3,4 +3,5 @@ export var TableCellType;
     TableCellType["TEXT"] = "text";
     TableCellType["LABEL"] = "label";
     TableCellType["STATUS"] = "status";
+    TableCellType["REACT_ELEMENT"] = "reactElement";
 })(TableCellType || (TableCellType = {}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.1.3-unstable.87+cb45970",
+  "version": "0.1.3-unstable.94+aebd863",
   "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-unstable.87+cb45970",
+    "@sphereon/ui-components.core": "0.1.3-unstable.94+aebd863",
     "@tanstack/react-table": "^8.9.3",
     "react-loader-spinner": "^5.4.5",
     "react-toastify": "^9.1.3",
@@ -42,5 +42,5 @@
   "peerDependencies": {
     "react": ">= 16.8.0"
   },
-  "gitHead": "cb45970a463cd17da535e89b7097f50e2ee800cd"
+  "gitHead": "aebd8630a5a3dc51cd3381cee8b64b9147845aae"
 }