@sphereon/ui-components.ssi-react 0.1.3-unstable.99 → 0.2.1-next.18

package/dist/@config/toasts/index.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { ToastCustomProps } from '@sphereon/ui-components.core';
 import { ToastConfigParams } from '../../types';
 export declare const toastConfig: {
-    ssiToastSuccess: (params: ToastConfigParams<ToastCustomProps>) => JSX.Element;
-    ssiToastError: (params: ToastConfigParams<ToastCustomProps>) => JSX.Element;
+    ssiToastSuccess: (params: ToastConfigParams<ToastCustomProps>) => import("react/jsx-runtime").JSX.Element;
+    ssiToastError: (params: ToastConfigParams<ToastCustomProps>) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/components/assets/icons/{BitterballenIcon → CrossIcon}/index.d.ts

@@ -4,5 +4,5 @@ type Props = {
     color?: string;
     style?: CSSProperties;
 };
-declare const BitterballenIcon: FC<Props>;
-export default BitterballenIcon;
+declare const CrossIcon: FC<Props>;
+export default CrossIcon;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+const CrossIcon = (props) => {
+    const { size = 12, 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 12 12", fill: "none", children: _jsx("path", { d: "M11.3763 0.623718C11.2113 0.45875 10.9439 0.458771 10.7789 0.623718L5.99999 5.40265L1.22108 0.623744C1.05612 0.458776 0.788685 0.458776 0.62372 0.623744C0.458759 0.788692 0.458761 1.05613 0.623722 1.2211L5.40263 6L0.623735 10.7789C0.458779 10.9439 0.458773 11.2113 0.623733 11.3763C0.788697 11.5412 1.05614 11.5412 1.2211 11.3763L5.99999 6.59737L10.7789 11.3763C10.9439 11.5412 11.2113 11.5412 11.3763 11.3763C11.5412 11.2113 11.5412 10.9439 11.3763 10.7789L6.59736 6L11.3763 1.22107C11.5412 1.05612 11.5412 0.788687 11.3763 0.623718Z", fill: color }) }) }));
+};
+export default CrossIcon;

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

@@ -1,6 +1,7 @@
 import { CSSProperties, FC } from 'react';
 type Props = {
-    size?: number;
+    width?: number;
+    height?: number;
     color?: string;
     style?: CSSProperties;
 };

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { fontColors } from '@sphereon/ui-components.core';
 const DeleteIcon = (props) => {
-    const { size = 21, color = fontColors.dark, style } = props;
-    return (_jsx("div", { style: { ...style, width: size, aspectRatio: 1, display: 'flex' }, children: _jsx("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: color, xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M24.8277 8.98905V24.6058C24.8277 26.4672 23.3113 28 21.4699 28H10.5336C8.68863 28 7.1722 26.4672 7.1722 24.6058V8.98905H5.97712C4.9409 8.98905 4.9409 7.39781 5.97712 7.39781H12.1114V5.87226C12.1114 4.87591 12.8841 4 13.8914 4H18.1121C19.1158 4 19.8921 4.87956 19.8921 5.87226V7.39781H26.0228C27.059 7.39781 27.059 8.98905 26.0228 8.98905H24.8277ZM13.6856 7.39781H18.3143V5.87226C18.3143 5.75547 18.2457 5.59124 18.1121 5.59124H13.8914C13.7542 5.59124 13.6856 5.75547 13.6856 5.87226V7.39781ZM19.43 21.9635C19.43 23.0073 17.8558 23.0073 17.8558 21.9635V13.2993C17.8558 12.2555 19.43 12.2555 19.43 13.2993V21.9635ZM14.1441 21.9635C14.1441 23.0073 12.5699 23.0073 12.5699 21.9635V13.2993C12.5699 12.2555 14.1441 12.2518 14.1441 13.2993V21.9635ZM23.2535 8.98905C18.419 8.98905 13.5845 8.98905 8.75001 8.98905V24.6058C8.75001 25.5985 9.54793 26.4088 10.5336 26.4088H21.4699C22.452 26.4088 23.2535 25.5985 23.2535 24.6058V8.98905Z", fill: "#D74500" }) }) }));
+    const { width = 20, height = 21, color = fontColors.dark, style } = props;
+    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M17.3126 4.36542V18.0301C17.3126 19.6588 15.975 21 14.3509 21H4.70454C3.07718 21 1.73962 19.6588 1.73962 18.0301V4.36542H0.685498C-0.228499 4.36542 -0.228499 2.97308 0.685498 2.97308H6.09623V1.63823C6.09623 0.766423 6.77775 0 7.66627 0H11.3891C12.2745 0 12.9592 0.769617 12.9592 1.63823V2.97308H18.3667C19.2807 2.97308 19.2807 4.36542 18.3667 4.36542H17.3126ZM7.48474 2.97308H11.5675V1.63823C11.5675 1.53604 11.507 1.39234 11.3891 1.39234H7.66627C7.54525 1.39234 7.48474 1.53604 7.48474 1.63823V2.97308ZM12.5515 15.7181C12.5515 16.6314 11.163 16.6314 11.163 15.7181V8.13686C11.163 7.22354 12.5515 7.22354 12.5515 8.13686V15.7181ZM7.8892 15.7181C7.8892 16.6314 6.50068 16.6314 6.50068 15.7181V8.13686C6.50068 7.22354 7.8892 7.22035 7.8892 8.13686V15.7181ZM15.9241 4.36542C11.6598 4.36542 7.39557 4.36542 3.13132 4.36542V18.0301C3.13132 18.8987 3.83513 19.6077 4.70454 19.6077H14.3509C15.2171 19.6077 15.9241 18.8987 15.9241 18.0301V4.36542Z", fill: color }) }) }));
 };
 export default DeleteIcon;

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

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+const DocumentIcon = (props) => {
+    const { width = 28, height = 38, color = fontColors.dark, style } = props;
+    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 28 38", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M26.8828 7.409L21.4423 1.677C20.8054 1.006 19.6456 0.5 18.7458 0.5H17.5593H13.7627H3.32203C1.49064 0.5 0 2.0705 0 4V34C0 35.9295 1.49064 37.5 3.32203 37.5H24.678C26.5094 37.5 28 35.9295 28 34V19V11.5V10.25C28 9.3015 27.5197 8.08 26.8828 7.409ZM24.7643 8.0045C24.7349 8.004 24.7074 8 24.678 8H22.3051C21.5201 8 20.8814 7.327 20.8814 6.5V4C20.8814 3.9695 20.8776 3.94 20.8771 3.9095L24.7643 8.0045ZM26.1017 34C26.1017 34.827 25.4629 35.5 24.678 35.5H3.32203C2.53708 35.5 1.89831 34.827 1.89831 34V4C1.89831 3.173 2.53708 2.5 3.32203 2.5H13.7627H17.5593C18.3443 2.5 18.9831 3.173 18.9831 4V6.5C18.9831 8.4295 20.4737 10 22.3051 10H24.678C25.4629 10 26.1017 10.673 26.1017 11.5V19V34Z", fill: color }) }) }));
+};
+export default DocumentIcon;

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

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+const ImageIcon = (props) => {
+    const { width = 38, height = 30, color = fontColors.dark, style } = props;
+    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 38 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.773 8.1151C16.0717 8.1151 16.3637 8.20496 16.6121 8.37331C16.8604 8.54166 17.054 8.78094 17.1683 9.06089C17.2826 9.34083 17.3125 9.64888 17.2542 9.94605C17.1959 10.2432 17.052 10.5162 16.8407 10.7304C16.6295 10.9446 16.3603 11.0905 16.0673 11.1496C15.7743 11.2086 15.4707 11.1782 15.1947 11.0622C14.9187 10.9462 14.6829 10.7498 14.517 10.4978C14.3511 10.2458 14.2626 9.94961 14.2627 9.6466C14.2632 9.24048 14.4225 8.85116 14.7056 8.56399C14.9888 8.27682 15.3726 8.11567 15.773 8.1151ZM15.773 12.3833C16.3066 12.3833 16.8283 12.2229 17.272 11.9223C17.7157 11.6216 18.0616 11.1942 18.2659 10.6942C18.4702 10.1941 18.5236 9.64386 18.4196 9.11297C18.3155 8.58208 18.0586 8.09442 17.6813 7.71164C17.304 7.32887 16.8233 7.06819 16.2999 6.96256C15.7765 6.85693 15.234 6.9111 14.741 7.11822C14.248 7.32534 13.8266 7.6761 13.5301 8.12615C13.2336 8.5762 13.0754 9.10532 13.0754 9.6466C13.0766 10.3719 13.3612 11.0672 13.8668 11.58C14.3725 12.0929 15.0579 12.382 15.773 12.3833ZM2.81918 1.70473C2.38666 1.70507 1.97195 1.87947 1.66608 2.18964C1.3602 2.49982 1.18816 2.92043 1.18771 3.35914V22.6369L9.78458 13.9173C10.105 13.5935 10.5389 13.4116 10.9913 13.4116C11.4436 13.4116 11.8776 13.5935 12.198 13.9173L15.6007 17.3692L23.5385 9.32026C23.8587 8.99597 24.2927 8.81382 24.7452 8.81382C25.1977 8.81382 25.6317 8.99597 25.9519 9.32026L36.8123 20.338V3.35914C36.8118 2.9205 36.6399 2.49996 36.3341 2.1898C36.0283 1.87963 35.6137 1.70518 35.1812 1.70473H2.81918ZM35.1812 28.2957C35.6137 28.2951 36.0283 28.1206 36.3341 27.8104C36.6399 27.5001 36.8118 27.0795 36.8123 26.6409V22.0421L25.1104 10.1721C25.0129 10.0733 24.8807 10.0178 24.7429 10.0178C24.605 10.0178 24.4728 10.0733 24.3753 10.1721L16.0208 18.6467C15.9093 18.7597 15.7582 18.8231 15.6007 18.8231C15.4431 18.8231 15.292 18.7597 15.1806 18.6467L11.3578 14.7692C11.2604 14.6704 11.1283 14.615 10.9907 14.615C10.853 14.615 10.7209 14.6704 10.6235 14.7692L1.18771 24.3402V26.6409C1.18816 27.0796 1.36019 27.5003 1.66605 27.8105C1.97191 28.1208 2.38662 28.2952 2.81918 28.2957H35.1812ZM2.81918 29.5H35.1812C35.9286 29.4991 36.645 29.1976 37.1734 28.6616C37.7018 28.1256 37.9991 27.3989 38 26.6409V3.35914C37.9991 2.60113 37.7018 1.87442 37.1734 1.33843C36.645 0.802428 35.9286 0.500907 35.1812 0.5H2.81918C2.0718 0.500793 1.35525 0.802265 0.826731 1.33827C0.298214 1.87428 0.000894121 2.60106 0 3.35914V26.6409C0.000894121 27.3989 0.298214 28.1257 0.826731 28.6617C1.35525 29.1977 2.0718 29.4992 2.81918 29.5Z", fill: color }) }) }));
+};
+export default ImageIcon;

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

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

