@obolnetwork/obol-ui 1.0.32 → 1.0.34

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type * as Stitches from "@stitches/react";
 export declare const Text: import("@stitches/react/types/styled-component").StyledComponent<"span", {
-    variant?: "body" | "h1" | "h2" | "h3" | "h4" | "h5" | "metadata" | "subline" | "ens" | undefined;
+    variant?: "body" | "pill" | "h1" | "h2" | "h3" | "h4" | "h5" | "metadata" | "subline" | "ens" | undefined;
     size?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined;
     color?: "white" | "black" | "lightBackground" | "obolBlue" | "primaryBgDefault" | "primaryBgDefaultHover" | "primaryTextDefault" | "secondaryBgDefault" | "secondaryBgHover" | "grayBgDefault" | "gray2BgDefault" | "neutralDark" | "navButtonBgDefault" | "navButtonBgHover" | "cardBackgroundDark" | "cardBackgroundLight" | "textMiddle" | "textLight" | "textLighter" | "textTabHover" | "textTabInactive" | "textGreenDark" | "textGreenLight" | "textGreen1" | "textGreen2" | "textGreen3" | "textGreenHover" | "textCreateHover" | "textGrayHover" | "txButton" | "obolGreen" | "obolMidGreen" | "obolGreenHover" | "obolGreenLight" | "obolDarkDark" | "obolDisabled" | "linkButtonHover" | "progressTrackerGreen" | "coordinate" | "coordinateHover" | "test" | "testHover" | "create" | "createHover" | "light" | "body" | "muted" | "menu" | "bg01" | "bg02" | "bg03" | "bg04" | "bg05" | "tooltip" | "tooltip2" | undefined;
     glow?: boolean | "true" | undefined;
@@ -488,7 +488,7 @@ export declare const Text: import("@stitches/react/types/styled-component").Styl
 }>>;
 export default Text;
 export declare const TextStory: (props: Omit<import("@stitches/react/types/styled-component").TransformProps<{
-    variant?: "body" | "h1" | "h2" | "h3" | "h4" | "h5" | "metadata" | "subline" | "ens" | undefined;
+    variant?: "body" | "pill" | "h1" | "h2" | "h3" | "h4" | "h5" | "metadata" | "subline" | "ens" | undefined;
     size?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined;
     color?: "white" | "black" | "lightBackground" | "obolBlue" | "primaryBgDefault" | "primaryBgDefaultHover" | "primaryTextDefault" | "secondaryBgDefault" | "secondaryBgHover" | "grayBgDefault" | "gray2BgDefault" | "neutralDark" | "navButtonBgDefault" | "navButtonBgHover" | "cardBackgroundDark" | "cardBackgroundLight" | "textMiddle" | "textLight" | "textLighter" | "textTabHover" | "textTabInactive" | "textGreenDark" | "textGreenLight" | "textGreen1" | "textGreen2" | "textGreen3" | "textGreenHover" | "textCreateHover" | "textGrayHover" | "txButton" | "obolGreen" | "obolMidGreen" | "obolGreenHover" | "obolGreenLight" | "obolDarkDark" | "obolDisabled" | "linkButtonHover" | "progressTrackerGreen" | "coordinate" | "coordinateHover" | "test" | "testHover" | "create" | "createHover" | "light" | "body" | "muted" | "menu" | "bg01" | "bg02" | "bg03" | "bg04" | "bg05" | "tooltip" | "tooltip2" | undefined;
     glow?: boolean | "true" | undefined;
@@ -504,7 +504,7 @@ export declare const TextStory: (props: Omit<import("@stitches/react/types/style
     md: "(max-width: 1200px)";
     lg: "(max-width: 1800px)";
 }>, "color" | "size" | "inline" | "variant" | "glow"> & {
-    variant?: "body" | "h1" | "h2" | "h3" | "h4" | "h5" | "metadata" | "subline" | "ens" | undefined;
+    variant?: "body" | "pill" | "h1" | "h2" | "h3" | "h4" | "h5" | "metadata" | "subline" | "ens" | undefined;
     size?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined;
     color?: "white" | "black" | "lightBackground" | "obolBlue" | "primaryBgDefault" | "primaryBgDefaultHover" | "primaryTextDefault" | "secondaryBgDefault" | "secondaryBgHover" | "grayBgDefault" | "gray2BgDefault" | "neutralDark" | "navButtonBgDefault" | "navButtonBgHover" | "cardBackgroundDark" | "cardBackgroundLight" | "textMiddle" | "textLight" | "textLighter" | "textTabHover" | "textTabInactive" | "textGreenDark" | "textGreenLight" | "textGreen1" | "textGreen2" | "textGreen3" | "textGreenHover" | "textCreateHover" | "textGrayHover" | "txButton" | "obolGreen" | "obolMidGreen" | "obolGreenHover" | "obolGreenLight" | "obolDarkDark" | "obolDisabled" | "linkButtonHover" | "progressTrackerGreen" | "coordinate" | "coordinateHover" | "test" | "testHover" | "create" | "createHover" | "light" | "body" | "muted" | "menu" | "bg01" | "bg02" | "bg03" | "bg04" | "bg05" | "tooltip" | "tooltip2" | undefined;
     glow?: boolean | undefined;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactNode } from "react";
 export declare const NotificationContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
     motion: "(prefers-reduced-motion)";
     hover: "(any-hover: hover)";
@@ -959,7 +959,7 @@ export declare const NotificationContainer: import("@stitches/react/types/styled
     };
 }>>;
 export interface NotificationCardProps {
-    heading: string;
+    heading: string | ReactNode;
     subHeading?: string;
     link?: string;
     linkText?: string;

package/dist/index.es.js

@@ -735,6 +735,16 @@ var Text = styled("span", {
                 fontSize: "$2",
                 color: "$textMuted",
             },
+            pill: {
+                fontSize: "$3",
+                lineHeight: "16px",
+                color: "$$color",
+                border: " 1px solid $$color",
+                background: "rgba(60, 210, 221, 0.1)",
+                display: "inline-block",
+                borderRadius: "$1",
+                padding: "0 $xxxs",
+            }
         },
         size: {
             1: { fontSize: "$1" },
@@ -1212,7 +1222,7 @@ var LogoCard = function (props) {
 var ToggleGroup = styled(ToggleGroupPrimitive.Root, {});
 var ToggleGroupItem = styled(ToggleGroupPrimitive.Item, {});
 
-var IconButton$1 = styled("button", {
+var IconButton = styled("button", {
     //reset
     all: "unset",
     alignItems: "center",
@@ -1266,7 +1276,7 @@ var IconButton$1 = styled("button", {
         },
     },
 });
-var IconButtonStory = modifyVariantsForStory(IconButton$1);
+var IconButtonStory = modifyVariantsForStory(IconButton);
 
 var slideUpAndFade = keyframes({
     "0%": { opacity: 0, transform: "translateY(2px)" },
@@ -1412,7 +1422,7 @@ var TextFieldWithCopy = forwardRef(function (_a, ref) {
             onChange(e);
         }
     };
-    return (jsxs(Box, __assign({ css: { display: "flex", width: "$full" } }, { children: [jsx(TextField, __assign({}, props, { withCopy: true, ref: innerRef, value: inputValue, onChange: handleOnChange, css: { width: "$full" } })), jsxs(Tooltip, __assign({ open: isCopied }, { children: [jsx(TooltipTrigger, __assign({ asChild: true }, { children: jsx(IconButton$1, __assign({ onClick: function () { return copyToClipBoard(inputValue); } }, { children: !isCopied ? jsx(CopyIcon, {}) : jsx(CheckIcon, {}) })) })), jsxs(Content$3, __assign({ side: "bottom", sideOffset: 5 }, { children: ["Copied!", jsx(TooltipArrow, {})] }))] }))] })));
+    return (jsxs(Box, __assign({ css: { display: "flex", width: "$full" } }, { children: [jsx(TextField, __assign({}, props, { withCopy: true, ref: innerRef, value: inputValue, onChange: handleOnChange, css: { width: "$full" } })), jsxs(Tooltip, __assign({ open: isCopied }, { children: [jsx(TooltipTrigger, __assign({ asChild: true }, { children: jsx(IconButton, __assign({ onClick: function () { return copyToClipBoard(inputValue); } }, { children: !isCopied ? jsx(CopyIcon, {}) : jsx(CheckIcon, {}) })) })), jsxs(Content$3, __assign({ side: "bottom", sideOffset: 5 }, { children: ["Copied!", jsx(TooltipArrow, {})] }))] }))] })));
 });
 TextFieldWithCopy.displayName = "TextFieldWithCopy";
 
@@ -1438,7 +1448,7 @@ var NumberField = forwardRef(function (_a, ref) {
         }
     };
     var handleOnChange = function (e) {
-        var value = e.target.value;
+        var value = Number(e.target.value);
         if (value > max) {
             setQty(max);
         }
@@ -1488,7 +1498,7 @@ var NumberField = forwardRef(function (_a, ref) {
                 borderRadius: 0,
                 width: "95px",
             },
-        } }, { children: [jsx(IconButton$1, __assign({ disabled: qty <= min, className: "dec-button", onClick: handleOnDec, borderDisabled: qty <= min }, { children: jsx(MinusIcon, {}) })), jsx(TextField, { css: { borderRightStyle: "none", borderLeftStyle: "none" }, type: "number", ref: ref, value: qty, onChange: handleOnChange, onBlur: onBlur, name: name }), jsx(IconButton$1, __assign({ disabled: qty >= max, className: "inc-button", onClick: handleOnInc, borderDisabled: qty >= max }, { children: jsx(PlusIcon, {}) }))] })));
+        } }, { children: [jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick: handleOnDec, borderDisabled: qty <= min }, { children: jsx(MinusIcon, {}) })), 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: jsx(PlusIcon, {}) }))] })));
 });
 NumberField.displayName = "NumberField";
 
