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

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

@@ -1 +1,2 @@
-export declare const SSITabViewContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+/// <reference types="react" />
+export declare const SSITabViewContainerStyled: 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/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,6 @@
-export declare const SSITabViewHeaderContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITabViewHeaderTitleContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+/// <reference types="react" />
+export declare const SSITabViewHeaderContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSITabViewHeaderTitleContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSITabViewHeaderTitleCaptionStyled: 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/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,12 @@
-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 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>;
+/// <reference types="react" />
+export declare const SSITableViewContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSITableViewLabelCellStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSITableViewTableContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>> & string;
+export declare const SSITableViewHeaderRowContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never>> & string;
+export declare const SSITableViewRowContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {
+    enableHover?: boolean | undefined;
+}>> & string;
+export declare const SSITableViewCellContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
+export declare const SSITableViewHeaderCellContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, never>> & string;
+export declare const SSITableViewResultCountCaptionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TableViewRowSelectionCheckboxContainerStyled: 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/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,13 +17,27 @@ 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
@@ -43,3 +57,7 @@ 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

@@ -1,5 +1,11 @@
-export declare const SSITableViewHeaderContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITableViewHeaderContentContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITableViewHeaderActionsContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITableViewHeaderFilterContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITableViewHeaderShowOptionContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+/// <reference types="react" />
+export declare const SSITableViewHeaderContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSITableViewHeaderContentContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSITableViewHeaderActionsContainerStyled: 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 SSITableViewHeaderFilterContainerStyled: 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 SSITableViewHeaderShowOptionContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TableViewHeaderStaticActionsContainerStyled: 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/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

@@ -1,4 +1,11 @@
-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>;
+/// <reference types="react" />
+export declare const SSIToastContainerStyled: 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 SSIToastBadgeContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSIToastTitleContainerStyled: 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 SSIToastMessageTextStyled: 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/SSIToast/index.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { alertColors } from '@sphereon/ui-components.core';
 import { SSIFlexDirectionRowViewStyled, SSIRoundedContainerStyled } from '../../containers';
-import { SSITextH4DarkStyled } from '../../../fonts';
+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%;
@@ -19,6 +19,6 @@ export const SSIToastTitleContainerStyled = styled(SSIFlexDirectionRowViewStyled
   margin-bottom: 12px;
   width: 100%;
 `;
-export const SSIToastMessageTextStyled = styled(SSITextH4DarkStyled) `
+export const SSIToastMessageTextStyled = styled(SSITextH4Styled) `
   width: 100%;
 `;

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

@@ -1,2 +1,4 @@
 /// <reference types="react" />
-export declare const SSIToastContainerContainerStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-toastify").ToastContainerProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const SSIToastContainerContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react-toastify").ToastContainerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("react-toastify").ToastContainerProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;

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

@@ -1 +1,4 @@
-export declare const SSITypeLabelContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+/// <reference types="react" />
+export declare const SSITypeLabelContainerStyled: 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/SecondaryButton/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const SecondaryButtonContainerStyled: 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 SecondaryButtonCaptionStyled: 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/{SSISecondaryButton → SecondaryButton}/index.js

@@ -2,15 +2,16 @@ import styled from 'styled-components';
 import { SSIRoundedContainerStyled } from '../../containers';
 import { SSITextH3Styled } from '../../../fonts';
 import { gradient100TextCss } from '../../../css';
-export const SSISecondaryButtonContainerStyled = styled(SSIRoundedContainerStyled) `
+export const SecondaryButtonContainerStyled = styled(SSIRoundedContainerStyled) `
   position: relative;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 8px;
-  padding: 9px 6px 9px 6px;
+  padding: 9px;
   cursor: pointer;
