@obolnetwork/obol-ui 1.0.21 → 1.0.24

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

@@ -0,0 +1,484 @@
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import React from "react";
+export declare const CheckboxRoot: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>>, {}, {
+    motion: "(prefers-reduced-motion)";
+    hover: "(any-hover: hover)";
+    dark: "(prefers-color-scheme: dark)";
+    light: "(prefers-color-scheme: light)";
+    xs: "(max-width: 520px)";
+    sm: "(max-width: 900px)";
+    bp2: "(min-width: 900px)";
+    md: "(max-width: 1200px)";
+    lg: "(max-width: 1800px)";
+}, import("@stitches/react/types/css-util").CSS<{
+    motion: "(prefers-reduced-motion)";
+    hover: "(any-hover: hover)";
+    dark: "(prefers-color-scheme: dark)";
+    light: "(prefers-color-scheme: light)";
+    xs: "(max-width: 520px)";
+    sm: "(max-width: 900px)";
+    bp2: "(min-width: 900px)";
+    md: "(max-width: 1200px)";
+    lg: "(max-width: 1800px)";
+}, {
+    colors: {
+        white: string;
+        black: string;
+        lightBackground: string;
+        obolBlue: string;
+        primaryBgDefault: string;
+        primaryBgDefaultHover: string;
+        primaryTextDefault: string;
+        secondaryBgDefault: string;
+        secondaryBgHover: string;
+        grayBgDefault: string;
+        gray2BgDefault: string;
+        neutralDark: string;
+        navButtonBgDefault: string;
+        navButtonBgHover: string;
+        cardBackgroundDark: string;
+        cardBackgroundLight: string;
+        textMiddle: string;
+        textLight: string;
+        textLighter: string;
+        textTabHover: string;
+        textTabInactive: string;
+        textGreenDark: string;
+        textGreenLight: string;
+        textGreen1: string;
+        textGreen2: string;
+        textGreen3: string;
+        textGreenHover: string;
+        textCreateHover: string;
+        textGrayHover: string;
+        txButton: string;
+        obolGreen: string;
+        obolMidGreen: string;
+        obolGreenHover: string;
+        obolGreenLight: string;
+        obolDarkDark: string;
+        obolDisabled: string;
+        linkButtonHover: string;
+        progressTrackerGreen: string;
+        coordinate: string;
+        coordinateHover: string;
+        test: string;
+        testHover: string;
+        create: string;
+        createHover: string;
+        light: string;
+        body: string;
+        muted: string;
+        menu: string;
+        bg01: string;
+        bg02: string;
+        bg03: string;
+        bg04: string;
+        bg05: string;
+        tooltip: string;
+        tooltip2: string;
+    };
+    space: {
+        1: string;
+        2: string;
+        xxxs: string;
+        xxs: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+    };
+    sizes: {
+        1: string;
+        2: string;
+        xxxs: string;
+        xxs: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        max: string;
+        min: string;
+        full: string;
+    };
+    radii: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        round: string;
+        pill: string;
+    };
+    fontSizes: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+    };
+    fontWeights: {
+        hairline: number;
+        thin: number;
+        light: number;
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+        extrabold: number;
+        black: number;
+    };
+    lineHeights: {
+        normal: string;
+        none: number;
+        shorter: number;
+        short: number;
+        base: number;
+        tall: number;
+        tall2: number;
+        taller: string;
+    };
+    letterSpacings: {
+        tighter: string;
+        tight: string;
+        normal: string;
+        wide: string;
+        wider: string;
+        widest: string;
+    };
+    borderWidths: unknown;
+    borderStyles: unknown;
+    shadows: unknown;
+    zIndices: unknown;
+    transitions: unknown;
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    p: (value: {
+        readonly [$$PropertyValue]: "padding";
+    }) => {
+        padding: {
+            readonly [$$PropertyValue]: "padding";
+        };
+    };
+    pt: (value: {
+        readonly [$$PropertyValue]: "paddingTop";
+    }) => {
+        paddingTop: {
+            readonly [$$PropertyValue]: "paddingTop";
+        };
+    };
+    pr: (value: {
+        readonly [$$PropertyValue]: "paddingRight";
+    }) => {
+        paddingRight: {
+            readonly [$$PropertyValue]: "paddingRight";
+        };
+    };
+    pb: (value: {
+        readonly [$$PropertyValue]: "paddingBottom";
+    }) => {
+        paddingBottom: {
+            readonly [$$PropertyValue]: "paddingBottom";
+        };
+    };
+    pl: (value: {
+        readonly [$$PropertyValue]: "paddingLeft";
+    }) => {
+        paddingLeft: {
+            readonly [$$PropertyValue]: "paddingLeft";
+        };
+    };
+    px: (value: {
+        readonly [$$PropertyValue]: "paddingLeft";
+    }) => {
+        paddingLeft: {
+            readonly [$$PropertyValue]: "paddingLeft";
+        };
+        paddingRight: {
+            readonly [$$PropertyValue]: "paddingLeft";
+        };
+    };
+    py: (value: {
+        readonly [$$PropertyValue]: "paddingTop";
+    }) => {
+        paddingTop: {
+            readonly [$$PropertyValue]: "paddingTop";
+        };
+        paddingBottom: {
+            readonly [$$PropertyValue]: "paddingTop";
+        };
+    };
+    m: (value: {
+        readonly [$$PropertyValue]: "margin";
+    }) => {
+        margin: {
+            readonly [$$PropertyValue]: "margin";
+        };
+    };
+    mt: (value: {
+        readonly [$$PropertyValue]: "marginTop";
+    }) => {
+        marginTop: {
+            readonly [$$PropertyValue]: "marginTop";
+        };
+    };
+    mr: (value: {
+        readonly [$$PropertyValue]: "marginRight";
+    }) => {
+        marginRight: {
+            readonly [$$PropertyValue]: "marginRight";
+        };
+    };
+    mb: (value: {
+        readonly [$$PropertyValue]: "marginBottom";
+    }) => {
+        marginBottom: {
+            readonly [$$PropertyValue]: "marginBottom";
+        };
+    };
+    ml: (value: {
+        readonly [$$PropertyValue]: "marginLeft";
+    }) => {
+        marginLeft: {
+            readonly [$$PropertyValue]: "marginLeft";
+        };
+    };
+    mx: (value: {
+        readonly [$$PropertyValue]: "marginLeft";
+    }) => {
+        marginLeft: {
+            readonly [$$PropertyValue]: "marginLeft";
+        };
+        marginRight: {
+            readonly [$$PropertyValue]: "marginLeft";
+        };
+    };
+    my: (value: {
+        readonly [$$PropertyValue]: "marginTop";
+    }) => {
+        marginTop: {
+            readonly [$$PropertyValue]: "marginTop";
+        };
+        marginBottom: {
+            readonly [$$PropertyValue]: "marginTop";
+        };
+    };
+    ta: (value: {
+        readonly [$$PropertyValue]: "textAlign";
+    }) => {
+        textAlign: {
+            readonly [$$PropertyValue]: "textAlign";
+        };
+    };
+    fd: (value: {
+        readonly [$$PropertyValue]: "flexDirection";
+    }) => {
+        flexDirection: {
+            readonly [$$PropertyValue]: "flexDirection";
+        };
+    };
+    fw: (value: {
+        readonly [$$PropertyValue]: "flexWrap";
+    }) => {
+        flexWrap: {
+            readonly [$$PropertyValue]: "flexWrap";
+        };
+    };
+    ai: (value: {
+        readonly [$$PropertyValue]: "alignItems";
+    }) => {
+        alignItems: {
+            readonly [$$PropertyValue]: "alignItems";
+        };
+    };
+    ac: (value: {
+        readonly [$$PropertyValue]: "alignContent";
+    }) => {
+        alignContent: {
+            readonly [$$PropertyValue]: "alignContent";
+        };
+    };
+    jc: (value: {
+        readonly [$$PropertyValue]: "justifyContent";
+    }) => {
+        justifyContent: {
+            readonly [$$PropertyValue]: "justifyContent";
+        };
+    };
+    as: (value: {
+        readonly [$$PropertyValue]: "alignSelf";
+    }) => {
+        alignSelf: {
+            readonly [$$PropertyValue]: "alignSelf";
+        };
+    };
+    fg: (value: {
+        readonly [$$PropertyValue]: "flexGrow";
+    }) => {
+        flexGrow: {
+            readonly [$$PropertyValue]: "flexGrow";
+        };
+    };
+    fs: (value: {
+        readonly [$$PropertyValue]: "flexShrink";
+    }) => {
+        flexShrink: {
+            readonly [$$PropertyValue]: "flexShrink";
+        };
+    };
+    fb: (value: {
+        readonly [$$PropertyValue]: "flexBasis";
+    }) => {
+        flexBasis: {
+            readonly [$$PropertyValue]: "flexBasis";
+        };
+    };
+    bc: (value: {
+        readonly [$$PropertyValue]: "backgroundColor";
+    }) => {
+        backgroundColor: {
+            readonly [$$PropertyValue]: "backgroundColor";
+        };
+    };
+    br: (value: {
+        readonly [$$PropertyValue]: "borderRadius";
+    }) => {
+        borderRadius: {
+            readonly [$$PropertyValue]: "borderRadius";
+        };
+    };
+    btrr: (value: {
+        readonly [$$PropertyValue]: "borderTopRightRadius";
+    }) => {
+        borderTopRightRadius: {
+            readonly [$$PropertyValue]: "borderTopRightRadius";
+        };
+    };
+    bbrr: (value: {
+        readonly [$$PropertyValue]: "borderBottomRightRadius";
+    }) => {
+        borderBottomRightRadius: {
+            readonly [$$PropertyValue]: "borderBottomRightRadius";
+        };
+    };
+    bblr: (value: {
+        readonly [$$PropertyValue]: "borderBottomLeftRadius";
+    }) => {
+        borderBottomLeftRadius: {
+            readonly [$$PropertyValue]: "borderBottomLeftRadius";
+        };
+    };
+    btlr: (value: {
+        readonly [$$PropertyValue]: "borderTopLeftRadius";
+    }) => {
+        borderTopLeftRadius: {
+            readonly [$$PropertyValue]: "borderTopLeftRadius";
+        };
+    };
+    bs: (value: {
+        readonly [$$PropertyValue]: "boxShadow";
+    }) => {
+        boxShadow: {
+            readonly [$$PropertyValue]: "boxShadow";
+        };
+    };
+    lh: (value: {
+        readonly [$$PropertyValue]: "lineHeight";
+    }) => {
+        lineHeight: {
+            readonly [$$PropertyValue]: "lineHeight";
+        };
+    };
+    ox: (value: {
+        readonly [$$PropertyValue]: "overflowX";
+    }) => {
+        overflowX: {
+            readonly [$$PropertyValue]: "overflowX";
+        };
+    };
+    oy: (value: {
+        readonly [$$PropertyValue]: "overflowY";
+    }) => {
+        overflowY: {
+            readonly [$$PropertyValue]: "overflowY";
+        };
+    };
+    pe: (value: {
+        readonly [$$PropertyValue]: "pointerEvents";
+    }) => {
+        pointerEvents: {
+            readonly [$$PropertyValue]: "pointerEvents";
+        };
+    };
+    us: (value: {
+        readonly [$$PropertyValue]: "userSelect";
+    }) => {
+        WebkitUserSelect: {
+            readonly [$$PropertyValue]: "userSelect";
+        };
+        userSelect: {
+            readonly [$$PropertyValue]: "userSelect";
+        };
+    };
+    userSelect: (value: {
+        readonly [$$PropertyValue]: "userSelect";
+    }) => {
+        WebkitUserSelect: {
+            readonly [$$PropertyValue]: "userSelect";
+        };
+        userSelect: {
+            readonly [$$PropertyValue]: "userSelect";
+        };
+    };
+    size: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        width: {
+            readonly [$$PropertyValue]: "width";
+        };
+        height: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
+    appearance: (value: {
+        readonly [$$PropertyValue]: "appearance";
+    }) => {
+        WebkitAppearance: {
+            readonly [$$PropertyValue]: "appearance";
+        };
+        appearance: {
+            readonly [$$PropertyValue]: "appearance";
+        };
+    };
+    backgroundClip: (value: {
+        readonly [$$PropertyValue]: "backgroundClip";
+    }) => {
+        WebkitBackgroundClip: {
+            readonly [$$PropertyValue]: "backgroundClip";
+        };
+        backgroundClip: {
+            readonly [$$PropertyValue]: "backgroundClip";
+        };
+    };
+}>>;
+export declare const CheckboxIndicator: React.ForwardRefExoticComponent<CheckboxPrimitive.CheckboxIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const Checkbox: React.FC<CheckboxPrimitive.CheckboxProps>;

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