@@ -1547,7 +1557,7 @@ var StyledContent$1 = styled(DialogPrimitive.Content, {
 });
 var Content$2 = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (jsxs(DialogPrimitive.Portal, __assign({ className: "dialog-portal-content" }, { children: [jsx(StyledOverlay, {}), jsx(StyledContent$1, __assign({}, props, { children: children }))] })));
+    return (jsxs(DialogPrimitive.Portal, __assign({ className: "dialog-portal-content" }, { children: [jsx(StyledOverlay, { className: "dialog-overlay" }), jsx(StyledContent$1, __assign({ className: "dialog-styled-content" }, props, { children: children }))] })));
 };
 var StyledTitle = styled(DialogPrimitive.Title, {
     margin: 0,
@@ -1568,7 +1578,10 @@ var DialogContent = Content$2;
 var DialogTitle = StyledTitle;
 var DialogDescription = StyledDescription;
 var DialogClose = DialogPrimitive.Close;
-var IconButton = styled("button", {
+var DialogStyledContent = StyledContent$1;
+var DialogOverlay = StyledOverlay;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogIconButton = styled("button", {
     all: "unset",
     fontFamily: "inherit",
     borderRadius: "100%",
@@ -1585,7 +1598,7 @@ var IconButton = styled("button", {
     "&:hover": { backgroundColor: "$bg04" },
     "&:focus": { boxShadow: "0 0 0 2px $obolGreen" },
 });
-var DialogComponent = function (props) { return (jsxs(Dialog, __assign({ css: props.css }, { children: [jsx(DialogTrigger, __assign({ asChild: true }, { children: props.triggerElement })), jsxs(DialogContent, { children: [jsx(DialogTitle, __assign({ className: "dialog-title", css: { mb: "$xl" } }, { children: props.title })), jsx(DialogDescription, __assign({ className: "dialog-description" }, { children: props.description })), props.children, jsx(DialogClose, __assign({ asChild: true }, { children: jsx(IconButton, __assign({ "aria-label": "Close" }, { children: jsx(Cross2Icon, {}) })) }))] })] }))); };
+var DialogComponent = function (props) { return (jsxs(Dialog, __assign({ css: props.css }, { children: [jsx(DialogTrigger, __assign({ asChild: true }, { children: props.triggerElement })), jsxs(DialogContent, { children: [jsx(DialogTitle, __assign({ className: "dialog-title", css: { mb: "$xl" } }, { children: props.title })), jsx(DialogDescription, __assign({ className: "dialog-description" }, { children: props.description })), props.children, jsx(DialogClose, __assign({ asChild: true }, { children: jsx(DialogIconButton, __assign({ "aria-label": "Close" }, { children: jsx(Cross2Icon, {}) })) }))] })] }))); };
 
 var slideDown = keyframes({
     from: { height: 0 },
@@ -1800,7 +1813,7 @@ var Navbar = function (_a) {
                 },
             },
         } }, { children: children }))); };
-    var LogoIcon = function () { return (jsxs(Box, __assign({ css: {
+    var LogoIcon = function () { return (jsxs(Box, __assign({ as: "a", css: {
             display: "flex",
             flex: 1,
             justifyContent: "flex-start",
@@ -1808,11 +1821,11 @@ var Navbar = function (_a) {
             "@sm": {
                 pl: "$sm",
             },
-        } }, { children: [jsxs(Box, __assign({ as: "a", css: {
+        }, href: "/" }, { children: [jsxs(Box, __assign({ css: {
                     display: "flex",
                     alignItems: "center",
                     "@sm": { display: "none" },
-                }, href: "/" }, { children: [jsx(ObolDarkBgH, {}), logoText && (jsx(Text, __assign({ css: {
+                } }, { children: [jsx(ObolDarkBgH, {}), logoText && (jsx(Text, __assign({ css: {
                             fontSize: "28px",
                             color: "$muted",
                             fontWeight: "bold",
@@ -2136,7 +2149,7 @@ var SplitterTable = function (_a) {
                                                 if (onUpdateRow)
                                                     onUpdateRow(row.id, value, column.accessorKey);
                                             }, min: (_c = (_b = column.cell) === null || _b === void 0 ? void 0 : _b.config) === null || _c === void 0 ? void 0 : _c.min, max: (_e = (_d = column.cell) === null || _d === void 0 ? void 0 : _d.config) === null || _e === void 0 ? void 0 : _e.max, type: (_g = (_f = column.cell) === null || _f === void 0 ? void 0 : _f.config) === null || _g === void 0 ? void 0 : _g.type, readOnly: !isEditable })) }), "cell ".concat(cellIndex)));
-                                }), onRemoveRow && isRemovable && (jsx(Td, __assign({ splitter: true, size: "sm", css: { p: "$2" } }, { children: jsx(IconButton$1, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsx(TrashIcon, {}) })) })))] }, row.id));
+                                }), onRemoveRow && isRemovable && (jsx(Td, __assign({ splitter: true, size: "sm", css: { p: "$2" } }, { children: jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsx(TrashIcon, {}) })) })))] }, row.id));
                     }), jsx(AddNewRow, { onAddRow: onAddRow, totalSplitFooter: totalSplitFooter })] })] }));
 };
 var Table = function (_a) {
@@ -2353,4 +2366,4 @@ var TwoColumnSection = function (_a) {
                 } }, { children: !screenDownSm ? (jsx(Image, { src: image.basePath, width: "100%", height: "100%", alt: "Obol Logo" })) : (jsx(Image, { src: image.mobilePath || image.basePath, width: "100%", height: "100%", alt: "Obol Logo" })) }))] })));
 };
 
