@sphereon/ui-components.ssi-react 0.1.3-unstable.122 → 0.1.3-unstable.130

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

@@ -8,7 +8,7 @@ import MeatBallsIcon from '../../assets/icons/MeatBallsIcon';
 import DeleteIcon from '../../assets/icons/DeleteIcon';
 const SSIIconButton = (props) => {
     const { caption, icon, onClick, disabled = false, iconColor = fontColors.dark } = props;
-    return _jsxs(Container, { onClick: onClick, children: [getIcon(icon, iconColor), caption && _jsx(Caption, { children: caption })] });
+    return (_jsxs(Container, { onClick: onClick, children: [getIcon(icon, iconColor), caption && _jsx(Caption, { children: caption })] }));
 };
 const getIcon = (icon, color) => {
     switch (icon) {

package/dist/components/lists/DropDownList/index.js

@@ -29,6 +29,6 @@ const DropDownList = (props) => {
             return (_jsx(DropDownListItem, { showBorder: showBorder, label: item.caption, onClick: item.onClick, icon: item.icon, fontColor: item.fontColor }, index));
         });
     };
-    return (_jsxs(Container, { ref: dropdownRef, children: [_jsx(ListButton, { children: _jsx(SSIIconButton, { icon: icon, onClick: onMore }) }), showActionsMenu && _jsx(DropDownContainer, { style: { ...(showBorder && { borderWidth: 2, borderColor: borderColors.lightGrey, borderStyle: 'solid' }) }, children: getItems() })] }));
+    return (_jsxs(Container, { ref: dropdownRef, children: [_jsx(ListButton, { children: _jsx(SSIIconButton, { icon: icon, onClick: onMore }) }), showActionsMenu && (_jsx(DropDownContainer, { style: { ...(showBorder && { borderWidth: 2, borderColor: borderColors.lightGrey, borderStyle: 'solid' }) }, children: getItems() }))] }));
 };
 export default DropDownList;

package/dist/components/views/SSITableView/PaginationControls/index.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, FC } from 'react';
+import { PaginationProps } from '@mui/material';
+export type PaginationControlsProps = PaginationProps & {
+    goToInputId?: string;
+    containerStyle?: CSSProperties;
+};
+declare const PaginationControls: FC<PaginationControlsProps>;
+export default PaginationControls;

package/dist/components/views/SSITableView/PaginationControls/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack } from '@mui/material';
+import { GoToInputContainer, GoToInputStyled, PaginationContainerStyled, PaginationStyled } from '../../../../styles';
+const PaginationControls = (props) => {
+    const { onKeyDown, containerStyle, goToInputId = 'goTo' } = props;
+    return (_jsxs(PaginationContainerStyled, { style: containerStyle, children: [_jsx(Stack, { children: _jsx(PaginationStyled, { ...props }) }), _jsxs(GoToInputContainer, { children: ["Go to ", _jsx(GoToInputStyled, { id: goToInputId, onKeyDown: onKeyDown }), " page"] })] }));
+};
+export default PaginationControls;

package/dist/components/views/SSITableView/SSITableViewHeader/index.js

@@ -2,13 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ButtonIcon, Localization, statusColors } from '@sphereon/ui-components.core';
 import SSIIconButton from '../../../buttons/SSIIconButton';
 import SSIPrimaryButton from '../../../buttons/SSIPrimaryButton';
