@sphereon/ui-components.ssi-react 0.4.1-next.14 → 0.4.1-next.145

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { parseColor } from '@sphereon/ui-components.core';
+const ManagementIcon = (props) => {
+    const { size = 24, color = '--color-grey-800', style } = props;
+    const iconAspectRatio = 1;
+    const height = size / 16;
+    const width = iconAspectRatio * height;
+    return (_jsx("div", { style: { ...style, width: `${width}rem`, height: `${height}rem`, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("svg", { width: "26", height: "26", viewBox: "0 0 26 26", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M19.8408 1.37402C20.1344 0.808372 20.9495 0.808474 21.2432 1.37402L21.2441 1.37598L21.2705 1.43066V1.43262C21.8097 2.69772 22.733 3.7619 23.9082 4.46973L24.6455 4.91309L24.6465 4.91406L24.6934 4.94434L24.6953 4.94531C25.1681 5.27543 25.1679 5.98407 24.6953 6.31543L24.6943 6.31641L24.667 6.27441L24.6934 6.31641L24.6465 6.3457L24.6455 6.34668L23.9082 6.79102C23.5166 7.02786 23.1521 7.30304 22.8213 7.6123C22.8965 7.98655 22.9375 8.37475 22.9375 8.77148V19.2412C22.9375 22.4489 20.3481 25.0498 17.1543 25.0498H6.73242C3.53882 25.0498 0.950195 22.4491 0.950195 19.2412V8.77148C0.950195 5.56378 3.53865 2.96193 6.73242 2.96191H17.1543C17.6944 2.96191 18.2185 3.03746 18.7148 3.17676C19.1674 2.66002 19.5408 2.07268 19.8135 1.43262L19.8145 1.43066L19.8408 1.37598V1.37402ZM6.73242 4.10938C4.17047 4.10939 2.09302 6.19646 2.09277 8.77051V19.2412C2.09283 21.8156 4.17052 23.9023 6.73242 23.9023H17.1543C19.7164 23.9023 21.7949 21.8154 21.7949 19.2412V8.84082C21.6165 9.11728 21.4575 9.40719 21.3223 9.70898L21.2705 9.82715L21.2695 9.8291L21.2432 9.88379V9.88574C20.959 10.4343 20.1848 10.4515 19.8701 9.9375L19.8135 9.82715L19.7617 9.70898L19.6582 9.49121C19.1248 8.41223 18.3035 7.5001 17.2842 6.8584L17.1748 6.79004V6.78906L16.4385 6.34668C15.8994 6.0223 15.8994 5.23744 16.4385 4.91309L17.1758 4.46973C17.3443 4.36748 17.5067 4.25578 17.665 4.13965C17.4973 4.12128 17.3265 4.10938 17.1543 4.10938H6.73242ZM11.1621 7.15039C11.7658 7.15039 12.2549 7.64216 12.2549 8.24805V12.959C12.2549 13.5649 11.7658 14.0557 11.1621 14.0557H9.67676C9.70003 14.0857 9.72244 14.1174 9.74316 14.1514L12.3496 18.3408C12.2231 17.9662 12.1543 17.5649 12.1543 17.1475C12.1543 15.0965 13.8104 13.4326 15.8525 13.4326C17.8943 13.4329 19.5498 15.0967 19.5498 17.1475C19.5498 19.1982 17.8944 20.862 15.8525 20.8623C14.6266 20.8623 13.54 20.2619 12.8672 19.3389C12.9628 19.9682 12.4863 20.5995 11.7852 20.5996H5.84961C4.99076 20.5996 4.4681 19.6523 4.92188 18.9219L7.8916 14.1514V14.1504L7.93066 14.0898L7.93262 14.0879C7.94077 14.0767 7.95042 14.0666 7.95898 14.0557H6.47168C5.86821 14.0554 5.37988 13.5647 5.37988 12.959V8.24805C5.37988 7.64231 5.86821 7.15063 6.47168 7.15039H11.1621ZM15.8525 14.5801C14.4408 14.5801 13.2969 15.73 13.2969 17.1475C13.297 18.5661 14.4409 19.7148 15.8525 19.7148C17.264 19.7146 18.4071 18.566 18.4072 17.1475C18.4072 15.7301 17.2641 14.5803 15.8525 14.5801ZM5.93945 19.4531H11.6943L8.81641 14.8262L5.93945 19.4531ZM6.52246 12.9092H11.1123V8.29785H6.52246V12.9092ZM20.542 2.5459C19.8909 3.74179 18.9345 4.74838 17.7637 5.45312L17.4688 5.62988L17.7637 5.80762C18.9342 6.51228 19.8909 7.51818 20.542 8.71387C21.1931 7.51801 22.1505 6.51234 23.3213 5.80762L23.6152 5.62988L23.3213 5.45312C22.1503 4.74832 21.1932 3.74202 20.542 2.5459Z", fill: parseColor(color), stroke: parseColor(color), strokeWidth: "0.1" }) }) }) }));
+};
+export default ManagementIcon;

package/dist/components/assets/icons/{MeatBallsIcon → MeatBalls}/index.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { fontColors } from '@sphereon/ui-components.core';
+import { fontColors, parseColor } from '@sphereon/ui-components.core';
 const MeatBallsIcon = (props) => {
     const { width = 20, height = 5, color = fontColors.dark, style } = props;
-    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 20 5", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "2", cy: "2.5", r: "2", fill: color }), _jsx("circle", { cx: "10", cy: "2.5", r: "2", fill: color }), _jsx("circle", { cx: "18", cy: "2.5", r: "2", fill: color })] }) }));
+    const parsedColor = parseColor(color);
+    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 20 5", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "2", cy: "2.5", r: "2", fill: parsedColor }), _jsx("circle", { cx: "10", cy: "2.5", r: "2", fill: parsedColor }), _jsx("circle", { cx: "18", cy: "2.5", r: "2", fill: parsedColor })] }) }));
 };
 export default MeatBallsIcon;

package/dist/components/assets/icons/{PencilIcon → Pencil}/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { fontColors } from '@sphereon/ui-components.core';
+import { fontColors, parseColor } from '@sphereon/ui-components.core';
 const PencilIcon = (props) => {
     const { size = 18, color = fontColors.dark, style } = props;
-    return (_jsx("div", { style: { ...style, width: size, height: size, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2.31294 17.953L5.45728 17.1188C5.71399 17.0513 5.9485 16.9105 6.13529 16.7119L16.5848 5.62715C17.1708 5.00553 17.5 4.16233 17.5 3.2832C17.5 2.40407 17.1708 1.56087 16.5848 0.939102C15.9896 0.336436 15.1982 0 14.3752 0C13.5522 0 12.7608 0.336436 12.1656 0.939102L1.71247 12.0224C1.5257 12.2205 1.39308 12.4688 1.32888 12.7407L0.543408 16.0762C0.434942 16.5376 0.53224 17.0264 0.807378 17.4019C1.08266 17.7773 1.50519 17.998 1.95343 18C2.0746 18.0001 2.19534 17.9844 2.3129 17.9532L2.31294 17.953ZM11.6618 3.34385L14.3151 6.15839L5.6098 15.3929L2.95655 12.5774L11.6618 3.34385ZM14.3742 1.29089C14.8719 1.29089 15.349 1.50057 15.7009 1.87373C16.0527 2.24704 16.2504 2.75317 16.2504 3.28108C16.2504 3.80884 16.0527 4.3151 15.7009 4.68827L15.2006 5.21899L12.5457 2.40623L13.046 1.87551C13.3971 1.49983 13.8756 1.28926 14.3742 1.29089ZM1.75661 16.4004L2.36287 13.8274L4.43498 16.0263L2.00676 16.6657C1.93543 16.6868 1.85921 16.6643 1.80826 16.6074C1.75758 16.5531 1.7379 16.4743 1.75661 16.4004Z", fill: color }) }) }));
+    return (_jsx("div", { style: { ...style, width: size, height: size, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2.31294 17.953L5.45728 17.1188C5.71399 17.0513 5.9485 16.9105 6.13529 16.7119L16.5848 5.62715C17.1708 5.00553 17.5 4.16233 17.5 3.2832C17.5 2.40407 17.1708 1.56087 16.5848 0.939102C15.9896 0.336436 15.1982 0 14.3752 0C13.5522 0 12.7608 0.336436 12.1656 0.939102L1.71247 12.0224C1.5257 12.2205 1.39308 12.4688 1.32888 12.7407L0.543408 16.0762C0.434942 16.5376 0.53224 17.0264 0.807378 17.4019C1.08266 17.7773 1.50519 17.998 1.95343 18C2.0746 18.0001 2.19534 17.9844 2.3129 17.9532L2.31294 17.953ZM11.6618 3.34385L14.3151 6.15839L5.6098 15.3929L2.95655 12.5774L11.6618 3.34385ZM14.3742 1.29089C14.8719 1.29089 15.349 1.50057 15.7009 1.87373C16.0527 2.24704 16.2504 2.75317 16.2504 3.28108C16.2504 3.80884 16.0527 4.3151 15.7009 4.68827L15.2006 5.21899L12.5457 2.40623L13.046 1.87551C13.3971 1.49983 13.8756 1.28926 14.3742 1.29089ZM1.75661 16.4004L2.36287 13.8274L4.43498 16.0263L2.00676 16.6657C1.93543 16.6868 1.85921 16.6643 1.80826 16.6074C1.75758 16.5531 1.7379 16.4743 1.75661 16.4004Z", fill: parseColor(color) }) }) }));
 };
 export default PencilIcon;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fontColors, parseColor } from '@sphereon/ui-components.core';
+const StoreIcon = (props) => {
+    const { width = 18, height = 20, color = fontColors.dark, style } = props;
+    const parsedColor = parseColor(color);
+    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: parsedColor, 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: parsedColor }), _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: parsedColor, 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: parsedColor }), _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: parsedColor }), _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: parsedColor }), _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: parsedColor }), _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: parsedColor }), _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: parsedColor }), _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: parsedColor }), _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: parsedColor }), _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: parsedColor }), _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: parsedColor }), _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: parsedColor }), _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: parsedColor }), _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: parsedColor }), _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: parsedColor }), _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: parsedColor })] }) }));
+};
+export default StoreIcon;

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

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

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+const UXIcon = (props) => {
+    const { size = 25, color = fontColors.dark, style } = props;
+    const iconAspectRatio = 1;
+    const height = size / 16;
+    const width = iconAspectRatio * height;
+    return (_jsx("div", { style: { ...style, width: `${width}rem`, height: `${height}rem`, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M22.0664 0.100586C23.295 0.100586 24.2998 1.10542 24.2998 2.33398V22.0664C24.2998 23.295 23.295 24.2998 22.0664 24.2998H2.33398C1.10542 24.2998 0.100586 23.295 0.100586 22.0664V2.33398C0.100586 1.10542 1.10542 0.100586 2.33398 0.100586H22.0664ZM1.36719 22.0664C1.36719 22.5978 1.80255 23.0332 2.33398 23.0332H22.0664C22.5978 23.0332 23.0332 22.5978 23.0332 22.0664V5.63379H1.36719V22.0664ZM13 17.7002C13.3486 17.7002 13.6338 17.9854 13.6338 18.334V21C13.6338 21.3486 13.3486 21.6338 13 21.6338H3.40039C3.05183 21.6338 2.7666 21.3486 2.7666 21V18.334C2.7666 17.9854 3.05183 17.7002 3.40039 17.7002H13ZM21 7.0332C21.3486 7.0332 21.6338 7.31843 21.6338 7.66699V21C21.6338 21.3486 21.3486 21.6338 21 21.6338H15.667C15.3184 21.6338 15.0332 21.3486 15.0332 21V7.66699C15.0332 7.31843 15.3184 7.0332 15.667 7.0332H21ZM16.2998 20.3672H20.3672V8.2998H16.2998V20.3672ZM4.0332 20.3672H12.3672V18.9668H4.0332V20.3672ZM13 7.0332C13.3486 7.0332 13.6338 7.31843 13.6338 7.66699V15.667C13.6337 16.0155 13.3485 16.2998 13 16.2998H3.40039C3.05187 16.2998 2.76667 16.0155 2.7666 15.667V7.66699C2.7666 7.31843 3.05183 7.0332 3.40039 7.0332H13ZM4.0332 15.0332H12.3672V8.2998H4.0332V15.0332ZM2.33398 1.36719C1.80255 1.36719 1.36719 1.80255 1.36719 2.33398V4.36719H23.0332V2.33398C23.0332 1.80255 22.5978 1.36719 22.0664 1.36719H2.33398ZM2.86719 2.2334C3.03105 2.23348 3.2002 2.29604 3.31543 2.42773H3.31445C3.43651 2.55189 3.5 2.70832 3.5 2.86719C3.49991 3.02777 3.43528 3.18581 3.31055 3.31055C3.18581 3.43528 3.02777 3.49991 2.86719 3.5C2.7065 3.5 2.54767 3.43537 2.42285 3.31055C2.29822 3.18583 2.23349 3.0277 2.2334 2.86719C2.2334 2.7086 2.29633 2.55179 2.41797 2.42773L2.46387 2.38184C2.57579 2.28149 2.72363 2.2334 2.86719 2.2334ZM7.13379 2.2334C7.29767 2.23346 7.46678 2.29603 7.58203 2.42773H7.58105C7.70313 2.5519 7.7666 2.7083 7.7666 2.86719C7.76651 3.02777 7.70189 3.18581 7.57715 3.31055C7.4524 3.43528 7.29438 3.49993 7.13379 3.5C6.9731 3.5 6.81427 3.43537 6.68945 3.31055C6.56484 3.18584 6.50009 3.02768 6.5 2.86719C6.5 2.70861 6.56296 2.55178 6.68457 2.42773L6.73047 2.38184C6.84239 2.28147 6.99022 2.2334 7.13379 2.2334ZM4.89355 2.25977C5.0798 2.23415 5.28656 2.29606 5.43555 2.41504L5.44434 2.42285L5.52637 2.52246C5.59712 2.62722 5.63379 2.7467 5.63379 2.86719V2.97363C5.63377 2.99662 5.62814 3.01568 5.62402 3.02734C5.62081 3.03645 5.6148 3.04997 5.61328 3.05371C5.60881 3.06489 5.60646 3.07162 5.60645 3.08008C5.60645 3.12604 5.58462 3.16159 5.57031 3.18066C5.55537 3.20053 5.5364 3.21848 5.52441 3.23047C5.52369 3.23119 5.52325 3.23182 5.5166 3.24512C5.50992 3.25849 5.49657 3.28465 5.4707 3.31055C5.45868 3.32257 5.44004 3.34135 5.41992 3.35645C5.40701 3.36613 5.38629 3.37713 5.36035 3.38477C5.3451 3.39543 5.33366 3.40495 5.3252 3.40918C5.3119 3.41583 5.31127 3.41725 5.31055 3.41797C5.2502 3.478 5.17893 3.47365 5.13379 3.47363H4.91992C4.89701 3.47359 4.87785 3.46797 4.86621 3.46387C4.85693 3.46058 4.84325 3.4545 4.83984 3.45312C4.82861 3.44863 4.822 3.44727 4.81348 3.44727C4.76908 3.44725 4.73362 3.42494 4.71875 3.41602C4.69867 3.40397 4.68536 3.39515 4.66504 3.38477C4.63985 3.37706 4.61909 3.36593 4.60645 3.35645C4.5865 3.34141 4.5676 3.32248 4.55566 3.31055C4.4312 3.18587 4.36727 3.02758 4.36719 2.86719V2.75977C4.36726 2.73692 4.37286 2.71766 4.37695 2.70605C4.3803 2.69665 4.38644 2.68282 4.3877 2.67969C4.39214 2.66855 4.39355 2.6618 4.39355 2.65332C4.39362 2.60746 4.41638 2.57276 4.43066 2.55371C4.44575 2.53362 4.46456 2.51493 4.47656 2.50293C4.47724 2.5023 4.47833 2.50133 4.48438 2.48926C4.49105 2.47591 4.50342 2.44876 4.5293 2.42285C4.5413 2.41085 4.55999 2.39204 4.58008 2.37695C4.59198 2.36803 4.61071 2.35742 4.63379 2.34961C4.65287 2.3357 4.67099 2.32653 4.68652 2.32031C4.70734 2.31199 4.71915 2.30773 4.73926 2.29785C4.76298 2.28052 4.78698 2.27049 4.81055 2.26562L4.89355 2.25977Z", fill: color, stroke: color, strokeWidth: "0.171429" }) }) }));
+};
+export default UXIcon;

package/dist/components/assets/icons/{ViewIcon → View}/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { fontColors } from '@sphereon/ui-components.core';
+import { fontColors, parseColor } from '@sphereon/ui-components.core';
 const ViewIcon = (props) => {
     const { width = 16, height = 17, color = fontColors.dark, style } = props;
-    return (_jsx("div", { style: { ...style, width: width, height: height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0 14.7857V2.21429C0 1.26743 0.767429 0.5 1.71429 0.5H14.2857C15.2326 0.5 16 1.26743 16 2.21429V14.7857C16 15.7326 15.2326 16.5 14.2857 16.5C14.2857 16.5 10.2846 16.5 10.2817 16.5H1.71429C0.767429 16.5 0 15.7326 0 14.7857ZM14.8571 13.1566V2.21429C14.8571 1.89886 14.6011 1.64286 14.2857 1.64286H1.71429C1.39886 1.64286 1.14286 1.89886 1.14286 2.21429V10.3863L3.06628 7.08857C3.37714 6.55657 3.94915 6.232 4.56515 6.23829C5.18115 6.24457 5.74628 6.58114 6.04571 7.12L8.60172 11.72L9.52171 10.1869C9.81028 9.70571 10.3166 9.396 10.8766 9.35829C11.4366 9.32057 11.9794 9.55943 12.3303 9.99771L14.8571 13.1566ZM10.6217 15.3571H14.2857C14.5423 15.3571 14.76 15.1874 14.832 14.9543L11.4377 10.712C11.3206 10.5657 11.14 10.4863 10.9531 10.4989C10.7663 10.5114 10.5977 10.6143 10.5017 10.7749L9.24229 12.8737L10.6217 15.3571ZM1.14286 12.6543V14.7857C1.14286 15.1011 1.39886 15.3571 1.71429 15.3571H9.31428L5.04686 7.67486C4.94686 7.49543 4.75828 7.38343 4.55314 7.38114C4.34799 7.37886 4.15714 7.48743 4.05371 7.66457L1.14286 12.6543ZM8 6.21429C7.68457 6.21429 7.42857 5.95829 7.42857 5.64286C7.42857 5.32743 7.68457 5.07143 8 5.07143H10.2857C10.6011 5.07143 10.8571 5.32743 10.8571 5.64286C10.8571 5.95829 10.6011 6.21429 10.2857 6.21429H8ZM3.42857 3.92857C3.11314 3.92857 2.85714 3.67257 2.85714 3.35714C2.85714 3.04171 3.11314 2.78571 3.42857 2.78571H5.71429C6.02971 2.78571 6.28571 3.04171 6.28571 3.35714C6.28571 3.67257 6.02971 3.92857 5.71429 3.92857H3.42857ZM10.8571 3.92857C10.5417 3.92857 10.2857 3.67257 10.2857 3.35714C10.2857 3.04171 10.5417 2.78571 10.8571 2.78571H13.1429C13.4583 2.78571 13.7143 3.04171 13.7143 3.35714C13.7143 3.67257 13.4583 3.92857 13.1429 3.92857H10.8571Z", fill: color }) }) }));
+    return (_jsx("div", { style: { ...style, width: width, height: height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0 14.7857V2.21429C0 1.26743 0.767429 0.5 1.71429 0.5H14.2857C15.2326 0.5 16 1.26743 16 2.21429V14.7857C16 15.7326 15.2326 16.5 14.2857 16.5C14.2857 16.5 10.2846 16.5 10.2817 16.5H1.71429C0.767429 16.5 0 15.7326 0 14.7857ZM14.8571 13.1566V2.21429C14.8571 1.89886 14.6011 1.64286 14.2857 1.64286H1.71429C1.39886 1.64286 1.14286 1.89886 1.14286 2.21429V10.3863L3.06628 7.08857C3.37714 6.55657 3.94915 6.232 4.56515 6.23829C5.18115 6.24457 5.74628 6.58114 6.04571 7.12L8.60172 11.72L9.52171 10.1869C9.81028 9.70571 10.3166 9.396 10.8766 9.35829C11.4366 9.32057 11.9794 9.55943 12.3303 9.99771L14.8571 13.1566ZM10.6217 15.3571H14.2857C14.5423 15.3571 14.76 15.1874 14.832 14.9543L11.4377 10.712C11.3206 10.5657 11.14 10.4863 10.9531 10.4989C10.7663 10.5114 10.5977 10.6143 10.5017 10.7749L9.24229 12.8737L10.6217 15.3571ZM1.14286 12.6543V14.7857C1.14286 15.1011 1.39886 15.3571 1.71429 15.3571H9.31428L5.04686 7.67486C4.94686 7.49543 4.75828 7.38343 4.55314 7.38114C4.34799 7.37886 4.15714 7.48743 4.05371 7.66457L1.14286 12.6543ZM8 6.21429C7.68457 6.21429 7.42857 5.95829 7.42857 5.64286C7.42857 5.32743 7.68457 5.07143 8 5.07143H10.2857C10.6011 5.07143 10.8571 5.32743 10.8571 5.64286C10.8571 5.95829 10.6011 6.21429 10.2857 6.21429H8ZM3.42857 3.92857C3.11314 3.92857 2.85714 3.67257 2.85714 3.35714C2.85714 3.04171 3.11314 2.78571 3.42857 2.78571H5.71429C6.02971 2.78571 6.28571 3.04171 6.28571 3.35714C6.28571 3.67257 6.02971 3.92857 5.71429 3.92857H3.42857ZM10.8571 3.92857C10.5417 3.92857 10.2857 3.67257 10.2857 3.35714C10.2857 3.04171 10.5417 2.78571 10.8571 2.78571H13.1429C13.4583 2.78571 13.7143 3.04171 13.7143 3.35714C13.7143 3.67257 13.4583 3.92857 13.1429 3.92857H10.8571Z", fill: parseColor(color) }) }) }));
 };
 export default ViewIcon;

package/dist/components/assets/logos/SSIPlaceholderLogo/index.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { logoColors } from '@sphereon/ui-components.core';
+import { logoColors, parseColor } from '@sphereon/ui-components.core';
 const SSIPlaceholderLogo = (props) => {
     const { color = logoColors.default, size = 32, style } = props;
-    return (_jsx("div", { style: { ...style, width: size, height: size }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 32 32", fill: "none", children: [_jsx("path", { d: "M15.9997 31.9999C11.7563 31.9999 7.68645 30.3141 4.68603 27.3136C1.68548 24.313 0 20.2435 0 15.9999C0 11.7563 1.68548 7.68669 4.68603 4.68627C7.68657 1.68572 11.7561 0 15.9997 0C20.2433 0 24.3129 1.68572 27.3133 4.68627C30.3139 7.68657 31.9994 11.7563 31.9994 15.9999C31.9947 20.2419 30.3075 24.3089 27.3079 27.3082C24.3083 30.3077 20.2415 31.9949 15.9997 31.9999ZM15.9997 0.914927V0.914691C11.9987 0.914691 8.16186 2.50412 5.33238 5.33317C2.50339 8.1624 0.9139 11.9997 0.9139 16.0005C0.9139 20.0015 2.50333 23.8383 5.33238 26.6678C8.16137 29.4968 11.9983 31.0863 15.9997 31.0863C20.0011 31.0863 23.8375 29.4968 26.667 26.6678C29.496 23.8388 31.0855 20.0018 31.0855 16.0005C31.081 12.0009 29.4901 8.16627 26.662 5.33861C23.834 2.51059 19.9997 0.919705 16.0002 0.915174L15.9997 0.914927Z", fill: color }), _jsx("path", { d: "M30.1659 10.0545C30.0927 10.0545 30.0205 10.0368 29.9556 10.0028C26.3647 8.13584 21.2781 7.06476 15.9997 7.06476C10.7214 7.06476 5.63448 8.13578 2.04387 10.0028C1.93604 10.0625 1.80862 10.0762 1.6904 10.0405C1.57241 10.0049 1.47355 9.92327 1.41668 9.81378C1.35981 9.70429 1.34966 9.5764 1.38836 9.45936C1.42706 9.34232 1.51154 9.24581 1.62244 9.19177C5.39433 7.23065 10.4993 6.15039 16 6.15039C21.5006 6.15039 26.6056 7.23065 30.3775 9.19177C30.5643 9.28899 30.6604 9.50136 30.6104 9.70594C30.5603 9.91052 30.377 10.0545 30.1663 10.0545L30.1659 10.0545Z", fill: color }), _jsx("path", { d: "M15.9996 25.848C10.4929 25.848 5.38486 24.7664 1.61726 22.8022C1.39333 22.6856 1.30626 22.4095 1.42282 22.1856C1.53963 21.9617 1.8157 21.8746 2.03964 21.9912C5.62728 23.8614 10.7147 24.9339 15.9997 24.9339C21.2848 24.9339 26.3722 23.8614 29.9598 21.9914V21.9912C30.1838 21.8746 30.4598 21.9617 30.5766 22.1856C30.6932 22.4096 30.6061 22.6856 30.3822 22.8022C26.6146 24.7666 21.5066 25.8481 15.9999 25.8481L15.9996 25.848Z", fill: color }), _jsx("path", { d: "M15.9995 32.0001C11.3852 32.0001 7.77148 24.9717 7.77148 16.0007C7.77148 7.02959 11.3855 0.0012207 15.9995 0.0012207C20.6136 0.0012207 24.2276 7.02899 24.2276 16.0007C24.2276 24.9723 20.6136 32.0001 15.9995 32.0001ZM15.9995 0.915181C11.9666 0.915181 8.68545 7.68078 8.68545 16.0007C8.68545 24.3205 11.9668 31.0861 15.9995 31.0861C20.0323 31.0861 23.3136 24.3205 23.3136 16.0007C23.3136 7.68078 20.0323 0.915181 15.9995 0.915181Z", fill: color }), _jsx("path", { d: "M16 31.9998C15.7476 31.9998 15.543 31.795 15.543 31.5425V0.457553C15.543 0.205069 15.7476 0.000488281 16 0.000488281C16.2525 0.000488281 16.4571 0.205069 16.4571 0.457553V31.5425C16.4571 31.6638 16.409 31.7801 16.3233 31.8658C16.2377 31.9514 16.1213 31.9998 16 31.9998V31.9998Z", fill: color }), _jsx("path", { d: "M31.542 16.4571H0.457065C0.204581 16.4571 0 16.2525 0 16C0 15.7476 0.204581 15.543 0.457065 15.543H31.542C31.7945 15.543 31.9991 15.7476 31.9991 16C31.9991 16.2525 31.7945 16.4571 31.542 16.4571Z", fill: color })] }) }));
+    const parsedColor = parseColor(color);
+    return (_jsx("div", { style: { ...style, width: size, height: size }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 32 32", fill: "none", children: [_jsx("path", { d: "M15.9997 31.9999C11.7563 31.9999 7.68645 30.3141 4.68603 27.3136C1.68548 24.313 0 20.2435 0 15.9999C0 11.7563 1.68548 7.68669 4.68603 4.68627C7.68657 1.68572 11.7561 0 15.9997 0C20.2433 0 24.3129 1.68572 27.3133 4.68627C30.3139 7.68657 31.9994 11.7563 31.9994 15.9999C31.9947 20.2419 30.3075 24.3089 27.3079 27.3082C24.3083 30.3077 20.2415 31.9949 15.9997 31.9999ZM15.9997 0.914927V0.914691C11.9987 0.914691 8.16186 2.50412 5.33238 5.33317C2.50339 8.1624 0.9139 11.9997 0.9139 16.0005C0.9139 20.0015 2.50333 23.8383 5.33238 26.6678C8.16137 29.4968 11.9983 31.0863 15.9997 31.0863C20.0011 31.0863 23.8375 29.4968 26.667 26.6678C29.496 23.8388 31.0855 20.0018 31.0855 16.0005C31.081 12.0009 29.4901 8.16627 26.662 5.33861C23.834 2.51059 19.9997 0.919705 16.0002 0.915174L15.9997 0.914927Z", fill: parsedColor }), _jsx("path", { d: "M30.1659 10.0545C30.0927 10.0545 30.0205 10.0368 29.9556 10.0028C26.3647 8.13584 21.2781 7.06476 15.9997 7.06476C10.7214 7.06476 5.63448 8.13578 2.04387 10.0028C1.93604 10.0625 1.80862 10.0762 1.6904 10.0405C1.57241 10.0049 1.47355 9.92327 1.41668 9.81378C1.35981 9.70429 1.34966 9.5764 1.38836 9.45936C1.42706 9.34232 1.51154 9.24581 1.62244 9.19177C5.39433 7.23065 10.4993 6.15039 16 6.15039C21.5006 6.15039 26.6056 7.23065 30.3775 9.19177C30.5643 9.28899 30.6604 9.50136 30.6104 9.70594C30.5603 9.91052 30.377 10.0545 30.1663 10.0545L30.1659 10.0545Z", fill: parsedColor }), _jsx("path", { d: "M15.9996 25.848C10.4929 25.848 5.38486 24.7664 1.61726 22.8022C1.39333 22.6856 1.30626 22.4095 1.42282 22.1856C1.53963 21.9617 1.8157 21.8746 2.03964 21.9912C5.62728 23.8614 10.7147 24.9339 15.9997 24.9339C21.2848 24.9339 26.3722 23.8614 29.9598 21.9914V21.9912C30.1838 21.8746 30.4598 21.9617 30.5766 22.1856C30.6932 22.4096 30.6061 22.6856 30.3822 22.8022C26.6146 24.7666 21.5066 25.8481 15.9999 25.8481L15.9996 25.848Z", fill: parsedColor }), _jsx("path", { d: "M15.9995 32.0001C11.3852 32.0001 7.77148 24.9717 7.77148 16.0007C7.77148 7.02959 11.3855 0.0012207 15.9995 0.0012207C20.6136 0.0012207 24.2276 7.02899 24.2276 16.0007C24.2276 24.9723 20.6136 32.0001 15.9995 32.0001ZM15.9995 0.915181C11.9666 0.915181 8.68545 7.68078 8.68545 16.0007C8.68545 24.3205 11.9668 31.0861 15.9995 31.0861C20.0323 31.0861 23.3136 24.3205 23.3136 16.0007C23.3136 7.68078 20.0323 0.915181 15.9995 0.915181Z", fill: parsedColor }), _jsx("path", { d: "M16 31.9998C15.7476 31.9998 15.543 31.795 15.543 31.5425V0.457553C15.543 0.205069 15.7476 0.000488281 16 0.000488281C16.2525 0.000488281 16.4571 0.205069 16.4571 0.457553V31.5425C16.4571 31.6638 16.409 31.7801 16.3233 31.8658C16.2377 31.9514 16.1213 31.9998 16 31.9998V31.9998Z", fill: parsedColor }), _jsx("path", { d: "M31.542 16.4571H0.457065C0.204581 16.4571 0 16.2525 0 16C0 15.7476 0.204581 15.543 0.457065 15.543H31.542C31.7945 15.543 31.9991 15.7476 31.9991 16C31.9991 16.2525 31.7945 16.4571 31.542 16.4571Z", fill: parsedColor })] }) }));
 };
 export default SSIPlaceholderLogo;

package/dist/components/assets/placeholders/PersonPlaceholder/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { elementColors } from '@sphereon/ui-components.core';
+import { elementColors, parseColor } from '@sphereon/ui-components.core';
 const PersonPlaceholder = (props) => {
     const { width = 79, height = 77, color = elementColors[300], style } = props;
-    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 79 77", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M22.8136 19.3766C22.8136 10.2672 30.2594 2.85265 39.4999 2.85265C48.7404 2.85265 56.1862 10.2672 56.1862 19.3766C56.1862 28.486 48.7404 35.9005 39.4999 35.9005C30.2594 35.9005 22.8136 28.486 22.8136 19.3766ZM3.52788 62.4042C3.52788 60.1881 4.62672 58.0491 6.89989 55.9687C9.18981 53.873 12.4868 52.0225 16.3463 50.4894C24.0686 47.4219 33.3853 45.8802 39.4999 45.8802C45.6144 45.8802 54.9312 47.4219 62.6534 50.4894C66.513 52.0225 69.81 53.873 72.0999 55.9687C74.3731 58.0491 75.4719 60.1881 75.4719 62.4042V74.1473H3.52788V62.4042Z", stroke: color, strokeWidth: "5.19882" }) }) }));
+    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 79 77", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M22.8136 19.3766C22.8136 10.2672 30.2594 2.85265 39.4999 2.85265C48.7404 2.85265 56.1862 10.2672 56.1862 19.3766C56.1862 28.486 48.7404 35.9005 39.4999 35.9005C30.2594 35.9005 22.8136 28.486 22.8136 19.3766ZM3.52788 62.4042C3.52788 60.1881 4.62672 58.0491 6.89989 55.9687C9.18981 53.873 12.4868 52.0225 16.3463 50.4894C24.0686 47.4219 33.3853 45.8802 39.4999 45.8802C45.6144 45.8802 54.9312 47.4219 62.6534 50.4894C66.513 52.0225 69.81 53.873 72.0999 55.9687C74.3731 58.0491 75.4719 60.1881 75.4719 62.4042V74.1473H3.52788V62.4042Z", stroke: parseColor(color), strokeWidth: "5.19882" }) }) }));
 };
 export default PersonPlaceholder;

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

@@ -1,4 +1,4 @@
-import { FC, MouseEventHandler } from 'react';
+import { CSSProperties, FC, MouseEventHandler } from 'react';
 import { ButtonIcon } from '@sphereon/ui-components.core';
 type Props = {
     icon: ButtonIcon;
@@ -6,6 +6,7 @@ type Props = {
     onClick: MouseEventHandler;
     disabled?: boolean | (() => boolean);
     iconColor?: string;
+    style?: CSSProperties;
 };
 declare const IconButton: FC<Props>;
 export default IconButton;

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

@@ -3,7 +3,7 @@ import { fontColors, OpacityStyleEnum } from '@sphereon/ui-components.core';
 import { getIcon } from '../../../utils';
 import { IconButtonContainerStyled as Container, SSITextH3Styled as Caption } from '../../../styles';
 const IconButton = (props) => {
-    const { caption, icon, iconColor = fontColors.dark } = props;
+    const { caption, icon, iconColor = fontColors.dark, style } = props;
     const disabled = typeof props.disabled === 'function' ? props.disabled() : props.disabled ?? false;
     const onClick = async (event) => {
         if (!disabled) {
@@ -11,6 +11,7 @@ const IconButton = (props) => {
         }
     };
     return (_jsxs(Container, { style: {
+            ...style,
             ...(disabled && { opacity: OpacityStyleEnum.DISABLED }),
         }, onClick: onClick, children: [getIcon(icon, iconColor), caption && _jsx(Caption, { children: caption })] }));
 };

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ButtonIcon, fontColors, OpacityStyleEnum } from '@sphereon/ui-components.core';
-import SSIAddIcon from '../../assets/icons/SSIAddIcon';
+import SSIAddIcon from '../../assets/icons/Add';
 import { PrimaryButtonContainerStyled as Container, SSITextH3LightStyled as Caption } from '../../../styles';
 const PrimaryButton = (props) => {
     const { caption, icon, onClick, style } = props;

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

@@ -0,0 +1,12 @@
+import { FC, ReactElement } from 'react';
+type Props = {
+    label: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    tooltip?: ReactElement | string;
+    disabled?: boolean;
+    color?: string;
+    labelPosition?: 'left' | 'right';
+};
+declare const SSISwitchItem: FC<Props>;
+export default SSISwitchItem;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Tooltip } from '@mui/material';
+import { parseColor } from '@sphereon/ui-components.core';
+import { createMaterial3Switch, material3SwitchContainerStyle, material3SwitchLabelStyle } from '../../../styles';
+const SSISwitchItem = (props) => {
+    const { label, checked, onChange, tooltip, disabled, labelPosition = false, color = 'var(--color-pending-500)' } = props;
+    const [showTooltip, setShowTooltip] = useState(false);
+    const MaterialSwitch = createMaterial3Switch(parseColor(color));
+    const handleChange = (event) => {
+        onChange(event.target.checked);
+    };
+    const content = (_jsxs("div", { style: material3SwitchContainerStyle, children: [(labelPosition === 'left' || !labelPosition) && _jsx("span", { style: material3SwitchLabelStyle, children: label }), _jsx(MaterialSwitch, { checked: checked, onChange: handleChange, disabled: disabled }), labelPosition === 'right' && _jsx("span", { style: material3SwitchLabelStyle, children: label })] }));
+    if (tooltip) {
+        return (_jsx(Tooltip, { title: tooltip, open: showTooltip, onOpen: () => setShowTooltip(true), onClose: () => setShowTooltip(false), arrow: true, children: _jsx("div", { onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: content }) }));
+    }
+    return content;
+};
+export default SSISwitchItem;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ButtonIcon, OpacityStyleEnum } from '@sphereon/ui-components.core';
-import SSIAddIcon from '../../assets/icons/SSIAddIcon';
+import SSIAddIcon from '../../assets/icons/Add';
 import { SecondaryButtonCaptionStyled as Caption, SecondaryButtonContainerStyled as Container } from '../../../styles';
 import { gradientColors } from '../../../styles/colors';
 const SecondaryButton = (props) => {

package/dist/components/fields/FileSelection/index.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getFileSizeDisplay, Localization } from '@sphereon/ui-components.core';
 import ComboBox from '../ComboBox';
-import DocumentIcon from '../../assets/icons/DocumentIcon';
-import ImageIcon from '../../assets/icons/ImageIcon';
-import CrossIcon from '../../assets/icons/CrossIcon';
+import DocumentIcon from '../../assets/icons/Document';
+import ImageIcon from '../../assets/icons/Image';
+import CrossIcon from '../../assets/icons/Cross';
 import { FileSelectionFieldContainerStyled as Container, FileSelectionFieldContentContainerStyled as ContentContainer, FileSelectionFieldRemoveContainerStyled as RemoveContainer, FileSelectionFieldRemoveButtonStyled as RemoveButton, FileSelectionFieldRemoveButtonCircleIconStyled as RemoveButtonCircleIcon, FileSelectionFieldIconContainerStyled as IconContainer, FileSelectionFieldFileDataContainerStyled as FileDataContainer, FileSelectionFieldFileNameCaptionStyled as FileNameCaption, FileSelectionFieldFileSizeCaptionStyled as FileSizeCaption, FileSelectionFieldPermissionSelectionContainerStyled as PermissionSelectionContainer, } from '../../../styles';
 import { FileSelectionFieldType } from '../../../types';
 const filePermissions = [

package/dist/components/fields/JSONForms/ColorPickerControl/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { RankedTester } from '@jsonforms/core';
+export declare const colorPickerControlTester: RankedTester;
+declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
+export default _default;

package/dist/components/fields/JSONForms/ColorPickerControl/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { optionIs, rankWith } from '@jsonforms/core';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { elementColors } from '@sphereon/ui-components.core';
+import { MuiColorInput, MuiColorInputButton } from 'mui-color-input';
+import { JsonFormsCustomControlKey } from '../../../../types';
+const ColorPickerControl = (props) => {
+    const { data, handleChange, path, format = 'hex', isAlphaHidden = true, label, errors } = props;
+    const onValueChange = async (value) => {
+        handleChange(path, value);
+    };
+    const getAdornmentElement = (props) => {
+        return _jsx(MuiColorInputButton, { ...props, sx: {
+                width: 46,
+                height: 30,
+                borderRadius: '6px',
+                border: `1px solid ${elementColors.lightGrey}`
+            } });
+    };
+    return (_jsx(MuiColorInput, { label: label, format: format, value: data, error: errors.length > 0, onChange: onValueChange, placeholder: label, isAlphaHidden: isAlphaHidden, Adornment: getAdornmentElement, style: { display: 'flex' } }));
+};
+export const colorPickerControlTester = rankWith(4, optionIs('type', JsonFormsCustomControlKey.COLOR_PICKER));
+export default withJsonFormsControlProps(ColorPickerControl);

package/dist/components/fields/JSONForms/CustomArrayControl/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { RankedTester } from '@jsonforms/core';
+export declare const customArrayControlTester: RankedTester;
+declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
+export default _default;

package/dist/components/fields/JSONForms/CustomArrayControl/index.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JsonFormsDispatch, withJsonFormsControlProps } from '@jsonforms/react';
+import { and, isArrayObjectControl, optionIs, rankWith } from '@jsonforms/core';
+import { ButtonIcon } from '@sphereon/ui-components.core';
+import IconButton from '../../../buttons/IconButton';
+import PrimaryButton from '../../../buttons/PrimaryButton';
+import { JsonFormsCustomControlKey } from '../../../../types';
+const CustomArrayControl = (props) => {
+    const { data = [], handleChange, path, schema, uischema, label } = props;
+    const elements = uischema.options?.detail?.elements || [];
+    const itemSchema = schema.items && !Array.isArray(schema.items) ? schema.items : {};
+    const handleAdd = async (index) => {
+        if (index !== undefined) {
+            const targetItem = { ...data[index] };
+            targetItem.properties = targetItem.properties ?? [];
+            targetItem.properties.push({});
+            data[index] = targetItem;
+            handleChange(path, [...data]);
+        }
+        else {
+            handleChange(path, [...data, {}]);
+        }
+    };
+    const handleRemove = async (index) => {
+        const newData = data.filter((_, i) => i !== index);
+        handleChange(path, newData);
+    };
+    const getItemElements = () => {
+        return data.map((item, index) => _jsx("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: _jsx("div", { style: { display: 'flex', flexDirection: 'row', borderRadius: 8, overflow: 'hidden', width: '100%' }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 12 }, children: [_jsx("div", { style: { display: 'flex', flexDirection: 'row', gap: 24, padding: 24, border: '1px solid #C4C4C4', borderRadius: 8, flexGrow: 1, alignItems: 'center' }, children: getFieldElements(elements, `${path}.${index}`) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 24 }, children: [_jsx(IconButton, { icon: ButtonIcon.DELETE, onClick: () => handleRemove(index) }), item?.type === 'object' &&
+                                            _jsx(IconButton, { icon: ButtonIcon.ADD, onClick: () => handleAdd(index) })] })] }), item?.type === 'object' &&
+                            _jsx("div", { style: { marginLeft: 24, display: 'flex', flexDirection: 'row' }, children: getChildFieldElements(elements, `${path}.${index}.properties`) })] }) }) }, index));
+    };
+    const getFieldElements = (elements, path) => {
+        return elements
+            .filter(element => element?.options?.type !== JsonFormsCustomControlKey.ARRAY)
+            .map((element, i) => _jsx(JsonFormsDispatch, { uischema: element, schema: itemSchema, path: path }, i));
+    };
+    const getChildFieldElements = (elements, path) => {
+        return elements
+            .filter(element => element?.options?.type === JsonFormsCustomControlKey.ARRAY)
+            .map((element, i) => {
+            const childrenArraySchema = itemSchema.properties?.children;
+            const resolvedChildrenSchema = {
+                ...childrenArraySchema,
+                items: itemSchema
+            };
+            const childrenUiSchema = {
+                ...element,
+                type: "Control",
+                scope: "#",
+                options: {
+                    ...uischema.options,
+                    isChild: true,
+                    type: JsonFormsCustomControlKey.ARRAY,
+                    detail: {
+                        elements
+                    }
+                }
+            };
+            return (_jsx(JsonFormsDispatch, { uischema: childrenUiSchema, schema: resolvedChildrenSchema, path: path }, i));
+        });
+    };
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 28, width: '100%' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [_jsx("div", { style: { color: 'black', fontSize: 16, fontWeight: '400' }, children: label }), !uischema.options?.isChild &&
+                        _jsx(PrimaryButton, { caption: uischema.options?.addLabel || '+', onClick: handleAdd, style: {
+                                marginLeft: 'auto',
+                                height: 33,
+                                width: 120
+                            } })] }), getItemElements()] }));
+};
+export const customArrayControlTester = rankWith(5, and(isArrayObjectControl, optionIs('type', JsonFormsCustomControlKey.ARRAY)));
+export default withJsonFormsControlProps(CustomArrayControl);