@@ -4,6 +4,8 @@ export declare const SvgIcon: import("@stitches/react/types/styled-component").S
     color?: "white" | "black" | "lightBackground" | "obolBlue" | "primaryBgDefault" | "primaryBgDefaultHover" | "primaryTextDefault" | "secondaryBgDefault" | "secondaryBgHover" | "grayBgDefault" | "gray2BgDefault" | "neutralDark" | "navButtonBgDefault" | "navButtonBgHover" | "cardBackgroundDark" | "cardBackgroundLight" | "textMiddle" | "textLight" | "textLighter" | "textTabHover" | "textTabInactive" | "textGreenDark" | "textGreenLight" | "textGreen1" | "textGreen2" | "textGreen3" | "textGreenHover" | "textCreateHover" | "textGrayHover" | "txButton" | "obolGreen" | "obolMidGreen" | "obolGreenHover" | "obolGreenLight" | "obolDarkDark" | "obolDisabled" | "linkButtonHover" | "progressTrackerGreen" | "coordinate" | "coordinateHover" | "test" | "testHover" | "create" | "createHover" | "light" | "body" | "muted" | "menu" | "bg01" | "bg02" | "bg03" | "bg04" | "bg05" | "tooltip" | "tooltip2" | "inherit" | undefined;
     size?: "inherit" | "sm" | "md" | "lg" | "xl" | undefined;
     fillColor?: boolean | "true" | "false" | undefined;