-import { SSITableViewHeaderActionsContainerStyled as ActionsContainer, SSITableViewHeaderContainerStyled as Container, SSITableViewHeaderContentContainerStyled as ContentContainer, SSITextH3Styled as FilterCaption, SSITableViewHeaderFilterContainerStyled as FilterContainer, TableViewHeaderStaticActionsContainerStyled as StaticActionsContainer } from '../../../../styles';
+import { SSITableViewHeaderActionsContainerStyled as ActionsContainer, SSITableViewHeaderContainerStyled as Container, SSITableViewHeaderContentContainerStyled as ContentContainer, SSITextH3Styled as FilterCaption, SSITableViewHeaderFilterContainerStyled as FilterContainer, TableViewHeaderStaticActionsContainerStyled as StaticActionsContainer, } from '../../../../styles';
 const SSITableViewHeader = (props) => {
     const { enableFiltering = false, enableMostRecent = false, actions = [], onDelete } = props;
     const onDeleteClick = async () => {
         await onDelete?.();
     };
-    return (_jsxs(Container, { children: [_jsx(StaticActionsContainer, { children: onDelete &&
-                    _jsx(SSIIconButton, { caption: Localization.translate('action_delete_label'), icon: ButtonIcon.DELETE, iconColor: statusColors.error, onClick: onDeleteClick }) }), _jsx(ContentContainer, { style: { width: 'fit-content' }, children: _jsxs(ActionsContainer, { children: [enableFiltering && (_jsxs(FilterContainer, { children: [_jsx(SSIIconButton, { icon: ButtonIcon.FILTER, onClick: async () => console.log('add filter clicked') }), _jsx(FilterCaption, { children: Localization.translate('action_filter_caption') })] })), actions.map((action, index) => (_jsx(SSIPrimaryButton, { caption: action.caption, onClick: action.onClick, icon: action.icon }, index)))] }) })] }));
+    return (_jsxs(Container, { children: [_jsx(StaticActionsContainer, { children: onDelete && (_jsx(SSIIconButton, { caption: Localization.translate('action_delete_label'), icon: ButtonIcon.DELETE, iconColor: statusColors.error, onClick: onDeleteClick })) }), _jsx(ContentContainer, { style: { width: 'fit-content' }, children: _jsxs(ActionsContainer, { children: [enableFiltering && (_jsxs(FilterContainer, { children: [_jsx(SSIIconButton, { icon: ButtonIcon.FILTER, onClick: async () => console.log('add filter clicked') }), _jsx(FilterCaption, { children: Localization.translate('action_filter_caption') })] })), actions.map((action, index) => (_jsx(SSIPrimaryButton, { caption: action.caption, onClick: action.onClick, icon: action.icon }, index)))] }) })] }));
 };
 export default SSITableViewHeader;

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

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
 import { ColumnResizeMode, Row } from '@tanstack/react-table';
 import { Button, ColumnHeader } from '../../../types';
+import { PaginationControlsProps } from './PaginationControls';
 type Props<T> = {
     data: Array<T>;
     columns: Array<ColumnHeader<T>>;
@@ -12,6 +13,7 @@ type Props<T> = {
     enableResultCount?: boolean;
     columnResizeMode?: ColumnResizeMode;
     actions?: Array<Button>;
+    paginationControlsProps?: PaginationControlsProps;
 };
 declare const SSITableView: <T extends {}>(props: Props<T>) => ReactElement;
 export default SSITableView;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable, } from '@tanstack/react-table';
 import { ButtonIcon, Localization, selectionElementColors } from '@sphereon/ui-components.core';
 import SSITableViewHeader from './SSITableViewHeader';
 import SSITypeLabel from '../../labels/SSITypeLabel';
@@ -8,8 +8,9 @@ import SSIHoverText from '../../fields/SSIHoverText';
 import SSIStatusLabel from '../../labels/SSIStatusLabel';
 import CredentialMiniCardView from '../CredentialMiniCardView';
 import DropDownList from '../../lists/DropDownList';
-import { SSITableViewCellContainerStyled as CellContainer, SSITableViewContainerStyled as Container, SSITableViewHeaderCellContainerStyled as HeaderCellContainer, SSITableViewLabelCellStyled as LabelCell, SSITableViewResultCountCaptionStyled as ResultCountCaption, SSITableViewRowContainerStyled as RowContainer, SSITableViewTableContainerStyled as TableContainer, TableViewRowSelectionCheckboxContainerStyled as RowSelectionCheckboxContainer } from '../../../styles';
+import { SSITableViewCellContainerStyled as CellContainer, SSITableViewContainerStyled as Container, SSITableViewHeaderCellContainerStyled as HeaderCellContainer, SSITableViewLabelCellStyled as LabelCell, SSITableViewResultCountCaptionStyled as ResultCountCaption, SSITableViewRowContainerStyled as RowContainer, SSITableViewTableContainerStyled as TableContainer, TableViewRowSelectionCheckboxContainerStyled as RowSelectionCheckboxContainer, } from '../../../styles';
 import { TableCellType } from '../../../types';