+  width: 180px;
 
   &::before {
     content: '';
@@ -27,6 +28,7 @@ export const SSISecondaryButtonContainerStyled = styled(SSIRoundedContainerStyle
     mask-composite: exclude;
   }
 `;
-export const SSISecondaryButtonCaptionStyled = styled(SSITextH3Styled) `
+export const SecondaryButtonCaptionStyled = styled(SSITextH3Styled) `
+  // FIXME H3 vs H2 mobile
   ${gradient100TextCss}
 `;

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

@@ -1,4 +1,5 @@
-export declare const StepMarkerActiveContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StepMarkerActiveOuterContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StepMarkerGradientContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StepMarkerInactiveContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+/// <reference types="react" />
+export declare const StepMarkerActiveContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StepMarkerActiveOuterContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StepMarkerGradientContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StepMarkerInactiveContainerStyled: 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/TextInputField/index.d.ts

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

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

@@ -0,0 +1,27 @@
+import { borderColors, fontColors } from '@sphereon/ui-components.core';
+import styled from 'styled-components';
+import { SSITextH2Css } from '../../../css';
+export const TextFieldInputContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+`;
+export const TextFieldInputInputStyled = styled.input `
+  ${SSITextH2Css};
+  color: ${fontColors.dark};
+  display: flex;
+  padding: 12px 16px;
+  align-items: center;
+  border-radius: 4px;
+  border: 1px solid ${borderColors.lightGrey};
+  outline: none;
+  background-color: unset;
+  font-family: Poppins, serif;
+
+  &:focus {
+    border-color: ${borderColors.purple};
+  }
+
+  &:hover {
+    border-color: ${borderColors.purple};
+  }
+`;

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

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

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

@@ -0,0 +1,4 @@
+import styled from 'styled-components';
+export const ButtonFlexRowStyled = styled('button') `
+  flex-direction: row;
+`;

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

@@ -1,11 +1,12 @@
-export * from './RowActionMenuButton';
+export * from './buttons';
+export * from './DropDownListItem';
 export * from './SSICredentialCardView';
 export * from './SSICredentialMiniCardView';
 export * from './SSIStatusLabel';
-export * from './SSIPrimaryButton';
-export * from './SSISecondaryButton';
-export * from './SSIIconButton';
-export * from './SSIDropDownList';
+export * from './PrimaryButton';
+export * from './SecondaryButton';
+export * from './IconButton';
+export * from './DropDownList';
 export * from './SSITypeLabel';
 export * from './SSITableViewHeader';
 export * from './SSITableView';
@@ -18,3 +19,12 @@ export * from './SSIHoverText';
 export * from './SSICheckbox';
 export * from './ProgressStepIndicator';
 export * from './StepMarker';
+export * from './FileSelectionField';
+export * from './DragAndDropBox';
+export * from './PassportPhotoControl';
+export * from './CredentialIssuanceWizardView';
+export * from './Pagination';
+export * from './CredentialViewItem';
+export * from './JSONDataView';
+export * from './TextInputField';
+export * from './InformationRequestView';

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

@@ -1,11 +1,12 @@
-export * from './RowActionMenuButton';
+export * from './buttons';
+export * from './DropDownListItem';
 export * from './SSICredentialCardView';
 export * from './SSICredentialMiniCardView';
 export * from './SSIStatusLabel';
-export * from './SSIPrimaryButton';
-export * from './SSISecondaryButton';
-export * from './SSIIconButton';
-export * from './SSIDropDownList';
+export * from './PrimaryButton';
+export * from './SecondaryButton';
+export * from './IconButton';
+export * from './DropDownList';
 export * from './SSITypeLabel';
 export * from './SSITableViewHeader';
 export * from './SSITableView';
@@ -18,3 +19,12 @@ export * from './SSIHoverText';
 export * from './SSICheckbox';
 export * from './ProgressStepIndicator';
 export * from './StepMarker';
+export * from './FileSelectionField';
+export * from './DragAndDropBox';
+export * from './PassportPhotoControl';
+export * from './CredentialIssuanceWizardView';
+export * from './Pagination';
+export * from './CredentialViewItem';
+export * from './JSONDataView';
+export * from './TextInputField';
+export * from './InformationRequestView';

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

@@ -1,4 +1,7 @@
-export declare const SSIFlexDirectionRowViewStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSIFlexDirectionColumnViewStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSIAlphaContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSIRoundedContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+/// <reference types="react" />
+export declare const SSIFlexDirectionRowViewStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSIFlexDirectionColumnViewStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSIAlphaContainerStyled: 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 SSIRoundedContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -1,10 +1,12 @@
-export declare const SSITextH1Css: import("styled-components").FlattenSimpleInterpolation;
-export declare const SSITextH1SemiBoldCss: import("styled-components").FlattenSimpleInterpolation;
-export declare const SSITextH2Css: import("styled-components").FlattenSimpleInterpolation;
-export declare const SSITextH2SemiBoldStyledCss: import("styled-components").FlattenSimpleInterpolation;
-export declare const SSITextH3Css: import("styled-components").FlattenSimpleInterpolation;
-export declare const SSITextH4Css: import("styled-components").FlattenSimpleInterpolation;
-export declare const SSITextH4SemiBoldCss: import("styled-components").FlattenSimpleInterpolation;
-export declare const SSITextH5Css: import("styled-components").FlattenSimpleInterpolation;
-export declare const SSITextH6Css: import("styled-components").FlattenSimpleInterpolation;
-export declare const gradient100TextCss: import("styled-components").FlattenSimpleInterpolation;
+export declare const SSITextH1Css: import("styled-components").RuleSet<object>;
+export declare const SSITextH1SemiBoldCss: import("styled-components").RuleSet<object>;
+export declare const SSITextH2Css: import("styled-components").RuleSet<object>;
+export declare const SSITextH2SemiBoldStyledCss: import("styled-components").RuleSet<object>;
+export declare const SSITextH3Css: import("styled-components").RuleSet<object>;
+export declare const SSITextH4Css: import("styled-components").RuleSet<object>;
+export declare const SSITextH4SemiBoldCss: import("styled-components").RuleSet<object>;
+export declare const SSITextH5Css: import("styled-components").RuleSet<object>;
+export declare const SSITextH6Css: import("styled-components").RuleSet<object>;
+export declare const SSITextH7RegularCss: import("styled-components").RuleSet<object>;
+export declare const SSITextH7SemiBoldCss: import("styled-components").RuleSet<object>;
+export declare const gradient100TextCss: import("styled-components").RuleSet<object>;

package/dist/styles/css/index.js

@@ -64,6 +64,20 @@ export const SSITextH6Css = css `
   line-height: ${fontStyle.h6.lineHeight}px;
   height: auto;
 `;
+export const SSITextH7RegularCss = css `
+  font-family: ${fontStyle.h7Regular.fontFamily};
+  font-size: ${fontStyle.h7Regular.fontSize}px;
+  font-weight: ${fontStyle.h7Regular.fontWeight};
+  line-height: ${fontStyle.h7Regular.lineHeight}px;
+  height: auto;
+`;
+export const SSITextH7SemiBoldCss = css `
+  font-family: ${fontStyle.h7SemiBold.fontFamily};
+  font-size: ${fontStyle.h7SemiBold.fontSize}px;
+  font-weight: ${fontStyle.h7SemiBold.fontWeight};
+  line-height: ${fontStyle.h7SemiBold.lineHeight}px;
+  height: auto;
+`;
 export const gradient100TextCss = css `
   background: ${gradientColors['100']};
   background-clip: text;

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

@@ -1,16 +1,29 @@
-export declare const SSITextH1Styled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITextH1SemiBoldStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITextH1SemiBoldLightStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITextH2Styled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITextH2SemiBoldStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITextH3Styled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITextH3LightStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITextH4Styled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITextH4SemiBoldStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITextH4LightStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITextH4DarkStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITextH4SemiBoldLightStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITextH5Styled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITextH5LightStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITextH6Styled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSITextH6LightStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+/// <reference types="react" />
+export declare const SSITextH1Styled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSITextH1SemiBoldStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSITextH1SemiBoldLightStyled: 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 SSITextH2Styled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSITextH2SemiBoldStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSITextH3Styled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSITextH3LightStyled: 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 SSITextH4Styled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSITextH4SemiBoldStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSITextH4LightStyled: 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 SSITextH4SemiBoldLightStyled: 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 SSITextH5Styled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSITextH5LightStyled: 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 SSITextH6Styled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SSITextH6LightStyled: 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 SSITextH7RegularStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/styles/fonts/index.js

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

package/dist/styles/typography.js

@@ -72,6 +72,12 @@ export const fontStyle = {
         fontWeight: fontWeight[400],
         lineHeight: lineHeight[100],
     },
+    h7Regular: {
+        fontFamily: 'Poppins',
+        fontSize: fontSize[400],
+        fontWeight: fontWeight[400],
+        lineHeight: lineHeight[400],
+    },
     h7SemiBold: {
         fontFamily: 'Poppins',
         fontSize: fontSize[400],

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

@@ -1,7 +1,8 @@
 import { ButtonIcon } from '@sphereon/ui-components.core';
 export type Button = {
     caption: string;
-    onClick: () => Promise<void>;
+    onClick: (opts?: any) => Promise<void>;
     icon?: ButtonIcon;
+    fontColor?: string;
     disabled?: boolean;
 };