package/dist/components/fields/JSONForms/PassportPhotoControl/index.js

@@ -8,7 +8,7 @@ import PersonPlaceholder from '../../../assets/placeholders/PersonPlaceholder';
 import FileSelection from '../../FileSelection';
 import { base64UriToFile } from '../../../../utils';
 import { PassportPhotoControlContainerStyled as Container, PassportPhotoControlDragAndDropBoxContainerStyled as DragAndDropBoxContainer, PassportPhotoControlPassportPhotoContainerStyled as PassportPhotoContainer, PassportPhotoControlPassportPhotoImageStyled as PassportPhotoImage, } from '../../../../styles';
-import { FileSelectionFieldType } from '../../../../types';
+import { FileSelectionFieldType, JsonFormsCustomControlKey } from '../../../../types';
 const PassportPhotoControl = (props) => {
     const { data, handleChange, path } = props;
     const [image, setImage] = useState(data && { file: base64UriToFile(data.base64Uri, data.fileName, data.mimeType), base64Uri: data.base64Uri });
@@ -30,5 +30,5 @@ const PassportPhotoControl = (props) => {
     };
     return (_jsxs(Container, { children: [_jsxs(DragAndDropBoxContainer, { children: [_jsx(DragAndDropBox, { caption: Localization.translate('drag_and_drop_upload_image_caption'), description: Localization.translate('credential_attach_image_description'), onChangeFile: onAddImage }), _jsx(PassportPhotoContainer, { children: image ? _jsx(PassportPhotoImage, { src: image.base64Uri, alt: Localization.translate('passport_photo_alt') }) : _jsx(PersonPlaceholder, {}) })] }), image && _jsx(FileSelection, { file: image.file, fileType: FileSelectionFieldType.IMAGE, onRemove: onRemoveImage })] }));
 };
