@obolnetwork/obol-ui 1.0.12 → 1.0.15-0

package/dist/components/atoms/IconButton/IconButton.d.ts

@@ -3,6 +3,7 @@ import * as Stitches from "@stitches/react";
 export declare const IconButton: import("@stitches/react/types/styled-component").StyledComponent<"button", {
     ghost?: boolean | "true" | undefined;
     fullWidth?: boolean | "true" | undefined;
+    borderDisabled?: boolean | "true" | undefined;
 }, {
     motion: "(prefers-reduced-motion)";
     hover: "(any-hover: hover)";
@@ -488,6 +489,7 @@ export declare type IconButtonComponentProps = IconButtonComponentVariants;
 export declare const IconButtonStory: (props: Omit<import("@stitches/react/types/styled-component").TransformProps<{
     ghost?: boolean | "true" | undefined;
     fullWidth?: boolean | "true" | undefined;
+    borderDisabled?: boolean | "true" | undefined;
 }, {
     motion: "(prefers-reduced-motion)";
     hover: "(any-hover: hover)";
@@ -498,9 +500,10 @@ export declare const IconButtonStory: (props: Omit<import("@stitches/react/types
     bp2: "(min-width: 900px)";
     md: "(max-width: 1200px)";
     lg: "(max-width: 1800px)";
-}>, "ghost" | "fullWidth"> & {
+}>, "ghost" | "fullWidth" | "borderDisabled"> & {
     ghost?: boolean | undefined;
     fullWidth?: boolean | undefined;
+    borderDisabled?: boolean | undefined;
 } & {
     children?: import("react").ReactNode;
     disabled?: boolean | undefined;

package/dist/components/atoms/Image/Image.d.ts

@@ -1,5 +1,4 @@
-import ImageNext from "next/image";
-export declare const Image: import("@stitches/react/types/styled-component").StyledComponent<typeof ImageNext, {}, {
+export declare const Image: import("@stitches/react/types/styled-component").StyledComponent<"img", {}, {
     motion: "(prefers-reduced-motion)";
     hover: "(any-hover: hover)";
     dark: "(prefers-color-scheme: dark)";

package/dist/components/atoms/LoadingButton/LoadingButton.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { CSS } from "../../../stitches.config";
-import { ComponentProps } from "../Button/Button";
-interface LoadingButtonProps extends ComponentProps {
+import { ButtonComponentProps } from "../Button/Button";
+interface LoadingButtonProps extends ButtonComponentProps {
     css?: CSS;
 }
 export declare const LoadingButton: React.FC<LoadingButtonProps>;

package/dist/components/atoms/NumberField/NumberField.d.ts

@@ -1,9 +1,11 @@
-/// <reference types="react" />
+import { FocusEventHandler } from "react";
 interface NumberFieldProps {
-    value?: number;
-    onChangeValue?(value: number): void;
     max?: number;
     min?: number;
+    value?: number;
+    onChangeValue?(value: number): void;
+    onBlur?: FocusEventHandler<HTMLInputElement> | undefined;
+    name?: string;
 }
 export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -5,15 +5,28 @@ export interface RowItem {
 }
 export declare type RowTableType = Record<string, string | React.ReactNode>;
 export declare type RowsTableType = RowItem[];
+export declare type CellDef = {
+    component: "TextField" | "NumberField";
+    config?: {
+        type: "text" | "number";
+        max: number;
+        min: number;
+    };
+};
+export declare type ColumnDef<T> = {
+    accessorKey: keyof T;
+    header: string;
+    cell?: CellDef;
+};
 export interface TableProps {
-    rows: RowsTableType;
-    columns: string[];
+    rows: any[];
+    columns: ColumnDef<any>[];
 }
 export interface SplitterTableProps extends TableProps {
-    renderComponentValue?: "TextField" | "Text";
-    onAddRow(item: string): void;
+    onAddRow(item?: unknown): void;
     onRemoveRow(item: string | number): void;
-    onUpdateRow(id: string, value: string): void;
+    onUpdateRow(id: string, value: string | number, accessorKey: unknown): void;
+    removeButton?: boolean;
 }
 export declare const SplitterTable: React.FC<SplitterTableProps>;
 export declare const Table: React.FC<TableProps>;

package/dist/index.es.js

@@ -1,6 +1,5 @@
 import { createStitches } from '@stitches/react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import Image$1 from 'next/image';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import React, { forwardRef, useState, useRef, useEffect, useLayoutEffect } from 'react';
@@ -927,7 +926,11 @@ var Container = styled(Box, {
     },
 });
 
-var Image = styled(Image$1, {});
+var Image = styled('img', {
+    // reset
+    verticalAlign: "middle",
+    maxWidth: "100%"
+});
 
 var ArrowForward = function (props) { return (jsx(SvgIcon, __assign({}, props, { children: jsx("path", { d: "M9.99992 3.3335L9.05992 4.2735L12.1133 7.3335H1.33325V8.66683H12.1133L9.05325 11.7268L9.99992 12.6668L14.6666 8.00016L9.99992 3.3335Z", stroke: "currentColor", fill: "currentColor" }) }))); };
 
@@ -1125,7 +1128,7 @@ var TeamMemberCard = function (props) { return (jsxs(Box, __assign({ css: {
                         marginTop: "-103.5px",
                     },
                 },
-            } }, { children: jsx(Image, { placeholder: 'blur', blurDataURL: "/assets/team/Collin.png", alt: props.heading, css: { borderRadius: "$round" }, src: props.image, width: 160, height: 160 }) })), jsxs(Box, __assign({ css: {
+            } }, { children: jsx(Image, { placeholder: 'blur', alt: props.heading, css: { borderRadius: "$round" }, src: props.image, width: 160, height: 160 }) })), jsxs(Box, __assign({ css: {
                 display: "grid",
                 justifyContent: "center",
                 "@sm": { justifyContent: "start" },
@@ -1166,7 +1169,7 @@ var LogoCard = function (props) {
                 width: "auto",
                 height: "60px",
             },
-        }, target: "_blank", href: props.logoCardLink }, { children: jsx(Box, __assign({ css: { position: "relative", width: "100%", height: "100%" } }, { children: jsx(Image, { src: props.image, layout: "fill", objectFit: "contain", alt: props.heading, quality: 100 }) })) })));
+        }, target: "_blank", href: props.logoCardLink }, { children: jsx(Box, __assign({ css: { position: "relative", width: "100%", height: "100%" } }, { children: jsx(Image, { src: props.image, alt: props.heading }) })) })));
 };
 
 // Exports