-export { Accordion, Advisory, AdvisoryToggleBullet, AdvisoryToggleItem, AlertIcon, AloneIcon, ArrowForward, Box, BulletCheckIcon, Button, ButtonStory, Card, CheckIcon, Checkbox, CheckboxIcon, CheckboxIndicator, CheckboxRoot, ChevronDownIcon, ChevronUpIcon, CloseIcon, CodeIcon, Container, CopyIcon, CreateIcon, Dialog, DialogClose, DialogComponent, DialogContent, DialogDescription, DialogTitle, DialogTrigger, Download, ExistingGroupIcon, Flex, Footer, GithubIcon, GroupIcon, HelpIcon, HeroSection, Hexapod, HexapodMobile, IconButton$1 as IconButton, IconButtonStory, Image, Link, LinkStory, LoadingButton, LogoCard, MediaQueryKeys, MenuIcon, MigrateIcon, MinusIcon, Navbar, NotificationCard, NotificationContainer, NumberField, ObolDarkBgH, ObolDarkBgMark, ObolDarkBgV, ObolDarkCircle, ObolLightBgH, ObolLightBgMark, ObolLightBgV, ObolLightCircle, ObolSolidDarkBgH, ObolSolidDarkBgMark, ObolSolidDarkBgV, ObolSolidLightBgH, ObolSolidLightBgMark, ObolSolidLightBgV, OpenInNew, PlanetBlue, PlanetGreen, PlanetGrey, PlanetMagenta, PlanetOrange, PlusIcon, ProgressTracker, Provider, PublicGoodIcon, RadioGroup, RadioGroupComponent, RadioGroupIndicator, RadioGroupItem, RadioGroupItemLabel, RadioGroupRadio, RunIcon, Spin, SplitterTable, SvgIcon, Table, Tabs$1 as Tabs, TeamMemberCard, TestIcon, Text, TextField, TextFieldWithCopy, TextStory, ToggleCardItem, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipComponent, TooltipContent, TooltipTrigger, TrashIcon, TrustMinimisedIcon, TwitterIcon, TwoColumnSection, WaitingIcon, config, createTheme, css, getCssText, globalCss, keyframes, modifyVariantsForStory, reset, styled, theme, useMediaQuery };
+export { Accordion, Advisory, AdvisoryToggleBullet, AdvisoryToggleItem, AlertIcon, AloneIcon, ArrowForward, Box, BulletCheckIcon, Button, ButtonStory, Card, CheckIcon, Checkbox, CheckboxIcon, CheckboxIndicator, CheckboxRoot, ChevronDownIcon, ChevronUpIcon, CloseIcon, CodeIcon, Container, CopyIcon, CreateIcon, Dialog, DialogClose, DialogComponent, DialogContent, DialogDescription, DialogIconButton, DialogOverlay, DialogPortal, DialogStyledContent, DialogTitle, DialogTrigger, Download, ExistingGroupIcon, Flex, Footer, GithubIcon, GroupIcon, HelpIcon, HeroSection, Hexapod, HexapodMobile, IconButton, IconButtonStory, Image, Link, LinkStory, LoadingButton, LogoCard, MediaQueryKeys, MenuIcon, MigrateIcon, MinusIcon, Navbar, NotificationCard, NotificationContainer, NumberField, ObolDarkBgH, ObolDarkBgMark, ObolDarkBgV, ObolDarkCircle, ObolLightBgH, ObolLightBgMark, ObolLightBgV, ObolLightCircle, ObolSolidDarkBgH, ObolSolidDarkBgMark, ObolSolidDarkBgV, ObolSolidLightBgH, ObolSolidLightBgMark, ObolSolidLightBgV, OpenInNew, PlanetBlue, PlanetGreen, PlanetGrey, PlanetMagenta, PlanetOrange, PlusIcon, ProgressTracker, Provider, PublicGoodIcon, RadioGroup, RadioGroupComponent, RadioGroupIndicator, RadioGroupItem, RadioGroupItemLabel, RadioGroupRadio, RunIcon, Spin, SplitterTable, SvgIcon, Table, Tabs$1 as Tabs, TeamMemberCard, TestIcon, Text, TextField, TextFieldWithCopy, TextStory, ToggleCardItem, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipComponent, TooltipContent, TooltipTrigger, TrashIcon, TrustMinimisedIcon, TwitterIcon, TwoColumnSection, WaitingIcon, config, createTheme, css, getCssText, globalCss, keyframes, modifyVariantsForStory, reset, styled, theme, useMediaQuery };