+import PaginationControls from './PaginationControls';
 function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -54,7 +55,7 @@ const toRowSelectionObject = (rows) => {
     return rowSelectionObject;
 };
 const SSITableView = (props) => {
-    const { columns, data, enableRowSelection = false, enableFiltering = false, enableMostRecent = false, enableResultCount = false, columnResizeMode = 'onChange', actions = [], onRowClick, onDelete } = props;
+    const { columns, data, enableRowSelection = false, enableFiltering = false, enableMostRecent = false, enableResultCount = false, columnResizeMode = 'onChange', actions = [], onRowClick, onDelete, paginationControlsProps, } = props;
     const [rowSelection, setRowSelection] = React.useState([]);
     const [focusedRowId, setFocusedRowId] = React.useState();
     const columnHelper = createColumnHelper();
@@ -75,13 +76,12 @@ const SSITableView = (props) => {
                         indeterminate: table.getIsSomeRowsSelected(),
                         onChange: table.getToggleAllRowsSelectedHandler(),
                     } })),
-                cell: ({ row }) => (_jsx(RowSelectionCheckboxContainer, { children: (row.id === focusedRowId || rowSelection.length > 0)
-                        && _jsx(IndeterminateCheckbox, { ...{
-                                checked: row.getIsSelected(),
-                                disabled: !row.getCanSelect(),
-                                indeterminate: row.getIsSomeSelected(),
-                                onChange: row.getToggleSelectedHandler(),
-                            } }) })),
+                cell: ({ row }) => (_jsx(RowSelectionCheckboxContainer, { children: (row.id === focusedRowId || rowSelection.length > 0) && (_jsx(IndeterminateCheckbox, { ...{
+                            checked: row.getIsSelected(),
+                            disabled: !row.getCanSelect(),
+                            indeterminate: row.getIsSomeSelected(),
+                            onChange: row.getToggleSelectedHandler(),
+                        } })) })),
             },
             ...availableColumns,
         ];