@@ -1199,6 +1202,7 @@ var IconButton = styled("button", {
         color: "$muted",
     },
     margin: 0,
+    border: "2px solid transparent",
     variants: {
         ghost: {
             true: {
@@ -1215,6 +1219,11 @@ var IconButton = styled("button", {
                 width: "$full",
             },
         },
+        borderDisabled: {
+            true: {
+                border: "2px solid $bg04",
+            },
+        },
     },
 });
 var IconButtonStory = modifyVariantsForStory(IconButton);
@@ -1357,11 +1366,11 @@ var TextFieldWithCopy = forwardRef(function (props, ref) {
 TextFieldWithCopy.displayName = "TextFieldWithCopy";
 
 var NumberField = forwardRef(function (_a, ref) {
-    var _b = _a.max, max = _b === void 0 ? 10 : _b, _c = _a.min, min = _c === void 0 ? 1 : _c, value = _a.value, onChangeValue = _a.onChangeValue;
+    var _b = _a.max, max = _b === void 0 ? 10 : _b, _c = _a.min, min = _c === void 0 ? 0 : _c, value = _a.value, onChangeValue = _a.onChangeValue, onBlur = _a.onBlur, name = _a.name;
     var _d = useState(value || min), qty = _d[0], setQty = _d[1];
     var handleOnDec = function (e) {
         e.preventDefault();
-        if (qty <= min) {
+        if (qty < min) {
             setQty(min);
         }
         else {
@@ -1378,7 +1387,7 @@ var NumberField = forwardRef(function (_a, ref) {
         }
     };
     var handleOnChange = function (e) {
-        var value = e.target;
+        var value = e.target.value;
         if (value > max) {
             setQty(max);
         }
@@ -1393,9 +1402,10 @@ var NumberField = forwardRef(function (_a, ref) {
         if (qty && onChangeValue) {
             onChangeValue(qty);
         }
-    }, [qty, onChangeValue]);
+    }, [qty]);
     return (jsxs(Box, __assign({ css: {
             display: "flex",
+            maxHeight: "$3xl",
             "input::-webkit-inner-spin-button": {
                 "-webkit-appearance": "none",
                 margin: 0,
@@ -1427,7 +1437,7 @@ var NumberField = forwardRef(function (_a, ref) {
                 borderRadius: 0,
                 width: "95px",
             },
-        } }, { children: [jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick: handleOnDec }, { children: "-" })), jsx(TextField, { css: { borderRightStyle: "none", borderLeftStyle: "none" }, type: "number", ref: ref, value: qty, onChange: handleOnChange }), jsx(IconButton, __assign({ disabled: qty >= max, className: "inc-button", onClick: handleOnInc }, { children: "+" }))] })));
+        } }, { children: [jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick: handleOnDec, borderDisabled: qty <= min }, { children: "-" })), jsx(TextField, { css: { borderRightStyle: "none", borderLeftStyle: "none" }, type: "number", ref: ref, value: qty, onChange: handleOnChange, onBlur: onBlur, name: name }), jsx(IconButton, __assign({ disabled: qty >= max, className: "inc-button", onClick: handleOnInc, borderDisabled: qty >= max }, { children: "+" }))] })));
 });
 NumberField.displayName = "NumberField";
 
