@sphereon/ui-components.ssi-react 0.1.3-unstable.99 → 0.2.0

package/dist/index.d.ts

@@ -13,7 +13,7 @@ import SSIArrowDownIcon from './components/assets/icons/SSIArrowDownIcon';
 import SSITypeLabel from './components/labels/SSITypeLabel';
 import SSIIconButton from './components/buttons/SSIIconButton';
 import SSIPrimaryButton from './components/buttons/SSIPrimaryButton';
-import SSIDropDownList from './components/lists/SSIDropDownList';
+import DropDownList from './components/lists/DropDownList';
 import SSITableView from './components/views/SSITableView';
 import SSITableViewHeader from './components/views/SSITableView/SSITableViewHeader';
 import SSITabView from './components/views/SSITabView';
@@ -25,8 +25,24 @@ 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 DocumentIcon from './components/assets/icons/DocumentIcon';
+import CrossIcon from './components/assets/icons/CrossIcon';
+import ImageIcon from './components/assets/icons/ImageIcon';
+import FileSelection from './components/fields/FileSelection';
+import ComboBox from './components/fields/ComboBox';
+import DragAndDropBox from './components/fields/DragAndDropBox';
+import PersonPlaceholder from './components/assets/placeholders/PersonPlaceholder';
+import PassportPhotoControl, { passportPhotoControlTester } from './components/fields/JSONForms/PassportPhotoControl';
+import CredentialIssuanceWizardView from './components/views/CredentialIssuanceWizardView';
+import PaginationControls from './components/views/SSITableView/PaginationControls';
+import PaginationControlsProps from './components/views/SSITableView/PaginationControls';
+import CredentialViewItem from './components/views/CredentialViewItem';
+import JSONDataView from './components/views/JSONDataView';
+import TextInputField from './components/fields/TextInputField';
+import WarningImage from './components/assets/images/WarningImage';
 import { Row } from '@tanstack/react-table';
 export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
-export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, Row, };
+export * from './utils';
+export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage };

package/dist/index.js

@@ -12,7 +12,7 @@ import SSIArrowDownIcon from './components/assets/icons/SSIArrowDownIcon';
 import SSITypeLabel from './components/labels/SSITypeLabel';
 import SSIIconButton from './components/buttons/SSIIconButton';
 import SSIPrimaryButton from './components/buttons/SSIPrimaryButton';
-import SSIDropDownList from './components/lists/SSIDropDownList';
+import DropDownList from './components/lists/DropDownList';
 import SSITableView from './components/views/SSITableView';
 import SSITableViewHeader from './components/views/SSITableView/SSITableViewHeader';
 import SSITabView from './components/views/SSITabView';
@@ -24,7 +24,23 @@ 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 DocumentIcon from './components/assets/icons/DocumentIcon';
+import CrossIcon from './components/assets/icons/CrossIcon';
+import ImageIcon from './components/assets/icons/ImageIcon';
+import FileSelection from './components/fields/FileSelection';
+import ComboBox from './components/fields/ComboBox';
+import DragAndDropBox from './components/fields/DragAndDropBox';
+import PersonPlaceholder from './components/assets/placeholders/PersonPlaceholder';
+import PassportPhotoControl, { passportPhotoControlTester } from './components/fields/JSONForms/PassportPhotoControl';
+import CredentialIssuanceWizardView from './components/views/CredentialIssuanceWizardView';
+import PaginationControls from './components/views/SSITableView/PaginationControls';
+import PaginationControlsProps from './components/views/SSITableView/PaginationControls';
+import CredentialViewItem from './components/views/CredentialViewItem';
+import JSONDataView from './components/views/JSONDataView';
+import TextInputField from './components/fields/TextInputField';
+import WarningImage from './components/assets/images/WarningImage';
 export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
-export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, };
+export * from './utils';
+export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage };

package/dist/renders/jsonFormsRenders.d.ts

@@ -0,0 +1,2 @@
+import { JsonFormsRendererRegistryEntry } from '@jsonforms/core';
+export declare const jsonFormsMaterialRenderers: Array<JsonFormsRendererRegistryEntry>;

package/dist/renders/jsonFormsRenders.js

@@ -0,0 +1,6 @@
+import { materialRenderers } from '@jsonforms/material-renderers';
+import PassportPhotoControl, { passportPhotoControlTester } from '../components/fields/JSONForms/PassportPhotoControl';
+export const jsonFormsMaterialRenderers = [
+    ...materialRenderers,
+    { tester: passportPhotoControlTester, renderer: PassportPhotoControl },
+];

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

