@sphereon/ui-components.ssi-react 0.1.2-unstable.4 → 0.1.2

package/dist/components/assets/icons/SSIAddIcon/index.d.ts

@@ -1,7 +1,8 @@
-import { FC } from 'react';
+import { CSSProperties, FC } from 'react';
 export interface IProps {
     size?: number;
     color?: string;
+    style?: CSSProperties;
 }
 declare const SSIAddIcon: FC<IProps>;
 export default SSIAddIcon;

package/dist/components/assets/icons/SSIAddIcon/index.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
 const SSIAddIcon = (props) => {
-    const { size = 16, color = '#303030' } = props;
-    return (_jsx("div", { style: { width: size, aspectRatio: 1, display: 'flex' }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8 0.5C7.65483 0.5 7.375 0.779833 7.375 1.125V7.37503H1.125C0.779812 7.37503 0.5 7.65484 0.5 8.00003C0.5 8.34519 0.779812 8.62502 1.125 8.62502H7.375V14.875C7.375 15.2202 7.65483 15.5 8 15.5C8.34519 15.5 8.625 15.2202 8.625 14.875V8.62502H14.875C15.2202 8.62502 15.5 8.34519 15.5 8.00003C15.5 7.65484 15.2202 7.37503 14.875 7.37503H8.625V1.125C8.625 0.779833 8.34519 0.5 8 0.5Z", fill: color, fillOpacity: "0.8" }) }) }));
+    const { size = 16, color = fontColors.dark, style } = props;
+    return (_jsx("div", { style: { ...style, width: size, aspectRatio: 1, display: 'flex' }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8 0.5C7.65483 0.5 7.375 0.779833 7.375 1.125V7.37503H1.125C0.779812 7.37503 0.5 7.65484 0.5 8.00003C0.5 8.34519 0.779812 8.62502 1.125 8.62502H7.375V14.875C7.375 15.2202 7.65483 15.5 8 15.5C8.34519 15.5 8.625 15.2202 8.625 14.875V8.62502H14.875C15.2202 8.62502 15.5 8.34519 15.5 8.00003C15.5 7.65484 15.2202 7.37503 14.875 7.37503H8.625V1.125C8.625 0.779833 8.34519 0.5 8 0.5Z", fill: color }) }) }));
 };
 export default SSIAddIcon;

package/dist/components/assets/icons/SSIArrowDownIcon/index.d.ts

@@ -1,8 +1,9 @@
-import { FC } from 'react';
+import { CSSProperties, FC } from 'react';
 export interface IProps {
     width?: number;
     height?: number;
     color?: string;
+    style?: CSSProperties;
 }
 declare const SSIArrowDownIcon: FC<IProps>;
 export default SSIArrowDownIcon;

package/dist/components/assets/icons/SSIArrowDownIcon/index.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
 const SSIArrowDownIcon = (props) => {
-    const { width = 16, height = 8, color = '#303030' } = props;
-    return (_jsx("div", { style: { width, height, display: 'flex' }, children: _jsx("svg", { width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8.03265 7.74886C8.14951 7.74175 8.26065 7.69465 8.34825 7.61511L15.3133 1.19499C15.367 1.1489 15.411 1.09224 15.4429 1.02837C15.4747 0.964504 15.4937 0.894731 15.4987 0.823204C15.5037 0.751676 15.4946 0.67985 15.4719 0.611995C15.4493 0.54414 15.4135 0.481647 15.3668 0.428216C15.3201 0.374784 15.2634 0.331504 15.2001 0.300961C15.1367 0.270419 15.068 0.253238 14.9981 0.250423C14.9281 0.247608 14.8583 0.259221 14.7928 0.28458C14.7273 0.309939 14.6675 0.348517 14.6168 0.398032L8 6.49492L1.38317 0.398032C1.33252 0.348517 1.27268 0.309939 1.20718 0.28458C1.14169 0.259221 1.07189 0.247597 1.00193 0.250412C0.931963 0.253227 0.863266 0.270419 0.799918 0.300961C0.736569 0.331504 0.679861 0.374784 0.633164 0.428216C0.586466 0.481647 0.550732 0.54414 0.528085 0.611995C0.505437 0.67985 0.496338 0.751676 0.501329 0.823204C0.506319 0.894731 0.525297 0.964504 0.557135 1.02837C0.588973 1.09224 0.633022 1.1489 0.686663 1.19499L7.65174 7.61511C7.70344 7.6621 7.76372 7.69811 7.82911 7.72107C7.89449 7.74403 7.96367 7.75348 8.03265 7.74886Z", fill: color, fillOpacity: "0.8" }) }) }));
+    const { width = 16, height = 8, color = fontColors.dark, style } = props;
+    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8.03265 7.74886C8.14951 7.74175 8.26065 7.69465 8.34825 7.61511L15.3133 1.19499C15.367 1.1489 15.411 1.09224 15.4429 1.02837C15.4747 0.964504 15.4937 0.894731 15.4987 0.823204C15.5037 0.751676 15.4946 0.67985 15.4719 0.611995C15.4493 0.54414 15.4135 0.481647 15.3668 0.428216C15.3201 0.374784 15.2634 0.331504 15.2001 0.300961C15.1367 0.270419 15.068 0.253238 14.9981 0.250423C14.9281 0.247608 14.8583 0.259221 14.7928 0.28458C14.7273 0.309939 14.6675 0.348517 14.6168 0.398032L8 6.49492L1.38317 0.398032C1.33252 0.348517 1.27268 0.309939 1.20718 0.28458C1.14169 0.259221 1.07189 0.247597 1.00193 0.250412C0.931963 0.253227 0.863266 0.270419 0.799918 0.300961C0.736569 0.331504 0.679861 0.374784 0.633164 0.428216C0.586466 0.481647 0.550732 0.54414 0.528085 0.611995C0.505437 0.67985 0.496338 0.751676 0.501329 0.823204C0.506319 0.894731 0.525297 0.964504 0.557135 1.02837C0.588973 1.09224 0.633022 1.1489 0.686663 1.19499L7.65174 7.61511C7.70344 7.6621 7.76372 7.69811 7.82911 7.72107C7.89449 7.74403 7.96367 7.75348 8.03265 7.74886Z", fill: color }) }) }));
 };
 export default SSIArrowDownIcon;

package/dist/components/assets/icons/SSIFilterIcon/index.d.ts

@@ -1,8 +1,9 @@
-import { FC } from 'react';
+import { CSSProperties, FC } from 'react';
 export interface IProps {
     width?: number;
     height?: number;
     color?: string;
+    style?: CSSProperties;
 }
 declare const SSIFilterIcon: FC<IProps>;
 export default SSIFilterIcon;

package/dist/components/assets/icons/SSIFilterIcon/index.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
 const SSIFilterIcon = (props) => {
-    const { height = 16, width = 18, color = '#303030' } = props;
-    return (_jsx("div", { style: { width, height, display: 'flex' }, children: _jsx("svg", { width: "18", height: "16", viewBox: "0 0 18 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M16.5 1.5H1.5L7.5 8.33222V13.0556L10.5 14.5V8.33222L16.5 1.5Z", stroke: color, strokeOpacity: "0.8", strokeWidth: "1.29412", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+    const { height = 16, width = 18, color = fontColors.dark, style } = props;
+    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "18", height: "16", viewBox: "0 0 18 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M16.5 1.5H1.5L7.5 8.33222V13.0556L10.5 14.5V8.33222L16.5 1.5Z", stroke: color, strokeOpacity: "0.8", strokeWidth: "1.29412", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
 };
 export default SSIFilterIcon;

package/dist/components/assets/icons/SSIProfileIcon/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export type Props = {
+    fullName: string;
+    fontColor?: string;
+    backgroundColor?: string;
+};
+declare const ProfileIcon: FC<Props>;
+export default ProfileIcon;

package/dist/components/assets/icons/SSIProfileIcon/index.js

@@ -0,0 +1,9 @@
+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';
+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) }) }));
+};
+export default ProfileIcon;

package/dist/components/buttons/SSIIconButton/index.d.ts

@@ -2,8 +2,9 @@ import { FC } from 'react';
 import { ButtonIconsEnum } from '../../../types';
 export type Props = {
     icon: ButtonIconsEnum;
-    disabled?: boolean;
     onClick: () => Promise<void>;
+    disabled?: boolean;
+    color?: string;
 };
 declare const SSIIconButton: FC<Props>;
 export default SSIIconButton;

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

@@ -4,18 +4,19 @@ 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';
 const SSIIconButton = (props) => {
-    const { icon, onClick, disabled = false } = props;
-    return _jsx(Container, { onClick: onClick, children: getIcon(icon) });
+    const { icon, onClick, disabled = false, color = fontColors.dark } = props;
+    return _jsx(Container, { onClick: onClick, children: getIcon(icon, color) });
 };
-const getIcon = (icon) => {
+const getIcon = (icon, color) => {
     switch (icon) {
         case ButtonIconsEnum.ADD:
-            return _jsx(SSIAddIcon, {});
+            return _jsx(SSIAddIcon, { color: color });
         case ButtonIconsEnum.FILTER:
-            return _jsx(SSIFilterIcon, {});
+            return _jsx(SSIFilterIcon, { color: color });
         case ButtonIconsEnum.ARROW_DOWN:
-            return _jsx(SSIArrowDownIcon, {});
+            return _jsx(SSIArrowDownIcon, { color: color });
         default:
             return _jsx("div", {});
     }

package/dist/components/buttons/SSIPrimaryButton/index.d.ts

@@ -1,9 +1,11 @@
-import { FC } from 'react';
+import { CSSProperties, FC } from 'react';
+import { ButtonIconsEnum } from '../../../types';
 export type Props = {
     caption: string;
     onClick: () => Promise<void>;
-    icon?: string;
+    icon?: ButtonIconsEnum;
     disabled?: boolean;
+    style?: CSSProperties;
 };
 declare const SSIPrimaryButton: FC<Props>;
 export default SSIPrimaryButton;

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

@@ -1,9 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { fontColors } from '@sphereon/ui-components.core';
 import SSIAddIcon from '../../assets/icons/SSIAddIcon';
-import { SSIPrimaryButtonContainerStyled as Container, SSIPrimaryButtonCaptionStyled as Caption } from '../../../styles/components';
+import { SSIPrimaryButtonContainerStyled as Container, SSITextH3LightStyled as Caption } from '../../../styles/components';
+import { ButtonIconsEnum } from '../../../types';
 const SSIPrimaryButton = (props) => {
-    const { caption, icon, onClick } = props;
-    return (_jsxs(Container, { onClick: onClick, children: [icon && _jsx(SSIAddIcon, { color: fontColors.light }), _jsx(Caption, { children: caption })] }));
+    const { caption, icon, onClick, disabled = false, style = {} } = props;
+    const getIcon = (icon, color) => {
+        switch (icon) {
+            case ButtonIconsEnum.ADD:
+                return _jsx(SSIAddIcon, { style: { ...(disabled && { opacity: 0.5 }) }, color: color });
+            default:
+                return _jsx("div", {});
+        }
+    };
+    const onClicked = async () => {
+        if (!disabled) {
+            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 })] }));
 };
 export default SSIPrimaryButton;

package/dist/components/buttons/SSISecondaryButton/index.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties, FC } from 'react';
+import { ButtonIconsEnum } from '../../../types';
+export type Props = {
+    caption: string;
+    onClick: () => Promise<void>;
+    icon?: ButtonIconsEnum;
+    disabled?: boolean;
+    style?: CSSProperties;
+};
+declare const SSISecondaryButton: FC<Props>;
+export default SSISecondaryButton;

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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';
+const SSISecondaryButton = (props) => {
+    const { caption, icon, onClick, disabled = false, style = {} } = props;
+    const getIcon = (icon, color) => {
+        switch (icon) {
+            case ButtonIconsEnum.ADD:
+                return _jsx(SSIAddIcon, { style: { ...(disabled && { opacity: 0.5 }) }, color: color });
+            default:
+                return _jsx("div", {});
+        }
+    };
+    const onClicked = async () => {
+        if (!disabled) {
+            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 })] }));
+};
+export default SSISecondaryButton;

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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,13 @@
+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/labels/SSITypeLabel/index.js

@@ -1,7 +1,7 @@
 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 } from '@sphereon/ui-components.core';
 const getBackground = (type) => {
     switch (type) {
         case LabelTypeEnum.ISSUER:

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

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import SSIIconButton from '../../buttons/SSIIconButton';
 import { ButtonIconsEnum } from '../../../types';
-import { SSIDropDownListContainerStyled as Container, SSIDropDownListSelectedValueStyled as SelectedValue } from '../../../styles/components';
+import { SSIDropDownListContainerStyled as Container, SSITextH3Styled as LabelCaption, SSIDropDownListSelectedValueStyled as SelectedValue, } from '../../../styles/components';
 const SSIDropDownList = (props) => {
     const { initialValue, label } = props;
     const [value, setValue] = React.useState(initialValue);
-    return (_jsxs(Container, { children: [label && _jsx("span", { 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: ButtonIconsEnum.ARROW_DOWN, onClick: async () => console.log('drop down clicked') })] }));
 };
 export default SSIDropDownList;

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

@@ -1,14 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTitleContainerStyled as TitleContainer, } from "../../../../styles/components";
+import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTitleContainerStyled as TitleContainer, SSITextH3Styled as TitleCaption, } from '../../../../styles/components';
 const SSITabViewHeader = (props) => {
     const { navigationState, onIndexChange } = props;
     return (_jsx(Container, { children: navigationState.routes.map((value, index) => {
             const tabIndex = index + 1;
             const isActiveTab = tabIndex === navigationState.index;
-            return (_jsx(TitleContainer, { style: {
-                    fontWeight: !isActiveTab ? '400' : '600',
-                    ...(isActiveTab && { borderBottom: '2px solid #7276F7', alignSelf: 'stretch' }),
-                }, onClick: () => onIndexChange(tabIndex), children: value.title }, tabIndex));
+            return (_jsx(TitleContainer, { onClick: () => onIndexChange(tabIndex), style: {
+                    ...(isActiveTab && { borderBottom: `2px solid #7276F7`, alignSelf: 'stretch' }),
+                }, children: _jsx(TitleCaption, { style: { fontWeight: !isActiveTab ? '400' : '600' }, children: value.title }) }, tabIndex));
         }) }));
 };
 export default SSITabViewHeader;

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

@@ -1,6 +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';
 const Tab = (props) => {
     return _jsx(React.Fragment, { children: props.children });
 };
@@ -18,7 +19,7 @@ const SSITabView = (props) => {
     const onTabChange = async (tabIndex) => {
         setActiveTabIndex(tabIndex);
     };
-    return (_jsxs("div", { children: [_jsx(SSITabViewHeader, { navigationState: {
+    return (_jsxs(Container, { children: [_jsx(SSITabViewHeader, { navigationState: {
                     routes: routes,
                     index: activeTabIndex,
                 }, onIndexChange: onTabChange }), _jsx(Tab, { children: content })] }));

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

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

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

@@ -4,9 +4,10 @@ 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, SSITableViewHeaderFilterCaptionStyled 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/components';
 const SSITableViewHeader = (props) => {
-    const { enableFiltering = 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') })] })), _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)))] }) }) }));
+    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)))] }) }) }));
 };
 export default SSITableViewHeader;

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

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

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

