@sphereon/ui-components.ssi-react 0.1.1 → 0.1.2-next.12

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

@@ -0,0 +1,65 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import SSITabViewHeader from './SSITabViewHeader';
+var Tab = function (props) {
+    return _jsx(React.Fragment, { children: props.children });
+};
+var SSITabView = function (props) {
+    var _a = props.routes, routes = _a === void 0 ? [] : _a;
+    var _b = React.useState(1), activeTabIndex = _b[0], setActiveTabIndex = _b[1];
+    var _c = React.useState(), content = _c[0], setContent = _c[1];
+    React.useEffect(function () {
+        routes.forEach(function (route, index) {
+            if (index + 1 === activeTabIndex) {
+                setContent(route.content);
+            }
+        });
+    }, [routes, activeTabIndex]);
+    var onTabChange = function (tabIndex) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            setActiveTabIndex(tabIndex);
+            return [2];
+        });
+    }); };
+    return (_jsxs("div", { children: [_jsx(SSITabViewHeader, { navigationState: {
+                    routes: routes,
+                    index: activeTabIndex,
+                }, onIndexChange: onTabChange }), _jsx(Tab, { children: content })] }));
+};
+export default SSITabView;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Button } from '../../../../types';
+export type Props = {
+    enableFiltering?: boolean;
+    actions?: Array<Button>;
+};
+declare const SSITableViewHeader: React.FC<Props>;
+export default SSITableViewHeader;

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

@@ -0,0 +1,50 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Localization } from '@sphereon/ui-components.core';
+import SSIIconButton from '../../../buttons/SSIIconButton';
+import { ButtonIconsEnum } from '../../../../types';
+import SSIDropDownList from '../../../lists/SSIDropDownList';
+import SSIPrimaryButton from '../../../buttons/SSIPrimaryButton';
+import { SSITableViewHeaderActionsContainerStyled as ActionsContainer, SSITableViewHeaderContainerStyled as Container, SSITableViewHeaderContentContainerStyled as ContentContainer, SSITextH3Styled as FilterCaption, SSITableViewHeaderFilterContainerStyled as FilterContainer, SSITableViewHeaderShowOptionContainerStyled as ShowOptionContainer, } from '../../../../styles/components';
+var SSITableViewHeader = function (props) {
+    var _a = props.enableFiltering, enableFiltering = _a === void 0 ? false : _a, _b = props.actions, actions = _b === void 0 ? [] : _b;
+    return (_jsx(Container, { children: _jsx(ContentContainer, { children: _jsxs(ActionsContainer, { children: [enableFiltering && (_jsxs(FilterContainer, { children: [_jsx(SSIIconButton, { icon: ButtonIconsEnum.FILTER, onClick: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+                                    return [2, console.log('add filter clicked')];
+                                }); }); } }), _jsx(FilterCaption, { children: Localization.translate('action_filter_caption') })] })), _jsx(ShowOptionContainer, { children: _jsx(SSIDropDownList, { label: Localization.translate('action_show_caption'), initialValue: 'Most recent' }) }), actions.map(function (action, index) { return (_jsx(SSIPrimaryButton, { caption: action.caption, onClick: action.onClick, icon: action.icon }, index)); })] }) }) }));
+};
+export default SSITableViewHeader;

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

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

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

