@sphereon/ui-components.ssi-react 0.4.1-next.10 → 0.4.1-next.106

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RoleType } from '@sphereon/ui-components.core';
 import RoleIconView from '../RoleIconView';
-import ManIcon from '../../assets/icons/ManIcon';
-import CapitolIcon from '../../assets/icons/CapitolIcon';
-import StoreIcon from '../../assets/icons/StoreIcon';
-import LaptopIcon from '../../assets/icons/LaptopIcon';
+import ManIcon from '../../assets/icons/Man';
+import CapitolIcon from '../../assets/icons/Capitol';
+import StoreIcon from '../../assets/icons/Store';
+import LaptopIcon from '../../assets/icons/Laptop';
 const RoleViewItem = (props) => {
     const { role, accountName } = props;
     return (_jsxs("div", { className: `
@@ -13,35 +13,35 @@ const RoleViewItem = (props) => {
             flex-row 
             px-[var(--spacing-1_5)] 
             py-[var(--spacing-1)]  
-            gap-[var(--spacing-1_5)] 
+            gap-[var(--spacing-2)] 
         `, children: [getRoleIconElement(role), _jsxs("div", { className: `
                 flex 
                 flex-col 
                 flex-grow 
                 gap-[var(--spacing-0_5)] 
-                items-start
-            `, children: [_jsx("div", { className: `
-                    font-1 
-                    text-left 
-                    pr-[var(--spacing-4)] 
-                    break-words 
-                    text-[var(--color-grey-600)]
-                `, children: accountName }), _jsx("div", { className: `
+                ${accountName ? 'items-start' : 'items-start justify-center'}
+            `, children: [accountName && (_jsx("div", { className: `
+                        font-1 
+                        text-left 
+                        pr-[var(--spacing-4)] 
+                        break-words 
+                        text-[var(--color-grey-600)]
+                    `, children: accountName })), _jsx("div", { className: `
                     font-2 
-                    mt-auto 
+                    ${accountName ? 'mt-auto' : ''}
                     text-[var(--color-grey-900)]
                 `, children: formatRole(role) })] })] }));
 };
 const getRoleIconElement = (role) => {
     switch (role) {
         case RoleType.HOLDER:
-            return _jsx(RoleIconView, { icon: _jsx(ManIcon, { color: 'var(--color-grey-50)' }), backgroundColor: 'var(--color-selenas-500)' });
+            return _jsx(RoleIconView, { icon: _jsx(ManIcon, { color: 'var(--color-grey-50)' }), backgroundColor: 'var(--color-holder)' });
         case RoleType.ISSUER:
-            return _jsx(RoleIconView, { icon: _jsx(CapitolIcon, { color: 'var(--color-grey-50)' }), backgroundColor: 'var(--color-pending-500)' });
+            return _jsx(RoleIconView, { icon: _jsx(CapitolIcon, { color: 'var(--color-grey-50)' }), backgroundColor: 'var(--color-issuer)' });
         case RoleType.RELYING_PARTY:
-            return _jsx(RoleIconView, { icon: _jsx(StoreIcon, { color: 'var(--color-grey-50)' }), backgroundColor: 'var(--color-warning-500)' });
+            return _jsx(RoleIconView, { icon: _jsx(StoreIcon, { color: 'var(--color-grey-50)' }), backgroundColor: 'var(--color-relying-party)' });
         case RoleType.ADMIN:
-            return _jsx(RoleIconView, { icon: _jsx(LaptopIcon, { color: 'var(--color-grey-50)' }), backgroundColor: 'var(--color-magenta-500)' });
+            return _jsx(RoleIconView, { icon: _jsx(LaptopIcon, { color: 'var(--color-grey-50)' }), backgroundColor: 'var(--color-admin)' });
         default:
             return _jsx("div", {});
     }

package/dist/components/views/SSITabView/SSITabViewHeader/index.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import { FC } from 'react';
 import { TabNavigationState } from '@sphereon/ui-components.core';
 type Props = {
     navigationState: TabNavigationState;
-    onIndexChange: (index: number) => void;
+    onRouteChange: (key: string) => void;
 };
-declare const SSITabViewHeader: React.FC<Props>;
+declare const SSITabViewHeader: FC<Props>;
 export default SSITabViewHeader;

package/dist/components/views/SSITabView/SSITabViewHeader/index.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTitleContainerStyled as TitleContainer, SSITabViewHeaderTitleCaptionStyled as TitleCaption, } from '../../../../styles';
 const SSITabViewHeader = (props) => {
-    const { navigationState, onIndexChange } = props;
-    return (_jsx(Container, { children: navigationState.routes.map((value, index) => {
-            const tabIndex = index + 1;
-            const isActiveTab = tabIndex === navigationState.index;
-            return (_jsx(TitleContainer, { onClick: () => onIndexChange(tabIndex), style: {
-                    ...(isActiveTab && { borderBottom: `2px solid #7276F7`, alignSelf: 'stretch' }),
-                }, children: _jsx(TitleCaption, { style: { fontWeight: !isActiveTab ? '400' : '600' }, children: value.title }) }, tabIndex));
+    const { navigationState, onRouteChange } = props;
+    return (_jsx(Container, { children: navigationState.routes.map((value) => {
+            const isActiveRoute = value.key === navigationState.activeRoute;
+            return (_jsx(TitleContainer, { onClick: () => onRouteChange(value.key), style: {
+                    ...(isActiveRoute && { borderBottom: `2px solid #7276F7`, alignSelf: 'stretch' }),
+                }, children: _jsx(TitleCaption, { style: { fontWeight: !isActiveRoute ? '400' : '600' }, children: value.title }) }, value.key));
         }) }));
 };
 export default SSITabViewHeader;

package/dist/components/views/SSITabView/index.d.ts

@@ -1,7 +1,9 @@
-import React from 'react';
+import { FC } from 'react';
 import { TabViewRoute } from '@sphereon/ui-components.core';
 type Props = {
     routes: Array<TabViewRoute>;
+    activeRoute?: string;
+    onRouteChange?: (key: string) => Promise<void>;
 };
-declare const SSITabView: React.FC<Props>;
+declare const SSITabView: FC<Props>;
 export default SSITabView;

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

@@ -1,27 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import SSITabViewHeader from './SSITabViewHeader';
 import { SSITabViewContainerStyled as Container } from '../../../styles';
 const Tab = (props) => {
-    return _jsx(React.Fragment, { children: props.children });
+    return _jsx(Fragment, { children: props.children });
 };
 const SSITabView = (props) => {
     const { routes = [] } = props;
-    const [activeTabIndex, setActiveTabIndex] = React.useState(1);
-    const [content, setContent] = React.useState();
-    React.useEffect(() => {
-        routes.forEach((route, index) => {
-            if (index + 1 === activeTabIndex) {
+    const [activeRoute, setActiveRoute] = useState(props.activeRoute ?? (routes.length > 0 ? routes[0].key : ""));
+    const [content, setContent] = useState();
+    useEffect(() => {
+        routes.forEach((route) => {
+            if (route.key === activeRoute) {
                 setContent(route.content);
             }
         });
-    }, [routes, activeTabIndex]);
-    const onTabChange = async (tabIndex) => {
-        setActiveTabIndex(tabIndex);
+    }, [routes, activeRoute]);
+    const onRouteChange = async (key) => {
+        setActiveRoute(key);
+        props.onRouteChange?.(key);
     };
     return (_jsxs(Container, { children: [_jsx(SSITabViewHeader, { navigationState: {
-                    routes: routes,
-                    index: activeTabIndex,
-                }, onIndexChange: onTabChange }), _jsx(Tab, { children: content })] }));
+                    routes,
+                    activeRoute,
+                }, onRouteChange: onRouteChange }), _jsx(Tab, { children: content })] }));
 };
 export default SSITabView;

package/dist/index.d.ts

@@ -6,9 +6,9 @@ import SSICheckmarkBadge from './components/assets/badges/SSICheckmarkBadge';
 import SSIExclamationMarkBadge from './components/assets/badges/SSIExclamationMarkBadge';
 import SSIPlaceholderLogo from './components/assets/logos/SSIPlaceholderLogo';
 import SSILogo from './components/assets/logos/SSILogo';
-import SSIAddIcon from './components/assets/icons/SSIAddIcon';
-import SSIFilterIcon from './components/assets/icons/SSIFilterIcon';
-import SSIArrowDownIcon from './components/assets/icons/SSIArrowDownIcon';
+import SSIAddIcon from './components/assets/icons/Add';
+import SSIFilterIcon from './components/assets/icons/Filter';
+import SSIArrowDownIcon from './components/assets/icons/ArrowDown';
 import SSITypeLabel from './components/labels/SSITypeLabel';
 import IconButton from './components/buttons/IconButton';
 import PrimaryButton from './components/buttons/PrimaryButton';
@@ -17,26 +17,28 @@ import SSITableView from './components/views/SSITableView';
 import SSITableViewHeader from './components/views/SSITableView/SSITableViewHeader';
 import SSITabView from './components/views/SSITabView';
 import SSITabViewHeader from './components/views/SSITabView/SSITabViewHeader';
-import SSIProfileIcon from './components/assets/icons/SSIProfileIcon';
+import SSIProfileIcon from './components/assets/icons/Profile';
 import SecondaryButton from './components/buttons/SecondaryButton';
 import SSICheckbox from './components/fields/SSICheckbox';
 import SSIActivityIndicator from './components/indicators/SSIActivityIndicator';
 import SSIHoverText from './components/fields/SSIHoverText';
 import ProgressStepIndicator from './components/indicators/ProgressStepIndicator';
 import StepMarker from './components/assets/markers/StepMarker';
-import DocumentIcon from './components/assets/icons/DocumentIcon';
-import CrossIcon from './components/assets/icons/CrossIcon';
-import ImageIcon from './components/assets/icons/ImageIcon';
-import MeatBallsIcon from './components/assets/icons/MeatBallsIcon';
-import PencilIcon from './components/assets/icons/PencilIcon';
-import ViewIcon from './components/assets/icons/ViewIcon';
-import CopyIcon from './components/assets/icons/CopyIcon';
-import DeleteIcon from './components/assets/icons/DeleteIcon';
+import DocumentIcon from './components/assets/icons/Document';
+import CrossIcon from './components/assets/icons/Cross';
+import ImageIcon from './components/assets/icons/Image';
+import MeatBallsIcon from './components/assets/icons/MeatBalls';
+import PencilIcon from './components/assets/icons/Pencil';
+import ViewIcon from './components/assets/icons/View';
+import CopyIcon from './components/assets/icons/Copy';
+import DeleteIcon from './components/assets/icons/Delete';
 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 CustomArrayControl, { customArrayControlTester } from './components/fields/JSONForms/CustomArrayControl';
+import ColorPickerControl, { colorPickerControlTester } from './components/fields/JSONForms/ColorPickerControl';
 import CredentialIssuanceWizardView from './components/views/CredentialIssuanceWizardView';
 import PaginationControls from './components/views/SSITableView/PaginationControls';
 import PaginationControlsProps from './components/views/SSITableView/PaginationControls';
@@ -44,17 +46,21 @@ 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 FormView from './components/views/FormView';
+import FormView, { getFormViewAjv } from './components/views/FormView';
 import InformationRequestView from './components/views/InformationRequestView';
 import ContactViewItem from './components/views/ContactViewItem';
-import CapitolIcon from './components/assets/icons/CapitolIcon';
-import ChevronIcon from './components/assets/icons/ChevronIcon';
-import ManIcon from './components/assets/icons/ManIcon';
-import LaptopIcon from './components/assets/icons/LaptopIcon';
-import StoreIcon from './components/assets/icons/StoreIcon';
+import CapitolIcon from './components/assets/icons/Capitol';
+import ChevronIcon from './components/assets/icons/Chevron';
+import ManIcon from './components/assets/icons/Man';
+import LaptopIcon from './components/assets/icons/Laptop';
+import StoreIcon from './components/assets/icons/Store';
 import RoleIconView from './components/views/RoleIconView';
 import RoleViewItem from './components/views/RoleViewItem';
 import Listbox from './components/lists/Listbox';
+import ActivityIcon from './components/assets/icons/Activity';
+import ContactIcon from './components/assets/icons/Contact';
+import BellIcon from './components/assets/icons/Bell';
+import CredentialIcon from './components/assets/icons/Credential';
 import { Row } from '@tanstack/react-table';
 import './styles/css/tailwind.css';
 import './components/views/FormView/styles.css';
@@ -63,4 +69,4 @@ export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
 export * from './utils';
-export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem, CapitolIcon, ChevronIcon, ManIcon, LaptopIcon, StoreIcon, RoleIconView, RoleViewItem, Listbox };
+export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CustomArrayControl, customArrayControlTester, ColorPickerControl, colorPickerControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem, CapitolIcon, ChevronIcon, ManIcon, LaptopIcon, StoreIcon, RoleIconView, RoleViewItem, Listbox, ActivityIcon, ContactIcon, BellIcon, CredentialIcon, getFormViewAjv };

package/dist/index.js

@@ -6,9 +6,9 @@ import SSICheckmarkBadge from './components/assets/badges/SSICheckmarkBadge';
 import SSIExclamationMarkBadge from './components/assets/badges/SSIExclamationMarkBadge';
 import SSIPlaceholderLogo from './components/assets/logos/SSIPlaceholderLogo';
 import SSILogo from './components/assets/logos/SSILogo';
-import SSIAddIcon from './components/assets/icons/SSIAddIcon';
-import SSIFilterIcon from './components/assets/icons/SSIFilterIcon';
-import SSIArrowDownIcon from './components/assets/icons/SSIArrowDownIcon';
+import SSIAddIcon from './components/assets/icons/Add';
+import SSIFilterIcon from './components/assets/icons/Filter';
+import SSIArrowDownIcon from './components/assets/icons/ArrowDown';
 import SSITypeLabel from './components/labels/SSITypeLabel';
 import IconButton from './components/buttons/IconButton';
 import PrimaryButton from './components/buttons/PrimaryButton';
@@ -17,26 +17,28 @@ import SSITableView from './components/views/SSITableView';
 import SSITableViewHeader from './components/views/SSITableView/SSITableViewHeader';
 import SSITabView from './components/views/SSITabView';
 import SSITabViewHeader from './components/views/SSITabView/SSITabViewHeader';
-import SSIProfileIcon from './components/assets/icons/SSIProfileIcon';
+import SSIProfileIcon from './components/assets/icons/Profile';
 import SecondaryButton from './components/buttons/SecondaryButton';
 import SSICheckbox from './components/fields/SSICheckbox';
 import SSIActivityIndicator from './components/indicators/SSIActivityIndicator';
 import SSIHoverText from './components/fields/SSIHoverText';
 import ProgressStepIndicator from './components/indicators/ProgressStepIndicator';
 import StepMarker from './components/assets/markers/StepMarker';
-import DocumentIcon from './components/assets/icons/DocumentIcon';
-import CrossIcon from './components/assets/icons/CrossIcon';
-import ImageIcon from './components/assets/icons/ImageIcon';
-import MeatBallsIcon from './components/assets/icons/MeatBallsIcon';
-import PencilIcon from './components/assets/icons/PencilIcon';
-import ViewIcon from './components/assets/icons/ViewIcon';
-import CopyIcon from './components/assets/icons/CopyIcon';
-import DeleteIcon from './components/assets/icons/DeleteIcon';
+import DocumentIcon from './components/assets/icons/Document';
+import CrossIcon from './components/assets/icons/Cross';
+import ImageIcon from './components/assets/icons/Image';
+import MeatBallsIcon from './components/assets/icons/MeatBalls';
+import PencilIcon from './components/assets/icons/Pencil';
+import ViewIcon from './components/assets/icons/View';
+import CopyIcon from './components/assets/icons/Copy';
+import DeleteIcon from './components/assets/icons/Delete';
 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 CustomArrayControl, { customArrayControlTester } from './components/fields/JSONForms/CustomArrayControl';
+import ColorPickerControl, { colorPickerControlTester } from './components/fields/JSONForms/ColorPickerControl';
 import CredentialIssuanceWizardView from './components/views/CredentialIssuanceWizardView';
 import PaginationControls from './components/views/SSITableView/PaginationControls';
 import PaginationControlsProps from './components/views/SSITableView/PaginationControls';
@@ -44,17 +46,21 @@ 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 FormView from './components/views/FormView';
+import FormView, { getFormViewAjv } from './components/views/FormView';
 import InformationRequestView from './components/views/InformationRequestView';
 import ContactViewItem from './components/views/ContactViewItem';
-import CapitolIcon from './components/assets/icons/CapitolIcon';
-import ChevronIcon from './components/assets/icons/ChevronIcon';
-import ManIcon from './components/assets/icons/ManIcon';
-import LaptopIcon from './components/assets/icons/LaptopIcon';
-import StoreIcon from './components/assets/icons/StoreIcon';
+import CapitolIcon from './components/assets/icons/Capitol';
+import ChevronIcon from './components/assets/icons/Chevron';
+import ManIcon from './components/assets/icons/Man';
+import LaptopIcon from './components/assets/icons/Laptop';
+import StoreIcon from './components/assets/icons/Store';
 import RoleIconView from './components/views/RoleIconView';
 import RoleViewItem from './components/views/RoleViewItem';
 import Listbox from './components/lists/Listbox';
+import ActivityIcon from './components/assets/icons/Activity';
+import ContactIcon from './components/assets/icons/Contact';
+import BellIcon from './components/assets/icons/Bell';
+import CredentialIcon from './components/assets/icons/Credential';
 import './styles/css/tailwind.css';
 import './components/views/FormView/styles.css';
 import '@sphereon/ui-components.core/dist/styles/tokens.css';
@@ -62,4 +68,4 @@ export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
 export * from './utils';
-export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem, CapitolIcon, ChevronIcon, ManIcon, LaptopIcon, StoreIcon, RoleIconView, RoleViewItem, Listbox };
+export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CustomArrayControl, customArrayControlTester, ColorPickerControl, colorPickerControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem, CapitolIcon, ChevronIcon, ManIcon, LaptopIcon, StoreIcon, RoleIconView, RoleViewItem, Listbox, ActivityIcon, ContactIcon, BellIcon, CredentialIcon, getFormViewAjv };

package/dist/renders/jsonFormsRenders.js

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

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

@@ -1,10 +1,9 @@
 /// <reference types="react" />
-export declare const ContactViewItemContainerStyled: 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 ContactViewItemNewStatusContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ContactViewItemLogoContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ContactViewItemContactDetailsContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ContactViewItemContactUriCaptionStyled: 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;
+import type { IStyledComponent } from 'styled-components';
+import { SSIFlexDirectionRowViewStyled } from '../../containers';
+import { SSITextH5Styled } from '../../../fonts';
+export declare const ContactViewItemContainerStyled: typeof SSIFlexDirectionRowViewStyled;
+export declare const ContactViewItemNewStatusContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const ContactViewItemLogoContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const ContactViewItemContactDetailsContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const ContactViewItemContactUriCaptionStyled: typeof SSITextH5Styled;

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

@@ -1,14 +1,12 @@
 /// <reference types="react" />
-export declare const CredentialIssuanceWizardViewContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CredentialIssuanceWizardViewCredentialTypeContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CredentialIssuanceWizardViewCredentialTypeTitleStyled: 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 CredentialIssuanceWizardViewFormContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CredentialIssuanceWizardViewEvidenceContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CredentialIssuanceWizardViewEvidenceContentContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CredentialIssuanceWizardViewEvidenceTitleContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CredentialIssuanceWizardViewEvidenceTitleOptionalStyled: 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 CredentialIssuanceWizardViewEvidenceFilesContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+import type { IStyledComponent } from 'styled-components';
+import { SSITextH1SemiBoldStyled, SSITextH2Styled } from '../../../fonts';
+export declare const CredentialIssuanceWizardViewContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const CredentialIssuanceWizardViewCredentialTypeContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const CredentialIssuanceWizardViewCredentialTypeTitleStyled: typeof SSITextH1SemiBoldStyled;
+export declare const CredentialIssuanceWizardViewFormContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const CredentialIssuanceWizardViewEvidenceContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const CredentialIssuanceWizardViewEvidenceContentContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const CredentialIssuanceWizardViewEvidenceTitleContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const CredentialIssuanceWizardViewEvidenceTitleOptionalStyled: typeof SSITextH2Styled;
+export declare const CredentialIssuanceWizardViewEvidenceFilesContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -1,14 +1,9 @@
 /// <reference types="react" />
-export declare const CredentialViewItemContainerStyled: 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 CredentialViewItemDetailsContainerStyled: 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 CredentialViewItemTitleCaptionStyled: 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 CredentialViewItemStatusContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CredentialViewItemExpirationDateCaptionStyled: 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;
+import type { IStyledComponent } from 'styled-components';
+import { SSIFlexDirectionColumnViewStyled, SSIFlexDirectionRowViewStyled } from '../../containers';
+import { SSITextH3Styled, SSITextH5Styled } from '../../../fonts';
+export declare const CredentialViewItemContainerStyled: typeof SSIFlexDirectionRowViewStyled;
+export declare const CredentialViewItemDetailsContainerStyled: typeof SSIFlexDirectionColumnViewStyled;
+export declare const CredentialViewItemTitleCaptionStyled: typeof SSITextH3Styled;
+export declare const CredentialViewItemStatusContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const CredentialViewItemExpirationDateCaptionStyled: typeof SSITextH5Styled;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-export declare const DragAndDropBoxContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const DragAndDropBoxHiddenInputStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
-export declare const DragAndDropBoxCaptionContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const DragAndDropBoxDescriptionStyled: 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;
+import type { IStyledComponent } from 'styled-components';
+import { SSITextH7RegularStyled } from '../../../fonts';
+export declare const DragAndDropBoxContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const DragAndDropBoxHiddenInputStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>;
+export declare const DragAndDropBoxCaptionContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const DragAndDropBoxDescriptionStyled: typeof SSITextH7RegularStyled;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-export declare const DropDownListContainerStyled: 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 DropDownListButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const DropDownContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+import type { IStyledComponent } from 'styled-components';
+import { SSIFlexDirectionRowViewStyled } from '../../containers';
+export declare const DropDownListContainerStyled: typeof SSIFlexDirectionRowViewStyled;
+export declare const DropDownListButtonStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const DropDownContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -1,8 +1,7 @@
 /// <reference types="react" />
-export declare const DropDownListItemContainerStyled: 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 DropDownListItemCaptionContainerStyled: 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 DropDownListItemIconContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+import type { IStyledComponent } from 'styled-components';
+import { SSIFlexDirectionRowViewStyled } from '../../containers';
+import { SSITextH2Styled } from '../../../fonts';
+export declare const DropDownListItemContainerStyled: typeof SSIFlexDirectionRowViewStyled;
+export declare const DropDownListItemCaptionContainerStyled: typeof SSITextH2Styled;
+export declare const DropDownListItemIconContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -1,15 +1,13 @@
 /// <reference types="react" />
-export declare const FileSelectionFieldContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FileSelectionFieldContentContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FileSelectionFieldRemoveContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FileSelectionFieldRemoveButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FileSelectionFieldRemoveButtonCircleIconStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FileSelectionFieldIconContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FileSelectionFieldFileDataContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FileSelectionFieldFileNameCaptionStyled: 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 FileSelectionFieldFileSizeCaptionStyled: 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 FileSelectionFieldPermissionSelectionContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+import type { IStyledComponent } from 'styled-components';
+import { SSITextH2SemiBoldStyled, SSITextH7RegularStyled } from '../../../fonts';
+export declare const FileSelectionFieldContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const FileSelectionFieldContentContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const FileSelectionFieldRemoveContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const FileSelectionFieldRemoveButtonStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const FileSelectionFieldRemoveButtonCircleIconStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const FileSelectionFieldIconContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const FileSelectionFieldFileDataContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const FileSelectionFieldFileNameCaptionStyled: typeof SSITextH2SemiBoldStyled;
+export declare const FileSelectionFieldFileSizeCaptionStyled: typeof SSITextH7RegularStyled;
+export declare const FileSelectionFieldPermissionSelectionContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -1,2 +1,3 @@
 /// <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;
+import type { IStyledComponent } from 'styled-components';
+export declare const IconButtonContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;