@sphereon/ui-components.ssi-react 0.1.3-unstable.99 → 0.2.1-next.105

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const IconButtonContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/styles/components/components/{SSIIconButton → IconButton}/index.js

@@ -1,7 +1,9 @@
 import styled from 'styled-components';
-export const SSIIconButtonContainerStyled = styled.div `
-  width: 32px;
-  aspect-ratio: 1;
+export const IconButtonContainerStyled = styled.div `
+  gap: 8px;
+  height: 32px;
+  min-width: 32px;
+  flex-direction: row;
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+export declare const InformationRequestViewContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InformationRequestViewContentContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InformationRequestViewHeaderContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InformationRequestViewPurposeContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InformationRequestViewTitleStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const InformationRequestViewParagraphStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const InformationRequestViewDescriptionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const InformationRequestViewSubSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const InformationRequestViewFormContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InformationRequestViewFormTitleStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const InformationRequestViewFormDetailsContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InformationRequestViewLogoContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InformationRequestViewRPCardContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InformationRequestViewCardTextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InformationRequestViewCardTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const InformationRequestViewCardSubtitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;

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

@@ -0,0 +1,86 @@
+import styled from 'styled-components';
+import { SSITextH1Styled, SSITextH2Styled, SSITextH3Styled, SSITextH4Styled } from '../../../fonts';
+export const InformationRequestViewContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  margin: 0 auto;
+  padding: 24px;
+`;
+export const InformationRequestViewContentContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 500px; /* FIXME */
+  margin-right: auto;
+`;
+export const InformationRequestViewHeaderContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+export const InformationRequestViewPurposeContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background-color: #fbfbfb;
+`;
+export const InformationRequestViewTitleStyled = styled(SSITextH1Styled) `
+  text-align: left;
+  font-weight: bold;
+`;
+export const InformationRequestViewParagraphStyled = styled(SSITextH2Styled) `
+  text-align: left;
+  font-weight: bold;
+`;
+export const InformationRequestViewDescriptionStyled = styled(SSITextH3Styled) `
+  text-align: left;
+  font-weight: normal;
+`;
+export const InformationRequestViewSubSectionStyled = styled(SSITextH3Styled) `
+  text-align: left;
+  font-weight: bold;
+`;
+export const InformationRequestViewFormContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background-color: #fbfbfb;
+`;
+export const InformationRequestViewFormTitleStyled = styled(SSITextH2Styled) `
+  text-align: left;
+`;
+export const InformationRequestViewFormDetailsContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+export const InformationRequestViewLogoContainerStyled = styled.div `
+  margin: 0 12px 0 9px;
+`;
+export const InformationRequestViewRPCardContainerStyled = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background-color: #ffffff;
+`;
+export const InformationRequestViewCardTextContainer = styled.div `
+  flex-grow: 1;
+`;
+export const InformationRequestViewCardTitle = styled(SSITextH4Styled) `
+  font-weight: bold;
+`;
+export const InformationRequestViewCardSubtitle = styled(SSITextH4Styled) `
+  font-weight: normal;
+  color: #555;
+`;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const JSONDataViewContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const JSONDataViewHeaderContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const JSONDataViewColumnHeaderCaptionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const JSONDataViewDataContainerCaptionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const JSONDataViewDataImageValueStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const JSONDataViewDataTextValueStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const JSONDataViewDataLabelStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

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,5 @@
+/// <reference types="react" />
+export declare const PassportPhotoControlContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PassportPhotoControlDragAndDropBoxContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PassportPhotoControlPassportPhotoContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PassportPhotoControlPassportPhotoImageStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const PrimaryButtonContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;

package/dist/styles/components/components/{SSIPrimaryButton → PrimaryButton}/index.js

@@ -1,13 +1,14 @@
 import styled from 'styled-components';
 import { SSIRoundedContainerStyled } from '../../containers';
 import { gradientColors } from '../../../colors';
-export const SSIPrimaryButtonContainerStyled = styled(SSIRoundedContainerStyled) `
+export const PrimaryButtonContainerStyled = styled(SSIRoundedContainerStyled) `
   background: ${gradientColors['100']};
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 8px;
-  padding: 9px 6px 9px 6px;
+  padding: 9px;
   cursor: pointer;
+  width: 180px;
 `;

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

