@sphereon/ui-components.ssi-react 0.1.3-unstable.14 → 0.1.3-unstable.145

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

@@ -0,0 +1,7 @@
+/// <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;
+};

package/dist/@config/toasts/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ToastType } from '@sphereon/ui-components.core';
+import SSIToast from '../../components/messageBoxes/toasts/SSIToast';
+export const toastConfig = {
+    ssiToastSuccess: (params) => {
+        const { title, message, onClick, props } = params;
+        return _jsx(SSIToast, { type: ToastType.SUCCESS, title: title, message: message, showBadge: props?.showBadge, onClick: onClick });
+    },
+    ssiToastError: (params) => {
+        const { title, message, onClick, props } = params;
+        return _jsx(SSIToast, { type: ToastType.ERROR, title: title, message: message, showBadge: props?.showBadge, onClick: onClick });
+    },
+};

package/dist/components/assets/badges/SSICheckmarkBadge/index.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { fontColors, statusColors } from '@sphereon/ui-components.core';
 const SSICheckmarkBadge = (props) => {
     const { size = 15, color = fontColors.light, backgroundColor = statusColors.valid } = props;
-    return (_jsx("div", { style: { width: size, aspectRatio: 1 }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 15 15", fill: "none", children: [_jsx("circle", { cx: "7.5", cy: "7.5", r: "7.5", fill: backgroundColor }), _jsx("path", { d: "M5.91233 11.0361H5.9092C5.84998 11.0357 5.79144 11.0236 5.73697 11.0005C5.6825 10.9774 5.63319 10.9437 5.59192 10.9015L3.13412 8.38546C3.09155 8.34399 3.05776 8.29447 3.03473 8.23981C3.0117 8.18516 2.99989 8.12647 3 8.06722C3.00011 8.00796 3.01214 7.94932 3.03538 7.89475C3.05862 7.84018 3.09259 7.79079 3.13531 7.74947C3.17803 7.70815 3.22863 7.67575 3.28412 7.65417C3.33962 7.63259 3.3989 7.62226 3.45847 7.6238C3.51804 7.62534 3.5767 7.63871 3.63099 7.66312C3.68529 7.68754 3.73413 7.72251 3.77463 7.76597L5.91665 9.95833L10.9927 4.91088C11.077 4.82993 11.1898 4.78514 11.307 4.78615C11.4242 4.78716 11.5363 4.8339 11.6191 4.91629C11.702 4.99869 11.749 5.11015 11.75 5.22667C11.751 5.34319 11.706 5.45544 11.6246 5.53926L6.22827 10.9059C6.14448 10.9893 6.03084 11.0361 5.91233 11.0361Z", fill: color })] }) }));
+    return (_jsx("div", { style: { width: size, height: size }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 15 15", fill: "none", children: [_jsx("circle", { cx: "7.5", cy: "7.5", r: "7.5", fill: backgroundColor }), _jsx("path", { d: "M5.91233 11.0361H5.9092C5.84998 11.0357 5.79144 11.0236 5.73697 11.0005C5.6825 10.9774 5.63319 10.9437 5.59192 10.9015L3.13412 8.38546C3.09155 8.34399 3.05776 8.29447 3.03473 8.23981C3.0117 8.18516 2.99989 8.12647 3 8.06722C3.00011 8.00796 3.01214 7.94932 3.03538 7.89475C3.05862 7.84018 3.09259 7.79079 3.13531 7.74947C3.17803 7.70815 3.22863 7.67575 3.28412 7.65417C3.33962 7.63259 3.3989 7.62226 3.45847 7.6238C3.51804 7.62534 3.5767 7.63871 3.63099 7.66312C3.68529 7.68754 3.73413 7.72251 3.77463 7.76597L5.91665 9.95833L10.9927 4.91088C11.077 4.82993 11.1898 4.78514 11.307 4.78615C11.4242 4.78716 11.5363 4.8339 11.6191 4.91629C11.702 4.99869 11.749 5.11015 11.75 5.22667C11.751 5.34319 11.706 5.45544 11.6246 5.53926L6.22827 10.9059C6.14448 10.9893 6.03084 11.0361 5.91233 11.0361Z", fill: color })] }) }));
 };
 export default SSICheckmarkBadge;

package/dist/components/assets/badges/SSIExclamationMarkBadge/index.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { fontColors, statusColors } from '@sphereon/ui-components.core';
 const SSIExclamationMarkBadge = (props) => {
     const { size = 15, color = fontColors.light, backgroundColor = statusColors.error } = props;
-    return (_jsx("div", { style: { width: size, aspectRatio: 1 }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 15 15", fill: "none", children: [_jsx("circle", { cx: "7.5", cy: "7.5", r: "7.5", fill: backgroundColor }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.78571 3.48218C6.78571 3.33429 6.94559 3.21429 7.14279 3.21429H7.8572C8.05439 3.21429 8.21428 3.33429 8.21428 3.48218V9.37504C8.21428 9.52293 8.05439 9.64283 7.8572 9.64283H7.14279C6.94559 9.64283 6.78571 9.52292 6.78571 9.37504V3.48218ZM6.78571 10.9822C6.78571 10.8342 6.94559 10.7143 7.14279 10.7143H7.8572C8.05439 10.7143 8.21428 10.8342 8.21428 10.9822V11.5178C8.21428 11.6657 8.05439 11.7857 7.8572 11.7857H7.14279C6.94559 11.7857 6.78571 11.6657 6.78571 11.5178V10.9822Z", fill: color })] }) }));
+    return (_jsx("div", { style: { width: size, height: size }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 15 15", fill: "none", children: [_jsx("circle", { cx: "7.5", cy: "7.5", r: "7.5", fill: backgroundColor }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.78571 3.48218C6.78571 3.33429 6.94559 3.21429 7.14279 3.21429H7.8572C8.05439 3.21429 8.21428 3.33429 8.21428 3.48218V9.37504C8.21428 9.52293 8.05439 9.64283 7.8572 9.64283H7.14279C6.94559 9.64283 6.78571 9.52292 6.78571 9.37504V3.48218ZM6.78571 10.9822C6.78571 10.8342 6.94559 10.7143 7.14279 10.7143H7.8572C8.05439 10.7143 8.21428 10.8342 8.21428 10.9822V11.5178C8.21428 11.6657 8.05439 11.7857 7.8572 11.7857H7.14279C6.94559 11.7857 6.78571 11.6657 6.78571 11.5178V10.9822Z", fill: color })] }) }));
 };
 export default SSIExclamationMarkBadge;

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

