@sphereon/ui-components.ssi-react 0.4.0 → 0.4.1-unstable.3

package/dist/components/assets/icons/CapitolIcon/index.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties, FC } from 'react';
+type Props = {
+    width?: number;
+    height?: number;
+    color?: string;
+    style?: CSSProperties;
+};
+declare const CapitolIcon: FC<Props>;
+export default CapitolIcon;

package/dist/components/assets/icons/CapitolIcon/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+const CapitolIcon = (props) => {
+    const { width = 18, height = 24, color = fontColors.dark, style } = props;
+    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 18 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("mask", { id: "path-1-inside-1_1397_323", fill: color, children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.91639 23.3759H14.0822L14.0832 22.8517H3.91637L3.91639 23.3759ZM17.4455 14.6074V21.4691H17.6869C17.8597 21.4691 17.9998 21.6086 17.9998 21.7807V22.7914C17.9998 22.9635 17.8597 23.103 17.6869 23.103H14.7091V23.6875C14.7091 23.8596 14.569 23.999 14.3962 23.999L3.60356 24C3.43074 24 3.29068 23.8606 3.29068 23.6885V23.104L0.312884 23.103C0.140056 23.103 0 22.9635 0 22.7914V21.7807C0 21.6086 0.140049 21.4691 0.312884 21.4691H0.554245V14.6074H0.312884C0.140056 14.6074 0 14.468 0 14.2959V13.3504C0 13.1783 0.140049 13.0389 0.312884 13.0389H3.64336L3.8142 12.9776V10.2916H3.68408C3.51126 10.2916 3.3712 10.1521 3.3712 9.98001C3.3712 9.80793 3.51125 9.66848 3.68408 9.66848H4.17178C4.24925 8.4629 4.7727 7.37698 5.57923 6.57384C6.23279 5.92309 7.07408 5.45726 8.0137 5.26343V4.95784C8.0137 4.49102 8.27392 4.19039 8.60766 4.05687C8.63249 4.04698 8.65732 4.03808 8.68314 4.03016V2.53282L8.68414 0.653739V0.311539C8.68414 0.139455 8.82419 0 8.99702 0C9.16985 0 9.30991 0.139447 9.30991 0.311539V0.34022H12.0184C12.1913 0.34022 12.3313 0.479667 12.3313 0.651759V2.53479C12.3313 2.70688 12.1913 2.84633 12.0184 2.84633H9.30991V4.02818C9.33772 4.03708 9.36453 4.04599 9.39135 4.05686C9.72608 4.19038 9.9863 4.49102 9.9863 4.95783V5.26342C10.9259 5.45727 11.7672 5.92309 12.4208 6.57384C13.2273 7.3769 13.7507 8.46181 13.8282 9.66847H14.3159C14.4887 9.66847 14.6288 9.80792 14.6288 9.98001C14.6288 10.1521 14.4888 10.2916 14.3159 10.2916H14.1858V12.9765L14.3566 13.0379H17.6871C17.8599 13.0379 18 13.1773 18 13.3494V14.2949C18 14.467 17.86 14.6064 17.6871 14.6064L17.4455 14.6074ZM16.8188 21.4691V14.6074H14.6177V14.8903C14.6177 15.0624 14.4777 15.2018 14.3049 15.2018H13.7V21.4691L16.8188 21.4691ZM1.17995 14.6074V21.4691H4.29989V15.2019H3.695C3.52217 15.2019 3.38112 15.0625 3.38112 14.8904V14.6075L1.17995 14.6074ZM4.29989 22.092H0.625889V22.4796H3.29678C3.32558 22.3362 3.45173 22.2284 3.60369 22.2284H4.29996L4.29989 22.092ZM14.7032 22.4796H17.3741V22.092H13.7001V22.2285H14.3964C14.5484 22.2285 14.6754 22.3362 14.7032 22.4796ZM9.30984 0.963293V2.22327H11.7046V0.963293H9.30984ZM8.64039 5.17648C8.75958 5.16758 8.87976 5.16362 8.99995 5.16362C9.12113 5.16362 9.24132 5.16857 9.35952 5.17648V4.95791C9.35952 4.78682 9.27112 4.67901 9.15789 4.63354C9.10922 4.61475 9.05559 4.60486 8.99897 4.60486C8.94235 4.60486 8.88872 4.61475 8.83906 4.63354C8.72583 4.67903 8.63842 4.78584 8.63842 4.95791L8.63941 5.17648H8.64039ZM13.1995 9.66842C13.123 8.63494 12.6711 7.70528 11.9778 7.01508C11.4871 6.52652 10.8763 6.15763 10.1929 5.95785C10.5793 6.31785 10.916 6.74013 11.1902 7.20299C11.6332 7.95165 11.9113 8.80614 11.9659 9.66954L13.1995 9.66842ZM7.80713 5.9578C7.12377 6.15856 6.51293 6.52647 6.02226 7.01503C5.32995 7.70536 4.87704 8.63499 4.80055 9.66837H6.03518C6.0898 8.80497 6.36693 7.9515 6.81091 7.20183C7.08405 6.73998 7.42074 6.3178 7.80713 5.9578ZM6.66191 9.66842H8.68715V6.04185C8.15178 6.42261 7.69289 6.93391 7.34824 7.51643C6.96088 8.17113 6.71653 8.91579 6.66191 9.66842ZM9.31297 9.66842H11.3382C11.2846 8.91579 11.0392 8.17108 10.6519 7.51638C10.3072 6.93386 9.84933 6.42256 9.31297 6.0418V9.66842ZM13.5601 10.2915H12.7943V12.4752L13.5601 12.7511V10.2915ZM12.1675 10.2915H11.4017V11.9747L12.1675 12.2506V10.2915ZM10.775 10.2915H10.0092V11.4733L10.775 11.7492V10.2915ZM9.38243 10.2915H8.61664V11.2478L8.89375 11.1479C8.96526 11.1222 9.03975 11.1242 9.10729 11.1479L9.38341 11.2478L9.38243 10.2915ZM7.99087 10.2915H7.22508V11.7492L7.99087 11.4733V10.2915ZM6.59832 10.2915H5.83252V12.2507L6.59832 11.9748V10.2915ZM5.20675 10.2915H4.44096V12.7511L5.20675 12.4752V10.2915ZM4.2562 13.479C4.2413 13.4859 4.2264 13.4909 4.21051 13.4958L4.0069 13.569V14.5788L13.993 14.5778V13.569L13.7894 13.4958C13.7735 13.4909 13.7586 13.4859 13.7437 13.479L12.3978 12.9944C12.3819 12.9895 12.367 12.9845 12.3521 12.9776L11.0052 12.493C10.9894 12.489 10.9745 12.4831 10.9596 12.4762L9.61369 11.9916C9.5978 11.9866 9.58191 11.9817 9.568 11.9747L8.99985 11.772L8.43269 11.9757C8.41779 11.9827 8.40289 11.9876 8.387 11.9925L7.04014 12.4772C7.02524 12.4841 7.01034 12.489 6.99445 12.494L5.64759 12.9786C5.63269 12.9855 5.61779 12.9905 5.6019 12.9954L4.2562 13.479ZM3.38115 13.662H0.625838V13.9844H3.38115V13.662ZM14.6188 13.9844H17.3741V13.662H14.6188V13.9844ZM13.0743 15.2018H4.92555V22.2286H6.75116V18.8383C6.75116 17.7722 7.33917 17.0887 8.09205 16.7871C8.38009 16.6714 8.69099 16.614 8.99988 16.614C9.30877 16.614 9.61967 16.6714 9.90771 16.7871C10.6606 17.0887 11.2486 17.7731 11.2486 18.8383V22.2296H13.0742V21.7816L13.0752 15.202L13.0743 15.2018ZM10.6229 22.2286V18.8383C10.6229 18.0679 10.2077 17.5773 9.67533 17.3647C9.46377 17.2806 9.23333 17.2381 8.99993 17.2381C8.76653 17.2381 8.53509 17.2806 8.32453 17.3647C7.79315 17.5773 7.37695 18.0679 7.37695 18.8383V22.2296L10.6229 22.2286Z" }) }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.91639 23.3759H14.0822L14.0832 22.8517H3.91637L3.91639 23.3759ZM17.4455 14.6074V21.4691H17.6869C17.8597 21.4691 17.9998 21.6086 17.9998 21.7807V22.7914C17.9998 22.9635 17.8597 23.103 17.6869 23.103H14.7091V23.6875C14.7091 23.8596 14.569 23.999 14.3962 23.999L3.60356 24C3.43074 24 3.29068 23.8606 3.29068 23.6885V23.104L0.312884 23.103C0.140056 23.103 0 22.9635 0 22.7914V21.7807C0 21.6086 0.140049 21.4691 0.312884 21.4691H0.554245V14.6074H0.312884C0.140056 14.6074 0 14.468 0 14.2959V13.3504C0 13.1783 0.140049 13.0389 0.312884 13.0389H3.64336L3.8142 12.9776V10.2916H3.68408C3.51126 10.2916 3.3712 10.1521 3.3712 9.98001C3.3712 9.80793 3.51125 9.66848 3.68408 9.66848H4.17178C4.24925 8.4629 4.7727 7.37698 5.57923 6.57384C6.23279 5.92309 7.07408 5.45726 8.0137 5.26343V4.95784C8.0137 4.49102 8.27392 4.19039 8.60766 4.05687C8.63249 4.04698 8.65732 4.03808 8.68314 4.03016V2.53282L8.68414 0.653739V0.311539C8.68414 0.139455 8.82419 0 8.99702 0C9.16985 0 9.30991 0.139447 9.30991 0.311539V0.34022H12.0184C12.1913 0.34022 12.3313 0.479667 12.3313 0.651759V2.53479C12.3313 2.70688 12.1913 2.84633 12.0184 2.84633H9.30991V4.02818C9.33772 4.03708 9.36453 4.04599 9.39135 4.05686C9.72608 4.19038 9.9863 4.49102 9.9863 4.95783V5.26342C10.9259 5.45727 11.7672 5.92309 12.4208 6.57384C13.2273 7.3769 13.7507 8.46181 13.8282 9.66847H14.3159C14.4887 9.66847 14.6288 9.80792 14.6288 9.98001C14.6288 10.1521 14.4888 10.2916 14.3159 10.2916H14.1858V12.9765L14.3566 13.0379H17.6871C17.8599 13.0379 18 13.1773 18 13.3494V14.2949C18 14.467 17.86 14.6064 17.6871 14.6064L17.4455 14.6074ZM16.8188 21.4691V14.6074H14.6177V14.8903C14.6177 15.0624 14.4777 15.2018 14.3049 15.2018H13.7V21.4691L16.8188 21.4691ZM1.17995 14.6074V21.4691H4.29989V15.2019H3.695C3.52217 15.2019 3.38112 15.0625 3.38112 14.8904V14.6075L1.17995 14.6074ZM4.29989 22.092H0.625889V22.4796H3.29678C3.32558 22.3362 3.45173 22.2284 3.60369 22.2284H4.29996L4.29989 22.092ZM14.7032 22.4796H17.3741V22.092H13.7001V22.2285H14.3964C14.5484 22.2285 14.6754 22.3362 14.7032 22.4796ZM9.30984 0.963293V2.22327H11.7046V0.963293H9.30984ZM8.64039 5.17648C8.75958 5.16758 8.87976 5.16362 8.99995 5.16362C9.12113 5.16362 9.24132 5.16857 9.35952 5.17648V4.95791C9.35952 4.78682 9.27112 4.67901 9.15789 4.63354C9.10922 4.61475 9.05559 4.60486 8.99897 4.60486C8.94235 4.60486 8.88872 4.61475 8.83906 4.63354C8.72583 4.67903 8.63842 4.78584 8.63842 4.95791L8.63941 5.17648H8.64039ZM13.1995 9.66842C13.123 8.63494 12.6711 7.70528 11.9778 7.01508C11.4871 6.52652 10.8763 6.15763 10.1929 5.95785C10.5793 6.31785 10.916 6.74013 11.1902 7.20299C11.6332 7.95165 11.9113 8.80614 11.9659 9.66954L13.1995 9.66842ZM7.80713 5.9578C7.12377 6.15856 6.51293 6.52647 6.02226 7.01503C5.32995 7.70536 4.87704 8.63499 4.80055 9.66837H6.03518C6.0898 8.80497 6.36693 7.9515 6.81091 7.20183C7.08405 6.73998 7.42074 6.3178 7.80713 5.9578ZM6.66191 9.66842H8.68715V6.04185C8.15178 6.42261 7.69289 6.93391 7.34824 7.51643C6.96088 8.17113 6.71653 8.91579 6.66191 9.66842ZM9.31297 9.66842H11.3382C11.2846 8.91579 11.0392 8.17108 10.6519 7.51638C10.3072 6.93386 9.84933 6.42256 9.31297 6.0418V9.66842ZM13.5601 10.2915H12.7943V12.4752L13.5601 12.7511V10.2915ZM12.1675 10.2915H11.4017V11.9747L12.1675 12.2506V10.2915ZM10.775 10.2915H10.0092V11.4733L10.775 11.7492V10.2915ZM9.38243 10.2915H8.61664V11.2478L8.89375 11.1479C8.96526 11.1222 9.03975 11.1242 9.10729 11.1479L9.38341 11.2478L9.38243 10.2915ZM7.99087 10.2915H7.22508V11.7492L7.99087 11.4733V10.2915ZM6.59832 10.2915H5.83252V12.2507L6.59832 11.9748V10.2915ZM5.20675 10.2915H4.44096V12.7511L5.20675 12.4752V10.2915ZM4.2562 13.479C4.2413 13.4859 4.2264 13.4909 4.21051 13.4958L4.0069 13.569V14.5788L13.993 14.5778V13.569L13.7894 13.4958C13.7735 13.4909 13.7586 13.4859 13.7437 13.479L12.3978 12.9944C12.3819 12.9895 12.367 12.9845 12.3521 12.9776L11.0052 12.493C10.9894 12.489 10.9745 12.4831 10.9596 12.4762L9.61369 11.9916C9.5978 11.9866 9.58191 11.9817 9.568 11.9747L8.99985 11.772L8.43269 11.9757C8.41779 11.9827 8.40289 11.9876 8.387 11.9925L7.04014 12.4772C7.02524 12.4841 7.01034 12.489 6.99445 12.494L5.64759 12.9786C5.63269 12.9855 5.61779 12.9905 5.6019 12.9954L4.2562 13.479ZM3.38115 13.662H0.625838V13.9844H3.38115V13.662ZM14.6188 13.9844H17.3741V13.662H14.6188V13.9844ZM13.0743 15.2018H4.92555V22.2286H6.75116V18.8383C6.75116 17.7722 7.33917 17.0887 8.09205 16.7871C8.38009 16.6714 8.69099 16.614 8.99988 16.614C9.30877 16.614 9.61967 16.6714 9.90771 16.7871C10.6606 17.0887 11.2486 17.7731 11.2486 18.8383V22.2296H13.0742V21.7816L13.0752 15.202L13.0743 15.2018ZM10.6229 22.2286V18.8383C10.6229 18.0679 10.2077 17.5773 9.67533 17.3647C9.46377 17.2806 9.23333 17.2381 8.99993 17.2381C8.76653 17.2381 8.53509 17.2806 8.32453 17.3647C7.79315 17.5773 7.37695 18.0679 7.37695 18.8383V22.2296L10.6229 22.2286Z", fill: color, stroke: color, strokeWidth: "2", mask: "url(#path-1-inside-1_1397_323)" })] }) }));
+};
+export default CapitolIcon;

