npm - @sphereon/ui-components.ssi-react - Versions diffs - 0.1.1 → 0.1.2-next.12 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (63) hide show

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

@@ -1,7 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 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 })] }) }));
+var SSICheckmarkBadge = function (props) {
+    var _a = props.size, size = _a === void 0 ? 15 : _a, _b = props.color, color = _b === void 0 ? fontColors.light : _b, _c = props.backgroundColor, backgroundColor = _c === void 0 ? statusColors.valid : _c;
+    return (_jsx("div", __assign({ style: { width: size, aspectRatio: 1 } }, { children: _jsxs("svg", __assign({ 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 CHANGED Viewed

@@ -1,7 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 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 })] }) }));
+var SSIExclamationMarkBadge = function (props) {
+    var _a = props.size, size = _a === void 0 ? 15 : _a, _b = props.color, color = _b === void 0 ? fontColors.light : _b, _c = props.backgroundColor, backgroundColor = _c === void 0 ? statusColors.error : _c;
+    return (_jsx("div", __assign({ style: { width: size, aspectRatio: 1 } }, { children: _jsxs("svg", __assign({ 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/SSIAddIcon/index.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export interface IProps {
+    size?: number;
+    color?: string;
+}
+declare const SSIAddIcon: FC<IProps>;
+export default SSIAddIcon;

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

@@ -0,0 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+var SSIAddIcon = function (props) {
+    var _a = props.size, size = _a === void 0 ? 16 : _a, _b = props.color, color = _b === void 0 ? fontColors.dark : _b;
+    return (_jsx("div", __assign({ style: { width: size, aspectRatio: 1, display: 'flex' } }, { children: _jsx("svg", __assign({ 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 }) })) })));
+};
+export default SSIAddIcon;

package/dist/components/assets/icons/SSIArrowDownIcon/index.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export interface IProps {
+    width?: number;
+    height?: number;
+    color?: string;
+}
+declare const SSIArrowDownIcon: FC<IProps>;
+export default SSIArrowDownIcon;

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

@@ -0,0 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+var SSIArrowDownIcon = function (props) {
+    var _a = props.width, width = _a === void 0 ? 16 : _a, _b = props.height, height = _b === void 0 ? 8 : _b, _c = props.color, color = _c === void 0 ? fontColors.dark : _c;
+    return (_jsx("div", __assign({ style: { width: width, height: height, display: 'flex' } }, { children: _jsx("svg", __assign({ 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 }) })) })));
+};
+export default SSIArrowDownIcon;

package/dist/components/assets/icons/SSIFilterIcon/index.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export interface IProps {
+    width?: number;
+    height?: number;
+    color?: string;
+}
+declare const SSIFilterIcon: FC<IProps>;
+export default SSIFilterIcon;

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

@@ -0,0 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+var SSIFilterIcon = function (props) {
+    var _a = props.height, height = _a === void 0 ? 16 : _a, _b = props.width, width = _b === void 0 ? 18 : _b, _c = props.color, color = _c === void 0 ? fontColors.dark : _c;
+    return (_jsx("div", __assign({ style: { width: width, height: height, display: 'flex' } }, { children: _jsx("svg", __assign({ 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" }) })) })));
+};
+export default SSIFilterIcon;

package/dist/components/assets/icons/SSIProfileIcon/index.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export type Props = {
+    fullName: string;
+    fontColor?: string;
+    backgroundColor?: string;
+};
+declare const ProfileIcon: FC<Props>;
+export default ProfileIcon;

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

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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';
+var ProfileIcon = function (props) {
+    var _a = props.fontColor, fontColor = _a === void 0 ? fontColors.light : _a, _b = props.backgroundColor, backgroundColor = _b === void 0 ? profileColors['100'] : _b, fullName = props.fullName;
+    return (_jsx(Container, __assign({ style: { backgroundColor: backgroundColor } }, { children: _jsx(ProfileIconText, __assign({ style: { color: fontColor } }, { children: getInitials(fullName) })) })));
+};
+export default ProfileIcon;

package/dist/components/assets/logos/SSILogo/index.js CHANGED Viewed

@@ -1,14 +1,19 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { calculateAspectRatio, logoColors } from '@sphereon/ui-components.core';
 import SSIPlaceholderLogo from '../SSIPlaceholderLogo';
-const SSILogo = (props) => {
-    const { logo, color = logoColors.default, size = 32, style } = props;
-    return logo ? (_jsx("div", { style: {
-            ...style,
-            aspectRatio: logo?.dimensions && calculateAspectRatio(logo?.dimensions.width, logo?.dimensions.height),
-            height: size,
-            background: `url(${logo.uri})`,
-            backgroundSize: 'cover',
-        } })) : (_jsx(SSIPlaceholderLogo, { style: style, size: size, color: color }));
+var SSILogo = function (props) {
+    var logo = props.logo, _a = props.color, color = _a === void 0 ? logoColors.default : _a, _b = props.size, size = _b === void 0 ? 32 : _b, style = props.style;
+    return logo ? (_jsx("div", { style: __assign(__assign({}, style), { aspectRatio: (logo === null || logo === void 0 ? void 0 : logo.dimensions) && calculateAspectRatio(logo === null || logo === void 0 ? void 0 : logo.dimensions.width, logo === null || logo === void 0 ? void 0 : logo.dimensions.height), height: size, background: "url(".concat(logo.uri, ")"), backgroundSize: 'cover' }) })) : (_jsx(SSIPlaceholderLogo, { style: style, size: size, color: color }));
 };
 export default SSILogo;

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

@@ -1,7 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { logoColors } from '@sphereon/ui-components.core';
-const SSIPlaceholderLogo = (props) => {
-    const { color = logoColors.default, size = 32, style } = props;
-    return (_jsx("div", { style: { ...style, width: size, aspectRatio: 1 }, 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 })] }) }));
+var SSIPlaceholderLogo = function (props) {
+    var _a = props.color, color = _a === void 0 ? logoColors.default : _a, _b = props.size, size = _b === void 0 ? 32 : _b, style = props.style;
+    return (_jsx("div", __assign({ style: __assign(__assign({}, style), { width: size, aspectRatio: 1 }) }, { children: _jsxs("svg", __assign({ 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 })] })) })));
 };
 export default SSIPlaceholderLogo;

package/dist/components/buttons/SSIIconButton/index.d.ts ADDED Viewed

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

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

@@ -0,0 +1,35 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+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';
+var SSIIconButton = function (props) {
+    var icon = props.icon, onClick = props.onClick, _a = props.disabled, disabled = _a === void 0 ? false : _a, _b = props.color, color = _b === void 0 ? fontColors.dark : _b;
+    return _jsx(Container, __assign({ onClick: onClick }, { children: getIcon(icon, color) }));
+};
+var getIcon = function (icon, color) {
+    switch (icon) {
+        case ButtonIconsEnum.ADD:
+            return _jsx(SSIAddIcon, { color: color });
+        case ButtonIconsEnum.FILTER:
+            return _jsx(SSIFilterIcon, { color: color });
+        case ButtonIconsEnum.ARROW_DOWN:
+            return _jsx(SSIArrowDownIcon, { color: color });
+        default:
+            return _jsx("div", {});
+    }
+};
+export default SSIIconButton;

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

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { ButtonIconsEnum } from '../../../types';
+export type Props = {
+    caption: string;
+    onClick: () => Promise<void>;
+    icon?: ButtonIconsEnum;
+    disabled?: boolean;
+};
+declare const SSIPrimaryButton: FC<Props>;
+export default SSIPrimaryButton;

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

@@ -0,0 +1,29 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fontColors } 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';
+var SSIPrimaryButton = function (props) {
+    var caption = props.caption, icon = props.icon, onClick = props.onClick;
+    return (_jsxs(Container, __assign({ onClick: onClick }, { children: [icon && getIcon(icon, fontColors.light), _jsx(Caption, { children: caption })] })));
+};
+var getIcon = function (icon, color) {
+    switch (icon) {
+        case ButtonIconsEnum.ADD:
+            return _jsx(SSIAddIcon, { color: color });
+        default:
+            return _jsx("div", {});
+    }
+};
+export default SSIPrimaryButton;

package/dist/components/labels/SSIStatusLabel/index.js CHANGED Viewed

@@ -1,13 +1,24 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CredentialStatus, IssuerStatus, statusColors, getStatusTranslation } from '@sphereon/ui-components.core';
 import { SSIStatusLabelBadgeContainer as BadgeContainer, SSIStatusLabelContainerStyled as Container, SSIStatusLabelStatusCaptionStyled as StatusCaption, } from '../../../styles/components';
 import SSICheckmarkBadge from '../../../components/assets/badges/SSICheckmarkBadge';
 import SSIExclamationMarkBadge from '../../../components/assets/badges/SSIExclamationMarkBadge';
-const SSIStatusLabel = (props) => {
-    const { status, color = statusColors[status], style, showIcon = false } = props;
-    return (_jsxs(Container, { style: { ...style, borderColor: color }, children: [showIcon && _jsx(BadgeContainer, { children: getStatusBadge(status, color) }), _jsx(StatusCaption, { style: { color }, children: getStatusTranslation(status) })] }));
+var SSIStatusLabel = function (props) {
+    var status = props.status, _a = props.color, color = _a === void 0 ? statusColors[status] : _a, style = props.style, _b = props.showIcon, showIcon = _b === void 0 ? false : _b;
+    return (_jsxs(Container, __assign({ style: __assign(__assign({}, style), { borderColor: color }) }, { children: [showIcon && _jsx(BadgeContainer, { children: getStatusBadge(status, color) }), _jsx(StatusCaption, __assign({ style: { color: color } }, { children: getStatusTranslation(status) }))] })));
 };
-const getStatusBadge = (status, backgroundColor) => {
+var getStatusBadge = function (status, backgroundColor) {
     switch (status) {
         case IssuerStatus.VERIFIED:
             return _jsx(SSICheckmarkBadge, { backgroundColor: backgroundColor });
@@ -18,9 +29,9 @@ const getStatusBadge = (status, backgroundColor) => {
         case CredentialStatus.EXPIRED:
             return _jsx(SSIExclamationMarkBadge, { backgroundColor: backgroundColor });
         case CredentialStatus.REVOKED:
-            throw new Error(`${status} not yet implemented`);
+            throw new Error("".concat(status, " not yet implemented"));
         default:
-            throw new Error(`${status} not supported`);
+            throw new Error("".concat(status, " not supported"));
     }
 };
 export default SSIStatusLabel;

package/dist/components/labels/SSITypeLabel/index.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { LabelTypeEnum } from '../../../types';
+export type Props = {
+    type: LabelTypeEnum;
+};
+declare const SSITypeLabel: FC<Props>;
+export default SSITypeLabel;

package/dist/components/labels/SSITypeLabel/index.js ADDED Viewed

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LabelTypeEnum } from '../../../types';
+import { SSITypeLabelContainerStyled as Container } from '../../../styles/components';
+import { backgroundColors, gradientColors } from '@sphereon/ui-components.core';
+var getBackground = function (type) {
+    switch (type) {
+        case LabelTypeEnum.ISSUER:
+            return gradientColors['200'];
+        case LabelTypeEnum.VERIFIER:
+            return gradientColors['100'];
+        default:
+            return backgroundColors.primaryLight;
+    }
+};
+var SSITypeLabel = function (props) {
+    var type = props.type;
+    return _jsx(Container, __assign({ style: { background: getBackground(type) } }, { children: type }));
+};
+export default SSITypeLabel;

package/dist/components/lists/SSIDropDownList/index.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export type Props = {
+    initialValue: string;
+    label?: string;
+};
+declare const SSIDropDownList: FC<Props>;
+export default SSIDropDownList;

package/dist/components/lists/SSIDropDownList/index.js ADDED Viewed

@@ -0,0 +1,49 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import SSIIconButton from '../../buttons/SSIIconButton';
+import { ButtonIconsEnum } from '../../../types';
+import { SSIDropDownListContainerStyled as Container, SSITextH3Styled as LabelCaption, SSIDropDownListSelectedValueStyled as SelectedValue, } from '../../../styles/components';
+var SSIDropDownList = function (props) {
+    var initialValue = props.initialValue, label = props.label;
+    var _a = React.useState(initialValue), value = _a[0], setValue = _a[1];
+    return (_jsxs(Container, { children: [label && _jsx(LabelCaption, { children: label }), _jsx(SelectedValue, { children: value }), _jsx(SSIIconButton, { icon: ButtonIconsEnum.ARROW_DOWN, onClick: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+                    return [2, console.log('drop down clicked')];
+                }); }); } })] }));
+};
+export default SSIDropDownList;

