@sphereon/ui-components.ssi-react 0.1.3-unstable.72 → 0.1.3-unstable.83

package/dist/components/assets/markers/StepMarker/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { StepStatus } from '../../../../types';
+type Props = {
+    stepNumber: number;
+    status?: StepStatus;
+};
+declare const StepMarker: FC<Props>;
+export default StepMarker;

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

@@ -0,0 +1,26 @@
+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 }) }) }) });
+};
+const getNextMarkerElement = (stepNumber) => {
+    return _jsx(InactiveContainer, { children: _jsx(StepNumberText, { children: stepNumber }) });
+};
+const getCompletedMarkerElement = (stepNumber) => {
+    return _jsx(GradientContainer, { children: _jsx(StepNumberText, { children: stepNumber }) });
+};
+const StepMarker = (props) => {
+    const { stepNumber, status = StepStatus.NEXT } = props;
+    switch (status) {
+        case StepStatus.CURRENT:
+            return getCurrentMarkerElement(stepNumber);
+        case StepStatus.COMPLETED:
+            return getCompletedMarkerElement(stepNumber);
+        case StepStatus.NEXT:
+            return getNextMarkerElement(stepNumber);
+        default:
+            return _jsx("div", {});
+    }
+};
+export default StepMarker;

package/dist/components/indicators/ProgressStepIndicator/index.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties, FC } from 'react';
+import { ProgressIndicatorStep } from '../../../types';
+type Props = {
+    steps: Array<ProgressIndicatorStep>;
+    activeStep: number;
+    style?: CSSProperties;
+};
+declare const ProgressStepIndicator: FC<Props>;
+export default ProgressStepIndicator;

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

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { elements, fontColors, gradientColors } 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 { 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: {
+                            ...(status === StepStatus.COMPLETED && {
+                                backgroundColor: elements.purple
+                            })
+                        } }) })] }));
+};
+const getStepStatus = (stepNumber, activeStep) => {
+    if (stepNumber < activeStep) {
+        return StepStatus.COMPLETED;
+    }
+    else if (stepNumber > activeStep) {
+        return StepStatus.NEXT;
+    }
+    else if (stepNumber === activeStep) {
+        return StepStatus.CURRENT;
+    }
+    throw new Error('Unable to determine step status');
+};
+const getStepElements = (activeStep, steps) => {
+    return steps.map((step, index) => {
+        const stepNumber = index + 1;
+        const stepStatus = getStepStatus(stepNumber, activeStep);
+        return getStepRowElement(stepNumber, stepStatus, step, steps.length);
+    });
+};
+const ProgressStepIndicator = (props) => {
+    const { activeStep, steps = [], style } = props;
+    return _jsx(Container, { style: style, children: _jsx(GridContainer, { children: getStepElements(activeStep, steps) }) });
+};
+export default ProgressStepIndicator;

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