@@ -1,8 +1,14 @@
-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>;
+/// <reference types="react" />
+export declare const ProgressStepIndicatorContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ProgressStepIndicatorContentGridContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ProgressStepIndicatorStepMarkerCellStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ProgressStepIndicatorStepTextCellStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ProgressStepIndicatorSpacerLineCellStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ProgressStepIndicatorTitleTextStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const ProgressStepIndicatorDescriptionTextStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const ProgressStepIndicatorOptionalTextStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ProgressStepIndicatorStepLineStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { backgroundColors, borderColors, elementColors, fontColors } from '@sphereon/ui-components.core';
 import { SSITextH1SemiBoldStyled, SSITextH3Styled } from '../../../fonts';
+import { SSITextH2Css } from '../../../css';
 export const ProgressStepIndicatorContainerStyled = styled.div `
   background-color: ${backgroundColors.primaryLight};
   border-radius: 24px;
@@ -10,6 +11,7 @@ export const ProgressStepIndicatorContainerStyled = styled.div `
   padding: 48px 24px;
   cursor: default;
   min-width: 325px;
+  height: fit-content;
 `;
 export const ProgressStepIndicatorContentGridContainerStyled = styled.div `
   display: grid;
@@ -35,11 +37,20 @@ export const ProgressStepIndicatorSpacerLineCellStyled = styled.div `
 `;
 export const ProgressStepIndicatorTitleTextStyled = styled(SSITextH1SemiBoldStyled) `
   word-break: break-word;
+
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
 `;
 export const ProgressStepIndicatorDescriptionTextStyled = styled(SSITextH3Styled) `
   word-break: break-word;
   color: ${fontColors.lightGrey};
 `;
+export const ProgressStepIndicatorOptionalTextStyled = styled.div `
+  ${SSITextH2Css};
+  line-height: unset;
+  font-style: italic;
+`;
 export const ProgressStepIndicatorStepLineStyled = styled.div `
   width: 4px;
   display: flex;

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

@@ -1,4 +1,9 @@
-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>;
+/// <reference types="react" />
+export declare const SSICheckboxContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const SSICheckboxUnselectedContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSICheckboxSelectedContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSICheckboxLabelContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;

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.d.ts

@@ -1,13 +1,28 @@
-export declare const SSICredentialCardViewContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSICredentialCardViewBackgroundImageStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSICredentialCardViewHeaderContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSICredentialCardViewHeaderLogoContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSICredentialCardViewHeaderTitleContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSICredentialCardViewContentMainContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSICredentialCardViewContentSubContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-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<"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>;
+/// <reference types="react" />
+export declare const SSICredentialCardViewContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const SSICredentialCardViewBackgroundImageStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const SSICredentialCardViewHeaderContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const SSICredentialCardViewHeaderLogoContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSICredentialCardViewHeaderTitleContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSICredentialCardViewContentMainContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSICredentialCardViewContentSubContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSICredentialCardViewContentIssueNameContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSICredentialCardViewContentPropertiesContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const SSICredentialCardViewFooterContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const SSICredentialCardViewCredentialTitleTextStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>, never>> & string;
+export declare const SSICredentialCardViewCredentialSubtitleTextStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>, never>> & string;
+export declare const SSICredentialCardViewStatusContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -1,2 +1,5 @@
-export declare const SSICredentialMiniCardViewContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSICredentialMiniCardViewBackgroundImageStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+/// <reference types="react" />
+export declare const SSICredentialMiniCardViewContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSICredentialMiniCardViewBackgroundImageStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;

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

@@ -1,3 +1,4 @@
-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>;
+/// <reference types="react" />
+export declare const SSIHoverTextTextHoverStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const SSIHoverTextContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSIHoverTextTextStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

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

@@ -1 +1,2 @@
-export declare const SSIProfileIconContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+/// <reference types="react" />
+export declare const SSIProfileIconContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -1,3 +1,8 @@
-export declare const SSIStatusLabelContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSIStatusLabelStatusCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSIStatusLabelBadgeContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+/// <reference types="react" />
+export declare const SSIStatusLabelContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const SSIStatusLabelStatusCaptionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>, never>> & string;
+export declare const SSIStatusLabelBadgeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;