-export const passportPhotoControlTester = rankWith(3, and(isObjectControl, optionIs('type', 'passportPhoto')));
+export const passportPhotoControlTester = rankWith(3, and(isObjectControl, optionIs('type', JsonFormsCustomControlKey.PASSPORT_PHOTO)));
 export default withJsonFormsControlProps(PassportPhotoControl);

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { borderColors } from '@sphereon/ui-components.core';
 import DropDownListItem from '../DropDownListItem';
 import IconButton from '../../buttons/IconButton';
@@ -7,14 +8,43 @@ import { DropDownListContainerStyled as Container, DropDownContainerStyled as Dr
 const DropDownList = (props) => {
     const { icon, buttons, showBorder = false } = props;
     const [showActionsMenu, setShowActionsMenu] = useState(false);
+    const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0, position: 'bottom' });
     const dropdownRef = useRef(null);
+    const menuRef = useRef(null);
     const onMore = (event) => {
         setShowActionsMenu(!showActionsMenu);
         event.stopPropagation();
     };
+    useEffect(() => {
+        if (showActionsMenu && dropdownRef.current) {
+            const updatePosition = () => {
+                if (!dropdownRef.current || !menuRef.current) {
+                    return;
+                }
+                const buttonRect = dropdownRef.current.getBoundingClientRect();
+                const menuHeight = menuRef.current.offsetHeight;
+                const viewportHeight = window.innerHeight;
+                const spaceBelow = viewportHeight - buttonRect.bottom;
+                const shouldFlipUp = spaceBelow < menuHeight && buttonRect.top > menuHeight;
+                setMenuPosition({
+                    top: shouldFlipUp ? buttonRect.top - menuHeight : buttonRect.bottom,
+                    left: buttonRect.right - menuRef.current.offsetWidth,
+                    position: shouldFlipUp ? 'top' : 'bottom'
+                });
+            };
+            updatePosition();
+            window.addEventListener('scroll', updatePosition, true);
+            window.addEventListener('resize', updatePosition);
+            return () => {
+                window.removeEventListener('scroll', updatePosition, true);
+                window.removeEventListener('resize', updatePosition);
+            };
+        }
+    }, [showActionsMenu]);
     useEffect(() => {
         const onClickOutside = (event) => {
-            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target) &&
+                menuRef.current && !menuRef.current.contains(event.target)) {
                 setShowActionsMenu(false);
             }
         };