@@ -0,0 +1,113 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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 { TableCellTypeEnum } from '../../../types';
+import SSITableViewHeader from './SSITableViewHeader';
+import SSITypeLabel from '../../labels/SSITypeLabel';
+import { SSITableViewCellContainerStyled, SSITableViewContainerStyled, SSITableViewHeaderCellContainerStyled, SSITableViewLabelCellStyled, SSITableViewRowContainerStyled, SSITableViewTableContainerStyled, } from '../../../styles/components';
+function IndeterminateCheckbox(_a) {
+    var indeterminate = _a.indeterminate, _b = _a.className, className = _b === void 0 ? '' : _b, rest = __rest(_a, ["indeterminate", "className"]);
+    var ref = React.useRef(null);
+    React.useEffect(function () {
+        if (typeof indeterminate === 'boolean') {
+            ref.current.indeterminate = !rest.checked && indeterminate;
+        }
+    }, [ref, indeterminate]);
+    return _jsx("input", __assign({ type: "checkbox", ref: ref, className: className + ' cursor-pointer' }, rest));
+}
+var getCellFormatting = function (type, value) {
+    switch (type) {
+        case TableCellTypeEnum.TEXT:
+            return _jsx("p", { children: value });
+        case TableCellTypeEnum.LABEL: {
+            var labels = Array.isArray(value) ? value.map(function (label) { return _jsx(SSITypeLabel, { type: label }); }) : _jsx(SSITypeLabel, { type: value });
+            return _jsx(SSITableViewLabelCellStyled, { children: labels });
+        }
+        default:
+            return _jsx("div", {});
+    }
+};
+var SSITableView = function (props) {
+    var columns = props.columns, data = props.data, _a = props.enableRowSelection, enableRowSelection = _a === void 0 ? false : _a, _b = props.enableFiltering, enableFiltering = _b === void 0 ? false : _b, _c = props.columnResizeMode, columnResizeMode = _c === void 0 ? 'onChange' : _c, _d = props.actions, actions = _d === void 0 ? [] : _d;
+    var _e = React.useState({}), rowSelection = _e[0], setRowSelection = _e[1];
+    var columnHelper = createColumnHelper();
+    var availableColumns = columns.map(function (header) {
+        return columnHelper.accessor(header.accessor, {
+            id: header.accessor,
+            header: header.label,
+            cell: function (info) { return getCellFormatting(header.type, info.getValue()); },
+        });
+    });
+    if (enableRowSelection) {
+        availableColumns = __spreadArray([
+            {
+                id: 'select',
+                header: function (_a) {
+                    var table = _a.table;
+                    return (_jsx(IndeterminateCheckbox, __assign({}, {
+                        checked: table.getIsAllRowsSelected(),
+                        indeterminate: table.getIsSomeRowsSelected(),
+                        onChange: table.getToggleAllRowsSelectedHandler(),
+                    })));
+                },
+                cell: function (_a) {
+                    var row = _a.row;
+                    return (_jsx("div", __assign({ className: "px-1" }, { children: _jsx(IndeterminateCheckbox, __assign({}, {
+                            checked: row.getIsSelected(),
+                            disabled: !row.getCanSelect(),
+                            indeterminate: row.getIsSomeSelected(),
+                            onChange: row.getToggleSelectedHandler(),
+                        })) })));
+                },
+            }
+        ], availableColumns, true);
+    }
+    var table = useReactTable({
+        state: {
+            rowSelection: rowSelection,
+        },
+        enableRowSelection: enableRowSelection,
+        onRowSelectionChange: setRowSelection,
+        data: data,
+        columns: availableColumns,
+        columnResizeMode: columnResizeMode,
+        getCoreRowModel: getCoreRowModel(),
+    });
+    return (_jsx(SSITableViewContainerStyled, { children: _jsxs("div", __assign({ className: "overflow-x-auto" }, { children: [_jsx(SSITableViewHeader, { actions: actions, enableFiltering: enableFiltering }), _jsxs(SSITableViewTableContainerStyled, __assign({ style: { width: table.getCenterTotalSize() } }, { children: [_jsx("thead", { children: table.getHeaderGroups().map(function (headerGroup) { return (_jsx(SSITableViewRowContainerStyled, { children: headerGroup.headers.map(function (header) { return (_jsxs(SSITableViewHeaderCellContainerStyled, __assign({ colSpan: header.colSpan, style: { width: header.getSize() } }, { children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), _jsx("div", { className: "resizer ".concat(header.column.getIsResizing() ? 'isResizing' : ''), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), style: {
+                                                transform: columnResizeMode === 'onEnd' && header.column.getIsResizing()
+                                                    ? "translateX(".concat(table.getState().columnSizingInfo.deltaOffset, "px)")
+                                                    : '',
+                                            } })] }), header.id)); }) }, headerGroup.id)); }) }), _jsx("tbody", { children: table.getRowModel().rows.map(function (row) { return (_jsx(SSITableViewRowContainerStyled, { children: row.getVisibleCells().map(function (cell) { return (_jsx(SSITableViewCellContainerStyled, __assign({ style: { width: cell.column.getSize() } }, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }), cell.id)); }) }, row.id)); }) })] }))] })) }));
+};
+export default SSITableView;

