@obolnetwork/obol-ui 1.1.15 → 1.1.18

package/README.md

@@ -1,88 +1,69 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# @obolnetwork/obol-ui
 
-## Getting Started
+Obol Network's shared React component library, built with [Stitches](https://stitches.dev/) and organised using [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) principles.
 
-First, run the development server:
+## Installation
 
 ```bash
-npm run dev
+yarn add @obolnetwork/obol-ui
 # or
-yarn dev
+npm install @obolnetwork/obol-ui
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Usage
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+```tsx
+import { Button, Text, Flex } from "@obolnetwork/obol-ui";
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-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.
+export default function App() {
+  return (
+    <Flex direction="column" gap="2">
+      <Text>Hello from Obol UI</Text>
+      <Button onClick={() => console.log("clicked")}>Get Started</Button>
+    </Flex>
+  );
+}
+```
 
-## 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.
+### Theme setup
 
-### Running tests
-To run the tests, simply run the following command in your terminal:
+Obol UI uses Stitches for styling. Import and apply the global CSS reset in your app's entry point:
 
-```bash 
-yarn run test
+```tsx
+import { globalCss, getCssText } from "@obolnetwork/obol-ui";
 ```
 
-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:
+## Components
 
-```bash
-yarn run test <path-to-file>
-```
+The library follows Atomic Design methodology:
 
-This will run only the tests in the Button.test.js file.
+**Atoms** — Avatar, Badge, Box, Button, Checkbox, Container, Flex, Grid, IconButton, Image, Link, NavigationMenu, NumberField, ProgressBar, Separator, Skeleton, Switch, Text, TextField, Toggle, Tooltip, and more.
 
-### 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.
+**Molecules** — Accordion, Card, Dialog, Navbar, NotificationCard, Pagination, Profile, ProgressTracker, RadioGroup, ResponsiveDialog, Table, Tabs, and more.
 
-Here's an example test file:
+**Organisms** — Advisory, Footer, HeroSection, Selector, TwoColumnSection.
 
-```typescript
-import { Button } from "../../../components/atoms/Button/Button";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+**Utilities** — Color variants, media query hooks, shared styles and types.
 
-describe("Button Component", () => {
-  describe("On Click Listener", () => {
-    const user = userEvent.setup();
-    const mockProps = {
-      onClick: jest.fn(),
-    };
+## Development
 
-    test("Calls onClick function passed in", async () => {
-      render(<Button {...mockProps}>test</Button>);
+```bash
+# Run Storybook for local component development
+yarn storybook
 
-      const testButton = screen.getByText("test");
-      await user.click(testButton);
+# Build the design system
+yarn ds:build
 