@@ -29,6 +59,12 @@ const DropDownList = (props) => {
             return (_jsx(DropDownListItem, { showBorder: showBorder, label: item.caption, onClick: item.onClick, icon: item.icon, fontColor: item.fontColor }, index));
         });
     };
-    return (_jsxs(Container, { ref: dropdownRef, children: [_jsx(ListButton, { children: _jsx(IconButton, { icon: icon, onClick: onMore }) }), showActionsMenu && (_jsx(DropDownContainer, { style: { ...(showBorder && { borderWidth: 2, borderColor: borderColors.lightGrey, borderStyle: 'solid' }) }, children: getItems() }))] }));
+    return (_jsxs(Container, { ref: dropdownRef, children: [_jsx(ListButton, { children: _jsx(IconButton, { icon: icon, onClick: onMore }) }), showActionsMenu && createPortal(_jsx(DropDownContainer, { ref: menuRef, style: {
+                    position: 'fixed',
+                    top: menuPosition.top,
+                    left: menuPosition.left,
+                    zIndex: 9999,
+                    ...(showBorder && { borderWidth: 2, borderColor: borderColors.lightGrey, borderStyle: 'solid' })
+                }, children: getItems() }), document.body)] }));
 };
 export default DropDownList;

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

@@ -1,7 +1,7 @@
 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';