package/dist/index.js

@@ -768,6 +768,16 @@ var Text = styled("span", {
                 fontSize: "$2",
                 color: "$textMuted",
             },
+            pill: {
+                fontSize: "$3",
+                lineHeight: "16px",
+                color: "$$color",
+                border: " 1px solid $$color",
+                background: "rgba(60, 210, 221, 0.1)",
+                display: "inline-block",
+                borderRadius: "$1",
+                padding: "0 $xxxs",
+            }
         },
         size: {
             1: { fontSize: "$1" },
@@ -1245,7 +1255,7 @@ var LogoCard = function (props) {
 var ToggleGroup = styled(ToggleGroupPrimitive__namespace.Root, {});
 var ToggleGroupItem = styled(ToggleGroupPrimitive__namespace.Item, {});
 
-var IconButton$1 = styled("button", {
+var IconButton = styled("button", {
     //reset
     all: "unset",
     alignItems: "center",
@@ -1299,7 +1309,7 @@ var IconButton$1 = styled("button", {
         },
     },
 });
-var IconButtonStory = modifyVariantsForStory(IconButton$1);
+var IconButtonStory = modifyVariantsForStory(IconButton);
 
 var slideUpAndFade = keyframes({
     "0%": { opacity: 0, transform: "translateY(2px)" },
@@ -1445,7 +1455,7 @@ var TextFieldWithCopy = React.forwardRef(function (_a, ref) {
             onChange(e);
         }
     };
-    return (jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", width: "$full" } }, { children: [jsxRuntime.jsx(TextField, __assign({}, props, { withCopy: true, ref: innerRef, value: inputValue, onChange: handleOnChange, css: { width: "$full" } })), jsxRuntime.jsxs(Tooltip, __assign({ open: isCopied }, { children: [jsxRuntime.jsx(TooltipTrigger, __assign({ asChild: true }, { children: jsxRuntime.jsx(IconButton$1, __assign({ onClick: function () { return copyToClipBoard(inputValue); } }, { children: !isCopied ? jsxRuntime.jsx(CopyIcon, {}) : jsxRuntime.jsx(CheckIcon, {}) })) })), jsxRuntime.jsxs(Content$3, __assign({ side: "bottom", sideOffset: 5 }, { children: ["Copied!", jsxRuntime.jsx(TooltipArrow, {})] }))] }))] })));
+    return (jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", width: "$full" } }, { children: [jsxRuntime.jsx(TextField, __assign({}, props, { withCopy: true, ref: innerRef, value: inputValue, onChange: handleOnChange, css: { width: "$full" } })), jsxRuntime.jsxs(Tooltip, __assign({ open: isCopied }, { children: [jsxRuntime.jsx(TooltipTrigger, __assign({ asChild: true }, { children: jsxRuntime.jsx(IconButton, __assign({ onClick: function () { return copyToClipBoard(inputValue); } }, { children: !isCopied ? jsxRuntime.jsx(CopyIcon, {}) : jsxRuntime.jsx(CheckIcon, {}) })) })), jsxRuntime.jsxs(Content$3, __assign({ side: "bottom", sideOffset: 5 }, { children: ["Copied!", jsxRuntime.jsx(TooltipArrow, {})] }))] }))] })));
 });
 TextFieldWithCopy.displayName = "TextFieldWithCopy";
 
@@ -1471,7 +1481,7 @@ var NumberField = React.forwardRef(function (_a, ref) {
         }
     };
     var handleOnChange = function (e) {
-        var value = e.target.value;
+        var value = Number(e.target.value);
         if (value > max) {
             setQty(max);
         }
@@ -1521,7 +1531,7 @@ var NumberField = React.forwardRef(function (_a, ref) {
                 borderRadius: 0,
                 width: "95px",
             },
-        } }, { children: [jsxRuntime.jsx(IconButton$1, __assign({ disabled: qty <= min, className: "dec-button", onClick: handleOnDec, borderDisabled: qty <= min }, { children: jsxRuntime.jsx(MinusIcon, {}) })), jsxRuntime.jsx(TextField, { css: { borderRightStyle: "none", borderLeftStyle: "none" }, type: "number", ref: ref, value: qty, onChange: handleOnChange, onBlur: onBlur, name: name }), jsxRuntime.jsx(IconButton$1, __assign({ disabled: qty >= max, className: "inc-button", onClick: handleOnInc, borderDisabled: qty >= max }, { children: jsxRuntime.jsx(PlusIcon, {}) }))] })));
+        } }, { children: [jsxRuntime.jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick: handleOnDec, borderDisabled: qty <= min }, { children: jsxRuntime.jsx(MinusIcon, {}) })), 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: jsxRuntime.jsx(PlusIcon, {}) }))] })));
 });
 NumberField.displayName = "NumberField";
 
