@sphereon/ui-components.ssi-react 0.4.1-unstable.98 → 0.5.1-next.3

package/dist/helpers/DateHelper/index.js

@@ -1,45 +1,100 @@
+const KNOWN_FORMATS = new Set(['date-time', 'date', 'time', 'iso-date-time', 'iso-date', 'iso-time']);
+const customFormatTokens = {
+    yyyy: (date) => date.getFullYear().toString().padStart(4, '0'),
+    yy: (date) => date.getFullYear().toString().slice(-2).padStart(2, '0'),
+    MM: (date) => (date.getMonth() + 1).toString().padStart(2, '0'),
+    M: (date) => (date.getMonth() + 1).toString(),
+    dd: (date) => date.getDate().toString().padStart(2, '0'),
+    d: (date) => date.getDate().toString(),
+    HH: (date) => date.getHours().toString().padStart(2, '0'),
+    H: (date) => date.getHours().toString(),
+    mm: (date) => date.getMinutes().toString().padStart(2, '0'),
+    m: (date) => date.getMinutes().toString(),
+    ss: (date) => date.getSeconds().toString().padStart(2, '0'),
+    s: (date) => date.getSeconds().toString(),
+};
+const orderedTokens = ['yyyy', 'yy', 'MM', 'dd', 'HH', 'mm', 'ss', 'M', 'd', 'H', 'm', 's'];
+const applyCustomFormat = (date, format) => {
+    let result = '';
+    let i = 0;
+    while (i < format.length) {
+        const char = format[i];
+        if (char === '[') {
+            const closeIdx = format.indexOf(']', i + 1);
+            if (closeIdx !== -1) {
+                result += format.slice(i + 1, closeIdx);
+                i = closeIdx + 1;
+                continue;
+            }
+            else {
+                result += char;
+                i += 1;
+                continue;
+            }
+        }
+        const token = orderedTokens.find((t) => format.startsWith(t, i));
+        if (token) {
+            result += customFormatTokens[token](date);
+            i += token.length;
+        }
+        else {
+            result += char;
+            i += 1;
+        }
+    }
+    return result;
+};
 export const formatDate = (dateString, format = 'date-time') => {
-    const userDateTimeOpts = Intl.DateTimeFormat().resolvedOptions();
     if (!dateString) {
         return '';
     }
-    const date = dateString === 'now' ? new Date() : new Date(dateString);
+    let dateToParse = dateString;
+    if (/^\d{4}-\d{2}-\d{2}$/.test(dateString)) {
+        dateToParse += 'T00:00:00';
+    }
+    const date = dateString === 'now' ? new Date() : new Date(dateToParse);
     if (isNaN(date.getTime())) {
         console.error('Invalid date:', dateString);
         return 'Invalid date';
     }
+    const effectiveFormat = format ?? 'date-time';
+    if (effectiveFormat === 'iso-date-time')
+        return applyCustomFormat(date, 'yyyy-MM-ddTHH:mm:ss');
+    if (effectiveFormat === 'iso-date')
+        return applyCustomFormat(date, 'yyyy-MM-dd');
+    if (effectiveFormat === 'iso-time')
+        return applyCustomFormat(date, 'HH:mm:ss');
+    if (!KNOWN_FORMATS.has(effectiveFormat)) {
+        return applyCustomFormat(date, effectiveFormat);
+    }
+    const userDateTimeOpts = Intl.DateTimeFormat().resolvedOptions();
     const formatOptions = {
         timeZone: userDateTimeOpts.timeZone,
     };
-    if (format === 'date-time') {
+    if (effectiveFormat === 'date-time') {
         formatOptions.dateStyle = 'short';
         formatOptions.timeStyle = 'short';
     }
-    else if (format === 'date') {
+    else if (effectiveFormat === 'date') {
         formatOptions.dateStyle = 'short';
     }
-    else if (format === 'time') {
+    else if (effectiveFormat === 'time') {
         formatOptions.timeStyle = 'short';
     }
-    return new Intl.DateTimeFormat(userDateTimeOpts.locale, formatOptions).format(date);
-};
-export const formatDateToISO = (dateString, format = 'date-time') => {
-    if (!dateString) {
-        return '';
-    }
-    const date = dateString === 'now' ? new Date() : new Date(dateString);
-    if (isNaN(date.getTime())) {
-        console.error('Invalid date:', dateString);
-        return 'Invalid date';
+    try {
+        return new Intl.DateTimeFormat(userDateTimeOpts.locale, formatOptions).format(date);
     }
-    const isoString = date.toISOString();
-    if (format === 'date-time') {
-        return isoString.slice(0, 19).replace('T', ' ');
-    }
-    else if (format === 'date') {
-        return isoString.slice(0, 10);
-    }
-    else {
-        return isoString.slice(11, 19);
+    catch (error) {
+        console.error('Intl formatting error', error);
+        return date.toString();
     }
 };
+export const formatDateToISO = (dateString, format = 'date-time') => {
+    if (format === 'date-time')
+        return formatDate(dateString, 'iso-date-time');
+    if (format === 'date')
+        return formatDate(dateString, 'iso-date');
+    if (format === 'time')
+        return formatDate(dateString, 'iso-time');
+    return formatDate(dateString, format);
+};

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,11 +1,10 @@
-/// <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>>;
 export declare const SSITableViewTableContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>>;
 export declare const SSITableViewHeaderRowContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>>;
 export declare const SSITableViewRowContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement> & {
-    enableHover?: boolean;
+    $enableHover?: boolean;
 }>;
 export declare const SSITableViewCellContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>>;
 export declare const SSITableViewHeaderCellContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>>;

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

@@ -28,7 +28,7 @@ export const SSITableViewRowContainerStyled = styled.tr `
     border-bottom: 1px solid ${borderColors.lightGrey};
   }
 
-  ${props => props.enableHover &&
+  ${props => props.$enableHover &&
     css `
       &:hover {
         background-color: #ececec; // TODO

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