+import ChevronIcon from '../../assets/icons/Chevron';
 const Listbox = (props) => {
     const { items, anchor = 'bottom', showChevron = true, menuTitle, style } = props;
     const [selected, setSelected] = useState(props.items?.[0]);
@@ -17,8 +17,6 @@ const Listbox = (props) => {
                             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)] 

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

@@ -1,5 +1,6 @@
 import { FC } from 'react';
-import { CredentialRole, IImageAttributes } from '@sphereon/ssi-sdk.data-store';
+import type { IImageAttributes } from '@sphereon/ssi-sdk.data-store';
+import { CredentialRole } from '@sphereon/ssi-types';
 export interface Props {
     name: string;
     uri?: string;

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

@@ -18,3 +18,4 @@ type Props<DataType = Record<any, any>> = {
 };
 declare const FormView: (props: Props) => ReactElement;
 export default FormView;
+export declare const getFormViewAjv: () => Ajv;

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

@@ -3,51 +3,38 @@ import { useEffect, useState } from 'react';
 import { JsonForms } from '@jsonforms/react';
 import { materialCells } from '@jsonforms/material-renderers';
 import { jsonFormsMaterialRenderers } from '../../../renders/jsonFormsRenders';
-import { formatDateToISO } from '../../../helpers';
-const initializeDefaultValues = (schema, currentData = {}) => {
-    const result = { ...currentData };
-    if (!schema.properties) {
-        return result;
-    }
-    Object.entries(schema.properties).forEach(([key, property]) => {
-        if (typeof property === 'object') {
-            if (property.const && (!(key in result) || !result[key])) {
-                result[key] = property.const;
-            }
-            if (property.default !== undefined && !(key in result)) {
-                if (property.format?.startsWith('date') || property.format?.startsWith('time')) {
-                    result[key] = formatDateToISO(property.default, property.format);
-                }
-                else {
-                    result[key] = property.default;
-                }
+import Ajv from 'ajv';
+import addFormats from "ajv-formats";
+import { formatDate } from '../../../helpers';
+const defaultAjv = new Ajv({ useDefaults: true });
+addFormats(defaultAjv);
+defaultAjv.addKeyword({
+    keyword: 'isoDateFormat',
+    modifying: true,
+    validate: (schema, data, parentSchema, dataCxt) => {
+        if (typeof data === 'string') {
+            if (!dataCxt?.parentData || dataCxt.parentDataProperty === undefined) {
+                return true;
             }
-            if (property.properties) {
-                if (!result[key]) {
-                    result[key] = {};
-                }
-                result[key] = initializeDefaultValues(property, result[key]);
+            const formatted = formatDate(data, schema);
+            if (formatted && formatted !== 'Invalid date') {
+                dataCxt.parentData[dataCxt.parentDataProperty] = formatted;
             }
+            return true;
         }
-    });
-    return result;
-};
+        return false;
+    }
+});
 const FormView = (props) => {
-    const { data, schema, uiSchema, validationMode = 'ValidateAndShow', renderers = jsonFormsMaterialRenderers, cells = materialCells, style, middleware, ajv, onFormStateChange, readonly = false, config, } = props;
-    const [formData, setFormData] = useState(data ?? {});
-    const [initialized, setInitialized] = useState(false);
+    const { schema, uiSchema, validationMode = 'ValidateAndShow', renderers = jsonFormsMaterialRenderers, cells = materialCells, style, middleware, ajv = defaultAjv, onFormStateChange, readonly = false, config, } = props;
+    const [data, setData] = useState(props.data);
     useEffect(() => {
-        const initializedData = initializeDefaultValues(schema, formData);
-        setFormData(initializedData);
-        setInitialized(true);
+        const validate = ajv.compile(schema);
+        const data = props.data;
+        validate(data);
+        setData(data);
     }, [schema]);
-    const onFormStateChanged = (state) => {
-        if (!initialized) {
-            return;
-        }
-        setFormData(state.data);
-        void onFormStateChange?.(state);
-    };
-    return (_jsx("div", { style: style, children: _jsx(JsonForms, { schema: schema, uischema: uiSchema, data: formData, renderers: renderers, cells: cells, onChange: onFormStateChanged, validationMode: validationMode, middleware: middleware, ajv: ajv, readonly: readonly, config: config }) }));
+    return (_jsx("div", { style: style, children: _jsx(JsonForms, { schema: schema, uischema: uiSchema, data: data, renderers: renderers, cells: cells, onChange: onFormStateChange, validationMode: validationMode, middleware: middleware, ajv: ajv, readonly: readonly, config: config }) }));
 };
 export default FormView;
+export const getFormViewAjv = () => defaultAjv;

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

@@ -18,7 +18,6 @@
 
 .MuiFormControl-root {
     padding: 0 !important;
-
 }
 
 .MuiCardContent-root {
@@ -103,3 +102,18 @@ textarea.MuiInputBase-input.MuiInputBase-inputMultiline {
 .MuiTabs-scroller.MuiTabs-fixed {
     margin-bottom: 12px !important;
 }
+
+.MuiFormHelperText-root {
+    display: none;
+}
+.MuiFormHelperText-root:empty {
+    display: none;
+}
+
+.MuiFormControlLabel-root {
+    height: fit-content;
+}
+
+.MuiGrid-root {
+    flex: 1 !important;
+}

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

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