@obolnetwork/obol-ui 1.0.39 → 1.0.40-beta

package/dist/index.es.js

@@ -1,4 +1,5 @@
 import { createStitches } from '@stitches/react';
+import NextLink from 'next/link';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
@@ -12,7 +13,7 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { useRouter } from 'next/router';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -499,10 +500,12 @@ var Button = styled("button", {
                 "&:hover": {
                     $$color: "$colors$textGreenHover",
                     $$background: "$colors$obolGreenHover",
-                    "& svg": {
-                        "& path": {
-                            fill: "$textGreenHover",
-                            stroke: "$textGreenHover",
+                    "&:not([class*='disableColorChange']):hover": {
+                        "& svg": {
+                            "& path": {
+                                fill: "$textGreenHover",
+                                stroke: "$textGreenHover",
+                            },
                         },
                     },
                 },
@@ -527,10 +530,12 @@ var Button = styled("button", {
                 "&:hover": {
                     $$background: "$colors$createHover",
                     $$color: "$colors$textCreateHover",
-                    "& svg": {
-                        "& path": {
-                            fill: "$textCreateHover",
-                            stroke: "$textCreateHover",
+                    "&:not([class*='disableColorChange']):hover": {
+                        "& svg": {
+                            "& path": {
+                                fill: "$textCreateHover",
+                                stroke: "$textCreateHover",
+                            },
                         },
                     },
                 },
@@ -540,10 +545,12 @@ var Button = styled("button", {
                 "&:hover": {
                     $$background: "$colors$testHover",
                     $$color: "$colors$textGrayHover",
-                    "& svg": {
-                        "& path": {
-                            fill: "$textGrayHover",
-                            stroke: "$textGrayHover",
+                    "&:not([class*='disableColorChange']):hover": {
+                        "& svg": {
+                            "& path": {
+                                fill: "$textGrayHover",
+                                stroke: "$textGrayHover",
+                            },
                         },
                     },
                 },
@@ -553,10 +560,12 @@ var Button = styled("button", {
                 "&:hover": {
                     $$background: "$colors$coordinateHover",
                     $$color: "$colors$textGrayHover",
-                    "& svg": {
-                        "& path": {
-                            fill: "$textGrayHover",
-                            stroke: "$textGrayHover",
+                    "&:not([class*='disableColorChange']):hover": {
+                        "& svg": {
+                            "& path": {
+                                fill: "$textGrayHover",
+                                stroke: "$textGrayHover",
+                            },
                         },
                     },
                 },
@@ -624,7 +633,7 @@ var Button = styled("button", {
 var ButtonStory = modifyVariantsForStory(Button);
 // export const WalletButton =
 
-var Link = styled("a", {
+var Link = styled(NextLink, {
     display: "flex",
     gap: "$xxs",
     alignItems: "center",
@@ -1633,6 +1642,31 @@ var DialogIconButton = styled("button", {
 });
 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 UnstyledTextField = styled(TextField, {
+    fontSize: "$4",
+    border: "none",
+    borderRadius: "0",
+    backgroundColor: "transparent",
+    px: 0,
+    py: 0,
+    "&:focus": {
+        backgroundColor: "transparent",
+    },
+});
+
+var Flex = styled("div", {
+    boxSizing: "border-box",
+    display: "flex",
+    width: "$full",
+    variants: {
+        direction: {
+            column: {
+                fd: "column",
+            },
+        },
+    },
+});
+
 var slideDown = keyframes({
     from: { height: 0 },
     to: { height: "var(--radix-accordion-content-height)" },
@@ -1752,7 +1786,9 @@ var AdvisoryToggleBullet = function (props) {
                         fontSize: "$3",
                         fontWeight: "$bold",
                         color: props.state === "upcoming" ? "$muted" : "$obolGreen",
-                    } }, { children: props.rank })) })), jsx(Text, __assign({ color: color }, { children: props.children }))] })));
+                    } }, { children: props.rank })) })), jsx(Text, __assign({ css: {
+                    lineHeight: "$lg",
+                }, color: color }, { children: props.children }))] })));
 };
 
 var CardImage = styled(Image, {
@@ -2203,6 +2239,15 @@ var Table = function (_a) {
                     }) }, "row ".concat(rowIndex))); }) })] }));
 };
 
