@sphereon/ui-components.ssi-react 0.4.1-unstable.97 → 0.5.0

package/dist/index.d.ts

@@ -8,7 +8,7 @@ import SSIPlaceholderLogo from './components/assets/logos/SSIPlaceholderLogo';
 import SSILogo from './components/assets/logos/SSILogo';
 import SSIAddIcon from './components/assets/icons/Add';
 import SSIFilterIcon from './components/assets/icons/Filter';
-import SSIArrowDownIcon from './components/assets/icons/ArrowDown';
+import ArrowIcon from './components/assets/icons/Arrow';
 import SSITypeLabel from './components/labels/SSITypeLabel';
 import IconButton from './components/buttons/IconButton';
 import PrimaryButton from './components/buttons/PrimaryButton';
@@ -61,6 +61,7 @@ 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 SSISwitchItem from './components/buttons/SSISwitchItem';
 import { Row } from '@tanstack/react-table';
 import './styles/css/tailwind.css';
 import './components/views/FormView/styles.css';
@@ -69,4 +70,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, 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 };
+export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, ArrowIcon, 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, SSISwitchItem, getFormViewAjv };

package/dist/index.js

@@ -8,7 +8,7 @@ import SSIPlaceholderLogo from './components/assets/logos/SSIPlaceholderLogo';
 import SSILogo from './components/assets/logos/SSILogo';
 import SSIAddIcon from './components/assets/icons/Add';
 import SSIFilterIcon from './components/assets/icons/Filter';
-import SSIArrowDownIcon from './components/assets/icons/ArrowDown';
+import ArrowIcon from './components/assets/icons/Arrow';
 import SSITypeLabel from './components/labels/SSITypeLabel';
 import IconButton from './components/buttons/IconButton';
 import PrimaryButton from './components/buttons/PrimaryButton';
@@ -61,6 +61,7 @@ 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 SSISwitchItem from './components/buttons/SSISwitchItem';
 import './styles/css/tailwind.css';
 import './components/views/FormView/styles.css';
 import '@sphereon/ui-components.core/dist/styles/tokens.css';
@@ -68,4 +69,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, 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 };
+export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, ArrowIcon, 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, SSISwitchItem, getFormViewAjv };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 import { SSIFlexDirectionRowViewStyled } from '../../containers';
 import { SSITextH5Styled } from '../../../fonts';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 import { SSITextH1SemiBoldStyled, SSITextH2Styled } from '../../../fonts';
 export declare const CredentialIssuanceWizardViewContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 import { SSIFlexDirectionColumnViewStyled, SSIFlexDirectionRowViewStyled } from '../../containers';
 import { SSITextH3Styled, SSITextH5Styled } from '../../../fonts';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 import { SSITextH7RegularStyled } from '../../../fonts';
 export declare const DragAndDropBoxContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 import { SSIFlexDirectionRowViewStyled } from '../../containers';
 export declare const DropDownListContainerStyled: typeof SSIFlexDirectionRowViewStyled;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 import { SSIFlexDirectionRowViewStyled } from '../../containers';
 import { SSITextH2Styled } from '../../../fonts';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 import { SSITextH2SemiBoldStyled, SSITextH7RegularStyled } from '../../../fonts';
 export declare const FileSelectionFieldContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 export declare const IconButtonContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 import { SSITextH1Styled, SSITextH2Styled, SSITextH3Styled, SSITextH4Styled } from '../../../fonts';
 export declare const InformationRequestViewContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 export declare const JSONDataViewContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const JSONDataViewHeaderContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -36,8 +36,13 @@ export const JSONDataViewDataImageValueStyled = styled.div `
   border-radius: 10px;
 `;
 export const JSONDataViewDataTextValueStyled = styled.span `
-  color: ${fontColors.dark};
-  ${SSITextH7SemiBoldCss}
+    color: ${fontColors.dark};
+    ${SSITextH7SemiBoldCss};
+    max-width: 600px;
+    white-space: normal;
+    word-break: break-word;
+    line-height: 1.4;
+    display: inline-block;
 `;
 export const JSONDataViewDataLabelStyled = styled.span `
   color: ${fontColors.dark};

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

@@ -1,4 +1,3 @@
-/// <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>, {}>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 export declare const PassportPhotoControlContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const PassportPhotoControlDragAndDropBoxContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 import { SSITextH1SemiBoldStyled, SSITextH3Styled } from '../../../fonts';
 export declare const ProgressStepIndicatorContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 import { SSITextH2Styled } from '../../../fonts';
 import { SSIFlexDirectionRowViewStyled } from '../../containers';

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

@@ -3,23 +3,26 @@ import { SSITextH2Styled } from '../../../fonts';
 import { SSIFlexDirectionRowViewStyled } from '../../containers';
 export const SSICheckboxContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
   align-items: center;
-  gap: 10px;
+  gap: 8px;
   cursor: pointer;
 `;
 export const SSICheckboxUnselectedContainerStyled = styled.div `
   width: 18px;
-  aspect-ratio: 1;
-  border-radius: 4px;
-  border-width: 1px;
+  height: 18px;
+  min-width: 18px;
+  border-radius: 2px;
 `;
 export const SSICheckboxSelectedContainerStyled = styled.div `
   width: 18px;
-  aspect-ratio: 1;
-  border-radius: 4px;
+  height: 18px;
+  min-width: 18px;
+  border-radius: 2px;
+  display: flex;
   align-items: center;
   justify-content: center;
 `;
 export const SSICheckboxLabelContainerStyled = styled(SSITextH2Styled) `
   display: flex;
   flex-wrap: wrap;
+  font-size: 14px;
 `;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 import { SSIFlexDirectionColumnViewStyled, SSIFlexDirectionRowViewStyled, SSIRoundedContainerStyled } from '../../containers';
 import { SSITextH4SemiBoldLightStyled, SSITextH5LightStyled } from '../../../fonts';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 import { SSIFlexDirectionColumnViewStyled } from '../../containers';
 export declare const SSICredentialMiniCardViewContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 export declare const SSIHoverTextTextHoverStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
 export declare const SSIHoverTextContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 export declare const SSIProfileIconContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 import { SSIFlexDirectionRowViewStyled } from '../../containers';
 import { SSITextH5LightStyled } from '../../../fonts';

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const createMaterial3Switch: (color: string) => import("@emotion/styled").StyledComponent<import("@mui/material").SwitchProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const material3SwitchContainerStyle: React.CSSProperties;
+export declare const material3SwitchLabelStyle: React.CSSProperties;

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