@@ -1554,9 +1564,11 @@ var AdvisoryToggleBullet = function (props) {
                 } }, { children: props.rank }))), jsx(Text, __assign({ color: color }, { children: props.children }))] })));
 };
 
-var CardImage = styled(Image$1, {
+var CardImage = styled(Image, {
     btrr: "$4",
     btlr: "$4",
+    width: "100%",
+    height: "100%",
 });
 var ToggleCardItem = styled(ToggleGroupItem, {
     all: "unset",
@@ -1603,7 +1615,7 @@ var Card = function (_a) {
                     "@sm": {
                         width: "$full",
                     },
-                } }, { children: jsx(CardImage, { src: props.image, layout: "fill", objectFit: "fill", alt: props.heading }) }))), jsxs(Box, __assign({ className: "box-card-icon", css: {
+                } }, { children: jsx(CardImage, { src: props.image, alt: props.heading }) }))), jsxs(Box, __assign({ className: "box-card-icon", css: {
                     display: "flex",
                     p: "$xl",
                     gap: "$xl",
@@ -1751,14 +1763,14 @@ var ProgressTracker = function (props) {
                         display: "flex",
                         justifyContent: "space-between",
                         alignItems: "center",
-                    } }, { children: items.map(function (item, index) { return (jsx(Link, __assign({ disabled: item.status === "incomplete", href: item.status === "incomplete" ? "javascript:void(0)" : item.href }, { children: item.title }), ":l".concat(index))); }) }))] })) })));
+                    } }, { children: items.map(function (item, index) { return (jsx(Link, __assign({ disabled: item.status === "incomplete", href: item.status === "incomplete" ? "#" : item.href }, { children: item.title }), ":l".concat(index))); }) }))] })) })));
 };
 
 var StyledRadio = styled(RadioGroupPrimitive.Item, {
     all: "unset",
     backgroundColor: "$obolGreen",
-    width: 25,
-    height: 25,
+    width: 18,
+    height: 18,
     borderRadius: "100%",
     "&:hover": { filter: "brightness(90%)", cursor: "pointer" },
 });
@@ -1773,10 +1785,10 @@ var StyledIndicator = styled(RadioGroupPrimitive.Indicator, {
         content: '""',
         display: "absolute",
         position: "absolute",
-        width: 11,
-        height: 11,
+        width: 10,
+        height: 10,
         borderRadius: "50%",
-        boxShadow: "0 0 0 4px #0E1E22",
+        boxShadow: "0 0 0 2px #0E1E22",
         backgroundColor: "#2FE4AB",
     },
 });