+var ENSInputField = function (_a) {
+    var children = _a.children, ensName = _a.ensName, value = _a.value, handleOnChange = _a.handleOnChange, nonEditable = _a.nonEditable, css = _a.css;
+    return (jsx(Flex, __assign({ direction: "column", css: css }, { children: jsxs(Flex, __assign({ css: { gap: "$xxs" } }, { children: [jsxs(Flex, __assign({ direction: "column" }, { children: [ensName && (jsx(Text, __assign({ size: "4", color: "textLight" }, { children: ensName }))), jsx(UnstyledTextField, { css: {
+                                color: "$obolGreen",
+                            }, placeholder: "Ethereum address or ENS name", onChange: function (e) {
+                                return handleOnChange(e.target.value);
+                            }, value: value, readOnly: nonEditable })] })), children] })) })));
+};
+
 var Advisory = function (_a) {
     var onUpdateState = _a.onUpdateState, onItemChange = _a.onItemChange, onComplete = _a.onComplete, onBack = _a.onBack, itemSelected = _a.itemSelected, props = __rest(_a, ["onUpdateState", "onItemChange", "onComplete", "onBack", "itemSelected"]);
     var handleOnBack = function (value) {
@@ -2246,8 +2291,7 @@ var Advisory = function (_a) {
                     btrr: "$2",
                     bbrr: "$2",
                 } }, { children: itemSelected.content(itemSelected.rank, itemSelected.enableNextStep, handleOnAccept, handleOnBack, onComplete) }))] })));
-};
-var Flex = styled(Box, { display: "flex", fd: "column" });
+};
 
 var defaultLinks = [
     {
@@ -2408,4 +2452,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, 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, Switch, SwitchRoot, SwitchThumb, 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, ENSInputField, 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, Switch, SwitchRoot, SwitchThumb, Table, Tabs$1 as Tabs, TeamMemberCard, TestIcon, Text, TextField, TextFieldWithCopy, TextStory, ToggleCardItem, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipComponent, TooltipContent, TooltipTrigger, TrashIcon, TrustMinimisedIcon, TwitterIcon, TwoColumnSection, UnstyledTextField, WaitingIcon, config, createTheme, css, getCssText, globalCss, keyframes, modifyVariantsForStory, reset, styled, theme, useMediaQuery };

package/dist/index.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('@stitches/react');
+var NextLink = require('next/link');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var jsxRuntime = require('react/jsx-runtime');
 var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
@@ -36,6 +37,7 @@ function _interopNamespace(e) {
     return Object.freeze(n);
 }
 
+var NextLink__default = /*#__PURE__*/_interopDefaultLegacy(NextLink);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
@@ -46,7 +48,7 @@ var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive)
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -533,10 +535,12 @@ var Button = styled("button", {
                 "&:hover": {
                     $$color: "$colors$textGreenHover",
                     $$background: "$colors$obolGreenHover",
-                    "& svg": {
-                        "& path": {
-                            fill: "$textGreenHover",
-                            stroke: "$textGreenHover",
+                    "&:not([class*='disableColorChange']):hover": {
+                        "& svg": {
+                            "& path": {
+                                fill: "$textGreenHover",
+                                stroke: "$textGreenHover",
+                            },
                         },
                     },
                 },
@@ -561,10 +565,12 @@ var Button = styled("button", {
                 "&:hover": {
                     $$background: "$colors$createHover",
                     $$color: "$colors$textCreateHover",
-                    "& svg": {
-                        "& path": {
-                            fill: "$textCreateHover",
-                            stroke: "$textCreateHover",
+                    "&:not([class*='disableColorChange']):hover": {
+                        "& svg": {
+                            "& path": {
+                                fill: "$textCreateHover",
+                                stroke: "$textCreateHover",
+                            },
                         },
                     },
                 },
@@ -574,10 +580,12 @@ var Button = styled("button", {
                 "&:hover": {
                     $$background: "$colors$testHover",
                     $$color: "$colors$textGrayHover",
-                    "& svg": {
-                        "& path": {
-                            fill: "$textGrayHover",
-                            stroke: "$textGrayHover",
+                    "&:not([class*='disableColorChange']):hover": {
+                        "& svg": {
+                            "& path": {
+                                fill: "$textGrayHover",
+                                stroke: "$textGrayHover",
+                            },
                         },
                     },
                 },
@@ -587,10 +595,12 @@ var Button = styled("button", {
                 "&:hover": {
                     $$background: "$colors$coordinateHover",
                     $$color: "$colors$textGrayHover",
-                    "& svg": {
-                        "& path": {
-                            fill: "$textGrayHover",
-                            stroke: "$textGrayHover",
+                    "&:not([class*='disableColorChange']):hover": {
+                        "& svg": {
+                            "& path": {
+                                fill: "$textGrayHover",
+                                stroke: "$textGrayHover",
+                            },
                         },
                     },
                 },
@@ -658,7 +668,7 @@ var Button = styled("button", {
 var ButtonStory = modifyVariantsForStory(Button);
 // export const WalletButton =
 
-var Link = styled("a", {
+var Link = styled(NextLink__default["default"], {
     display: "flex",
     gap: "$xxs",
     alignItems: "center",
@@ -1667,6 +1677,31 @@ var DialogIconButton = styled("button", {
 });
 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 UnstyledTextField = styled(TextField, {
+    fontSize: "$4",
+    border: "none",
+    borderRadius: "0",
+    backgroundColor: "transparent",
+    px: 0,
+    py: 0,
+    "&:focus": {
+        backgroundColor: "transparent",
+    },
+});
+
+var Flex = styled("div", {
+    boxSizing: "border-box",
+    display: "flex",
+    width: "$full",
+    variants: {
+        direction: {
+            column: {
+                fd: "column",
+            },
+        },
+    },
+});
+
 var slideDown = keyframes({
     from: { height: 0 },
     to: { height: "var(--radix-accordion-content-height)" },
@@ -1786,7 +1821,9 @@ var AdvisoryToggleBullet = function (props) {
                         fontSize: "$3",
                         fontWeight: "$bold",
                         color: props.state === "upcoming" ? "$muted" : "$obolGreen",
-                    } }, { children: props.rank })) })), jsxRuntime.jsx(Text, __assign({ color: color }, { children: props.children }))] })));
+                    } }, { children: props.rank })) })), jsxRuntime.jsx(Text, __assign({ css: {
+                    lineHeight: "$lg",
+                }, color: color }, { children: props.children }))] })));
 };
 
 var CardImage = styled(Image, {
@@ -2237,6 +2274,15 @@ var Table = function (_a) {
                     }) }, "row ".concat(rowIndex))); }) })] }));
 };
 