package/dist/components/views/SSICardView/index.js CHANGED Viewed

@@ -1,24 +1,31 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { backgroundColors, credentialCardColors, Localization, toLocalDateString, } from '@sphereon/ui-components.core';
 import { SSIAlphaContainerStyled as AlphaContainer, SSICardViewContainerStyled as Container, SSICardViewBackgroundImageStyled as BackgroundImage, SSICardViewContentMainContainerStyled as ContentMainContainer, SSICardViewContentSubContainerStyled as ContentSubContainer, SSICardViewSSICredentialStatusStyled as CredentialStatusContainer, SSICardViewCredentialSubtitleTextStyled as CredentialSubtitleText, SSICardViewCredentialTitleTextStyled as CredentialTitleText, SSITextH5LightStyled as ExpirationDateText, SSICardViewFooterContainerStyled as FooterContainer, SSITextH4LightStyled as H4Text, SSICardViewHeaderContainerStyled as HeaderContainer, SSICardViewContentIssueNameContainerStyled as IssueNameContainer, SSICardViewHeaderLogoContainerStyled as LogoContainer, SSICardViewContentPropertiesContainerStyled as PropertiesContainer, SSITextH6LightStyled as PropertyValueText, SSICardViewHeaderTitleContainerStyled as TitleContainer, SSIFlexDirectionColumnViewStyled as PropertyContainer, } from '../../../styles/components';
 import SSILogo from '../../assets/logos/SSILogo';
 import SSIStatusLabel from '../../labels/SSIStatusLabel';