@@ -1580,7 +1590,7 @@ var StyledContent$1 = styled(DialogPrimitive__namespace.Content, {
 });
 var Content$2 = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (jsxRuntime.jsxs(DialogPrimitive__namespace.Portal, __assign({ className: "dialog-portal-content" }, { children: [jsxRuntime.jsx(StyledOverlay, {}), jsxRuntime.jsx(StyledContent$1, __assign({}, props, { children: children }))] })));
+    return (jsxRuntime.jsxs(DialogPrimitive__namespace.Portal, __assign({ className: "dialog-portal-content" }, { children: [jsxRuntime.jsx(StyledOverlay, { className: "dialog-overlay" }), jsxRuntime.jsx(StyledContent$1, __assign({ className: "dialog-styled-content" }, props, { children: children }))] })));
 };
 var StyledTitle = styled(DialogPrimitive__namespace.Title, {
     margin: 0,
@@ -1601,7 +1611,10 @@ var DialogContent = Content$2;
 var DialogTitle = StyledTitle;
 var DialogDescription = StyledDescription;
 var DialogClose = DialogPrimitive__namespace.Close;
-var IconButton = styled("button", {
+var DialogStyledContent = StyledContent$1;
+var DialogOverlay = StyledOverlay;
+var DialogPortal = DialogPrimitive__namespace.Portal;
+var DialogIconButton = styled("button", {
     all: "unset",
     fontFamily: "inherit",
     borderRadius: "100%",
@@ -1618,7 +1631,7 @@ var IconButton = styled("button", {
     "&:hover": { backgroundColor: "$bg04" },
     "&:focus": { boxShadow: "0 0 0 2px $obolGreen" },
 });
-var DialogComponent = function (props) { return (jsxRuntime.jsxs(Dialog, __assign({ css: props.css }, { children: [jsxRuntime.jsx(DialogTrigger, __assign({ asChild: true }, { children: props.triggerElement })), jsxRuntime.jsxs(DialogContent, { children: [jsxRuntime.jsx(DialogTitle, __assign({ className: "dialog-title", css: { mb: "$xl" } }, { children: props.title })), jsxRuntime.jsx(DialogDescription, __assign({ className: "dialog-description" }, { children: props.description })), props.children, jsxRuntime.jsx(DialogClose, __assign({ asChild: true }, { children: jsxRuntime.jsx(IconButton, __assign({ "aria-label": "Close" }, { children: jsxRuntime.jsx(reactIcons.Cross2Icon, {}) })) }))] })] }))); };
+var DialogComponent = function (props) { return (jsxRuntime.jsxs(Dialog, __assign({ css: props.css }, { children: [jsxRuntime.jsx(DialogTrigger, __assign({ asChild: true }, { children: props.triggerElement })), jsxRuntime.jsxs(DialogContent, { children: [jsxRuntime.jsx(DialogTitle, __assign({ className: "dialog-title", css: { mb: "$xl" } }, { children: props.title })), jsxRuntime.jsx(DialogDescription, __assign({ className: "dialog-description" }, { children: props.description })), props.children, jsxRuntime.jsx(DialogClose, __assign({ asChild: true }, { children: jsxRuntime.jsx(DialogIconButton, __assign({ "aria-label": "Close" }, { children: jsxRuntime.jsx(reactIcons.Cross2Icon, {}) })) }))] })] }))); };
 
 var slideDown = keyframes({
     from: { height: 0 },
@@ -1833,7 +1846,7 @@ var Navbar = function (_a) {
                 },
             },
         } }, { children: children }))); };
-    var LogoIcon = function () { return (jsxRuntime.jsxs(Box, __assign({ css: {
+    var LogoIcon = function () { return (jsxRuntime.jsxs(Box, __assign({ as: "a", css: {
             display: "flex",
             flex: 1,
             justifyContent: "flex-start",
@@ -1841,11 +1854,11 @@ var Navbar = function (_a) {
             "@sm": {
                 pl: "$sm",
             },
-        } }, { children: [jsxRuntime.jsxs(Box, __assign({ as: "a", css: {
+        }, href: "/" }, { children: [jsxRuntime.jsxs(Box, __assign({ css: {
                     display: "flex",
                     alignItems: "center",
                     "@sm": { display: "none" },
-                }, href: "/" }, { children: [jsxRuntime.jsx(ObolDarkBgH, {}), logoText && (jsxRuntime.jsx(Text, __assign({ css: {
+                } }, { children: [jsxRuntime.jsx(ObolDarkBgH, {}), logoText && (jsxRuntime.jsx(Text, __assign({ css: {
                             fontSize: "28px",
                             color: "$muted",
                             fontWeight: "bold",
@@ -2169,7 +2182,7 @@ var SplitterTable = function (_a) {
                                                 if (onUpdateRow)
                                                     onUpdateRow(row.id, value, column.accessorKey);
                                             }, min: (_c = (_b = column.cell) === null || _b === void 0 ? void 0 : _b.config) === null || _c === void 0 ? void 0 : _c.min, max: (_e = (_d = column.cell) === null || _d === void 0 ? void 0 : _d.config) === null || _e === void 0 ? void 0 : _e.max, type: (_g = (_f = column.cell) === null || _f === void 0 ? void 0 : _f.config) === null || _g === void 0 ? void 0 : _g.type, readOnly: !isEditable })) }), "cell ".concat(cellIndex)));
-                                }), onRemoveRow && isRemovable && (jsxRuntime.jsx(Td, __assign({ splitter: true, size: "sm", css: { p: "$2" } }, { children: jsxRuntime.jsx(IconButton$1, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsxRuntime.jsx(TrashIcon, {}) })) })))] }, row.id));
+                                }), onRemoveRow && isRemovable && (jsxRuntime.jsx(Td, __assign({ splitter: true, size: "sm", css: { p: "$2" } }, { children: jsxRuntime.jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsxRuntime.jsx(TrashIcon, {}) })) })))] }, row.id));
                     }), jsxRuntime.jsx(AddNewRow, { onAddRow: onAddRow, totalSplitFooter: totalSplitFooter })] })] }));
 };
 var Table = function (_a) {
@@ -2415,6 +2428,10 @@ exports.DialogClose = DialogClose;
 exports.DialogComponent = DialogComponent;
 exports.DialogContent = DialogContent;
 exports.DialogDescription = DialogDescription;
+exports.DialogIconButton = DialogIconButton;
+exports.DialogOverlay = DialogOverlay;
+exports.DialogPortal = DialogPortal;
+exports.DialogStyledContent = DialogStyledContent;
 exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;
 exports.Download = Download;
@@ -2427,7 +2444,7 @@ exports.HelpIcon = HelpIcon;
 exports.HeroSection = HeroSection;
 exports.Hexapod = Hexapod;
 exports.HexapodMobile = HexapodMobile;
-exports.IconButton = IconButton$1;
+exports.IconButton = IconButton;
 exports.IconButtonStory = IconButtonStory;
 exports.Image = Image;
 exports.Link = Link;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obolnetwork/obol-ui",
-  "version": "1.0.32",
+  "version": "1.0.34",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "license": "MIT",
@@ -35,22 +35,23 @@
   },
   "devDependencies": {
     "@babel/core": "^7.17.8",
-    "@storybook/addon-actions": "^6.4.20",
-    "@storybook/addon-essentials": "^6.4.20",
-    "@storybook/addon-interactions": "^6.4.20",
-    "@storybook/addon-links": "^6.4.20",
-    "@storybook/react": "^6.4.20",
-    "@storybook/testing-library": "^0.0.9",
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addon-interactions": "^6.5.12",
+    "@storybook/addon-links": "^6.5.12",
+    "@storybook/react": "^6.5.12",
+    "@storybook/testing-library": "^0.0.13",
     "@types/node": "17.0.21",
     "@types/react": "17.0.40",
     "babel-loader": "^8.2.4",
     "eslint": "8.11.0",
     "eslint-config-next": "12.1.0",
+    "eslint-plugin-storybook": "^0.6.4",
     "figma-api": "^1.10.1",
     "np": "^7.6.1",
     "rollup": "^2.70.1",
     "rollup-plugin-typescript2": "^0.31.2",
-    "storybook-addon-designs": "^6.2.1",
+    "storybook-addon-designs": "^6.3.1",
     "tslib": "^2.3.1",
     "typescript": "^4.6.3"
   },