@@ -4,7 +4,8 @@ import { createColumnHelper, flexRender, getCoreRowModel, useReactTable, } from
 import { TableCellTypeEnum } from '../../../types';
 import SSITableViewHeader from './SSITableViewHeader';
 import SSITypeLabel from '../../labels/SSITypeLabel';
-import { SSITableViewCellContainerStyled, SSITableViewContainerStyled, SSITableViewHeaderCellContainerStyled, SSITableViewLabelCellStyled, SSITableViewRowContainerStyled, SSITableViewTableContainerStyled } from "../../../styles/components";
+import SSIText from '../../labels/SSIText';
+import { SSITableViewCellContainerStyled, SSITableViewContainerStyled, SSITableViewHeaderCellContainerStyled, SSITableViewLabelCellStyled, SSITableViewRowContainerStyled, SSITableViewTableContainerStyled, } from '../../../styles/components';
 function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -14,10 +15,10 @@ function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     }, [ref, indeterminate]);
     return _jsx("input", { type: "checkbox", ref: ref, className: className + ' cursor-pointer', ...rest });
 }
-const getCellFormatting = (type, value) => {
+const getCellFormatting = (type, value, truncationLength) => {
     switch (type) {
         case TableCellTypeEnum.TEXT:
-            return _jsx("p", { children: value });
+            return _jsx(SSIText, { value: value, ...(truncationLength && { truncationLength }) });
         case TableCellTypeEnum.LABEL: {
             const labels = Array.isArray(value) ? value.map((label) => _jsx(SSITypeLabel, { type: label })) : _jsx(SSITypeLabel, { type: value });
             return _jsx(SSITableViewLabelCellStyled, { children: labels });
@@ -27,13 +28,13 @@ const getCellFormatting = (type, value) => {
     }
 };
 const SSITableView = (props) => {
-    const { columns, data, enableRowSelection = false, enableFiltering = false, columnResizeMode = 'onChange', actions = [] } = props;
+    const { columns, data, enableRowSelection = false, enableFiltering = false, enableMostRecent = false, columnResizeMode = 'onChange', actions = [], onRowClick } = props;
     const [rowSelection, setRowSelection] = React.useState({});
     const columnHelper = createColumnHelper();
     let availableColumns = columns.map((header) => columnHelper.accessor(header.accessor, {
         id: header.accessor,
         header: header.label,
-        cell: (info) => getCellFormatting(header.type, info.getValue()),
+        cell: (info) => getCellFormatting(header.type, info.getValue(), header.truncationLength),
     }));
     if (enableRowSelection) {
         availableColumns = [
@@ -65,10 +66,16 @@ const SSITableView = (props) => {
         columnResizeMode,
         getCoreRowModel: getCoreRowModel(),
     });
-    return (_jsx(SSITableViewContainerStyled, { children: _jsxs("div", { className: "overflow-x-auto", children: [_jsx(SSITableViewHeader, { actions: actions, enableFiltering: enableFiltering }), _jsxs(SSITableViewTableContainerStyled, { style: { width: table.getCenterTotalSize() }, children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx(SSITableViewRowContainerStyled, { children: headerGroup.headers.map((header) => (_jsxs(SSITableViewHeaderCellContainerStyled, { 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: {
+    const onRowClicked = async (row) => {
+        if (onRowClick) {
+            await onRowClick(row);
+        }
+    };
+    return (_jsx(SSITableViewContainerStyled, { children: _jsxs("div", { className: "overflow-x-auto", children: [(enableFiltering || enableMostRecent || actions.length > 0) &&
+                    _jsx(SSITableViewHeader, { actions: actions, enableFiltering: enableFiltering, enableMostRecent: enableMostRecent }), _jsxs(SSITableViewTableContainerStyled, { children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx(SSITableViewRowContainerStyled, { children: headerGroup.headers.map((header) => (_jsxs(SSITableViewHeaderCellContainerStyled, { 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)`
                                                     : '',
-                                            } })] }, header.id))) }, headerGroup.id))) }), _jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsx(SSITableViewRowContainerStyled, { children: row.getVisibleCells().map((cell) => (_jsx(SSITableViewCellContainerStyled, { style: { width: cell.column.getSize() }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] })] }) }));
+                                            } })] }, header.id))) }, headerGroup.id))) }), _jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsx(SSITableViewRowContainerStyled, { onClick: () => onRowClicked(row), children: row.getVisibleCells().map((cell) => (_jsx(SSITableViewCellContainerStyled, { style: { width: cell.column.getSize() }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] })] }) }));
 };
 export default SSITableView;

package/dist/index.d.ts

@@ -15,5 +15,8 @@ import SSITableView from './components/views/SSITableView';
 import SSITableViewHeader from './components/views/SSITableView/SSITableViewHeader';
 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';
 export * from './types';
-export { SSICardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader };
+export * from './styles/components/fonts';
+export { SSICardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, };

package/dist/index.js

@@ -15,5 +15,8 @@ import SSITableView from './components/views/SSITableView';
 import SSITableViewHeader from './components/views/SSITableView/SSITableViewHeader';
 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';
 export * from './types';
-export { SSICardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader };
+export * from './styles/components/fonts';
+export { SSICardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, };

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

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

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

@@ -1,13 +1,14 @@
 import styled from 'styled-components';
 import { SSIFlexDirectionRowViewStyled } from '../../containers';
-import { gradientColors } from "@sphereon/ui-components.core";
+import { gradientColors } from '@sphereon/ui-components.core';
+import { SSITextH3Styled } from '../../fonts';
 export const SSIDropDownListContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
   text-align: left;
   align-items: center;
   gap: 2px;
 `;
-export const SSIDropDownListSelectedValueStyled = styled.div `
-  background: ${gradientColors["100"]};
+export const SSIDropDownListSelectedValueStyled = styled(SSITextH3Styled) `
+  background: ${gradientColors['100']};
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

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

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

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

@@ -1,21 +1,13 @@
 import styled from 'styled-components';
 import { SSIRoundedContainerStyled } from '../../containers';
-import { fontColors, gradientColors } from "@sphereon/ui-components.core";
+import { gradientColors } from '@sphereon/ui-components.core';
 export const SSIPrimaryButtonContainerStyled = styled(SSIRoundedContainerStyled) `
-  height: 32px;
-  background: ${gradientColors["100"]};
+  background: ${gradientColors['100']};
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 8px;
-  padding-left: 8px;
-  padding-right: 8px;
-  color: ${fontColors.light};
+  padding: 9px 6px 9px 6px;
   cursor: pointer;
 `;
-export const SSIPrimaryButtonCaptionStyled = styled.div `
-  font-style: normal;
-  font-size: 14px;
-  font-weight: 400;
-`;

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

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

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

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+export const SSIProfileIconContainerStyled = styled.div `
+  width: 38px;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 19px;
+`;

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

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

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

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import { SSIRoundedContainerStyled } from '../../containers';
+import { gradientColors } from '@sphereon/ui-components.core';
+import { SSITextH3Styled } from "../../fonts";
+export const SSISecondaryButtonContainerStyled = styled(SSIRoundedContainerStyled) `
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 6px 9px 6px;
+  cursor: pointer;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    background: linear-gradient(135deg, #7276F7, #7C40E8) border-box;
+    -webkit-mask:
+            linear-gradient(#fff 0 0) padding-box,
+            linear-gradient(#fff 0 0);
+    -webkit-mask-composite: destination-out;
+    mask-composite: exclude;
+  }
+`;
+export const SSISecondaryButtonCaptionStyled = styled(SSITextH3Styled) `
+  background: ${gradientColors['100']};
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+`;

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

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

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

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+export const SSITabViewContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%
+`;

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

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { fontColors } from "@sphereon/ui-components.core";
 export const SSITabViewHeaderContainerStyled = styled.div `
   display: flex;
   flex-direction: row;
@@ -7,7 +6,5 @@ export const SSITabViewHeaderContainerStyled = styled.div `
   margin-left: 66px;
 `;
 export const SSITabViewHeaderTitleContainerStyled = styled.div `
-  font-size: 16px;
-  color: ${fontColors.dark};
   cursor: pointer;
 `;

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

@@ -1,10 +1,11 @@
 import styled from 'styled-components';
-import { backgroundColors, borderColors, fontColors } from "@sphereon/ui-components.core";
+import { backgroundColors, borderColors, fontColors } from '@sphereon/ui-components.core';
+import { SSITextH2Css, SSITextH3Css } from '../../../css';
 export const SSITableViewContainerStyled = styled.div `
   background-color: ${backgroundColors.lightGrey};
   display: flex;
   flex-grow: 1;
-  flex-direction: column
+  flex-direction: column;
 `;
 export const SSITableViewLabelCellStyled = styled.div `
   display: flex;
@@ -13,24 +14,24 @@ export const SSITableViewLabelCellStyled = styled.div `
 `;
 export const SSITableViewTableContainerStyled = styled.table `
   user-select: text;
-  width: fit-content;
+  width: 100%;
   border-collapse: collapse;
 `;
 export const SSITableViewRowContainerStyled = styled.tr `
   border-bottom: 1px solid ${borderColors.lightGrey};
 `;
 export const SSITableViewCellContainerStyled = styled.td `
+  ${SSITextH3Css};
   color: ${fontColors.dark};
   background-color: ${backgroundColors.primaryLight};
   padding: 20px 16px 20px 16px;
   text-align: left;
 `;
 export const SSITableViewHeaderCellContainerStyled = styled.th `
+  ${SSITextH2Css};
   position: relative;
   padding: 20px 16px 20px 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: normal;
   background-color: ${backgroundColors.primaryLight};
   color: ${fontColors.lightGrey};
+  text-align: left;
 `;

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

@@ -2,5 +2,4 @@ export declare const SSITableViewHeaderContainerStyled: import("styled-component
 export declare const SSITableViewHeaderContentContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITableViewHeaderActionsContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITableViewHeaderFilterContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITableViewHeaderFilterCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITableViewHeaderShowOptionContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { SSIFlexDirectionRowViewStyled } from '../../containers';
-import { backgroundColors, fontColors } from "@sphereon/ui-components.core";
+import { backgroundColors } from '@sphereon/ui-components.core';
 export const SSITableViewHeaderContainerStyled = styled.div `
   background-color: ${backgroundColors.primaryLight};
   display: flex;
@@ -22,9 +22,6 @@ export const SSITableViewHeaderFilterContainerStyled = styled(SSIFlexDirectionRo
   align-items: center;
   gap: 8px;
 `;
-export const SSITableViewHeaderFilterCaptionStyled = styled.div `
-  color: ${fontColors.dark};
-`;
 export const SSITableViewHeaderShowOptionContainerStyled = styled.div `
   display: flex;
   text-align: left;

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

@@ -0,0 +1,3 @@
+export declare const SSITruncatedFullTextStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SSITruncatedContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITruncatedTextStyled: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+export const SSITruncatedFullTextStyled = styled.span `
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: #fff;
+  border: 1px solid #ccc;
+  padding: 5px;
+  z-index: 1;
+`;
+export const SSITruncatedContainerStyled = styled.div `
+  position: relative;
+
+  &:hover ${SSITruncatedFullTextStyled} {
+    display: block;
+  }
+`;
+export const SSITruncatedTextStyled = styled.span `
+  display: 'inline';
+`;

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { SSIRoundedContainerStyled } from '../../containers';
-import { fontColors } from "@sphereon/ui-components.core";
+import { fontColors } from '@sphereon/ui-components.core';
 export const SSITypeLabelContainerStyled = styled(SSIRoundedContainerStyled) `
   display: flex;
   padding: 1px 12px;

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

@@ -1,9 +1,11 @@
 export * from './SSICardView';
 export * from './SSIStatusLabel';
 export * from './SSIPrimaryButton';
+export * from './SSISecondaryButton';
 export * from './SSIIconButton';
 export * from './SSIDropDownList';
 export * from './SSITypeLabel';
 export * from './SSITableViewHeader';
 export * from './SSITableView';
 export * from './SSITabViewHeader';
+export * from './SSITabView';

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

@@ -1,9 +1,11 @@
 export * from './SSICardView';
 export * from './SSIStatusLabel';
 export * from './SSIPrimaryButton';
+export * from './SSISecondaryButton';
 export * from './SSIIconButton';
 export * from './SSIDropDownList';
 export * from './SSITypeLabel';
 export * from './SSITableViewHeader';
 export * from './SSITableView';
 export * from './SSITabViewHeader';
+export * from './SSITabView';

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

@@ -1,3 +1,7 @@
+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 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>;

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

@@ -1,19 +1,23 @@
 import styled from 'styled-components';
 import { fontColors } from '@sphereon/ui-components.core';
-import { fontStyle } from '../../typography';
+import { SSITextH1Css, SSITextH2Css, SSITextH3Css, SSITextH4Css, SSITextH4SemiBoldCss, SSITextH5Css, SSITextH6Css } from '../../css';
+export const SSITextH1Styled = styled.span `
+  ${SSITextH1Css}
+`;
+export const SSITextH2Styled = styled.span `
+  ${SSITextH2Css}
+`;
+export const SSITextH3Styled = styled.span `
+  ${SSITextH3Css}
+`;
+export const SSITextH3LightStyled = styled(SSITextH3Styled) `
+  color: ${fontColors.light};
+`;
 export const SSITextH4Styled = styled.span `
-  font-family: ${fontStyle.h4Regular.fontFamily};
-  font-size: ${fontStyle.h4Regular.fontSize}px;
-  font-weight: ${fontStyle.h4Regular.fontWeight};
-  line-height: ${fontStyle.h4Regular.lineHeight}px;
-  height: auto;
+  ${SSITextH4Css}
 `;
 export const SSITextH4SemiBoldStyled = styled.span `
-  font-family: ${fontStyle.h4SemiBold.fontFamily};
-  font-size: ${fontStyle.h4SemiBold.fontSize}px;
-  font-weight: ${fontStyle.h4SemiBold.fontWeight};
-  line-height: ${fontStyle.h4SemiBold.lineHeight}px;
-  height: auto;
+  ${SSITextH4SemiBoldCss}
 `;
 export const SSITextH4LightStyled = styled(SSITextH4Styled) `
   color: ${fontColors.light};
@@ -22,21 +26,13 @@ export const SSITextH4SemiBoldLightStyled = styled(SSITextH4SemiBoldStyled) `
   color: ${fontColors.light};
 `;
 export const SSITextH5Styled = styled.span `
-  font-family: ${fontStyle.h5Regular.fontFamily};
-  font-size: ${fontStyle.h5Regular.fontSize}px;
-  font-weight: ${fontStyle.h5Regular.fontWeight};
-  line-height: ${fontStyle.h5Regular.lineHeight}px;
-  height: auto;
+  ${SSITextH5Css}
 `;
 export const SSITextH5LightStyled = styled(SSITextH5Styled) `
   color: ${fontColors.light};
 `;
 export const SSITextH6Styled = styled.span `
-  font-family: ${fontStyle.h6.fontFamily};
-  font-size: ${fontStyle.h6.fontSize}px;
-  font-weight: ${fontStyle.h6.fontWeight};
-  line-height: ${fontStyle.h6.lineHeight}px;
-  height: auto;
+  ${SSITextH6Css}
 `;
 export const SSITextH6LightStyled = styled(SSITextH6Styled) `
   color: ${fontColors.light};

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

@@ -0,0 +1,7 @@
+export declare const SSITextH1Css: import("styled-components").FlattenSimpleInterpolation;
+export declare const SSITextH2Css: 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;
+export declare const SSITextH5Css: import("styled-components").FlattenSimpleInterpolation;
+export declare const SSITextH6Css: import("styled-components").FlattenSimpleInterpolation;

package/dist/styles/css/index.js

@@ -0,0 +1,51 @@
+import { css } from 'styled-components';
+import { fontStyle } from '../typography';
+export const SSITextH1Css = css `
+  font-family: ${fontStyle.h1Regular.fontFamily};
+  font-size: ${fontStyle.h1Regular.fontSize}px;
+  font-weight: ${fontStyle.h1Regular.fontWeight};
+  line-height: ${fontStyle.h1Regular.lineHeight}px;
+  height: auto;
+`;
+export const SSITextH2Css = css `
+  font-family: ${fontStyle.h2Regular.fontFamily};
+  font-size: ${fontStyle.h2Regular.fontSize}px;
+  font-weight: ${fontStyle.h2Regular.fontWeight};
+  line-height: ${fontStyle.h2Regular.lineHeight}px;
+  height: auto;
+`;
+export const SSITextH3Css = css `
+  font-family: ${fontStyle.h3Regular.fontFamily};
+  font-size: ${fontStyle.h3Regular.fontSize}px;
+  font-weight: ${fontStyle.h3Regular.fontWeight};
+  line-height: ${fontStyle.h3Regular.lineHeight}px;
+  height: auto;
+`;
+export const SSITextH4Css = css `
+  font-family: ${fontStyle.h4Regular.fontFamily};
+  font-size: ${fontStyle.h4Regular.fontSize}px;
+  font-weight: ${fontStyle.h4Regular.fontWeight};
+  line-height: ${fontStyle.h4Regular.lineHeight}px;
+  height: auto;
+`;
+export const SSITextH4SemiBoldCss = css `
+  font-family: ${fontStyle.h4SemiBold.fontFamily};
+  font-size: ${fontStyle.h4SemiBold.fontSize}px;
+  font-weight: ${fontStyle.h4SemiBold.fontWeight};
+  line-height: ${fontStyle.h4SemiBold.lineHeight}px;
+  height: auto;
+`;
+export const SSITextH5Css = css `
+  font-family: ${fontStyle.h5Regular.fontFamily};
+  font-size: ${fontStyle.h5Regular.fontSize}px;
+  font-weight: ${fontStyle.h5Regular.fontWeight};
+  line-height: ${fontStyle.h5Regular.lineHeight}px;
+  height: auto;
+`;
+export const SSITextH6Css = css `
+  font-family: ${fontStyle.h6.fontFamily};
+  font-size: ${fontStyle.h6.fontSize}px;
+  font-weight: ${fontStyle.h6.fontWeight};
+  line-height: ${fontStyle.h6.lineHeight}px;
+  height: auto;
+`;

package/dist/styles/typography.js

@@ -6,6 +6,12 @@ export const fontStyle = {
         fontWeight: fontWeight[600],
         lineHeight: lineHeight[800],
     },
+    h1Regular: {
+        fontFamily: 'Poppins',
+        fontSize: fontSize[700],
+        fontWeight: fontWeight[400],
+        lineHeight: lineHeight[700],
+    },
     h1SemiBold: {
         fontFamily: 'Poppins',
         fontSize: fontSize[700],

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

@@ -20,11 +20,12 @@ export type ColumnHeader<T> = {
     accessor: AccessorFn<T> | DeepKeys<T>;
     type: TableCellTypeEnum;
     label?: string;
+    truncationLength?: number;
 };
 export type Button = {
     caption: string;
     onClick: () => Promise<void>;
-    icon?: string;
+    icon?: ButtonIconsEnum;
     disabled?: boolean;
 };
 export declare enum LabelTypeEnum {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.1.2-unstable.4+ecca694",
+  "version": "0.1.2",
   "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.2-unstable.4+ecca694",
+    "@sphereon/ui-components.core": "0.1.2",
     "@tanstack/react-table": "^8.9.3",
     "styled-components": "^5.3.3"
   },
@@ -40,5 +40,5 @@
   "peerDependencies": {
     "react": ">= 16.8.0"
   },
-  "gitHead": "ecca694b5b1e0d1996763266f25f7374b718a48a"
+  "gitHead": "45285dfa116751f1cda0fef607c8150031c87db8"
 }