+var ENSInputField = function (_a) {
+    var children = _a.children, ensName = _a.ensName, value = _a.value, handleOnChange = _a.handleOnChange, nonEditable = _a.nonEditable, css = _a.css;
+    return (jsxRuntime.jsx(Flex, __assign({ direction: "column", css: css }, { children: jsxRuntime.jsxs(Flex, __assign({ css: { gap: "$xxs" } }, { children: [jsxRuntime.jsxs(Flex, __assign({ direction: "column" }, { children: [ensName && (jsxRuntime.jsx(Text, __assign({ size: "4", color: "textLight" }, { children: ensName }))), jsxRuntime.jsx(UnstyledTextField, { css: {
+                                color: "$obolGreen",
+                            }, placeholder: "Ethereum address or ENS name", onChange: function (e) {
+                                return handleOnChange(e.target.value);
+                            }, value: value, readOnly: nonEditable })] })), children] })) })));
+};
+
 var Advisory = function (_a) {
     var onUpdateState = _a.onUpdateState, onItemChange = _a.onItemChange, onComplete = _a.onComplete, onBack = _a.onBack, itemSelected = _a.itemSelected, props = __rest(_a, ["onUpdateState", "onItemChange", "onComplete", "onBack", "itemSelected"]);
     var handleOnBack = function (value) {
@@ -2280,8 +2326,7 @@ var Advisory = function (_a) {
                     btrr: "$2",
                     bbrr: "$2",
                 } }, { children: itemSelected.content(itemSelected.rank, itemSelected.enableNextStep, handleOnAccept, handleOnBack, onComplete) }))] })));
-};
-var Flex = styled(Box, { display: "flex", fd: "column" });
+};
 
 var defaultLinks = [
     {
@@ -2478,6 +2523,7 @@ exports.DialogStyledContent = DialogStyledContent;
 exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;
 exports.Download = Download;
+exports.ENSInputField = ENSInputField;
 exports.ExistingGroupIcon = ExistingGroupIcon;
 exports.Flex = Flex;
 exports.Footer = Footer;
@@ -2559,6 +2605,7 @@ exports.TrashIcon = TrashIcon;
 exports.TrustMinimisedIcon = TrustMinimisedIcon;
 exports.TwitterIcon = TwitterIcon;
 exports.TwoColumnSection = TwoColumnSection;
+exports.UnstyledTextField = UnstyledTextField;
 exports.WaitingIcon = WaitingIcon;
 exports.config = config;
 exports.createTheme = createTheme;

package/dist/stitches.config.d.ts

@@ -407,11 +407,11 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
             [x: number]: CSS_1;
         };
     } | undefined;
-    compoundVariants?: (("variants" extends keyof Composers[K] ? { [Name in keyof Composers[K][keyof Composers[K] & "variants"]]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name]> | undefined; } : import("@stitches/react/types/util").WideObject) & {
+    compoundVariants?: (("variants" extends keyof Composers[K] ? Composers[K][keyof Composers[K] & "variants"] extends infer T ? { [Name in keyof T]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name]> | undefined; } : never : import("@stitches/react/types/util").WideObject) & {
         css: CSS_1;
     })[] | undefined;