@@ -1786,6 +1798,7 @@ var RadioGroupRadio = StyledRadio;
 var RadioGroupIndicator = StyledIndicator;
 var RadioGroupItemLabel = styled("label", {
     color: "$textLight",
+    fontWeight: "$bold",
     fontSize: "$3",
     lineHeight: 1,
     userSelect: "none",
@@ -1795,7 +1808,7 @@ var RadioGroupItemLabel = styled("label", {
 var RadioGroupItem = function (_a) {
     var value = _a.value, label = _a.label, _b = _a.index, index = _b === void 0 ? 1 : _b;
     var id = "id-:r".concat(index, ":");
-    return (jsxs(Box, __assign({ css: { display: "flex", margin: "10px 0", alignItems: "center" } }, { children: [jsx(RadioGroupRadio, __assign({ value: value, id: id }, { children: jsx(RadioGroupPrimitive.RadioGroupIndicator, {}) })), jsx(RadioGroupItemLabel, __assign({ htmlFor: id }, { children: label }))] })));
+    return (jsxs(Box, __assign({ css: { display: "flex", margin: "10px 0", alignItems: "center" } }, { children: [jsx(RadioGroupRadio, __assign({ value: value, id: id }, { children: jsx(RadioGroupPrimitive.RadioGroupIndicator, { className: "indicator" }) })), jsx(RadioGroupItemLabel, __assign({ htmlFor: id }, { children: label }))] })));
 };
 var RadioGroupComponent = function (_a) {
     var items = _a.items, value = _a.value, onValueChange = _a.onValueChange, props = __rest(_a, ["items", "value", "onValueChange"]);
@@ -1807,7 +1820,7 @@ var StyledTable = styled("table", {
     borderRadius: "2px",
     backgroundColor: "$bg02",
     borderStyle: "hidden",
-    boxShadow: "0 0 0 2px $bg04",
+    boxShadow: "0 0 0 2px $colors$bg04",
     width: "100%",
     "& thead": {
         color: "$body",
@@ -1840,6 +1853,7 @@ var Td = styled("td", {
         noPadding: {
             true: {
                 p: 0,
+                backgroundColor: "$bg03",
             },
         },
         size: {
@@ -1867,18 +1881,35 @@ var AddNewRow = function (props) {
 };
 // Components
 var SplitterTable = function (_a) {
-    var rows = _a.rows, columns = _a.columns, _b = _a.renderComponentValue, renderComponentValue = _b === void 0 ? "TextField" : _b, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow;
-    return (jsxs(StyledTable, { children: [jsxs("thead", { children: [jsx(Td, {}), columns.map(function (column, index) { return (jsx(Td, __assign({ css: { textAlign: "start" } }, { children: column }), "header-".concat(index))); }), jsx(Td, {})] }), jsxs("tbody", { children: [rows.map(function (row, rowIndex) { return (jsxs("tr", { children: [jsx(Td, __assign({ size: "sm" }, { children: rowIndex + 1 })), Object.keys(row).map(function (data, cellIndex) {
-                                if (data === "id")
-                                    return null;
-                                var isTextField = renderComponentValue === "TextField";
-                                return (jsx(Td, __assign({ noPadding: true }, { children: isTextField ? (jsx(TextField, { defaultValue: row.value, onChange: function (e) { return onUpdateRow(row.id, e.target.value); } })) : (row.value) }), "cell ".concat(cellIndex)));
-                            }), 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 () { return onAddRow(""); } })] })] }));
+    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: [jsxs("thead", { children: [jsx(Td, {}), columns.map(function (column, index) { return (jsx(Td, __assign({ css: { textAlign: "start" } }, { children: column.header }), "header-".concat(index))); }), jsx(Td, {})] }), 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) {
+                                            if (Number(e.target.value) > 100)
+                                                e.target.value = 100;
+                                        }, 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 () { return onAddRow(); } })] })] }));
 };
 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: Object.keys(row).map(function (data, cellIndex) {
-                        return (jsx(Td, { children: row.value }, "cell ".concat(cellIndex)));
+    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)));
                     }) }, "row ".concat(rowIndex))); }) })] }));
 };
 