+    strokeColor?: boolean | "true" | "false" | undefined;
+    transform?: "xAxis" | undefined;
 }, {
     motion: "(prefers-reduced-motion)";
     hover: "(any-hover: hover)";

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

@@ -14,3 +14,5 @@ export * from "./IconButton/IconButton";
 export * from "./TextField/TextField";
 export * from "./NumberField/NumberField";
 export * from './Tooltip/Tooltip';
+export * from './LoadingButton/LoadingButton';
+export * from './Checkbox/Checkbox';

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

@@ -26,7 +26,10 @@ export * from "./static-icons/GroupIcon";
 export * from "./static-icons/ExistingGroupIcon";
 export * from "./static-icons/CopyIcon";
 export * from "./static-icons/CheckIcon";
+export * from "./static-icons/CheckboxIcon";
 export * from "./static-icons/TrashIcon";
 export * from "./static-icons/BulletCheckIcon";
 export * from "./static-icons/HelpIcon";
 export * from "./static-icons/WaitingIcon";
+export * from "./static-icons/MinusIcon";
+export * from "./static-icons/PlusIcon";

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

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

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

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

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

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

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

@@ -8,6 +8,7 @@ export interface StepProps {
 }
 interface ProgressTrackerProps {
     items: StepProps[];
+    currentStep?: StepProps;
 }
 export declare const ProgressTracker: React.FC<ProgressTrackerProps>;
 export {};

package/dist/index.es.js

@@ -4,6 +4,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import React, { forwardRef, useState, useRef, useEffect, useLayoutEffect } from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { useRouter } from 'next/router';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -401,6 +402,23 @@ var SvgIcon = styled("svg", {
                 },
             },
         },
