@obolnetwork/obol-ui 1.0.30 → 1.0.32

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

@@ -6,8 +6,9 @@ export declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrim
 export declare const TooltipContent: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>>;
 export declare const TooltipArrow: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipArrowProps & React.RefAttributes<SVGSVGElement>>;
 export interface TooltipComponentProps extends TooltipPrimitive.TooltipProps {
+    content: React.ReactNode | string;
     side?: "top" | "bottom" | "right" | "left";
     sideOffset?: number;
-    content: React.ReactNode | string;
+    showOnClick?: boolean;
 }
 export declare const TooltipComponent: React.FC<TooltipComponentProps>;

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

@@ -16,3 +16,4 @@ export * from "./NumberField/NumberField";
 export * from './Tooltip/Tooltip';
 export * from './LoadingButton/LoadingButton';
 export * from './Checkbox/Checkbox';
+export * from './Dialog/Dialog';

package/dist/index.es.js

@@ -2,9 +2,11 @@ import { createStitches } from '@stitches/react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import React, { forwardRef, useState, useRef, useImperativeHandle, useEffect, useLayoutEffect } from 'react';
+import React, { useState, forwardRef, useRef, useImperativeHandle, useEffect, useLayoutEffect } from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { useRouter } from 'next/router';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -863,14 +865,14 @@ var StyledTrigger$1 = styled(TabsPrimitive.Trigger, {
         boxShadow: "inset 0 -2px 0 0 currentColor",
     },
 });