@@ -2043,7 +2074,7 @@ var HeroSection = function (_a) {
                                     display: "flex",
                                     justifyContent: "flex-end",
                                     alignItems: "center",
-                                } }, { children: jsx(Image$1, { priority: true, src: (image === null || image === void 0 ? void 0 : image.basePath) || MOBILE_PATH, alt: "Obol Logo", width: 343, height: 226 }) }))), jsx(Text, __assign({ css: {
+                                } }, { children: jsx(Image, { src: (image === null || image === void 0 ? void 0 : image.basePath) || MOBILE_PATH, alt: "Obol Logo", width: 343, height: 226 }) }))), jsx(Text, __assign({ css: {
                                     width: "80%",
                                     lineHeight: "$xl",
                                     "@sm": {
@@ -2055,7 +2086,7 @@ var HeroSection = function (_a) {
                     display: "flex",
                     justifyContent: "flex-end",
                     alignItems: "center",
-                } }, { children: jsx(Image$1, { priority: true, src: (image === null || image === void 0 ? void 0 : image.basePath) || BASE_PATH, alt: "Obol Logo", width: 912, height: 597 }) })))] })));
+                } }, { children: jsx(Image, { src: (image === null || image === void 0 ? void 0 : image.basePath) || BASE_PATH, alt: "Obol Logo", width: 912, height: 597 }) })))] })));
 };
 
 var TwoColumnSection = function (_a) {
@@ -2083,7 +2114,7 @@ var TwoColumnSection = function (_a) {
                     "@md": {
                         m: "0",
                     },
-                } }, { children: !screenDownSm ? (jsx(Image$1, { src: image.basePath, alt: "Obol Logo", objectFit: "fill", layout: "fill" })) : (jsx(Image$1, { src: image.mobilePath || image.basePath, alt: "Obol Logo", objectFit: "fill", layout: "fill" })) }))] })));
+                } }, { 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 };

package/dist/index.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('@stitches/react');
 var TabsPrimitive = require('@radix-ui/react-tabs');
-var Image$1 = require('next/image');
 var jsxRuntime = require('react/jsx-runtime');
 var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
 var React = require('react');
@@ -34,7 +33,6 @@ function _interopNamespace(e) {
 }
 
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
-var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image$1);
 var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
@@ -959,7 +957,11 @@ var Container = styled(Box, {
     },
 });
 
-var Image = styled(Image__default["default"], {});
+var Image = styled('img', {
+    // reset
+    verticalAlign: "middle",
+    maxWidth: "100%"
+});
 
 var ArrowForward = function (props) { return (jsxRuntime.jsx(SvgIcon, __assign({}, props, { children: jsxRuntime.jsx("path", { d: "M9.99992 3.3335L9.05992 4.2735L12.1133 7.3335H1.33325V8.66683H12.1133L9.05325 11.7268L9.99992 12.6668L14.6666 8.00016L9.99992 3.3335Z", stroke: "currentColor", fill: "currentColor" }) }))); };
 
@@ -1157,7 +1159,7 @@ var TeamMemberCard = function (props) { return (jsxRuntime.jsxs(Box, __assign({
                         marginTop: "-103.5px",
                     },
                 },
-            } }, { children: jsxRuntime.jsx(Image, { placeholder: 'blur', blurDataURL: "/assets/team/Collin.png", alt: props.heading, css: { borderRadius: "$round" }, src: props.image, width: 160, height: 160 }) })), jsxRuntime.jsxs(Box, __assign({ css: {
+            } }, { children: jsxRuntime.jsx(Image, { placeholder: 'blur', alt: props.heading, css: { borderRadius: "$round" }, src: props.image, width: 160, height: 160 }) })), jsxRuntime.jsxs(Box, __assign({ css: {
                 display: "grid",
                 justifyContent: "center",
                 "@sm": { justifyContent: "start" },
@@ -1198,7 +1200,7 @@ var LogoCard = function (props) {
                 width: "auto",
                 height: "60px",
             },
-        }, target: "_blank", href: props.logoCardLink }, { children: jsxRuntime.jsx(Box, __assign({ css: { position: "relative", width: "100%", height: "100%" } }, { children: jsxRuntime.jsx(Image, { src: props.image, layout: "fill", objectFit: "contain", alt: props.heading, quality: 100 }) })) })));
+        }, target: "_blank", href: props.logoCardLink }, { children: jsxRuntime.jsx(Box, __assign({ css: { position: "relative", width: "100%", height: "100%" } }, { children: jsxRuntime.jsx(Image, { src: props.image, alt: props.heading }) })) })));
 };
 
 // Exports