package/dist/components/assets/icons/ChevronIcon/index.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties, FC } from 'react';
+import { ChevronDirection } from '../../../../types';
+type Props = {
+    direction?: ChevronDirection;
+    width?: number;
+    height?: number;
+    color?: string;
+    style?: CSSProperties;
+};
+declare const ChevronIcon: FC<Props>;
+export default ChevronIcon;

package/dist/components/assets/icons/ChevronIcon/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+const ChevronIcon = (props) => {
+    const { width = 12, height = 6, color = fontColors.dark, style, direction = 'up' } = props;
+    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: '100%', height: '100%', viewBox: '0 0 12 6', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("path", { d: 'M5.97552 0.188355C5.88787 0.193687 5.80451 0.229014 5.73881 0.28867L0.514995 5.10376C0.474764 5.13833 0.441729 5.18082 0.41785 5.22872C0.393972 5.27662 0.379738 5.32895 0.375995 5.3826C0.372252 5.43624 0.379076 5.49011 0.396062 5.541C0.413047 5.5919 0.439848 5.63876 0.474871 5.67884C0.509894 5.71891 0.552425 5.75137 0.599937 5.77428C0.647448 5.79719 0.698971 5.81007 0.751444 5.81218C0.803916 5.81429 0.856267 5.80558 0.905387 5.78657C0.954506 5.76755 0.999391 5.73861 1.03738 5.70148L6 1.12881L10.9626 5.70148C11.0006 5.73861 11.0455 5.76755 11.0946 5.78657C11.1437 5.80558 11.1961 5.8143 11.2486 5.81219C11.301 5.81008 11.3526 5.79719 11.4001 5.77428C11.4476 5.75137 11.4901 5.71891 11.5251 5.67884C11.5602 5.63876 11.587 5.5919 11.6039 5.541C11.6209 5.49011 11.6277 5.43624 11.624 5.3826C11.6203 5.32895 11.606 5.27662 11.5821 5.22872C11.5583 5.18082 11.5252 5.13833 11.485 5.10376L6.26119 0.28867C6.22242 0.253425 6.17721 0.226416 6.12817 0.209197C6.07913 0.191978 6.02724 0.18489 5.97552 0.188355V0.188355Z', fill: color, ...(direction === 'down' && { transform: `scale(1, -1) translate(0, -${height})` }) }) }) }));
+};
+export default ChevronIcon;

package/dist/components/assets/icons/LaptopIcon/index.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, FC } from 'react';
+type Props = {
+    size?: number;
+    color?: string;
+    style?: CSSProperties;
+};
+declare const LaptopIcon: FC<Props>;
+export default LaptopIcon;