-var StyledContent$2 = styled(TabsPrimitive.Content, {
+var StyledContent$3 = styled(TabsPrimitive.Content, {
     flexGrow: 1,
 });
 // Exports
 var Tabs = StyledTabs;
 var TabsList = StyledList;
 var TabsTrigger = StyledTrigger$1;
-var TabsContent = StyledContent$2;
+var TabsContent = StyledContent$3;
 
 var Tabs$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -1134,11 +1136,10 @@ var TeamMemberCard = function (props) { return (jsxs(Box, __assign({ className:
         borderRadius: "$3",
         backgroundColor: "$bg04",
         alignItems: "center",
-        justifyItems: "center",
         width: "288px",
         gap: "$lg",
         py: "$xl",
-        "@sm": { gridTemplateColumns: "1fr 2fr", p: "$sm" },
+        "@sm": { gridTemplateColumns: "1fr 2fr", p: "$sm", height: "116px" },
     } }, { children: [jsx(Box, __assign({ css: {
                 $$size: "160px",
                 width: "$$size",
@@ -1160,7 +1161,7 @@ var TeamMemberCard = function (props) { return (jsxs(Box, __assign({ className:
             } }, { 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" },
+                "@sm": { justifyContent: "start", gridTemplateRows: "3fr 1fr" },
                 gap: "$sm",
             } }, { children: [jsxs(Box, __assign({ css: {
                         display: "flex",
@@ -1211,7 +1212,7 @@ var LogoCard = function (props) {
 var ToggleGroup = styled(ToggleGroupPrimitive.Root, {});
 var ToggleGroupItem = styled(ToggleGroupPrimitive.Item, {});
 
-var IconButton = styled("button", {
+var IconButton$1 = styled("button", {
     //reset
     all: "unset",
     alignItems: "center",
@@ -1265,7 +1266,7 @@ var IconButton = styled("button", {
         },
     },
 });
-var IconButtonStory = modifyVariantsForStory(IconButton);
+var IconButtonStory = modifyVariantsForStory(IconButton$1);
 
 var slideUpAndFade = keyframes({
     "0%": { opacity: 0, transform: "translateY(2px)" },
@@ -1283,7 +1284,7 @@ var slideLeftAndFade = keyframes({
     "0%": { opacity: 0, transform: "translateX(2px)" },
     "100%": { opacity: 1, transform: "translateX(0)" },
 });
-var StyledContent$1 = styled(TooltipPrimitive.Content, {
+var StyledContent$2 = styled(TooltipPrimitive.Content, {
     borderRadius: "$1",
     padding: "$sm",
     fontSize: "$3",
@@ -1316,8 +1317,10 @@ var TooltipTrigger = TooltipPrimitive.Trigger;
 var TooltipContent = TooltipPrimitive.Content;
 var TooltipArrow = TooltipPrimitive.Arrow;
 var TooltipComponent = function (_a) {
-    var _b = _a.side, side = _b === void 0 ? "bottom" : _b, _c = _a.sideOffset, sideOffset = _c === void 0 ? 5 : _c, children = _a.children, content = _a.content, props = __rest(_a, ["side", "sideOffset", "children", "content"]);
-    return (jsxs(Tooltip, __assign({}, props, { children: [jsx(TooltipTrigger, __assign({ asChild: true }, { children: children })), jsxs(StyledContent$1, __assign({ className: "tooltip-content", side: side, sideOffset: sideOffset }, { children: [content, jsx(StyledArrow, { className: "arrow" })] }))] })));
+    var _b = _a.side, side = _b === void 0 ? "bottom" : _b, _c = _a.sideOffset, sideOffset = _c === void 0 ? 5 : _c, children = _a.children, content = _a.content, showOnClick = _a.showOnClick, props = __rest(_a, ["side", "sideOffset", "children", "content", "showOnClick"]);
+    var _d = useState(false), open = _d[0], setOpen = _d[1];
+    var StyledContentComp = (jsxs(StyledContent$2, __assign({ className: "tooltip-content", side: side, sideOffset: sideOffset }, { children: [content, jsx(StyledArrow, { className: "arrow" })] })));
+    return (jsx(Provider, __assign({ delayDuration: 0, skipDelayDuration: 100 }, { children: showOnClick ? (jsxs(Tooltip, __assign({}, props, { open: open, onOpenChange: function () { return setOpen(false); } }, { children: [jsx(TooltipTrigger, __assign({ onClick: function () { return setOpen(true); }, asChild: true }, { children: children })), StyledContentComp] }))) : (jsxs(Tooltip, __assign({}, props, { children: [jsx(TooltipTrigger, __assign({ asChild: true }, { children: children })), StyledContentComp] }))) })));
 };
 TooltipComponent.displayName = "Tooltip";
 
@@ -1377,7 +1380,7 @@ function useTimeout(callback, delay) {
         return function () { return clearTimeout(id); };
     }, [delay]);
 }
-var Content$2 = styled(TooltipContent, {
+var Content$3 = styled(TooltipContent, {
     borderRadius: "$1",
     backgroundColor: "$bg05",
     p: "$xxs",
@@ -1409,7 +1412,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, __assign({ onClick: function () { return copyToClipBoard(inputValue); } }, { children: !isCopied ? jsx(CopyIcon, {}) : jsx(CheckIcon, {}) })) })), jsxs(Content$2, __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$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, {})] }))] }))] })));
 });
 TextFieldWithCopy.displayName = "TextFieldWithCopy";
 
@@ -1485,7 +1488,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(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, {}) }))] })));
+        } }, { 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, {}) }))] })));
 });
 NumberField.displayName = "NumberField";
 
@@ -1509,6 +1512,81 @@ var Checkbox = function (_a) {
     return (jsx(CheckboxRoot, __assign({}, props, { children: jsx(CheckboxIndicator, { children: jsx(CheckboxIcon, {}) }) })));
 };
 