@@ -1231,6 +1233,7 @@ var IconButton = styled("button", {
         color: "$muted",
     },
     margin: 0,
+    border: "2px solid transparent",
     variants: {
         ghost: {
             true: {
@@ -1247,6 +1250,11 @@ var IconButton = styled("button", {
                 width: "$full",
             },
         },
+        borderDisabled: {
+            true: {
+                border: "2px solid $bg04",
+            },
+        },
     },
 });
 var IconButtonStory = modifyVariantsForStory(IconButton);
@@ -1389,11 +1397,11 @@ var TextFieldWithCopy = React.forwardRef(function (props, ref) {
 TextFieldWithCopy.displayName = "TextFieldWithCopy";
 
 var NumberField = React.forwardRef(function (_a, ref) {
-    var _b = _a.max, max = _b === void 0 ? 10 : _b, _c = _a.min, min = _c === void 0 ? 1 : _c, value = _a.value, onChangeValue = _a.onChangeValue;
+    var _b = _a.max, max = _b === void 0 ? 10 : _b, _c = _a.min, min = _c === void 0 ? 0 : _c, value = _a.value, onChangeValue = _a.onChangeValue, onBlur = _a.onBlur, name = _a.name;
     var _d = React.useState(value || min), qty = _d[0], setQty = _d[1];
     var handleOnDec = function (e) {
         e.preventDefault();
-        if (qty <= min) {
+        if (qty < min) {
             setQty(min);
         }
         else {
@@ -1410,7 +1418,7 @@ var NumberField = React.forwardRef(function (_a, ref) {
         }
     };
     var handleOnChange = function (e) {
-        var value = e.target;
+        var value = e.target.value;
         if (value > max) {
             setQty(max);
         }
@@ -1425,9 +1433,10 @@ var NumberField = React.forwardRef(function (_a, ref) {
         if (qty && onChangeValue) {
             onChangeValue(qty);
         }
-    }, [qty, onChangeValue]);
+    }, [qty]);
     return (jsxRuntime.jsxs(Box, __assign({ css: {
             display: "flex",
+            maxHeight: "$3xl",
             "input::-webkit-inner-spin-button": {
                 "-webkit-appearance": "none",
                 margin: 0,
@@ -1459,7 +1468,7 @@ var NumberField = React.forwardRef(function (_a, ref) {
                 borderRadius: 0,
                 width: "95px",
             },
-        } }, { children: [jsxRuntime.jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick: handleOnDec }, { children: "-" })), jsxRuntime.jsx(TextField, { css: { borderRightStyle: "none", borderLeftStyle: "none" }, type: "number", ref: ref, value: qty, onChange: handleOnChange }), jsxRuntime.jsx(IconButton, __assign({ disabled: qty >= max, className: "inc-button", onClick: handleOnInc }, { children: "+" }))] })));
+        } }, { children: [jsxRuntime.jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick: handleOnDec, borderDisabled: qty <= min }, { children: "-" })), jsxRuntime.jsx(TextField, { css: { borderRightStyle: "none", borderLeftStyle: "none" }, type: "number", ref: ref, value: qty, onChange: handleOnChange, onBlur: onBlur, name: name }), jsxRuntime.jsx(IconButton, __assign({ disabled: qty >= max, className: "inc-button", onClick: handleOnInc, borderDisabled: qty >= max }, { children: "+" }))] })));
 });
 NumberField.displayName = "NumberField";
 
@@ -1586,9 +1595,11 @@ var AdvisoryToggleBullet = function (props) {
                 } }, { children: props.rank }))), jsxRuntime.jsx(Text, __assign({ color: color }, { children: props.children }))] })));
 };
 