package/dist/components/assets/icons/LaptopIcon/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+const LaptopIcon = (props) => {
+    const { size = 18, color = fontColors.dark, style } = props;
+    return (_jsx("div", { style: { ...style, width: size, height: size, display: 'flex' }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("mask", { id: "path-1-inside-1_1397_283", fill: color, children: _jsx("path", { d: "M17.97 15.7659L16.2 12.2292V2.69999C16.2 2.46129 16.1052 2.23237 15.9364 2.06359C15.7676 1.89481 15.5387 1.79999 15.3 1.79999H13.2V2.39999H15.3C15.3796 2.39999 15.4559 2.43159 15.5121 2.48786C15.5684 2.54412 15.6 2.62042 15.6 2.69999V12H2.4V2.69999C2.4 2.62042 2.43161 2.54412 2.48787 2.48786C2.54413 2.43159 2.62044 2.39999 2.7 2.39999H4.8V1.79999H2.7C2.46131 1.79999 2.23239 1.89481 2.0636 2.06359C1.89482 2.23237 1.8 2.46129 1.8 2.69999V12.2292L0.0315001 15.7659C0.010741 15.8075 -4.3289e-05 15.8534 1.30593e-07 15.9V17.4C1.30593e-07 17.5591 0.0632142 17.7117 0.175736 17.8243C0.288258 17.9368 0.44087 18 0.6 18H17.4C17.5591 18 17.7117 17.9368 17.8243 17.8243C17.9368 17.7117 18 17.5591 18 17.4V15.9C18.0005 15.8536 17.9902 15.8077 17.97 15.7659ZM15.7146 12.6L17.2146 15.6H0.7854L2.2854 12.6H15.7146ZM8.1 16.2H9.9V16.5H8.1V16.2ZM0.6 17.4V16.2H7.5V16.5C7.5 16.6591 7.56321 16.8117 7.67574 16.9243C7.78826 17.0368 7.94087 17.1 8.1 17.1H9.9C10.0591 17.1 10.2117 17.0368 10.3243 16.9243C10.4368 16.8117 10.5 16.6591 10.5 16.5V16.2H17.4V17.4H0.6Z" }) }), _jsx("path", { d: "M17.97 15.7659L16.2 12.2292V2.69999C16.2 2.46129 16.1052 2.23237 15.9364 2.06359C15.7676 1.89481 15.5387 1.79999 15.3 1.79999H13.2V2.39999H15.3C15.3796 2.39999 15.4559 2.43159 15.5121 2.48786C15.5684 2.54412 15.6 2.62042 15.6 2.69999V12H2.4V2.69999C2.4 2.62042 2.43161 2.54412 2.48787 2.48786C2.54413 2.43159 2.62044 2.39999 2.7 2.39999H4.8V1.79999H2.7C2.46131 1.79999 2.23239 1.89481 2.0636 2.06359C1.89482 2.23237 1.8 2.46129 1.8 2.69999V12.2292L0.0315001 15.7659C0.010741 15.8075 -4.3289e-05 15.8534 1.30593e-07 15.9V17.4C1.30593e-07 17.5591 0.0632142 17.7117 0.175736 17.8243C0.288258 17.9368 0.44087 18 0.6 18H17.4C17.5591 18 17.7117 17.9368 17.8243 17.8243C17.9368 17.7117 18 17.5591 18 17.4V15.9C18.0005 15.8536 17.9902 15.8077 17.97 15.7659ZM15.7146 12.6L17.2146 15.6H0.7854L2.2854 12.6H15.7146ZM8.1 16.2H9.9V16.5H8.1V16.2ZM0.6 17.4V16.2H7.5V16.5C7.5 16.6591 7.56321 16.8117 7.67574 16.9243C7.78826 17.0368 7.94087 17.1 8.1 17.1H9.9C10.0591 17.1 10.2117 17.0368 10.3243 16.9243C10.4368 16.8117 10.5 16.6591 10.5 16.5V16.2H17.4V17.4H0.6Z", fill: color }), _jsx("path", { d: "M17.97 15.7659L18.87 15.3298L18.8643 15.3183L17.97 15.7659ZM16.2 12.2292H15.2V12.4655L15.3057 12.6767L16.2 12.2292ZM16.2 2.69999L17.2 2.69999L16.2 2.69999ZM13.2 1.79999V0.799988H12.2V1.79999H13.2ZM13.2 2.39999H12.2V3.39999H13.2V2.39999ZM15.6 12V13H16.6V12H15.6ZM2.4 12H1.4V13H2.4V12ZM4.8 2.39999V3.39999H5.8V2.39999H4.8ZM4.8 1.79999H5.8V0.799988H4.8V1.79999ZM1.8 12.2292L2.69441 12.6764L2.8 12.4653V12.2292H1.8ZM0.0315001 15.7659L-0.862913 15.3186L-0.863499 15.3198L0.0315001 15.7659ZM1.30593e-07 15.9H1L1 15.8991L1.30593e-07 15.9ZM1.30593e-07 17.4H-1H1.30593e-07ZM18 15.9L17 15.889V15.9H18ZM15.7146 12.6L16.609 12.1528L16.3326 11.6H15.7146V12.6ZM17.2146 15.6V16.6H18.8326L18.109 15.1528L17.2146 15.6ZM0.7854 15.6L-0.109027 15.1528L-0.832634 16.6H0.7854V15.6ZM2.2854 12.6V11.6H1.66737L1.39097 12.1528L2.2854 12.6ZM8.1 16.2V15.2H7.1V16.2H8.1ZM9.9 16.2H10.9V15.2H9.9V16.2ZM9.9 16.5V17.5H10.9V16.5H9.9ZM8.1 16.5H7.1V17.5H8.1V16.5ZM0.6 17.4H-0.4V18.4H0.6V17.4ZM0.6 16.2V15.2H-0.4V16.2H0.6ZM7.5 16.2H8.5V15.2H7.5V16.2ZM10.5 16.2V15.2H9.5V16.2H10.5ZM17.4 16.2H18.4V15.2H17.4V16.2ZM17.4 17.4V18.4H18.4V17.4H17.4ZM17.97 15.7659L18.8643 15.3183L17.0943 11.7816L16.2 12.2292L15.3057 12.6767L17.0757 16.2134L17.97 15.7659ZM16.2 12.2292H17.2V2.69999H16.2H15.2V12.2292H16.2ZM16.2 2.69999L17.2 2.69999C17.2 2.19608 16.9998 1.7128 16.6435 1.35648L15.9364 2.06359L15.2293 2.7707C15.2105 2.75195 15.2 2.72651 15.2 2.69999H16.2ZM15.9364 2.06359L16.6435 1.35648C16.2872 1.00017 15.8039 0.799988 15.3 0.799988V1.79999V2.79999C15.2735 2.79999 15.248 2.78945 15.2293 2.7707L15.9364 2.06359ZM15.3 1.79999V0.799988H13.2V1.79999V2.79999H15.3V1.79999ZM13.2 1.79999H12.2V2.39999H13.2H14.2V1.79999H13.2ZM13.2 2.39999V3.39999H15.3V2.39999V1.39999H13.2V2.39999ZM15.3 2.39999V3.39999C15.1143 3.39999 14.9363 3.32624 14.805 3.19496L15.5121 2.48786L16.2192 1.78075C15.9754 1.53695 15.6448 1.39999 15.3 1.39999V2.39999ZM15.5121 2.48786L14.805 3.19496C14.6737 3.06369 14.6 2.88564 14.6 2.69999H15.6H16.6C16.6 2.35521 16.463 2.02455 16.2192 1.78075L15.5121 2.48786ZM15.6 2.69999H14.6V12H15.6H16.6V2.69999H15.6ZM15.6 12V11H2.4V12V13H15.6V12ZM2.4 12H3.4V2.69999H2.4H1.4V12H2.4ZM2.4 2.69999H3.4C3.4 2.88564 3.32625 3.06369 3.19497 3.19496L2.48787 2.48786L1.78076 1.78075C1.53696 2.02455 1.4 2.35521 1.4 2.69999H2.4ZM2.48787 2.48786L3.19497 3.19496C3.0637 3.32624 2.88565 3.39999 2.7 3.39999V2.39999V1.39999C2.35522 1.39999 2.02456 1.53695 1.78076 1.78075L2.48787 2.48786ZM2.7 2.39999V3.39999H4.8V2.39999V1.39999H2.7V2.39999ZM4.8 2.39999H5.8V1.79999H4.8H3.8V2.39999H4.8ZM4.8 1.79999V0.799988H2.7V1.79999V2.79999H4.8V1.79999ZM2.7 1.79999V0.799988C2.19609 0.799988 1.71282 1.00017 1.3565 1.35648L2.0636 2.06359L2.77071 2.7707C2.75196 2.78945 2.72652 2.79999 2.7 2.79999V1.79999ZM2.0636 2.06359L1.3565 1.35648C1.00018 1.7128 0.8 2.19608 0.8 2.69999H1.8H2.8C2.8 2.72651 2.78946 2.75194 2.77071 2.7707L2.0636 2.06359ZM1.8 2.69999H0.8V12.2292H1.8H2.8V2.69999H1.8ZM1.8 12.2292L0.905588 11.7819L-0.862912 15.3186L0.0315001 15.7659L0.925912 16.2131L2.69441 12.6764L1.8 12.2292ZM0.0315001 15.7659L-0.863499 15.3198C-0.953455 15.5003 -1.00019 15.6993 -0.999999 15.9009L1.30593e-07 15.9L1 15.8991C1.0001 16.0076 0.974937 16.1148 0.9265 16.212L0.0315001 15.7659ZM1.30593e-07 15.9H-1V17.4H1.30593e-07H1V15.9H1.30593e-07ZM1.30593e-07 17.4H-1C-1 17.8243 -0.83143 18.2313 -0.531371 18.5314L0.175736 17.8243L0.882843 17.1171C0.957858 17.1922 1 17.2939 1 17.4H1.30593e-07ZM0.175736 17.8243L-0.531371 18.5314C-0.231311 18.8314 0.175656 19 0.6 19V18V17C0.706085 17 0.807827 17.0421 0.882843 17.1171L0.175736 17.8243ZM0.6 18V19H17.4V18V17H0.6V18ZM17.4 18V19C17.8243 19 18.2313 18.8314 18.5314 18.5314L17.8243 17.8243L17.1172 17.1171C17.1922 17.0421 17.2939 17 17.4 17V18ZM17.8243 17.8243L18.5314 18.5314C18.8314 18.2313 19 17.8243 19 17.4H18H17C17 17.2939 17.0421 17.1922 17.1172 17.1171L17.8243 17.8243ZM18 17.4H19V15.9H18H17V17.4H18ZM18 15.9L18.9999 15.911C19.0021 15.7098 18.9577 15.5109 18.8699 15.3299L17.97 15.7659L17.0701 16.2019C17.0228 16.1044 16.9989 15.9973 17.0001 15.889L18 15.9ZM15.7146 12.6L14.8202 13.0472L16.3202 16.0472L17.2146 15.6L18.109 15.1528L16.609 12.1528L15.7146 12.6ZM17.2146 15.6V14.6H0.7854V15.6V16.6H17.2146V15.6ZM0.7854 15.6L1.67983 16.0472L3.17983 13.0472L2.2854 12.6L1.39097 12.1528L-0.109027 15.1528L0.7854 15.6ZM2.2854 12.6V13.6H15.7146V12.6V11.6H2.2854V12.6ZM8.1 16.2V17.2H9.9V16.2V15.2H8.1V16.2ZM9.9 16.2H8.9V16.5H9.9H10.9V16.2H9.9ZM9.9 16.5V15.5H8.1V16.5V17.5H9.9V16.5ZM8.1 16.5H9.1V16.2H8.1H7.1V16.5H8.1ZM0.6 17.4H1.6V16.2H0.6H-0.4V17.4H0.6ZM0.6 16.2V17.2H7.5V16.2V15.2H0.6V16.2ZM7.5 16.2H6.5V16.5H7.5H8.5V16.2H7.5ZM7.5 16.5H6.5C6.5 16.9243 6.66857 17.3313 6.96863 17.6314L7.67574 16.9243L8.38284 16.2171C8.45786 16.2922 8.5 16.3939 8.5 16.5H7.5ZM7.67574 16.9243L6.96863 17.6314C7.26869 17.9314 7.67566 18.1 8.1 18.1V17.1V16.1C8.20609 16.1 8.30783 16.1421 8.38284 16.2171L7.67574 16.9243ZM8.1 17.1V18.1H9.9V17.1V16.1H8.1V17.1ZM9.9 17.1V18.1C10.3243 18.1 10.7313 17.9314 11.0314 17.6314L10.3243 16.9243L9.61716 16.2171C9.69217 16.1421 9.79392 16.1 9.9 16.1V17.1ZM10.3243 16.9243L11.0314 17.6314C11.3314 17.3313 11.5 16.9243 11.5 16.5H10.5H9.5C9.5 16.3939 9.54214 16.2922 9.61716 16.2171L10.3243 16.9243ZM10.5 16.5H11.5V16.2H10.5H9.5V16.5H10.5ZM10.5 16.2V17.2H17.4V16.2V15.2H10.5V16.2ZM17.4 16.2H16.4V17.4H17.4H18.4V16.2H17.4ZM17.4 17.4V16.4H0.6V17.4V18.4H17.4V17.4Z", fill: color, mask: "url(#path-1-inside-1_1397_283)" }), _jsx("path", { d: "M2.9999 14.4H2.3999V15H2.9999V14.4Z", fill: color }), _jsx("path", { d: "M4.19985 14.4H3.59985V15H4.19985V14.4Z", fill: color }), _jsx("path", { d: "M13.2 14.4H4.80005V15H13.2V14.4Z", fill: color }), _jsx("path", { d: "M14.4 14.4H13.8V15H14.4V14.4Z", fill: color }), _jsx("path", { d: "M15.6002 14.4H15.0002V15H15.6002V14.4Z", fill: color }), _jsx("path", { d: "M4.4999 13.2H3.8999V13.8H4.4999V13.2Z", fill: color }), _jsx("path", { d: "M3.29995 13.2H2.69995V13.8H3.29995V13.2Z", fill: color }), _jsx("path", { d: "M5.7001 13.2H5.1001V13.8H5.7001V13.2Z", fill: color }), _jsx("path", { d: "M6.90005 13.2H6.30005V13.8H6.90005V13.2Z", fill: color }), _jsx("path", { d: "M8.09976 13.2H7.49976V13.8H8.09976V13.2Z", fill: color }), _jsx("path", { d: "M9.29995 13.2H8.69995V13.8H9.29995V13.2Z", fill: color }), _jsx("path", { d: "M10.5001 13.2H9.90015V13.8H10.5001V13.2Z", fill: color }), _jsx("path", { d: "M11.7001 13.2H11.1001V13.8H11.7001V13.2Z", fill: color }), _jsx("path", { d: "M12.8998 13.2H12.2998V13.8H12.8998V13.2Z", fill: color }), _jsx("path", { d: "M14.1 13.2H13.5V13.8H14.1V13.2Z", fill: color }), _jsx("path", { d: "M15.3002 13.2H14.7002V13.8H15.3002V13.2Z", fill: color }), _jsx("path", { d: "M3.59976 10.8V3.6H4.49976V3H3.29976C3.22019 3 3.14388 3.03161 3.08762 3.08787C3.03136 3.14413 2.99976 3.22044 2.99976 3.3V11.1C2.99976 11.1796 3.03136 11.2559 3.08762 11.3121C3.14388 11.3684 3.22019 11.4 3.29976 11.4H14.6998C14.7793 11.4 14.8556 11.3684 14.9119 11.3121C14.9681 11.2559 14.9998 11.1796 14.9998 11.1V3.3C14.9998 3.22044 14.9681 3.14413 14.9119 3.08787C14.8556 3.03161 14.7793 3 14.6998 3H13.4998V3.6H14.3998V10.8H3.59976Z", fill: color }), _jsx("path", { d: "M7.2001 8.2563V8.7C7.20057 9.09768 7.35876 9.47893 7.63996 9.76013C7.92116 10.0413 8.30242 10.1995 8.7001 10.2H9.3001C9.69778 10.1995 10.079 10.0413 10.3602 9.76013C10.6414 9.47893 10.7996 9.09768 10.8001 8.7V8.2563C11.4326 7.92721 11.9629 7.431 12.3331 6.82162C12.7034 6.21225 12.8995 5.51303 12.9001 4.8V3C12.9001 2.6175 12.5344 2.3277 11.7817 2.1144C11.7764 2.11268 11.771 2.11128 11.7655 2.1102C11.6134 2.0682 11.4499 2.0304 11.2768 1.9965L11.5468 1.7265C11.603 1.67024 11.6346 1.59395 11.6346 1.5144C11.6346 1.43485 11.603 1.35856 11.5468 1.3023L10.6978 0.4533C10.6415 0.397059 10.5652 0.365464 10.4857 0.365464C10.4061 0.365464 10.3299 0.397059 10.2736 0.4533L9.9001 0.8268V0.3C9.9001 0.220435 9.86849 0.144129 9.81223 0.0878679C9.75597 0.031607 9.67966 0 9.6001 0H8.4001C8.32053 0 8.24423 0.031607 8.18797 0.0878679C8.1317 0.144129 8.1001 0.220435 8.1001 0.3V0.8268L7.7272 0.4539C7.67094 0.397659 7.59465 0.366064 7.5151 0.366064C7.43555 0.366064 7.35926 0.397659 7.303 0.4539L6.454 1.3029C6.39776 1.35916 6.36616 1.43545 6.36616 1.515C6.36616 1.59455 6.39776 1.67084 6.454 1.7271L6.724 1.9971C6.5509 2.031 6.3874 2.0688 6.2353 2.1108C6.2299 2.1108 6.2245 2.1132 6.2188 2.115C6.2131 2.1168 6.2041 2.1198 6.1963 2.1222C6.1909 2.12358 6.18559 2.12529 6.1804 2.1273C5.455 2.34 5.1001 2.6244 5.1001 3V4.8C5.10073 5.51303 5.29683 6.21225 5.66708 6.82162C6.03733 7.431 6.56755 7.92721 7.2001 8.2563ZM10.2001 8.7C10.2001 8.93869 10.1053 9.16761 9.93649 9.3364C9.76771 9.50518 9.53879 9.6 9.3001 9.6H8.7001C8.4614 9.6 8.23248 9.50518 8.0637 9.3364C7.89492 9.16761 7.8001 8.93869 7.8001 8.7V8.5092C8.57988 8.76353 9.42031 8.76353 10.2001 8.5092V8.7ZM12.0001 2.8248C12.1062 2.86405 12.2036 2.92356 12.2869 3C12.2036 3.07644 12.1062 3.13595 12.0001 3.1752V2.8248ZM7.5151 1.0902L8.014 1.59C8.05763 1.63391 8.11377 1.66324 8.17474 1.67398C8.2357 1.68473 8.29849 1.67635 8.3545 1.65C8.40151 1.62749 8.44968 1.60746 8.4988 1.59C8.55788 1.56942 8.60905 1.53088 8.64514 1.47978C8.68124 1.42867 8.70045 1.36756 8.7001 1.305V0.6H9.3001V1.305C9.30012 1.36726 9.31951 1.42796 9.35558 1.47871C9.39164 1.52945 9.44261 1.56772 9.5014 1.5882C9.55059 1.60571 9.59886 1.62574 9.646 1.6482C9.70197 1.67448 9.7647 1.68282 9.8256 1.67208C9.8865 1.66134 9.94259 1.63204 9.9862 1.5882L10.4851 1.0902L10.9099 1.515L10.4101 2.0139C10.3662 2.05753 10.3369 2.11368 10.3261 2.17464C10.3154 2.2356 10.3237 2.29839 10.3501 2.3544C10.3726 2.40172 10.3926 2.45019 10.4101 2.4996C10.4308 2.55851 10.4694 2.60949 10.5205 2.64541C10.5716 2.68134 10.6326 2.70042 10.6951 2.7H11.4001V3.3H10.6951C10.633 3.30002 10.5724 3.3193 10.5218 3.3552C10.4711 3.39109 10.4328 3.44183 10.4122 3.5004C10.4092 3.5094 10.4047 3.5175 10.4017 3.5262C10.2886 3.5382 10.1737 3.5487 10.0561 3.5577C10.1492 3.38648 10.1987 3.19492 10.2001 3C10.2001 2.68174 10.0737 2.37652 9.84863 2.15147C9.62358 1.92643 9.31836 1.8 9.0001 1.8C8.68184 1.8 8.37661 1.92643 8.15157 2.15147C7.92653 2.37652 7.8001 2.68174 7.8001 3C7.80149 3.19492 7.85095 3.38648 7.9441 3.5577C7.8265 3.5487 7.7119 3.5382 7.5988 3.5262C7.5955 3.5178 7.5916 3.51 7.5883 3.5013C7.56782 3.44251 7.52955 3.39155 7.47881 3.35548C7.42806 3.31941 7.36735 3.30002 7.3051 3.3H6.6001V2.7H7.3051C7.36735 2.69998 7.42806 2.68059 7.47881 2.64452C7.52955 2.60845 7.56782 2.55749 7.5883 2.4987C7.60576 2.44958 7.62579 2.40142 7.6483 2.3544C7.67465 2.29839 7.68302 2.2356 7.67228 2.17464C7.66154 2.11368 7.63221 2.05753 7.5883 2.0139L7.0903 1.515L7.5151 1.0902ZM8.4001 3C8.39975 2.88209 8.43415 2.76668 8.499 2.66821C8.56386 2.56973 8.65629 2.49255 8.76476 2.4463C8.87322 2.40005 8.99291 2.38678 9.10887 2.40816C9.22483 2.42954 9.33192 2.48461 9.41677 2.56649C9.50161 2.64838 9.56045 2.75345 9.58592 2.86858C9.6114 2.98371 9.60239 3.10379 9.56002 3.21383C9.51764 3.32387 9.44379 3.41898 9.34767 3.48729C9.25156 3.55559 9.13745 3.59407 9.0196 3.5979H8.9806C8.82523 3.59285 8.6779 3.5277 8.56961 3.41617C8.46133 3.30464 8.40056 3.15544 8.4001 3ZM6.0001 2.8248V3.1752C5.89401 3.13582 5.79653 3.07633 5.713 3C5.79653 2.92366 5.89401 2.86418 6.0001 2.8248ZM5.7001 3.6978C5.86756 3.77401 6.0408 3.83681 6.2182 3.8856C6.2239 3.8874 6.2293 3.8886 6.2347 3.8898C6.58863 3.98455 6.94869 4.05472 7.3123 4.0998C7.87224 4.16854 8.43595 4.202 9.0001 4.2C9.56456 4.20157 10.1286 4.1677 10.6888 4.0986C11.0521 4.0534 11.4118 3.98323 11.7655 3.8886C11.771 3.88752 11.7764 3.88612 11.7817 3.8844C11.7898 3.8823 11.7961 3.8796 11.8042 3.8775C11.8123 3.8754 11.8153 3.8745 11.8207 3.8721C11.9848 3.82564 12.1453 3.76697 12.3007 3.6966V4.8C12.3007 5.67521 11.953 6.51458 11.3342 7.13345C10.7153 7.75232 9.87591 8.1 9.0007 8.1C8.12548 8.1 7.28612 7.75232 6.66725 7.13345C6.04838 6.51458 5.7007 5.67521 5.7007 4.8L5.7001 3.6978Z", fill: color })] }) }));
+};
+export default LaptopIcon;