package/dist/index.d.ts

@@ -4,4 +4,18 @@ 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';
-export { SSICardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo };
+import SSIAddIcon from './components/assets/icons/SSIAddIcon';
+import SSIFilterIcon from './components/assets/icons/SSIFilterIcon';
+import SSIArrowDownIcon from './components/assets/icons/SSIArrowDownIcon';
+import SSITypeLabel from './components/labels/SSITypeLabel';
+import SSIIconButton from './components/buttons/SSIIconButton';
+import SSIPrimaryButton from './components/buttons/SSIPrimaryButton';
+import SSIDropDownList from './components/lists/SSIDropDownList';
+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';
+export * from './types';
+export * from './styles/components/fonts';
+export { SSICardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, };

package/dist/index.js

@@ -4,4 +4,18 @@ 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';
-export { SSICardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo };
+import SSIAddIcon from './components/assets/icons/SSIAddIcon';
+import SSIFilterIcon from './components/assets/icons/SSIFilterIcon';
+import SSIArrowDownIcon from './components/assets/icons/SSIArrowDownIcon';
+import SSITypeLabel from './components/labels/SSITypeLabel';
+import SSIIconButton from './components/buttons/SSIIconButton';
+import SSIPrimaryButton from './components/buttons/SSIPrimaryButton';
+import SSIDropDownList from './components/lists/SSIDropDownList';
+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';
+export * from './types';
+export * from './styles/components/fonts';
+export { SSICardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, };

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

@@ -1,59 +1,21 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import styled from 'styled-components';
 import { SSIFlexDirectionColumnViewStyled, SSIFlexDirectionRowViewStyled, SSIRoundedContainerStyled } from '../../containers';
 import { SSITextH4SemiBoldLightStyled, SSITextH5LightStyled } from '../../fonts';