+var overlayShow = keyframes({
+    "0%": { opacity: 0 },
+    "100%": { opacity: 1 },
+});
+var contentShow = keyframes({
+    "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
+    "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" },
+});
+var StyledOverlay = styled(DialogPrimitive.Overlay, {
+    backgroundColor: "hsla(190, 32%, 10%, 0.5)",
+    position: "fixed",
+    inset: 0,
+    "@media (prefers-reduced-motion: no-preference)": {
+        animation: "".concat(overlayShow, " 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards"),
+    },
+});
+var StyledContent$1 = styled(DialogPrimitive.Content, {
+    backgroundColor: "$bg02",
+    borderRadius: 6,
+    boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+    position: "fixed",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: "90vw",
+    maxWidth: "450px",
+    maxHeight: "85vh",
+    padding: "$3xl",
+    "@media (prefers-reduced-motion: no-preference)": {
+        animation: "".concat(contentShow, " 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards"),
+    },
+    "&:focus": { outline: "none" },
+});
+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 }))] })));
+};
+var StyledTitle = styled(DialogPrimitive.Title, {
+    margin: 0,
+    fontWeight: "$bold",
+    color: "$textLight",
+    fontSize: "$8",
+    textAlign: "center",
+});
+var StyledDescription = styled(DialogPrimitive.Description, {
+    margin: "10px 0 20px",
+    color: "$body",
+    fontSize: 15,
+    lineHeight: 1.5,
+});
+var Dialog = styled(DialogPrimitive.Root, {});
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogContent = Content$2;
+var DialogTitle = StyledTitle;
+var DialogDescription = StyledDescription;
+var DialogClose = DialogPrimitive.Close;
+var IconButton = styled("button", {
+    all: "unset",
+    fontFamily: "inherit",
+    borderRadius: "100%",
+    height: 25,
+    width: 25,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "$obolGreen",
+    position: "absolute",
+    top: 10,
+    right: 10,
+    cursor: "pointer",
+    "&: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 slideDown = keyframes({
     from: { height: 0 },
     to: { height: "var(--radix-accordion-content-height)" },
@@ -2058,7 +2136,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, __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$1, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsx(TrashIcon, {}) })) })))] }, row.id));
                     }), jsx(AddNewRow, { onAddRow: onAddRow, totalSplitFooter: totalSplitFooter })] })] }));
 };
 var Table = function (_a) {
@@ -2275,4 +2353,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, 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 };
+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 };

package/dist/index.js

@@ -9,6 +9,8 @@ var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
 var React = require('react');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
+var reactIcons = require('@radix-ui/react-icons');
+var DialogPrimitive = require('@radix-ui/react-dialog');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var router = require('next/router');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
@@ -38,6 +40,7 @@ var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
+var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 
@@ -895,14 +898,14 @@ var StyledTrigger$1 = styled(TabsPrimitive__namespace.Trigger, {
         boxShadow: "inset 0 -2px 0 0 currentColor",
     },
 });