package/dist/components/assets/icons/ManIcon/index.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties, FC } from 'react';
+type Props = {
+    width?: number;
+    height?: number;
+    color?: string;
+    style?: CSSProperties;
+};
+declare const ManIcon: FC<Props>;
+export default ManIcon;

package/dist/components/assets/icons/ManIcon/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+const ManIcon = (props) => {
+    const { width = 14, height = 22, color = fontColors.dark, style } = props;
+    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: '100%', height: '100%', viewBox: '0 0 14 22', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("path", { d: 'M7.02661 0.658539C7.88149 0.658663 8.39587 1.25773 8.46997 1.96127C9.66017 2.21582 10.5651 3.24296 10.6526 4.49545C10.8665 4.56673 11.0225 4.76678 11.0227 5.0062V5.86557C11.0227 5.94284 11.0048 6.01496 10.9758 6.08041C11.4295 6.31814 11.6023 6.79345 11.5383 7.2308C11.4738 7.67058 11.1685 8.07819 10.6633 8.17416C10.6615 8.24446 10.6599 8.30222 10.6575 8.34213C10.6447 8.55665 10.5336 9.77578 9.69751 10.7035C10.0223 10.98 10.148 11.5594 9.88403 12.1771C10.5888 12.3061 11.1134 12.4469 11.4397 12.599C12.0464 12.8817 12.4715 13.5458 12.7698 14.3714C13.0687 15.1989 13.2445 16.1999 13.3459 17.1732C13.5488 19.1189 13.4549 20.9647 13.4465 21.1185C13.4397 21.243 13.3377 21.3412 13.2131 21.3412H0.786377C0.66196 21.3409 0.559792 21.2429 0.552979 21.1185C0.544612 20.9645 0.451713 19.1188 0.654541 17.1732C0.75602 16.1999 0.931791 15.199 1.23071 14.3714C1.52892 13.546 1.95337 12.8818 2.55981 12.599C2.88565 12.4471 3.41024 12.3061 4.1145 12.1771C3.85169 11.5617 3.97628 10.9806 4.30103 10.7035C3.46457 9.77526 3.35377 8.55471 3.34106 8.34116C3.33867 8.30129 3.33704 8.24409 3.33521 8.17416C2.82563 8.0763 2.51954 7.66081 2.46021 7.21616C2.40104 6.77258 2.58629 6.29337 3.06274 6.06479C3.03761 6.00329 3.0198 5.93718 3.01978 5.86557V5.0062C3.01995 4.7671 3.17546 4.56698 3.38892 4.49545C3.47658 3.23952 4.3873 2.21033 5.58228 1.95932C5.65741 1.25933 6.17101 0.658539 7.02661 0.658539ZM9.62817 12.6097C9.1944 13.1719 8.40321 13.6121 7.23364 13.682V20.8705H10.2073V19.0687C10.2073 18.9939 10.2359 18.9336 10.2815 18.8929C10.3263 18.8531 10.385 18.8344 10.4417 18.8343C10.4982 18.8343 10.5561 18.8533 10.6008 18.8929C10.6465 18.9336 10.676 18.9937 10.676 19.0687V20.8705H12.9875C13.0081 20.2718 13.0429 18.5649 12.843 16.8822C12.7402 16.0168 12.5758 15.1604 12.3176 14.4652C12.0587 13.7681 11.7093 13.244 11.2434 13.0267C10.9324 12.8817 10.389 12.7411 9.62817 12.6097ZM4.37036 12.6097C3.61013 12.7411 3.06769 12.882 2.75708 13.0267C2.29088 13.244 1.94091 13.7679 1.68188 14.4652C1.42363 15.1604 1.25924 16.0168 1.15649 16.8822C0.956695 18.5648 0.991313 20.2718 1.01196 20.8705H3.32446V19.0687C3.32446 18.9938 3.35301 18.9336 3.39868 18.8929C3.44343 18.8531 3.50221 18.8344 3.55884 18.8343C3.61532 18.8344 3.67335 18.8533 3.71802 18.8929C3.76373 18.9336 3.79224 18.9937 3.79224 19.0687V20.8705H6.76587V13.682C5.59535 13.6113 4.80385 13.1714 4.37036 12.6097ZM8.21313 11.6175C7.86044 11.7196 7.45952 11.7816 6.99927 11.7816C6.53983 11.7816 6.1396 11.7203 5.78735 11.6185V11.9984C5.78735 12.1167 5.83457 12.2391 5.91724 12.3607C5.99997 12.4822 6.11631 12.6008 6.24634 12.7103C6.49682 12.9212 6.79552 13.095 6.99927 13.1966C7.20308 13.0949 7.50313 12.9208 7.75415 12.7093C7.88403 12.5999 7.99958 12.482 8.08228 12.3607C8.16516 12.239 8.21313 12.1165 8.21313 11.9984V11.6175ZM4.64673 11.0335C4.55898 11.084 4.48639 11.1947 4.4563 11.3558C4.42381 11.5299 4.4421 11.7514 4.5354 11.9808C4.70638 12.4009 5.13003 12.8496 5.95337 13.0785C5.81665 12.9637 5.68591 12.8345 5.57935 12.6927C5.42544 12.4879 5.3186 12.2539 5.3186 11.9984V11.4466C5.06358 11.3306 4.84057 11.1911 4.64673 11.0335ZM9.35181 11.0335C9.15805 11.191 8.93579 11.3316 8.68091 11.4476V11.9984C8.68091 12.2542 8.57431 12.4888 8.42017 12.6937C8.31331 12.8357 8.18125 12.9636 8.04419 13.0785C8.86427 12.8506 9.29036 12.4025 9.46313 11.9818C9.55729 11.7523 9.57613 11.531 9.54419 11.3568C9.5145 11.1949 9.4411 11.0842 9.35181 11.0335ZM4.81665 6.48178C4.81665 6.73489 4.72512 6.92714 4.58423 7.05502C4.44409 7.18214 4.25826 7.24304 4.07446 7.24155C3.89073 7.24003 3.70536 7.17595 3.56567 7.05014C3.42532 6.92354 3.33325 6.73645 3.33325 6.49448V6.46713C3.00927 6.58542 2.88353 6.8806 2.9231 7.15952C2.96528 7.45686 3.19345 7.72504 3.56567 7.72592C3.69335 7.72645 3.79694 7.82955 3.79907 7.95737C3.80159 8.11795 3.80478 8.24539 3.80884 8.31381C3.81805 8.46745 3.88405 9.21873 4.31372 9.93002C4.74173 10.6384 5.53193 11.3108 6.99927 11.3109C8.4667 11.3109 9.2568 10.6384 9.68481 9.93002C10.1144 9.2188 10.1815 8.46761 10.1907 8.31381V8.31284C10.1948 8.24434 10.1979 8.11733 10.2004 7.95737C10.2027 7.82947 10.306 7.72612 10.4338 7.72592C11.1484 7.72592 11.3187 6.75204 10.719 6.48276V6.49448C10.719 6.73645 10.6271 6.92362 10.4866 7.05014C10.3469 7.17589 10.1615 7.24005 9.97778 7.24155C9.79401 7.24303 9.60814 7.18204 9.46802 7.05502C9.32709 6.92722 9.2356 6.73478 9.2356 6.48178V6.40756H4.81665V6.48178ZM3.80103 6.49448C3.80103 6.66871 3.93601 6.76819 4.07642 6.7728C4.14617 6.77505 4.21423 6.75316 4.26392 6.70737C4.3127 6.66221 4.34888 6.58951 4.34888 6.48178V6.40756H3.80103V6.49448ZM9.70337 6.48178C9.70337 6.58924 9.74029 6.6622 9.78931 6.70737C9.83898 6.75294 9.90629 6.77485 9.97583 6.7728C10.1162 6.7686 10.2512 6.66934 10.2512 6.49448V6.40756H9.70337V6.48178ZM3.55786 4.93588C3.52007 4.93588 3.48776 4.96707 3.48755 5.0062V5.86557C3.48766 5.90479 3.52001 5.93588 3.55786 5.93588H10.4846C10.5225 5.93588 10.5548 5.90479 10.5549 5.86557V5.0062C10.5547 4.96707 10.5224 4.93588 10.4846 4.93588H3.55786ZM6.14771 2.37045C4.95567 2.37045 3.97605 3.29061 3.86157 4.4642H10.1809C10.0664 3.29061 9.08681 2.37045 7.89478 2.37045H6.14771ZM7.02661 1.12924C6.67002 1.12924 6.43973 1.2634 6.29224 1.43198C6.16161 1.58144 6.09456 1.76131 6.0647 1.90561C6.4046 1.89716 7.64312 1.89735 7.98755 1.90659C7.95789 1.76202 7.89269 1.58161 7.76196 1.43198C7.61453 1.26324 7.38382 1.12931 7.02661 1.12924Z', fill: color, stroke: color, strokeWidth: '0.1' }) }) }));
+};
+export default ManIcon;