@@ -41,6 +41,9 @@ const SSITableView = (props) => {
         id: header.accessor,
         header: header.label,
         cell: (info) => getCellFormatting(header.type, info.getValue(), header.opts),
+        minSize: header.opts?.columnMinWidth,
+        maxSize: header.opts?.columnMaxWidth,
+        size: header.opts?.columnWidth,
     }));
     if (enableRowSelection) {
         availableColumns = [
@@ -62,6 +65,9 @@ const SSITableView = (props) => {
         ];
     }
     const table = useReactTable({
+        defaultColumn: {
+            size: 0
+        },
         state: {
             rowSelection,
         },
@@ -80,10 +86,18 @@ const SSITableView = (props) => {
     return (_jsx(Container, { children: _jsxs("div", { className: "overflow-x-auto", children: [enableResultCount && (_jsx(ResultCountCaption, { children: Localization.translate('result_count_label', {
                         count: data.length,
                         maxCount: data.length,
-                    }) })), (enableFiltering || enableMostRecent || actions.length > 0) && (_jsx(SSITableViewHeader, { actions: actions, enableFiltering: enableFiltering, enableMostRecent: enableMostRecent })), _jsxs(TableContainer, { children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx(RowContainer, { children: headerGroup.headers.map((header) => (_jsxs(HeaderCellContainer, { colSpan: header.colSpan, style: { width: header.getSize() }, children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), _jsx("div", { className: `resizer ${header.column.getIsResizing() ? 'isResizing' : ''}`, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), style: {
+                    }) })), (enableFiltering || enableMostRecent || actions.length > 0) && (_jsx(SSITableViewHeader, { actions: actions, enableFiltering: enableFiltering, enableMostRecent: enableMostRecent })), _jsxs(TableContainer, { children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx(RowContainer, { children: headerGroup.headers.map((header) => (_jsxs(HeaderCellContainer, { colSpan: header.colSpan, style: {
+                                        ...(header.column.columnDef.minSize && { minWidth: header.column.columnDef.minSize }),
+                                        ...(header.column.columnDef.maxSize && { maxWidth: header.column.columnDef.maxSize }),
+                                        ...(header.column.columnDef.size !== 0 && { width: header.column.columnDef.size }),
+                                    }, 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(RowContainer, { onClick: () => onRowClicked(row), children: row.getVisibleCells().map((cell) => (_jsx(CellContainer, { 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(RowContainer, { onClick: () => onRowClicked(row), children: row.getVisibleCells().map((cell) => (_jsx(CellContainer, { style: {
+                                        ...(cell.column.columnDef.minSize && { minWidth: cell.column.columnDef.minSize }),
+                                        ...(cell.column.columnDef.maxSize && { maxWidth: cell.column.columnDef.maxSize }),
+                                        ...(cell.column.columnDef.size !== 0 && { width: cell.column.columnDef.size }),
+                                    }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] })] }) }));
 };
 export default SSITableView;

package/dist/index.d.ts

@@ -22,8 +22,10 @@ import SSISecondaryButton from './components/buttons/SSISecondaryButton';
 import SSICheckbox from './components/fields/SSICheckbox';
 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';
 import { Row } from '@tanstack/react-table';
 export * from './styles/components/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, 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

@@ -22,7 +22,9 @@ import SSISecondaryButton from './components/buttons/SSISecondaryButton';
 import SSICheckbox from './components/fields/SSICheckbox';
 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 './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 };
+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/components/components/ProgressStepIndicator/index.d.ts

@@ -0,0 +1,8 @@
+export declare const ProgressStepIndicatorContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProgressStepIndicatorContentGridContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProgressStepIndicatorStepMarkerCellStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProgressStepIndicatorStepTextCellStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProgressStepIndicatorSpacerLineCellStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProgressStepIndicatorTitleTextStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProgressStepIndicatorDescriptionTextStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProgressStepIndicatorStepLineStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+import { backgroundColors, borderColors, elements, fontColors } from '@sphereon/ui-components.core';
+import { SSITextH1SemiBoldStyled, SSITextH3Styled } from '../../fonts';
+export const ProgressStepIndicatorContainerStyled = styled.div `
+  background-color: ${backgroundColors.primaryLight};
+  border-radius: 24px;
+  border: 1px solid ${borderColors.light};
+  display: flex;
+  overflow: hidden;
+  padding: 48px 24px;
+  cursor: default;
+  min-width: 325px;
+`;
+export const ProgressStepIndicatorContentGridContainerStyled = styled.div `
+  display: grid;
+  grid-column-gap: 24px;
+`;
+export const ProgressStepIndicatorStepMarkerCellStyled = styled.div `
+  grid-column: 1;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`;
+export const ProgressStepIndicatorStepTextCellStyled = styled.div `
+  grid-column: 2;
+  max-width: 365px;
+  text-align: start;
+`;
+export const ProgressStepIndicatorSpacerLineCellStyled = styled.div `
+  height: 48px;
+  grid-column: 1;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+`;
+export const ProgressStepIndicatorTitleTextStyled = styled(SSITextH1SemiBoldStyled) `
+  word-break: break-word;
+`;
+export const ProgressStepIndicatorDescriptionTextStyled = styled(SSITextH3Styled) `
+  word-break: break-word;
+  color: ${fontColors.lightGrey};
+`;
+export const ProgressStepIndicatorStepLineStyled = styled.div `
+  width: 4px;
+  display: flex;
+  flex-grow: 1;
+  background-color: ${elements.lightGrey};
+`;

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

@@ -1,4 +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>;
+export declare const SSICheckboxLabelContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -8,6 +8,6 @@ export declare const SSICredentialCardViewContentSubContainerStyled: import("sty
 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 SSICredentialCardViewCredentialTitleTextStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICredentialCardViewCredentialSubtitleTextStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSICredentialCardViewStatusContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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<"span", any, {}, never>;
+export declare const SSIDropDownListSelectedValueStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

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

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

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

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { SSIRoundedContainerStyled } from '../../containers';
-import { gradientColors } from '@sphereon/ui-components.core';
 import { SSITextH3Styled } from '../../fonts';
+import { gradient100TextCss } from '../../../css';
 export const SSISecondaryButtonContainerStyled = styled(SSIRoundedContainerStyled) `
   position: relative;
   display: flex;
@@ -28,8 +28,5 @@ export const SSISecondaryButtonContainerStyled = styled(SSIRoundedContainerStyle
   }
 `;
 export const SSISecondaryButtonCaptionStyled = styled(SSITextH3Styled) `
-  background: ${gradientColors['100']};
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  ${gradient100TextCss}
 `;

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

@@ -1,3 +1,3 @@
 export declare const SSIStatusLabelContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSIStatusLabelStatusCaptionStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SSIStatusLabelStatusCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSIStatusLabelBadgeContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -26,6 +26,8 @@ export const SSITableViewCellContainerStyled = styled.td `
   background-color: ${backgroundColors.primaryLight};
   padding: 20px 16px 20px 16px;
   text-align: left;
+  //setting border-box makes padding be included in the width, otherwise content-box is used and then padding is excluded from the width
+  box-sizing: border-box;
 `;
 export const SSITableViewHeaderCellContainerStyled = styled.th `
   ${SSITextH2Css};
@@ -34,6 +36,8 @@ export const SSITableViewHeaderCellContainerStyled = styled.th `
   background-color: ${backgroundColors.primaryLight};
   color: ${fontColors.lightGrey};
   text-align: left;
+  //setting border-box makes padding be included in the width, otherwise content-box is used and then padding is excluded from the width
+  box-sizing: border-box;
 `;
 export const SSITableViewResultCountCaptionStyled = styled.div `
   ${SSITextH3Css};

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

@@ -1,4 +1,4 @@
 export declare const SSIToastContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSIToastBadgeContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSIToastTitleContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSIToastMessageTextStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SSIToastMessageTextStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

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

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

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+import { backgroundColors, elements, gradientColors } from '@sphereon/ui-components.core';
+export const StepMarkerActiveContainerStyled = styled.div `
+  width: 50px;
+  height: 50px;
+  background: ${gradientColors[100]};
+  border-radius: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const StepMarkerActiveOuterContainerStyled = styled.div `
+  width: 46px;
+  height: 46px;
+  background-color: ${backgroundColors.primaryLight};
+  border-radius: 23px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const StepMarkerGradientContainerStyled = styled.div `
+  width: 42px;
+  height: 42px;
+  background: ${gradientColors["100"]};
+  border-radius: 21px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const StepMarkerInactiveContainerStyled = styled.div `
+  width: 42px;
+  height: 42px;
+  background-color: ${elements.lightGrey};
+  border-radius: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;

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

@@ -15,3 +15,5 @@ export * from './SSIToastContainer';
 export * from './SSIProfileIcon';
 export * from './SSIHoverText';
 export * from './SSICheckbox';
+export * from './ProgressStepIndicator';
+export * from './StepMarker';

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

@@ -15,3 +15,5 @@ export * from './SSIToastContainer';
 export * from './SSIProfileIcon';
 export * from './SSIHoverText';
 export * from './SSICheckbox';
+export * from './ProgressStepIndicator';
+export * from './StepMarker';

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

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

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

@@ -1,25 +1,31 @@
 import styled from 'styled-components';
 import { fontColors } from '@sphereon/ui-components.core';
-import { SSITextH1Css, SSITextH2Css, SSITextH2SemiBoldStyledCss, SSITextH3Css, SSITextH4Css, SSITextH4SemiBoldCss, SSITextH5Css, SSITextH6Css, } from '../../css';
-export const SSITextH1Styled = styled.span `
+import { SSITextH1Css, SSITextH1SemiBoldCss, SSITextH2Css, SSITextH2SemiBoldStyledCss, SSITextH3Css, SSITextH4Css, SSITextH4SemiBoldCss, SSITextH5Css, SSITextH6Css, } from '../../css';
+export const SSITextH1Styled = styled.div `
   ${SSITextH1Css}
 `;
-export const SSITextH2Styled = styled.span `
+export const SSITextH1SemiBoldStyled = styled.div `
+  ${SSITextH1SemiBoldCss}
+`;
+export const SSITextH1SemiBoldLightStyled = styled(SSITextH1SemiBoldStyled) `
+  color: ${fontColors.light}
+`;
+export const SSITextH2Styled = styled.div `
   ${SSITextH2Css}
 `;
-export const SSITextH2SemiBoldStyled = styled.span `
+export const SSITextH2SemiBoldStyled = styled.div `
   ${SSITextH2SemiBoldStyledCss}
 `;
-export const SSITextH3Styled = styled.span `
+export const SSITextH3Styled = styled.div `
   ${SSITextH3Css}
 `;
 export const SSITextH3LightStyled = styled(SSITextH3Styled) `
   color: ${fontColors.light};
 `;
-export const SSITextH4Styled = styled.span `
+export const SSITextH4Styled = styled.div `
   ${SSITextH4Css}
 `;
-export const SSITextH4SemiBoldStyled = styled.span `
+export const SSITextH4SemiBoldStyled = styled.div `
   ${SSITextH4SemiBoldCss}
 `;
 export const SSITextH4LightStyled = styled(SSITextH4Styled) `
@@ -31,13 +37,13 @@ export const SSITextH4DarkStyled = styled(SSITextH4Styled) `
 export const SSITextH4SemiBoldLightStyled = styled(SSITextH4SemiBoldStyled) `
   color: ${fontColors.light};
 `;
-export const SSITextH5Styled = styled.span `
+export const SSITextH5Styled = styled.div `
   ${SSITextH5Css}
 `;
 export const SSITextH5LightStyled = styled(SSITextH5Styled) `
   color: ${fontColors.light};
 `;
-export const SSITextH6Styled = styled.span `
+export const SSITextH6Styled = styled.div `
   ${SSITextH6Css}
 `;
 export const SSITextH6LightStyled = styled(SSITextH6Styled) `

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

@@ -1,4 +1,5 @@
 export declare const SSITextH1Css: import("styled-components").FlattenSimpleInterpolation;
+export declare const SSITextH1SemiBoldCss: import("styled-components").FlattenSimpleInterpolation;
 export declare const SSITextH2Css: import("styled-components").FlattenSimpleInterpolation;
 export declare const SSITextH2SemiBoldStyledCss: import("styled-components").FlattenSimpleInterpolation;
 export declare const SSITextH3Css: import("styled-components").FlattenSimpleInterpolation;
@@ -6,3 +7,4 @@ export declare const SSITextH4Css: import("styled-components").FlattenSimpleInte
 export declare const SSITextH4SemiBoldCss: import("styled-components").FlattenSimpleInterpolation;
 export declare const SSITextH5Css: import("styled-components").FlattenSimpleInterpolation;
 export declare const SSITextH6Css: import("styled-components").FlattenSimpleInterpolation;
+export declare const gradient100TextCss: import("styled-components").FlattenSimpleInterpolation;

package/dist/styles/css/index.js

@@ -1,4 +1,5 @@
 import { css } from 'styled-components';
+import { gradientColors } from '@sphereon/ui-components.core';
 import { fontStyle } from '../typography';
 export const SSITextH1Css = css `
   font-family: ${fontStyle.h1Regular.fontFamily};
@@ -7,6 +8,13 @@ export const SSITextH1Css = css `
   line-height: ${fontStyle.h1Regular.lineHeight}px;
   height: auto;
 `;
+export const SSITextH1SemiBoldCss = css `
+  font-family: ${fontStyle.h1SemiBold.fontFamily};
+  font-size: ${fontStyle.h1SemiBold.fontSize}px;
+  font-weight: ${fontStyle.h1SemiBold.fontWeight};
+  line-height: ${fontStyle.h1SemiBold.lineHeight}px;
+  height: auto;
+`;
 export const SSITextH2Css = css `
   font-family: ${fontStyle.h2Regular.fontFamily};
   font-size: ${fontStyle.h2Regular.fontSize}px;
@@ -56,3 +64,9 @@ export const SSITextH6Css = css `
   line-height: ${fontStyle.h6.lineHeight}px;
   height: auto;
 `;
+export const gradient100TextCss = css `
+  background: ${gradientColors['100']};
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+`;

package/dist/types/index.d.ts

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

package/dist/types/index.js

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

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

@@ -0,0 +1,9 @@
+export type ProgressIndicatorStep = {
+    title?: string;
+    description?: string;
+};
+export declare enum StepStatus {
+    CURRENT = "current",
+    COMPLETED = "completed",
+    NEXT = "next"
+}

package/dist/types/indicator/index.js

@@ -0,0 +1,6 @@
+export var StepStatus;
+(function (StepStatus) {
+    StepStatus["CURRENT"] = "current";
+    StepStatus["COMPLETED"] = "completed";
+    StepStatus["NEXT"] = "next";
+})(StepStatus || (StepStatus = {}));

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

@@ -13,4 +13,7 @@ export type ColumnHeader<T> = {
 export type TableCellOptions = {
     truncationLength?: number;
     enableHover?: boolean;
+    columnMinWidth?: number;
+    columnMaxWidth?: number;
+    columnWidth?: number;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.1.3-unstable.72+d6d452a",
+  "version": "0.1.3-unstable.83+3593537",
   "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.72+d6d452a",
+    "@sphereon/ui-components.core": "0.1.3-unstable.83+3593537",
     "@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": "d6d452a8673ad9986841af39898d3ed97350f9b6"
+  "gitHead": "35935374b31b9624299cc1fa155c468da3214fda"
 }