+        strokeColor: {
+            true: {
+                "& path": {
+                    stroke: "$$color",
+                },
+            },
+            false: {
+                "& path": {
+                    stroke: "none",
+                },
+            },
+        },
+        transform: {
+            xAxis: {
+                transform: "scale(-1)",
+            },
+        },
     },
     defaultVariants: {
         size: "sm",
@@ -1096,6 +1114,8 @@ var CopyIcon = function () { return (jsxs("svg", __assign({ width: "24", height:
 
 var CheckIcon = function () { return (jsxs("svg", __assign({ width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { d: "M0.5 12C0.5 5.37258 5.87258 0 12.5 0V0C19.1274 0 24.5 5.37258 24.5 12V12C24.5 18.6274 19.1274 24 12.5 24V24C5.87258 24 0.5 18.6274 0.5 12V12Z", fill: "#1D5249" }), jsx("path", { d: "M10.6818 14.3284L8.29545 11.8209L7.5 12.6567L10.6818 16L17.5 8.83582L16.7045 8L10.6818 14.3284Z", fill: "#2FE4AB", stroke: "#2FE4AB" })] }))); };
 
+var CheckboxIcon = function () { return (jsx("svg", __assign({ width: "12", height: "9", viewBox: "0 0 12 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsx("path", { d: "M4.33317 6.63449L2.14567 4.33598L1.4165 5.10215L4.33317 8.16683L10.5832 1.59967L9.854 0.833496L4.33317 6.63449Z", fill: "#9CC2C9", stroke: "#9CC2C9" }) }))); };
+
 var TrashIcon = function () { return (jsx("svg", __assign({ width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsx("path", { d: "M16.5 9V19H8.5V9H16.5ZM15 3H10L9 4H5.5V6H19.5V4H16L15 3ZM18.5 7H6.5V19C6.5 20.1 7.4 21 8.5 21H16.5C17.6 21 18.5 20.1 18.5 19V7Z", fill: "#DAEEF3" }) }))); };
 
 var BulletCheckIcon = function () { return (jsxs("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { id: "background", d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z", fill: "#1D5249" }), jsx("path", { id: "check", d: "M10.1818 14.3284L7.79545 11.8209L7 12.6567L10.1818 16L17 8.83582L16.2045 8L10.1818 14.3284Z", fill: "#2FE4AB", stroke: "#2FE4AB" })] }))); };
@@ -1104,6 +1124,10 @@ var HelpIcon = function () { return (jsx("svg", __assign({ width: "25", height:
 
 var WaitingIcon = function () { return (jsxs("svg", __assign({ width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("rect", { x: "0.5", width: "24", height: "24", rx: "12", fill: "#243D42" }), jsx("path", { d: "M12.5 0C5.9 0 0.5 5.4 0.5 12C0.5 18.6 5.9 24 12.5 24C19.1 24 24.5 18.6 24.5 12C24.5 5.4 19.1 0 12.5 0ZM12.5 21.6C7.208 21.6 2.9 17.292 2.9 12C2.9 6.708 7.208 2.4 12.5 2.4C17.792 2.4 22.1 6.708 22.1 12C22.1 17.292 17.792 21.6 12.5 21.6ZM13.1 6H11.3V13.2L17.54 17.04L18.5 15.48L13.1 12.24V6Z", fill: "#475E64" })] }))); };
 
+var MinusIcon = function () { return (jsx("svg", __assign({ width: "15", height: "2", viewBox: "0 0 15 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsx("path", { d: "M14.5 2H0.5V0H14.5V2Z", fill: "#DAEEF3" }) }))); };
+
+var PlusIcon = function () { return (jsx("svg", __assign({ width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsx("path", { d: "M14 8H8V14H6V8H0V6H6V0H8V6H14V8Z", fill: "#DAEEF3" }) }))); };
+
 var TeamMemberCard = function (props) { return (jsxs(Box, __assign({ css: {
         display: "grid",
         gridTemplateColumns: "1fr",
@@ -1209,6 +1233,10 @@ var IconButton = styled("button", {
     "&:disabled": {
         backgroundColor: "$bg02",
         color: "$muted",
+        "& path": {
+            stroke: "$muted",
+            fill: "$muted",
+        },
     },
     margin: 0,
     border: "2px solid transparent",
@@ -1358,9 +1386,10 @@ var Content$2 = styled(TooltipContent, {
         fill: "$bg05",
     },
 });
-var TextFieldWithCopy = forwardRef(function (props, ref) {
+var TextFieldWithCopy = forwardRef(function (props) {
     var _a = useState(), inputValue = _a[0], setInputValue = _a[1];
     var _b = useState(false), isCopied = _b[0], setIsCopied = _b[1];
+    var ref = useRef(null);
     var copyToClipBoard = function (content) {
         if (content) {
             navigator.clipboard.writeText(content);
@@ -1370,7 +1399,9 @@ var TextFieldWithCopy = forwardRef(function (props, ref) {
     useTimeout(function () {
         setIsCopied(false);
     }, isCopied ? 3000 : null);
-    return (jsxs(Box, __assign({ css: { display: "flex" } }, { children: [jsx(TextField, __assign({ withCopy: true, ref: ref, value: inputValue, onChange: function (e) { return setInputValue(e.target.value); } }, props)), jsxs(Tooltip, __assign({ open: isCopied }, { children: [jsx(TooltipTrigger, __assign({ asChild: true }, { children: jsx(IconButton, __assign({ onClick: function () { return copyToClipBoard(inputValue); } }, { children: !isCopied ? jsx(CopyIcon, {}) : jsx(CheckIcon, {}) })) })), jsxs(Content$2, __assign({ side: "bottom", sideOffset: 5 }, { children: ["Copied!", jsx(TooltipArrow, {})] }))] }))] })));
+    return (jsxs(Box, __assign({ css: { display: "flex", width: "$full" } }, { children: [jsx(TextField, __assign({ withCopy: true, ref: ref, value: inputValue, onChange: function (e) { return setInputValue(e.target.value); } }, props, { css: { width: "$full" } })), jsxs(Tooltip, __assign({ open: isCopied }, { children: [jsx(TooltipTrigger, __assign({ asChild: true }, { children: jsx(IconButton, __assign({ onClick: function () {
+                                return copyToClipBoard(ref && ref.current && ref.current.value);
+                            } }, { children: !isCopied ? jsx(CopyIcon, {}) : jsx(CheckIcon, {}) })) })), jsxs(Content$2, __assign({ side: "bottom", sideOffset: 5 }, { children: ["Copied!", jsx(TooltipArrow, {})] }))] }))] })));
 });
 TextFieldWithCopy.displayName = "TextFieldWithCopy";
 
@@ -1446,10 +1477,30 @@ var NumberField = forwardRef(function (_a, ref) {
                 borderRadius: 0,
                 width: "95px",
             },
-        } }, { children: [jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick: handleOnDec, borderDisabled: qty <= min }, { children: "-" })), jsx(TextField, { css: { borderRightStyle: "none", borderLeftStyle: "none" }, type: "number", ref: ref, value: qty, onChange: handleOnChange, onBlur: onBlur, name: name }), jsx(IconButton, __assign({ disabled: qty >= max, className: "inc-button", onClick: handleOnInc, borderDisabled: qty >= max }, { children: "+" }))] })));
+        } }, { children: [jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick: handleOnDec, borderDisabled: qty <= min }, { children: jsx(MinusIcon, {}) })), jsx(TextField, { css: { borderRightStyle: "none", borderLeftStyle: "none" }, type: "number", ref: ref, value: qty, onChange: handleOnChange, onBlur: onBlur, name: name }), jsx(IconButton, __assign({ disabled: qty >= max, className: "inc-button", onClick: handleOnInc, borderDisabled: qty >= max }, { children: jsx(PlusIcon, {}) }))] })));
 });
 NumberField.displayName = "NumberField";
 
+var LoadingButton = function (_a) {
+    var loading = _a.loading, children = _a.children, props = __rest(_a, ["loading", "children"]);
+    return (jsxs(Button, __assign({}, props, { children: [loading && jsx(Spin, {}), children] })));
+};
+
+var CheckboxRoot = styled(CheckboxPrimitive.Root, {
+    bc: "$bg03",
+    size: "$lg",
+    border: "2px solid $body",
+    br: "$1",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+});
+var CheckboxIndicator = CheckboxPrimitive.Indicator;
+var Checkbox = function (_a) {
+    var props = __rest(_a, []);
+    return (jsx(CheckboxRoot, __assign({}, props, { children: jsx(CheckboxIndicator, { children: jsx(CheckboxIcon, {}) }) })));
+};
+
 var slideDown = keyframes({
     from: { height: 0 },
     to: { height: "var(--radix-accordion-content-height)" },
@@ -1718,24 +1769,37 @@ var NotificationContainer = styled(Box, {
     borderRadius: "$1",
     display: "flex",
     gap: "$xs",
-    p: "$md",
+    p: "$sm",
+    boxSizing: "border-box",
+    width: "$full",
 });
 var NotificationCard = function (_a) {
     var heading = _a.heading, subHeading = _a.subHeading, link = _a.link, _b = _a.linkText, linkText = _b === void 0 ? "More on Charon" : _b;
-    return (jsxs(NotificationContainer, { children: [jsx(Box, { children: jsx(AlertIcon, { size: "lg", color: "body" }) }), jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$sm" } }, { children: [jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$xs" } }, { children: [jsx(Text, __assign({ variant: "body" }, { children: heading })), subHeading && (jsx(Text, __assign({ css: { color: "$textLight", fontSize: "$3" } }, { children: subHeading })))] })), link && (jsxs(Link, __assign({ target: "_blank", href: link }, { children: [linkText, jsx(ArrowForward, { size: "md" })] })))] }))] }));
+    return (jsxs(NotificationContainer, { children: [jsx(Box, { children: jsx(AlertIcon, { size: "lg", color: "body" }) }), jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$sm" } }, { children: [jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$xs" } }, { children: [jsx(Text, __assign({ variant: "body" }, { children: heading })), subHeading && (jsx(Text, __assign({ css: { color: "$textLight", fontSize: "$3", lineHeight: "24px" } }, { children: subHeading })))] })), link && (jsxs(Link, __assign({ target: "_blank", href: link }, { children: [linkText, jsx(ArrowForward, { size: "md" })] })))] }))] }));
 };
 
 var ProgressTracker = function (_a) {
-    var items = _a.items;
+    var items = _a.items, currentStep = _a.currentStep;
     var _b = useState(items), steps = _b[0], setSteps = _b[1];
     var _c = useState(0), width = _c[0], setWidth = _c[1];
     useEffect(function () {
-        var _count = items.filter(function (item) { return item.status === "complete"; }).length;
+        var _count = 0;
+        if (currentStep) {
+            items.every(function (item) {
+                if (item.href === currentStep.href)
+                    return false;
+                _count++;
+                return true;
+            });
+        }
+        else {
+            _count = items.filter(function (item) { return item.status === "complete"; }).length;
+        }
         var offset = 100 / items.length / 2;
         var width = (100 / items.length) * _count + offset;
         setWidth(width);
         setSteps(items);
-    }, [items]);
+    }, [items, currentStep]);
     return (jsx(Box, __assign({ css: { backgroundColor: "$bg02", py: "$3xl", px: "$6xl" } }, { children: jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$md" } }, { children: [jsx(Box, __assign({ className: "progress-bar-behind", css: {
                         height: "$xxs",
                         borderRadius: "$3",
@@ -1871,6 +1935,10 @@ var Td = styled("td", {
         borderRadius: 0,
         width: "100%",
     },
+    textOverflow: 'ellipsis',
+    maxWidth: 0,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
     variants: {
         splitter: {
             true: {
@@ -1936,7 +2004,7 @@ var SplitterTable = function (_a) {
     return (jsxs(StyledTable, { children: [jsx("thead", { children: jsxs("tr", { children: [jsx(Th, {}), columns.map(function (column, index) { return (jsx(Th, __assign({ css: { textAlign: "start" } }, { children: column.header }), "header-".concat(index))); }), jsx(Th, {})] }) }), jsxs("tbody", { children: [rows.map(function (_a, rowIndex) {
                         var _b = _a.isRemovable, isRemovable = _b === void 0 ? true : _b, _c = _a.isEditable, isEditable = _c === void 0 ? true : _c, row = __rest(_a, ["isRemovable", "isEditable"]);
                         return (jsxs("tr", { children: [jsx(Td, __assign({ textCenter: true, size: "sm" }, { children: rowIndex + 1 })), columns.map(function (column, cellIndex) {
-                                    var _a, _b;
+                                    var _a, _b, _c, _d, _e, _f, _g;
                                     var isTextField = ((_a = column.cell) === null || _a === void 0 ? void 0 : _a.component) === "TextField";
                                     return (jsx(Td, __assign({ splitter: true, css: {
                                             "input::-webkit-inner-spin-button": {
@@ -1947,7 +2015,7 @@ var SplitterTable = function (_a) {
                                             "input[type=number]": {
                                                 "-moz-appearance": "textfield",
                                             },
-                                        } }, { children: isTextField && (jsx(TextField, __assign({ css: { color: "$body", fontWeight: "$bold" }, defaultValue: row[column.accessorKey], step: "any", onInput: function (e) {
+                                        } }, { children: isTextField && (jsx(TextField, { css: { color: "$body", fontWeight: "$bold" }, defaultValue: row[column.accessorKey], step: "any", onInput: function (e) {
                                                 var _a, _b, _c, _d;
                                                 var inputValue = e.target.value === ""
                                                     ? 0
@@ -1979,7 +2047,7 @@ var SplitterTable = function (_a) {
                                                     : e.target.value;
                                                 if (onUpdateRow)
                                                     onUpdateRow(row.id, value, column.accessorKey);
-                                            } }, (_b = column.cell) === null || _b === void 0 ? void 0 : _b.config, { readOnly: !isEditable }))) }), "cell ".concat(cellIndex)));
+                                            }, min: (_c = (_b = column.cell) === null || _b === void 0 ? void 0 : _b.config) === null || _c === void 0 ? void 0 : _c.min, max: (_e = (_d = column.cell) === null || _d === void 0 ? void 0 : _d.config) === null || _e === void 0 ? void 0 : _e.max, type: (_g = (_f = column.cell) === null || _f === void 0 ? void 0 : _f.config) === null || _g === void 0 ? void 0 : _g.type, readOnly: !isEditable })) }), "cell ".concat(cellIndex)));
                                 }), onRemoveRow && isRemovable && (jsx(Td, __assign({ splitter: true, size: "sm", css: { p: "$2" } }, { children: jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsx(TrashIcon, {}) })) })))] }, row.id));
                     }), jsx(AddNewRow, { onAddRow: onAddRow, totalSplitFooter: totalSplitFooter })] })] }));
 };
@@ -2194,4 +2262,4 @@ var TwoColumnSection = function (_a) {
                 } }, { children: !screenDownSm ? (jsx(Image, { src: image.basePath, width: "100%", height: "100%", alt: "Obol Logo" })) : (jsx(Image, { src: image.mobilePath || image.basePath, width: "100%", height: "100%", alt: "Obol Logo" })) }))] })));
 };
 