package/dist/components/assets/icons/StoreIcon/index.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties, FC } from 'react';
+type Props = {
+    width?: number;
+    height?: number;
+    color?: string;
+    style?: CSSProperties;
+};
+declare const StoreIcon: FC<Props>;
+export default StoreIcon;

package/dist/components/assets/icons/StoreIcon/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+const StoreIcon = (props) => {
+    const { width = 18, height = 20, color = fontColors.dark, style } = props;
+    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 18 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("mask", { id: "path-1-inside-1_1397_24", fill: color, children: _jsx("path", { d: "M15.9705 17.1621H2.02961C1.87104 17.1621 1.74292 17.032 1.74292 16.8721V8.59922C1.74292 8.43925 1.87105 8.31 2.02961 8.31C2.18817 8.31 2.3163 8.43926 2.3163 8.59922V16.5829H15.6838V8.59922C15.6838 8.43925 15.8119 8.31 15.9704 8.31C16.129 8.31 16.2571 8.43926 16.2571 8.59922V16.8721C16.2571 16.9488 16.2275 17.0223 16.173 17.0773C16.1194 17.1314 16.0466 17.1621 15.9705 17.1621Z" }) }), _jsx("path", { d: "M15.9705 17.1621H2.02961C1.87104 17.1621 1.74292 17.032 1.74292 16.8721V8.59922C1.74292 8.43925 1.87105 8.31 2.02961 8.31C2.18817 8.31 2.3163 8.43926 2.3163 8.59922V16.5829H15.6838V8.59922C15.6838 8.43925 15.8119 8.31 15.9704 8.31C16.129 8.31 16.2571 8.43926 16.2571 8.59922V16.8721C16.2571 16.9488 16.2275 17.0223 16.173 17.0773C16.1194 17.1314 16.0466 17.1621 15.9705 17.1621Z", fill: color }), _jsx("path", { d: "M2.3163 16.5829H1.3163V17.5829H2.3163V16.5829ZM15.6838 16.5829V17.5829H16.6838V16.5829H15.6838ZM16.173 17.0773L16.8833 17.7813L16.173 17.0773ZM15.9705 17.1621V16.1621H2.02961V17.1621V18.1621H15.9705V17.1621ZM2.02961 17.1621V16.1621C2.43522 16.1621 2.74292 16.4917 2.74292 16.8721H1.74292H0.74292C0.74292 17.5723 1.30687 18.1621 2.02961 18.1621V17.1621ZM1.74292 16.8721H2.74292V8.59922H1.74292H0.74292V16.8721H1.74292ZM1.74292 8.59922H2.74292C2.74292 8.98326 2.43158 9.31 2.02961 9.31V8.31V7.31C1.31053 7.31 0.74292 7.89524 0.74292 8.59922H1.74292ZM2.02961 8.31V9.31C1.62762 9.31 1.3163 8.98325 1.3163 8.59922H2.3163H3.3163C3.3163 7.89527 2.74871 7.31 2.02961 7.31V8.31ZM2.3163 8.59922H1.3163V16.5829H2.3163H3.3163V8.59922H2.3163ZM2.3163 16.5829V17.5829H15.6838V16.5829V15.5829H2.3163V16.5829ZM15.6838 16.5829H16.6838V8.59922H15.6838H14.6838V16.5829H15.6838ZM15.6838 8.59922H16.6838C16.6838 8.98326 16.3724 9.31 15.9704 9.31V8.31V7.31C15.2514 7.31 14.6838 7.89525 14.6838 8.59922H15.6838ZM15.9704 8.31V9.31C15.5685 9.31 15.2571 8.98325 15.2571 8.59922H16.2571H17.2571C17.2571 7.89527 16.6895 7.31 15.9704 7.31V8.31ZM16.2571 8.59922H15.2571V16.8721H16.2571H17.2571V8.59922H16.2571ZM16.2571 16.8721H15.2571C15.2571 16.6896 15.3285 16.5088 15.4628 16.3733L16.173 17.0773L16.8833 17.7813C17.1265 17.5359 17.2571 17.208 17.2571 16.8721H16.2571ZM16.173 17.0773L15.4628 16.3733C15.5947 16.2403 15.7766 16.1621 15.9705 16.1621V17.1621V18.1621C16.3166 18.1621 16.6441 18.0225 16.8833 17.7813L16.173 17.0773Z", fill: color, mask: "url(#path-1-inside-1_1397_24)" }), _jsx("path", { d: "M17.713 6.65146H0.286859C0.188356 6.65146 0.0962602 6.60057 0.0442054 6.51574C-0.00864901 6.43172 -0.0142561 6.32588 0.0281887 6.2362L1.56179 3.04019H1.56259C1.61064 2.94001 1.71074 2.87619 1.82045 2.87619H16.1793C16.2891 2.87619 16.3892 2.94001 16.4372 3.04019L17.9716 6.2362C18.0141 6.32587 18.0085 6.43171 17.9564 6.51574C17.9035 6.60057 17.8115 6.65146 17.713 6.65146ZM0.744857 6.0722H17.2548L15.999 3.4555H2.00056L0.744857 6.0722Z", fill: color }), _jsx("path", { d: "M14.2281 6.65142C14.1007 6.65142 13.9878 6.56659 13.9526 6.44298L13.0324 3.24698L13.0316 3.24617C12.9876 3.09267 13.0757 2.93191 13.2278 2.88746C13.38 2.84303 13.5393 2.93109 13.5834 3.08459L14.5035 6.28059V6.2814C14.5476 6.4349 14.4603 6.59566 14.3081 6.64011C14.2825 6.64738 14.2553 6.65142 14.2281 6.65142Z", fill: color }), _jsx("path", { d: "M10.7429 6.65146C10.5955 6.65146 10.4714 6.53836 10.4578 6.38971L10.1503 3.19371C10.1351 3.03455 10.2504 2.89237 10.4081 2.87702C10.5667 2.86167 10.7068 2.97882 10.7221 3.13797L11.0296 6.33397C11.0368 6.41072 11.0136 6.48667 10.9655 6.54644C10.9167 6.60542 10.8462 6.64258 10.7709 6.64985C10.7613 6.65147 10.7517 6.65146 10.7429 6.65146Z", fill: color }), _jsx("path", { d: "M7.25718 6.65144C7.24757 6.65144 7.23876 6.65144 7.22915 6.64982V6.65063C7.15307 6.64255 7.08339 6.60539 7.03535 6.54641C6.98649 6.48663 6.96327 6.41068 6.97128 6.33394L7.278 3.13794C7.28521 3.06119 7.32204 2.9909 7.38131 2.94243C7.43977 2.89315 7.51504 2.87053 7.59112 2.8778C7.74888 2.89315 7.86419 3.03453 7.84898 3.19368L7.54146 6.38968C7.52705 6.53752 7.40452 6.65063 7.25718 6.65144Z", fill: color }), _jsx("path", { d: "M3.77205 6.65147C3.74482 6.65147 3.7176 6.64743 3.69197 6.64016C3.53981 6.59572 3.45171 6.43495 3.49657 6.28145L4.41673 3.08544V3.08463C4.43755 3.01112 4.4872 2.94891 4.55367 2.91174C4.62094 2.87458 4.69942 2.8665 4.77229 2.88751C4.92445 2.93194 5.01175 3.09271 4.9677 3.24622L4.04754 6.44305C4.0123 6.56666 3.89939 6.65147 3.77205 6.65147Z", fill: color }), _jsx("path", { d: "M9.00025 8.88922C7.87989 8.88761 6.97175 7.97145 6.97095 6.84122V6.36214C6.97095 6.20217 7.09908 6.07211 7.25764 6.07211H10.7429C10.9014 6.07211 11.0295 6.20219 11.0295 6.36214V6.84122C11.0287 7.97145 10.1206 8.88761 9.00025 8.88922ZM7.54433 6.65142V6.84127C7.54433 7.65241 8.19621 8.31003 9.00025 8.31003C9.80429 8.31003 10.4562 7.65241 10.4562 6.84127V6.65142H7.54433Z", fill: color }), _jsx("path", { d: "M5.51465 8.88922C4.3943 8.88761 3.48615 7.97145 3.48535 6.84122V6.36214C3.48535 6.20217 3.61348 6.07211 3.77204 6.07211H7.25726C7.41583 6.07211 7.54395 6.20219 7.54395 6.36214V6.84122C7.54315 7.97145 6.63501 8.88761 5.51465 8.88922ZM4.05873 6.65142V6.84127C4.05873 7.65241 4.71061 8.31003 5.51465 8.31003C6.31869 8.31003 6.97057 7.65241 6.97057 6.84127V6.65142H4.05873Z", fill: color }), _jsx("path", { d: "M2.02979 8.88922C0.909433 8.88761 0.00128783 7.97145 0.000488281 6.84122V6.36214C0.000488281 6.20217 0.128621 6.07211 0.287178 6.07211H3.7724C3.93096 6.07211 4.05909 6.20219 4.05909 6.36214V6.84122C4.05829 7.97145 3.15014 8.88761 2.02979 8.88922ZM0.573868 6.65142V6.84127C0.573868 7.65241 1.22575 8.31003 2.02979 8.31003C2.83383 8.31003 3.48571 7.65241 3.48571 6.84127V6.65142H0.573868Z", fill: color }), _jsx("path", { d: "M12.4856 8.88922C11.3652 8.88761 10.4571 7.97145 10.4563 6.84122V6.36214C10.4563 6.20217 10.5844 6.07211 10.743 6.07211H14.2282C14.3868 6.07211 14.5149 6.20219 14.5149 6.36214V6.84122C14.5141 7.97145 13.606 8.88761 12.4856 8.88922ZM11.0297 6.65142V6.84127C11.0297 7.65241 11.6816 8.31003 12.4856 8.31003C13.2896 8.31003 13.9415 7.65241 13.9415 6.84127V6.65142H11.0297Z", fill: color }), _jsx("path", { d: "M15.9705 8.88922C14.8501 8.88761 13.942 7.97145 13.9412 6.84122V6.36214C13.9412 6.20217 14.0693 6.07211 14.2279 6.07211H17.7131C17.8716 6.07211 17.9998 6.20219 17.9998 6.36214V6.84122C17.999 7.97145 17.0908 8.88761 15.9705 8.88922ZM14.5145 6.65142V6.84127C14.5145 7.65241 15.1664 8.31003 15.9705 8.31003C16.7745 8.31003 17.4264 7.65241 17.4264 6.84127V6.65142H14.5145Z", fill: color }), _jsx("path", { d: "M17.7133 19.0791H0.287178C0.128613 19.0791 0.000488281 18.9498 0.000488281 18.7899V16.872C0.000488281 16.712 0.128621 16.5827 0.287178 16.5827H17.7133C17.8718 16.5827 18 16.712 18 16.872V18.7899C18 18.8666 17.9703 18.9402 17.9159 18.9943C17.8622 19.0492 17.7894 19.0791 17.7133 19.0791ZM0.573786 18.5006H17.4265V17.162H0.573786V18.5006Z", fill: color }), _jsx("path", { d: "M14.0574 17.1621H9.95717C9.7986 17.1621 9.66968 17.032 9.66968 16.8721V10.6674C9.66968 10.5075 9.79861 10.3782 9.95717 10.3782H14.0574C14.216 10.3782 14.3441 10.5075 14.3441 10.6674V16.8721C14.3441 16.9488 14.3137 17.0223 14.26 17.0773C14.2064 17.1314 14.1335 17.1621 14.0574 17.1621ZM10.2438 16.5828H13.7698V10.9575H10.2438V16.5828Z", fill: color }), _jsx("path", { d: "M8.0432 15.0939H3.94294C3.78438 15.0939 3.65625 14.9638 3.65625 14.8038V10.6674C3.65625 10.5075 3.78438 10.3782 3.94294 10.3782H8.0432C8.20176 10.3782 8.33069 10.5075 8.33069 10.6674V14.8038C8.33069 14.8806 8.30026 14.9541 8.2466 15.009C8.19214 15.0632 8.11928 15.0939 8.0432 15.0939ZM4.22955 14.5146H7.75557V10.9575H4.22955V14.5146Z", fill: color }), _jsx("path", { d: "M10.9478 14.4242C10.7893 14.4242 10.6611 14.2941 10.6611 14.1342V13.4055C10.6611 13.2455 10.7893 13.1162 10.9478 13.1162C11.1064 13.1162 11.2345 13.2455 11.2345 13.4055V14.1342C11.2345 14.2109 11.2049 14.2844 11.1504 14.3394C11.0968 14.3935 11.0239 14.4242 10.9478 14.4242Z", fill: color }), _jsx("path", { d: "M16.1793 3.45524H1.82038C1.66182 3.45524 1.53369 3.32517 1.53369 3.16522V1.21012C1.53369 1.05015 1.66182 0.920898 1.82038 0.920898H16.1793C16.3378 0.920898 16.466 1.05016 16.466 1.21012V3.16522C16.466 3.24277 16.4355 3.31629 16.3819 3.37042C16.3282 3.42455 16.2554 3.45524 16.1793 3.45524ZM2.10781 2.87598H15.8916V1.49934H2.10781V2.87598Z", fill: color })] }) }));
+};
+export default StoreIcon;

