@obolnetwork/obol-ui 1.0.37 → 1.0.39

package/README.md

@@ -18,6 +18,60 @@ You can start editing the page by modifying `pages/index.tsx`. The page auto-upd
 
 The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
 
+## Testing
+We use Jest and React Testing Library for testing our React components and functions. Jest is a testing framework that provides us with test runners, assertions, and mocks, while React Testing Library is a set of utilities that helps us write tests that are closer to how our end-users will interact with our application.
+
+### Running tests
+To run the tests, simply run the following command in your terminal:
+
+```bash 
+yarn run test
+```
+
+This will start the Jest test runner, which will automatically find and run all the tests in our project that match the naming pattern *.test.js or *.spec.js. located at __tests__ You can also run a specific test file by running the following command:
+
+```bash
+yarn run test <path-to-file>
+```
+
+This will run only the tests in the Button.test.js file.
+
+### Writing tests
+We write tests using Jest and React Testing Library in the same file as the component or function we are testing. For example, if we are testing a component called Button, we would create a file called Button.test.js in the same directory as the Button.js file.
+
+Here's an example test file:
+
+```typescript
+import { Button } from "../../../components/atoms/Button/Button";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+describe("Button Component", () => {
+  describe("On Click Listener", () => {
+    const user = userEvent.setup();
+    const mockProps = {
+      onClick: jest.fn(),
+    };
+
+    test("Calls onClick function passed in", async () => {
+      render(<Button {...mockProps}>test</Button>);
+
+      const testButton = screen.getByText("test");
+      await user.click(testButton);
+
+      expect(mockProps.onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+});
+```
+
+In this example, we're testing the Button component by rendering it with different props and checking that the correct elements are present and that the onClick function is called when the button is clicked.
+
+Husky and pre-commit hooks
+We use Husky to manage Git hooks, such as pre-commit hooks. Our pre-commit hook runs the tests before committing any code changes, ensuring that we only commit code that passes all the tests.
+
+If you try to commit changes that break the tests, Husky will prevent the commit from going through and display an error message in your terminal.
+
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:

package/dist/__test__/components/atoms/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const LogoCard: (props: {
     image: string;
     heading: string;

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

@@ -13,8 +13,8 @@ export * from "./Toggle/Toggle";
 export * from "./IconButton/IconButton";
 export * from "./TextField/TextField";
 export * from "./NumberField/NumberField";
-export * from './Tooltip/Tooltip';
-export * from './LoadingButton/LoadingButton';
-export * from './Checkbox/Checkbox';
-export * from './Switch/Switch';
-export * from './Dialog/Dialog';
+export * from "./Tooltip/Tooltip";
+export * from "./LoadingButton/LoadingButton";
+export * from "./Checkbox/Checkbox";
+export * from "./Switch/Switch";
+export * from "./Dialog/Dialog";

package/dist/components/icons/AlertIcon.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { SvgIconProps } from "../atoms/SvgIcon/SvgIcon";
 export declare const AlertIcon: (props: SvgIconProps) => JSX.Element;

package/dist/components/icons/ArrowForward.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { SvgIconProps } from "../atoms/SvgIcon/SvgIcon";
 export declare const ArrowForward: (props: SvgIconProps) => JSX.Element;

package/dist/components/icons/ChevronDownIcon.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { SvgIconProps } from "../atoms/SvgIcon/SvgIcon";
 export declare const ChevronDownIcon: (props: SvgIconProps) => JSX.Element;

package/dist/components/icons/ChevronUpIcon.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { SvgIconProps } from "../atoms/SvgIcon/SvgIcon";
 export declare const ChevronUpIcon: (props: SvgIconProps) => JSX.Element;

package/dist/components/icons/CloseIcon.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { SvgIconProps } from "../atoms/SvgIcon/SvgIcon";
 export declare const CloseIcon: (props: SvgIconProps) => JSX.Element;

package/dist/components/icons/Download.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { SvgIconProps } from "../atoms/SvgIcon/SvgIcon";
 export declare const Download: (props: SvgIconProps) => JSX.Element;

package/dist/components/icons/Hexapod.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const Hexapod: () => JSX.Element;
 export declare const HexapodMobile: () => JSX.Element;

package/dist/components/icons/OpenInNew.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { SvgIconProps } from "../atoms/SvgIcon/SvgIcon";
 export declare const OpenInNew: (props: SvgIconProps) => JSX.Element;

package/dist/components/icons/static-icons/BulletCheckIcon.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const BulletCheckIcon: () => JSX.Element;

package/dist/components/icons/static-icons/CheckIcon.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const CheckIcon: () => JSX.Element;

package/dist/components/icons/static-icons/CheckboxIcon.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const CheckboxIcon: () => JSX.Element;

package/dist/components/icons/static-icons/Coinbase.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const Coinbase: () => JSX.Element;

package/dist/components/icons/static-icons/CopyIcon.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const CopyIcon: () => JSX.Element;

package/dist/components/icons/static-icons/GithubIcon.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const GithubIcon: () => JSX.Element;

package/dist/components/icons/static-icons/HelpIcon.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const HelpIcon: () => JSX.Element;

package/dist/components/icons/static-icons/MenuIcon.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const MenuIcon: () => JSX.Element;

package/dist/components/icons/static-icons/Metamask.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const Metamask: () => JSX.Element;

package/dist/components/icons/static-icons/MinusIcon.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const MinusIcon: () => JSX.Element;

package/dist/components/icons/static-icons/PlusIcon.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const PlusIcon: () => JSX.Element;

package/dist/components/icons/static-icons/TrashIcon.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const TrashIcon: () => JSX.Element;

package/dist/components/icons/static-icons/TwitterIcon.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const TwitterIcon: () => JSX.Element;

package/dist/components/icons/static-icons/WaitingIcon.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const WaitingIcon: () => JSX.Element;

package/dist/components/icons/static-icons/WalletConnect.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const WalletConnect: () => JSX.Element;

package/dist/components/icons/static-icons/obol/circle/ObolDarkCircle.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ObolDarkCircle: () => JSX.Element;

package/dist/components/icons/static-icons/obol/circle/ObolLightCircle.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ObolLightCircle: () => JSX.Element;

package/dist/components/icons/static-icons/obol/circle/index.d.ts

@@ -1,2 +1,2 @@
-export * from './ObolDarkCircle';
-export * from './ObolLightCircle';
+export * from "./ObolDarkCircle";
+export * from "./ObolLightCircle";

package/dist/components/icons/static-icons/obol/horizontal/ObolDarkBgH.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ObolDarkBgH: () => JSX.Element;

package/dist/components/icons/static-icons/obol/horizontal/ObolLightBgH.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ObolLightBgH: () => JSX.Element;

package/dist/components/icons/static-icons/obol/horizontal/ObolSolidDarkBgH.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ObolSolidDarkBgH: () => JSX.Element;

package/dist/components/icons/static-icons/obol/horizontal/ObolSolidLightBgH.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ObolSolidLightBgH: () => JSX.Element;

package/dist/components/icons/static-icons/obol/horizontal/index.d.ts

@@ -1,4 +1,4 @@
-export * from './ObolDarkBgH';
-export * from './ObolLightBgH';
-export * from './ObolSolidDarkBgH';
-export * from './ObolSolidLightBgH';
+export * from "./ObolDarkBgH";
+export * from "./ObolLightBgH";
+export * from "./ObolSolidDarkBgH";
+export * from "./ObolSolidLightBgH";

package/dist/components/icons/static-icons/obol/mark/ObolDarkBgMark.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ObolDarkBgMark: () => JSX.Element;

package/dist/components/icons/static-icons/obol/mark/ObolLightBgMark.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ObolLightBgMark: () => JSX.Element;

package/dist/components/icons/static-icons/obol/mark/ObolSolidDarkBgMark.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ObolSolidDarkBgMark: () => JSX.Element;

package/dist/components/icons/static-icons/obol/mark/ObolSolidLightBgMark.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ObolSolidLightBgMark: () => JSX.Element;

package/dist/components/icons/static-icons/obol/mark/index.d.ts

@@ -1,4 +1,4 @@
-export * from './ObolDarkBgMark';
-export * from './ObolLightBgMark';
-export * from './ObolSolidDarkBgMark';
-export * from './ObolSolidLightBgMark';
+export * from "./ObolDarkBgMark";
+export * from "./ObolLightBgMark";
+export * from "./ObolSolidDarkBgMark";
+export * from "./ObolSolidLightBgMark";

package/dist/components/icons/static-icons/obol/vertical/ObolDarkBgV.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ObolDarkBgV: () => JSX.Element;

package/dist/components/icons/static-icons/obol/vertical/ObolLightBgV.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ObolLightBgV: () => JSX.Element;

package/dist/components/icons/static-icons/obol/vertical/ObolSolidDarkBgV.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ObolSolidDarkBgV: () => JSX.Element;

package/dist/components/icons/static-icons/obol/vertical/ObolSolidLightBgV.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ObolSolidLightBgV: () => JSX.Element;

package/dist/components/icons/static-icons/obol/vertical/index.d.ts

@@ -1,4 +1,4 @@
-export * from './ObolDarkBgV';
-export * from './ObolLightBgV';
-export * from './ObolSolidDarkBgV';
-export * from './ObolSolidLightBgV';
+export * from "./ObolDarkBgV";
+export * from "./ObolLightBgV";
+export * from "./ObolSolidDarkBgV";
+export * from "./ObolSolidLightBgV";

package/dist/components/icons/static-icons/planets/PlanetBlue.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const PlanetBlue: () => JSX.Element;

package/dist/components/icons/static-icons/planets/PlanetGreen.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const PlanetGreen: () => JSX.Element;

package/dist/components/icons/static-icons/planets/PlanetGrey.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const PlanetGrey: () => JSX.Element;

package/dist/components/icons/static-icons/planets/PlanetMagenta.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const PlanetMagenta: () => JSX.Element;

package/dist/components/icons/static-icons/planets/PlanetOrange.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const PlanetOrange: () => JSX.Element;

package/dist/components/icons/static-icons/planets/index.d.ts

@@ -1,5 +1,5 @@
-export * from './PlanetGrey';
-export * from './PlanetBlue';
-export * from './PlanetOrange';
-export * from './PlanetGreen';
-export * from './PlanetMagenta';
+export * from "./PlanetGrey";
+export * from "./PlanetBlue";
+export * from "./PlanetOrange";
+export * from "./PlanetGreen";
+export * from "./PlanetMagenta";

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

@@ -1,8 +1,8 @@
-export * as Accordion from './Accordion/Accordion';
-export * from './AdvisoryToggle/AdvisoryToggle';
-export * from './Card/Card';
-export * from './Navbar/Navbar';
-export * from './NotificationCard/NotificationCard';
-export * from './ProgressTracker/ProgressTracker';
-export * from './RadioGroup/RadioGroup';
-export * from './Table/Table';
+export * as Accordion from "./Accordion/Accordion";
+export * from "./AdvisoryToggle/AdvisoryToggle";
+export * from "./Card/Card";
+export * from "./Navbar/Navbar";
+export * from "./NotificationCard/NotificationCard";
+export * from "./ProgressTracker/ProgressTracker";
+export * from "./RadioGroup/RadioGroup";
+export * from "./Table/Table";

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

@@ -1,4 +1,4 @@
-export * from './Advisory/Advisory';
-export * from './Footer/Footer';
-export * from './HeroSection/HeroSection';
-export * from './TwoColumnSection/TwoColumnSection';
+export * from "./Advisory/Advisory";
+export * from "./Footer/Footer";
+export * from "./HeroSection/HeroSection";
+export * from "./TwoColumnSection/TwoColumnSection";

package/dist/components/utils/hooks/index.d.ts

@@ -1 +1 @@
-export * from './use-media-query';
+export * from "./use-media-query";

package/dist/components/utils/hooks/use-media-query.d.ts

@@ -1,5 +1,5 @@
 import { mediaQueryKeys } from "../../../stitches.config";
-declare type MediaQueryKeysType = typeof mediaQueryKeys[keyof typeof mediaQueryKeys];
+declare type MediaQueryKeysType = (typeof mediaQueryKeys)[keyof typeof mediaQueryKeys];
 export declare function useMediaQuery(query: MediaQueryKeysType): boolean;
 export declare const MediaQueryKeys: {
     readonly xs: "(max-width: 520px)";

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

@@ -1,2 +1,2 @@
-export * from './hooks';
-export * from './types';
+export * from "./hooks";
+export * from "./types";

package/dist/components/utils/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type * as Stitches from "@stitches/react";
 interface StitchesMedia {
     [x: string]: any;

package/dist/index.d.ts

@@ -3,4 +3,4 @@ export * from "./components/icons";
 export * from "./components/molecules";
 export * from "./components/organisms";
 export * from "./components/utils";
-export { styled, css, theme, createTheme, getCssText, globalCss, keyframes, config, reset } from "./stitches.config";
+export { styled, css, theme, createTheme, getCssText, globalCss, keyframes, config, reset, } from "./stitches.config";

package/dist/index.es.js

@@ -437,7 +437,7 @@ SvgIcon.defaultProps = {
     xmlns: "http://www.w3.org/2000/svg",
 };
 
-var Box = styled('div', {});
+var Box = styled("div", {});
 
 function modifyVariantsForStory(component) {
     return component;
@@ -746,7 +746,7 @@ var Text = styled("span", {
                 display: "inline-block",
                 borderRadius: "$1",
                 padding: "0 $xxxs",
-            }
+            },
         },
         size: {
             1: { fontSize: "$1" },
@@ -958,7 +958,7 @@ var Container = styled(Box, {
     },
 });
 
-var Image = styled('img', {
+var Image = styled("img", {
     // reset
     verticalAlign: "middle",
     maxWidth: "100%",
@@ -1147,7 +1147,6 @@ var TeamMemberCard = function (props) { return (jsxs(Box, __assign({ className:
         gridTemplateColumns: "1fr",
         borderRadius: "$3",
         backgroundColor: "$bg04",
-        alignItems: "center",
         width: "288px",
         gap: "$lg",
         py: "$xl",
@@ -1156,6 +1155,7 @@ var TeamMemberCard = function (props) { return (jsxs(Box, __assign({ className:
                 $$size: "160px",
                 width: "$$size",
                 height: "$$size",
+                placeSelf: "center",
                 "@sm": { $$size: "100px" },
                 "&::after": {
                     position: "absolute",
@@ -1424,7 +1424,10 @@ 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$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 (e) {
+                                e.preventDefault();
+                                copyToClipBoard(inputValue);
+                            } }, { children: !isCopied ? jsx(CopyIcon, {}) : jsx(CheckIcon, {}) })) })), jsxs(Content$3, __assign({ side: "bottom", sideOffset: 5 }, { children: ["Copied!", jsx(TooltipArrow, {})] }))] }))] })));
 });
 TextFieldWithCopy.displayName = "TextFieldWithCopy";
 
@@ -1533,7 +1536,7 @@ var SwitchRoot = styled(ReactSwitch.Root, {
     padding: "0",
     "&[data-state='checked']": {
         backgroundColor: "$obolGreen",
-    }
+    },
 });
 var SwitchThumb = styled(ReactSwitch.Thumb, {
     display: "block",
@@ -1545,7 +1548,7 @@ var SwitchThumb = styled(ReactSwitch.Thumb, {
     transform: "translateX(4px)",
     "&[data-state='checked']": {
         transform: "translateX(40px)",
-    }
+    },
 });
 var Switch = function (_a) {
     var props = __rest(_a, []);
@@ -1738,7 +1741,7 @@ var AdvisoryToggleBullet = function (props) {
             minHeight: "$2xl",
             pl: "calc($2xl - 2px)",
             ml: "-2px",
-            borderLeft: "2px solid transparent"
+            borderLeft: "2px solid transparent",
         } }, { children: [props.state === "completed" ? (jsx(Box, { children: jsx(BulletCheckIcon, {}) })) : (jsx(Box, { children: jsx(Box, __assign({ css: {
                         display: "grid",
                         placeItems: "center",
@@ -2213,7 +2216,7 @@ var Advisory = function (_a) {
             border: "2px solid $bg04",
             borderRadius: "$3",
             minHeight: "752px",
-        } }, { children: [jsx(Box, __assign({ css: {
+        } }, { children: [jsx(Box, __assign({ className: "advisory-toggles", css: {
                     display: "flex",
                     fd: "column",
                     flex: 1,
@@ -2222,6 +2225,7 @@ var Advisory = function (_a) {
                     borderRight: "2px solid $bg04",
                     btlr: "$2",
                     bblr: "$2",
+                    width: "330px",
                 } }, { children: jsx(ToggleGroup, __assign({ css: {
                         display: "flex",
                         fd: "column",
@@ -2233,7 +2237,7 @@ var Advisory = function (_a) {
                                 onItemChange(content);
                             }
                         }
-                    } }, { children: props.items.map(function (item, index) { return (jsx(AdvisoryToggleItem, __assign({ disabled: item.state === "upcoming", value: item.value, "aria-label": item.title, css: { borderLeftWidth: "0px" }, "data-state-item": item.value === itemSelected.value ? "selected" : "" }, { children: jsx(AdvisoryToggleBullet, __assign({ state: item.state, rank: item.rank, onClick: function () { return console.log("enable next, complete this"); } }, { children: item.title }), ":ab".concat(index, ":")) }), ":at".concat(index, ":"))); }) })) })), jsx(Box, __assign({ css: {
+                    } }, { children: props.items.map(function (item, index) { return (jsx(AdvisoryToggleItem, __assign({ disabled: item.state === "upcoming", value: item.value, "aria-label": item.title, css: { borderLeftWidth: "0px" }, "data-state-item": item.value === itemSelected.value ? "selected" : "" }, { children: jsx(AdvisoryToggleBullet, __assign({ state: item.state, rank: item.rank, onClick: function () { return console.log("enable next, complete this"); } }, { children: item.title }), ":ab".concat(index, ":")) }), ":at".concat(index, ":"))); }) })) })), jsx(Box, __assign({ className: "advisory-content", css: {
                     display: "flex",
                     flex: 2,
                     fd: "column",
@@ -2318,10 +2322,10 @@ function useMediaQuery(query) {
     return matches;
 }
 var MediaQueryKeys = {
-    xs: '(max-width: 520px)',
-    sm: '(max-width: 900px)',
-    md: '(max-width: 1200px)',
-    lg: '(max-width: 1800px)',
+    xs: "(max-width: 520px)",
+    sm: "(max-width: 900px)",
+    md: "(max-width: 1200px)",
+    lg: "(max-width: 1800px)",
 };
 
 var BASE_PATH = "/assets/hexapod.svg";

package/dist/index.js

@@ -471,7 +471,7 @@ SvgIcon.defaultProps = {
     xmlns: "http://www.w3.org/2000/svg",
 };
 
-var Box = styled('div', {});
+var Box = styled("div", {});
 
 function modifyVariantsForStory(component) {
     return component;
@@ -780,7 +780,7 @@ var Text = styled("span", {
                 display: "inline-block",
                 borderRadius: "$1",
                 padding: "0 $xxxs",
-            }
+            },
         },
         size: {
             1: { fontSize: "$1" },
@@ -992,7 +992,7 @@ var Container = styled(Box, {
     },
 });
 
-var Image = styled('img', {
+var Image = styled("img", {
     // reset
     verticalAlign: "middle",
     maxWidth: "100%",
@@ -1181,7 +1181,6 @@ var TeamMemberCard = function (props) { return (jsxRuntime.jsxs(Box, __assign({
         gridTemplateColumns: "1fr",
         borderRadius: "$3",
         backgroundColor: "$bg04",
-        alignItems: "center",
         width: "288px",
         gap: "$lg",
         py: "$xl",
@@ -1190,6 +1189,7 @@ var TeamMemberCard = function (props) { return (jsxRuntime.jsxs(Box, __assign({
                 $$size: "160px",
                 width: "$$size",
                 height: "$$size",
+                placeSelf: "center",
                 "@sm": { $$size: "100px" },
                 "&::after": {
                     position: "absolute",
@@ -1458,7 +1458,10 @@ 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$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 (e) {
+                                e.preventDefault();
+                                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";
 
@@ -1567,7 +1570,7 @@ var SwitchRoot = styled(ReactSwitch__namespace.Root, {
     padding: "0",
     "&[data-state='checked']": {
         backgroundColor: "$obolGreen",
-    }
+    },
 });
 var SwitchThumb = styled(ReactSwitch__namespace.Thumb, {
     display: "block",
@@ -1579,7 +1582,7 @@ var SwitchThumb = styled(ReactSwitch__namespace.Thumb, {
     transform: "translateX(4px)",
     "&[data-state='checked']": {
         transform: "translateX(40px)",
-    }
+    },
 });
 var Switch = function (_a) {
     var props = __rest(_a, []);
@@ -1772,7 +1775,7 @@ var AdvisoryToggleBullet = function (props) {
             minHeight: "$2xl",
             pl: "calc($2xl - 2px)",
             ml: "-2px",
-            borderLeft: "2px solid transparent"
+            borderLeft: "2px solid transparent",
         } }, { children: [props.state === "completed" ? (jsxRuntime.jsx(Box, { children: jsxRuntime.jsx(BulletCheckIcon, {}) })) : (jsxRuntime.jsx(Box, { children: jsxRuntime.jsx(Box, __assign({ css: {
                         display: "grid",
                         placeItems: "center",
@@ -2247,7 +2250,7 @@ var Advisory = function (_a) {
             border: "2px solid $bg04",
             borderRadius: "$3",
             minHeight: "752px",
-        } }, { children: [jsxRuntime.jsx(Box, __assign({ css: {
+        } }, { children: [jsxRuntime.jsx(Box, __assign({ className: "advisory-toggles", css: {
                     display: "flex",
                     fd: "column",
                     flex: 1,
@@ -2256,6 +2259,7 @@ var Advisory = function (_a) {
                     borderRight: "2px solid $bg04",
                     btlr: "$2",
                     bblr: "$2",
+                    width: "330px",
                 } }, { children: jsxRuntime.jsx(ToggleGroup, __assign({ css: {
                         display: "flex",
                         fd: "column",
@@ -2267,7 +2271,7 @@ var Advisory = function (_a) {
                                 onItemChange(content);
                             }
                         }
-                    } }, { children: props.items.map(function (item, index) { return (jsxRuntime.jsx(AdvisoryToggleItem, __assign({ disabled: item.state === "upcoming", value: item.value, "aria-label": item.title, css: { borderLeftWidth: "0px" }, "data-state-item": item.value === itemSelected.value ? "selected" : "" }, { children: jsxRuntime.jsx(AdvisoryToggleBullet, __assign({ state: item.state, rank: item.rank, onClick: function () { return console.log("enable next, complete this"); } }, { children: item.title }), ":ab".concat(index, ":")) }), ":at".concat(index, ":"))); }) })) })), jsxRuntime.jsx(Box, __assign({ css: {
+                    } }, { children: props.items.map(function (item, index) { return (jsxRuntime.jsx(AdvisoryToggleItem, __assign({ disabled: item.state === "upcoming", value: item.value, "aria-label": item.title, css: { borderLeftWidth: "0px" }, "data-state-item": item.value === itemSelected.value ? "selected" : "" }, { children: jsxRuntime.jsx(AdvisoryToggleBullet, __assign({ state: item.state, rank: item.rank, onClick: function () { return console.log("enable next, complete this"); } }, { children: item.title }), ":ab".concat(index, ":")) }), ":at".concat(index, ":"))); }) })) })), jsxRuntime.jsx(Box, __assign({ className: "advisory-content", css: {
                     display: "flex",
                     flex: 2,
                     fd: "column",
@@ -2352,10 +2356,10 @@ function useMediaQuery(query) {
     return matches;
 }
 var MediaQueryKeys = {
-    xs: '(max-width: 520px)',
-    sm: '(max-width: 900px)',
-    md: '(max-width: 1200px)',
-    lg: '(max-width: 1800px)',
+    xs: "(max-width: 520px)",
+    sm: "(max-width: 900px)",
+    md: "(max-width: 1200px)",
+    lg: "(max-width: 1800px)",
 };
 
 var BASE_PATH = "/assets/hexapod.svg";

package/dist/jest.config.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obolnetwork/obol-ui",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "license": "MIT",
@@ -16,7 +16,11 @@
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "ds:build": "rollup -c",
-    "ds:release": "yarn ds:build && np"
+    "ds:release": "yarn ds:build && np",
+    "test": "jest",
+    "prepare": "husky install",
+    "format:write": "prettier --write \"**/*.{css,js,json,jsx,ts,tsx}\"",
+    "format": "prettier \"**/*.{css,js,json,jsx,ts,tsx}\""
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^0.1.6",
@@ -42,14 +46,25 @@
     "@storybook/addon-links": "^6.5.12",
     "@storybook/react": "^6.5.12",
     "@storybook/testing-library": "^0.0.13",
+    "@testing-library/dom": "^9.0.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "12.1.5",
+    "@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-prettier": "^8.6.0",
     "eslint-plugin-storybook": "^0.6.4",
     "figma-api": "^1.10.1",
+    "husky": ">=7",
+    "jest": "^29.4.3",
+    "jest-environment-jsdom": "^29.4.3",
+    "lint-staged": ">=10",
     "np": "^7.6.1",
+    "prettier": "^2.8.4",
     "rollup": "^2.70.1",
     "rollup-plugin-typescript2": "^0.31.2",
     "storybook-addon-designs": "^6.3.1",
@@ -59,5 +74,9 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
+  },
+  "lint-staged": {
+    "*.js": "eslint --cache --fix",
+    "*.{js,css,md}": "prettier --write"
   }
 }

package/dist/components/organisms/ObolEcosystem/ObolEcosystem.d.ts

@@ -1 +0,0 @@
-export declare const ObolEcosystem: () => JSX.Element;