@@ -91,14 +91,12 @@ const SSITableView = (props) => {
     };
     const onRowSelectionChange = (updatedRowSelection) => {
         const currentRowSelection = updatedRowSelection(toRowSelectionObject(rowSelection));
-        const selection = [];
-        for (const key in currentRowSelection) {
-            const row = {
+        const selection = Object.keys(currentRowSelection).map((key) => {
+            return {
                 rowId: key,
-                rowData: data[Number(key)]
+                rowData: data[Number(key)],
             };
-            selection.push(row);
-        }
+        });
         setRowSelection(selection);
     };
     const table = useReactTable({
@@ -106,7 +104,7 @@ const SSITableView = (props) => {
             size: 0,
         },
         state: {
-            rowSelection: toRowSelectionObject(rowSelection)
+            rowSelection: toRowSelectionObject(rowSelection),
         },
         enableRowSelection,
         onRowSelectionChange: onRowSelectionChange,
@@ -121,21 +119,21 @@ const SSITableView = (props) => {
     const onDeleteClicked = async () => {
         await onDelete?.(rowSelection.map((row) => row.rowData));
     };
-    return (_jsx(Container, { children: _jsxs("div", { className: "overflow-x-auto", children: [enableResultCount && (_jsx(ResultCountCaption, { children: Localization.translate('result_count_label', {
-                        count: data.length,
-                        maxCount: data.length,
-                    }) })), (enableFiltering || enableMostRecent || actions.length > 0) && (_jsx(SSITableViewHeader, { actions: actions, enableFiltering: enableFiltering, enableMostRecent: enableMostRecent, ...(onDelete && { onDelete: onDeleteClicked }) })), _jsxs(TableContainer, { children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx(RowContainer, { children: headerGroup.headers.map((header) => (_jsxs(HeaderCellContainer, { colSpan: header.colSpan, style: {
-                                        ...(header.column.columnDef.minSize && { minWidth: header.column.columnDef.minSize }),
-                                        ...(header.column.columnDef.maxSize && { maxWidth: header.column.columnDef.maxSize }),
-                                        ...(header.column.columnDef.size !== 0 && { width: header.column.columnDef.size }),
-                                    }, children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), _jsx("div", { className: `resizer ${header.column.getIsResizing() ? 'isResizing' : ''}`, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), style: {
-                                                transform: columnResizeMode === 'onEnd' && header.column.getIsResizing()
-                                                    ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)`
-                                                    : '',
-                                            } })] }, header.id))) }, headerGroup.id))) }), _jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsx(RowContainer, { onClick: () => onRowClicked(row), onMouseEnter: () => onFocusRow(row.id), onMouseLeave: () => onFocusRow(), style: { ...(row.getIsSelected() && { backgroundColor: selectionElementColors.selectedRow }) }, children: row.getVisibleCells().map((cell) => (_jsx(CellContainer, { style: {
-                                        ...(cell.column.columnDef.minSize && { minWidth: cell.column.columnDef.minSize }),
-                                        ...(cell.column.columnDef.maxSize && { maxWidth: cell.column.columnDef.maxSize }),
-                                        ...(cell.column.columnDef.size !== 0 && { width: cell.column.columnDef.size }),
-                                    }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] })] }) }));
+    return (_jsxs(Container, { children: [_jsxs("div", { className: "overflow-x-auto", children: [enableResultCount && (_jsx(ResultCountCaption, { children: Localization.translate('result_count_label', {
+                            count: data.length,
+                            maxCount: data.length,
+                        }) })), (enableFiltering || enableMostRecent || actions.length > 0) && (_jsx(SSITableViewHeader, { actions: actions, enableFiltering: enableFiltering, enableMostRecent: enableMostRecent, ...(onDelete && { onDelete: onDeleteClicked }) })), _jsxs(TableContainer, { children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx(RowContainer, { children: headerGroup.headers.map((header) => (_jsxs(HeaderCellContainer, { colSpan: header.colSpan, style: {
+                                            ...(header.column.columnDef.minSize && { minWidth: header.column.columnDef.minSize }),
+                                            ...(header.column.columnDef.maxSize && { maxWidth: header.column.columnDef.maxSize }),
+                                            ...(header.column.columnDef.size !== 0 && { width: header.column.columnDef.size }),
+                                        }, children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), _jsx("div", { className: `resizer ${header.column.getIsResizing() ? 'isResizing' : ''}`, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), style: {
+                                                    transform: columnResizeMode === 'onEnd' && header.column.getIsResizing()
+                                                        ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)`
+                                                        : '',
+                                                } })] }, header.id))) }, headerGroup.id))) }), _jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsx(RowContainer, { onClick: () => onRowClicked(row), onMouseEnter: () => onFocusRow(row.id), onMouseLeave: () => onFocusRow(), style: { ...(row.getIsSelected() && { backgroundColor: selectionElementColors.selectedRow }) }, children: row.getVisibleCells().map((cell) => (_jsx(CellContainer, { style: {
+                                            ...(cell.column.columnDef.minSize && { minWidth: cell.column.columnDef.minSize }),
+                                            ...(cell.column.columnDef.maxSize && { maxWidth: cell.column.columnDef.maxSize }),
+                                            ...(cell.column.columnDef.size !== 0 && { width: cell.column.columnDef.size }),
+                                        }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] })] }), paginationControlsProps && _jsx(PaginationControls, { ...paginationControlsProps })] }));
 };
 export default SSITableView;

package/dist/index.d.ts

@@ -25,8 +25,9 @@ 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 PaginationControls from './components/views/SSITableView/PaginationControls';
 import { Row } from '@tanstack/react-table';
 export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
-export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, Row, };
+export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, Row, };

package/dist/index.js

@@ -24,7 +24,8 @@ 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 PaginationControls from './components/views/SSITableView/PaginationControls';
 export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