@@ -0,0 +1,8 @@
+import { CSSProperties, FC } from 'react';
+type Props = {
+    size?: number;
+    color?: string;
+    style?: CSSProperties;
+};
+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

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+const DeleteIcon = (props) => {
+    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.d.ts

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

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

@@ -1,7 +1,7 @@
 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 }) }) }));
+    const { size = 16, 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 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.d.ts

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

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

@@ -1,7 +1,7 @@
 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 }) }) }));
+    const { width = 16, height = 8, color = fontColors.dark, style = {} } = props;
+    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.d.ts

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

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

@@ -1,7 +1,7 @@
 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" }) }) }));
+    const { height = 16, width = 18, color = fontColors.dark, style = {} } = props;
+    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/icons/SSIProfileIcon/index.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-export type Props = {
+type Props = {
     fullName: string;
     fontColor?: string;
     backgroundColor?: string;

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { fontColors, getInitials, profileColors } from '@sphereon/ui-components.core';
-import { SSIProfileIconContainerStyled as Container } from '../../../../styles/components/components/SSIProfileIcon';
-import { SSITextH2Styled as ProfileIconText } from '../../../../styles/components';
+import { SSIProfileIconContainerStyled as Container, SSITextH2Styled as ProfileIconText } from '../../../../styles';
 const ProfileIcon = (props) => {
     const { fontColor = fontColors.light, backgroundColor = profileColors['100'], fullName } = props;
     return (_jsx(Container, { style: { backgroundColor }, children: _jsx(ProfileIconText, { style: { color: fontColor }, children: getInitials(fullName) }) }));

package/dist/components/assets/markers/StepMarker/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { StepStatus } from '../../../../types';
+type Props = {
+    stepNumber: number;
+    status?: StepStatus;
+};
+declare const StepMarker: FC<Props>;
+export default StepMarker;

package/dist/components/assets/markers/StepMarker/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StepMarkerActiveContainerStyled as ActiveContainer, StepMarkerActiveOuterContainerStyled as ActiveOuterContainer, StepMarkerGradientContainerStyled as GradientContainer, SSITextH1SemiBoldLightStyled as StepNumberText, StepMarkerInactiveContainerStyled as InactiveContainer, } from '../../../../styles';
+import { StepStatus } from '../../../../types';
+const getCurrentMarkerElement = (stepNumber) => {
+    return (_jsx(ActiveContainer, { children: _jsx(ActiveOuterContainer, { children: _jsx(GradientContainer, { children: _jsx(StepNumberText, { children: stepNumber }) }) }) }));
+};
+const getNextMarkerElement = (stepNumber) => {
+    return (_jsx(InactiveContainer, { children: _jsx(StepNumberText, { children: stepNumber }) }));
+};
+const getCompletedMarkerElement = (stepNumber) => {
+    return (_jsx(GradientContainer, { children: _jsx(StepNumberText, { children: stepNumber }) }));
+};
+const StepMarker = (props) => {
+    const { stepNumber, status = StepStatus.NEXT } = props;
+    switch (status) {
+        case StepStatus.CURRENT:
+            return getCurrentMarkerElement(stepNumber);
+        case StepStatus.COMPLETED:
+            return getCompletedMarkerElement(stepNumber);
+        case StepStatus.NEXT:
+            return getNextMarkerElement(stepNumber);
+        default:
+            return _jsx("div", {});
+    }
+};
+export default StepMarker;

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/SSIIconButton/index.d.ts

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

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

@@ -1,22 +1,27 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ButtonIcon, fontColors } from '@sphereon/ui-components.core';
 import SSIAddIcon from '../../assets/icons/SSIAddIcon';
 import SSIFilterIcon from '../../assets/icons/SSIFilterIcon';
 import SSIArrowDownIcon from '../../assets/icons/SSIArrowDownIcon';
-import { ButtonIconsEnum } from '../../../types';
-import { SSIIconButtonContainerStyled as Container } from '../../../styles/components';
-import { fontColors } from '@sphereon/ui-components.core';
+import { SSIIconButtonContainerStyled as Container, SSITextH3Styled as Caption } from '../../../styles';
+import MeatBallsIcon from '../../assets/icons/MeatBallsIcon';
+import DeleteIcon from '../../assets/icons/DeleteIcon';
 const SSIIconButton = (props) => {
-    const { icon, onClick, disabled = false, color = fontColors.dark } = props;
-    return _jsx(Container, { onClick: onClick, children: getIcon(icon, color) });
+    const { caption, icon, onClick, disabled = false, iconColor = fontColors.dark } = props;
+    return (_jsxs(Container, { onClick: onClick, children: [getIcon(icon, iconColor), caption && _jsx(Caption, { children: caption })] }));
 };
 const getIcon = (icon, color) => {
     switch (icon) {
-        case ButtonIconsEnum.ADD:
+        case ButtonIcon.ADD:
             return _jsx(SSIAddIcon, { color: color });
-        case ButtonIconsEnum.FILTER:
-            return _jsx(SSIFilterIcon, { color: color });
-        case ButtonIconsEnum.ARROW_DOWN:
+        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", {});
     }

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

@@ -1,9 +1,9 @@
 import { CSSProperties, FC } from 'react';
-import { ButtonIconsEnum } from '../../../types';
-export type Props = {
+import { ButtonIcon } from '@sphereon/ui-components.core';
+type Props = {
     caption: string;
     onClick: () => Promise<void>;
-    icon?: ButtonIconsEnum;
+    icon?: ButtonIcon;
     disabled?: boolean;
     style?: CSSProperties;
 };

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

@@ -1,14 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { fontColors } from '@sphereon/ui-components.core';
+import { ButtonIcon, fontColors, OpacityStyleEnum } from '@sphereon/ui-components.core';
 import SSIAddIcon from '../../assets/icons/SSIAddIcon';
-import { SSIPrimaryButtonContainerStyled as Container, SSITextH3LightStyled as Caption } from '../../../styles/components';
-import { ButtonIconsEnum } from '../../../types';
+import { SSIPrimaryButtonContainerStyled as Container, SSITextH3LightStyled as Caption } from '../../../styles';
 const SSIPrimaryButton = (props) => {
     const { caption, icon, onClick, disabled = false, style = {} } = props;
     const getIcon = (icon, color) => {
         switch (icon) {
-            case ButtonIconsEnum.ADD:
-                return _jsx(SSIAddIcon, { style: { ...(disabled && { opacity: 0.5 }) }, color: color });
+            case ButtonIcon.ADD:
+                return _jsx(SSIAddIcon, { style: { ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, color: color });
             default:
                 return _jsx("div", {});
         }
@@ -18,6 +17,6 @@ const SSIPrimaryButton = (props) => {
             await onClick();
         }
     };
-    return (_jsxs(Container, { style: { ...style, ...(disabled && { opacity: 0.5 }) }, onClick: onClicked, children: [icon && getIcon(icon, fontColors.light), _jsx(Caption, { style: { ...(disabled && { opacity: 0.5 }) }, children: caption })] }));
+    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;

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

@@ -1,9 +1,9 @@
 import { CSSProperties, FC } from 'react';
-import { ButtonIconsEnum } from '../../../types';
-export type Props = {
+import { ButtonIcon } from '@sphereon/ui-components.core';
+type Props = {
     caption: string;
     onClick: () => Promise<void>;
-    icon?: ButtonIconsEnum;
+    icon?: ButtonIcon;
     disabled?: boolean;
     style?: CSSProperties;
 };

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

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { gradientColors } from '@sphereon/ui-components.core';
+import { ButtonIcon, OpacityStyleEnum } from '@sphereon/ui-components.core';
 import SSIAddIcon from '../../assets/icons/SSIAddIcon';
-import { SSISecondaryButtonCaptionStyled as Caption, SSISecondaryButtonContainerStyled as Container, } from '../../../styles/components';
-import { ButtonIconsEnum } from '../../../types';
+import { SSISecondaryButtonCaptionStyled as Caption, SSISecondaryButtonContainerStyled as Container } from '../../../styles';
+import { gradientColors } from '../../../styles/colors';
 const SSISecondaryButton = (props) => {
     const { caption, icon, onClick, disabled = false, style = {} } = props;
     const getIcon = (icon, color) => {
         switch (icon) {
-            case ButtonIconsEnum.ADD:
-                return _jsx(SSIAddIcon, { style: { ...(disabled && { opacity: 0.5 }) }, color: color });
+            case ButtonIcon.ADD:
+                return _jsx(SSIAddIcon, { style: { ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, color: color });
             default:
                 return _jsx("div", {});
         }
@@ -18,6 +18,6 @@ const SSISecondaryButton = (props) => {
             await onClick();
         }
     };
-    return (_jsxs(Container, { style: { ...style, ...(disabled && { opacity: 0.5 }) }, onClick: onClicked, children: [icon && getIcon(icon, gradientColors['100']), _jsx(Caption, { style: { ...(disabled && { opacity: 0.5 }) }, children: caption })] }));
+    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;

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

@@ -0,0 +1,20 @@
+import { CSSProperties, ReactElement } from 'react';
+type ComboBoxOption = {
+    label: string;
+    value: any;
+};
+type Props<T extends ComboBoxOption> = {
+    onChange?: (value: any) => Promise<void>;
+    noOptionsMessage?: string;
+    placeholder?: string;
+    defaultValue?: 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,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 creatableProps = inlineOption
+        ? {
+            allowCreateWhileLoading: true,
+            isValidNewOption: () => true,
+            onCreateOption: inlineOption.onCreate,
+            createOptionPosition: 'last',
+            formatCreateLabel: () => `${inlineOption.caption}`,
+        }
+        : {};
+    return (_jsx(CreatableSelect, { 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: onChange, 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, SSITextH2DarkStyled 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;