@@ -0,0 +1,9 @@
+export declare const CredentialIssuanceWizardViewContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewCredentialTypeContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewCredentialTypeTitleStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewFormContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewEvidenceContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewEvidenceContentContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewEvidenceTitleContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewEvidenceTitleOptionalStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewEvidenceFilesContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+import { backgroundColors, borderColors, SSIRoundedEdgesCss } from "@sphereon/ui-components.core";
+import { SSITextH1SemiBoldStyled, SSITextH2Styled } from "../../../fonts";
+export const CredentialIssuanceWizardViewContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 42px;
+  width: 560px;
+  height: fit-content;
+`;
+export const CredentialIssuanceWizardViewCredentialTypeContainerStyled = styled.div `
+  border: 1px solid ${borderColors.lightGrey};
+  ${SSIRoundedEdgesCss};
+  background-color: ${backgroundColors.primaryLight};
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  flex-grow: 1;
+`;
+export const CredentialIssuanceWizardViewCredentialTypeTitleStyled = styled(SSITextH1SemiBoldStyled) `
+  text-align: left;
+`;
+export const CredentialIssuanceWizardViewFormContainerStyled = styled.div `
+  flex-grow: 1;
+  border: 1px solid ${borderColors.lightGrey};
+  background-color: ${backgroundColors.primaryLight};
+  ${SSIRoundedEdgesCss};
+  padding: 24px;
+`;
+export const CredentialIssuanceWizardViewEvidenceContainerStyled = styled.div `
+  flex-grow: 1;
+  border: 1px solid ${borderColors.lightGrey};
+  background-color: ${backgroundColors.primaryLight};
+  ${SSIRoundedEdgesCss};
+  padding: 24px;
+`;
+export const CredentialIssuanceWizardViewEvidenceContentContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+`;
+export const CredentialIssuanceWizardViewEvidenceTitleContainerStyled = styled.div `
+  display: flex; 
+  flex-direction: row;
+  gap: 4px;
+`;
+export const CredentialIssuanceWizardViewEvidenceTitleOptionalStyled = styled(SSITextH2Styled) `
+  font-style: italic;
+`;
+export const CredentialIssuanceWizardViewEvidenceFilesContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;

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

@@ -0,0 +1,5 @@
+export declare const CredentialViewItemContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialViewItemDetailsContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialViewItemTitleCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialViewItemStatusContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialViewItemExpirationDateCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import { SSIFlexDirectionColumnViewStyled, SSIFlexDirectionRowViewStyled } from '../../containers';
+import { SSITextH3Styled, SSITextH5Styled } from '../../../fonts';
+export const CredentialViewItemContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  padding: 18px 24px;
+  gap: 8px;
+  align-items: center;
+`;
+export const CredentialViewItemDetailsContainerStyled = styled(SSIFlexDirectionColumnViewStyled) `
+  gap: 6px;
+  min-width: 245px;
+`;
+export const CredentialViewItemTitleCaptionStyled = styled(SSITextH3Styled) `
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-all;
+  text-overflow: ellipsis;
+`;
+export const CredentialViewItemStatusContainerStyled = styled.div `
+  margin-top: 3px;
+  margin-left: auto;
+  padding-left: 9px;
+`;
+export const CredentialViewItemExpirationDateCaptionStyled = styled(SSITextH5Styled) `
+  margin-left: auto;
+`;

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

@@ -0,0 +1,4 @@
+export declare const DragAndDropBoxContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DragAndDropBoxHiddenInputStyled: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const DragAndDropBoxCaptionContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DragAndDropBoxDescriptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,25 @@
+import { backgroundColors, borderColors, fontColors } from '@sphereon/ui-components.core';
+import styled from 'styled-components';
+import { SSITextH7RegularStyled } from '../../../fonts';
+export const DragAndDropBoxContainerStyled = styled.div `
+  background-color: ${backgroundColors.lightGrey};
+  flex-grow: 1;
+  height: 138px;
+  cursor: pointer;
+  border: 1px dashed ${borderColors.lightGrey};
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const DragAndDropBoxHiddenInputStyled = styled.input `
+  display: none;
+`;
+export const DragAndDropBoxCaptionContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+export const DragAndDropBoxDescriptionStyled = styled(SSITextH7RegularStyled) `
+  color: ${fontColors.lightGrey};
+`;

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

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

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