package/dist/components/lists/Listbox/index.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, ReactElement } from 'react';
+import { ListboxOptionsProps } from '@headlessui/react';
+type HasIsDisabled = {
+    isDisabled?: boolean;
+};
+type Props<T extends HasIsDisabled> = {
+    items: T[];
+    renderItem: (item: T) => ReactElement;
+    onChange?: (item: T) => Promise<void>;
+    anchor?: ListboxOptionsProps['anchor'];
+    showChevron?: boolean;
+    menuTitle?: string;
+    style?: CSSProperties;
+};
+declare const Listbox: <T extends HasIsDisabled>(props: Props<T>) => ReactElement;
+export default Listbox;

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Listbox as HeadlessListbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react';
+import ChevronIcon from '../../assets/icons/ChevronIcon';
+const Listbox = (props) => {
+    const { items, anchor = 'bottom', showChevron = true, menuTitle, style } = props;
+    const [selected, setSelected] = useState(props.items?.[0]);
+    const onChange = async (item) => {
+        setSelected(item);
+        props.onChange?.(item);
+    };
+    const renderItem = (item, isMenuOpen) => {
+        return (_jsxs("div", { className: 'relative flex flex-1', children: [props.renderItem(item), showChevron &&
+                    _jsx(ChevronIcon, { style: { position: 'absolute', right: 8, alignSelf: 'center' }, direction: isMenuOpen ? 'down' : 'up' })] }));
+    };
+    return (_jsx("div", { style: { ...style }, children: _jsx(HeadlessListbox, { value: selected, onChange: onChange, children: ({ open }) => (_jsxs("div", { className: 'flex flex-1', children: [_jsx(ListboxButton, { className: `
+                            flex 
+                            flex-1 
+                            outline-none 
+                            rounded-[var(--border-radius-4)] 
+                            bg-[var(--color-grey-50)] 
+                            overflow-hidden
+                        `, children: selected && renderItem(selected, open) }), _jsx(ListboxOptions, { anchor: anchor, transition: true, className: `
+                                w-[var(--button-width)] 
+                                [--anchor-gap:var(--spacing-1_5)] 
+                                p-[var(--spacing-1_5)] 
+                                shadow-[0rem_0.5rem_0.5rem_0rem_rgba(32,37,55,0.15)] 
+                                rounded-[var(--border-radius-4)] 
+                                outline-none 
+                                bg-[var(--color-grey-50)] 
+                                overflow-hidden
+                            `, children: _jsxs("div", { className: 'flex flex-col gap-[var(--spacing-1_5)]', children: [menuTitle &&
+                                    _jsx("div", { className: `
+                                        font-1 
+                                        pl-[var(--spacing-1_5)] 
+                                        text-[var(--color-grey-1100)]
+                                        self-start                                        
+                                    `, children: menuTitle }), items.map((item, index) => _jsx(ListboxOption, { value: item, disabled: item.isDisabled, className: `
+                                            rounded-[var(--border-radius-4)] 
+                                            ${item.isDisabled
+                                        ? 'opacity-50 cursor-not-allowed'
+                                        : `cursor-pointer ${selected === item ? 'bg-[var(--color-brand-50)]' : 'hover:bg-[var(--color-grey-1000)]'}`}
+                                        `, children: props.renderItem(item) }, index))] }) })] })) }) }));
+};
+export default Listbox;

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