-      expect(mockProps.onClick).toHaveBeenCalledTimes(1);
-    });
-  });
-});
+# Run tests
+yarn test
 ```
 
-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:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+## Links
 
-## Deploy on Vercel
+- [Obol Network](https://obol.org)
+- [Documentation](https://docs.obol.org)
+- [GitHub](https://github.com/ObolNetwork/obol-packages)
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## License
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+MIT

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

@@ -88,6 +88,15 @@ export declare const AvatarComponent: import("@stitches/react/types/styled-compo
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;
@@ -578,6 +587,15 @@ export declare const AvatarImage: import("@stitches/react/types/styled-component
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;

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

@@ -85,6 +85,15 @@ export declare const Box: import("@stitches/react/types/styled-component").Style
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;

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

@@ -96,6 +96,15 @@ export declare const Button: import("@stitches/react/types/styled-component").St
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;

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

@@ -87,6 +87,15 @@ export declare const CheckboxRoot: import("@stitches/react/types/styled-componen
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;

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

@@ -85,6 +85,15 @@ export declare const Container: import("@stitches/react/types/styled-component")
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;
@@ -580,6 +589,15 @@ export declare const Container: import("@stitches/react/types/styled-component")
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;

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

@@ -87,6 +87,15 @@ export declare const Flex: import("@stitches/react/types/styled-component").Styl
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;

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

@@ -87,6 +87,15 @@ export declare const GridRoot: import("@stitches/react/types/styled-component").
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;

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

@@ -91,6 +91,15 @@ export declare const IconButton: import("@stitches/react/types/styled-component"
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;

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

@@ -85,6 +85,15 @@ export declare const Image: import("@stitches/react/types/styled-component").Sty
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;

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

@@ -119,6 +119,15 @@ export declare const Link: import("@stitches/react/types/styled-component").Styl
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;

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

@@ -95,6 +95,15 @@ export declare const NavigationMenubarItemRightSlot: import("@stitches/react/typ
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;
@@ -585,6 +594,15 @@ export declare const NavigationMenubarItem: import("@stitches/react/types/styled
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;
@@ -1075,6 +1093,15 @@ export declare const NavigationMenubarContent: import("@stitches/react/types/sty
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;
@@ -1565,6 +1592,15 @@ export declare const NavigationMenubarTrigger: import("@stitches/react/types/sty
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;
@@ -2055,6 +2091,15 @@ export declare const NavigationMenubarRoot: import("@stitches/react/types/styled
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;

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

@@ -0,0 +1,6 @@
+export declare type ScoreGrade = "A" | "B" | "C" | "D" | "F";
+export interface ScoreBadgeProps {
+    /** Letter grade from charon test (A–F). Omit or pass undefined to show an empty state. */
+    score?: string;
+}
+export declare const ScoreBadge: ({ score }: ScoreBadgeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -87,6 +87,15 @@ export declare const Separator: import("@stitches/react/types/styled-component")
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;

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

@@ -87,6 +87,15 @@ export declare const Skeleton: import("@stitches/react/types/styled-component").
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;

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

@@ -1,6 +1,6 @@
 import * as Stitches from "@stitches/react";
 export declare const Spin: import("@stitches/react/types/styled-component").StyledComponent<"div", {
-    color?: "white" | "black" | "lightBackground" | "obolBlue" | "primaryBgDefault" | "primaryBgDefaultHover" | "primaryTextDefault" | "secondaryBgDefault" | "secondaryBgHover" | "grayBgDefault" | "gray2BgDefault" | "neutralDark" | "navButtonBgDefault" | "navButtonBgHover" | "cardBackgroundDark" | "cardBackgroundLight" | "gradientGold" | "gradientSilver" | "gradientBronze" | "textMiddle" | "textLight" | "textLighter" | "textTabHover" | "textTabInactive" | "textGreenDark" | "textGreenLight" | "textGreen1" | "textGreen2" | "textGreen3" | "textGreenHover" | "textCreateHover" | "textGrayHover" | "txButton" | "obolGreen" | "obolMidGreen" | "obolGreenHover" | "obolGreenLight" | "obolDarkDark" | "obolDisabled" | "linkButtonHover" | "progressTrackerGreen" | "lightGrey" | "obolGold" | "coordinate" | "coordinateHover" | "test" | "testHover" | "create" | "createHover" | "light" | "body" | "muted" | "menu" | "bg01" | "bg02" | "bg03" | "bg04" | "bg05" | "tooltip" | "tooltip2" | "skeletonBg" | undefined;
+    color?: "white" | "black" | "lightBackground" | "obolBlue" | "primaryBgDefault" | "primaryBgDefaultHover" | "primaryTextDefault" | "secondaryBgDefault" | "secondaryBgHover" | "grayBgDefault" | "gray2BgDefault" | "neutralDark" | "navButtonBgDefault" | "navButtonBgHover" | "cardBackgroundDark" | "cardBackgroundLight" | "gradientGold" | "gradientSilver" | "gradientBronze" | "textMiddle" | "textLight" | "textLighter" | "textTabHover" | "textTabInactive" | "textGreenDark" | "textGreenLight" | "textGreen1" | "textGreen2" | "textGreen3" | "textGreenHover" | "textCreateHover" | "textGrayHover" | "txButton" | "obolGreen" | "obolMidGreen" | "obolGreenHover" | "obolGreenLight" | "obolDarkDark" | "obolDisabled" | "linkButtonHover" | "progressTrackerGreen" | "lightGrey" | "obolGold" | "coordinate" | "coordinateHover" | "test" | "testHover" | "create" | "createHover" | "light" | "body" | "muted" | "menu" | "bg01" | "bg02" | "bg03" | "bg04" | "bg05" | "tooltip" | "tooltip2" | "skeletonBg" | "purpleLight" | "purpleLightHover" | "tealDark" | "purpleDark" | "grayMedium" | undefined;
     size?: "sm" | "md" | "lg" | "xl" | undefined;
 }, {
     motion: "(prefers-reduced-motion)";
@@ -89,6 +89,15 @@ export declare const Spin: import("@stitches/react/types/styled-component").Styl
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;

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

@@ -1,8 +1,10 @@
 import type * as Stitches from "@stitches/react";
 import { CSS } from "../../../stitches.config";
 export declare const SvgIcon: import("@stitches/react/types/styled-component").StyledComponent<"svg", {
-    color?: "white" | "black" | "lightBackground" | "obolBlue" | "primaryBgDefault" | "primaryBgDefaultHover" | "primaryTextDefault" | "secondaryBgDefault" | "secondaryBgHover" | "grayBgDefault" | "gray2BgDefault" | "neutralDark" | "navButtonBgDefault" | "navButtonBgHover" | "cardBackgroundDark" | "cardBackgroundLight" | "gradientGold" | "gradientSilver" | "gradientBronze" | "textMiddle" | "textLight" | "textLighter" | "textTabHover" | "textTabInactive" | "textGreenDark" | "textGreenLight" | "textGreen1" | "textGreen2" | "textGreen3" | "textGreenHover" | "textCreateHover" | "textGrayHover" | "txButton" | "obolGreen" | "obolMidGreen" | "obolGreenHover" | "obolGreenLight" | "obolDarkDark" | "obolDisabled" | "linkButtonHover" | "progressTrackerGreen" | "lightGrey" | "obolGold" | "coordinate" | "coordinateHover" | "test" | "testHover" | "create" | "createHover" | "light" | "body" | "muted" | "menu" | "bg01" | "bg02" | "bg03" | "bg04" | "bg05" | "tooltip" | "tooltip2" | "skeletonBg" | "inherit" | undefined;
-    size?: "inherit" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
+    color?: "white" | "black" | "lightBackground" | "obolBlue" | "primaryBgDefault" | "primaryBgDefaultHover" | "primaryTextDefault" | "secondaryBgDefault" | "secondaryBgHover" | "grayBgDefault" | "gray2BgDefault" | "neutralDark" | "navButtonBgDefault" | "navButtonBgHover" | "cardBackgroundDark" | "cardBackgroundLight" | "gradientGold" | "gradientSilver" | "gradientBronze" | "textMiddle" | "textLight" | "textLighter" | "textTabHover" | "textTabInactive" | "textGreenDark" | "textGreenLight" | "textGreen1" | "textGreen2" | "textGreen3" | "textGreenHover" | "textCreateHover" | "textGrayHover" | "txButton" | "obolGreen" | "obolMidGreen" | "obolGreenHover" | "obolGreenLight" | "obolDarkDark" | "obolDisabled" | "linkButtonHover" | "progressTrackerGreen" | "lightGrey" | "obolGold" | "coordinate" | "coordinateHover" | "test" | "testHover" | "create" | "createHover" | "light" | "body" | "muted" | "menu" | "bg01" | "bg02" | "bg03" | "bg04" | "bg05" | "tooltip" | "tooltip2" | "skeletonBg" | "purpleLight" | "purpleLightHover" | "tealDark" | "purpleDark" | "grayMedium" | "inherit" | undefined;
+    size?: "inherit" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | undefined;
+    width?: "inherit" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | undefined;
+    height?: "inherit" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | undefined;
     fillColor?: boolean | "true" | "false" | undefined;
     strokeColor?: boolean | "true" | "false" | undefined;
     transform?: "xAxis" | undefined;
@@ -93,6 +95,15 @@ export declare const SvgIcon: import("@stitches/react/types/styled-component").S
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;

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

@@ -87,6 +87,15 @@ export declare const SwitchRoot: import("@stitches/react/types/styled-component"
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;
@@ -577,6 +586,15 @@ export declare const SwitchThumb: import("@stitches/react/types/styled-component
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;

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

@@ -3,7 +3,7 @@ import type * as Stitches from "@stitches/react";
 export declare const Text: import("@stitches/react/types/styled-component").StyledComponent<"span", {
     variant?: "body" | "pill" | "h1" | "h2" | "h3" | "h4" | "h5" | "metadata" | "subline" | "ens" | "metricStatusCell" | "helper" | undefined;
     size?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined;
-    color?: "white" | "black" | "lightBackground" | "obolBlue" | "primaryBgDefault" | "primaryBgDefaultHover" | "primaryTextDefault" | "secondaryBgDefault" | "secondaryBgHover" | "grayBgDefault" | "gray2BgDefault" | "neutralDark" | "navButtonBgDefault" | "navButtonBgHover" | "cardBackgroundDark" | "cardBackgroundLight" | "gradientGold" | "gradientSilver" | "gradientBronze" | "textMiddle" | "textLight" | "textLighter" | "textTabHover" | "textTabInactive" | "textGreenDark" | "textGreenLight" | "textGreen1" | "textGreen2" | "textGreen3" | "textGreenHover" | "textCreateHover" | "textGrayHover" | "txButton" | "obolGreen" | "obolMidGreen" | "obolGreenHover" | "obolGreenLight" | "obolDarkDark" | "obolDisabled" | "linkButtonHover" | "progressTrackerGreen" | "lightGrey" | "obolGold" | "coordinate" | "coordinateHover" | "test" | "testHover" | "create" | "createHover" | "light" | "body" | "muted" | "menu" | "bg01" | "bg02" | "bg03" | "bg04" | "bg05" | "tooltip" | "tooltip2" | "skeletonBg" | undefined;
+    color?: "white" | "black" | "lightBackground" | "obolBlue" | "primaryBgDefault" | "primaryBgDefaultHover" | "primaryTextDefault" | "secondaryBgDefault" | "secondaryBgHover" | "grayBgDefault" | "gray2BgDefault" | "neutralDark" | "navButtonBgDefault" | "navButtonBgHover" | "cardBackgroundDark" | "cardBackgroundLight" | "gradientGold" | "gradientSilver" | "gradientBronze" | "textMiddle" | "textLight" | "textLighter" | "textTabHover" | "textTabInactive" | "textGreenDark" | "textGreenLight" | "textGreen1" | "textGreen2" | "textGreen3" | "textGreenHover" | "textCreateHover" | "textGrayHover" | "txButton" | "obolGreen" | "obolMidGreen" | "obolGreenHover" | "obolGreenLight" | "obolDarkDark" | "obolDisabled" | "linkButtonHover" | "progressTrackerGreen" | "lightGrey" | "obolGold" | "coordinate" | "coordinateHover" | "test" | "testHover" | "create" | "createHover" | "light" | "body" | "muted" | "menu" | "bg01" | "bg02" | "bg03" | "bg04" | "bg05" | "tooltip" | "tooltip2" | "skeletonBg" | "purpleLight" | "purpleLightHover" | "tealDark" | "purpleDark" | "grayMedium" | undefined;
     glow?: boolean | "true" | undefined;
     inline?: boolean | "true" | undefined;
 }, {
@@ -93,6 +93,15 @@ export declare const Text: import("@stitches/react/types/styled-component").Styl
         tooltip: string;
         tooltip2: string;
         skeletonBg: string;
+        purpleLight: string;
+        purpleLightHover: string;
+        tealDark: string;
+        purpleDark: string;
+        grayMedium: string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
     };
     space: {
         1: string;
@@ -500,7 +509,7 @@ export default Text;
 export declare const TextStory: (props: Omit<import("@stitches/react/types/styled-component").TransformProps<{
     variant?: "body" | "pill" | "h1" | "h2" | "h3" | "h4" | "h5" | "metadata" | "subline" | "ens" | "metricStatusCell" | "helper" | undefined;
     size?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined;
-    color?: "white" | "black" | "lightBackground" | "obolBlue" | "primaryBgDefault" | "primaryBgDefaultHover" | "primaryTextDefault" | "secondaryBgDefault" | "secondaryBgHover" | "grayBgDefault" | "gray2BgDefault" | "neutralDark" | "navButtonBgDefault" | "navButtonBgHover" | "cardBackgroundDark" | "cardBackgroundLight" | "gradientGold" | "gradientSilver" | "gradientBronze" | "textMiddle" | "textLight" | "textLighter" | "textTabHover" | "textTabInactive" | "textGreenDark" | "textGreenLight" | "textGreen1" | "textGreen2" | "textGreen3" | "textGreenHover" | "textCreateHover" | "textGrayHover" | "txButton" | "obolGreen" | "obolMidGreen" | "obolGreenHover" | "obolGreenLight" | "obolDarkDark" | "obolDisabled" | "linkButtonHover" | "progressTrackerGreen" | "lightGrey" | "obolGold" | "coordinate" | "coordinateHover" | "test" | "testHover" | "create" | "createHover" | "light" | "body" | "muted" | "menu" | "bg01" | "bg02" | "bg03" | "bg04" | "bg05" | "tooltip" | "tooltip2" | "skeletonBg" | undefined;
+    color?: "white" | "black" | "lightBackground" | "obolBlue" | "primaryBgDefault" | "primaryBgDefaultHover" | "primaryTextDefault" | "secondaryBgDefault" | "secondaryBgHover" | "grayBgDefault" | "gray2BgDefault" | "neutralDark" | "navButtonBgDefault" | "navButtonBgHover" | "cardBackgroundDark" | "cardBackgroundLight" | "gradientGold" | "gradientSilver" | "gradientBronze" | "textMiddle" | "textLight" | "textLighter" | "textTabHover" | "textTabInactive" | "textGreenDark" | "textGreenLight" | "textGreen1" | "textGreen2" | "textGreen3" | "textGreenHover" | "textCreateHover" | "textGrayHover" | "txButton" | "obolGreen" | "obolMidGreen" | "obolGreenHover" | "obolGreenLight" | "obolDarkDark" | "obolDisabled" | "linkButtonHover" | "progressTrackerGreen" | "lightGrey" | "obolGold" | "coordinate" | "coordinateHover" | "test" | "testHover" | "create" | "createHover" | "light" | "body" | "muted" | "menu" | "bg01" | "bg02" | "bg03" | "bg04" | "bg05" | "tooltip" | "tooltip2" | "skeletonBg" | "purpleLight" | "purpleLightHover" | "tealDark" | "purpleDark" | "grayMedium" | undefined;
     glow?: boolean | "true" | undefined;
     inline?: boolean | "true" | undefined;
 }, {
@@ -518,7 +527,7 @@ export declare const TextStory: (props: Omit<import("@stitches/react/types/style
 }>, "color" | "size" | "inline" | "variant" | "glow"> & {
     variant?: "body" | "pill" | "h1" | "h2" | "h3" | "h4" | "h5" | "metadata" | "subline" | "ens" | "metricStatusCell" | "helper" | undefined;
     size?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined;
-    color?: "white" | "black" | "lightBackground" | "obolBlue" | "primaryBgDefault" | "primaryBgDefaultHover" | "primaryTextDefault" | "secondaryBgDefault" | "secondaryBgHover" | "grayBgDefault" | "gray2BgDefault" | "neutralDark" | "navButtonBgDefault" | "navButtonBgHover" | "cardBackgroundDark" | "cardBackgroundLight" | "gradientGold" | "gradientSilver" | "gradientBronze" | "textMiddle" | "textLight" | "textLighter" | "textTabHover" | "textTabInactive" | "textGreenDark" | "textGreenLight" | "textGreen1" | "textGreen2" | "textGreen3" | "textGreenHover" | "textCreateHover" | "textGrayHover" | "txButton" | "obolGreen" | "obolMidGreen" | "obolGreenHover" | "obolGreenLight" | "obolDarkDark" | "obolDisabled" | "linkButtonHover" | "progressTrackerGreen" | "lightGrey" | "obolGold" | "coordinate" | "coordinateHover" | "test" | "testHover" | "create" | "createHover" | "light" | "body" | "muted" | "menu" | "bg01" | "bg02" | "bg03" | "bg04" | "bg05" | "tooltip" | "tooltip2" | "skeletonBg" | undefined;
+    color?: "white" | "black" | "lightBackground" | "obolBlue" | "primaryBgDefault" | "primaryBgDefaultHover" | "primaryTextDefault" | "secondaryBgDefault" | "secondaryBgHover" | "grayBgDefault" | "gray2BgDefault" | "neutralDark" | "navButtonBgDefault" | "navButtonBgHover" | "cardBackgroundDark" | "cardBackgroundLight" | "gradientGold" | "gradientSilver" | "gradientBronze" | "textMiddle" | "textLight" | "textLighter" | "textTabHover" | "textTabInactive" | "textGreenDark" | "textGreenLight" | "textGreen1" | "textGreen2" | "textGreen3" | "textGreenHover" | "textCreateHover" | "textGrayHover" | "txButton" | "obolGreen" | "obolMidGreen" | "obolGreenHover" | "obolGreenLight" | "obolDarkDark" | "obolDisabled" | "linkButtonHover" | "progressTrackerGreen" | "lightGrey" | "obolGold" | "coordinate" | "coordinateHover" | "test" | "testHover" | "create" | "createHover" | "light" | "body" | "muted" | "menu" | "bg01" | "bg02" | "bg03" | "bg04" | "bg05" | "tooltip" | "tooltip2" | "skeletonBg" | "purpleLight" | "purpleLightHover" | "tealDark" | "purpleDark" | "grayMedium" | undefined;
     glow?: boolean | undefined;
     inline?: boolean | undefined;
 } & {