package/dist/components/assets/icons/MeatBallsIcon/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 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 })] }) }));
+};
+export default MeatBallsIcon;

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

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { fontColors } from '@sphereon/ui-components.core';
 const SSIAddIcon = (props) => {
     const { size = 16, color = fontColors.dark, style } = props;
-    return (_jsx("div", { style: { ...style, width: size, aspectRatio: 1, display: 'flex' }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8 0.5C7.65483 0.5 7.375 0.779833 7.375 1.125V7.37503H1.125C0.779812 7.37503 0.5 7.65484 0.5 8.00003C0.5 8.34519 0.779812 8.62502 1.125 8.62502H7.375V14.875C7.375 15.2202 7.65483 15.5 8 15.5C8.34519 15.5 8.625 15.2202 8.625 14.875V8.62502H14.875C15.2202 8.62502 15.5 8.34519 15.5 8.00003C15.5 7.65484 15.2202 7.37503 14.875 7.37503H8.625V1.125C8.625 0.779833 8.34519 0.5 8 0.5Z", fill: color }) }) }));
+    return (_jsx("div", { style: { ...style, width: size, height: size, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8 0.5C7.65483 0.5 7.375 0.779833 7.375 1.125V7.37503H1.125C0.779812 7.37503 0.5 7.65484 0.5 8.00003C0.5 8.34519 0.779812 8.62502 1.125 8.62502H7.375V14.875C7.375 15.2202 7.65483 15.5 8 15.5C8.34519 15.5 8.625 15.2202 8.625 14.875V8.62502H14.875C15.2202 8.62502 15.5 8.34519 15.5 8.00003C15.5 7.65484 15.2202 7.37503 14.875 7.37503H8.625V1.125C8.625 0.779833 8.34519 0.5 8 0.5Z", fill: color }) }) }));
 };
 export default SSIAddIcon;

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

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { fontColors } from '@sphereon/ui-components.core';
 const SSIArrowDownIcon = (props) => {
     const { width = 16, height = 8, color = fontColors.dark, style } = props;
-    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8.03265 7.74886C8.14951 7.74175 8.26065 7.69465 8.34825 7.61511L15.3133 1.19499C15.367 1.1489 15.411 1.09224 15.4429 1.02837C15.4747 0.964504 15.4937 0.894731 15.4987 0.823204C15.5037 0.751676 15.4946 0.67985 15.4719 0.611995C15.4493 0.54414 15.4135 0.481647 15.3668 0.428216C15.3201 0.374784 15.2634 0.331504 15.2001 0.300961C15.1367 0.270419 15.068 0.253238 14.9981 0.250423C14.9281 0.247608 14.8583 0.259221 14.7928 0.28458C14.7273 0.309939 14.6675 0.348517 14.6168 0.398032L8 6.49492L1.38317 0.398032C1.33252 0.348517 1.27268 0.309939 1.20718 0.28458C1.14169 0.259221 1.07189 0.247597 1.00193 0.250412C0.931963 0.253227 0.863266 0.270419 0.799918 0.300961C0.736569 0.331504 0.679861 0.374784 0.633164 0.428216C0.586466 0.481647 0.550732 0.54414 0.528085 0.611995C0.505437 0.67985 0.496338 0.751676 0.501329 0.823204C0.506319 0.894731 0.525297 0.964504 0.557135 1.02837C0.588973 1.09224 0.633022 1.1489 0.686663 1.19499L7.65174 7.61511C7.70344 7.6621 7.76372 7.69811 7.82911 7.72107C7.89449 7.74403 7.96367 7.75348 8.03265 7.74886Z", fill: color }) }) }));
+    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8.03265 7.74886C8.14951 7.74175 8.26065 7.69465 8.34825 7.61511L15.3133 1.19499C15.367 1.1489 15.411 1.09224 15.4429 1.02837C15.4747 0.964504 15.4937 0.894731 15.4987 0.823204C15.5037 0.751676 15.4946 0.67985 15.4719 0.611995C15.4493 0.54414 15.4135 0.481647 15.3668 0.428216C15.3201 0.374784 15.2634 0.331504 15.2001 0.300961C15.1367 0.270419 15.068 0.253238 14.9981 0.250423C14.9281 0.247608 14.8583 0.259221 14.7928 0.28458C14.7273 0.309939 14.6675 0.348517 14.6168 0.398032L8 6.49492L1.38317 0.398032C1.33252 0.348517 1.27268 0.309939 1.20718 0.28458C1.14169 0.259221 1.07189 0.247597 1.00193 0.250412C0.931963 0.253227 0.863266 0.270419 0.799918 0.300961C0.736569 0.331504 0.679861 0.374784 0.633164 0.428216C0.586466 0.481647 0.550732 0.54414 0.528085 0.611995C0.505437 0.67985 0.496338 0.751676 0.501329 0.823204C0.506319 0.894731 0.525297 0.964504 0.557135 1.02837C0.588973 1.09224 0.633022 1.1489 0.686663 1.19499L7.65174 7.61511C7.70344 7.6621 7.76372 7.69811 7.82911 7.72107C7.89449 7.74403 7.96367 7.75348 8.03265 7.74886Z", fill: color }) }) }));
 };
 export default SSIArrowDownIcon;

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

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { fontColors } from '@sphereon/ui-components.core';
 const SSIFilterIcon = (props) => {
     const { height = 16, width = 18, color = fontColors.dark, style } = props;
-    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "18", height: "16", viewBox: "0 0 18 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M16.5 1.5H1.5L7.5 8.33222V13.0556L10.5 14.5V8.33222L16.5 1.5Z", stroke: color, strokeOpacity: "0.8", strokeWidth: "1.29412", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 18 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M16.5 1.5H1.5L7.5 8.33222V13.0556L10.5 14.5V8.33222L16.5 1.5Z", stroke: color, strokeOpacity: "0.8", strokeWidth: "1.29412", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
 };
 export default SSIFilterIcon;

package/dist/components/assets/images/WarningImage/index.d.ts

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

package/dist/components/assets/images/WarningImage/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const WarningImage = (props) => {
+    const { height = 162, width = 233, style } = props;
+    return (_jsx("div", { style: { ...style, height, width }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 233 162", fill: "none", children: [_jsxs("g", { clipPath: "url(#clip0_7923_5726)", children: [_jsx("path", { d: "M196.364 155.109C197.282 155.158 197.789 154.164 197.094 153.585L197.025 153.345C197.034 153.326 197.043 153.307 197.052 153.288C197.6 152.149 199.107 151.61 200.415 152.082C204.551 153.574 200.184 157.001 200.512 159.32C200.627 160.12 204.223 160.164 204.019 160.95C205.931 157.305 206.936 153.324 206.935 149.322C206.934 148.316 206.871 147.311 206.741 146.307C206.635 145.487 206.488 144.672 206.298 143.864C205.273 139.496 203.054 135.337 199.854 131.863C198.317 131.13 199.255 129.984 198.48 128.611C198.201 128.116 195.718 128.105 195.615 127.562C195.726 127.575 197.331 126.121 196.801 125.402C196.452 124.929 196.56 124.327 197.009 123.923C197.052 123.883 197.094 123.841 197.132 123.796C198.456 122.23 200.281 122.503 201.234 124.63C203.269 125.526 203.29 127.011 202.042 128.44C201.248 129.349 201.139 130.579 200.442 131.553C200.514 131.633 200.589 131.71 200.66 131.79C201.976 133.261 203.114 134.841 204.073 136.502C203.802 134.656 204.201 132.432 204.882 130.998C205.663 129.353 207.134 127.969 208.421 126.546C209.959 124.846 213.089 125.617 213.361 127.769C213.363 127.79 213.366 127.811 213.368 127.831C213.178 127.925 212.991 128.025 212.809 128.13C211.77 128.729 212.13 130.134 213.361 130.299L213.389 130.303C213.321 130.901 210.888 132.784 210.716 133.367C212.361 138.909 211.13 139.641 206.068 139.733L205.802 140.063C206.282 141.266 206.668 142.498 206.958 143.746C207.231 144.904 207.421 146.075 207.527 147.25C207.66 148.734 207.649 150.225 207.506 151.706L207.515 151.653C207.878 150.022 208.893 148.498 210.367 147.442C212.563 145.868 215.666 145.288 218.034 144.022C219.175 143.413 220.637 144.199 220.438 145.353L220.428 145.408C220.076 145.533 219.731 145.678 219.399 145.841C219.208 145.935 219.022 146.034 218.839 146.14C217.8 146.739 218.161 148.144 219.392 148.309L219.42 148.312C219.44 148.315 219.457 148.317 219.477 148.32C218.873 149.573 213.111 151.341 212.056 152.345C211.03 157.185 211.534 157.041 206.811 155.633H206.808C206.292 157.595 205.539 159.511 204.57 161.338L196.568 161.34C196.539 161.262 196.513 161.182 196.487 161.105C197.227 161.145 197.973 161.107 198.701 160.989C198.107 160.354 197.513 159.714 196.919 159.078C196.905 159.066 196.894 159.053 196.882 159.041L196.873 159.031L196.049 156.666C196.114 156.141 196.22 155.621 196.364 155.109L196.364 155.108V155.109V155.109Z", fill: "#F2F2F2" }), _jsx("path", { d: "M111.797 161.283L40.9838 161.304C37.4263 161.305 34.2397 159.702 32.4598 157.016C31.5698 155.672 31.1247 154.199 31.1241 152.725C31.1236 151.251 31.5677 149.777 32.4564 148.433L67.8405 92.2542C69.6184 89.5666 72.8038 87.9615 76.3612 87.9604C79.9187 87.9594 83.1054 89.5625 84.8854 92.2491L120.319 148.413C121.206 149.753 121.65 151.225 121.65 152.698C121.65 154.171 121.206 155.645 120.317 156.989C118.54 159.677 115.354 161.282 111.797 161.283H111.797H111.797ZM32.0143 152.724C32.0142 154.065 39.8281 151.174 40.6377 152.396C42.2569 154.84 37.7469 160.531 40.9835 160.53C40.9835 160.53 117.931 159.047 119.548 156.602C120.357 155.38 120.761 154.038 120.76 152.698C120.76 151.357 120.355 150.016 119.545 148.794L84.1117 92.6296C82.497 90.1926 79.5981 88.7341 76.3615 88.7351C73.1265 88.736 32.0144 151.382 32.0143 152.724H32.0143Z", fill: "#D2D2D2" }), _jsx("path", { d: "M112.583 160.508C111.696 162.058 153.268 161.582 153.759 161.582C153.759 161.582 165.444 161.356 165.69 160.985C165.813 160.799 165.874 160.596 165.874 160.392C165.874 160.189 165.812 159.985 165.689 159.799L160.309 151.271C160.063 150.901 159.623 150.679 159.132 150.679C159.111 150.679 159.081 150.695 159.042 150.725C151.864 156.32 143.018 160.018 133.393 160.143C123.158 160.275 112.64 160.41 112.583 160.508H112.583Z", fill: "#D2D2D2" }), _jsx("path", { d: "M3.32406e-08 161.539C0.000102174 161.795 0.235562 162 0.528674 162L232.472 161.93C232.765 161.93 233 161.725 233 161.469C233 161.213 232.764 161.008 232.471 161.008L0.52831 161.078C0.235198 161.078 -0.000102107 161.284 3.32406e-08 161.539H3.32406e-08Z", fill: "#CCCCCC" }), _jsx("path", { d: "M179.358 159.302L175.341 159.303L173.425 145.791L179.353 145.79L179.358 159.302Z", fill: "#9E616A" }), _jsx("path", { d: "M165.596 159.227C165.471 159.41 165.405 160.003 165.405 160.217C165.406 160.874 166.016 161.406 166.769 161.405L179.208 161.402C179.722 161.402 180.138 161.038 180.138 160.59L180.138 160.139C180.138 160.139 180.752 158.781 179.485 157.108C179.485 157.108 177.911 158.419 175.557 156.368L174.863 155.271L169.842 158.476L167.058 158.776C166.449 158.842 165.909 158.766 165.596 159.227H165.596Z", fill: "#757B93" }), _jsx("path", { d: "M163.956 147.746L160.151 148.869L153.375 136.604L158.99 134.947L163.956 147.746Z", fill: "#9E616A" }), _jsx("path", { d: "M150.892 151.518C150.841 151.727 150.996 152.307 151.075 152.51C151.316 153.132 152.09 153.465 152.803 153.255L164.586 149.777C165.072 149.633 165.333 149.173 165.169 148.748L165.003 148.321C165.003 148.321 165.086 146.863 163.271 145.632C163.271 145.632 162.261 147.313 159.278 146.027L158.218 145.183L154.639 149.622L152.112 150.683C151.559 150.915 151.02 150.995 150.892 151.518L150.892 151.518Z", fill: "#757B93" }), _jsx("path", { d: "M157.752 69.363L149.961 91.866L140.764 112.107L155.325 141.013L160.724 138.919L154.263 112.365L167.811 94.3461L174.134 150.596L179.533 150.332L186.856 82.436L187.9 67.6533L157.752 69.363Z", fill: "#757B93" }), _jsx("path", { d: "M181.281 19.5146L169.882 21.3495L168.984 25.7976L162.086 28.6777L158.499 61.3831C158.499 61.3831 152.502 68.1874 157.302 70.279L187.9 67.6535C187.9 67.6535 189.398 62.8158 187.898 62.3569C186.398 61.8979 186.393 50.3428 186.393 50.3428L193.284 26.5752L183.083 23.4386L181.281 19.5146Z", fill: "#E6E6E6" }), _jsx("path", { d: "M174.558 19.4285C179.642 19.4285 183.763 15.8343 183.763 11.4005C183.763 6.96681 179.642 3.37256 174.558 3.37256C169.474 3.37256 165.353 6.96681 165.353 11.4005C165.353 15.8343 169.474 19.4285 174.558 19.4285Z", fill: "#9E616A" }), _jsx("path", { d: "M180.654 12.5923C179.919 12.943 180.616 14.6174 180.157 14.7622C179.626 14.9295 177.691 13.0088 177.667 10.8574C177.66 10.2063 177.832 9.89363 177.667 9.12163C177.451 8.1118 176.787 6.92074 176.173 6.95235C175.809 6.9711 175.454 7.41993 175.427 7.82047C175.39 8.38184 176.015 8.60279 175.925 8.90518C175.754 9.48115 173.128 9.8788 172.194 8.90631C171.461 8.14389 172.023 6.80527 171.695 6.73673C171.454 6.68621 171.194 7.4232 170.203 8.25599C169.83 8.56975 169.274 9.03638 168.959 8.90728C168.505 8.72073 168.835 7.40598 168.71 7.38855C168.606 7.37411 168.541 8.29822 167.964 9.12456C167.223 10.1862 165.693 11.0045 164.98 10.6443C164.542 10.4236 164.508 9.80921 164.481 9.34258C164.426 8.35953 162.788 6.09832 163.212 5.04669C164.074 2.9063 165.552 4.41507 166.221 3.70077C167.126 2.73378 167.937 3.25369 169.454 2.18099C170.936 1.13307 170.949 0.0798251 171.941 0.0105123C172.835 -0.0519063 173.153 0.779429 174.18 0.660753C175.051 0.56022 175.241 -0.0845681 175.922 0.00930782C176.545 0.0952516 176.586 0.663275 177.415 0.876748C177.944 1.01303 178.06 0.815774 178.659 0.876372C179.905 1.00246 180.741 1.99214 180.898 2.17753C181.502 2.89222 181.268 3.1936 181.894 3.91301C182.434 4.5334 183.63 4.26995 184.08 4.57981C185.549 5.59227 186.181 7.45943 186.194 9.58756C186.202 11.076 185.98 11.8281 185.483 13.7068C185.106 15.1335 183.36 16.977 182.397 17.7991C182.139 18.0198 181.414 18.6384 180.905 18.4505C180.422 18.2724 180.407 17.4715 180.407 17.3658C180.404 17.0021 180.516 16.5521 181.401 15.4127C182.331 14.2159 182.701 14.0793 182.644 13.6765C182.545 12.9646 181.239 12.3127 180.653 12.5923H180.654Z", fill: "#757B93" }), _jsx("path", { d: "M148.545 87.439C148.259 89.5315 149.264 91.3566 150.791 91.5156C152.318 91.6747 153.788 90.1073 154.074 88.0148C154.2 87.0988 154.077 86.2341 153.772 85.5379L154.859 76.6581L150.07 76.3022L149.507 85.0937C149.023 85.7077 148.671 86.523 148.545 87.439H148.545H148.545Z", fill: "#9E616A" }), _jsx("path", { d: "M162.31 28.4663C162.31 28.4663 159.829 28.4971 158.187 31.2952C157.314 32.782 152.644 60.5864 152.644 60.5864L148.341 83.3634L155.67 83.3956L161.38 61.8252L166.184 49.3148L162.31 28.4663L162.31 28.4663Z", fill: "#E6E6E6" }), _jsx("path", { d: "M182.933 84.0966C182.232 86.1132 182.855 88.0636 184.327 88.4531C185.798 88.8425 187.56 87.5236 188.262 85.5071C188.569 84.6244 188.622 83.7543 188.461 83.0223L191.312 74.4452L186.668 73.3643L184.351 81.9343C183.751 82.4649 183.24 83.2139 182.933 84.0966V84.0966Z", fill: "#9E616A" }), _jsx("path", { d: "M188.034 26.969C188.034 26.969 191.633 24.6132 194.634 28.2752C197.636 31.9372 198.848 62.0248 198.848 62.0248L190.455 80.6034L184.155 78.7738L190.146 56.0098L179.639 38.7451L188.034 26.969H188.034Z", fill: "#E6E6E6" }), _jsx("path", { d: "M97.0243 148.894C114.929 148.894 129.443 136.235 129.443 120.62C129.443 105.005 114.929 92.3467 97.0243 92.3467C79.1201 92.3467 64.6058 105.005 64.6058 120.62C64.6058 136.235 79.1201 148.894 97.0243 148.894Z", fill: "#FF3403" }), _jsx("path", { d: "M97.0302 137.952C98.6741 137.952 100.007 136.79 100.007 135.356C100.007 133.923 98.6741 132.76 97.0302 132.76C95.3862 132.76 94.0536 133.923 94.0536 135.356C94.0536 136.79 95.3862 137.952 97.0302 137.952Z", fill: "white" }), _jsx("path", { d: "M97.0174 103.288C96.744 104.873 97.2339 105.204 97.2366 112.036C97.2393 118.867 98.8646 128.026 97.0272 128.026C95.1899 128.027 94.5179 109.125 88.138 107.452C80.637 105.485 97.9026 98.1586 97.0174 103.288Z", fill: "white" }), _jsx("path", { d: "M53.5141 135.055L50.5852 140.453C54.126 138.238 59.6566 136.329 64.0577 135.307C59.957 133.579 54.9392 130.794 51.9415 128.036L53.6261 133.739C33.8757 130.231 19.6926 117.017 19.6866 101.88L18.9732 101.666C18.9795 117.477 32.9663 131.473 53.5141 135.055V135.055Z", fill: "#D2D2D2" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_7923_5726", children: _jsx("rect", { width: "100%", height: "100%", fill: "white" }) }) })] }) }));
+};
+export default WarningImage;

package/dist/components/assets/placeholders/PersonPlaceholder/index.d.ts

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { elementColors } 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" }) }) }));
+};
+export default PersonPlaceholder;

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

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

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

@@ -0,0 +1,37 @@
+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 SSIFilterIcon from '../../assets/icons/SSIFilterIcon';
+import SSIArrowDownIcon from '../../assets/icons/SSIArrowDownIcon';
+import MeatBallsIcon from '../../assets/icons/MeatBallsIcon';
+import DeleteIcon from '../../assets/icons/DeleteIcon';
+import { IconButtonContainerStyled as Container, SSITextH3Styled as Caption } from '../../../styles';
+const IconButton = (props) => {
+    const { caption, icon, iconColor = fontColors.dark } = props;
+    const disabled = typeof props.disabled === 'function' ? props.disabled() : props.disabled ?? false;
+    const onClick = async (event) => {
+        if (!disabled) {
+            props.onClick(event);
+        }
+    };
+    return (_jsxs(Container, { style: {
+            ...(disabled && { opacity: OpacityStyleEnum.DISABLED }),
+        }, onClick: onClick, children: [getIcon(icon, iconColor), caption && _jsx(Caption, { children: caption })] }));
+};
+const getIcon = (icon, color) => {
+    switch (icon) {
+        case ButtonIcon.ADD:
+            return _jsx(SSIAddIcon, { color: color });
+        case ButtonIcon.ARROW_DOWN:
+            return _jsx(SSIArrowDownIcon, { color: color });
+        case ButtonIcon.MEATBALLS:
+            return _jsx(MeatBallsIcon, { color: color });
+        case ButtonIcon.DELETE:
+            return _jsx(DeleteIcon, { color: color, width: 15, height: 16 });
+        case ButtonIcon.FILTER:
+            return _jsx(SSIFilterIcon, { color: color });
+        default:
+            return _jsx("div", {});
+    }
+};
+export default IconButton;

package/dist/components/buttons/{SSISecondaryButton → PrimaryButton}/index.d.ts

@@ -4,8 +4,8 @@ type Props = {
     caption: string;
     onClick: () => Promise<void>;
     icon?: ButtonIcon;
-    disabled?: boolean;
+    disabled?: boolean | (() => boolean);
     style?: CSSProperties;
 };
-declare const SSISecondaryButton: FC<Props>;
-export default SSISecondaryButton;
+declare const PrimaryButton: FC<Props>;
+export default PrimaryButton;

package/dist/components/buttons/{SSIPrimaryButton → PrimaryButton}/index.js

@@ -1,9 +1,10 @@
 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 { SSIPrimaryButtonContainerStyled as Container, SSITextH3LightStyled as Caption } from '../../../styles';
-const SSIPrimaryButton = (props) => {
-    const { caption, icon, onClick, disabled = false, style = {} } = props;
+import { PrimaryButtonContainerStyled as Container, SSITextH3LightStyled as Caption } from '../../../styles';
+const PrimaryButton = (props) => {
+    const { caption, icon, onClick, style } = props;
+    const disabled = typeof props.disabled === 'function' ? props.disabled() : props.disabled ?? false;
     const getIcon = (icon, color) => {
         switch (icon) {
             case ButtonIcon.ADD:
@@ -19,4 +20,4 @@ const SSIPrimaryButton = (props) => {
     };
     return (_jsxs(Container, { style: { ...style, ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, onClick: onClicked, children: [icon && getIcon(icon, fontColors.light), _jsx(Caption, { style: { ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, children: caption })] }));
 };
-export default SSIPrimaryButton;
+export default PrimaryButton;

package/dist/components/buttons/{SSIPrimaryButton → SecondaryButton}/index.d.ts

@@ -4,8 +4,8 @@ type Props = {
     caption: string;
     onClick: () => Promise<void>;
     icon?: ButtonIcon;
-    disabled?: boolean;
+    disabled?: boolean | (() => boolean);
     style?: CSSProperties;
 };
-declare const SSIPrimaryButton: FC<Props>;
-export default SSIPrimaryButton;
+declare const SecondaryButton: FC<Props>;
+export default SecondaryButton;

package/dist/components/buttons/{SSISecondaryButton → SecondaryButton}/index.js

@@ -1,10 +1,11 @@
 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 { SSISecondaryButtonCaptionStyled as Caption, SSISecondaryButtonContainerStyled as Container } from '../../../styles';
+import { SecondaryButtonCaptionStyled as Caption, SecondaryButtonContainerStyled as Container } from '../../../styles';
 import { gradientColors } from '../../../styles/colors';
-const SSISecondaryButton = (props) => {
-    const { caption, icon, onClick, disabled = false, style = {} } = props;
+const SecondaryButton = (props) => {
+    const { caption, icon, onClick, style } = props;
+    const disabled = typeof props.disabled === 'function' ? props.disabled() : props.disabled ?? false;
     const getIcon = (icon, color) => {
         switch (icon) {
             case ButtonIcon.ADD:
@@ -20,4 +21,4 @@ const SSISecondaryButton = (props) => {
     };
     return (_jsxs(Container, { style: { ...style, ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, onClick: onClicked, children: [icon && getIcon(icon, gradientColors['100']), _jsx(Caption, { style: { ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, children: caption })] }));
 };
-export default SSISecondaryButton;
+export default SecondaryButton;

package/dist/components/fields/ComboBox/index.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties, ReactElement } from 'react';
+type ComboBoxOption = {
+    label: string;
+    value: any;
+};
+type Props<T extends ComboBoxOption> = {
+    onChange?: (value: T) => Promise<void>;
+    noOptionsMessage?: string;
+    placeholder?: string;
+    defaultValue?: T;
+    value?: T;
+    inlineOption?: InlineOption;
+    options: Array<T>;
+    style?: CSSProperties;
+};
+type InlineOption = {
+    caption: string;
+    onCreate: (name: string) => Promise<void>;
+};
+declare const ComboBox: <T extends ComboBoxOption>(props: Props<T>) => ReactElement;
+export default ComboBox;

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import CreatableSelect from 'react-select/creatable';
+import { backgroundColors, fontColors } from '@sphereon/ui-components.core';
+const ComboBox = (props) => {
+    const { onChange, noOptionsMessage, placeholder, defaultValue, inlineOption, options = [] } = props;
+    const [value, setValue] = React.useState(props.value);
+    const creatableProps = inlineOption
+        ? {
+            allowCreateWhileLoading: true,
+            isValidNewOption: () => true,
+            onCreateOption: inlineOption.onCreate,
+            createOptionPosition: 'last',
+            formatCreateLabel: () => `${inlineOption.caption}`,
+        }
+        : {};
+    const onValueChange = async (newValue) => {
+        setValue(newValue);
+        await onChange?.(newValue);
+    };
+    return (_jsx(CreatableSelect, { menuPortalTarget: document.querySelector('body'), styles: {
+            control: (provided, state) => ({
+                ...provided,
+                maxWidth: 455,
+                borderColor: state.isFocused ? '#7276F7' : provided.borderColor,
+                '&:hover': {
+                    borderColor: '#7276F7',
+                },
+                boxShadow: 'none',
+                height: 48,
+                backgroundColor: backgroundColors.primaryLight,
+            }),
+            menu: (provided) => ({
+                ...provided,
+                maxWidth: 455
+            }),
+            option: (provided, state) => ({
+                ...provided,
+                color: 'rgba(17, 17, 19, 0.60)',
+                backgroundColor: state.isSelected ? '#7B61FF' : state.isFocused ? '#B7B8D9' : backgroundColors.primaryLight,
+                '&:hover': {
+                    backgroundColor: '#B7B8D9',
+                },
+            }),
+            singleValue: (provided) => ({
+                ...provided,
+                color: fontColors.dark,
+            }),
+        }, defaultValue: defaultValue, onChange: onValueChange, value: value, options: options, placeholder: placeholder, noOptionsMessage: noOptionsMessage ? () => noOptionsMessage : undefined, maxMenuHeight: 210, ...creatableProps }));
+};
+export default ComboBox;

package/dist/components/fields/DragAndDropBox/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    caption: string;
+    description?: string;
+    onChangeFile: (file: File) => Promise<void>;
+};
+declare const DragAndDropBox: React.FC<Props>;
+export default DragAndDropBox;

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { DragAndDropBoxContainerStyled as Container, DragAndDropBoxHiddenInputStyled as HiddenInput, DragAndDropBoxCaptionContainerStyled as CaptionContainer, SSITextH2Styled as Caption, DragAndDropBoxDescriptionStyled as Description } from '../../../styles';
+const DragAndDropBox = (props) => {
+    const { caption, description, onChangeFile } = props;
+    const inputFile = useRef(null);
+    const onSelect = async () => {
+        inputFile.current?.click();
+    };
+    const onChange = async (event) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            await onChangeFile(file);
+        }
+    };
+    const onDrop = async (event) => {
+        event.preventDefault();
+        const file = event.dataTransfer.files[0];
+        const reader = new FileReader();
+        reader.onload = async () => {
+            await onChangeFile(file);
+        };
+        reader.readAsText(file);
+    };
+    const onDragOver = async (event) => {
+        event.preventDefault();
+    };
+    return (_jsxs(Container, { onClick: onSelect, onDrop: onDrop, onDragOver: onDragOver, children: [_jsx(HiddenInput, { ref: inputFile, type: 'file', onChange: onChange }), _jsxs(CaptionContainer, { children: [_jsx(Caption, { children: caption }), _jsx(Description, { children: description })] })] }));
+};
+export default DragAndDropBox;

package/dist/components/fields/FileSelection/index.d.ts

@@ -0,0 +1,12 @@
+import React, { CSSProperties } from 'react';
+import { AssetFilePermission, FileSelectionFieldType } from '../../../types';
+type Props = {
+    file: File;
+    fileType?: FileSelectionFieldType;
+    permission?: AssetFilePermission;
+    onPermissionChange?: (permission: AssetFilePermission) => Promise<void>;
+    onRemove?: () => Promise<void>;
+    style?: CSSProperties;
+};
+declare const FileSelection: React.FC<Props>;
+export default FileSelection;

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

@@ -0,0 +1,33 @@
+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 { 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 = [
+    { label: Localization.translate('file_permission_public_label'), value: 'public' },
+    { label: Localization.translate('file_permission_private_label'), value: 'private' },
+];
+const FileSelection = (props) => {
+    const { file, fileType = FileSelectionFieldType.FILE, permission, onPermissionChange, onRemove, style } = props;
+    const onChange = async (selection) => {
+        if (onPermissionChange) {
+            await onPermissionChange(selection.value);
+        }
+    };
+    return (_jsxs(Container, { style: style, children: [_jsxs(ContentContainer, { children: [_jsx(IconContainer, { children: getIcon(fileType) }), _jsxs(FileDataContainer, { children: [_jsx(FileNameCaption, { children: file.name }), file.size && _jsx(FileSizeCaption, { children: getFileSizeDisplay(file.size) })] }), permission && (_jsx(PermissionSelectionContainer, { children: _jsx(ComboBox, { style: { width: 152, marginLeft: 'auto' }, defaultValue: filePermissions.find((selection) => selection.value === permission), onChange: onChange, options: filePermissions }) }))] }), onRemove &&
+                _jsx(RemoveContainer, { children: _jsx(RemoveButton, { onClick: onRemove, children: _jsx(RemoveButtonCircleIcon, { children: _jsx(CrossIcon, { size: 10 }) }) }) })] }));
+};
+const getIcon = (fileType) => {
+    switch (fileType) {
+        case FileSelectionFieldType.FILE:
+            return _jsx(DocumentIcon, {});
+        case FileSelectionFieldType.IMAGE:
+            return _jsx(ImageIcon, {});
+        default:
+            return _jsx("div", {});
+    }
+};
+export default FileSelection;

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

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

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { and, isObjectControl, optionIs, rankWith, } from '@jsonforms/core';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { Localization, parseBase64Uri } from '@sphereon/ui-components.core';
+import DragAndDropBox from '../../DragAndDropBox';
+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';
+const PassportPhotoControl = (props) => {
+    const { data, handleChange, path } = props;
+    const [image, setImage] = useState(data && { file: base64UriToFile(data.base64Uri, data.fileName, data.mimeType), base64Uri: data.base64Uri });
+    const onAddImage = async (file) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            const result = reader.result;
+            if (typeof result === 'string') {
+                const parsedBase64Uri = parseBase64Uri(result);
+                setImage({ file, base64Uri: result });
+                handleChange(path, { fileName: file.name, mimeType: parsedBase64Uri.mimeType, base64Uri: result });
+            }
+        };
+        reader.readAsDataURL(file);
+    };
+    const onRemoveImage = async () => {
+        setImage(undefined);
+        handleChange(path, undefined);
+    };
+    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 default withJsonFormsControlProps(PassportPhotoControl);

package/dist/components/fields/SSICheckbox/index.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import { CSSProperties, FC, ReactNode } from 'react';
 export interface IProps {
     onValueChange?: (isChecked: boolean) => Promise<void>;
     initialValue?: boolean;
@@ -10,6 +10,7 @@ export interface IProps {
     selectedColor?: string;
     labelColor?: string;
     checkmarkColor?: string;
+    style?: CSSProperties;
 }
 declare const SSICheckbox: FC<IProps>;
 export default SSICheckbox;

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { OpacityStyleEnum, fontColors, selectionElementColors } from '@sphereon/ui-components.core';
 import { SSICheckboxContainerStyled as Container, SSICheckboxLabelContainerStyled as LabelCaption, SSICheckboxSelectedContainerStyled as SelectedContainer, SSICheckboxUnselectedContainerStyled as UnselectedContainer, } from '../../../styles/components';
 const SSICheckbox = (props) => {
-    const { backgroundColor, borderColor = selectionElementColors.primaryBorderDark, disabled = false, initialValue = false, label, selectedColor = selectionElementColors.primaryDark, labelColor = fontColors.light, checkmarkColor = fontColors.dark, } = props;
+    const { backgroundColor, borderColor = selectionElementColors.primaryBorderDark, disabled = false, initialValue = false, label, selectedColor = selectionElementColors.primaryDark, labelColor = fontColors.light, checkmarkColor = fontColors.dark, style } = props;
     const [isChecked, setChecked] = React.useState(initialValue);
     const value = props.isChecked !== undefined ? props.isChecked : isChecked;
     const onValueChange = async () => {
@@ -16,6 +16,6 @@ const SSICheckbox = (props) => {
         }
         setChecked(!isChecked);
     };
-    return (_jsxs(Container, { onClick: onValueChange, style: { ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, children: [value ? (_jsx(SelectedContainer, { style: { backgroundColor: selectedColor, border: `1px solid ${borderColor}` } })) : (_jsx(UnselectedContainer, { style: { backgroundColor, border: `1px solid ${borderColor}` } })), label && (typeof label === 'string' ? _jsx(LabelCaption, { style: { color: labelColor }, children: label }) : label)] }));
+    return (_jsxs(Container, { onClick: onValueChange, style: { ...style, ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, children: [value ? (_jsx(SelectedContainer, { style: { backgroundColor: selectedColor, border: `1px solid ${borderColor}` } })) : (_jsx(UnselectedContainer, { style: { backgroundColor, border: `1px solid ${borderColor}` } })), label && (typeof label === 'string' ? _jsx(LabelCaption, { style: { color: labelColor }, children: label }) : label)] }));
 };
 export default SSICheckbox;

package/dist/components/fields/TextInputField/index.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties, FC } from 'react';
+type Props = {
+    initialValue?: string;
+    value?: string;
+    onChangeValue?: (value: string) => Promise<void>;
+    placeholder?: string;
+    maxLength?: number;
+    label?: string;
+    style?: CSSProperties;
+};
+declare const TextInputField: FC<Props>;
+export default TextInputField;