-export const SSICardViewContainerStyled = styled(SSIRoundedContainerStyled) `
-  width: 327px;
-  height: 186px;
-  display: flex;
-  flex-direction: column;
-  user-select: none;
-`;
-export const SSICardViewBackgroundImageStyled = styled(SSIFlexDirectionColumnViewStyled) `
-  flex-grow: 1;
-`;
-export const SSICardViewHeaderContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
-  height: 32px;
-  margin-top: 16px;
-`;
-export const SSICardViewHeaderLogoContainerStyled = styled.div `
-  margin-left: 9px;
-  margin-right: 12px;
-`;
-export const SSICardViewHeaderTitleContainerStyled = styled.div `
-  text-align: end;
-  margin: 0px 13px 0px auto;
-`;
-export const SSICardViewContentMainContainerStyled = styled.div `
-  display: flex;
-  flex-grow: 1;
-`;
-export const SSICardViewContentSubContainerStyled = styled.div `
-  margin-top: auto;
-`;
-export const SSICardViewContentIssueNameContainerStyled = styled.div `
-  padding: 2px 9px 2px 12px;
-`;
-export const SSICardViewContentPropertiesContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
-  justify-content: flex-start;
-  margin: 1px 0px 1px 0px;
-  padding: 2px 9px 4px 12px;
-`;
-export const SSICardViewFooterContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
-  margin-top: auto;
-  backdrop-filter: blur(3px);
-  background-color: rgba(255, 255, 255, 0.25);
-  padding: 12px;
-`;
-export const SSICardViewCredentialTitleTextStyled = styled(SSITextH4SemiBoldLightStyled) `
-  word-break: break-all;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-`;
-export const SSICardViewCredentialSubtitleTextStyled = styled(SSITextH5LightStyled) `
-  text-align: right;
-`;
-export const SSICardViewSSICredentialStatusStyled = styled.div `
-  margin-left: auto;
-`;
+export var SSICardViewContainerStyled = styled(SSIRoundedContainerStyled)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 327px;\n  height: 186px;\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n"], ["\n  width: 327px;\n  height: 186px;\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n"])));
+export var SSICardViewBackgroundImageStyled = styled(SSIFlexDirectionColumnViewStyled)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
+export var SSICardViewHeaderContainerStyled = styled(SSIFlexDirectionRowViewStyled)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  margin-top: 16px;\n"], ["\n  height: 32px;\n  margin-top: 16px;\n"])));
+export var SSICardViewHeaderLogoContainerStyled = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: 9px;\n  margin-right: 12px;\n"], ["\n  margin-left: 9px;\n  margin-right: 12px;\n"])));
+export var SSICardViewHeaderTitleContainerStyled = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  text-align: end;\n  margin: 0px 13px 0px auto;\n"], ["\n  text-align: end;\n  margin: 0px 13px 0px auto;\n"])));
+export var SSICardViewContentMainContainerStyled = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-grow: 1;\n"], ["\n  display: flex;\n  flex-grow: 1;\n"])));
+export var SSICardViewContentSubContainerStyled = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-top: auto;\n"], ["\n  margin-top: auto;\n"])));
+export var SSICardViewContentIssueNameContainerStyled = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding: 2px 9px 2px 12px;\n"], ["\n  padding: 2px 9px 2px 12px;\n"])));
+export var SSICardViewContentPropertiesContainerStyled = styled(SSIFlexDirectionRowViewStyled)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  justify-content: flex-start;\n  margin: 1px 0px 1px 0px;\n  padding: 2px 9px 4px 12px;\n"], ["\n  justify-content: flex-start;\n  margin: 1px 0px 1px 0px;\n  padding: 2px 9px 4px 12px;\n"])));
+export var SSICardViewFooterContainerStyled = styled(SSIFlexDirectionRowViewStyled)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  margin-top: auto;\n  backdrop-filter: blur(3px);\n  background-color: rgba(255, 255, 255, 0.25);\n  padding: 12px;\n"], ["\n  margin-top: auto;\n  backdrop-filter: blur(3px);\n  background-color: rgba(255, 255, 255, 0.25);\n  padding: 12px;\n"])));
+export var SSICardViewCredentialTitleTextStyled = styled(SSITextH4SemiBoldLightStyled)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  word-break: break-all;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n"], ["\n  word-break: break-all;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n"])));
+export var SSICardViewCredentialSubtitleTextStyled = styled(SSITextH5LightStyled)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  text-align: right;\n"], ["\n  text-align: right;\n"])));
+export var SSICardViewSSICredentialStatusStyled = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  margin-left: auto;\n"], ["\n  margin-left: auto;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

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

@@ -0,0 +1,2 @@
+export declare const SSIDropDownListContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSIDropDownListSelectedValueStyled: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -0,0 +1,11 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+import { SSIFlexDirectionRowViewStyled } from '../../containers';
+import { gradientColors } from '@sphereon/ui-components.core';
+import { SSITextH3Styled } from '../../fonts';
+export var SSIDropDownListContainerStyled = styled(SSIFlexDirectionRowViewStyled)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-align: left;\n  align-items: center;\n  gap: 2px;\n"], ["\n  text-align: left;\n  align-items: center;\n  gap: 2px;\n"])));
+export var SSIDropDownListSelectedValueStyled = styled(SSITextH3Styled)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n  background-clip: text;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n"], ["\n  background: ", ";\n  background-clip: text;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n"])), gradientColors['100']);
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1 @@
+export declare const SSIIconButtonContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+export var SSIIconButtonContainerStyled = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 32px;\n  aspect-ratio: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  width: 32px;\n  aspect-ratio: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n"])));
+var templateObject_1;

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

@@ -0,0 +1 @@
+export declare const SSIPrimaryButtonContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,9 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+import { SSIRoundedContainerStyled } from '../../containers';
+import { gradientColors } from '@sphereon/ui-components.core';
+export var SSIPrimaryButtonContainerStyled = styled(SSIRoundedContainerStyled)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 8px 6px 8px;\n  cursor: pointer;\n"], ["\n  background: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 8px 6px 8px;\n  cursor: pointer;\n"])), gradientColors['100']);
+var templateObject_1;

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

@@ -0,0 +1 @@
+export declare const SSIProfileIconContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+export var SSIProfileIconContainerStyled = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 38px;\n  height: 38px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 19px;\n"], ["\n  width: 38px;\n  height: 38px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 19px;\n"])));
+var templateObject_1;

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

@@ -1,15 +1,11 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import styled from 'styled-components';
 import { SSIFlexDirectionRowViewStyled } from '../../containers';
 import { SSITextH5LightStyled } from '../../fonts';
-export const SSIStatusLabelContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
-  border-radius: 9px;
-  border: 1px solid #000;
-`;
-export const SSIStatusLabelStatusCaptionStyled = styled(SSITextH5LightStyled) `
-  margin-left: 7px;
-  margin-right: 7px;
-`;
-export const SSIStatusLabelBadgeContainer = styled.div `
-  margin-top: auto;
-  margin-bottom: auto;
-`;
+export var SSIStatusLabelContainerStyled = styled(SSIFlexDirectionRowViewStyled)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 9px;\n  border: 1px solid #000;\n"], ["\n  border-radius: 9px;\n  border: 1px solid #000;\n"])));
+export var SSIStatusLabelStatusCaptionStyled = styled(SSITextH5LightStyled)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-left: 7px;\n  margin-right: 7px;\n"], ["\n  margin-left: 7px;\n  margin-right: 7px;\n"])));
+export var SSIStatusLabelBadgeContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: auto;\n  margin-bottom: auto;\n"], ["\n  margin-top: auto;\n  margin-bottom: auto;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,2 @@
+export declare const SSITabViewHeaderContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITabViewHeaderTitleContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,8 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+export var SSITabViewHeaderContainerStyled = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  gap: 84px;\n  margin-left: 66px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  gap: 84px;\n  margin-left: 66px;\n"])));
+export var SSITabViewHeaderTitleContainerStyled = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,6 @@
+export declare const SSITableViewContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITableViewLabelCellStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITableViewTableContainerStyled: import("styled-components").StyledComponent<"table", any, {}, never>;
+export declare const SSITableViewRowContainerStyled: import("styled-components").StyledComponent<"tr", any, {}, never>;
+export declare const SSITableViewCellContainerStyled: import("styled-components").StyledComponent<"td", any, {}, never>;
+export declare const SSITableViewHeaderCellContainerStyled: import("styled-components").StyledComponent<"th", any, {}, never>;

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

