@obolnetwork/obol-ui 1.0.19-0 → 1.0.20

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

@@ -29,3 +29,4 @@ export * from "./static-icons/CheckIcon";
 export * from "./static-icons/TrashIcon";
 export * from "./static-icons/BulletCheckIcon";
 export * from "./static-icons/HelpIcon";
+export * from "./static-icons/WaitingIcon";

package/dist/components/icons/static-icons/WaitingIcon.d.ts

@@ -0,0 +1 @@
+export declare const WaitingIcon: () => JSX.Element;

package/dist/components/molecules/Table/Table.d.ts

@@ -1,32 +1,32 @@
 /// <reference types="react" />
-export interface RowItem {
+export declare type RowDef<T> = {
     id: string;
-    value: string;
-}
-export declare type RowTableType = Record<string, string | React.ReactNode>;
-export declare type RowsTableType = RowItem[];
+    isRemovable?: boolean;
+    isEditable?: boolean;
+} & T;
 export declare type CellDef = {
-    component: "TextField" | "NumberField";
+    component: "TextField";
     config?: {
         type: "text" | "number";
         max?: number;
         min?: number;
+        totalCell?: boolean;
     };
 };
 export declare type ColumnDef<T> = {
     accessorKey: keyof T;
-    header: string;
+    header: string | React.ReactNode;
     cell?: CellDef;
 };
 export interface TableProps {
-    rows: any[];
+    rows: RowDef<any>[];
     columns: ColumnDef<any>[];
 }
 export interface SplitterTableProps extends TableProps {
-    onAddRow(item?: unknown): void;
-    onRemoveRow(item: string | number): void;
-    onUpdateRow(id: string, value: string | number, accessorKey: unknown): void;
-    removeButton?: boolean;
+    onAddRow?(item?: unknown): void;
+    onRemoveRow?(item: string | number): void;
+    onUpdateRow?(id: string, value: string | number, accessorKey: unknown): void;
+    totalSplitFooter?: number;
 }
 export declare const SplitterTable: React.FC<SplitterTableProps>;
 export declare const Table: React.FC<TableProps>;

package/dist/index.es.js