@@ -0,0 +1,9 @@
+import { CSSProperties, FC, ReactElement } from 'react';
+type Props = {
+    icon: ReactElement;
+    backgroundColor?: string;
+    size?: number;
+    style?: CSSProperties;
+};
+declare const RoleIconView: FC<Props>;
+export default RoleIconView;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const RoleIconView = (props) => {
+    const { backgroundColor, icon, size = 38, style } = props;
+    return (_jsx("div", { className: `
+                flex 
+                justify-center 
+                items-center 
+                rounded-[var(--border-radius-2)] 
+                aspect-square
+            `, style: {
+            backgroundColor,
+            minWidth: size,
+            width: size,
+            ...style,
+        }, children: icon }));
+};
+export default RoleIconView;

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { RoleType } from '@sphereon/ui-components.core';
+type Props = {
+    role: RoleType;
+    accountName: string;
+};
+declare const RoleViewItem: FC<Props>;
+export default RoleViewItem;

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RoleType } from '@sphereon/ui-components.core';
+import RoleIconView from '../RoleIconView';
+import ManIcon from '../../assets/icons/ManIcon';
+import CapitolIcon from '../../assets/icons/CapitolIcon';
+import StoreIcon from '../../assets/icons/StoreIcon';
+import LaptopIcon from '../../assets/icons/LaptopIcon';
+const RoleViewItem = (props) => {
+    const { role, accountName } = props;
+    return (_jsxs("div", { className: `
+            flex 
+            flex-1 
+            flex-row 
+            px-[var(--spacing-1_5)] 
+            py-[var(--spacing-1)]  
+            gap-[var(--spacing-1_5)] 
+        `, children: [getRoleIconElement(role), _jsxs("div", { className: `
+                flex 
+                flex-col 
+                flex-grow 
+                gap-[var(--spacing-0_5)] 
+                items-start
+            `, children: [_jsx("div", { className: `
+                    font-1 
+                    text-left 
+                    pr-[var(--spacing-4)] 
+                    break-words 
+                    text-[var(--color-grey-600)]
+                `, children: accountName }), _jsx("div", { className: `
+                    font-2 
+                    mt-auto 
+                    text-[var(--color-grey-900)]
+                `, children: formatRole(role) })] })] }));
+};
+const getRoleIconElement = (role) => {
+    switch (role) {
+        case RoleType.HOLDER:
+            return _jsx(RoleIconView, { icon: _jsx(ManIcon, { color: 'var(--color-grey-50)' }), backgroundColor: 'var(--color-selenas-500)' });
+        case RoleType.ISSUER:
+            return _jsx(RoleIconView, { icon: _jsx(CapitolIcon, { color: 'var(--color-grey-50)' }), backgroundColor: 'var(--color-pending-500)' });
+        case RoleType.RELYING_PARTY:
+            return _jsx(RoleIconView, { icon: _jsx(StoreIcon, { color: 'var(--color-grey-50)' }), backgroundColor: 'var(--color-warning-500)' });
+        case RoleType.ADMIN:
+            return _jsx(RoleIconView, { icon: _jsx(LaptopIcon, { color: 'var(--color-grey-50)' }), backgroundColor: 'var(--color-magenta-500)' });
+        default:
+            return _jsx("div", {});
+    }
+};
+const formatRole = (role) => {
+    return role
+        .toLowerCase()
+        .split('_')
+        .map(segment => segment.charAt(0).toUpperCase() + segment.slice(1))
+        .join(' ');
+};
+export default RoleViewItem;

package/dist/index.d.ts

@@ -47,9 +47,19 @@ import WarningImage from './components/assets/images/WarningImage';
 import FormView from './components/views/FormView';
 import InformationRequestView from './components/views/InformationRequestView';
 import ContactViewItem from './components/views/ContactViewItem';
+import CapitolIcon from './components/assets/icons/CapitolIcon';
+import ChevronIcon from './components/assets/icons/ChevronIcon';
+import ManIcon from './components/assets/icons/ManIcon';
+import LaptopIcon from './components/assets/icons/LaptopIcon';
+import StoreIcon from './components/assets/icons/StoreIcon';
+import RoleIconView from './components/views/RoleIconView';
+import RoleViewItem from './components/views/RoleViewItem';
+import Listbox from './components/lists/Listbox';
 import { Row } from '@tanstack/react-table';
