@sphereon/ui-components.ssi-react 0.4.1-unstable.97 → 0.5.0

package/dist/components/assets/icons/{ArrowDown → Arrow}/index.d.ts

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors, parseColor } from '@sphereon/ui-components.core';
+const ArrowIcon = (props) => {
+    const { width = 16, height = 8, color = fontColors.dark, direction = 'down', style } = props;
+    return (_jsx("div", { style: { ...style, width, height, display: 'flex', ...(direction === 'up' && { transform: 'scaleY(-1)' }), transformOrigin: 'center' }, 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: parseColor(color) }) }) }));
+};
+export default ArrowIcon;

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

@@ -5,6 +5,6 @@ const ContactIcon = (props) => {
     const iconAspectRatio = 1;
     const height = size / 16;
     const width = iconAspectRatio * height;
-    return (_jsx("div", { style: { ...style, width: `${width}rem`, height: `${height}rem`, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8 9.54004C9.26746 9.54004 11.1996 9.86248 12.8008 10.5039C13.6006 10.8243 14.2839 11.2113 14.7588 11.6494C15.23 12.0844 15.46 12.5334 15.46 13V15.46H0.540039V13C0.540039 12.5334 0.769958 12.0844 1.24121 11.6494C1.71605 11.2113 2.39941 10.8243 3.19922 10.5039C4.80039 9.86248 6.73254 9.54004 8 9.54004ZM8 0.540039C9.91161 0.540039 11.46 2.08839 11.46 4C11.46 5.91161 9.91161 7.45996 8 7.45996C6.08839 7.45996 4.54004 5.91161 4.54004 4C4.54004 2.08839 6.08839 0.540039 8 0.540039Z", stroke: parseColor(color), "stroke-width": "1.08056" }) }) }));
+    return (_jsx("div", { style: { ...style, width: `${width}rem`, height: `${height}rem`, 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 9.54004C9.26746 9.54004 11.1996 9.86248 12.8008 10.5039C13.6006 10.8243 14.2839 11.2113 14.7588 11.6494C15.23 12.0844 15.46 12.5334 15.46 13V15.46H0.540039V13C0.540039 12.5334 0.769958 12.0844 1.24121 11.6494C1.71605 11.2113 2.39941 10.8243 3.19922 10.5039C4.80039 9.86248 6.73254 9.54004 8 9.54004ZM8 0.540039C9.91161 0.540039 11.46 2.08839 11.46 4C11.46 5.91161 9.91161 7.45996 8 7.45996C6.08839 7.45996 4.54004 5.91161 4.54004 4C4.54004 2.08839 6.08839 0.540039 8 0.540039Z", stroke: parseColor(color), strokeWidth: "1.08056" }) }) }));
 };
 export default ContactIcon;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,13 +1,17 @@
 import { CSSProperties, FC, ReactNode } from 'react';
+import { GradientProperties } from '@sphereon/ui-components.core';
+import { Position } from '../../../types';
 export interface IProps {
     onValueChange?: (isChecked: boolean) => Promise<void>;
     initialValue?: boolean;
     isChecked?: boolean;
     label?: string | ReactNode;
+    labelPosition?: Position;
     disabled?: boolean;
     backgroundColor?: string;
     borderColor?: string;
     selectedColor?: string;
+    gradient?: GradientProperties;
     labelColor?: string;
     checkmarkColor?: string;
     style?: CSSProperties;

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

@@ -1,9 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { OpacityStyleEnum, fontColors, selectionElementColors } from '@sphereon/ui-components.core';
+import { OpacityStyleEnum, elementColors, fontColors, gradientsColors } from '@sphereon/ui-components.core';
 import { SSICheckboxContainerStyled as Container, SSICheckboxLabelContainerStyled as LabelCaption, SSICheckboxSelectedContainerStyled as SelectedContainer, SSICheckboxUnselectedContainerStyled as UnselectedContainer, } from '../../../styles/components';
+const flexDirectionMap = {
+    right: 'row',
+    left: 'row-reverse',
+    top: 'column-reverse',
+    bottom: 'column',
+};
 const SSICheckbox = (props) => {
-    const { backgroundColor, borderColor = selectionElementColors.primaryBorderDark, disabled = false, initialValue = false, label, selectedColor = selectionElementColors.primaryDark, labelColor = fontColors.light, checkmarkColor = fontColors.dark, style, } = props;
+    const { backgroundColor, borderColor = elementColors.lightGrey, disabled = false, initialValue = false, label, labelPosition = 'right', selectedColor, gradient = gradientsColors[100], labelColor = fontColors.dark, checkmarkColor = '#FFFFFF', style, } = props;
     const [isChecked, setChecked] = React.useState(initialValue);
     const value = props.isChecked !== undefined ? props.isChecked : isChecked;
     const onValueChange = async () => {
@@ -16,6 +22,18 @@ const SSICheckbox = (props) => {
         }
         setChecked(!isChecked);
     };
-    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)] }));
+    const selectedBackground = gradient
+        ? `linear-gradient(172deg, ${gradient.primaryColor} 0%, ${gradient.secondaryColor} 100%)`
+        : selectedColor;
+    return (_jsxs(Container, { onClick: onValueChange, style: {
+            ...style,
+            flexDirection: flexDirectionMap[labelPosition],
+            ...(disabled && { opacity: OpacityStyleEnum.DISABLED, cursor: 'not-allowed' }),
+        }, role: "checkbox", "aria-checked": value, tabIndex: 0, onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onValueChange();
+            }
+        }, children: [value ? (_jsx(SelectedContainer, { style: { background: selectedBackground, border: 'none' }, children: _jsx("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1 5L4.5 8.5L11 1.5", stroke: checkmarkColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) : (_jsx(UnselectedContainer, { style: { backgroundColor, border: `2px 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

@@ -1,11 +1,14 @@
 import { CSSProperties, FC } from 'react';
 type Props = {
+    label?: string;
+    placeholder?: string;
+    type?: 'text' | 'password' | 'email';
     initialValue?: string;
     value?: string;
     onChangeValue?: (value: string) => Promise<void>;
-    placeholder?: string;
+    onChange?: (value: string) => void;
     maxLength?: number;
-    label?: string;
+    disabled?: boolean;
     style?: CSSProperties;
 };
 declare const TextInputField: FC<Props>;

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

@@ -1,20 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
-import { TextFieldInputContainerStyled as Container, TextFieldInputInputStyled as Input, SSITextH2Styled as Label } from '../../../styles';
+import { useState } from 'react';
+import { TextFieldInputContainerStyled as Container, TextFieldInputWrapperStyled as Wrapper, TextFieldInputInputStyled as Input, TextFieldInputLabelStyled as Label, } from '../../../styles';
 const TextInputField = (props) => {
-    const { initialValue, label, placeholder, maxLength, onChangeValue, style } = props;
-    const [value, setValue] = React.useState(initialValue);
-    const [isFocused, setIsFocused] = useState(false);
-    const onChange = async (event) => {
-        setValue(event.target.value);
-        await onChangeValue?.(event.target.value);
+    const { label, placeholder, type = 'text', initialValue, maxLength, onChangeValue, onChange, disabled = false, style } = props;
+    const isControlled = props.value !== undefined;
+    const [internalValue, setInternalValue] = useState(initialValue ?? '');
+    const currentValue = isControlled ? props.value : internalValue;
+    const handleChange = async (event) => {
+        const newValue = event.target.value;
+        if (!isControlled) {
+            setInternalValue(newValue);
+        }
+        onChange?.(newValue);
+        await onChangeValue?.(newValue);
     };
-    const onFocus = () => {
-        setIsFocused(true);
-    };
-    const onBlur = () => {
-        setIsFocused(false);
-    };
-    return (_jsxs(Container, { style: { ...style }, children: [label && _jsx(Label, { children: label }), _jsx(Input, { onChange: onChange, value: value, placeholder: isFocused ? '' : placeholder, type: 'text', onFocus: onFocus, onBlur: onBlur, maxLength: maxLength })] }));
+    return (_jsx(Container, { style: { ...style }, children: _jsxs(Wrapper, { children: [_jsx(Input, { type: type, value: currentValue, onChange: handleChange, placeholder: placeholder, maxLength: maxLength, disabled: disabled }), label && _jsx(Label, { children: label })] }) }));
 };
 export default TextInputField;

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

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

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

@@ -1,7 +1,7 @@
 import { CSSProperties, ReactElement } from 'react';
 import { JsonFormsCellRendererRegistryEntry, JsonFormsRendererRegistryEntry, JsonSchema, Middleware, UISchemaElement, ValidationMode } from '@jsonforms/core';
-import { JSONFormState } from '../../../types';
 import Ajv from 'ajv';
+import { JSONFormState } from '../../../types';
 type Props<DataType = Record<any, any>> = {
     schema: JsonSchema;
     uiSchema: UISchemaElement;

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

@@ -1,33 +1,37 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { JsonForms } from '@jsonforms/react';
 import { materialCells } from '@jsonforms/material-renderers';
-import { jsonFormsMaterialRenderers } from '../../../renders/jsonFormsRenders';
 import Ajv from 'ajv';
-import addFormats from "ajv-formats";
+import addFormats from 'ajv-formats';
 import { formatDate } from '../../../helpers';
-const defaultAjv = new Ajv({ useDefaults: true });
-addFormats(defaultAjv);
-defaultAjv.addKeyword({
-    keyword: 'isoDateFormat',
-    modifying: true,
-    validate: (schema, data, parentSchema, dataCxt) => {
-        if (typeof data === 'string') {
-            if (!dataCxt?.parentData || dataCxt.parentDataProperty === undefined) {
-                return true;
-            }
-            const formatted = formatDate(data, schema);
-            if (formatted && formatted !== 'Invalid date') {
-                dataCxt.parentData[dataCxt.parentDataProperty] = formatted;
-            }
+import { createFormViewAjv } from '../../../utils/Ajv';
+import { jsonFormsMaterialRenderers } from '../../../renders/jsonFormsRenders';
+const dateFormatValidator = (dateFormat, data, parentSchema, dataCxt) => {
+    if (typeof data === 'string') {
+        if (!dataCxt?.parentData || dataCxt.parentDataProperty === undefined) {
             return true;
         }
-        return false;
+        const formatted = formatDate(data, dateFormat);
+        if (formatted && formatted !== 'Invalid date') {
+            dataCxt.parentData[dataCxt.parentDataProperty] = formatted;
+        }
+        return true;
     }
-});
+    return false;
+};
+const defaultAjv = new Ajv({ useDefaults: true });
+addFormats(defaultAjv);
+defaultAjv.addKeyword({ keyword: 'dateFormat', modifying: true, validate: dateFormatValidator });
+defaultAjv.addKeyword({ keyword: 'isoDateFormat', modifying: true, validate: dateFormatValidator });
 const FormView = (props) => {
-    const { schema, uiSchema, validationMode = 'ValidateAndShow', renderers = jsonFormsMaterialRenderers, cells = materialCells, style, middleware, ajv = defaultAjv, onFormStateChange, readonly = false, config, } = props;
+    const { schema, uiSchema, validationMode = 'ValidateAndShow', renderers = jsonFormsMaterialRenderers, cells = materialCells, style, middleware, onFormStateChange, readonly = false, config, } = props;
     const [data, setData] = useState(props.data);
+    const ajvRef = useRef(null);
+    if (!ajvRef.current) {
+        ajvRef.current = props.ajv ?? createFormViewAjv();
+    }
+    const ajv = ajvRef.current;
     useEffect(() => {
         const validate = ajv.compile(schema);
         const data = props.data;
@@ -37,4 +41,4 @@ const FormView = (props) => {
     return (_jsx("div", { style: style, children: _jsx(JsonForms, { schema: schema, uischema: uiSchema, data: data, renderers: renderers, cells: cells, onChange: onFormStateChange, validationMode: validationMode, middleware: middleware, ajv: ajv, readonly: readonly, config: config }) }));
 };
 export default FormView;
-export const getFormViewAjv = () => defaultAjv;
+export const getFormViewAjv = () => createFormViewAjv();

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

@@ -18,7 +18,6 @@
 
 .MuiFormControl-root {
     padding: 0 !important;
-
 }
 
 .MuiCardContent-root {
@@ -114,3 +113,7 @@ textarea.MuiInputBase-input.MuiInputBase-inputMultiline {
 .MuiFormControlLabel-root {
     height: fit-content;
 }
+
+.MuiGrid-root {
+    flex: 1 !important;
+}

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

@@ -1,12 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTitleContainerStyled as TitleContainer, SSITabViewHeaderTitleCaptionStyled as TitleCaption, } from '../../../../styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTabBarStyled as TabBar, SSITabViewHeaderTitleContainerStyled as TitleContainer, SSITabViewHeaderTitleCaptionStyled as TitleCaption, SSITabViewHeaderActiveIndicatorStyled as ActiveIndicator, SSITabViewHeaderDividerStyled as Divider, } from '../../../../styles';
 const SSITabViewHeader = (props) => {
     const { navigationState, onRouteChange } = props;
-    return (_jsx(Container, { children: navigationState.routes.map((value) => {
-            const isActiveRoute = value.key === navigationState.activeRoute;
-            return (_jsx(TitleContainer, { onClick: () => onRouteChange(value.key), style: {
-                    ...(isActiveRoute && { borderBottom: `2px solid #7276F7`, alignSelf: 'stretch' }),
-                }, children: _jsx(TitleCaption, { style: { fontWeight: !isActiveRoute ? '400' : '600' }, children: value.title }) }, value.key));
-        }) }));
+    return (_jsxs(Container, { role: "tablist", children: [_jsx(TabBar, { children: navigationState.routes.map((value) => {
+                    const isActiveRoute = value.key === navigationState.activeRoute;
+                    return (_jsxs(TitleContainer, { onClick: () => onRouteChange(value.key), role: "tab", "aria-selected": isActiveRoute, children: [_jsx(TitleCaption, { style: { fontWeight: isActiveRoute ? 600 : 400 }, children: value.title }), isActiveRoute && _jsx(ActiveIndicator, {})] }, value.key));
+                }) }), _jsx(Divider, {})] }));
 };
 export default SSITabViewHeader;

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

@@ -1,7 +1,11 @@
-import { FC } from 'react';
-import { TabViewRoute } from '@sphereon/ui-components.core';
+import { FC, ReactNode } from 'react';
+type SSITabViewRoute = {
+    key: string;
+    title: string;
+    content: ReactNode;
+};
 type Props = {
-    routes: Array<TabViewRoute>;
+    routes: Array<SSITabViewRoute>;
     activeRoute?: string;
     onRouteChange?: (key: string) => Promise<void>;
 };

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

@@ -1,28 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useEffect, useState } from 'react';
+import { useState } from 'react';
 import SSITabViewHeader from './SSITabViewHeader';
 import { SSITabViewContainerStyled as Container } from '../../../styles';
-const Tab = (props) => {
-    return _jsx(Fragment, { children: props.children });
-};
 const SSITabView = (props) => {
     const { routes = [] } = props;
-    const [activeRoute, setActiveRoute] = useState(props.activeRoute ?? routes.length > 0 ? routes[0].key : "");
-    const [content, setContent] = useState();
-    useEffect(() => {
-        routes.forEach((route) => {
-            if (route.key === activeRoute) {
-                setContent(route.content);
-            }
-        });
-    }, [routes, activeRoute]);
+    const [activeRoute, setActiveRoute] = useState(props.activeRoute ?? (routes.length > 0 ? routes[0].key : ''));
+    const activeContent = routes.find((route) => route.key === activeRoute)?.content;
     const onRouteChange = async (key) => {
         setActiveRoute(key);
         props.onRouteChange?.(key);
     };
-    return (_jsxs(Container, { children: [_jsx(SSITabViewHeader, { navigationState: {
-                    routes,
-                    activeRoute,
-                }, onRouteChange: onRouteChange }), _jsx(Tab, { children: content })] }));
+    return (_jsxs(Container, { children: [_jsx(SSITabViewHeader, { navigationState: { routes, activeRoute }, onRouteChange: onRouteChange }), _jsx("div", { role: "tabpanel", children: activeContent })] }));
 };
 export default SSITabView;

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

@@ -80,17 +80,13 @@ const SSITableView = (props) => {
         availableColumns = [
             {
                 id: 'select',
-                header: ({ table }) => (_jsx(IndeterminateCheckbox, { ...{
-                        checked: table.getIsAllRowsSelected(),
-                        indeterminate: table.getIsSomeRowsSelected(),
-                        onChange: table.getToggleAllRowsSelectedHandler(),
-                    } })),
-                cell: ({ row }) => (_jsx(RowSelectionCheckboxContainer, { children: (row.id === focusedRowId || rowSelection.length > 0) && (_jsx(IndeterminateCheckbox, { ...{
-                            checked: row.getIsSelected(),
-                            disabled: !row.getCanSelect(),
-                            indeterminate: row.getIsSomeSelected(),
-                            onChange: row.getToggleSelectedHandler(),
-                        } })) })),
+                header: ({ table }) => (_jsx(IndeterminateCheckbox, { checked: table.getIsAllRowsSelected(),
+                    indeterminate: table.getIsSomeRowsSelected(),
+                    onChange: table.getToggleAllRowsSelectedHandler() })),
+                cell: ({ row }) => (_jsx(RowSelectionCheckboxContainer, { children: (row.id === focusedRowId || rowSelection.length > 0) && (_jsx(IndeterminateCheckbox, { checked: row.getIsSelected(),
+                        disabled: !row.getCanSelect(),
+                        indeterminate: row.getIsSomeSelected(),
+                        onChange: row.getToggleSelectedHandler() })) })),
             },
             ...availableColumns,
         ];

package/dist/helpers/DateHelper/index.d.ts

@@ -1,3 +1,3 @@
-export type DateFormat = 'date-time' | 'date' | 'time' | undefined;
-export declare const formatDate: (dateString?: string, format?: DateFormat) => string;
+export type DateFormat = 'date-time' | 'date' | 'time' | 'iso-date-time' | 'iso-date' | 'iso-time' | undefined;
+export declare const formatDate: (dateString?: string, format?: DateFormat | string) => string;
 export declare const formatDateToISO: (dateString?: string, format?: DateFormat) => string;

package/dist/helpers/DateHelper/index.js

@@ -1,45 +1,100 @@
+const KNOWN_FORMATS = new Set(['date-time', 'date', 'time', 'iso-date-time', 'iso-date', 'iso-time']);
+const customFormatTokens = {
+    yyyy: (date) => date.getFullYear().toString().padStart(4, '0'),
+    yy: (date) => date.getFullYear().toString().slice(-2).padStart(2, '0'),
+    MM: (date) => (date.getMonth() + 1).toString().padStart(2, '0'),
+    M: (date) => (date.getMonth() + 1).toString(),
+    dd: (date) => date.getDate().toString().padStart(2, '0'),
+    d: (date) => date.getDate().toString(),
+    HH: (date) => date.getHours().toString().padStart(2, '0'),
+    H: (date) => date.getHours().toString(),
+    mm: (date) => date.getMinutes().toString().padStart(2, '0'),
+    m: (date) => date.getMinutes().toString(),
+    ss: (date) => date.getSeconds().toString().padStart(2, '0'),
+    s: (date) => date.getSeconds().toString(),
+};
+const orderedTokens = ['yyyy', 'yy', 'MM', 'dd', 'HH', 'mm', 'ss', 'M', 'd', 'H', 'm', 's'];
+const applyCustomFormat = (date, format) => {
+    let result = '';
+    let i = 0;
+    while (i < format.length) {
+        const char = format[i];
+        if (char === '[') {
+            const closeIdx = format.indexOf(']', i + 1);
+            if (closeIdx !== -1) {
+                result += format.slice(i + 1, closeIdx);
+                i = closeIdx + 1;
+                continue;
+            }
+            else {
+                result += char;
+                i += 1;
+                continue;
+            }
+        }
+        const token = orderedTokens.find((t) => format.startsWith(t, i));
+        if (token) {
+            result += customFormatTokens[token](date);
+            i += token.length;
+        }
+        else {
+            result += char;
+            i += 1;
+        }
+    }
+    return result;
+};
 export const formatDate = (dateString, format = 'date-time') => {
-    const userDateTimeOpts = Intl.DateTimeFormat().resolvedOptions();
     if (!dateString) {
         return '';
     }
-    const date = dateString === 'now' ? new Date() : new Date(dateString);
+    let dateToParse = dateString;
+    if (/^\d{4}-\d{2}-\d{2}$/.test(dateString)) {
+        dateToParse += 'T00:00:00';
+    }
+    const date = dateString === 'now' ? new Date() : new Date(dateToParse);
     if (isNaN(date.getTime())) {
         console.error('Invalid date:', dateString);
         return 'Invalid date';
     }
+    const effectiveFormat = format ?? 'date-time';
+    if (effectiveFormat === 'iso-date-time')
+        return applyCustomFormat(date, 'yyyy-MM-ddTHH:mm:ss');
+    if (effectiveFormat === 'iso-date')
+        return applyCustomFormat(date, 'yyyy-MM-dd');
+    if (effectiveFormat === 'iso-time')
+        return applyCustomFormat(date, 'HH:mm:ss');
+    if (!KNOWN_FORMATS.has(effectiveFormat)) {
+        return applyCustomFormat(date, effectiveFormat);
+    }
+    const userDateTimeOpts = Intl.DateTimeFormat().resolvedOptions();
     const formatOptions = {
         timeZone: userDateTimeOpts.timeZone,
     };
-    if (format === 'date-time') {
+    if (effectiveFormat === 'date-time') {
         formatOptions.dateStyle = 'short';
         formatOptions.timeStyle = 'short';
     }
-    else if (format === 'date') {
+    else if (effectiveFormat === 'date') {
         formatOptions.dateStyle = 'short';
     }
-    else if (format === 'time') {
+    else if (effectiveFormat === 'time') {
         formatOptions.timeStyle = 'short';
     }
-    return new Intl.DateTimeFormat(userDateTimeOpts.locale, formatOptions).format(date);
-};
-export const formatDateToISO = (dateString, format = 'date-time') => {
-    if (!dateString) {
-        return '';
-    }
-    const date = dateString === 'now' ? new Date() : new Date(dateString);
-    if (isNaN(date.getTime())) {
-        console.error('Invalid date:', dateString);
-        return 'Invalid date';
+    try {
+        return new Intl.DateTimeFormat(userDateTimeOpts.locale, formatOptions).format(date);
     }
-    const isoString = date.toISOString();
-    if (format === 'date-time') {
-        return isoString.slice(0, 19).replace('T', ' ');
-    }
-    else if (format === 'date') {
-        return isoString.slice(0, 10);
-    }
-    else {
-        return isoString.slice(11, 19);
+    catch (error) {
+        console.error('Intl formatting error', error);
+        return date.toString();
     }
 };
+export const formatDateToISO = (dateString, format = 'date-time') => {
+    if (format === 'date-time')
+        return formatDate(dateString, 'iso-date-time');
+    if (format === 'date')
+        return formatDate(dateString, 'iso-date');
+    if (format === 'time')
+        return formatDate(dateString, 'iso-time');
+    return formatDate(dateString, format);
+};