-export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, };
+export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, };

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

@@ -0,0 +1,4 @@
+export declare const PaginationContainerStyled: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const GoToInputStyled: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const GoToInputContainer: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const PaginationStyled: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;

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

@@ -0,0 +1,66 @@
+import { styled } from '@mui/material/styles';
+import { Pagination, paginationItemClasses } from '@mui/material';
+export const PaginationContainerStyled = styled('div') `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 32px;
+`;
+export const GoToInputStyled = styled('input') `
+  height: 28px;
+  width: 44px;
+  background-color: #fbfbfb;
+  outline: none;
+  color: #303030;
+  font-weight: 500;
+  font-size: 14px;
+  border-radius: 6px;
+  border: 1px #c4c5ca solid;
+  text-align: center;
+  &:focus {
+    border: 1px #7276f7 solid;
+  }
+`;
+export const GoToInputContainer = styled('div') `
+  display: inline-flex;
+  gap: 10px;
+  align-items: center;
+  font-weight: 500;
+  font-size: 14px;
+`;
+export const PaginationStyled = styled(Pagination) `
+    & .${paginationItemClasses.root} {
+      color: #303030;
+      background-color: #FBFBFB;
+      border: 1px #C4C5CA solid;
+      border-radius: 6px;
+      font-size: 14px;
+      min-width: 32px;
+      min-height: 32px;
+      width: 32px;
+      height: 32px;
+      &:hover {
+        background-color: #FBFBFB;
+      },
+    }
+
+    & .${paginationItemClasses.selected} {
+        border: 1px #7276F7 solid;
+        color: #7276F7;
+    },
+
+    & .${paginationItemClasses.previousNext} {
+        color: #C4C5CA;
+    },
+
+    & .${paginationItemClasses.disabled} {
+        color: #C4C5CA;
+        background-color: #8D9099;
+    },
+
+    & .${paginationItemClasses.ellipsis} {
+        user-select: none;
+        display: flex;
+        align-items: end;
+    }
+`;

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

@@ -22,7 +22,7 @@ export const SSITableViewRowContainerStyled = styled.tr `
   background-color: ${backgroundColors.primaryLight};
 
   &:hover {
-    background-color: #ECECEC;
+    background-color: #ececec;
   }
 `;
 export const SSITableViewCellContainerStyled = styled.td `
@@ -48,6 +48,6 @@ export const SSITableViewResultCountCaptionStyled = styled.div `
   margin-left: 24px;
 `;
 export const TableViewRowSelectionCheckboxContainerStyled = styled.div `
-  width: 20px; 
+  width: 20px;
   height: 20px;
 `;

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

@@ -19,3 +19,4 @@ export * from './SSIHoverText';
 export * from './SSICheckbox';
 export * from './ProgressStepIndicator';
 export * from './StepMarker';
+export * from './Pagination';

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

@@ -19,3 +19,4 @@ export * from './SSIHoverText';
 export * from './SSICheckbox';
 export * from './ProgressStepIndicator';
 export * from './StepMarker';
+export * from './Pagination';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.1.3-unstable.122+20d6bee",
+  "version": "0.1.3-unstable.130+25eb3ad",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -28,7 +28,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@sphereon/ui-components.core": "0.1.3-unstable.122+20d6bee",
+    "@mui/icons-material": "^5.15.9",
+    "@mui/material": "^5.15.9",
+    "@mui/styled-engine-sc": "6.0.0-alpha.16",
+    "@sphereon/ui-components.core": "0.1.3-unstable.130+25eb3ad",
     "@tanstack/react-table": "^8.9.3",
     "react-loader-spinner": "^5.4.5",
     "react-toastify": "^9.1.3",
@@ -42,5 +45,5 @@
   "peerDependencies": {
     "react": ">= 16.8.0"
   },
-  "gitHead": "20d6beeecabdfd8fe83e451b9129cccb6a259375"
+  "gitHead": "25eb3ad6a2e88b3b6f86aa535b8ef5b5f0b8c3cc"
 }