-export { Accordion, Advisory, AdvisoryToggleBullet, AdvisoryToggleItem, AlertIcon, AloneIcon, ArrowForward, Box, BulletCheckIcon, Button, ButtonStory, Card, CheckIcon, ChevronDownIcon, ChevronUpIcon, CloseIcon, CodeIcon, Container, CopyIcon, CreateIcon, Download, ExistingGroupIcon, Flex, Footer, GithubIcon, GroupIcon, HelpIcon, HeroSection, Hexapod, HexapodMobile, IconButton, IconButtonStory, Image, Link, LinkStory, LogoCard, MediaQueryKeys, MenuIcon, MigrateIcon, Navbar, NotificationCard, NotificationContainer, NumberField, ObolDarkBgH, ObolDarkBgMark, ObolDarkBgV, ObolDarkCircle, ObolLightBgH, ObolLightBgMark, ObolLightBgV, ObolLightCircle, ObolSolidDarkBgH, ObolSolidDarkBgMark, ObolSolidDarkBgV, ObolSolidLightBgH, ObolSolidLightBgMark, ObolSolidLightBgV, OpenInNew, PlanetBlue, PlanetGreen, PlanetGrey, PlanetMagenta, PlanetOrange, ProgressTracker, Provider, PublicGoodIcon, RadioGroup, RadioGroupComponent, RadioGroupIndicator, RadioGroupItem, RadioGroupItemLabel, RadioGroupRadio, RunIcon, Spin, SplitterTable, SvgIcon, Table, Tabs$1 as Tabs, TeamMemberCard, TestIcon, Text, TextField, TextFieldWithCopy, TextStory, ToggleCardItem, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipComponent, TooltipContent, TooltipTrigger, TrashIcon, TrustMinimisedIcon, TwitterIcon, TwoColumnSection, WaitingIcon, config, createTheme, css, getCssText, globalCss, keyframes, modifyVariantsForStory, reset, styled, theme, useMediaQuery };
+export { Accordion, Advisory, AdvisoryToggleBullet, AdvisoryToggleItem, AlertIcon, AloneIcon, ArrowForward, Box, BulletCheckIcon, Button, ButtonStory, Card, CheckIcon, Checkbox, CheckboxIcon, CheckboxIndicator, CheckboxRoot, ChevronDownIcon, ChevronUpIcon, CloseIcon, CodeIcon, Container, CopyIcon, CreateIcon, Download, ExistingGroupIcon, Flex, Footer, GithubIcon, GroupIcon, HelpIcon, HeroSection, Hexapod, HexapodMobile, IconButton, IconButtonStory, Image, Link, LinkStory, LoadingButton, LogoCard, MediaQueryKeys, MenuIcon, MigrateIcon, MinusIcon, Navbar, NotificationCard, NotificationContainer, NumberField, ObolDarkBgH, ObolDarkBgMark, ObolDarkBgV, ObolDarkCircle, ObolLightBgH, ObolLightBgMark, ObolLightBgV, ObolLightCircle, ObolSolidDarkBgH, ObolSolidDarkBgMark, ObolSolidDarkBgV, ObolSolidLightBgH, ObolSolidLightBgMark, ObolSolidLightBgV, OpenInNew, PlanetBlue, PlanetGreen, PlanetGrey, PlanetMagenta, PlanetOrange, PlusIcon, ProgressTracker, Provider, PublicGoodIcon, RadioGroup, RadioGroupComponent, RadioGroupIndicator, RadioGroupItem, RadioGroupItemLabel, RadioGroupRadio, RunIcon, Spin, SplitterTable, SvgIcon, Table, Tabs$1 as Tabs, TeamMemberCard, TestIcon, Text, TextField, TextFieldWithCopy, TextStory, ToggleCardItem, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipComponent, TooltipContent, TooltipTrigger, TrashIcon, TrustMinimisedIcon, TwitterIcon, TwoColumnSection, WaitingIcon, config, createTheme, css, getCssText, globalCss, keyframes, modifyVariantsForStory, reset, styled, theme, useMediaQuery };