-var StyledContent$2 = styled(TabsPrimitive__namespace.Content, {
+var StyledContent$3 = styled(TabsPrimitive__namespace.Content, {
     flexGrow: 1,
 });
 // Exports
 var Tabs = StyledTabs;
 var TabsList = StyledList;
 var TabsTrigger = StyledTrigger$1;
-var TabsContent = StyledContent$2;
+var TabsContent = StyledContent$3;
 
 var Tabs$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -1166,11 +1169,10 @@ var TeamMemberCard = function (props) { return (jsxRuntime.jsxs(Box, __assign({
         borderRadius: "$3",
         backgroundColor: "$bg04",
         alignItems: "center",
-        justifyItems: "center",
         width: "288px",
         gap: "$lg",
         py: "$xl",
-        "@sm": { gridTemplateColumns: "1fr 2fr", p: "$sm" },
+        "@sm": { gridTemplateColumns: "1fr 2fr", p: "$sm", height: "116px" },
     } }, { children: [jsxRuntime.jsx(Box, __assign({ css: {
                 $$size: "160px",
                 width: "$$size",
@@ -1192,7 +1194,7 @@ var TeamMemberCard = function (props) { return (jsxRuntime.jsxs(Box, __assign({
             } }, { 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" },
+                "@sm": { justifyContent: "start", gridTemplateRows: "3fr 1fr" },
                 gap: "$sm",
             } }, { children: [jsxRuntime.jsxs(Box, __assign({ css: {
                         display: "flex",
@@ -1243,7 +1245,7 @@ var LogoCard = function (props) {
 var ToggleGroup = styled(ToggleGroupPrimitive__namespace.Root, {});
 var ToggleGroupItem = styled(ToggleGroupPrimitive__namespace.Item, {});
 
-var IconButton = styled("button", {
+var IconButton$1 = styled("button", {
     //reset
     all: "unset",
     alignItems: "center",
@@ -1297,7 +1299,7 @@ var IconButton = styled("button", {
         },
     },
 });
-var IconButtonStory = modifyVariantsForStory(IconButton);
+var IconButtonStory = modifyVariantsForStory(IconButton$1);
 
 var slideUpAndFade = keyframes({
     "0%": { opacity: 0, transform: "translateY(2px)" },
@@ -1315,7 +1317,7 @@ var slideLeftAndFade = keyframes({
     "0%": { opacity: 0, transform: "translateX(2px)" },
     "100%": { opacity: 1, transform: "translateX(0)" },
 });
-var StyledContent$1 = styled(TooltipPrimitive__namespace.Content, {
+var StyledContent$2 = styled(TooltipPrimitive__namespace.Content, {
     borderRadius: "$1",
     padding: "$sm",
     fontSize: "$3",
@@ -1348,8 +1350,10 @@ var TooltipTrigger = TooltipPrimitive__namespace.Trigger;
 var TooltipContent = TooltipPrimitive__namespace.Content;
 var TooltipArrow = TooltipPrimitive__namespace.Arrow;
 var TooltipComponent = function (_a) {
-    var _b = _a.side, side = _b === void 0 ? "bottom" : _b, _c = _a.sideOffset, sideOffset = _c === void 0 ? 5 : _c, children = _a.children, content = _a.content, props = __rest(_a, ["side", "sideOffset", "children", "content"]);
-    return (jsxRuntime.jsxs(Tooltip, __assign({}, props, { children: [jsxRuntime.jsx(TooltipTrigger, __assign({ asChild: true }, { children: children })), jsxRuntime.jsxs(StyledContent$1, __assign({ className: "tooltip-content", side: side, sideOffset: sideOffset }, { children: [content, jsxRuntime.jsx(StyledArrow, { className: "arrow" })] }))] })));
+    var _b = _a.side, side = _b === void 0 ? "bottom" : _b, _c = _a.sideOffset, sideOffset = _c === void 0 ? 5 : _c, children = _a.children, content = _a.content, showOnClick = _a.showOnClick, props = __rest(_a, ["side", "sideOffset", "children", "content", "showOnClick"]);
+    var _d = React.useState(false), open = _d[0], setOpen = _d[1];
+    var StyledContentComp = (jsxRuntime.jsxs(StyledContent$2, __assign({ className: "tooltip-content", side: side, sideOffset: sideOffset }, { children: [content, jsxRuntime.jsx(StyledArrow, { className: "arrow" })] })));
+    return (jsxRuntime.jsx(Provider, __assign({ delayDuration: 0, skipDelayDuration: 100 }, { children: showOnClick ? (jsxRuntime.jsxs(Tooltip, __assign({}, props, { open: open, onOpenChange: function () { return setOpen(false); } }, { children: [jsxRuntime.jsx(TooltipTrigger, __assign({ onClick: function () { return setOpen(true); }, asChild: true }, { children: children })), StyledContentComp] }))) : (jsxRuntime.jsxs(Tooltip, __assign({}, props, { children: [jsxRuntime.jsx(TooltipTrigger, __assign({ asChild: true }, { children: children })), StyledContentComp] }))) })));
 };
 TooltipComponent.displayName = "Tooltip";
 
@@ -1409,7 +1413,7 @@ function useTimeout(callback, delay) {
         return function () { return clearTimeout(id); };
     }, [delay]);
 }
-var Content$2 = styled(TooltipContent, {
+var Content$3 = styled(TooltipContent, {
     borderRadius: "$1",
     backgroundColor: "$bg05",
     p: "$xxs",
@@ -1441,7 +1445,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, __assign({ onClick: function () { return copyToClipBoard(inputValue); } }, { children: !isCopied ? jsxRuntime.jsx(CopyIcon, {}) : jsxRuntime.jsx(CheckIcon, {}) })) })), jsxRuntime.jsxs(Content$2, __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$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, {})] }))] }))] })));
 });
 TextFieldWithCopy.displayName = "TextFieldWithCopy";
 
@@ -1517,7 +1521,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(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, {}) }))] })));
+        } }, { 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, {}) }))] })));
 });
 NumberField.displayName = "NumberField";
 
