@obolnetwork/obol-ui 1.0.13 → 1.0.15

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

@@ -23,9 +23,9 @@ export interface TableProps {
     columns: ColumnDef<any>[];
 }
 export interface SplitterTableProps extends TableProps {
-    onAddRow(item: string): void;
+    onAddRow(item?: unknown): void;
     onRemoveRow(item: string | number): void;
-    onUpdateRow(id: string, value: string, accessorKey: unknown): void;
+    onUpdateRow(id: string, value: string | number, accessorKey: unknown): void;
     removeButton?: boolean;
 }
 export declare const SplitterTable: React.FC<SplitterTableProps>;

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,12 @@ var Container = styled(Box, {
     },
 });
 
-var Image = styled(Image$1, {});
+var Image = styled('img', {
+    // reset
+    verticalAlign: "middle",
+    maxWidth: "100%",
+    maxHeight: "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" }) }))); };
 
@@ -1114,7 +1118,7 @@ var TeamMemberCard = function (props) { return (jsxs(Box, __assign({ css: {
                 "@sm": { $$size: "100px" },
                 "&::after": {
                     position: "absolute",
-                    marginTop: "-163.5px",
+                    marginTop: "-160px",
                     borderRadius: "$round",
                     display: "block",
                     content: "",
@@ -1122,10 +1126,10 @@ var TeamMemberCard = function (props) { return (jsxs(Box, __assign({ css: {
                     height: "$$size",
                     background: "hsla(161, 77%, 54%, 0.2)",
                     "@sm": {
-                        marginTop: "-103.5px",
+                        marginTop: "-100px",
                     },
                 },
-            } }, { 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 +1170,13 @@ 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({ className: "logo-card-container", css: {
+                display: "flex",
+                justifyContent: "center",
+                position: "relative",
+                width: "100%",
+                height: "100%",
+            } }, { children: jsx(Image, { css: { objectFit: "contain" }, src: props.image, alt: props.heading }) })) })));
 };
 
 // Exports
@@ -1363,11 +1373,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 {
@@ -1384,7 +1394,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);
         }
@@ -1399,9 +1409,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,
@@ -1433,7 +1444,7 @@ var NumberField = forwardRef(function (_a, ref) {
                 borderRadius: 0,
                 width: "95px",
             },
-        } }, { 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 }), jsx(IconButton, __assign({ disabled: qty >= max, className: "inc-button", onClick: handleOnInc, borderDisabled: qty >= max }, { 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";
 
@@ -1560,9 +1571,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",
@@ -1609,7 +1622,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",
@@ -1757,14 +1770,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" },
 });
@@ -1779,10 +1792,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",
     },
 });
@@ -1792,6 +1805,7 @@ var RadioGroupRadio = StyledRadio;
 var RadioGroupIndicator = StyledIndicator;
 var RadioGroupItemLabel = styled("label", {
     color: "$textLight",
+    fontWeight: "$bold",
     fontSize: "$3",
     lineHeight: 1,
     userSelect: "none",
@@ -1801,7 +1815,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"]);
@@ -1846,6 +1860,7 @@ var Td = styled("td", {
         noPadding: {
             true: {
                 p: 0,
+                backgroundColor: "$bg03",
             },
         },
         size: {
@@ -1876,7 +1891,6 @@ 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: [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;
-                                // if (column === "id") return null;
                                 var isTextField = !!column.cell;
                                 return (jsx(Td, __assign({ noPadding: true, css: {
                                         "input::-webkit-inner-spin-button": {
@@ -1887,10 +1901,17 @@ var SplitterTable = function (_a) {
                                         "input[type=number]": {
                                             "-moz-appearance": "textfield",
                                         },
-                                    } }, { children: isTextField ? (jsx(TextField, __assign({ defaultValue: row[column.accessorKey], onChange: function (e) {
-                                            return onUpdateRow(row.id, e.target.value, column.accessorKey);
+                                    } }, { 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(""); } })] })] }));
+                            }), 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;
@@ -2060,7 +2081,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": {
@@ -2072,7 +2093,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) {
@@ -2100,7 +2121,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,12 @@ var Container = styled(Box, {
     },
 });
 
-var Image = styled(Image__default["default"], {});
+var Image = styled('img', {
+    // reset
+    verticalAlign: "middle",
+    maxWidth: "100%",
+    maxHeight: "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" }) }))); };
 
@@ -1146,7 +1149,7 @@ var TeamMemberCard = function (props) { return (jsxRuntime.jsxs(Box, __assign({
                 "@sm": { $$size: "100px" },
                 "&::after": {
                     position: "absolute",
-                    marginTop: "-163.5px",
+                    marginTop: "-160px",
                     borderRadius: "$round",
                     display: "block",
                     content: "",
@@ -1154,10 +1157,10 @@ var TeamMemberCard = function (props) { return (jsxRuntime.jsxs(Box, __assign({
                     height: "$$size",
                     background: "hsla(161, 77%, 54%, 0.2)",
                     "@sm": {
-                        marginTop: "-103.5px",
+                        marginTop: "-100px",
                     },
                 },
-            } }, { 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 +1201,13 @@ 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({ className: "logo-card-container", css: {
+                display: "flex",
+                justifyContent: "center",
+                position: "relative",
+                width: "100%",
+                height: "100%",
+            } }, { children: jsxRuntime.jsx(Image, { css: { objectFit: "contain" }, src: props.image, alt: props.heading }) })) })));
 };
 
 // Exports
@@ -1395,11 +1404,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 {
@@ -1416,7 +1425,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);
         }
@@ -1431,9 +1440,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,
@@ -1465,7 +1475,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, borderDisabled: qty <= min }, { 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, borderDisabled: qty >= max }, { 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";
 
@@ -1592,9 +1602,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",
@@ -1641,7 +1653,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",
@@ -1789,14 +1801,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" },
 });
@@ -1811,10 +1823,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",
     },
 });
@@ -1824,6 +1836,7 @@ var RadioGroupRadio = StyledRadio;
 var RadioGroupIndicator = StyledIndicator;
 var RadioGroupItemLabel = styled("label", {
     color: "$textLight",
+    fontWeight: "$bold",
     fontSize: "$3",
     lineHeight: 1,
     userSelect: "none",
@@ -1833,7 +1846,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"]);
@@ -1878,6 +1891,7 @@ var Td = styled("td", {
         noPadding: {
             true: {
                 p: 0,
+                backgroundColor: "$bg03",
             },
         },
         size: {
@@ -1908,7 +1922,6 @@ 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.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;
-                                // if (column === "id") return null;
                                 var isTextField = !!column.cell;
                                 return (jsxRuntime.jsx(Td, __assign({ noPadding: true, css: {
                                         "input::-webkit-inner-spin-button": {
@@ -1919,10 +1932,17 @@ var SplitterTable = function (_a) {
                                         "input[type=number]": {
                                             "-moz-appearance": "textfield",
                                         },
-                                    } }, { children: isTextField ? (jsxRuntime.jsx(TextField, __assign({ defaultValue: row[column.accessorKey], onChange: function (e) {
-                                            return onUpdateRow(row.id, e.target.value, column.accessorKey);
+                                    } }, { 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(""); } })] })] }));
+                            }), 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;
@@ -2092,7 +2112,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": {
@@ -2104,7 +2124,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) {
@@ -2132,7 +2152,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.13",
+  "version": "1.0.15",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "license": "MIT",