package/dist/index.js

@@ -8,6 +8,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
 var React = require('react');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
+var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var router = require('next/router');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
@@ -36,6 +37,7 @@ var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
+var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 
@@ -432,6 +434,23 @@ var SvgIcon = styled("svg", {
                 },
             },
         },
+        strokeColor: {
+            true: {
+                "& path": {
+                    stroke: "$$color",
+                },
+            },
+            false: {
+                "& path": {
+                    stroke: "none",
+                },
+            },
+        },
+        transform: {
+            xAxis: {
+                transform: "scale(-1)",
+            },
+        },
     },
     defaultVariants: {
         size: "sm",
@@ -1127,6 +1146,8 @@ var CopyIcon = function () { return (jsxRuntime.jsxs("svg", __assign({ width: "2
 
 var CheckIcon = function () { return (jsxRuntime.jsxs("svg", __assign({ width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { d: "M0.5 12C0.5 5.37258 5.87258 0 12.5 0V0C19.1274 0 24.5 5.37258 24.5 12V12C24.5 18.6274 19.1274 24 12.5 24V24C5.87258 24 0.5 18.6274 0.5 12V12Z", fill: "#1D5249" }), jsxRuntime.jsx("path", { d: "M10.6818 14.3284L8.29545 11.8209L7.5 12.6567L10.6818 16L17.5 8.83582L16.7045 8L10.6818 14.3284Z", fill: "#2FE4AB", stroke: "#2FE4AB" })] }))); };
 
+var CheckboxIcon = function () { return (jsxRuntime.jsx("svg", __assign({ width: "12", height: "9", viewBox: "0 0 12 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.jsx("path", { d: "M4.33317 6.63449L2.14567 4.33598L1.4165 5.10215L4.33317 8.16683L10.5832 1.59967L9.854 0.833496L4.33317 6.63449Z", fill: "#9CC2C9", stroke: "#9CC2C9" }) }))); };
+
 var TrashIcon = function () { return (jsxRuntime.jsx("svg", __assign({ width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.jsx("path", { d: "M16.5 9V19H8.5V9H16.5ZM15 3H10L9 4H5.5V6H19.5V4H16L15 3ZM18.5 7H6.5V19C6.5 20.1 7.4 21 8.5 21H16.5C17.6 21 18.5 20.1 18.5 19V7Z", fill: "#DAEEF3" }) }))); };
 
 var BulletCheckIcon = function () { return (jsxRuntime.jsxs("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { id: "background", d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z", fill: "#1D5249" }), jsxRuntime.jsx("path", { id: "check", d: "M10.1818 14.3284L7.79545 11.8209L7 12.6567L10.1818 16L17 8.83582L16.2045 8L10.1818 14.3284Z", fill: "#2FE4AB", stroke: "#2FE4AB" })] }))); };
@@ -1135,6 +1156,10 @@ var HelpIcon = function () { return (jsxRuntime.jsx("svg", __assign({ width: "25
 
 var WaitingIcon = function () { return (jsxRuntime.jsxs("svg", __assign({ width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("rect", { x: "0.5", width: "24", height: "24", rx: "12", fill: "#243D42" }), jsxRuntime.jsx("path", { d: "M12.5 0C5.9 0 0.5 5.4 0.5 12C0.5 18.6 5.9 24 12.5 24C19.1 24 24.5 18.6 24.5 12C24.5 5.4 19.1 0 12.5 0ZM12.5 21.6C7.208 21.6 2.9 17.292 2.9 12C2.9 6.708 7.208 2.4 12.5 2.4C17.792 2.4 22.1 6.708 22.1 12C22.1 17.292 17.792 21.6 12.5 21.6ZM13.1 6H11.3V13.2L17.54 17.04L18.5 15.48L13.1 12.24V6Z", fill: "#475E64" })] }))); };
 
+var MinusIcon = function () { return (jsxRuntime.jsx("svg", __assign({ width: "15", height: "2", viewBox: "0 0 15 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.jsx("path", { d: "M14.5 2H0.5V0H14.5V2Z", fill: "#DAEEF3" }) }))); };
+
+var PlusIcon = function () { return (jsxRuntime.jsx("svg", __assign({ width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.jsx("path", { d: "M14 8H8V14H6V8H0V6H6V0H8V6H14V8Z", fill: "#DAEEF3" }) }))); };
+
 var TeamMemberCard = function (props) { return (jsxRuntime.jsxs(Box, __assign({ css: {
         display: "grid",
         gridTemplateColumns: "1fr",
@@ -1240,6 +1265,10 @@ var IconButton = styled("button", {
     "&:disabled": {
         backgroundColor: "$bg02",
         color: "$muted",
+        "& path": {
+            stroke: "$muted",
+            fill: "$muted",
+        },
     },
     margin: 0,
     border: "2px solid transparent",
@@ -1389,9 +1418,10 @@ var Content$2 = styled(TooltipContent, {
         fill: "$bg05",
     },
 });
-var TextFieldWithCopy = React.forwardRef(function (props, ref) {
+var TextFieldWithCopy = React.forwardRef(function (props) {
     var _a = React.useState(), inputValue = _a[0], setInputValue = _a[1];
     var _b = React.useState(false), isCopied = _b[0], setIsCopied = _b[1];
+    var ref = React.useRef(null);
     var copyToClipBoard = function (content) {
         if (content) {
             navigator.clipboard.writeText(content);
@@ -1401,7 +1431,9 @@ var TextFieldWithCopy = React.forwardRef(function (props, ref) {
     useTimeout(function () {
         setIsCopied(false);
     }, isCopied ? 3000 : null);
-    return (jsxRuntime.jsxs(Box, __assign({ css: { display: "flex" } }, { children: [jsxRuntime.jsx(TextField, __assign({ withCopy: true, ref: ref, value: inputValue, onChange: function (e) { return setInputValue(e.target.value); } }, props)), jsxRuntime.jsxs(Tooltip, __assign({ open: isCopied }, { children: [jsxRuntime.jsx(TooltipTrigger, __assign({ asChild: true }, { children: jsxRuntime.jsx(IconButton, __assign({ onClick: function () { return copyToClipBoard(inputValue); } }, { children: !isCopied ? jsxRuntime.jsx(CopyIcon, {}) : jsxRuntime.jsx(CheckIcon, {}) })) })), jsxRuntime.jsxs(Content$2, __assign({ side: "bottom", sideOffset: 5 }, { children: ["Copied!", jsxRuntime.jsx(TooltipArrow, {})] }))] }))] })));
+    return (jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", width: "$full" } }, { children: [jsxRuntime.jsx(TextField, __assign({ withCopy: true, ref: ref, value: inputValue, onChange: function (e) { return setInputValue(e.target.value); } }, props, { css: { width: "$full" } })), jsxRuntime.jsxs(Tooltip, __assign({ open: isCopied }, { children: [jsxRuntime.jsx(TooltipTrigger, __assign({ asChild: true }, { children: jsxRuntime.jsx(IconButton, __assign({ onClick: function () {
+                                return copyToClipBoard(ref && ref.current && ref.current.value);
+                            } }, { children: !isCopied ? jsxRuntime.jsx(CopyIcon, {}) : jsxRuntime.jsx(CheckIcon, {}) })) })), jsxRuntime.jsxs(Content$2, __assign({ side: "bottom", sideOffset: 5 }, { children: ["Copied!", jsxRuntime.jsx(TooltipArrow, {})] }))] }))] })));
 });
 TextFieldWithCopy.displayName = "TextFieldWithCopy";
 
@@ -1477,10 +1509,30 @@ var NumberField = React.forwardRef(function (_a, ref) {
                 borderRadius: 0,
                 width: "95px",
             },
-        } }, { children: [jsxRuntime.jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick: handleOnDec, borderDisabled: qty <= min }, { children: "-" })), jsxRuntime.jsx(TextField, { css: { borderRightStyle: "none", borderLeftStyle: "none" }, type: "number", ref: ref, value: qty, onChange: handleOnChange, onBlur: onBlur, name: name }), jsxRuntime.jsx(IconButton, __assign({ disabled: qty >= max, className: "inc-button", onClick: handleOnInc, borderDisabled: qty >= max }, { children: "+" }))] })));
+        } }, { children: [jsxRuntime.jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick: handleOnDec, borderDisabled: qty <= min }, { children: jsxRuntime.jsx(MinusIcon, {}) })), jsxRuntime.jsx(TextField, { css: { borderRightStyle: "none", borderLeftStyle: "none" }, type: "number", ref: ref, value: qty, onChange: handleOnChange, onBlur: onBlur, name: name }), jsxRuntime.jsx(IconButton, __assign({ disabled: qty >= max, className: "inc-button", onClick: handleOnInc, borderDisabled: qty >= max }, { children: jsxRuntime.jsx(PlusIcon, {}) }))] })));
 });
 NumberField.displayName = "NumberField";
 