@@ -1541,6 +1545,81 @@ var Checkbox = function (_a) {
     return (jsxRuntime.jsx(CheckboxRoot, __assign({}, props, { children: jsxRuntime.jsx(CheckboxIndicator, { children: jsxRuntime.jsx(CheckboxIcon, {}) }) })));
 };
 
+var overlayShow = keyframes({
+    "0%": { opacity: 0 },
+    "100%": { opacity: 1 },
+});
+var contentShow = keyframes({
+    "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
+    "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" },
+});
+var StyledOverlay = styled(DialogPrimitive__namespace.Overlay, {
+    backgroundColor: "hsla(190, 32%, 10%, 0.5)",
+    position: "fixed",
+    inset: 0,
+    "@media (prefers-reduced-motion: no-preference)": {
+        animation: "".concat(overlayShow, " 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards"),
+    },
+});
+var StyledContent$1 = styled(DialogPrimitive__namespace.Content, {
+    backgroundColor: "$bg02",
+    borderRadius: 6,
+    boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+    position: "fixed",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: "90vw",
+    maxWidth: "450px",
+    maxHeight: "85vh",
+    padding: "$3xl",
+    "@media (prefers-reduced-motion: no-preference)": {
+        animation: "".concat(contentShow, " 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards"),
+    },
+    "&:focus": { outline: "none" },
+});
+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 }))] })));
+};
+var StyledTitle = styled(DialogPrimitive__namespace.Title, {
+    margin: 0,
+    fontWeight: "$bold",
+    color: "$textLight",
+    fontSize: "$8",
+    textAlign: "center",
+});
+var StyledDescription = styled(DialogPrimitive__namespace.Description, {
+    margin: "10px 0 20px",
+    color: "$body",
+    fontSize: 15,
+    lineHeight: 1.5,
+});
+var Dialog = styled(DialogPrimitive__namespace.Root, {});
+var DialogTrigger = DialogPrimitive__namespace.Trigger;
+var DialogContent = Content$2;
+var DialogTitle = StyledTitle;
+var DialogDescription = StyledDescription;
+var DialogClose = DialogPrimitive__namespace.Close;
+var IconButton = styled("button", {
+    all: "unset",
+    fontFamily: "inherit",
+    borderRadius: "100%",
+    height: 25,
+    width: 25,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "$obolGreen",
+    position: "absolute",
+    top: 10,
+    right: 10,
+    cursor: "pointer",
+    "&: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 slideDown = keyframes({
     from: { height: 0 },
     to: { height: "var(--radix-accordion-content-height)" },
@@ -2090,7 +2169,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, __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$1, __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) {
@@ -2331,6 +2410,13 @@ exports.CodeIcon = CodeIcon;
 exports.Container = Container;
 exports.CopyIcon = CopyIcon;
 exports.CreateIcon = CreateIcon;
+exports.Dialog = Dialog;
+exports.DialogClose = DialogClose;
+exports.DialogComponent = DialogComponent;
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogTitle = DialogTitle;
+exports.DialogTrigger = DialogTrigger;
 exports.Download = Download;
 exports.ExistingGroupIcon = ExistingGroupIcon;
 exports.Flex = Flex;
@@ -2341,7 +2427,7 @@ exports.HelpIcon = HelpIcon;
 exports.HeroSection = HeroSection;
 exports.Hexapod = Hexapod;
 exports.HexapodMobile = HexapodMobile;
-exports.IconButton = IconButton;
+exports.IconButton = IconButton$1;
 exports.IconButtonStory = IconButtonStory;
 exports.Image = Image;
 exports.Link = Link;

package/package.json

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