-var CardImage = styled(Image__default["default"], {
+var CardImage = styled(Image, {
     btrr: "$4",
     btlr: "$4",
+    width: "100%",
+    height: "100%",
 });
 var ToggleCardItem = styled(ToggleGroupItem, {
     all: "unset",
@@ -1635,7 +1646,7 @@ var Card = function (_a) {
                     "@sm": {
                         width: "$full",
                     },
-                } }, { children: jsxRuntime.jsx(CardImage, { src: props.image, layout: "fill", objectFit: "fill", alt: props.heading }) }))), jsxRuntime.jsxs(Box, __assign({ className: "box-card-icon", css: {
+                } }, { children: jsxRuntime.jsx(CardImage, { src: props.image, alt: props.heading }) }))), jsxRuntime.jsxs(Box, __assign({ className: "box-card-icon", css: {
                     display: "flex",
                     p: "$xl",
                     gap: "$xl",
@@ -1783,14 +1794,14 @@ var ProgressTracker = function (props) {
                         display: "flex",
                         justifyContent: "space-between",
                         alignItems: "center",
-                    } }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(Link, __assign({ disabled: item.status === "incomplete", href: item.status === "incomplete" ? "javascript:void(0)" : item.href }, { children: item.title }), ":l".concat(index))); }) }))] })) })));
+                    } }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(Link, __assign({ disabled: item.status === "incomplete", href: item.status === "incomplete" ? "#" : item.href }, { children: item.title }), ":l".concat(index))); }) }))] })) })));
 };
 
 var StyledRadio = styled(RadioGroupPrimitive__namespace.Item, {
     all: "unset",
     backgroundColor: "$obolGreen",
-    width: 25,
-    height: 25,
+    width: 18,
+    height: 18,
     borderRadius: "100%",
     "&:hover": { filter: "brightness(90%)", cursor: "pointer" },
 });
@@ -1805,10 +1816,10 @@ var StyledIndicator = styled(RadioGroupPrimitive__namespace.Indicator, {
         content: '""',
         display: "absolute",
         position: "absolute",
-        width: 11,
-        height: 11,
+        width: 10,
+        height: 10,
         borderRadius: "50%",
-        boxShadow: "0 0 0 4px #0E1E22",
+        boxShadow: "0 0 0 2px #0E1E22",
         backgroundColor: "#2FE4AB",
     },
 });
@@ -1818,6 +1829,7 @@ var RadioGroupRadio = StyledRadio;
 var RadioGroupIndicator = StyledIndicator;
 var RadioGroupItemLabel = styled("label", {
     color: "$textLight",
+    fontWeight: "$bold",
     fontSize: "$3",
     lineHeight: 1,
     userSelect: "none",
@@ -1827,7 +1839,7 @@ var RadioGroupItemLabel = styled("label", {
 var RadioGroupItem = function (_a) {
     var value = _a.value, label = _a.label, _b = _a.index, index = _b === void 0 ? 1 : _b;
     var id = "id-:r".concat(index, ":");
-    return (jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", margin: "10px 0", alignItems: "center" } }, { children: [jsxRuntime.jsx(RadioGroupRadio, __assign({ value: value, id: id }, { children: jsxRuntime.jsx(RadioGroupPrimitive__namespace.RadioGroupIndicator, {}) })), jsxRuntime.jsx(RadioGroupItemLabel, __assign({ htmlFor: id }, { children: label }))] })));
+    return (jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", margin: "10px 0", alignItems: "center" } }, { children: [jsxRuntime.jsx(RadioGroupRadio, __assign({ value: value, id: id }, { children: jsxRuntime.jsx(RadioGroupPrimitive__namespace.RadioGroupIndicator, { className: "indicator" }) })), jsxRuntime.jsx(RadioGroupItemLabel, __assign({ htmlFor: id }, { children: label }))] })));
 };
 var RadioGroupComponent = function (_a) {
     var items = _a.items, value = _a.value, onValueChange = _a.onValueChange, props = __rest(_a, ["items", "value", "onValueChange"]);
@@ -1839,7 +1851,7 @@ var StyledTable = styled("table", {
     borderRadius: "2px",
     backgroundColor: "$bg02",
     borderStyle: "hidden",
-    boxShadow: "0 0 0 2px $bg04",
+    boxShadow: "0 0 0 2px $colors$bg04",
     width: "100%",
     "& thead": {
         color: "$body",
@@ -1872,6 +1884,7 @@ var Td = styled("td", {
         noPadding: {
             true: {
                 p: 0,
+                backgroundColor: "$bg03",
             },
         },
         size: {
@@ -1899,18 +1912,35 @@ var AddNewRow = function (props) {
 };
 // Components
 var SplitterTable = function (_a) {
-    var rows = _a.rows, columns = _a.columns, _b = _a.renderComponentValue, renderComponentValue = _b === void 0 ? "TextField" : _b, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow;
-    return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsxs("thead", { children: [jsxRuntime.jsx(Td, {}), columns.map(function (column, index) { return (jsxRuntime.jsx(Td, __assign({ css: { textAlign: "start" } }, { children: column }), "header-".concat(index))); }), jsxRuntime.jsx(Td, {})] }), jsxRuntime.jsxs("tbody", { children: [rows.map(function (row, rowIndex) { return (jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx(Td, __assign({ size: "sm" }, { children: rowIndex + 1 })), Object.keys(row).map(function (data, cellIndex) {
-                                if (data === "id")
-                                    return null;
-                                var isTextField = renderComponentValue === "TextField";
-                                return (jsxRuntime.jsx(Td, __assign({ noPadding: true }, { children: isTextField ? (jsxRuntime.jsx(TextField, { defaultValue: row.value, onChange: function (e) { return onUpdateRow(row.id, e.target.value); } })) : (row.value) }), "cell ".concat(cellIndex)));
-                            }), 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 () { return onAddRow(""); } })] })] }));
+    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.jsxs("thead", { children: [jsxRuntime.jsx(Td, {}), columns.map(function (column, index) { return (jsxRuntime.jsx(Td, __assign({ css: { textAlign: "start" } }, { children: column.header }), "header-".concat(index))); }), jsxRuntime.jsx(Td, {})] }), 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) {
+                                            if (Number(e.target.value) > 100)
+                                                e.target.value = 100;
+                                        }, 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 () { return onAddRow(); } })] })] }));
 };
 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: Object.keys(row).map(function (data, cellIndex) {
-                        return (jsxRuntime.jsx(Td, { children: row.value }, "cell ".concat(cellIndex)));
+    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)));
                     }) }, "row ".concat(rowIndex))); }) })] }));
 };
 