+var LoadingButton = function (_a) {
+    var loading = _a.loading, children = _a.children, props = __rest(_a, ["loading", "children"]);
+    return (jsxRuntime.jsxs(Button, __assign({}, props, { children: [loading && jsxRuntime.jsx(Spin, {}), children] })));
+};
+
+var CheckboxRoot = styled(CheckboxPrimitive__namespace.Root, {
+    bc: "$bg03",
+    size: "$lg",
+    border: "2px solid $body",
+    br: "$1",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+});
+var CheckboxIndicator = CheckboxPrimitive__namespace.Indicator;
+var Checkbox = function (_a) {
+    var props = __rest(_a, []);
+    return (jsxRuntime.jsx(CheckboxRoot, __assign({}, props, { children: jsxRuntime.jsx(CheckboxIndicator, { children: jsxRuntime.jsx(CheckboxIcon, {}) }) })));
+};
+
 var slideDown = keyframes({
     from: { height: 0 },
     to: { height: "var(--radix-accordion-content-height)" },
@@ -1749,24 +1801,37 @@ var NotificationContainer = styled(Box, {
     borderRadius: "$1",
     display: "flex",
     gap: "$xs",
-    p: "$md",
+    p: "$sm",
+    boxSizing: "border-box",
+    width: "$full",
 });
 var NotificationCard = function (_a) {
     var heading = _a.heading, subHeading = _a.subHeading, link = _a.link, _b = _a.linkText, linkText = _b === void 0 ? "More on Charon" : _b;
-    return (jsxRuntime.jsxs(NotificationContainer, { children: [jsxRuntime.jsx(Box, { children: jsxRuntime.jsx(AlertIcon, { size: "lg", color: "body" }) }), jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$sm" } }, { children: [jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$xs" } }, { children: [jsxRuntime.jsx(Text, __assign({ variant: "body" }, { children: heading })), subHeading && (jsxRuntime.jsx(Text, __assign({ css: { color: "$textLight", fontSize: "$3" } }, { children: subHeading })))] })), link && (jsxRuntime.jsxs(Link, __assign({ target: "_blank", href: link }, { children: [linkText, jsxRuntime.jsx(ArrowForward, { size: "md" })] })))] }))] }));
+    return (jsxRuntime.jsxs(NotificationContainer, { children: [jsxRuntime.jsx(Box, { children: jsxRuntime.jsx(AlertIcon, { size: "lg", color: "body" }) }), jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$sm" } }, { children: [jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$xs" } }, { children: [jsxRuntime.jsx(Text, __assign({ variant: "body" }, { children: heading })), subHeading && (jsxRuntime.jsx(Text, __assign({ css: { color: "$textLight", fontSize: "$3", lineHeight: "24px" } }, { children: subHeading })))] })), link && (jsxRuntime.jsxs(Link, __assign({ target: "_blank", href: link }, { children: [linkText, jsxRuntime.jsx(ArrowForward, { size: "md" })] })))] }))] }));
 };
 
 var ProgressTracker = function (_a) {
-    var items = _a.items;
+    var items = _a.items, currentStep = _a.currentStep;
     var _b = React.useState(items), steps = _b[0], setSteps = _b[1];
     var _c = React.useState(0), width = _c[0], setWidth = _c[1];
     React.useEffect(function () {
-        var _count = items.filter(function (item) { return item.status === "complete"; }).length;
+        var _count = 0;
+        if (currentStep) {
+            items.every(function (item) {
+                if (item.href === currentStep.href)
+                    return false;
+                _count++;
+                return true;
+            });
+        }
+        else {
+            _count = items.filter(function (item) { return item.status === "complete"; }).length;
+        }
         var offset = 100 / items.length / 2;
         var width = (100 / items.length) * _count + offset;
         setWidth(width);
         setSteps(items);
-    }, [items]);
+    }, [items, currentStep]);
     return (jsxRuntime.jsx(Box, __assign({ css: { backgroundColor: "$bg02", py: "$3xl", px: "$6xl" } }, { children: jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$md" } }, { children: [jsxRuntime.jsx(Box, __assign({ className: "progress-bar-behind", css: {
                         height: "$xxs",
                         borderRadius: "$3",
@@ -1902,6 +1967,10 @@ var Td = styled("td", {
         borderRadius: 0,
         width: "100%",
     },
+    textOverflow: 'ellipsis',
+    maxWidth: 0,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
     variants: {
         splitter: {
             true: {
@@ -1967,7 +2036,7 @@ var SplitterTable = function (_a) {
     return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx(Th, {}), columns.map(function (column, index) { return (jsxRuntime.jsx(Th, __assign({ css: { textAlign: "start" } }, { children: column.header }), "header-".concat(index))); }), jsxRuntime.jsx(Th, {})] }) }), jsxRuntime.jsxs("tbody", { children: [rows.map(function (_a, rowIndex) {
                         var _b = _a.isRemovable, isRemovable = _b === void 0 ? true : _b, _c = _a.isEditable, isEditable = _c === void 0 ? true : _c, row = __rest(_a, ["isRemovable", "isEditable"]);
                         return (jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx(Td, __assign({ textCenter: true, size: "sm" }, { children: rowIndex + 1 })), columns.map(function (column, cellIndex) {
-                                    var _a, _b;
+                                    var _a, _b, _c, _d, _e, _f, _g;
                                     var isTextField = ((_a = column.cell) === null || _a === void 0 ? void 0 : _a.component) === "TextField";
                                     return (jsxRuntime.jsx(Td, __assign({ splitter: true, css: {
                                             "input::-webkit-inner-spin-button": {
@@ -1978,7 +2047,7 @@ var SplitterTable = function (_a) {
                                             "input[type=number]": {
                                                 "-moz-appearance": "textfield",
                                             },
-                                        } }, { children: isTextField && (jsxRuntime.jsx(TextField, __assign({ css: { color: "$body", fontWeight: "$bold" }, defaultValue: row[column.accessorKey], step: "any", onInput: function (e) {
+                                        } }, { children: isTextField && (jsxRuntime.jsx(TextField, { css: { color: "$body", fontWeight: "$bold" }, defaultValue: row[column.accessorKey], step: "any", onInput: function (e) {
                                                 var _a, _b, _c, _d;
                                                 var inputValue = e.target.value === ""
                                                     ? 0
@@ -2010,7 +2079,7 @@ var SplitterTable = function (_a) {
                                                     : e.target.value;
                                                 if (onUpdateRow)
                                                     onUpdateRow(row.id, value, column.accessorKey);
-                                            } }, (_b = column.cell) === null || _b === void 0 ? void 0 : _b.config, { readOnly: !isEditable }))) }), "cell ".concat(cellIndex)));
+                                            }, min: (_c = (_b = column.cell) === null || _b === void 0 ? void 0 : _b.config) === null || _c === void 0 ? void 0 : _c.min, max: (_e = (_d = column.cell) === null || _d === void 0 ? void 0 : _d.config) === null || _e === void 0 ? void 0 : _e.max, type: (_g = (_f = column.cell) === null || _f === void 0 ? void 0 : _f.config) === null || _g === void 0 ? void 0 : _g.type, readOnly: !isEditable })) }), "cell ".concat(cellIndex)));
                                 }), onRemoveRow && isRemovable && (jsxRuntime.jsx(Td, __assign({ splitter: true, size: "sm", css: { p: "$2" } }, { children: jsxRuntime.jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsxRuntime.jsx(TrashIcon, {}) })) })))] }, row.id));
                     }), jsxRuntime.jsx(AddNewRow, { onAddRow: onAddRow, totalSplitFooter: totalSplitFooter })] })] }));
 };