-const SSICardView = (props) => {
-    const { header, body, footer } = props;
-    const { credentialTitle, credentialSubtitle, logo } = props.header ?? {};
-    const { issuerName, properties } = props.body ?? {};
-    const { credentialStatus, expirationDate } = props.footer ?? {};
-    const { backgroundColor = credentialCardColors.default, backgroundImage, textColor = backgroundColors.primaryLight } = props.display ?? {};
-    const getPropertyElementsFrom = (properties) => {
-        return properties.slice(0, 2).map((property, index) => (_jsxs(PropertyContainer, { style: {
-                ...(properties.length > 1 && { width: 140 }),
-                ...(index > 0 && { marginLeft: 10 }),
-            }, children: [_jsx(H4Text, { style: { color: textColor }, children: property.name }), _jsx(PropertyValueText, { style: { color: textColor }, children: property.value })] }, index)));
+var SSICardView = function (props) {
+    var _a, _b, _c, _d;
+    var header = props.header, body = props.body, footer = props.footer;
+    var _e = (_a = props.header) !== null && _a !== void 0 ? _a : {}, credentialTitle = _e.credentialTitle, credentialSubtitle = _e.credentialSubtitle, logo = _e.logo;
+    var _f = (_b = props.body) !== null && _b !== void 0 ? _b : {}, issuerName = _f.issuerName, properties = _f.properties;
+    var _g = (_c = props.footer) !== null && _c !== void 0 ? _c : {}, credentialStatus = _g.credentialStatus, expirationDate = _g.expirationDate;
+    var _h = (_d = props.display) !== null && _d !== void 0 ? _d : {}, _j = _h.backgroundColor, backgroundColor = _j === void 0 ? credentialCardColors.default : _j, backgroundImage = _h.backgroundImage, _k = _h.textColor, textColor = _k === void 0 ? backgroundColors.primaryLight : _k;
+    var getPropertyElementsFrom = function (properties) {
+        return properties.slice(0, 2).map(function (property, index) { return (_jsxs(PropertyContainer, __assign({ style: __assign(__assign({}, (properties.length > 1 && { width: 140 })), (index > 0 && { marginLeft: 10 })) }, { children: [_jsx(H4Text, __assign({ style: { color: textColor } }, { children: property.name })), _jsx(PropertyValueText, __assign({ style: { color: textColor } }, { children: property.value }))] }), index)); });
     };
-    return (_jsx(Container, { style: { backgroundColor }, children: _jsx(BackgroundImage, { style: {
-                ...(backgroundImage?.uri && { background: `url(${backgroundImage.uri})`, backgroundSize: 'cover' }),
-            }, children: _jsxs(AlphaContainer, { children: [header && (_jsxs(HeaderContainer, { children: [_jsx(LogoContainer, { children: _jsx(SSILogo, { logo: logo, color: textColor }) }), credentialTitle && (_jsxs(TitleContainer, { children: [_jsx(CredentialTitleText, { style: { color: textColor }, children: credentialTitle }), credentialSubtitle && _jsx(CredentialSubtitleText, { style: { color: textColor }, children: credentialSubtitle })] }))] })), body && (_jsx(ContentMainContainer, { children: _jsxs(ContentSubContainer, { children: [issuerName && (_jsx(IssueNameContainer, { children: _jsx(H4Text, { style: { color: textColor }, children: issuerName }) })), properties && _jsx(PropertiesContainer, { children: getPropertyElementsFrom(properties) })] }) })), footer && (_jsxs(FooterContainer, { children: [_jsx(ExpirationDateText, { style: { color: textColor }, children: expirationDate
-                                    ? `${Localization.translate('credential_card_expires_message')} ${toLocalDateString(expirationDate)}`
-                                    : Localization.translate('credential_status_never_expires_date_label') }), credentialStatus && (_jsx(CredentialStatusContainer, { children: credentialStatus && _jsx(SSIStatusLabel, { status: credentialStatus, color: textColor }) }))] }))] }) }) }));
+    return (_jsx(Container, __assign({ style: { backgroundColor: backgroundColor } }, { children: _jsx(BackgroundImage, __assign({ style: __assign({}, ((backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.uri) && { background: "url(".concat(backgroundImage.uri, ")"), backgroundSize: 'cover' })) }, { children: _jsxs(AlphaContainer, { children: [header && (_jsxs(HeaderContainer, { children: [_jsx(LogoContainer, { children: _jsx(SSILogo, { logo: logo, color: textColor }) }), credentialTitle && (_jsxs(TitleContainer, { children: [_jsx(CredentialTitleText, __assign({ style: { color: textColor } }, { children: credentialTitle })), credentialSubtitle && _jsx(CredentialSubtitleText, __assign({ style: { color: textColor } }, { children: credentialSubtitle }))] }))] })), body && (_jsx(ContentMainContainer, { children: _jsxs(ContentSubContainer, { children: [issuerName && (_jsx(IssueNameContainer, { children: _jsx(H4Text, __assign({ style: { color: textColor } }, { children: issuerName })) })), properties && _jsx(PropertiesContainer, { children: getPropertyElementsFrom(properties) })] }) })), footer && (_jsxs(FooterContainer, { children: [_jsx(ExpirationDateText, __assign({ style: { color: textColor } }, { children: expirationDate
+                                    ? "".concat(Localization.translate('credential_card_expires_message'), " ").concat(toLocalDateString(expirationDate))
+                                    : Localization.translate('credential_status_never_expires_date_label') })), credentialStatus && (_jsx(CredentialStatusContainer, { children: credentialStatus && _jsx(SSIStatusLabel, { status: credentialStatus, color: textColor }) }))] }))] }) })) })));
 };
 export default SSICardView;

package/dist/components/views/SSITabView/SSITabViewHeader/index.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TabNavigationState } from '../../../../types';
+export type Props = {
+    navigationState: TabNavigationState;
+    onIndexChange: (index: number) => void;
+};
+declare const SSITabViewHeader: React.FC<Props>;
+export default SSITabViewHeader;

package/dist/components/views/SSITabView/SSITabViewHeader/index.js ADDED Viewed

@@ -0,0 +1,22 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTitleContainerStyled as TitleContainer, SSITextH3Styled as TitleCaption, } from '../../../../styles/components';
+var SSITabViewHeader = function (props) {
+    var navigationState = props.navigationState, onIndexChange = props.onIndexChange;
+    return (_jsx(Container, { children: navigationState.routes.map(function (value, index) {
+            var tabIndex = index + 1;
+            var isActiveTab = tabIndex === navigationState.index;
+            return (_jsx(TitleContainer, __assign({ onClick: function () { return onIndexChange(tabIndex); }, style: __assign({}, (isActiveTab && { borderBottom: "2px solid #7276F7", alignSelf: 'stretch' })) }, { children: _jsx(TitleCaption, __assign({ style: { fontWeight: !isActiveTab ? '400' : '600' } }, { children: value.title })) }), tabIndex));
+        }) }));
+};
+export default SSITabViewHeader;

package/dist/components/views/SSITabView/index.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TabViewRoute } from '../../../types';
+export type Props = {
+    routes: Array<TabViewRoute>;
+};
+declare const SSITabView: React.FC<Props>;
+export default SSITabView;