@@ -2075,7 +2105,7 @@ var HeroSection = function (_a) {
                                     display: "flex",
                                     justifyContent: "flex-end",
                                     alignItems: "center",
-                                } }, { children: jsxRuntime.jsx(Image__default["default"], { priority: true, src: (image === null || image === void 0 ? void 0 : image.basePath) || MOBILE_PATH, alt: "Obol Logo", width: 343, height: 226 }) }))), jsxRuntime.jsx(Text, __assign({ css: {
+                                } }, { children: jsxRuntime.jsx(Image, { src: (image === null || image === void 0 ? void 0 : image.basePath) || MOBILE_PATH, alt: "Obol Logo", width: 343, height: 226 }) }))), jsxRuntime.jsx(Text, __assign({ css: {
                                     width: "80%",
                                     lineHeight: "$xl",
                                     "@sm": {
@@ -2087,7 +2117,7 @@ var HeroSection = function (_a) {
                     display: "flex",
                     justifyContent: "flex-end",
                     alignItems: "center",
-                } }, { children: jsxRuntime.jsx(Image__default["default"], { priority: true, src: (image === null || image === void 0 ? void 0 : image.basePath) || BASE_PATH, alt: "Obol Logo", width: 912, height: 597 }) })))] })));
+                } }, { children: jsxRuntime.jsx(Image, { src: (image === null || image === void 0 ? void 0 : image.basePath) || BASE_PATH, alt: "Obol Logo", width: 912, height: 597 }) })))] })));
 };
 
 var TwoColumnSection = function (_a) {
@@ -2115,7 +2145,7 @@ var TwoColumnSection = function (_a) {
                     "@md": {
                         m: "0",
                     },
-                } }, { children: !screenDownSm ? (jsxRuntime.jsx(Image__default["default"], { src: image.basePath, alt: "Obol Logo", objectFit: "fill", layout: "fill" })) : (jsxRuntime.jsx(Image__default["default"], { src: image.mobilePath || image.basePath, alt: "Obol Logo", objectFit: "fill", layout: "fill" })) }))] })));
+                } }, { children: !screenDownSm ? (jsxRuntime.jsx(Image, { src: image.basePath, width: "100%", height: "100%", alt: "Obol Logo" })) : (jsxRuntime.jsx(Image, { src: image.mobilePath || image.basePath, width: "100%", height: "100%", alt: "Obol Logo" })) }))] })));
 };
 
 exports.Accordion = Accordion;

package/package.json

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