@@ -0,0 +1,7 @@
+export declare const JSONDataViewContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const JSONDataViewHeaderContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const JSONDataViewColumnHeaderCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const JSONDataViewDataContainerCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const JSONDataViewDataImageValueStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const JSONDataViewDataTextValueStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const JSONDataViewDataLabelStyled: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+import { backgroundColors, borderColors, fontColors, SSIRoundedEdgesCss } from '@sphereon/ui-components.core';
+import { SSITextH2SemiBoldStyledCss, SSITextH5Css, SSITextH7SemiBoldCss } from '../../../css';
+export const JSONDataViewContainerStyled = styled.div `
+  ${SSIRoundedEdgesCss};
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: ${backgroundColors.primaryLight};
+  border: 1px solid ${borderColors.light};
+`;
+export const JSONDataViewHeaderContainerStyled = styled.div `
+  padding: 12px 24px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 2px solid ${borderColors.light};
+`;
+export const JSONDataViewColumnHeaderCaptionStyled = styled.div `
+  display: flex;
+  flex-grow: 1;
+  ${SSITextH2SemiBoldStyledCss};
+  color: ${fontColors.lightGrey};
+  max-width: 200px;
+`;
+export const JSONDataViewDataContainerCaptionStyled = styled.div `
+  padding-right: 24px;
+  padding-bottom: 24px;
+  padding-left: 12px;
+  display: flex;
+  flex-direction: row;
+`;
+export const JSONDataViewDataImageValueStyled = styled.div `
+  background-size: cover;
+  height: 130px;
+  border-radius: 10px;
+`;
+export const JSONDataViewDataTextValueStyled = styled.span `
+  color: ${fontColors.dark};
+  ${SSITextH7SemiBoldCss}
+`;
+export const JSONDataViewDataLabelStyled = styled.span `
+  color: ${fontColors.dark};
+  ${SSITextH5Css};
+  width: 212px;
+  display: inline-block;
+`;

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.js

@@ -10,6 +10,7 @@ export const ProgressStepIndicatorContainerStyled = styled.div `
   padding: 48px 24px;
   cursor: default;
   min-width: 325px;
+  height: fit-content;
 `;
 export const ProgressStepIndicatorContentGridContainerStyled = styled.div `
   display: grid;

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

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { SSITextH4LightStyled } from '../../../fonts';
+import { SSITextH2Styled } from '../../../fonts';
 import { SSIFlexDirectionRowViewStyled } from '../../containers';
 export const SSICheckboxContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
   align-items: center;
@@ -19,7 +19,7 @@ export const SSICheckboxSelectedContainerStyled = styled.div `
   align-items: center;
   justify-content: center;
 `;
-export const SSICheckboxLabelContainerStyled = styled(SSITextH4LightStyled) `
+export const SSICheckboxLabelContainerStyled = styled(SSITextH2Styled) `
   display: flex;
   flex-wrap: wrap;
 `;

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

@@ -7,6 +7,7 @@ export const SSICredentialCardViewContainerStyled = styled(SSIRoundedContainerSt
   display: flex;
   flex-direction: column;
   user-select: none;
+  flex-shrink: 0;
 `;
 export const SSICredentialCardViewBackgroundImageStyled = styled(SSIFlexDirectionColumnViewStyled) `
   flex-grow: 1;

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/SSIStatusLabel/index.js

@@ -5,6 +5,7 @@ export const SSIStatusLabelContainerStyled = styled(SSIFlexDirectionRowViewStyle
   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%;
+  flex-grow: 1;
 `;

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

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

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

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { SSITextH3Styled } from '../../../fonts';
 export const SSITabViewHeaderContainerStyled = styled.div `
   display: flex;
   flex-direction: row;
@@ -7,4 +8,8 @@ export const SSITabViewHeaderContainerStyled = styled.div `
 `;
 export const SSITabViewHeaderTitleContainerStyled = styled.div `
   cursor: pointer;
+  display: flex;
+`;
+export const SSITabViewHeaderTitleCaptionStyled = styled(SSITextH3Styled) `
+  margin-top: auto;
 `;

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