-    defaultVariants?: ("variants" extends keyof Composers[K] ? { [Name_1 in keyof Composers[K][keyof Composers[K] & "variants"]]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]> | undefined; } : import("@stitches/react/types/util").WideObject) | undefined;
-} & CSS_1 & { [K2 in keyof Composers[K]]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS_1 ? CSS_1[K2] : unknown; }; }) => import("@stitches/react/types/styled-component").StyledComponent<Type, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {
+    defaultVariants?: ("variants" extends keyof Composers[K] ? Composers[K][keyof Composers[K] & "variants"] extends infer T_1 ? { [Name_1 in keyof T_1]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]> | undefined; } : never : import("@stitches/react/types/util").WideObject) | undefined;
+} & CSS_1 & (Composers[K] extends infer T_2 ? { [K2 in keyof T_2]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS_1 ? CSS_1[K2] : unknown; } : never); }) => import("@stitches/react/types/styled-component").StyledComponent<Type, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {
     motion: "(prefers-reduced-motion)";
     hover: "(any-hover: hover)";
     dark: "(prefers-color-scheme: dark)";
@@ -1210,11 +1210,11 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
             [x: number]: CSS_1;
         };
     } | undefined;
-    compoundVariants?: (("variants" extends keyof Composers[K] ? { [Name in keyof Composers[K][keyof Composers[K] & "variants"]]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name]> | undefined; } : import("@stitches/react/types/util").WideObject) & {
+    compoundVariants?: (("variants" extends keyof Composers[K] ? Composers[K][keyof Composers[K] & "variants"] extends infer T ? { [Name in keyof T]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name]> | undefined; } : never : import("@stitches/react/types/util").WideObject) & {
         css: CSS_1;
     })[] | undefined;
-    defaultVariants?: ("variants" extends keyof Composers[K] ? { [Name_1 in keyof Composers[K][keyof Composers[K] & "variants"]]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]> | undefined; } : import("@stitches/react/types/util").WideObject) | undefined;
-} & CSS_1 & { [K2 in keyof Composers[K]]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS_1 ? CSS_1[K2] : unknown; }; }) => import("@stitches/react/types/styled-component").CssComponent<import("@stitches/react/types/styled-component").StyledComponentType<Composers>, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {
+    defaultVariants?: ("variants" extends keyof Composers[K] ? Composers[K][keyof Composers[K] & "variants"] extends infer T_1 ? { [Name_1 in keyof T_1]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]> | undefined; } : never : import("@stitches/react/types/util").WideObject) | undefined;
+} & CSS_1 & (Composers[K] extends infer T_2 ? { [K2 in keyof T_2]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS_1 ? CSS_1[K2] : unknown; } : never); }) => import("@stitches/react/types/styled-component").CssComponent<import("@stitches/react/types/styled-component").StyledComponentType<Composers>, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {
     motion: "(prefers-reduced-motion)";
     hover: "(any-hover: hover)";
     dark: "(prefers-color-scheme: dark)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obolnetwork/obol-ui",
-  "version": "1.0.39",
+  "version": "1.0.40-beta",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "license": "MIT",
@@ -16,7 +16,7 @@
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "ds:build": "rollup -c",
-    "ds:release": "yarn ds:build && np",
+    "ds:release": "np patch --no-2fa",
     "test": "jest",
     "prepare": "husky install",
     "format:write": "prettier --write \"**/*.{css,js,json,jsx,ts,tsx}\"",
@@ -33,9 +33,9 @@
     "@radix-ui/react-toggle-group": "^0.1.5",
     "@radix-ui/react-tooltip": "^0.1.7",
     "@stitches/react": "~1.2.8",
-    "next": "12.1.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "next": "^13.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "uuidv4": "^6.2.13"
   },
   "devDependencies": {
@@ -45,22 +45,22 @@
     "@storybook/addon-interactions": "^6.5.12",
     "@storybook/addon-links": "^6.5.12",
     "@storybook/react": "^6.5.12",
-    "@storybook/testing-library": "^0.0.13",
-    "@testing-library/dom": "^9.0.0",
+    "@storybook/testing-library": "^0.1.0",
+    "@testing-library/dom": "^9.2.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "12.1.5",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/node": "17.0.21",
     "@types/react": "17.0.40",
     "babel-loader": "^8.2.4",
     "cross-env": "^7.0.3",
     "eslint": "8.11.0",
-    "eslint-config-next": "12.1.0",
+    "eslint-config-next": "^13.3.1-canary.6",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-storybook": "^0.6.4",
     "figma-api": "^1.10.1",
     "husky": ">=7",
-    "jest": "^29.4.3",
+    "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.4.3",
     "lint-staged": ">=10",
     "np": "^7.6.1",
@@ -68,8 +68,10 @@
     "rollup": "^2.70.1",
     "rollup-plugin-typescript2": "^0.31.2",
     "storybook-addon-designs": "^6.3.1",
+    "ts-node": "^10.9.1",
     "tslib": "^2.3.1",
-    "typescript": "^4.6.3"
+    "typescript": "~4.7.4",
+    "use": "^3.1.1"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",