@@ -0,0 +1,14 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+import { backgroundColors, borderColors, fontColors } from '@sphereon/ui-components.core';
+import { SSITextH2Css, SSITextH3Css } from '../../../css';
+export var SSITableViewContainerStyled = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex-grow: 1;\n  flex-direction: column;\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex-grow: 1;\n  flex-direction: column;\n"])), backgroundColors.lightGrey);
+export var SSITableViewLabelCellStyled = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n"])));
+export var SSITableViewTableContainerStyled = styled.table(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  user-select: text;\n  width: fit-content;\n  border-collapse: collapse;\n"], ["\n  user-select: text;\n  width: fit-content;\n  border-collapse: collapse;\n"])));
+export var SSITableViewRowContainerStyled = styled.tr(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n"], ["\n  border-bottom: 1px solid ", ";\n"])), borderColors.lightGrey);
+export var SSITableViewCellContainerStyled = styled.td(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  color: ", ";\n  background-color: ", ";\n  padding: 20px 16px 20px 16px;\n  text-align: left;\n"], ["\n  ", ";\n  color: ", ";\n  background-color: ", ";\n  padding: 20px 16px 20px 16px;\n  text-align: left;\n"])), SSITextH3Css, fontColors.dark, backgroundColors.primaryLight);
+export var SSITableViewHeaderCellContainerStyled = styled.th(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n  position: relative;\n  padding: 20px 16px 20px 16px;\n  background-color: ", ";\n  color: ", ";\n"], ["\n  ", ";\n  position: relative;\n  padding: 20px 16px 20px 16px;\n  background-color: ", ";\n  color: ", ";\n"])), SSITextH2Css, backgroundColors.primaryLight, fontColors.lightGrey);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -0,0 +1,5 @@
+export declare const SSITableViewHeaderContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITableViewHeaderContentContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITableViewHeaderActionsContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITableViewHeaderFilterContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITableViewHeaderShowOptionContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+import { SSIFlexDirectionRowViewStyled } from '../../containers';
+import { backgroundColors } from '@sphereon/ui-components.core';
+export var SSITableViewHeaderContainerStyled = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n"], ["\n  background-color: ", ";\n  display: flex;\n"])), backgroundColors.primaryLight);
+export var SSITableViewHeaderContentContainerStyled = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 48px;\n  margin-left: auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: 24px;\n"], ["\n  height: 48px;\n  margin-left: auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: 24px;\n"])));
+export var SSITableViewHeaderActionsContainerStyled = styled(SSIFlexDirectionRowViewStyled)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  gap: 50px;\n"], ["\n  height: 32px;\n  gap: 50px;\n"])));
+export var SSITableViewHeaderFilterContainerStyled = styled(SSIFlexDirectionRowViewStyled)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 32px;\n  align-items: center;\n  gap: 8px;\n"], ["\n  height: 32px;\n  align-items: center;\n  gap: 8px;\n"])));
+export var SSITableViewHeaderShowOptionContainerStyled = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  text-align: left;\n  align-items: center;\n"], ["\n  display: flex;\n  text-align: left;\n  align-items: center;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1 @@
+export declare const SSITypeLabelContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,9 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+import { SSIRoundedContainerStyled } from '../../containers';
+import { fontColors } from '@sphereon/ui-components.core';
+export var SSITypeLabelContainerStyled = styled(SSIRoundedContainerStyled)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  padding: 1px 12px;\n  justify-content: center;\n  align-items: center;\n  color: ", ";\n  user-select: none;\n"], ["\n  display: flex;\n  padding: 1px 12px;\n  justify-content: center;\n  align-items: center;\n  color: ", ";\n  user-select: none;\n"])), fontColors.light);
+var templateObject_1;

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

@@ -1,2 +1,9 @@
 export * from './SSICardView';
 export * from './SSIStatusLabel';
+export * from './SSIPrimaryButton';
+export * from './SSIIconButton';
+export * from './SSIDropDownList';
+export * from './SSITypeLabel';
+export * from './SSITableViewHeader';
+export * from './SSITableView';
+export * from './SSITabViewHeader';

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

@@ -1,2 +1,9 @@
 export * from './SSICardView';
 export * from './SSIStatusLabel';
+export * from './SSIPrimaryButton';
+export * from './SSIIconButton';
+export * from './SSIDropDownList';
+export * from './SSITypeLabel';
+export * from './SSITableViewHeader';
+export * from './SSITableView';
+export * from './SSITabViewHeader';

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

@@ -1,18 +1,11 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import styled from 'styled-components';
 import { SSIRoundedEdgesCss } from '@sphereon/ui-components.core';
-export const SSIFlexDirectionRowViewStyled = styled.div `
-  display: flex;
-  flex-direction: row;
-`;
-export const SSIFlexDirectionColumnViewStyled = styled.div `
-  display: flex;
-  flex-direction: column;
-`;
-export const SSIAlphaContainerStyled = styled(SSIFlexDirectionColumnViewStyled) `
-  flex-grow: 1;
-  background-color: rgba(0, 0, 0, 0.2);
-`;
-export const SSIRoundedContainerStyled = styled.div `
-  ${SSIRoundedEdgesCss};
-  overflow: hidden;
-`;
+export var SSIFlexDirectionRowViewStyled = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n"], ["\n  display: flex;\n  flex-direction: row;\n"])));
+export var SSIFlexDirectionColumnViewStyled = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+export var SSIAlphaContainerStyled = styled(SSIFlexDirectionColumnViewStyled)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-grow: 1;\n  background-color: rgba(0, 0, 0, 0.2);\n"], ["\n  flex-grow: 1;\n  background-color: rgba(0, 0, 0, 0.2);\n"])));
+export var SSIRoundedContainerStyled = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  overflow: hidden;\n"], ["\n  ", ";\n  overflow: hidden;\n"])), SSIRoundedEdgesCss);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -1,3 +1,7 @@
+export declare const SSITextH1Styled: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SSITextH2Styled: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SSITextH3Styled: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SSITextH3LightStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SSITextH4Styled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SSITextH4SemiBoldStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SSITextH4LightStyled: import("styled-components").StyledComponent<"span", any, {}, never>;