+import './styles/css/tailwind.css';
+import '@sphereon/ui-components.core/dist/styles/tokens.css';
 export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
 export * from './utils';
-export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem, };
+export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem, CapitolIcon, ChevronIcon, ManIcon, LaptopIcon, StoreIcon, RoleIconView, RoleViewItem, Listbox };

package/dist/index.js

@@ -47,8 +47,18 @@ import WarningImage from './components/assets/images/WarningImage';
 import FormView from './components/views/FormView';
 import InformationRequestView from './components/views/InformationRequestView';
 import ContactViewItem from './components/views/ContactViewItem';
+import CapitolIcon from './components/assets/icons/CapitolIcon';
+import ChevronIcon from './components/assets/icons/ChevronIcon';
+import ManIcon from './components/assets/icons/ManIcon';
+import LaptopIcon from './components/assets/icons/LaptopIcon';
+import StoreIcon from './components/assets/icons/StoreIcon';
+import RoleIconView from './components/views/RoleIconView';
+import RoleViewItem from './components/views/RoleViewItem';
+import Listbox from './components/lists/Listbox';
+import './styles/css/tailwind.css';
+import '@sphereon/ui-components.core/dist/styles/tokens.css';
 export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
 export * from './utils';
-export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem, };
+export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem, CapitolIcon, ChevronIcon, ManIcon, LaptopIcon, StoreIcon, RoleIconView, RoleViewItem, Listbox };

package/dist/styles/css/tailwind.css

@@ -0,0 +1,595 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, custom-base, custom-components, custom-utilities;
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+  }
+}
+@layer custom-base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden='until-found'])) {
+    display: none !important;
+  }
+}
+@layer custom-utilities {
+  .visible {
+    visibility: visible;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .fixed {
+    position: fixed;
+  }
+  .relative {
+    position: relative;
+  }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
+  .mt-auto {
+    margin-top: auto;
+  }
+  .contents {
+    display: contents;
+  }
+  .flex {
+    display: flex;
+  }
+  .grid {
+    display: grid;
+  }
+  .inline-block {
+    display: inline-block;
+  }
+  .table {
+    display: table;
+  }
+  .aspect-square {
+    aspect-ratio: 1 / 1;
+  }
+  .w-\[var\(--button-width\)\] {
+    width: var(--button-width);
+  }
+  .flex-1 {
+    flex: 1;
+  }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
+  .flex-grow {
+    flex-grow: 1;
+  }
+  .border-collapse {
+    border-collapse: collapse;
+  }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .flex-row {
+    flex-direction: row;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .items-start {
+    align-items: flex-start;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .gap-\[var\(--spacing-0_5\)\] {
+    gap: var(--spacing-0_5);
+  }
+  .gap-\[var\(--spacing-1_5\)\] {
+    gap: var(--spacing-1_5);
+  }
+  .self-start {
+    align-self: flex-start;
+  }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+  .rounded-\[var\(--border-radius-2\)\] {
+    border-radius: var(--border-radius-2);
+  }
+  .rounded-\[var\(--border-radius-4\)\] {
+    border-radius: var(--border-radius-4);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .bg-\[var\(--color-brand-50\)\] {
+    background-color: var(--color-brand-50);
+  }
+  .bg-\[var\(--color-grey-50\)\] {
+    background-color: var(--color-grey-50);
+  }
+  .p-\[var\(--spacing-1_5\)\] {
+    padding: var(--spacing-1_5);
+  }
+  .px-\[var\(--spacing-1_5\)\] {
+    padding-inline: var(--spacing-1_5);
+  }
+  .py-\[var\(--spacing-1\)\] {
+    padding-block: var(--spacing-1);
+  }
+  .pr-\[var\(--spacing-4\)\] {
+    padding-right: var(--spacing-4);
+  }
+  .pl-\[var\(--spacing-1_5\)\] {
+    padding-left: var(--spacing-1_5);
+  }
+  .text-left {
+    text-align: left;
+  }
+  .break-words {
+    overflow-wrap: break-word;
+  }
+  .text-\[var\(--color-grey-600\)\] {
+    color: var(--color-grey-600);
+  }
+  .text-\[var\(--color-grey-900\)\] {
+    color: var(--color-grey-900);
+  }
+  .text-\[var\(--color-grey-1100\)\] {
+    color: var(--color-grey-1100);
+  }
+  .opacity-50 {
+    opacity: 50%;
+  }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0rem_0\.5rem_0\.5rem_0rem_rgba\(32\,37\,55\,0\.15\)\] {
+    --tw-shadow: 0rem 0.5rem 0.5rem 0rem var(--tw-shadow-color, rgba(32,37,55,0.15));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .backdrop-filter {
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .\[--anchor-gap\:var\(--spacing-1_5\)\] {
+    --anchor-gap: var(--spacing-1_5);
+  }
+  .hover\:bg-\[var\(--color-grey-1000\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-grey-1000);
+      }
+    }
+  }
+}
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
+      --tw-border-style: solid;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
+    }
+  }
+}

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

@@ -0,0 +1 @@
+export type ChevronDirection = 'up' | 'down';

package/dist/types/icon/index.js

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

package/dist/types/index.d.ts

@@ -4,3 +4,4 @@ export * from './toast';
 export * from './indicator';
 export * from './field';
 export * from './view';
+export * from './icon';

package/dist/types/index.js

@@ -4,3 +4,4 @@ export * from './toast';
 export * from './indicator';
 export * from './field';
 export * from './view';
+export * from './icon';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.4.0",
+  "version": "0.4.1-unstable.3+ad49a8e",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -13,8 +13,9 @@
     "Self-sovereign identity (SSI)"
   ],
   "scripts": {
-    "build": "tsc && pnpm run copy-css",
+    "build": "tsc && pnpm run generate-css",
     "copy-css": "cpy src/**/*.css dist --parents",
+    "generate-css": "tailwindcss -i ./src/styles/css/tailwind.css -o ./dist/styles/css/tailwind.css",
     "build:clean": "tsc --build --clean && tsc --build"
   },
   "source": "src/index.ts",
@@ -31,6 +32,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
+    "@headlessui/react": "^2.2.4",
     "@jsonforms/core": "^3.3.0",
     "@jsonforms/material-renderers": "^3.3.0",
     "@jsonforms/react": "^3.3.0",
@@ -41,7 +43,7 @@
     "@mui/system": "^5.15.12",
     "@mui/x-date-pickers": "^6.19.5",
     "@sphereon/ssi-sdk.data-store": "^0.33",
-    "@sphereon/ui-components.core": "0.4.0",
+    "@sphereon/ui-components.core": "0.4.1-unstable.3+ad49a8e",
     "@tanstack/react-table": "^8.9.3",
     "react-json-tree": "^0.18.0",
     "react-loader-spinner": "5.4.5",
@@ -51,13 +53,15 @@
     "uint8arrays": "^3.1.1"
   },
   "devDependencies": {
+    "@tailwindcss/cli": "^4.1.11",
     "@types/react": "~18.3.18",
     "ajv": "^8.12.0",
     "cpy-cli": "^5.0.0",
+    "tailwindcss": "^4.1.11",
     "typescript": "4.9.5"
   },
   "peerDependencies": {
     "react": ">= 18"
   },
-  "gitHead": "c63b21ea1ff8a2aef0b6de301d1a85143d9d8f8e"
+  "gitHead": "ad49a8e0813bcf7a4627b239586e870bad5f1db6"
 }

package/dist/components/views/FormView/styles.css

@@ -1,105 +0,0 @@
-.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
-    border-color: #7276F7 !important;
-}
-
-.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
-    border-color: #7276F7 !important;
-}
-
-.MuiTypography-h6 {
-    font-size: 16px !important;
-    font-style: normal !important;
-    font-weight: 600 !important;
-}
-
-.MuiGrid-container {
-    padding: 0 !important;
-}
-
-.MuiFormControl-root {
-    padding: 0 !important;
-
-}
-
-.MuiCardContent-root {
-    padding: 0 !important;
-}
-
-.MuiCardHeader-root {
-    padding: 0 !important;
-}
-
-.MuiPaper-root {
-    margin: 0 !important;
-    background-color: #FBFBFB !important;
-    box-shadow: none !important;
-    border-radius: 4px !important;
-}
-
-.MuiCardHeader-title {
-    font-family: Poppins, serif !important;
-    font-size: 16px !important;
-    font-style: normal !important;
-    font-weight: 400 !important;
-    margin-bottom: 10px !important;
-}
-
-.MuiGrid-root.MuiGrid-container.MuiGrid-direction-xs-column {
-    gap: 24px !important;
-}
-
-.MuiFormLabel-root.MuiInputLabel-root {
-    font-family: 'Poppins', sans-serif !important;
-}
-
-.MuiInputBase-root.MuiOutlinedInput-root .MuiInputBase-input {
-    font-family: 'Poppins', sans-serif !important;
-}
-
-.MuiInputBase-root.MuiOutlinedInput-root {
-    font-family: 'Poppins', sans-serif !important;
-}
-
-.MuiTypography-root {
-    font-family: 'Poppins', sans-serif !important;
-    color: #303030 !important;
-}
-
-.MuiDateCalendar-root {
-    background-color: #ECE6F0 !important;
-    border-radius: 16px !important;
-}
-
-.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation8.MuiPickersPopper-paper {
-    border-radius: 16px !important;
-}
-
-.MuiButtonBase-root.MuiPickersDay-root.Mui-selected.MuiPickersDay-dayWithMargin {
-    background-color: #7276F7 !important;
-}
-
-.MuiButtonBase-root.MuiPickersDay-root.MuiPickersDay-dayWithMargin:hover {
-    background-color: #B7B8D9 !important;
-}
-
-.base-Popper-root {
-    border-radius: 4px !important;
-}
-
-.MuiFormGroup-root.MuiFormGroup-row {
-    display: grid !important;
-    grid-template-columns: repeat(2, 1fr) !important;
-    grid-gap: 10px !important;
-}
-
-.MuiGrid-root.MuiGrid-item.MuiGrid-grid-xs-true:empty {
-    display: none !important;
-}
-
-textarea.MuiInputBase-input.MuiInputBase-inputMultiline {
-    min-height: 112px !important;
-}
-
-.MuiTabs-scroller.MuiTabs-fixed {
-    margin-bottom: 12px !important;
-}