@@ -1102,6 +1102,8 @@ var BulletCheckIcon = function () { return (jsxs("svg", __assign({ width: "24",
 
 var HelpIcon = function () { return (jsx("svg", __assign({ width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsx("path", { d: "M11.5 18H13.5V16H11.5V18ZM12.5 2C6.98 2 2.5 6.48 2.5 12C2.5 17.52 6.98 22 12.5 22C18.02 22 22.5 17.52 22.5 12C22.5 6.48 18.02 2 12.5 2ZM12.5 20C8.09 20 4.5 16.41 4.5 12C4.5 7.59 8.09 4 12.5 4C16.91 4 20.5 7.59 20.5 12C20.5 16.41 16.91 20 12.5 20ZM12.5 6C10.29 6 8.5 7.79 8.5 10H10.5C10.5 8.9 11.4 8 12.5 8C13.6 8 14.5 8.9 14.5 10C14.5 12 11.5 11.75 11.5 15H13.5C13.5 12.75 16.5 12.5 16.5 10C16.5 7.79 14.71 6 12.5 6Z", fill: "#9CC2C9" }) }))); };
 
+var WaitingIcon = function () { return (jsxs("svg", __assign({ width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("rect", { x: "0.5", width: "24", height: "24", rx: "12", fill: "#243D42" }), jsx("path", { d: "M12.5 0C5.9 0 0.5 5.4 0.5 12C0.5 18.6 5.9 24 12.5 24C19.1 24 24.5 18.6 24.5 12C24.5 5.4 19.1 0 12.5 0ZM12.5 21.6C7.208 21.6 2.9 17.292 2.9 12C2.9 6.708 7.208 2.4 12.5 2.4C17.792 2.4 22.1 6.708 22.1 12C22.1 17.292 17.792 21.6 12.5 21.6ZM13.1 6H11.3V13.2L17.54 17.04L18.5 15.48L13.1 12.24V6Z", fill: "#475E64" })] }))); };
+
 var TeamMemberCard = function (props) { return (jsxs(Box, __assign({ css: {
         display: "grid",
         gridTemplateColumns: "1fr",
@@ -1725,9 +1727,15 @@ var NotificationCard = function (_a) {
 
 var ProgressTracker = function (_a) {
     var items = _a.items;
-    var count = items.filter(function (item) { return item.status === "complete"; }).length;
-    var offset = 100 / items.length / 2;
-    var width = (100 / items.length) * count + offset;
+    var _b = useState(items), steps = _b[0], setSteps = _b[1];
+    var _c = useState(0), width = _c[0], setWidth = _c[1];
+    useEffect(function () {
+        var _count = items.filter(function (item) { return item.status === "complete"; }).length;
+        var offset = 100 / items.length / 2;
+        var width = (100 / items.length) * _count + offset;
+        setWidth(width);
+        setSteps(items);
+    }, [items]);
     return (jsx(Box, __assign({ css: { backgroundColor: "$bg02", py: "$3xl", px: "$6xl" } }, { children: jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$md" } }, { children: [jsx(Box, __assign({ className: "progress-bar-behind", css: {
                         height: "$xxs",
                         borderRadius: "$3",
@@ -1771,8 +1779,8 @@ var ProgressTracker = function (_a) {
                                     },
                                 } })] })) })), jsx(Box, __assign({ className: "link-items", css: {
                         display: "grid",
-                        gridTemplateColumns: "repeat(".concat(items.length || 1, ", 1fr)"),
-                    } }, { children: items.map(function (item, index) { return (jsx(Link, __assign({ disabled: item.status === "incomplete", href: item.status === "incomplete" ? "#" : item.href, css: {
+                        gridTemplateColumns: "repeat(".concat(steps.length || 1, ", 1fr)"),
+                    } }, { children: steps.map(function (item, index) { return (jsx(Link, __assign({ disabled: item.status === "incomplete", href: item.href, css: {
                             display: "flex",
                             justifyContent: "center",
                             alignItems: "center",
@@ -1853,9 +1861,8 @@ var StyledTable = styled("table", {
 });
 var Td = styled("td", {
     border: "2px solid $bg04",
-    py: 0,
+    py: "$sm",
     px: "$sm",
-    textAlign: "center",
     color: "$body",
     fontWeight: "$bold",
     fontSize: "$4",
@@ -1865,9 +1872,10 @@ var Td = styled("td", {
         width: "100%",
     },
     variants: {
-        noPadding: {
+        splitter: {
             true: {
-                p: 0,
+                py: 0,
+                px: 0,
                 backgroundColor: "$bg03",
             },
         },
@@ -1876,6 +1884,11 @@ var Td = styled("td", {
                 width: "$3xl",
             },
         },
+        textCenter: {
+            true: {
+                textAlign: "center",
+            },
+        },
     },
 });
 var Th = styled("th", {
@@ -1897,56 +1910,83 @@ var BoxBorderTop = styled(Box, {
     borderTop: "2px solid $bg04",
     marginTop: "$2",
     height: "$3xl",
+    display: "flex",
+    alignItems: "center",
+    px: "$sm",
 });
-var AddNewRow = function (props) {
-    return (jsxs(Tr, { children: [jsx(Td, __assign({ noPadding: true }, { children: jsx(BoxBorderTop, { children: "" }) })), jsx(Td, __assign({ noPadding: true, css: { backgroundColor: "$bg03" } }, { children: jsx(BoxBorderTop, { children: jsx(Button, __assign({ type: "button", css: {
+var AddNewRow = function (_a) {
+    var onAddRow = _a.onAddRow, totalSplitFooter = _a.totalSplitFooter;
+    return (jsxs(Tr, { children: [jsx(Td, __assign({ splitter: true }, { children: jsx(BoxBorderTop, {}) })), jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsx(BoxBorderTop, { children: onAddRow && (jsx(Button, __assign({ type: "button", css: {
                             color: "$obolGreen",
                             justifyContent: "start",
                             borderRadius: 0,
                             "&:hover": {
                                 backgroundColor: "#2FE4AB10",
                             },
-                        }, fullWidth: true, ghost: true, onClick: props.handleOnClick }, { children: "+ Add Signer" })) }) })), jsx(Td, __assign({ noPadding: true, css: { backgroundColor: "$bg03" } }, { children: jsx(BoxBorderTop, {}) }))] }));
+                            "&:disabled": {
+                                borderColor: "transparent",
+                            },
+                        }, fullWidth: true, ghost: true, onClick: function (e) {
+                            e.preventDefault();
+                            onAddRow();
+                        }, disabled: totalSplitFooter === 100 }, { children: "+ Add Signer" }))) }) })), jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsx(BoxBorderTop, { children: jsx(Box, { children: totalSplitFooter && "".concat(totalSplitFooter, "%") }) }) }))] }));
 };
-// Components
 var SplitterTable = function (_a) {
-    var rows = _a.rows, columns = _a.columns, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow, _b = _a.removeButton, removeButton = _b === void 0 ? true : _b;
-    return (jsxs(StyledTable, { children: [jsx("thead", { children: jsxs("tr", { children: [jsx(Th, {}), columns.map(function (column, index) { return (jsx(Th, __assign({ css: { textAlign: "start" } }, { children: column.header }), "header-".concat(index))); }), jsx(Th, {})] }) }), jsxs("tbody", { children: [rows.map(function (row, rowIndex) { return (jsxs("tr", { children: [jsx(Td, __assign({ size: "sm" }, { children: rowIndex + 1 })), columns.map(function (column, cellIndex) {
-                                var _a;
-                                var isTextField = !!column.cell;
-                                return (jsx(Td, __assign({ noPadding: true, css: {
-                                        "input::-webkit-inner-spin-button": {
-                                            "-webkit-appearance": "none",
-                                            margin: 0,
-                                        },
-                                        /* Firefox */
-                                        "input[type=number]": {
-                                            "-moz-appearance": "textfield",
-                                        },
-                                    } }, { children: isTextField ? (jsx(TextField, __assign({ defaultValue: row[column.accessorKey], onInput: function (e) {
-                                            var _a, _b, _c, _d, _e, _f, _g, _h;
-                                            if (((_b = (_a = column.cell) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.type) === "number") {
-                                                if ((_d = (_c = column.cell) === null || _c === void 0 ? void 0 : _c.config) === null || _d === void 0 ? void 0 : _d.max) {
-                                                    if (Number(e.target.value) > ((_f = (_e = column.cell) === null || _e === void 0 ? void 0 : _e.config) === null || _f === void 0 ? void 0 : _f.max))
-                                                        e.target.value = (_h = (_g = column.cell) === null || _g === void 0 ? void 0 : _g.config) === null || _h === void 0 ? void 0 : _h.max;
+    var rows = _a.rows, columns = _a.columns, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow, _b = _a.totalSplitFooter, totalSplitFooter = _b === void 0 ? 100 : _b;
+    return (jsxs(StyledTable, { children: [jsx("thead", { children: jsxs("tr", { children: [jsx(Th, {}), columns.map(function (column, index) { return (jsx(Th, __assign({ css: { textAlign: "start" } }, { children: column.header }), "header-".concat(index))); }), jsx(Th, {})] }) }), jsxs("tbody", { children: [rows.map(function (_a, rowIndex) {
+                        var _b = _a.isRemovable, isRemovable = _b === void 0 ? true : _b, _c = _a.isEditable, isEditable = _c === void 0 ? true : _c, row = __rest(_a, ["isRemovable", "isEditable"]);
+                        return (jsxs("tr", { children: [jsx(Td, __assign({ textCenter: true, size: "sm" }, { children: rowIndex + 1 })), columns.map(function (column, cellIndex) {
+                                    var _a, _b;
+                                    var isTextField = ((_a = column.cell) === null || _a === void 0 ? void 0 : _a.component) === "TextField";
+                                    return (jsx(Td, __assign({ splitter: true, css: {
+                                            "input::-webkit-inner-spin-button": {
+                                                "-webkit-appearance": "none",
+                                                margin: 0,
+                                            },
+                                            /* Firefox */
+                                            "input[type=number]": {
+                                                "-moz-appearance": "textfield",
+                                            },
+                                        } }, { children: isTextField && (jsx(TextField, __assign({ css: { color: "$body", fontWeight: "$bold" }, defaultValue: row[column.accessorKey], step: "any", onInput: function (e) {
+                                                var _a, _b, _c, _d;
+                                                var inputValue = e.target.value === ""
+                                                    ? 0
+                                                    : parseFloat(e.target.value);
+                                                if (((_b = (_a = column.cell) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.type) === "number") {
+                                                    if ((_d = (_c = column.cell) === null || _c === void 0 ? void 0 : _c.config) === null || _d === void 0 ? void 0 : _d.totalCell) {
+                                                        var value = rows.reduce(function (prev, curr, indx) {
+                                                            var floatNumber = parseFloat(curr[column.accessorKey]);
+                                                            var parsedValue = isNaN(floatNumber)
+                                                                ? 0
+                                                                : floatNumber;
+                                                            return curr[column.accessorKey] &&
+                                                                indx !== rowIndex
+                                                                ? parsedValue + prev
+                                                                : prev;
+                                                        }, 0);
+                                                        var maxValue = 100 - value;
+                                                        if (inputValue > maxValue)
+                                                            e.target.value = maxValue.toFixed(2);
+                                                    }
                                                 }
-                                            }
-                                        }, onChange: function (e) {
-                                            var _a, _b;
-                                            var value = ((_b = (_a = column.cell) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.type) === "number"
-                                                ? Number(e.target.value)
-                                                : e.target.value;
-                                            onUpdateRow(row.id, value, column.accessorKey);
-                                        } }, (_a = column.cell) === null || _a === void 0 ? void 0 : _a.config))) : (row[column.accessorKey]) }), "cell ".concat(cellIndex)));
-                            }), removeButton && (jsx(Td, __assign({ size: "sm" }, { children: jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsx(TrashIcon, {}) })) })))] }, row.id)); }), jsx(AddNewRow, { handleOnClick: function (e) {
-                            e.preventDefault();
-                            onAddRow();
-                        } })] })] }));
+                                            }, onChange: function (e) {
+                                                var _a, _b;
+                                                var inputValue = e.target.value === ""
+                                                    ? 0
+                                                    : parseFloat(e.target.value);
+                                                var value = ((_b = (_a = column.cell) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.type) === "number"
+                                                    ? inputValue.toFixed(2)
+                                                    : e.target.value;
+                                                if (onUpdateRow)
+                                                    onUpdateRow(row.id, value, column.accessorKey);
+                                            } }, (_b = column.cell) === null || _b === void 0 ? void 0 : _b.config, { readOnly: !isEditable }))) }), "cell ".concat(cellIndex)));
+                                }), onRemoveRow && isRemovable && (jsx(Td, __assign({ splitter: true, size: "sm", css: { p: "$2" } }, { children: jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsx(TrashIcon, {}) })) })))] }, row.id));
+                    }), jsx(AddNewRow, { onAddRow: onAddRow, totalSplitFooter: totalSplitFooter })] })] }));
 };
 var Table = function (_a) {
     var rows = _a.rows, columns = _a.columns;
-    return (jsxs(StyledTable, { children: [jsx("thead", { children: columns.map(function (column, index) { return (jsx(Td, { children: column }, "header-".concat(index))); }) }), jsx("tbody", { children: rows.map(function (row, rowIndex) { return (jsx("tr", { children: columns.map(function (column, cellIndex) {
-                        return (jsx(Td, { children: row[column.accessorKey] }, "cell ".concat(cellIndex)));
+    return (jsxs(StyledTable, { children: [jsx("thead", { children: jsx("tr", { children: columns.map(function (column, index) { return (jsx(Th, __assign({ css: { textAlign: "start" } }, { children: column.header }), "header-".concat(index))); }) }) }), jsx("tbody", { children: rows.map(function (row, rowIndex) { return (jsx("tr", { children: columns.map(function (column, cellIndex) {
+                        return (jsx(Td, __assign({ css: { color: "$light" } }, { children: row[column.accessorKey] }), "cell ".concat(cellIndex)));
                     }) }, "row ".concat(rowIndex))); }) })] }));
 };
 
@@ -2154,4 +2194,4 @@ var TwoColumnSection = function (_a) {
                 } }, { children: !screenDownSm ? (jsx(Image, { src: image.basePath, width: "100%", height: "100%", alt: "Obol Logo" })) : (jsx(Image, { src: image.mobilePath || image.basePath, width: "100%", height: "100%", alt: "Obol Logo" })) }))] })));
 };
 
-export { Accordion, Advisory, AdvisoryToggleBullet, AdvisoryToggleItem, AlertIcon, AloneIcon, ArrowForward, Box, BulletCheckIcon, Button, ButtonStory, Card, CheckIcon, ChevronDownIcon, ChevronUpIcon, CloseIcon, CodeIcon, Container, CopyIcon, CreateIcon, Download, ExistingGroupIcon, Flex, Footer, GithubIcon, GroupIcon, HelpIcon, HeroSection, Hexapod, HexapodMobile, IconButton, IconButtonStory, Image, Link, LinkStory, LogoCard, MediaQueryKeys, MenuIcon, MigrateIcon, Navbar, NotificationCard, NotificationContainer, NumberField, ObolDarkBgH, ObolDarkBgMark, ObolDarkBgV, ObolDarkCircle, ObolLightBgH, ObolLightBgMark, ObolLightBgV, ObolLightCircle, ObolSolidDarkBgH, ObolSolidDarkBgMark, ObolSolidDarkBgV, ObolSolidLightBgH, ObolSolidLightBgMark, ObolSolidLightBgV, OpenInNew, PlanetBlue, PlanetGreen, PlanetGrey, PlanetMagenta, PlanetOrange, ProgressTracker, Provider, PublicGoodIcon, RadioGroup, RadioGroupComponent, RadioGroupIndicator, RadioGroupItem, RadioGroupItemLabel, RadioGroupRadio, RunIcon, Spin, SplitterTable, SvgIcon, Table, Tabs$1 as Tabs, TeamMemberCard, TestIcon, Text, TextField, TextFieldWithCopy, TextStory, ToggleCardItem, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipComponent, TooltipContent, TooltipTrigger, TrashIcon, TrustMinimisedIcon, TwitterIcon, TwoColumnSection, config, createTheme, css, getCssText, globalCss, keyframes, modifyVariantsForStory, reset, styled, theme, useMediaQuery };
+export { Accordion, Advisory, AdvisoryToggleBullet, AdvisoryToggleItem, AlertIcon, AloneIcon, ArrowForward, Box, BulletCheckIcon, Button, ButtonStory, Card, CheckIcon, ChevronDownIcon, ChevronUpIcon, CloseIcon, CodeIcon, Container, CopyIcon, CreateIcon, Download, ExistingGroupIcon, Flex, Footer, GithubIcon, GroupIcon, HelpIcon, HeroSection, Hexapod, HexapodMobile, IconButton, IconButtonStory, Image, Link, LinkStory, LogoCard, MediaQueryKeys, MenuIcon, MigrateIcon, Navbar, NotificationCard, NotificationContainer, NumberField, ObolDarkBgH, ObolDarkBgMark, ObolDarkBgV, ObolDarkCircle, ObolLightBgH, ObolLightBgMark, ObolLightBgV, ObolLightCircle, ObolSolidDarkBgH, ObolSolidDarkBgMark, ObolSolidDarkBgV, ObolSolidLightBgH, ObolSolidLightBgMark, ObolSolidLightBgV, OpenInNew, PlanetBlue, PlanetGreen, PlanetGrey, PlanetMagenta, PlanetOrange, ProgressTracker, Provider, PublicGoodIcon, RadioGroup, RadioGroupComponent, RadioGroupIndicator, RadioGroupItem, RadioGroupItemLabel, RadioGroupRadio, RunIcon, Spin, SplitterTable, SvgIcon, Table, Tabs$1 as Tabs, TeamMemberCard, TestIcon, Text, TextField, TextFieldWithCopy, TextStory, ToggleCardItem, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipComponent, TooltipContent, TooltipTrigger, TrashIcon, TrustMinimisedIcon, TwitterIcon, TwoColumnSection, WaitingIcon, config, createTheme, css, getCssText, globalCss, keyframes, modifyVariantsForStory, reset, styled, theme, useMediaQuery };

package/dist/index.js

@@ -1133,6 +1133,8 @@ var BulletCheckIcon = function () { return (jsxRuntime.jsxs("svg", __assign({ wi
 
 var HelpIcon = function () { return (jsxRuntime.jsx("svg", __assign({ width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.jsx("path", { d: "M11.5 18H13.5V16H11.5V18ZM12.5 2C6.98 2 2.5 6.48 2.5 12C2.5 17.52 6.98 22 12.5 22C18.02 22 22.5 17.52 22.5 12C22.5 6.48 18.02 2 12.5 2ZM12.5 20C8.09 20 4.5 16.41 4.5 12C4.5 7.59 8.09 4 12.5 4C16.91 4 20.5 7.59 20.5 12C20.5 16.41 16.91 20 12.5 20ZM12.5 6C10.29 6 8.5 7.79 8.5 10H10.5C10.5 8.9 11.4 8 12.5 8C13.6 8 14.5 8.9 14.5 10C14.5 12 11.5 11.75 11.5 15H13.5C13.5 12.75 16.5 12.5 16.5 10C16.5 7.79 14.71 6 12.5 6Z", fill: "#9CC2C9" }) }))); };
 
+var WaitingIcon = function () { return (jsxRuntime.jsxs("svg", __assign({ width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("rect", { x: "0.5", width: "24", height: "24", rx: "12", fill: "#243D42" }), jsxRuntime.jsx("path", { d: "M12.5 0C5.9 0 0.5 5.4 0.5 12C0.5 18.6 5.9 24 12.5 24C19.1 24 24.5 18.6 24.5 12C24.5 5.4 19.1 0 12.5 0ZM12.5 21.6C7.208 21.6 2.9 17.292 2.9 12C2.9 6.708 7.208 2.4 12.5 2.4C17.792 2.4 22.1 6.708 22.1 12C22.1 17.292 17.792 21.6 12.5 21.6ZM13.1 6H11.3V13.2L17.54 17.04L18.5 15.48L13.1 12.24V6Z", fill: "#475E64" })] }))); };
+
 var TeamMemberCard = function (props) { return (jsxRuntime.jsxs(Box, __assign({ css: {
         display: "grid",
         gridTemplateColumns: "1fr",
@@ -1756,9 +1758,15 @@ var NotificationCard = function (_a) {
 
 var ProgressTracker = function (_a) {
     var items = _a.items;
-    var count = items.filter(function (item) { return item.status === "complete"; }).length;
-    var offset = 100 / items.length / 2;
-    var width = (100 / items.length) * count + offset;
+    var _b = React.useState(items), steps = _b[0], setSteps = _b[1];
+    var _c = React.useState(0), width = _c[0], setWidth = _c[1];
+    React.useEffect(function () {
+        var _count = items.filter(function (item) { return item.status === "complete"; }).length;
+        var offset = 100 / items.length / 2;
+        var width = (100 / items.length) * _count + offset;
+        setWidth(width);
+        setSteps(items);
+    }, [items]);
     return (jsxRuntime.jsx(Box, __assign({ css: { backgroundColor: "$bg02", py: "$3xl", px: "$6xl" } }, { children: jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$md" } }, { children: [jsxRuntime.jsx(Box, __assign({ className: "progress-bar-behind", css: {
                         height: "$xxs",
                         borderRadius: "$3",
@@ -1802,8 +1810,8 @@ var ProgressTracker = function (_a) {
                                     },
                                 } })] })) })), jsxRuntime.jsx(Box, __assign({ className: "link-items", css: {
                         display: "grid",
-                        gridTemplateColumns: "repeat(".concat(items.length || 1, ", 1fr)"),
-                    } }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(Link, __assign({ disabled: item.status === "incomplete", href: item.status === "incomplete" ? "#" : item.href, css: {
+                        gridTemplateColumns: "repeat(".concat(steps.length || 1, ", 1fr)"),
+                    } }, { children: steps.map(function (item, index) { return (jsxRuntime.jsx(Link, __assign({ disabled: item.status === "incomplete", href: item.href, css: {
                             display: "flex",
                             justifyContent: "center",
                             alignItems: "center",
@@ -1884,9 +1892,8 @@ var StyledTable = styled("table", {
 });
 var Td = styled("td", {
     border: "2px solid $bg04",
-    py: 0,
+    py: "$sm",
     px: "$sm",
-    textAlign: "center",
     color: "$body",
     fontWeight: "$bold",
     fontSize: "$4",
@@ -1896,9 +1903,10 @@ var Td = styled("td", {
         width: "100%",
     },
     variants: {
-        noPadding: {
+        splitter: {
             true: {
-                p: 0,
+                py: 0,
+                px: 0,
                 backgroundColor: "$bg03",
             },
         },
@@ -1907,6 +1915,11 @@ var Td = styled("td", {
                 width: "$3xl",
             },
         },
+        textCenter: {
+            true: {
+                textAlign: "center",
+            },
+        },
     },
 });
 var Th = styled("th", {
@@ -1928,56 +1941,83 @@ var BoxBorderTop = styled(Box, {
     borderTop: "2px solid $bg04",
     marginTop: "$2",
     height: "$3xl",
+    display: "flex",
+    alignItems: "center",
+    px: "$sm",
 });
-var AddNewRow = function (props) {
-    return (jsxRuntime.jsxs(Tr, { children: [jsxRuntime.jsx(Td, __assign({ noPadding: true }, { children: jsxRuntime.jsx(BoxBorderTop, { children: "" }) })), jsxRuntime.jsx(Td, __assign({ noPadding: true, css: { backgroundColor: "$bg03" } }, { children: jsxRuntime.jsx(BoxBorderTop, { children: jsxRuntime.jsx(Button, __assign({ type: "button", css: {
+var AddNewRow = function (_a) {
+    var onAddRow = _a.onAddRow, totalSplitFooter = _a.totalSplitFooter;
+    return (jsxRuntime.jsxs(Tr, { children: [jsxRuntime.jsx(Td, __assign({ splitter: true }, { children: jsxRuntime.jsx(BoxBorderTop, {}) })), jsxRuntime.jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsxRuntime.jsx(BoxBorderTop, { children: onAddRow && (jsxRuntime.jsx(Button, __assign({ type: "button", css: {
                             color: "$obolGreen",
                             justifyContent: "start",
                             borderRadius: 0,
                             "&:hover": {
                                 backgroundColor: "#2FE4AB10",
                             },
-                        }, fullWidth: true, ghost: true, onClick: props.handleOnClick }, { children: "+ Add Signer" })) }) })), jsxRuntime.jsx(Td, __assign({ noPadding: true, css: { backgroundColor: "$bg03" } }, { children: jsxRuntime.jsx(BoxBorderTop, {}) }))] }));
+                            "&:disabled": {
+                                borderColor: "transparent",
+                            },
+                        }, fullWidth: true, ghost: true, onClick: function (e) {
+                            e.preventDefault();
+                            onAddRow();
+                        }, disabled: totalSplitFooter === 100 }, { children: "+ Add Signer" }))) }) })), jsxRuntime.jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsxRuntime.jsx(BoxBorderTop, { children: jsxRuntime.jsx(Box, { children: totalSplitFooter && "".concat(totalSplitFooter, "%") }) }) }))] }));
 };
-// Components
 var SplitterTable = function (_a) {
-    var rows = _a.rows, columns = _a.columns, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow, _b = _a.removeButton, removeButton = _b === void 0 ? true : _b;
-    return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx(Th, {}), columns.map(function (column, index) { return (jsxRuntime.jsx(Th, __assign({ css: { textAlign: "start" } }, { children: column.header }), "header-".concat(index))); }), jsxRuntime.jsx(Th, {})] }) }), jsxRuntime.jsxs("tbody", { children: [rows.map(function (row, rowIndex) { return (jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx(Td, __assign({ size: "sm" }, { children: rowIndex + 1 })), columns.map(function (column, cellIndex) {
-                                var _a;
-                                var isTextField = !!column.cell;
-                                return (jsxRuntime.jsx(Td, __assign({ noPadding: true, css: {
-                                        "input::-webkit-inner-spin-button": {
-                                            "-webkit-appearance": "none",
-                                            margin: 0,
-                                        },
-                                        /* Firefox */
-                                        "input[type=number]": {
-                                            "-moz-appearance": "textfield",
-                                        },
-                                    } }, { children: isTextField ? (jsxRuntime.jsx(TextField, __assign({ defaultValue: row[column.accessorKey], onInput: function (e) {
-                                            var _a, _b, _c, _d, _e, _f, _g, _h;
-                                            if (((_b = (_a = column.cell) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.type) === "number") {
-                                                if ((_d = (_c = column.cell) === null || _c === void 0 ? void 0 : _c.config) === null || _d === void 0 ? void 0 : _d.max) {
-                                                    if (Number(e.target.value) > ((_f = (_e = column.cell) === null || _e === void 0 ? void 0 : _e.config) === null || _f === void 0 ? void 0 : _f.max))
-                                                        e.target.value = (_h = (_g = column.cell) === null || _g === void 0 ? void 0 : _g.config) === null || _h === void 0 ? void 0 : _h.max;
+    var rows = _a.rows, columns = _a.columns, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow, _b = _a.totalSplitFooter, totalSplitFooter = _b === void 0 ? 100 : _b;
+    return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx(Th, {}), columns.map(function (column, index) { return (jsxRuntime.jsx(Th, __assign({ css: { textAlign: "start" } }, { children: column.header }), "header-".concat(index))); }), jsxRuntime.jsx(Th, {})] }) }), jsxRuntime.jsxs("tbody", { children: [rows.map(function (_a, rowIndex) {
+                        var _b = _a.isRemovable, isRemovable = _b === void 0 ? true : _b, _c = _a.isEditable, isEditable = _c === void 0 ? true : _c, row = __rest(_a, ["isRemovable", "isEditable"]);
+                        return (jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx(Td, __assign({ textCenter: true, size: "sm" }, { children: rowIndex + 1 })), columns.map(function (column, cellIndex) {
+                                    var _a, _b;
+                                    var isTextField = ((_a = column.cell) === null || _a === void 0 ? void 0 : _a.component) === "TextField";
+                                    return (jsxRuntime.jsx(Td, __assign({ splitter: true, css: {
+                                            "input::-webkit-inner-spin-button": {
+                                                "-webkit-appearance": "none",
+                                                margin: 0,
+                                            },
+                                            /* Firefox */
+                                            "input[type=number]": {
+                                                "-moz-appearance": "textfield",
+                                            },
+                                        } }, { children: isTextField && (jsxRuntime.jsx(TextField, __assign({ css: { color: "$body", fontWeight: "$bold" }, defaultValue: row[column.accessorKey], step: "any", onInput: function (e) {
+                                                var _a, _b, _c, _d;
+                                                var inputValue = e.target.value === ""
+                                                    ? 0
+                                                    : parseFloat(e.target.value);
+                                                if (((_b = (_a = column.cell) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.type) === "number") {
+                                                    if ((_d = (_c = column.cell) === null || _c === void 0 ? void 0 : _c.config) === null || _d === void 0 ? void 0 : _d.totalCell) {
+                                                        var value = rows.reduce(function (prev, curr, indx) {
+                                                            var floatNumber = parseFloat(curr[column.accessorKey]);
+                                                            var parsedValue = isNaN(floatNumber)
+                                                                ? 0
+                                                                : floatNumber;
+                                                            return curr[column.accessorKey] &&
+                                                                indx !== rowIndex
+                                                                ? parsedValue + prev
+                                                                : prev;
+                                                        }, 0);
+                                                        var maxValue = 100 - value;
+                                                        if (inputValue > maxValue)
+                                                            e.target.value = maxValue.toFixed(2);
+                                                    }
                                                 }
-                                            }
-                                        }, onChange: function (e) {
-                                            var _a, _b;
-                                            var value = ((_b = (_a = column.cell) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.type) === "number"
-                                                ? Number(e.target.value)
-                                                : e.target.value;
-                                            onUpdateRow(row.id, value, column.accessorKey);
-                                        } }, (_a = column.cell) === null || _a === void 0 ? void 0 : _a.config))) : (row[column.accessorKey]) }), "cell ".concat(cellIndex)));
-                            }), removeButton && (jsxRuntime.jsx(Td, __assign({ size: "sm" }, { children: jsxRuntime.jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsxRuntime.jsx(TrashIcon, {}) })) })))] }, row.id)); }), jsxRuntime.jsx(AddNewRow, { handleOnClick: function (e) {
-                            e.preventDefault();
-                            onAddRow();
-                        } })] })] }));
+                                            }, onChange: function (e) {
+                                                var _a, _b;
+                                                var inputValue = e.target.value === ""
+                                                    ? 0
+                                                    : parseFloat(e.target.value);
+                                                var value = ((_b = (_a = column.cell) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.type) === "number"
+                                                    ? inputValue.toFixed(2)
+                                                    : e.target.value;
+                                                if (onUpdateRow)
+                                                    onUpdateRow(row.id, value, column.accessorKey);
+                                            } }, (_b = column.cell) === null || _b === void 0 ? void 0 : _b.config, { readOnly: !isEditable }))) }), "cell ".concat(cellIndex)));
+                                }), onRemoveRow && isRemovable && (jsxRuntime.jsx(Td, __assign({ splitter: true, size: "sm", css: { p: "$2" } }, { children: jsxRuntime.jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsxRuntime.jsx(TrashIcon, {}) })) })))] }, row.id));
+                    }), jsxRuntime.jsx(AddNewRow, { onAddRow: onAddRow, totalSplitFooter: totalSplitFooter })] })] }));
 };
 var Table = function (_a) {
     var rows = _a.rows, columns = _a.columns;
-    return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: columns.map(function (column, index) { return (jsxRuntime.jsx(Td, { children: column }, "header-".concat(index))); }) }), jsxRuntime.jsx("tbody", { children: rows.map(function (row, rowIndex) { return (jsxRuntime.jsx("tr", { children: columns.map(function (column, cellIndex) {
-                        return (jsxRuntime.jsx(Td, { children: row[column.accessorKey] }, "cell ".concat(cellIndex)));
+    return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx("tr", { children: columns.map(function (column, index) { return (jsxRuntime.jsx(Th, __assign({ css: { textAlign: "start" } }, { children: column.header }), "header-".concat(index))); }) }) }), jsxRuntime.jsx("tbody", { children: rows.map(function (row, rowIndex) { return (jsxRuntime.jsx("tr", { children: columns.map(function (column, cellIndex) {
+                        return (jsxRuntime.jsx(Td, __assign({ css: { color: "$light" } }, { children: row[column.accessorKey] }), "cell ".concat(cellIndex)));
                     }) }, "row ".concat(rowIndex))); }) })] }));
 };
 
@@ -2281,6 +2321,7 @@ exports.TrashIcon = TrashIcon;
 exports.TrustMinimisedIcon = TrustMinimisedIcon;
 exports.TwitterIcon = TwitterIcon;
 exports.TwoColumnSection = TwoColumnSection;
+exports.WaitingIcon = WaitingIcon;
 exports.config = config;
 exports.createTheme = createTheme;
 exports.css = css;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obolnetwork/obol-ui",
-  "version": "1.0.19-0",
+  "version": "1.0.20",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "license": "MIT",