@@ -0,0 +1,74 @@
+import { parseColor } from '@sphereon/ui-components.core';
+import { styled } from '@mui/material/styles';
+import { Switch } from '@mui/material';
+export const createMaterial3Switch = (color) => styled(Switch)(({ theme }) => ({
+    width: 52,
+    height: 32,
+    padding: 0,
+    '& .MuiSwitch-switchBase': {
+        padding: 4,
+        transitionDuration: '300ms',
+        '&.Mui-checked': {
+            transform: 'translateX(20px)',
+            color: 'var(--color-grey-50)',
+            '& + .MuiSwitch-track': {
+                backgroundColor: parseColor(color),
+                opacity: 1,
+                border: 0,
+            },
+            '&.Mui-disabled + .MuiSwitch-track': {
+                opacity: 0.5,
+            },
+            '& .MuiSwitch-thumb:before': {
+                backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(parseColor(color))}" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>')`,
+            },
+        },
+        '&.Mui-focusVisible .MuiSwitch-thumb': {
+            color: parseColor(color),
+            border: '6px solid var(--color-grey-50)',
+        },
+        '&.Mui-disabled .MuiSwitch-thumb': {
+            color: theme.palette.grey[100],
+        },
+        '&.Mui-disabled + .MuiSwitch-track': {
+            opacity: 0.3,
+        },
+    },
+    '& .MuiSwitch-thumb': {
+        boxSizing: 'border-box',
+        width: 24,
+        height: 24,
+        '&:before': {
+            content: "''",
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            left: 0,
+            top: 0,
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: 'center',
+        },
+    },
+    '& .MuiSwitch-track': {
+        borderRadius: 16,
+        backgroundColor: 'var(--color-grey-300)',
+        opacity: 1,
+        transition: theme.transitions.create(['background-color'], {
+            duration: 300,
+        }),
+    },
+}));
+export const material3SwitchContainerStyle = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: '12px',
+    width: '100%',
+};
+export const material3SwitchLabelStyle = {
+    fontSize: '14px',
+    fontWeight: 400,
+    color: 'var(--color-grey-800)',
+    letterSpacing: '0.14px',
+    flex: 1,
+};

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 export declare const SSITabViewContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -3,4 +3,5 @@ export const SSITabViewContainerStyled = styled.div `
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  width: 100%;
 `;

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

