@sphereon/ui-components.ssi-react 0.1.3-unstable.15 → 0.1.3-unstable.150

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

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { SSIFlexDirectionRowViewStyled } from '../../containers';
+import { backgroundColors } from '@sphereon/ui-components.core';
+export const DropDownListContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  position: relative;
+  display: inline-block;
+  text-align: left;
+  align-items: center;
+  gap: 2px;
+`;
+export const DropDownListButtonStyled = styled.div `
+  display: inline-block !important;
+`;
+export const DropDownContainerStyled = styled.div `
+  position: absolute;
+  top: 100%;
+  right: 0;
+  width: 250px;
+  background-color: ${backgroundColors.primaryLight};
+  z-index: 1000;
+`;

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

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

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

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { SSIFlexDirectionRowViewStyled } from '../../containers';
+import { SSITextH2Styled } from '../../../fonts';
+import { backgroundColors } from '@sphereon/ui-components.core';
+export const DropDownListItemContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  flex-direction: row;
+  align-items: center;
+  background-color: ${backgroundColors.primaryLight};
+  padding: 10px 16px;
+`;
+export const DropDownListItemCaptionContainerStyled = styled(SSITextH2Styled) `
+  flex: 1;
+  margin-right: 8px;
+`;
+export const DropDownListItemIconContainerStyled = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 4px;
+  margin-right: 12px;
+`;

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

@@ -0,0 +1,10 @@
+export declare const FileSelectionFieldContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldContentContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldRemoveContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldRemoveButtonStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldRemoveButtonCircleIconStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldIconContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldFileDataContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldFileNameCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldFileSizeCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldPermissionSelectionContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+import { borderColors, fontColors } from '@sphereon/ui-components.core';
+import { SSITextH2SemiBoldStyled, SSITextH7RegularStyled } from '../../../fonts';
+export const FileSelectionFieldContainerStyled = styled.div `
+  display: flex;
+  flex-grow: 1;
+  flex-direction: row;
+  border-radius: 6px;
+  border: 1px solid ${borderColors.lightGrey};
+  overflow: hidden;
+`;
+export const FileSelectionFieldContentContainerStyled = styled.div `
+  display: flex;
+  flex-direction: row;
+  padding: 5px 0 5px 8px;
+`;
+export const FileSelectionFieldRemoveContainerStyled = styled.div `
+  margin-left: auto;
+  border-left: 1px solid ${borderColors.lightGrey};
+  display: flex;
+  align-items: center;
+`;
+export const FileSelectionFieldRemoveButtonStyled = styled.div `
+  width: 42px;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`;
+export const FileSelectionFieldRemoveButtonCircleIconStyled = styled.div `
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${borderColors.darkGrey};
+  border-radius: 50%;
+`;
+export const FileSelectionFieldIconContainerStyled = styled.div `
+  margin-right: 12px;
+  width: 42px;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const FileSelectionFieldFileDataContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+`;
+export const FileSelectionFieldFileNameCaptionStyled = styled(SSITextH2SemiBoldStyled) `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 350px;
+`;
+export const FileSelectionFieldFileSizeCaptionStyled = styled(SSITextH7RegularStyled) `
+  color: ${fontColors.lightGrey};
+`;
+export const FileSelectionFieldPermissionSelectionContainerStyled = styled.div `
+  width: 152px;
+  margin-left: auto;
+  margin-right: 5px;
+`;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const PaginationContainerStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const GoToInputStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const GoToInputContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PaginationStyled: import("@emotion/styled").StyledComponent<import("@mui/material").PaginationProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -0,0 +1,71 @@
+import { styled } from '@mui/material/styles';
+import { Pagination, paginationItemClasses } from '@mui/material';
+import { backgroundColors, borderColors, elementColors, fontColors } from '@sphereon/ui-components.core';
+export const PaginationContainerStyled = styled('div') `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 32px;
+  margin-top: 16px;
+`;
+export const GoToInputStyled = styled('input') `
+  height: 28px;
+  width: 44px;
+  background-color: ${backgroundColors.primaryLight};
+  outline: none;
+  color: ${fontColors.dark};
+  font-weight: 500;
+  font-size: 14px;
+  border-radius: 6px;
+  border: 1px ${borderColors.lightGrey} solid;
+  text-align: center;
+  &:focus {
+    border: 1px ${elementColors.purple} solid;
+  }
+`;
+export const GoToInputContainer = styled('div') `
+  display: inline-flex;
+  gap: 10px;
+  align-items: center;
+  font-weight: 500;
+  font-size: 14px;
+`;
+export const PaginationStyled = styled(Pagination) `
+  & .${paginationItemClasses.root} {
+    color: ${fontColors.dark};
+    background-color: ${backgroundColors.primaryLight};
+    border: 1px ${borderColors.lightGrey} solid;
+    border-radius: 6px;
+    font-size: 14px;
+    min-width: 32px;
+    min-height: 32px;
+    width: 32px;
+    height: 32px;
+    &:hover {
+      background-color: ${backgroundColors.primaryLight};
+    },
+  }
+
+  & .${paginationItemClasses.selected} {
+    background-color: transparent !important;
+    border: 1px ${elementColors.purple} solid;
+    color: ${elementColors.purple};
+  },
+
+  & .${paginationItemClasses.previousNext} {
+    color: ${borderColors.lightGrey};
+  },
+
+  & .${paginationItemClasses.disabled} {
+    color: ${borderColors.lightGrey};
+    background-color: ${backgroundColors.lightGrey};
+  },
+
+  & .${paginationItemClasses.ellipsis} {
+    font-size: 20px;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`;

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

@@ -0,0 +1,4 @@
+export declare const PassportPhotoControlContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PassportPhotoControlDragAndDropBoxContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PassportPhotoControlPassportPhotoContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PassportPhotoControlPassportPhotoImageStyled: import("styled-components").StyledComponent<"img", any, {}, never>;

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

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { backgroundColors, borderColors } from '@sphereon/ui-components.core';
+export const PassportPhotoControlContainerStyled = styled.div `
+  display: flex; 
+  flex-direction: column; 
+  gap: 12px;
+`;
+export const PassportPhotoControlDragAndDropBoxContainerStyled = styled.div `
+  display: flex; 
+  flex-direction: row; 
+  gap: 10px;
+`;
+export const PassportPhotoControlPassportPhotoContainerStyled = styled.div `
+  height: 138px;
+  width: 112px;
+  background-color: ${backgroundColors.lightGrey};
+  overflow: hidden;
+  border-radius: 4px;
+  border: 1px solid ${borderColors.lightGrey};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const PassportPhotoControlPassportPhotoImageStyled = styled.img `
+  width: 100%;
+  height: auto
+`;

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,49 @@
+import styled from 'styled-components';
+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;
+  border: 1px solid ${borderColors.light};
+  display: flex;
+  overflow: hidden;
+  padding: 48px 24px;
+  cursor: default;
+  min-width: 325px;
+  height: fit-content;
+`;
+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: ${elementColors.lightGrey};
+`;

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

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

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

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

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

@@ -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/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/SSIHoverText/index.d.ts

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

package/dist/styles/components/components/{SSIText → SSIHoverText}/index.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-export const SSITruncatedFullTextStyled = styled.span `
+export const SSIHoverTextTextHoverStyled = styled.span `
   display: none;
   position: absolute;
   top: 100%;
@@ -9,13 +9,13 @@ export const SSITruncatedFullTextStyled = styled.span `
   padding: 5px;
   z-index: 1;
 `;
-export const SSITruncatedContainerStyled = styled.div `
+export const SSIHoverTextContainerStyled = styled.div `
   position: relative;
 
-  &:hover ${SSITruncatedFullTextStyled} {
+  &:hover ${SSIHoverTextTextHoverStyled} {
     display: block;
   }
 `;
-export const SSITruncatedTextStyled = styled.span `
-  display: 'inline';
+export const SSIHoverTextTextStyled = styled.span `
+  display: inline;
 `;

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

@@ -1,7 +1,9 @@
 import styled from 'styled-components';
 export const SSIIconButtonContainerStyled = styled.div `
-  width: 32px;
-  aspect-ratio: 1;
+  gap: 8px;
+  height: 32px;
+  min-width: 32px;
+  flex-direction: row;
   display: flex;
   justify-content: center;
   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.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 { SSITextH3Styled } from '../../../fonts';
+import { gradient100TextCss } from '../../../css';
 export const SSISecondaryButtonContainerStyled = styled(SSIRoundedContainerStyled) `
   position: relative;
   display: flex;
@@ -21,17 +21,12 @@ export const SSISecondaryButtonContainerStyled = styled(SSIRoundedContainerStyle
     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);
+    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;
+  ${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/SSIStatusLabel/index.js

@@ -1,9 +1,11 @@
 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;
+  width: fit-content;
+  height: fit-content;
 `;
 export const SSIStatusLabelStatusCaptionStyled = styled(SSITextH5LightStyled) `
   margin-left: 7px;

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

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

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

@@ -1,7 +1,11 @@
 export declare const SSITableViewContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITableViewLabelCellStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITableViewTableContainerStyled: import("styled-components").StyledComponent<"table", any, {}, never>;
-export declare const SSITableViewRowContainerStyled: import("styled-components").StyledComponent<"tr", any, {}, never>;
+export declare const SSITableViewHeaderRowContainerStyled: import("styled-components").StyledComponent<"tr", any, {}, never>;
+export declare const SSITableViewRowContainerStyled: import("styled-components").StyledComponent<"tr", any, {
+    enableHover?: boolean | undefined;
+}, never>;
 export declare const SSITableViewCellContainerStyled: import("styled-components").StyledComponent<"td", any, {}, never>;
 export declare const SSITableViewHeaderCellContainerStyled: import("styled-components").StyledComponent<"th", any, {}, never>;
 export declare const SSITableViewResultCountCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableViewRowSelectionCheckboxContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { backgroundColors, borderColors, fontColors } from '@sphereon/ui-components.core';
 import { SSITextH2Css, SSITextH3Css } from '../../../css';
 export const SSITableViewContainerStyled = styled.div `
@@ -17,15 +17,31 @@ export const SSITableViewTableContainerStyled = styled.table `
   border-collapse: collapse;
   background-color: ${backgroundColors.lightGrey};
 `;
-export const SSITableViewRowContainerStyled = styled.tr `
+export const SSITableViewHeaderRowContainerStyled = styled.tr `
   border-bottom: 1px solid ${borderColors.lightGrey};
+  background-color: ${backgroundColors.primaryLight};
+`;
+export const SSITableViewRowContainerStyled = styled.tr `
+  background-color: ${backgroundColors.primaryLight};
+
+  &:not(:last-child) {
+    border-bottom: 1px solid ${borderColors.lightGrey};
+  }
+  
+  ${props => props.enableHover &&
+    css `
+        &:hover {
+          background-color: #ececec; // TODO
+        }
+      `}
 `;
 export const SSITableViewCellContainerStyled = styled.td `
   ${SSITextH3Css};
   color: ${fontColors.dark};
-  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,8 +50,14 @@ 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};
   margin-left: 24px;
 `;
+export const TableViewRowSelectionCheckboxContainerStyled = styled.div `
+  width: 20px;
+  height: 20px;
+`;

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

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

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

@@ -27,3 +27,11 @@ export const SSITableViewHeaderShowOptionContainerStyled = styled.div `
   text-align: left;
   align-items: center;
 `;
+export const TableViewHeaderStaticActionsContainerStyled = styled.div `
+  height: 48px;
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 50px;
+`;

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

@@ -0,0 +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<"div", any, {}, never>;

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

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import { alertColors } from '@sphereon/ui-components.core';
+import { SSIFlexDirectionRowViewStyled, SSIRoundedContainerStyled } from '../../containers';
+import { SSITextH4Styled } from '../../../fonts';
+export const SSIToastContainerStyled = styled(SSIRoundedContainerStyled) `
+  //TODO we need better width, use a max width and use content to scale
+  // 96.8%;
+  width: 326px;
+  background-color: ${alertColors.secondaryLight};
+  border-radius: 8px;
+  justify-content: center;
+  padding: 18px 18px 15px 18px;
+`;
+export const SSIToastBadgeContainerStyled = styled.div `
+  margin-right: 10px;
+  justify-content: center;
+`;
+export const SSIToastTitleContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  margin-bottom: 12px;
+  width: 100%;
+`;
+export const SSIToastMessageTextStyled = styled(SSITextH4Styled) `
+  width: 100%;
+`;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SSIToastContainerContainerStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-toastify").ToastContainerProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;