@obolnetwork/obol-ui 1.0.14 → 1.0.16

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/molecules/Table/Table.d.ts

@@ -9,8 +9,8 @@ export declare type CellDef = {
     component: "TextField" | "NumberField";
     config?: {
         type: "text" | "number";
-        max: number;
-        min: number;
+        max?: number;
+        min?: number;
     };
 };
 export declare type ColumnDef<T> = {

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
@@ -1399,7 +1409,7 @@ var NumberField = forwardRef(function (_a, ref) {
         if (qty && onChangeValue) {
             onChangeValue(qty);
         }
-    }, [qty, onChangeValue]);
+    }, [qty]);
     return (jsxs(Box, __assign({ css: {
             display: "flex",
             maxHeight: "$3xl",
@@ -1561,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",
@@ -1610,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",
@@ -1764,8 +1776,8 @@ var ProgressTracker = function (props) {
 var StyledRadio = styled(RadioGroupPrimitive.Item, {
     all: "unset",
     backgroundColor: "$obolGreen",
-    width: 22,
-    height: 22,
+    width: 18,
+    height: 18,
     borderRadius: "100%",
     "&:hover": { filter: "brightness(90%)", cursor: "pointer" },
 });
@@ -1783,7 +1795,7 @@ var StyledIndicator = styled(RadioGroupPrimitive.Indicator, {
         width: 10,
         height: 10,
         borderRadius: "50%",
-        boxShadow: "0 0 0 3px #0E1E22",
+        boxShadow: "0 0 0 2px #0E1E22",
         backgroundColor: "#2FE4AB",
     },
 });
@@ -1858,6 +1870,20 @@ var Td = styled("td", {
         },
     },
 });
+var Th = styled("th", {
+    border: "2px solid $bg04",
+    py: "$sm",
+    px: "$sm",
+    textAlign: "center",
+    color: "$body",
+    fontWeight: "$bold",
+    fontSize: "$4",
+    "& input": {
+        border: "none",
+        borderRadius: 0,
+        width: "100%",
+    },
+});
 var Tr = styled("tr", {});
 var BoxBorderTop = styled(Box, {
     borderTop: "2px solid $bg04",
@@ -1877,7 +1903,7 @@ var AddNewRow = function (props) {
 // 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: [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) {
+    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: {
@@ -1890,8 +1916,13 @@ var SplitterTable = function (_a) {
                                             "-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;
+                                            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;
+                                                }
+                                            }
                                         }, 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"
@@ -2069,7 +2100,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": {
@@ -2081,7 +2112,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) {
@@ -2109,7 +2140,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
@@ -1431,7 +1440,7 @@ 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",
@@ -1593,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",
@@ -1642,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",
@@ -1796,8 +1807,8 @@ var ProgressTracker = function (props) {
 var StyledRadio = styled(RadioGroupPrimitive__namespace.Item, {
     all: "unset",
     backgroundColor: "$obolGreen",
-    width: 22,
-    height: 22,
+    width: 18,
+    height: 18,
     borderRadius: "100%",
     "&:hover": { filter: "brightness(90%)", cursor: "pointer" },
 });
@@ -1815,7 +1826,7 @@ var StyledIndicator = styled(RadioGroupPrimitive__namespace.Indicator, {
         width: 10,
         height: 10,
         borderRadius: "50%",
-        boxShadow: "0 0 0 3px #0E1E22",
+        boxShadow: "0 0 0 2px #0E1E22",
         backgroundColor: "#2FE4AB",
     },
 });
@@ -1890,6 +1901,20 @@ var Td = styled("td", {
         },
     },
 });
+var Th = styled("th", {
+    border: "2px solid $bg04",
+    py: "$sm",
+    px: "$sm",
+    textAlign: "center",
+    color: "$body",
+    fontWeight: "$bold",
+    fontSize: "$4",
+    "& input": {
+        border: "none",
+        borderRadius: 0,
+        width: "100%",
+    },
+});
 var Tr = styled("tr", {});
 var BoxBorderTop = styled(Box, {
     borderTop: "2px solid $bg04",
@@ -1909,7 +1934,7 @@ var AddNewRow = function (props) {
 // 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.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) {
+    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: {
@@ -1922,8 +1947,13 @@ var SplitterTable = function (_a) {
                                             "-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;
+                                            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;
+                                                }
+                                            }
                                         }, 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"
@@ -2101,7 +2131,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": {
@@ -2113,7 +2143,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) {
@@ -2141,7 +2171,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.14",
+  "version": "1.0.16",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "license": "MIT",