@@ -1,6 +1,7 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
-import { SSITextH3Styled } from '../../../fonts';
 export declare const SSITabViewHeaderContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const SSITabViewHeaderTabBarStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const SSITabViewHeaderTitleContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const SSITabViewHeaderTitleCaptionStyled: typeof SSITextH3Styled;
+export declare const SSITabViewHeaderTitleCaptionStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const SSITabViewHeaderActiveIndicatorStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const SSITabViewHeaderDividerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -1,15 +1,40 @@
 import styled from 'styled-components';
-import { SSITextH3Styled } from '../../../fonts';
+import { elementColors, fontColors } from '@sphereon/ui-components.core';
+import { SSITextH3Css } from '../../../css';
 export const SSITabViewHeaderContainerStyled = styled.div `
   display: flex;
-  flex-direction: row;
-  gap: 84px;
-  margin-left: 66px;
+  flex-direction: column;
+  width: 100%;
+`;
+export const SSITabViewHeaderTabBarStyled = styled.div `
+  display: flex;
+  height: 48px;
 `;
 export const SSITabViewHeaderTitleContainerStyled = styled.div `
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  height: 48px;
   cursor: pointer;
+`;
+export const SSITabViewHeaderTitleCaptionStyled = styled.div `
+  ${SSITextH3Css};
   display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 16px;
+  height: 100%;
+  color: ${fontColors.dark};
+`;
+export const SSITabViewHeaderActiveIndicatorStyled = styled.div `
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(172deg, #7276f7 0%, #7c40e8 100%);
 `;
-export const SSITabViewHeaderTitleCaptionStyled = styled(SSITextH3Styled) `
-  margin-top: auto;
+export const SSITabViewHeaderDividerStyled = styled.div `
+  width: 100%;
+  height: 1px;
+  background-color: ${elementColors.lightGrey};
 `;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IStyledComponent } from 'styled-components';
 export declare const SSITableViewContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const SSITableViewLabelCellStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 import { SSIFlexDirectionRowViewStyled } from '../../containers';
 export declare const SSITableViewHeaderContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 import { SSIFlexDirectionRowViewStyled, SSIRoundedContainerStyled } from '../../containers';
 import { SSITextH4Styled } from '../../../fonts';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 export declare const StepMarkerActiveContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const StepMarkerActiveOuterContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -1,4 +1,5 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 export declare const TextFieldInputContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const TextFieldInputWrapperStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const TextFieldInputInputStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>;
+export declare const TextFieldInputLabelStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -1,27 +1,49 @@
-import { borderColors, fontColors } from '@sphereon/ui-components.core';
+import { backgroundColors, borderColors, elementColors, fontColors } from '@sphereon/ui-components.core';
 import styled from 'styled-components';
-import { SSITextH2Css } from '../../../css';
+import { SSITextH3Css, SSITextH7RegularCss } from '../../../css';
 export const TextFieldInputContainerStyled = styled.div `
-  display: flex;
-  flex-direction: column;
+  position: relative;
+  width: 100%;
+  height: 56px;
 `;
-export const TextFieldInputInputStyled = styled.input `Retry
-  ${SSITextH2Css};
+export const TextFieldInputWrapperStyled = styled.div `
+  position: absolute;
+  inset: 0;
+  border: 1px solid ${elementColors.lightGrey};
+  border-radius: 4px;
+  background-color: ${backgroundColors.primaryLight};
+
+  &:focus-within {
+    border-color: ${borderColors.purple};
+  }
+`;
+export const TextFieldInputInputStyled = styled.input `
+  ${SSITextH3Css};
   color: ${fontColors.dark};
-  display: flex;
-  padding: 12px 16px;
-  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 16px;
+  border: none;
   border-radius: 4px;
-  border: 1px solid ${borderColors.lightGrey};
   outline: none;
-  background-color: unset;
-  font-family: Poppins, serif;
+  background-color: transparent;
+  font-family: Poppins, sans-serif;
 
-  &:focus {
-    border-color: ${borderColors.purple};
+  &::placeholder {
+    color: #727272;
   }
 
-  &:hover {
-    border-color: ${borderColors.purple};
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
   }
 `;
