bundle react components library with vite

2024-07-08 12:33:00 +01:00
parent 979244f9da
commit 7de43540b9
79 changed files with 987 additions and 306 deletions
@@ -1,58 +1,30 @@
-# Nym Shared React Components
+# React + TypeScript + Vite

-This package contains shared React components that are used in other Nym projects.
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

-It uses the following packages:
+Currently, two official plugins are available:

- [shared MUI theme](../mui-theme/README.md)
- [webpack config](../webpack/README.md)
- [MUI](https://https://mui.com/)
- Typescript
- React
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

-## Building
+## Expanding the ESLint configuration

-```
-yarn
-yarn build
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
 ```

-## Development
-
-Run watch mode with:
-
-```
-yarn watch
-```
-
-Or you can run Storybook with:
-
-```
-yarn storybook
-```
-
-Or you can run the [example project](../react-webpack-with-theme-example/README.md) in dev mode and this package in watch mode, and test results in the example project's dev server output.
-
-## Playground
-
-There are [playground components](./src/playground/index.tsx) that are intended to be used during development to see the effects are changes to the MUI theme or shared components at a glance.
-
-They are available in Storybook from [src/stories/Playground.stories.tsx](./src/stories/Playground.stories.tsx).
-
-> ℹ️ **Tip**: use the playground to make sure components stay consistent and you don't break other components while making changes
-
-## Shared assets
-
-This project uses [shared asset files](../../assets/README.md) such as favicons and logos.
-
-> ℹ️ **Tip**: use to keep your project consistent with Nym's branding and so that it automatically receives changes when the shared assets change. Please try to avoid duplicating the files in the shared assets directory.
-
-## Publishing
-
-This package is not published to NPM ... yet.
-
-## TODO
-
- ugprade to React 18
- upgrade Storybook
- upgrade MUI
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nym React Components</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { ChangeEvent } from 'react';
-import { InputAdornment, TextField } from '@mui/material';
+import { InputAdornment, TextField, SxProps } from '@mui/material';
 import { TextFieldProps } from '@mui/material/TextField/TextField';
 import { validateWalletAddress } from '@nymproject/types';
 import DoneIcon from '@mui/icons-material/Done';
-import { SxProps } from '@mui/system';

-export const WalletAddressFormField: FCWithChildren<{
+export type WalletAddressFormFieldProps = {
  showTickOnValid?: boolean;
  fullWidth?: boolean;
  required?: boolean;
@@ -20,7 +19,9 @@ export const WalletAddressFormField: FCWithChildren<{
  textFieldProps?: TextFieldProps;
  errorText?: string;
  sx?: SxProps;
-}> = ({
+};
+
+export const WalletAddressFormField = ({
  required,
  fullWidth,
  placeholder,
@@ -33,7 +34,7 @@ export const WalletAddressFormField: FCWithChildren<{
  onValidate,
  textFieldProps,
  showTickOnValid = true,
-}) => {
+}: WalletAddressFormFieldProps) => {
  const [value, setValue] = React.useState<string | undefined>(initialValue);
  const [validationError, setValidationError] = React.useState<string | undefined>();

@@ -1,14 +1,13 @@
-import * as React from 'react';
 import { Box, Collapse, Alert, IconButton, Typography, Divider } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
-import { SxProps } from '@mui/system';
+import { SxProps } from '@mui/material';

-export interface BannerProps {
+export type BannerProps = {
  open: boolean;
  onClick: () => void;
  height?: number;
  sx?: SxProps;
-}
+};

 export const MaintenanceBanner = (props: BannerProps) => {
  const { open, onClick, height, sx } = props;
@@ -1,22 +1,21 @@
-import React from 'react';
 import { Box, Typography, Tooltip } from '@mui/material';
 import { CopyToClipboard } from '../clipboard/CopyToClipboard';

-const AddressTooltip: FCWithChildren<{ visible?: boolean; address?: string }> = ({ visible, address, children }) => {
+type AddressTooltipProps = { visible?: boolean; address?: string; children: React.ReactNode };
+
+const AddressTooltip = ({ visible, address, children }: AddressTooltipProps) => {
  if (!visible || !address) {
-    // eslint-disable-next-line react/jsx-no-useless-fragment
    return <>{children}</>;
  }

  return (
    <Tooltip title={address} arrow>
-      {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
      <>{children}</>
    </Tooltip>
  );
 };

-type ClientAddressProps = {
+export type ClientAddressProps = {
  address: string;
  withLabel?: boolean;
  withCopy?: boolean;
@@ -24,7 +23,7 @@ type ClientAddressProps = {
  showEntireAddress?: boolean;
 };

-export const ClientAddressDisplay = ({
+export const ClientAddress = ({
  withLabel,
  withCopy,
  smallIcons,
@@ -48,5 +47,3 @@ export const ClientAddressDisplay = ({
    {withCopy && <CopyToClipboard smallIcons={smallIcons} value={address} />}
  </Box>
 );
-
-export const ClientAddress = ({ ...props }: ClientAddressProps) => <ClientAddressDisplay {...props} />;
@@ -4,13 +4,15 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DoneIcon from '@mui/icons-material/Done';
 import { useClipboard } from 'use-clipboard-copy';

-export const CopyToClipboard: FCWithChildren<{
+export type CopyToClipboardProps = {
  value: string;
  tooltip?: React.ReactNode;
  onCopy?: (value: string) => void;
  smallIcons?: boolean;
  sx?: SxProps;
-}> = ({ value, tooltip, onCopy, smallIcons, sx }) => {
+};
+
+export const CopyToClipboard = ({ value, tooltip, onCopy, smallIcons, sx }: CopyToClipboardProps) => {
  const copy = useClipboard();
  const [showConfirmation, setShowConfirmation] = React.useState<boolean>(false);
  const handleCopy = (e: React.MouseEvent<SVGSVGElement>) => {
@@ -1,13 +1,14 @@
-import * as React from 'react';
 import { PaletteMode, useTheme } from '@mui/material';
-import TokenLight from '@assets/token/token-light.svg';
-import TokenDark from '@assets/token/token-dark.svg';
+import TokenLight from '@assets/token/token-light.svg?react';
+import TokenDark from '@assets/token/token-dark.svg?react';

-export const CoinMark: FCWithChildren<{
+export type CoinMarkProps = {
  mode?: PaletteMode;
  width?: number | string;
  height?: number | string;
-}> = ({ mode, ...props }) => {
+};
+
+export const CoinMark = ({ mode, ...props }: CoinMarkProps) => {
  const theme = useTheme();
  const modeWithTheme = mode || theme.palette.mode;
  if (modeWithTheme === 'light') {
@@ -0,0 +1,13 @@
+import { useTheme } from '@mui/material';
+import TokenLight from '@assets/token/token-light-testnet.svg?react';
+import TokenDark from '@assets/token/token-dark-testnet.svg?react';
+import { CoinMarkProps } from './CoinMark';
+
+export const CoinMarkTestnet = ({ mode, ...props }: CoinMarkProps) => {
+  const theme = useTheme();
+  const modeWithTheme = mode || theme.palette.mode;
+  if (modeWithTheme === 'light') {
+    return <TokenLight {...props} />;
+  }
+  return <TokenDark {...props} />;
+};
@@ -1,16 +1,23 @@
-import * as React from 'react';
 import type { DecCoin } from '@nymproject/types';
 import { Stack, SxProps } from '@mui/material';
 import { CurrencyWithCoinMark } from './CurrencyWithCoinMark';
 import { CURRENCY_AMOUNT_SPACING, CurrencyAmount } from './CurrencyAmount';

-export const Currency: FCWithChildren<{
+export type CurrencyProps = {
  majorAmount?: DecCoin;
  showDenom?: boolean;
  showCoinMark?: boolean;
  coinMarkPrefix?: boolean;
  sx?: SxProps;
-}> = ({ majorAmount, sx, showDenom = true, showCoinMark = false, coinMarkPrefix = false }) => {
+};
+
+export const Currency = ({
+  majorAmount,
+  sx,
+  showDenom = true,
+  showCoinMark = false,
+  coinMarkPrefix = false,
+}: CurrencyProps) => {
  if (!majorAmount || !majorAmount.amount) {
    return (
      <Stack direction="row" sx={sx}>
@@ -1,13 +1,11 @@
-/* eslint-disable react/no-array-index-key */
-import * as React from 'react';
 import type { DecCoin } from '@nymproject/types';
 import { Stack, SxProps, Typography } from '@mui/material';

 export const CURRENCY_AMOUNT_SPACING = 0.35;

-const toReverseChunks = (value: String, size: number = 3): Array<string> => {
+const toReverseChunks = (value: string, size: number = 3): Array<string> => {
  const reversed = value.split('').reverse();
-  const chunks: Array<Array<String>> = [];
+  const chunks: Array<Array<string>> = [];
  let chunksIndex = 0;
  reversed.forEach((char, index) => {
    if (index > 0 && index % size === 0) {
@@ -21,8 +19,8 @@ const toReverseChunks = (value: String, size: number = 3): Array<string> => {
  return chunks.map((chars) => chars.reverse().join('')).reverse();
 };

-const toChunks = (value: String, size: number = 3): Array<string> => {
-  const chunks: Array<Array<String>> = [];
+const toChunks = (value: string, size: number = 3): Array<string> => {
+  const chunks: Array<Array<string>> = [];
  let chunksIndex = 0;
  value.split('').forEach((char, index) => {
    if (index > 0 && index % size === 0) {
@@ -36,11 +34,13 @@ const toChunks = (value: String, size: number = 3): Array<string> => {
  return chunks.map((chars) => chars.join(''));
 };

-export const CurrencyAmountString: FCWithChildren<{
+export type CurrencyAmountStringProps = {
  majorAmount?: string;
  showSeparators?: boolean;
  sx?: SxProps;
-}> = ({ majorAmount, sx, showSeparators = true }) => {
+};
+
+export const CurrencyAmountString = ({ majorAmount, sx, showSeparators = true }: CurrencyAmountStringProps) => {
  if (!majorAmount) {
    return (
      <Stack direction="row" sx={sx}>
@@ -93,8 +93,12 @@ export const CurrencyAmountString: FCWithChildren<{
  );
 };

-export const CurrencyAmount: FCWithChildren<{
+export type CurrencyAmountProps = {
  majorAmount?: DecCoin;
  showSeparators?: boolean;
  sx?: SxProps;
-}> = ({ majorAmount, ...props }) => <CurrencyAmountString majorAmount={majorAmount?.amount} {...props} />;
+};
+
+export const CurrencyAmount = ({ majorAmount, ...props }: CurrencyAmountProps) => (
+  <CurrencyAmountString majorAmount={majorAmount?.amount} {...props} />
+);
@@ -1,14 +1,13 @@
 import * as React from 'react';
 import { ChangeEvent } from 'react';
-import { InputAdornment, TextField } from '@mui/material';
-import { SxProps } from '@mui/system';
+import { InputAdornment, TextField, SxProps } from '@mui/material';
 import { CurrencyDenom, DecCoin } from '@nymproject/types';
 import { CoinMark } from '../coins/CoinMark';

 const MAX_VALUE = 1_000_000_000_000_000;
 const MIN_VALUE = 0.000001;

-export const CurrencyFormField: FCWithChildren<{
+export type CurrencyFormFieldProps = {
  autoFocus?: boolean;
  required?: boolean;
  fullWidth?: boolean;
@@ -22,7 +21,9 @@ export const CurrencyFormField: FCWithChildren<{
  onChanged?: (newValue: DecCoin) => void;
  onValidate?: (newValue: string | undefined, isValid: boolean, error?: string) => void;
  sx?: SxProps;
-}> = ({
+};
+
+export const CurrencyFormField = ({
  autoFocus,
  required,
  placeholder,
@@ -36,7 +37,7 @@ export const CurrencyFormField: FCWithChildren<{
  sx,
  showCoinMark = true,
  denom = 'nym',
-}) => {
+}: CurrencyFormFieldProps) => {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [value, setValue] = React.useState<string | undefined>(initialValue);
  const [validationError, setValidationError] = React.useState<string | undefined>(validationErrorProp);
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { DecCoin } from '@nymproject/types';
 import { Stack, SxProps } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
@@ -6,13 +5,21 @@ import { CoinMark } from '../coins/CoinMark';
 import { CoinMarkTestnet } from '../coins/CoinMarkTestnet';
 import { CurrencyAmount } from './CurrencyAmount';

-export const CurrencyWithCoinMark: FCWithChildren<{
+export type CurrencyWithCoinMarkProps = {
  majorAmount?: DecCoin;
  fontSize?: number;
  prefix?: boolean;
  showSeparators?: boolean;
  sx?: SxProps;
-}> = ({ majorAmount, fontSize, prefix, showSeparators, sx }) => {
+};
+
+export const CurrencyWithCoinMark = ({
+  majorAmount,
+  fontSize,
+  prefix,
+  showSeparators,
+  sx,
+}: CurrencyWithCoinMarkProps) => {
  const theme = useTheme();
  const size = fontSize || theme.typography.htmlFontSize;
  if (!majorAmount) {
@@ -0,0 +1,22 @@
+export * from './account/WalletAddressFormField';
+export * from './banners/MaintenanceBanner';
+export { ClientAddress } from './client-address/ClientAddress';
+export { CopyToClipboard } from './clipboard/CopyToClipboard';
+export { CoinMark } from './coins/CoinMark';
+export { CoinMarkTestnet } from './coins/CoinMarkTestnet';
+export { Currency } from './currency/Currency';
+export { CurrencyAmount } from './currency/CurrencyAmount';
+export { CurrencyFormField } from './currency/CurrencyFormField';
+export { CurrencyWithCoinMark } from './currency/CurrencyWithCoinMark';
+export { Link } from './link/Link';
+export { NymIcon } from './logo/NymIcon';
+export { NymLogo } from './logo/NymLogo';
+export { NymLogoBW } from './logo/NymLogoBW';
+export { NymWordmark } from './logo/NymWordmark';
+export { IdentityKeyFormField } from './mixnodes/IdentityKeyFormField';
+export { NetworkSelector } from './networks/NetworkSelector';
+export { PasswordStrength } from './password-strength/PasswordStrength';
+export { MnemonicInput } from './textfields/Mnemonic';
+export { PasswordInput } from './textfields/Password';
+export { Tooltip } from './tooltip/Tooltip';
+export { Error } from './warnings/Error';
@@ -1,14 +1,13 @@
-import * as React from 'react';
 import { Box, Typography, Link as MUILink, LinkProps as MUILinkProps } from '@mui/material';
 import { OpenInNew } from '@mui/icons-material';

-export interface LinkProps {
+export type LinkProps = {
  text?: string;
  icon?: React.ReactNode;
  noIcon?: boolean;
  fontWeight?: number | string;
  fontSize?: number | string;
-}
+};

 export const Link = (props: MUILinkProps & LinkProps) => {
  const { text, icon, underline, noIcon, children, fontWeight, fontSize } = props;
@@ -1,4 +1,4 @@
-export interface LogoProps {
+export type LogoProps = {
  height?: number | string;
  width?: number | string;
-}
+};
@@ -0,0 +1,5 @@
+/// <reference types="vite-plugin-svgr/client" />
+import Logo from '@assets/logo/logo-circle-small.svg?react';
+import { LogoProps } from './LogoProps';
+
+export const NymIcon = ({ height, width }: LogoProps) => <Logo height={height} width={width} />;
@@ -0,0 +1,4 @@
+import Logo from '@assets/logo/logo-circle.svg?react';
+import { LogoProps } from './LogoProps';
+
+export const NymLogo = ({ height, width }: LogoProps) => <Logo height={height} width={width} />;
@@ -1,5 +1,4 @@
-import * as React from 'react';
-import Logo from '@assets/logo/logo-bw.svg';
+import Logo from '@assets/logo/logo-bw.svg?react';
 import { LogoProps } from './LogoProps';

 export const NymLogoBW = ({ height, width }: LogoProps) => <Logo height={height} width={width} />;
@@ -1,9 +1,10 @@
-import * as React from 'react';
-import Wordmark from '@assets/logo/logo-wordmark.svg';
+import Wordmark from '@assets/logo/logo-wordmark.svg?react';
 import { useTheme } from '@mui/material';
 import { LogoProps } from './LogoProps';

-export const NymWordmark: FCWithChildren<LogoProps & { fill?: string }> = ({ height, width, fill }) => {
+type NymWordmarkProps = LogoProps & { fill?: string };
+
+export const NymWordmark = ({ height, width, fill }: NymWordmarkProps) => {
  const theme = useTheme();
  return <Wordmark height={height} width={width} fill={fill || theme.palette.text.primary} />;
 };
@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { ChangeEvent } from 'react';
-import { InputAdornment, TextField } from '@mui/material';
+import { InputAdornment, TextField, SxProps } from '@mui/material';
 import { TextFieldProps } from '@mui/material/TextField/TextField';
 import { validateKey } from '@nymproject/types';
 import DoneIcon from '@mui/icons-material/Done';
-import { SxProps } from '@mui/system';

-export const IdentityKeyFormField: FCWithChildren<{
+export type IdentityKeyFormFieldProps = {
  showTickOnValid?: boolean;
  fullWidth?: boolean;
  required?: boolean;
@@ -23,7 +22,9 @@ export const IdentityKeyFormField: FCWithChildren<{
  sx?: SxProps;
  disabled?: boolean;
  autoFocus?: boolean;
-}> = ({
+};
+
+export const IdentityKeyFormField = ({
  required,
  fullWidth,
  placeholder,
@@ -39,7 +40,7 @@ export const IdentityKeyFormField: FCWithChildren<{
  size,
  disabled,
  autoFocus,
-}) => {
+}: IdentityKeyFormFieldProps) => {
  const [value, setValue] = React.useState<string | undefined>(initialValue);
  const [validationError, setValidationError] = React.useState<string | undefined>();

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Button, List, ListItem, ListItemIcon, ListItemText, ListSubheader, Popover } from '@mui/material';
 import { ArrowDropDown, CheckSharp } from '@mui/icons-material';

@@ -11,21 +11,21 @@ const networks: { networkName: Network; name: string }[] = [
  { networkName: 'QA', name: 'QA' },
 ];

-const NetworkItem: FCWithChildren<{ title: string; isSelected: boolean; onSelect: () => void }> = ({
-  title,
-  isSelected,
-  onSelect,
-}) => (
+type NetworkItemProps = { title: string; isSelected: boolean; onSelect: () => void };
+
+const NetworkItem = ({ title, isSelected, onSelect }: NetworkItemProps) => (
  <ListItem button onClick={onSelect}>
    <ListItemIcon>{isSelected && <CheckSharp color="success" />}</ListItemIcon>
    <ListItemText>{title}</ListItemText>
  </ListItem>
 );

-export const NetworkSelector: FCWithChildren<{
+export type NetworkSelectorProps = {
  network?: Network;
  onSwitchNetwork?: (newNetwork: Network) => void;
-}> = ({ network, onSwitchNetwork }) => {
+};
+
+export const NetworkSelector = ({ network, onSwitchNetwork }: NetworkSelectorProps) => {
  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -1,15 +1,13 @@
-/* eslint-disable no-nested-ternary */
-import React from 'react';
 import zxcvbn, { ZXCVBNScore } from 'zxcvbn';
 import { LockOutlined } from '@mui/icons-material';
 import { LinearProgress, Stack, Typography, Box } from '@mui/material';

 const colorMap = {
-  4: 'success' as 'success',
-  3: 'success' as 'success',
-  2: 'warning' as 'warning',
-  1: 'error' as 'error',
-  0: 'error' as 'error',
+  4: 'success' as const,
+  3: 'success' as const,
+  2: 'warning' as const,
+  1: 'error' as const,
+  0: 'error' as const,
 };

 const getText = (score: ZXCVBNScore) => {
@@ -61,15 +59,13 @@ const getPasswordStrength = (score: ZXCVBNScore) => {
  }
 };

-export const PasswordStrength = ({
-  password,
-  withWarnings,
-  handleIsSafePassword,
-}: {
+export type PasswordStrengthProps = {
  password: string;
  withWarnings?: boolean;
  handleIsSafePassword: (isSafe: boolean) => void;
-}) => {
+};
+
+export const PasswordStrength = ({ password, withWarnings, handleIsSafePassword }: PasswordStrengthProps) => {
  const result = zxcvbn(password);

  handleIsSafePassword(result.score > 1);
@@ -1,14 +1,16 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Stack, TextField } from '@mui/material';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
 import { Error } from '../warnings/Error';

-export const MnemonicInput: FCWithChildren<{
+export type MnemonicInputProps = {
  mnemonic: string;
  error?: string;
  onUpdateMnemonic: (mnemonic: string) => void;
-}> = ({ mnemonic, error, onUpdateMnemonic }) => {
+};
+
+export const MnemonicInput = ({ mnemonic, error, onUpdateMnemonic }: MnemonicInputProps) => {
  const [showMnemonic, setShowMnemonic] = useState(false);
  return (
    <Stack spacing={2}>
@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Box, IconButton, Stack, TextField } from '@mui/material';
 import { Visibility, VisibilityOff } from '@mui/icons-material';
 import { Error } from '../warnings/Error';

-export const PasswordInput: FCWithChildren<{
+export type PasswordInputProps = {
  password: string;
  error?: string;
  label?: string;
@@ -11,7 +11,17 @@ export const PasswordInput: FCWithChildren<{
  autoFocus?: boolean;
  disabled?: boolean;
  onUpdatePassword: (password: string) => void;
-}> = ({ password, label, placeholder, error, autoFocus, disabled, onUpdatePassword }) => {
+};
+
+export const PasswordInput = ({
+  password,
+  label,
+  placeholder,
+  error,
+  autoFocus,
+  disabled,
+  onUpdatePassword,
+}: PasswordInputProps) => {
  const [showPassword, setShowPassword] = useState(false);

  return (
@@ -0,0 +1,2 @@
+export * from './Mnemonic';
+export * from './Password';
@@ -1,8 +1,7 @@
-import * as React from 'react';
 import { IconButton, Tooltip as MUITooltip } from '@mui/material';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';

-export interface CustomTooltipProps {
+export type CustomTooltipProps = {
  title: string;
  arrow?: boolean;
  id: string;
@@ -22,7 +21,7 @@ export interface CustomTooltipProps {
  textColor?: string;
  bgColor?: string;
  maxWidth?: number;
-}
+};

 const TooltipInfoIcon: React.ReactElement<any, any> = (
  <IconButton
@@ -0,0 +1 @@
+export * from './Tooltip';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Alert } from '@mui/material';

 export const Error = ({ message }: { message: string }) => (
@@ -0,0 +1 @@
+export { useIsMounted } from './useIsMounted';
@@ -0,0 +1,2 @@
+export * from './components';
+export * from './hooks';
@@ -1,96 +1,56 @@
 {
  "name": "@nymproject/react",
+  "private": true,
  "version": "1.0.0",
-  "license": "Apache-2.0",
-  "main": "dist/index.js",
-  "exports": {
-    ".": "./dist/index.js",
-    "./*": "./dist/components/*",
-    "./hooks/*": "./dist/hooks/*",
-    "./playground/*": "./dist/playground/*"
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/index.js",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
  },
-  "typesVersions": {
-    "*": {
-      "*": [
-        "dist/components/*"
-      ],
-      "hooks/*": [
-        "dist/hooks/*"
-      ],
-      "playground/*": [
-        "dist/playground/*"
-      ]
-    }
-  },
-  "peerDependencies": {
+  "dependencies": {
    "@cosmjs/math": "^0.27.1",
    "@mui/icons-material": ">= 5",
    "@mui/lab": "^5.0.0-alpha.72",
    "@mui/material": ">= 5",
    "@mui/styles": ">= 5",
    "@mui/system": ">= 5",
-    "@nymproject/mui-theme": "workspace:1",
+    "@nymproject/mui-theme": "workspace:^1.0.0",
    "@nymproject/nym-validator-client": "^0.18.0",
    "@nymproject/types": "workspace:1",
    "bech32": "^1.1.4",
    "bs58": "4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "flat": "^5.0.2",
+    "use-clipboard-copy": "^0.2.0",
    "zxcvbn": "^4.4.2"
  },
-  "dependencies": {
-    "@mui/x-tree-view": "^7.10.0",
-    "flat": "^5.0.2",
-    "use-clipboard-copy": "^0.2.0"
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
  },
  "devDependencies": {
-    "@babel/core": "^7.17.5",
-    "@nymproject/eslint-config-react-typescript": "workspace:^1.0.0",
-    "@storybook/addon-actions": "^6.5.8",
-    "@storybook/addon-essentials": "^6.5.8",
-    "@storybook/addon-interactions": "^6.5.8",
-    "@storybook/addon-links": "^6.5.8",
-    "@storybook/builder-webpack5": "^6.5.8",
-    "@storybook/manager-webpack5": "^6.5.8",
    "@storybook/react": "^6.5.15",
-    "@storybook/testing-library": "^0.0.9",
-    "@svgr/webpack": "^6.1.1",
-    "@types/flat": "^5.0.2",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
-    "@types/zxcvbn": "^4.4.1",
-    "@typescript-eslint/eslint-plugin": "^5.13.0",
-    "@typescript-eslint/parser": "^5.13.0",
-    "babel-loader": "^8.2.3",
-    "babel-plugin-root-import": "^5.1.0",
-    "eslint": "^8.10.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^16.1.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-import-resolver-root-import": "^1.0.4",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jest": "^26.1.1",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.29.2",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-storybook": "^0.5.12",
-    "jest": "^27.1.0",
-    "prettier": "^2.8.7",
-    "rimraf": "^3.0.2",
-    "ts-jest": "^27.0.5",
-    "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.6.2"
-  },
-  "scripts": {
-    "clean": "rimraf dist",
-    "tsc": "tsc --noEmit true",
-    "build": "tsc --noEmit false",
-    "watch": "tsc --noEmit false -w",
-    "lint": "eslint src .storybook",
-    "lint:fix": "eslint src .storybook --fix",
-    "storybook": "start-storybook -p 6006",
-    "storybook:build": "build-storybook"
-  },
-  "sideEffects": false
+    "@types/flat": "^5.0.5",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/zxcvbn": "^4.4.4",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.1",
+    "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^4.3.2"
+  }
 }
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
@@ -0,0 +1,20 @@
+import React from 'react';
+import { CoinMark, CoinMarkTestnet, NymLogo, NymLogoBW, NymWordmark } from '../dist/index';
+import { NymThemeProvider } from '@nymproject/mui-theme';
+import { Stack } from '@mui/system';
+
+function App() {
+  return (
+    <NymThemeProvider mode="light">
+      <Stack spacing={2} direction="row" justifyContent="center">
+        <CoinMarkTestnet height={199} width={199} />
+        <NymLogoBW height={199} width={199} />
+        <NymLogo height={199} width={199} />
+        <NymWordmark height={199} width={199} />
+        <CoinMark height={199} width={199} />
+      </Stack>
+    </NymThemeProvider>
+  );
+}
+
+export default App;
@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { PaletteMode, useTheme } from '@mui/material';
-import TokenLight from '@assets/token/token-light-testnet.svg';
-import TokenDark from '@assets/token/token-dark-testnet.svg';
-
-export const CoinMarkTestnet: FCWithChildren<{
-  mode?: PaletteMode;
-  width?: number | string;
-  height?: number | string;
-}> = ({ mode, ...props }) => {
-  const theme = useTheme();
-  const modeWithTheme = mode || theme.palette.mode;
-  if (modeWithTheme === 'light') {
-    return <TokenLight {...props} />;
-  }
-  return <TokenDark {...props} />;
-};
@@ -1,5 +0,0 @@
-import * as React from 'react';
-import Logo from '@assets/logo/logo-circle-small.svg';
-import { LogoProps } from './LogoProps';
-
-export const NymIcon: FCWithChildren<LogoProps> = ({ height, width }) => <Logo height={height} width={width} />;
@@ -1,5 +0,0 @@
-import * as React from 'react';
-import Logo from '@assets/logo/logo-circle.svg';
-import { LogoProps } from './LogoProps';
-
-export const NymLogo: FCWithChildren<LogoProps> = ({ height, width }) => <Logo height={height} width={width} />;
@@ -0,0 +1,68 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+const root = document.getElementById('root');
+
+if (!root) {
+  throw new Error('Root element not found');
+}
+
+ReactDOM.createRoot(root).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { PlaygroundButtons } from './buttons';
 import { PlaygroundCheckboxes } from './checkboxes';
 import { PlaygroundBasicSwitches } from './switches';
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Button, Stack } from '@mui/material';

 export const PlaygroundButtons: FCWithChildren = () => (
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import Checkbox from '@mui/material/Checkbox';

 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 const CONTENT = 'The quick brown fox jumped over the white fence';

 const WEIGHTS = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000];
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import Switch from '@mui/material/Switch';

 const label = { inputProps: { 'aria-label': 'Switch demo' } };
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { useTheme } from '@mui/material';
 import { MUIThemeExplorer } from './theme/MUIThemeExplorer';
 import { PaletteSwatches, PaletteSwatchesList } from './theme/PaletteSwatches';
@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeExplorer = exports.Palette = exports.AllControls = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var Playground_1 = require("../playground/Playground");
+var theme_1 = require("../playground/theme");
+var MUIThemeExplorer_1 = require("../playground/theme/MUIThemeExplorer");
+exports.default = {
+    title: 'Playground',
+    component: Playground_1.Playground,
+};
+var AllControls = function () { return (0, jsx_runtime_1.jsx)(Playground_1.Playground, {}); };
+exports.AllControls = AllControls;
+var Palette = function () { return (0, jsx_runtime_1.jsx)(theme_1.PlaygroundPalette, {}); };
+exports.Palette = Palette;
+var ThemeExplorer = function () {
+    var theme = (0, material_1.useTheme)();
+    return (0, jsx_runtime_1.jsx)(MUIThemeExplorer_1.MUIThemeExplorer, { theme: theme });
+};
+exports.ThemeExplorer = ThemeExplorer;
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ComponentMeta } from '@storybook/react';
 import { useTheme } from '@mui/material';
 import { Playground } from '../playground/Playground';
@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HideValidTick = exports.FullWidth = exports.WithPlaceholder = exports.WithLabel = exports.ReadOnlyErrorValue = exports.ReadOnlyValidValue = exports.ValidValue = exports.ErrorValue = exports.Empty = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var account_1 = require("@lib/components/account");
+exports.default = {
+    title: 'Accounts/Wallet Address',
+    component: account_1.WalletAddressFormField,
+};
+var Empty = function () { return (0, jsx_runtime_1.jsx)(account_1.WalletAddressFormField, {}); };
+exports.Empty = Empty;
+var ErrorValue = function () { return (0, jsx_runtime_1.jsx)(account_1.WalletAddressFormField, { initialValue: "this is a bad value" }); };
+exports.ErrorValue = ErrorValue;
+var ValidValue = function () { return (0, jsx_runtime_1.jsx)(account_1.WalletAddressFormField, { initialValue: "n1xr4w0kddak8d8zlfmu8sl6dk2r4p9uhhzzlaec" }); };
+exports.ValidValue = ValidValue;
+var ReadOnlyValidValue = function () { return ((0, jsx_runtime_1.jsx)(account_1.WalletAddressFormField, { readOnly: true, initialValue: "n1xr4w0kddak8d8zlfmu8sl6dk2r4p9uhhzzlaec" })); };
+exports.ReadOnlyValidValue = ReadOnlyValidValue;
+var ReadOnlyErrorValue = function () { return (0, jsx_runtime_1.jsx)(account_1.WalletAddressFormField, { readOnly: true, initialValue: "this is a bad value" }); };
+exports.ReadOnlyErrorValue = ReadOnlyErrorValue;
+var WithLabel = function () { return ((0, jsx_runtime_1.jsx)(material_1.Box, { p: 2, children: (0, jsx_runtime_1.jsx)(account_1.WalletAddressFormField, { initialValue: "n1xr4w0kddak8d8zlfmu8sl6dk2r4p9uhhzzlaec", textFieldProps: { label: 'Identity Key' } }) })); };
+exports.WithLabel = WithLabel;
+var WithPlaceholder = function () { return ((0, jsx_runtime_1.jsx)(account_1.WalletAddressFormField, { textFieldProps: { placeholder: 'Please enter an wallet address' } })); };
+exports.WithPlaceholder = WithPlaceholder;
+var FullWidth = function () { return ((0, jsx_runtime_1.jsx)(account_1.WalletAddressFormField, { fullWidth: true, initialValue: "n1xr4w0kddak8d8zlfmu8sl6dk2r4p9uhhzzlaec" })); };
+exports.FullWidth = FullWidth;
+var HideValidTick = function () { return ((0, jsx_runtime_1.jsx)(account_1.WalletAddressFormField, { showTickOnValid: false, fullWidth: true, initialValue: "n1xr4w0kddak8d8zlfmu8sl6dk2r4p9uhhzzlaec" })); };
+exports.HideValidTick = HideValidTick;
@@ -1,7 +1,6 @@
-import * as React from 'react';
 import { ComponentMeta } from '@storybook/react';
 import { Box } from '@mui/material';
-import { WalletAddressFormField } from './WalletAddressFormField';
+import { WalletAddressFormField } from '@lib/components/account';

 export default {
  title: 'Accounts/Wallet Address',
@@ -0,0 +1,56 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithSmallIcons = exports.EmptyWithLabelAndCopy = exports.Empty = exports.ShowEntireAddress = exports.WithLabel = exports.WithCopy = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var client_address_1 = require("@lib/components/client-address");
+exports.default = {
+    title: 'Wallet / Client Address',
+    component: client_address_1.ClientAddressDisplay,
+};
+var Template = function (args) { return ((0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", alignContent: "center", children: (0, jsx_runtime_1.jsx)(client_address_1.ClientAddressDisplay, __assign({}, args)) })); };
+exports.Default = Template.bind({});
+exports.Default.args = {
+    address: 'n222gnd9k6rytn6tz7pf8d2d4dawl7e9cr26111',
+};
+exports.WithCopy = Template.bind({});
+exports.WithCopy.args = {
+    address: 'n222gnd9k6rytn6tz7pf8d2d4dawl7e9cr26111',
+    withCopy: true,
+    smallIcons: true,
+};
+exports.WithLabel = Template.bind({});
+exports.WithLabel.args = {
+    withLabel: true,
+    address: 'n222gnd9k6rytn6tz7pf8d2d4dawl7e9cr26111',
+};
+exports.ShowEntireAddress = Template.bind({});
+exports.ShowEntireAddress.args = {
+    withLabel: true,
+    showEntireAddress: true,
+    address: 'n222gnd9k6rytn6tz7pf8d2d4dawl7e9cr26111',
+};
+exports.Empty = Template.bind({});
+exports.Empty.args = {};
+exports.EmptyWithLabelAndCopy = Template.bind({});
+exports.EmptyWithLabelAndCopy.args = {
+    withLabel: true,
+    withCopy: true,
+};
+exports.WithSmallIcons = Template.bind({});
+exports.WithSmallIcons.args = {
+    address: 'n222gnd9k6rytn6tz7pf8d2d4dawl7e9cr26111',
+    withCopy: true,
+    smallIcons: true,
+};
@@ -1,7 +1,6 @@
-import * as React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Box } from '@mui/material';
-import { ClientAddressDisplay } from './ClientAddress';
+import { ClientAddressDisplay } from '@lib/components/client-address';

 export default {
  title: 'Wallet / Client Address',
@@ -0,0 +1,36 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmallIcon = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var clipboard_1 = require("@lib/components/clipboard");
+exports.default = {
+    title: 'Decorators / Copy to clipboard',
+    component: clipboard_1.CopyToClipboard,
+};
+var Template = function (args) {
+    var value = args.value;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignContent: "center", children: [(0, jsx_runtime_1.jsx)(clipboard_1.CopyToClipboard, __assign({}, args)), (0, jsx_runtime_1.jsx)(material_1.Typography, { ml: 1, children: value })] }));
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    tooltip: 'Copy identity key to clipboard',
+    value: '123456',
+};
+exports.SmallIcon = Template.bind({});
+exports.SmallIcon.args = {
+    tooltip: 'Copy identity key to clipboard',
+    value: '123456',
+    smallIcons: true,
+};
@@ -1,7 +1,6 @@
-import * as React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Box, Typography } from '@mui/material';
-import { CopyToClipboard } from './CopyToClipboard';
+import { CopyToClipboard } from '@lib/components/clipboard';

 export default {
  title: 'Decorators / Copy to clipboard',
@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sizes = exports.DarkMode = exports.LightMode = exports.Auto = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var coins_1 = require("@lib/components/coins");
+exports.default = {
+    title: 'Branding/Coin Mark',
+    component: coins_1.CoinMark,
+};
+var Auto = function () { return (0, jsx_runtime_1.jsx)(coins_1.CoinMark, { height: 250 }); };
+exports.Auto = Auto;
+var LightMode = function () { return (0, jsx_runtime_1.jsx)(coins_1.CoinMark, { mode: "light", height: 250 }); };
+exports.LightMode = LightMode;
+var DarkMode = function () { return (0, jsx_runtime_1.jsx)(coins_1.CoinMark, { mode: "dark", height: 250 }); };
+exports.DarkMode = DarkMode;
+var sizes = [8, 10, 12, 16, 20, 32, 40, 64];
+var Sizes = function () { return ((0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", spacing: 2, children: sizes.map(function (size) { return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 4, p: 1, alignItems: "center", borderBottom: "1px solid #444", children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { sx: { opacity: 0.5 }, width: "40px", children: [size, "px"] }), (0, jsx_runtime_1.jsx)(coins_1.CoinMark, { height: size }, size)] })); }) })); };
+exports.Sizes = Sizes;
@@ -1,7 +1,6 @@
-import * as React from 'react';
 import { ComponentMeta } from '@storybook/react';
 import { Stack, Typography } from '@mui/material';
-import { CoinMark } from './CoinMark';
+import { CoinMark } from '@lib/components/coins';

 export default {
  title: 'Branding/Coin Mark',
@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sizes = exports.DarkMode = exports.LightMode = exports.Auto = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var coins_1 = require("@lib/components/coins");
+exports.default = {
+    title: 'Branding/Coin Mark (testnet)',
+    component: coins_1.CoinMarkTestnet,
+};
+var Auto = function () { return (0, jsx_runtime_1.jsx)(coins_1.CoinMarkTestnet, { height: 250 }); };
+exports.Auto = Auto;
+var LightMode = function () { return (0, jsx_runtime_1.jsx)(coins_1.CoinMarkTestnet, { mode: "light", height: 250 }); };
+exports.LightMode = LightMode;
+var DarkMode = function () { return (0, jsx_runtime_1.jsx)(coins_1.CoinMarkTestnet, { mode: "dark", height: 250 }); };
+exports.DarkMode = DarkMode;
+var sizes = [8, 10, 12, 16, 20, 32, 40, 64];
+var Sizes = function () { return ((0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", spacing: 2, children: sizes.map(function (size) { return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 4, p: 1, alignItems: "center", borderBottom: "1px solid #444", children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { sx: { opacity: 0.5 }, width: "40px", children: [size, "px"] }), (0, jsx_runtime_1.jsx)(coins_1.CoinMarkTestnet, { height: size }, size)] })); }) })); };
+exports.Sizes = Sizes;
@@ -1,7 +1,6 @@
-import * as React from 'react';
 import { ComponentMeta } from '@storybook/react';
 import { Stack, Typography } from '@mui/material';
-import { CoinMarkTestnet } from './CoinMarkTestnet';
+import { CoinMarkTestnet } from '@lib/components/coins';

 export default {
  title: 'Branding/Coin Mark (testnet)',
@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithSX = exports.Empty = exports.Testnet = exports.Mainnet = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var currency_1 = require("@lib/components/currency");
+var CurrencyAmount_stories_1 = require("./CurrencyAmount.stories");
+exports.default = {
+    title: 'Currency/Currency display',
+    component: currency_1.Currency,
+};
+var Mainnet = function () { return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "column", children: [(0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: '42.123456', denom: 'nym' } }), (0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: '42.123456', denom: 'nym' }, showDenom: false }), (0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: '42.123456', denom: 'nym' }, showCoinMark: true }), (0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: '42.123456', denom: 'nym' }, showCoinMark: true, coinMarkPrefix: true }), CurrencyAmount_stories_1.amounts.map(function (amount) { return ((0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: amount, denom: 'nym' }, showCoinMark: true, coinMarkPrefix: true }, amount)); })] })); };
+exports.Mainnet = Mainnet;
+var Testnet = function () { return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "column", children: [(0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: '42.123456', denom: 'nymt' } }), (0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: '42.123456', denom: 'nymt' }, showDenom: false }), (0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: '42.123456', denom: 'nymt' }, showCoinMark: true }), (0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: '42.123456', denom: 'nymt' }, showCoinMark: true, coinMarkPrefix: true }), CurrencyAmount_stories_1.amounts.map(function (amount) { return ((0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: amount, denom: 'nymt' }, showCoinMark: true, coinMarkPrefix: true }, amount)); })] })); };
+exports.Testnet = Testnet;
+var Empty = function () { return (0, jsx_runtime_1.jsx)(currency_1.Currency, {}); };
+exports.Empty = Empty;
+var WithSX = function () { return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "column", children: [CurrencyAmount_stories_1.amounts.map(function (amount) { return ((0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: amount, denom: 'nym' }, showCoinMark: true, sx: { fontSize: 14, color: 'red', fontWeight: 'bold', m: 1 } }, amount)); }), CurrencyAmount_stories_1.amounts.map(function (amount) { return ((0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: amount, denom: 'nym' }, sx: { fontSize: 14, color: 'red', fontWeight: 'bold', m: 1 } }, amount)); })] })); };
+exports.WithSX = WithSX;
@@ -1,7 +1,6 @@
-import * as React from 'react';
 import { ComponentMeta } from '@storybook/react';
 import { Stack } from '@mui/material';
-import { Currency } from './Currency';
+import { Currency } from '@lib/components/currency';
 import { amounts } from './CurrencyAmount.stories';

 export default {
@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithSX = exports.NoSeparatorsWithSX = exports.Empty = exports.Weird = exports.MaxRange = exports.NoSeparators = exports.WithSeparators = exports.amounts = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var currency_1 = require("@lib/components/currency");
+exports.default = {
+    title: 'Currency/Currency amount',
+    component: currency_1.CurrencyAmount,
+};
+exports.amounts = [
+    '0',
+    '0.1',
+    '0.01',
+    '0.001',
+    '0.0001',
+    '0.00001',
+    '1.000001',
+    '10.000001',
+    '100.000001',
+    '1000.000001',
+    '10000.000001',
+    '100000.000001',
+    '1000000.000001',
+    '10000000.000001',
+    '100000000.000001',
+    '1000000000.000001',
+    '10000000000.000001',
+    '100000000000.000001',
+    '1000000000000.000001',
+];
+var WithSeparators = function () { return ((0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", children: exports.amounts.map(function (amount) { return ((0, jsx_runtime_1.jsx)(currency_1.CurrencyAmount, { majorAmount: { amount: amount, denom: 'nym' } }, amount)); }) })); };
+exports.WithSeparators = WithSeparators;
+var NoSeparators = function () { return ((0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", children: exports.amounts.map(function (amount) { return ((0, jsx_runtime_1.jsx)(currency_1.CurrencyAmount, { majorAmount: { amount: amount, denom: 'nym' }, showSeparators: false }, amount)); }) })); };
+exports.NoSeparators = NoSeparators;
+var MaxRange = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyAmount, { majorAmount: { amount: '1000000000000.000001', denom: 'nym' } }); };
+exports.MaxRange = MaxRange;
+var Weird = function () { return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "column", children: [(0, jsx_runtime_1.jsx)(currency_1.CurrencyAmount, { majorAmount: { amount: '0000000000000.000000', denom: 'nym' } }), (0, jsx_runtime_1.jsx)(currency_1.CurrencyAmount, { majorAmount: { amount: '0000000000000.00', denom: 'nym' } }), (0, jsx_runtime_1.jsx)(currency_1.CurrencyAmount, { majorAmount: { amount: '0000.0000', denom: 'nym' } }), (0, jsx_runtime_1.jsx)(currency_1.CurrencyAmount, { majorAmount: { amount: '0000.000', denom: 'nym' } }), (0, jsx_runtime_1.jsx)(currency_1.CurrencyAmount, { majorAmount: { amount: '0.00', denom: 'nym' } })] })); };
+exports.Weird = Weird;
+var Empty = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyAmount, {}); };
+exports.Empty = Empty;
+var NoSeparatorsWithSX = function () { return ((0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", children: exports.amounts.map(function (amount) { return ((0, jsx_runtime_1.jsx)(currency_1.CurrencyAmount, { majorAmount: { amount: amount, denom: 'nym' }, showSeparators: false, sx: { fontSize: 14, color: 'red', fontWeight: 'bold', m: 1 } }, amount)); }) })); };
+exports.NoSeparatorsWithSX = NoSeparatorsWithSX;
+var WithSX = function () { return ((0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", children: exports.amounts.map(function (amount) { return ((0, jsx_runtime_1.jsx)(currency_1.CurrencyAmount, { majorAmount: { amount: amount, denom: 'nym' }, sx: { fontSize: 14, color: 'red', fontWeight: 'bold', m: 1 } }, amount)); }) })); };
+exports.WithSX = WithSX;
@@ -1,7 +1,6 @@
-import * as React from 'react';
 import { ComponentMeta } from '@storybook/react';
 import { Stack } from '@mui/material';
-import { CurrencyAmount } from './CurrencyAmount';
+import { CurrencyAmount } from '@lib/components/currency';

 export default {
  title: 'Currency/Currency amount',
@@ -9,7 +8,6 @@ export default {
 } as ComponentMeta<typeof CurrencyAmount>;

 export const amounts = [
-  undefined,
  '0',
  '0.1',
  '0.01',
@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReadOnly = exports.EmptyWithAutofocus = exports.Empty = exports.Zero = exports.MicroNym = exports.ErrorNegative = exports.ErrorToSmall = exports.ErrorToBig = exports.HideCoinMark = exports.FullWidth = exports.Testnet = exports.Mainnet = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var currency_1 = require("@lib/components/currency");
+exports.default = {
+    title: 'Currency/Currency form field',
+    component: currency_1.CurrencyFormField,
+};
+var Mainnet = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { initialValue: "42.123456", denom: "nymt" }); };
+exports.Mainnet = Mainnet;
+var Testnet = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { initialValue: "42.123456", denom: "nymt" }); };
+exports.Testnet = Testnet;
+var FullWidth = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { initialValue: "42.123456", denom: "nym", fullWidth: true }); };
+exports.FullWidth = FullWidth;
+var HideCoinMark = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { initialValue: "42.123456", denom: "nym", showCoinMark: false }); };
+exports.HideCoinMark = HideCoinMark;
+var ErrorToBig = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { initialValue: "1_000_000_000_000_001", denom: "nym" }); };
+exports.ErrorToBig = ErrorToBig;
+var ErrorToSmall = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { initialValue: "0.0000001", denom: "nym" }); };
+exports.ErrorToSmall = ErrorToSmall;
+var ErrorNegative = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { initialValue: "-1", denom: "nym" }); };
+exports.ErrorNegative = ErrorNegative;
+var MicroNym = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { initialValue: "0.000001", denom: "nym" }); };
+exports.MicroNym = MicroNym;
+var Zero = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { initialValue: "0", denom: "nym" }); };
+exports.Zero = Zero;
+var Empty = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, {}); };
+exports.Empty = Empty;
+var EmptyWithAutofocus = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { autoFocus: true }); };
+exports.EmptyWithAutofocus = EmptyWithAutofocus;
+var ReadOnly = function () { return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "column", spacing: 2, children: [(0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { initialValue: "42.123456", denom: "nym", readOnly: true }), (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { initialValue: "42.123456", denom: "nymt", readOnly: true })] })); };
+exports.ReadOnly = ReadOnly;
@@ -1,30 +1,29 @@
-import * as React from 'react';
 import { ComponentMeta } from '@storybook/react';
 import { Stack } from '@mui/material';
-import { CurrencyFormField } from './CurrencyFormField';
+import { CurrencyFormField } from '@lib/components/currency';

 export default {
  title: 'Currency/Currency form field',
  component: CurrencyFormField,
 } as ComponentMeta<typeof CurrencyFormField>;

-export const Mainnet = () => <CurrencyFormField initialValue="42.123456" denom="NYM" />;
+export const Mainnet = () => <CurrencyFormField initialValue="42.123456" denom="nymt" />;

-export const Testnet = () => <CurrencyFormField initialValue="42.123456" denom="NYMT" />;
+export const Testnet = () => <CurrencyFormField initialValue="42.123456" denom="nymt" />;

-export const FullWidth = () => <CurrencyFormField initialValue="42.123456" denom="NYM" fullWidth />;
+export const FullWidth = () => <CurrencyFormField initialValue="42.123456" denom="nym" fullWidth />;

-export const HideCoinMark = () => <CurrencyFormField initialValue="42.123456" denom="NYM" showCoinMark={false} />;
+export const HideCoinMark = () => <CurrencyFormField initialValue="42.123456" denom="nym" showCoinMark={false} />;

-export const ErrorToBig = () => <CurrencyFormField initialValue="1_000_000_000_000_001" denom="NYM" />;
+export const ErrorToBig = () => <CurrencyFormField initialValue="1_000_000_000_000_001" denom="nym" />;

-export const ErrorToSmall = () => <CurrencyFormField initialValue="0.0000001" denom="NYM" />;
+export const ErrorToSmall = () => <CurrencyFormField initialValue="0.0000001" denom="nym" />;

-export const ErrorNegative = () => <CurrencyFormField initialValue="-1" denom="NYM" />;
+export const ErrorNegative = () => <CurrencyFormField initialValue="-1" denom="nym" />;

-export const MicroNym = () => <CurrencyFormField initialValue="0.000001" denom="NYM" />;
+export const MicroNym = () => <CurrencyFormField initialValue="0.000001" denom="nym" />;

-export const Zero = () => <CurrencyFormField initialValue="0" denom="NYM" />;
+export const Zero = () => <CurrencyFormField initialValue="0" denom="nym" />;

 export const Empty = () => <CurrencyFormField />;

@@ -32,7 +31,7 @@ export const EmptyWithAutofocus = () => <CurrencyFormField autoFocus />;

 export const ReadOnly = () => (
  <Stack direction="column" spacing={2}>
-    <CurrencyFormField initialValue="42.123456" denom="NYM" readOnly />
-    <CurrencyFormField initialValue="42.123456" denom="NYMT" readOnly />
+    <CurrencyFormField initialValue="42.123456" denom="nym" readOnly />
+    <CurrencyFormField initialValue="42.123456" denom="nymt" readOnly />
  </Stack>
 );
@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InTextExample = exports.WithCustomChildren = exports.NoIcon = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var icons_material_1 = require("@mui/icons-material");
+var link_1 = require("@lib/components/link");
+exports.default = {
+    title: 'Basics/Link',
+    component: link_1.Link,
+};
+var Default = function () { return (0, jsx_runtime_1.jsx)(link_1.Link, { text: "link", href: "https://nymtech.net/", target: "_blank" }); };
+exports.Default = Default;
+var NoIcon = function () { return (0, jsx_runtime_1.jsx)(link_1.Link, { text: "link", href: "https://nymtech.net/", target: "_blank", noIcon: true }); };
+exports.NoIcon = NoIcon;
+var WithCustomChildren = function () { return ((0, jsx_runtime_1.jsx)(link_1.Link, { href: "https://nymtech.net/", target: "_blank", children: (0, jsx_runtime_1.jsx)(icons_material_1.Link, {}) })); };
+exports.WithCustomChildren = WithCustomChildren;
+var InTextExample = function () { return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["You can find the Nym website ", (0, jsx_runtime_1.jsx)(link_1.Link, { href: "https://nymtech.net/", target: "_blank", text: "here" }), "."] })); };
+exports.InTextExample = InTextExample;
@@ -1,8 +1,7 @@
-import * as React from 'react';
 import { ComponentMeta } from '@storybook/react';
 import { Typography } from '@mui/material';
 import { Link as LinkIcon } from '@mui/icons-material';
-import { Link } from './Link';
+import { Link } from '@lib/components/link';

 export default {
  title: 'Basics/Link',
@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wordmark = exports.Icon = exports.Logo = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var logo_1 = require("@lib/components/logo");
+exports.default = {
+    title: 'Branding/Nym Logo',
+    component: logo_1.NymLogo,
+};
+var Logo = function () { return (0, jsx_runtime_1.jsx)(logo_1.NymLogo, { height: 250 }); };
+exports.Logo = Logo;
+var Icon = function () { return (0, jsx_runtime_1.jsx)(logo_1.NymIcon, { height: 250 }); };
+exports.Icon = Icon;
+var Wordmark = function () { return (0, jsx_runtime_1.jsx)(logo_1.NymWordmark, { height: 250 }); };
+exports.Wordmark = Wordmark;
@@ -1,8 +1,5 @@
-import * as React from 'react';
 import { ComponentMeta } from '@storybook/react';
-import { NymLogo } from './NymLogo';
-import { NymWordmark } from './NymWordmark';
-import { NymIcon } from './NymIcon';
+import { NymLogo, NymWordmark, NymIcon } from '@lib/components/logo';

 export default {
  title: 'Branding/Nym Logo',
@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HideValidTick = exports.FullWidth = exports.WithPlaceholder = exports.WithLabel = exports.ReadOnlyErrorValue = exports.ReadOnlyValidValue = exports.ValidValue = exports.ErrorValue = exports.Empty = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var components_1 = require("@lib/components");
+exports.default = {
+    title: 'Mixnodes/Identity Key',
+    component: components_1.IdentityKeyFormField,
+};
+var Empty = function () { return (0, jsx_runtime_1.jsx)(components_1.IdentityKeyFormField, {}); };
+exports.Empty = Empty;
+var ErrorValue = function () { return (0, jsx_runtime_1.jsx)(components_1.IdentityKeyFormField, { initialValue: "this is a bad value" }); };
+exports.ErrorValue = ErrorValue;
+var ValidValue = function () { return (0, jsx_runtime_1.jsx)(components_1.IdentityKeyFormField, { initialValue: "DZ6RfeY8DttMD3CQKoayV6mss5a5FC3RoH75Kmcujyhu" }); };
+exports.ValidValue = ValidValue;
+var ReadOnlyValidValue = function () { return ((0, jsx_runtime_1.jsx)(components_1.IdentityKeyFormField, { readOnly: true, initialValue: "DZ6RfeY8DttMD3CQKoayV6mss5a5FC3RoH75Kmcujyhu" })); };
+exports.ReadOnlyValidValue = ReadOnlyValidValue;
+var ReadOnlyErrorValue = function () { return (0, jsx_runtime_1.jsx)(components_1.IdentityKeyFormField, { readOnly: true, initialValue: "this is a bad value" }); };
+exports.ReadOnlyErrorValue = ReadOnlyErrorValue;
+var WithLabel = function () { return ((0, jsx_runtime_1.jsx)(material_1.Box, { p: 2, children: (0, jsx_runtime_1.jsx)(components_1.IdentityKeyFormField, { initialValue: "DZ6RfeY8DttMD3CQKoayV6mss5a5FC3RoH75Kmcujyhu", textFieldProps: { label: 'Identity Key' } }) })); };
+exports.WithLabel = WithLabel;
+var WithPlaceholder = function () { return ((0, jsx_runtime_1.jsx)(components_1.IdentityKeyFormField, { textFieldProps: { placeholder: 'Please enter an Identity Key' } })); };
+exports.WithPlaceholder = WithPlaceholder;
+var FullWidth = function () { return ((0, jsx_runtime_1.jsx)(components_1.IdentityKeyFormField, { fullWidth: true, initialValue: "DZ6RfeY8DttMD3CQKoayV6mss5a5FC3RoH75Kmcujyhu" })); };
+exports.FullWidth = FullWidth;
+var HideValidTick = function () { return ((0, jsx_runtime_1.jsx)(components_1.IdentityKeyFormField, { showTickOnValid: false, fullWidth: true, initialValue: "DZ6RfeY8DttMD3CQKoayV6mss5a5FC3RoH75Kmcujyhu" })); };
+exports.HideValidTick = HideValidTick;
@@ -1,7 +1,6 @@
-import * as React from 'react';
 import { ComponentMeta } from '@storybook/react';
 import { Box } from '@mui/material';
-import { IdentityKeyFormField } from './IdentityKeyFormField';
+import { IdentityKeyFormField } from '@lib/components';

 export default {
  title: 'Mixnodes/Identity Key',
@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithValue = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var networks_1 = require("@lib/components/networks");
+exports.default = {
+    title: 'Networks/Network Selector',
+    component: networks_1.NetworkSelector,
+    argTypes: {
+        network: {
+            options: ['MAINNET', 'SANDBOX', 'QA'],
+            control: { type: 'radio' },
+        },
+        onSwitchNetwork: { type: 'function' },
+    },
+};
+var Template = function (_a) {
+    var networkArg = _a.network, onSwitchNetwork = _a.onSwitchNetwork;
+    var _b = react_1.default.useState(networkArg), network = _b[0], setNetwork = _b[1];
+    var handleClick = function (newNetwork) {
+        setNetwork(newNetwork);
+        if (onSwitchNetwork && newNetwork) {
+            onSwitchNetwork(newNetwork);
+        }
+    };
+    return (0, jsx_runtime_1.jsx)(networks_1.NetworkSelector, { network: network || networkArg, onSwitchNetwork: handleClick });
+};
+exports.Default = Template.bind({});
+exports.WithValue = Template.bind({});
+exports.WithValue.args = { network: 'MAINNET' };
@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { NetworkSelector, Network } from './NetworkSelector';
+import { NetworkSelector, type Network } from '@lib/components/networks';

 export default {
  title: 'Networks/Network Selector',
@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NEStyle = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var tooltip_1 = require("@lib/components/tooltip");
+exports.default = {
+    title: 'Basics/Tooltip',
+    component: tooltip_1.Tooltip,
+};
+var Default = function () { return (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "tooltip", id: "field-name", placement: "top-start", arrow: true }); };
+exports.Default = Default;
+var NEStyle = function () { return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "Level of stake saturation for this node. Nodes receive more rewards the higher their saturation level, up to 100%. Beyond 100% no additional rewards are granted. The current stake saturation level is: 1 million NYM, computed as S/K where S is  total amount of tokens available to stakeholders and K is the number of nodes in the reward set.", id: "field-name", placement: "top-start", textColor: "#111826", bgColor: "#A0AED1", maxWidth: 230, arrow: true })); };
+exports.NEStyle = NEStyle;
@@ -1,6 +1,5 @@
-import * as React from 'react';
 import { ComponentMeta } from '@storybook/react';
-import { Tooltip } from './Tooltip';
+import { Tooltip } from '@lib/components/tooltip';

 export default {
  title: 'Basics/Tooltip',
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
@@ -0,0 +1,96 @@
+{
+  "name": "@nymproject/react'
+  "version": "1.0.0",
+  "license": "Apache-2.0",
+  "main": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./*": "./dist/components/*",
+    "./hooks/*": "./dist/hooks/*",
+    "./playground/*": "./dist/playground/*"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/components/*"
+      ],
+      "hooks/*": [
+        "dist/hooks/*"
+      ],
+      "playground/*": [
+        "dist/playground/*"
+      ]
+    }
+  },
+  "peerDependencies": {
+    "@cosmjs/math": "^0.27.1",
+    "@mui/icons-material": ">= 5",
+    "@mui/lab": "^5.0.0-alpha.72",
+    "@mui/material": ">= 5",
+    "@mui/styles": ">= 5",
+    "@mui/system": ">= 5",
+    "@nymproject/mui-theme": "workspace:1",
+    "@nymproject/nym-validator-client": "^0.18.0",
+    "@nymproject/types": "workspace:1",
+    "@nymproject/assets": "workspace:^1.0.0",
+    "bech32": "^1.1.4",
+    "bs58": "4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "zxcvbn": "^4.4.2"
+  },
+  "dependencies": {
+    "flat": "^5.0.2",
+    "use-clipboard-copy": "^0.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.5",
+    "@nymproject/eslint-config-react-typescript": "workspace:^1.0.0",
+    "@storybook/addon-actions": "^6.5.8",
+    "@storybook/addon-essentials": "^6.5.8",
+    "@storybook/addon-interactions": "^6.5.8",
+    "@storybook/addon-links": "^6.5.8",
+    "@storybook/builder-webpack5": "^6.5.8",
+    "@storybook/manager-webpack5": "^6.5.8",
+    "@storybook/react": "^6.5.15",
+    "@storybook/testing-library": "^0.0.9",
+    "@svgr/webpack": "^6.1.1",
+    "@types/flat": "^5.0.2",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@types/zxcvbn": "^4.4.1",
+    "@typescript-eslint/eslint-plugin": "^5.13.0",
+    "@typescript-eslint/parser": "^5.13.0",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-root-import": "^5.1.0",
+    "eslint": "^8.10.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^16.1.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-root-import": "^1.0.4",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jest": "^26.1.1",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.2",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-storybook": "^0.5.12",
+    "jest": "^27.1.0",
+    "prettier": "^2.8.7",
+    "rimraf": "^3.0.2",
+    "ts-jest": "^27.0.5",
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
+    "typescript": "^4.6.2"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "tsc": "tsc --noEmit true",
+    "build": "tsc --noEmit false",
+    "watch": "tsc --noEmit false -w",
+    "lint": "eslint src .storybook",
+    "lint:fix": "eslint src .storybook --fix",
+    "storybook": "start-storybook -p 6006",
+    "storybook:build": "build-storybook"
+  },
+  "sideEffects": false
+}
@@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    "rootDir": "./lib",
+    "outDir": "./dist",
+    "declaration": true,
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "typeRoots": ["./dist/index.d.ts"],
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Paths */
+    "baseUrl": ".",
+    "paths": {
+      "@src/*": ["src/*"],
+      "@lib/*": ["lib/*"],
+      "@assets/*": ["../../../../assets/*"]
+    }
+  },
+  "include": ["lib/**/*"]
+}
@@ -1,19 +1,17 @@
 {
-  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "jsx": "react-jsx",
-    "noEmit": true,
-    "outDir": "./dist",
-    "declarationDir": "./dist"
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "noEmit": true
  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist",
-    "src/stories",
-    "**/*.stories.*"
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
  ]
 }
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}
@@ -0,0 +1,35 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import svgr from 'vite-plugin-svgr';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points
+      entry: [resolve(__dirname, 'lib/index.ts')],
+      formats: ['es'],
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['react', 'react-dom', '@mui/material', '@mui/icons-material'],
+    },
+    emptyOutDir: true,
+  },
+
+  plugins: [
+    react(),
+    tsconfigPaths(),
+    svgr(),
+    dts({
+      rollupTypes: true,
+    }),
+  ],
+});
				`@@ -0,0 +1 @@`
				`export { useIsMounted } from './useIsMounted';`