@@ -2238,6 +2307,10 @@ exports.Button = Button;
 exports.ButtonStory = ButtonStory;
 exports.Card = Card;
 exports.CheckIcon = CheckIcon;
+exports.Checkbox = Checkbox;
+exports.CheckboxIcon = CheckboxIcon;
+exports.CheckboxIndicator = CheckboxIndicator;
+exports.CheckboxRoot = CheckboxRoot;
 exports.ChevronDownIcon = ChevronDownIcon;
 exports.ChevronUpIcon = ChevronUpIcon;
 exports.CloseIcon = CloseIcon;
@@ -2260,10 +2333,12 @@ exports.IconButtonStory = IconButtonStory;
 exports.Image = Image;
 exports.Link = Link;
 exports.LinkStory = LinkStory;
+exports.LoadingButton = LoadingButton;
 exports.LogoCard = LogoCard;
 exports.MediaQueryKeys = MediaQueryKeys;
 exports.MenuIcon = MenuIcon;
 exports.MigrateIcon = MigrateIcon;
+exports.MinusIcon = MinusIcon;
 exports.Navbar = Navbar;
 exports.NotificationCard = NotificationCard;
 exports.NotificationContainer = NotificationContainer;
@@ -2288,6 +2363,7 @@ exports.PlanetGreen = PlanetGreen;
 exports.PlanetGrey = PlanetGrey;
 exports.PlanetMagenta = PlanetMagenta;
 exports.PlanetOrange = PlanetOrange;
+exports.PlusIcon = PlusIcon;
 exports.ProgressTracker = ProgressTracker;
 exports.Provider = Provider;
 exports.PublicGoodIcon = PublicGoodIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obolnetwork/obol-ui",
-  "version": "1.0.21",
+  "version": "1.0.24",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "license": "MIT",
@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^0.1.6",
+    "@radix-ui/react-checkbox": "^1.0.0",
     "@radix-ui/react-dialog": "^0.1.7",
     "@radix-ui/react-icons": "^1.1.1",
     "@radix-ui/react-radio-group": "^0.1.5",