+export const TextFieldInputLabelStyled = styled.div `
+  ${SSITextH7RegularCss};
+  position: absolute;
+  top: -10px;
+  left: 12px;
+  padding: 0 4px;
+  background-color: ${backgroundColors.primaryLight};
+  color: ${fontColors.dark};
+`;

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 export declare const ButtonFlexRowStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>;

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

@@ -29,3 +29,4 @@ export * from './JSONDataView';
 export * from './TextInputField';
 export * from './InformationRequestView';
 export * from './ContactViewItem';
+export * from './SSISwitchItem';

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

@@ -29,3 +29,4 @@ export * from './JSONDataView';
 export * from './TextInputField';
 export * from './InformationRequestView';
 export * from './ContactViewItem';
+export * from './SSISwitchItem';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 export declare const SSIFlexDirectionRowViewStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const SSIFlexDirectionColumnViewStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

package/dist/styles/css/tailwind.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, custom-base, custom-components, custom-utilities;
 @layer theme {
@@ -353,7 +353,7 @@
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
   .transition {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IStyledComponent } from 'styled-components';
 export declare const SSITextH1Styled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const SSITextH1SemiBoldStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

package/dist/types/index.d.ts

@@ -6,3 +6,4 @@ export * from './field';
 export * from './view';
 export * from './icon';
 export * from './jsonForms';
+export * from './position';

package/dist/types/index.js

@@ -6,3 +6,4 @@ export * from './field';
 export * from './view';
 export * from './icon';
 export * from './jsonForms';
+export * from './position';

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

@@ -0,0 +1,2 @@
+export type Direction = 'down' | 'up';
+export type Position = 'left' | 'right' | 'top' | 'bottom';

package/dist/types/position/index.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/Ajv.d.ts

@@ -0,0 +1,14 @@
+import { DateFormat } from '../helpers';
+import Ajv, { AnySchemaObject } from 'ajv';
+import { DataValidationCxt } from 'ajv/dist/types';
+export declare const dateFormatAjvKeyword: {
+    keyword: string;
+    modifying: boolean;
+    validate: (schema: DateFormat | string, data: any, parentSchema?: AnySchemaObject, dataCxt?: DataValidationCxt) => boolean;
+};
+export declare const isDateFormatAjvKeyword: {
+    keyword: string;
+    modifying: boolean;
+    validate: (schema: DateFormat | string, data: any, parentSchema?: AnySchemaObject, dataCxt?: DataValidationCxt) => boolean;
+};
+export declare const createFormViewAjv: () => Ajv;

package/dist/utils/Ajv.js

@@ -0,0 +1,33 @@
+import { formatDate } from '../helpers';
+import Ajv from 'ajv';
+import addFormats from 'ajv-formats';
+const dateFormatValidator = (schema, data, parentSchema, dataCxt) => {
+    if (typeof data === 'string') {
+        if (!dataCxt?.parentData || dataCxt.parentDataProperty === undefined) {
+            return true;
+        }
+        const formatted = formatDate(data, schema);
+        if (formatted && formatted !== 'Invalid date') {
+            dataCxt.parentData[dataCxt.parentDataProperty] = formatted;
+        }
+        return true;
+    }
+    return false;
+};
+export const dateFormatAjvKeyword = {
+    keyword: 'dateFormat',
+    modifying: true,
+    validate: dateFormatValidator,
+};
+export const isDateFormatAjvKeyword = {
+    keyword: 'isoDateFormat',
+    modifying: true,
+    validate: dateFormatValidator,
+};
+export const createFormViewAjv = () => {
+    const ajv = new Ajv({ useDefaults: true });
+    addFormats(ajv);
+    ajv.addKeyword(dateFormatAjvKeyword);
+    ajv.addKeyword(isDateFormatAjvKeyword);
+    return ajv;
+};

package/dist/utils/FileUtils.js

@@ -3,5 +3,5 @@ export const base64UriToFile = (base64Uri, filename, mimeType) => {
     const base64 = base64Uri.split(',')[1];
     const uint8Array = fromString(base64, 'base64');
     const blob = new Blob([uint8Array]);
-    return new File([blob], filename, { type: mimeType });
+    return new File([blob], filename, { type: mimeType, lastModified: Date.now() });
 };