@obolnetwork/obol-ui 1.0.9 → 1.0.10

package/dist/index.js

@@ -9,8 +9,9 @@ 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 router = require('next/router');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
+var router = require('next/router');
+var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -38,6 +39,7 @@ var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
+var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -876,14 +878,14 @@ var StyledTrigger$1 = styled(TabsPrimitive__namespace.Trigger, {
         boxShadow: "inset 0 -2px 0 0 currentColor",
     },
 });
-var StyledContent$1 = styled(TabsPrimitive__namespace.Content, {
+var StyledContent$2 = styled(TabsPrimitive__namespace.Content, {
     flexGrow: 1,
 });
 // Exports
 var Tabs = StyledTabs;
 var TabsList = StyledList;
 var TabsTrigger = StyledTrigger$1;
-var TabsContent = StyledContent$1;
+var TabsContent = StyledContent$2;
 
 var Tabs$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -1126,6 +1128,8 @@ var TrashIcon = function () { return (jsxRuntime.jsx("svg", __assign({ width: "2
 
 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" })] }))); };
 
+var HelpIcon = 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: "M11.5 18H13.5V16H11.5V18ZM12.5 2C6.98 2 2.5 6.48 2.5 12C2.5 17.52 6.98 22 12.5 22C18.02 22 22.5 17.52 22.5 12C22.5 6.48 18.02 2 12.5 2ZM12.5 20C8.09 20 4.5 16.41 4.5 12C4.5 7.59 8.09 4 12.5 4C16.91 4 20.5 7.59 20.5 12C20.5 16.41 16.91 20 12.5 20ZM12.5 6C10.29 6 8.5 7.79 8.5 10H10.5C10.5 8.9 11.4 8 12.5 8C13.6 8 14.5 8.9 14.5 10C14.5 12 11.5 11.75 11.5 15H13.5C13.5 12.75 16.5 12.5 16.5 10C16.5 7.79 14.71 6 12.5 6Z", fill: "#9CC2C9" }) }))); };
+
 var TeamMemberCard = function (props) { return (jsxRuntime.jsxs(Box, __assign({ css: {
         display: "grid",
         gridTemplateColumns: "1fr",
@@ -1263,7 +1267,7 @@ var slideLeftAndFade = keyframes({
     "0%": { opacity: 0, transform: "translateX(2px)" },
     "100%": { opacity: 1, transform: "translateX(0)" },
 });
-styled(TooltipPrimitive__namespace.Content, {
+var StyledContent$1 = styled(TooltipPrimitive__namespace.Content, {
     borderRadius: "$1",
     padding: "$sm",
     fontSize: "$3",
@@ -1286,13 +1290,20 @@ styled(TooltipPrimitive__namespace.Content, {
         },
     },
 });
-styled(TooltipPrimitive__namespace.Arrow, {
+var StyledArrow = styled(TooltipPrimitive__namespace.Arrow, {
     fill: "$tooltip",
 });
+// Exports
+var Provider = TooltipPrimitive__namespace.Provider;
 var Tooltip = TooltipPrimitive__namespace.Root;
 var TooltipTrigger = TooltipPrimitive__namespace.Trigger;
 var TooltipContent = TooltipPrimitive__namespace.Content;
-var TooltipArrow = TooltipPrimitive__namespace.Arrow;
+var TooltipArrow = TooltipPrimitive__namespace.Arrow;
+var TooltipComponent = function (_a) {
+    var _b = _a.side, side = _b === void 0 ? "bottom" : _b, _c = _a.sideOffset, sideOffset = _c === void 0 ? 5 : _c, children = _a.children, content = _a.content, props = __rest(_a, ["side", "sideOffset", "children", "content"]);
+    return (jsxRuntime.jsxs(Tooltip, __assign({}, props, { children: [jsxRuntime.jsx(TooltipTrigger, __assign({ asChild: true }, { children: children })), jsxRuntime.jsxs(StyledContent$1, __assign({ className: "tooltip-content", side: side, sideOffset: sideOffset }, { children: [content, jsxRuntime.jsx(StyledArrow, { className: "arrow" })] }))] })));
+};
+TooltipComponent.displayName = "Tooltip";
 
 var TextField = styled("input", {
     //reset
@@ -1378,8 +1389,8 @@ var TextFieldWithCopy = React.forwardRef(function (props, ref) {
 TextFieldWithCopy.displayName = "TextFieldWithCopy";
 
 var NumberField = React.forwardRef(function (_a, ref) {
-    var _b = _a.max, max = _b === void 0 ? 10 : _b, _c = _a.min, min = _c === void 0 ? 1 : _c;
-    var _d = React.useState(min), qty = _d[0], setQty = _d[1];
+    var _b = _a.max, max = _b === void 0 ? 10 : _b, _c = _a.min, min = _c === void 0 ? 1 : _c, value = _a.value, onChangeValue = _a.onChangeValue;
+    var _d = React.useState(value | min), qty = _d[0], setQty = _d[1];
     var handleOnDec = function () {
         if (qty <= min) {
             setQty(min);
@@ -1408,6 +1419,11 @@ var NumberField = React.forwardRef(function (_a, ref) {
             setQty(value);
         }
     };
+    React.useEffect(function () {
+        if (qty && onChangeValue) {
+            onChangeValue(qty);
+        }
+    }, [qty, onChangeValue]);
     return (jsxRuntime.jsxs(Box, __assign({ css: {
             display: "flex",
             "input::-webkit-inner-spin-button": {
@@ -1445,6 +1461,129 @@ var NumberField = React.forwardRef(function (_a, ref) {
 });
 NumberField.displayName = "NumberField";
 
+var slideDown = keyframes({
+    from: { height: 0 },
+    to: { height: "var(--radix-accordion-content-height)" },
+});
+var slideUp = keyframes({
+    from: { height: "var(--radix-accordion-content-height)" },
+    to: { height: 0 },
+});
+var StyledItem = styled(AccordionPrimitive__namespace.Item, {
+    overflow: "hidden",
+    marginTop: 1,
+});
+var StyledHeader = styled(AccordionPrimitive__namespace.Header, {
+    all: "unset",
+    display: "flex",
+});
+var StyledTrigger = styled(AccordionPrimitive__namespace.Trigger, {
+    all: "unset",
+    $$boxShadowColor: "$colors$muted",
+    fontFamily: "inherit",
+    backgroundColor: "transparent",
+    height: 30,
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    fontSize: 15,
+    textTransform: "uppercase",
+    fontWeight: "$bold",
+    lineHeight: 1,
+    color: "$$boxShadowColor",
+    borderBottom: "2px solid $$boxShadowColor",
+    '&[data-state="closed"]': {
+        backgroundColor: "transparent",
+    },
+    '&[data-state="open"]': {
+        $$boxShadowColor: "$colors$textLight",
+        backgroundColor: "transparent",
+    },
+    "&:hover": { $$boxShadowColor: "$colors$textLight" },
+});
+var StyledContent = styled(AccordionPrimitive__namespace.Content, {
+    overflow: "hidden",
+    fontSize: 15,
+    color: "$textLight",
+    '&[data-state="open"]': {
+        animation: "".concat(slideDown, " 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards"),
+    },
+    '&[data-state="closed"]': {
+        animation: "".concat(slideUp, " 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards"),
+    },
+});
+var StyledChevron = styled(ChevronDownIcon, {
+    color: "$textLight",
+    transition: "transform 300ms cubic-bezier(0.87, 0, 0.13, 1)",
+    "[data-state=open] &": { transform: "rotate(180deg)" },
+});
+var StyledRoot = styled(AccordionPrimitive__namespace.Root, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "$lg",
+});
+// Exports
+var Root = StyledRoot;
+var Item = StyledItem;
+// eslint-disable-next-line react/display-name
+var Trigger = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (jsxRuntime.jsx(StyledHeader, { children: jsxRuntime.jsxs(StyledTrigger, __assign({}, props, { children: [children, jsxRuntime.jsx(StyledChevron, { "aria-hidden": true })] })) }));
+};
+// eslint-disable-next-line react/display-name
+var Content$1 = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (jsxRuntime.jsx(StyledContent, __assign({}, props, { children: children })));
+};
+
+var Accordion = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Root: Root,
+    Item: Item,
+    Trigger: Trigger,
+    Content: Content$1
+});
+
+var AdvisoryToggleItem = styled(ToggleGroupItem, {
+    all: "unset",
+    backgroundColor: "transparent",
+    border: "2px solid transparent",
+    "&:hover": { cursor: "pointer" },
+    "&[data-state-item=selected]": {
+        "& .advisory-bullet": { borderLeft: "2px solid $obolGreen" },
+    },
+});
+var AdvisoryToggleBullet = function (props) {
+    var color = "light";
+    if (props.state === "completed") {
+        color = "body";
+    }
+    if (props.state === "upcoming") {
+        color = "muted";
+    }
+    return (jsxRuntime.jsxs(Box, __assign({ className: "advisory-bullet", css: {
+            display: "flex",
+            flexWrap: "wrap",
+            alignItems: "center",
+            gap: "$xs",
+            minHeight: "$2xl",
+            pl: "calc($2xl - 2px)",
+            ml: "-2px",
+            borderLeft: "2px solid transparent"
+        } }, { children: [props.state === "completed" ? (jsxRuntime.jsx(BulletCheckIcon, {})) : (jsxRuntime.jsx(Box, __assign({ css: {
+                    display: "grid",
+                    placeItems: "center",
+                    width: "$lg",
+                    height: "$lg",
+                    backgroundColor: props.state === "upcoming" ? "$bg03" : "$obolMidGreen",
+                    borderRadius: "$round",
+                    fontSize: "$3",
+                    fontWeight: "$bold",
+                    color: props.state === "upcoming" ? "$muted" : "$obolGreen",
+                } }, { children: props.rank }))), jsxRuntime.jsx(Text, __assign({ color: color }, { children: props.children }))] })));
+};
+
 var CardImage = styled(Image__default["default"], {
     btrr: "$4",
     btlr: "$4",
@@ -1460,7 +1599,7 @@ var ToggleCardItem = styled(ToggleGroupItem, {
         border: "2px solid $obolGreen",
     },
 });
-var Content$1 = function (props) { return (jsxRuntime.jsxs(Container, __assign({ className: "card-container", alignItems: props.contentAlign || "center", ghost: true }, { children: [jsxRuntime.jsxs(Container, __assign({ className: "card-container-text", alignItems: props.contentAlign || "center", css: { gap: "$xs" }, ghost: true }, { children: [props.heading && (jsxRuntime.jsx(Text, __assign({ className: "card-heading", variant: "h5" }, { children: props.heading }))), props.subheading && (jsxRuntime.jsx(Text, __assign({ className: "card-subheading", css: { lineHeight: "$base", color: "$body" }, size: "4" }, { children: props.subheading })))] })), props.link && (jsxRuntime.jsxs(Link, __assign({ className: "card-link", href: props.link, target: "_blank" }, { children: ["Learn More ", jsxRuntime.jsx(ArrowForward, {})] })))] }))); };
+var Content = function (props) { return (jsxRuntime.jsxs(Container, __assign({ className: "card-container", alignItems: props.contentAlign || "center", ghost: true }, { children: [jsxRuntime.jsxs(Container, __assign({ className: "card-container-text", alignItems: props.contentAlign || "center", css: { gap: "$xs" }, ghost: true }, { children: [props.heading && (jsxRuntime.jsx(Text, __assign({ className: "card-heading", variant: "h5" }, { children: props.heading }))), props.subheading && (jsxRuntime.jsx(Text, __assign({ className: "card-subheading", css: { lineHeight: "$base", color: "$body" }, size: "4" }, { children: props.subheading })))] })), props.link && (jsxRuntime.jsxs(Link, __assign({ className: "card-link", href: props.link, target: "_blank" }, { children: ["Learn More ", jsxRuntime.jsx(ArrowForward, {})] })))] }))); };
 var BoxCard = styled(Box, {
     display: "flex",
     flexDirection: "column",
@@ -1500,7 +1639,7 @@ var Card = function (_a) {
                     gap: "$xl",
                     flexDirection: "column",
                     alignItems: "center",
-                } }, { children: [variant == "icon" && props.image, jsxRuntime.jsx(Content$1, __assign({}, props))] }))] })));
+                } }, { children: [variant == "icon" && props.image, jsxRuntime.jsx(Content, __assign({}, props))] }))] })));
 };
 
 var Navbar = function (_a) {
@@ -1583,89 +1722,295 @@ var Navbar = function (_a) {
                         } }, { children: jsxRuntime.jsx(ContentMenu, {}) }))] }))] })));
 };
 
-var slideDown = keyframes({
-    from: { height: 0 },
-    to: { height: "var(--radix-accordion-content-height)" },
-});
-var slideUp = keyframes({
-    from: { height: "var(--radix-accordion-content-height)" },
-    to: { height: 0 },
-});
-var StyledItem = styled(AccordionPrimitive__namespace.Item, {
-    overflow: "hidden",
-    marginTop: 1,
-});
-var StyledHeader = styled(AccordionPrimitive__namespace.Header, {
-    all: "unset",
+var NotificationContainer = styled(Box, {
+    backgroundColor: "$bg03",
+    borderRadius: "$1",
     display: "flex",
+    gap: "$xs",
+    p: "$md",
 });
-var StyledTrigger = styled(AccordionPrimitive__namespace.Trigger, {
+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" })] })))] }))] }));
+};
+
+var ProgressTracker = function (props) {
+    var _a = React.useState(props.items), items = _a[0]; _a[1];
+    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",
+                        backgroundColor: "$progressTrackerGreen",
+                        position: "relative",
+                        width: "$full",
+                    } }, { children: jsxRuntime.jsxs(Box, __assign({ css: {
+                            display: "grid",
+                            placeItems: "end",
+                            height: "$xxs",
+                            borderRadius: "$3",
+                            position: "relative",
+                            width: "calc(100% / ".concat(items.length - 1, ")"),
+                        } }, { children: [jsxRuntime.jsx(Box, { css: {
+                                    display: "grid",
+                                    placeItems: "center",
+                                    position: "absolute",
+                                    width: "28px",
+                                    height: "28px",
+                                    backgroundColor: "$progressTrackerGreen",
+                                    borderRadius: "$round",
+                                    top: "-10px",
+                                    right: "-14px",
+                                } }), jsxRuntime.jsx(Box, { css: {
+                                    display: "grid",
+                                    placeItems: "end",
+                                    height: "$xxs",
+                                    borderRadius: "$3",
+                                    backgroundColor: "$obolGreen",
+                                    position: "absolute",
+                                    width: "$full",
+                                    "&::after": {
+                                        content: "",
+                                        position: "absolute",
+                                        width: "$sm",
+                                        height: "$sm",
+                                        backgroundColor: "$obolGreen",
+                                        borderRadius: "$round",
+                                        top: "-4px",
+                                        right: "-8px",
+                                    },
+                                } })] })) })), jsxRuntime.jsx(Box, __assign({ className: "link-items", css: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                    } }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(Link, __assign({ disabled: item.status === "incomplete", href: item.status === "incomplete" ? "javascript:void(0)" : item.href }, { children: item.title }), ":l".concat(index))); }) }))] })) })));
+};
+
+var StyledRadio = styled(RadioGroupPrimitive__namespace.Item, {
     all: "unset",
-    $$boxShadowColor: "$colors$muted",
-    fontFamily: "inherit",
-    backgroundColor: "transparent",
-    height: 30,
-    flex: 1,
+    backgroundColor: "$obolGreen",
+    width: 25,
+    height: 25,
+    borderRadius: "100%",
+    "&:hover": { filter: "brightness(90%)", cursor: "pointer" },
+});
+var StyledIndicator = styled(RadioGroupPrimitive__namespace.Indicator, {
     display: "flex",
     alignItems: "center",
-    justifyContent: "space-between",
-    fontSize: 15,
-    textTransform: "uppercase",
-    fontWeight: "$bold",
-    lineHeight: 1,
-    color: "$$boxShadowColor",
-    borderBottom: "2px solid $$boxShadowColor",
-    '&[data-state="closed"]': {
-        backgroundColor: "transparent",
-    },
-    '&[data-state="open"]': {
-        $$boxShadowColor: "$colors$textLight",
-        backgroundColor: "transparent",
+    justifyContent: "center",
+    width: "100%",
+    height: "100%",
+    position: "relative",
+    "&::after": {
+        content: '""',
+        display: "absolute",
+        position: "absolute",
+        width: 11,
+        height: 11,
+        borderRadius: "50%",
+        boxShadow: "0 0 0 4px #0E1E22",
+        backgroundColor: "#2FE4AB",
     },
-    "&:hover": { $$boxShadowColor: "$colors$textLight" },
 });
-var StyledContent = styled(AccordionPrimitive__namespace.Content, {
-    overflow: "hidden",
-    fontSize: 15,
+// Exports
+var RadioGroup = RadioGroupPrimitive__namespace.Root;
+var RadioGroupRadio = StyledRadio;
+var RadioGroupIndicator = StyledIndicator;
+var RadioGroupItemLabel = styled("label", {
     color: "$textLight",
-    '&[data-state="open"]': {
-        animation: "".concat(slideDown, " 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards"),
+    fontSize: "$3",
+    lineHeight: 1,
+    userSelect: "none",
+    paddingLeft: "$xxxs",
+    textTransform: "uppercase",
+});
+var RadioGroupItem = function (_a) {
+    var value = _a.value, label = _a.label, _b = _a.index, index = _b === void 0 ? 1 : _b;
+    var id = "id-:r".concat(index, ":");
+    return (jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", margin: "10px 0", alignItems: "center" } }, { children: [jsxRuntime.jsx(RadioGroupRadio, __assign({ value: value, id: id }, { children: jsxRuntime.jsx(RadioGroupPrimitive__namespace.RadioGroupIndicator, {}) })), jsxRuntime.jsx(RadioGroupItemLabel, __assign({ htmlFor: id }, { children: label }))] })));
+};
+var RadioGroupComponent = function (_a) {
+    var items = _a.items, value = _a.value, onValueChange = _a.onValueChange, props = __rest(_a, ["items", "value", "onValueChange"]);
+    return (jsxRuntime.jsx(RadioGroup, __assign({ "aria-label": "View density", value: value, onValueChange: onValueChange }, props, { children: items.map(function (item, index) { return (jsxRuntime.jsx(RadioGroupItem, __assign({}, item, { index: index }), "item-".concat(item.label, "-").concat(index))); }) })));
+};
+
+var StyledTable = styled("table", {
+    borderCollapse: "collapse",
+    borderRadius: "2px",
+    backgroundColor: "$bg02",
+    borderStyle: "hidden",
+    boxShadow: "0 0 0 2px $bg04",
+    width: "100%",
+    "& thead": {
+        color: "$body",
+        textTransform: "uppercase",
+        fontWeight: "$bold",
+        fontSize: "$3",
+        "& td": {
+            py: "$xs",
+            px: "$sm",
+        },
     },
-    '&[data-state="closed"]': {
-        animation: "".concat(slideUp, " 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards"),
+    "& tr": {
+        color: "$textLighter",
     },
 });
-var StyledChevron = styled(ChevronDownIcon, {
-    color: "$textLight",
-    transition: "transform 300ms cubic-bezier(0.87, 0, 0.13, 1)",
-    "[data-state=open] &": { transform: "rotate(180deg)" },
+var Td = styled("td", {
+    border: "2px solid $bg04",
+    py: 0,
+    px: "$sm",
+    textAlign: "center",
+    color: "$body",
+    fontWeight: "$bold",
+    fontSize: "$4",
+    "& input": {
+        border: "none",
+        borderRadius: 0,
+        width: "100%",
+    },
+    variants: {
+        noPadding: {
+            true: {
+                p: 0,
+            },
+        },
+        size: {
+            sm: {
+                width: "$3xl",
+            },
+        },
+    },
 });
-var StyledRoot = styled(AccordionPrimitive__namespace.Root, {
-    display: "flex",
-    flexDirection: "column",
-    gap: "$lg",
+var Tr = styled("tr", {});
+var BoxBorderTop = styled(Box, {
+    borderTop: "2px solid $bg04",
+    marginTop: "$2",
+    height: "$3xl",
 });
-// Exports
-var Root = StyledRoot;
-var Item = StyledItem;
-// eslint-disable-next-line react/display-name
-var Trigger = function (_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return (jsxRuntime.jsx(StyledHeader, { children: jsxRuntime.jsxs(StyledTrigger, __assign({}, props, { children: [children, jsxRuntime.jsx(StyledChevron, { "aria-hidden": true })] })) }));
+var AddNewRow = function (props) {
+    return (jsxRuntime.jsxs(Tr, { children: [jsxRuntime.jsx(Td, __assign({ noPadding: true }, { children: jsxRuntime.jsx(BoxBorderTop, { children: "" }) })), jsxRuntime.jsx(Td, __assign({ noPadding: true, css: { backgroundColor: "$bg03" } }, { children: jsxRuntime.jsx(BoxBorderTop, { children: jsxRuntime.jsx(Button, __assign({ css: {
+                            color: "$obolGreen",
+                            justifyContent: "start",
+                            borderRadius: 0,
+                            "&:hover": {
+                                backgroundColor: "#2FE4AB10",
+                            },
+                        }, fullWidth: true, ghost: true, onClick: props.handleOnClick }, { children: "+ Add Signer" })) }) })), jsxRuntime.jsx(Td, __assign({ noPadding: true, css: { backgroundColor: "$bg03" } }, { children: jsxRuntime.jsx(BoxBorderTop, {}) }))] }));
 };
-// eslint-disable-next-line react/display-name
-var Content = function (_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return (jsxRuntime.jsx(StyledContent, __assign({}, props, { children: children })));
+// Components
+var SplitterTable = function (_a) {
+    var rows = _a.rows, columns = _a.columns, _b = _a.renderComponentValue, renderComponentValue = _b === void 0 ? "TextField" : _b, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow;
+    return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsxs("thead", { children: [jsxRuntime.jsx(Td, {}), columns.map(function (column, index) { return (jsxRuntime.jsx(Td, __assign({ css: { textAlign: "start" } }, { children: column }), "header-".concat(index))); }), jsxRuntime.jsx(Td, {})] }), jsxRuntime.jsxs("tbody", { children: [rows.map(function (row, rowIndex) { return (jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx(Td, __assign({ size: "sm" }, { children: rowIndex + 1 })), Object.keys(row).map(function (data, cellIndex) {
+                                if (data === "id")
+                                    return null;
+                                var isTextField = renderComponentValue === "TextField";
+                                return (jsxRuntime.jsx(Td, __assign({ noPadding: true }, { children: isTextField ? (jsxRuntime.jsx(TextField, { defaultValue: row.value, onChange: function (e) { return onUpdateRow(row.id, e.target.value); } })) : (row.value) }), "cell ".concat(cellIndex)));
+                            }), jsxRuntime.jsx(Td, __assign({ size: "sm" }, { children: jsxRuntime.jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsxRuntime.jsx(TrashIcon, {}) })) }))] }, row.id)); }), jsxRuntime.jsx(AddNewRow, { handleOnClick: function () { return onAddRow(""); } })] })] }));
+};
+var Table = function (_a) {
+    var rows = _a.rows, columns = _a.columns;
+    return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: columns.map(function (column, index) { return (jsxRuntime.jsx(Td, { children: column }, "header-".concat(index))); }) }), jsxRuntime.jsx("tbody", { children: rows.map(function (row, rowIndex) { return (jsxRuntime.jsx("tr", { children: Object.keys(row).map(function (data, cellIndex) {
+                        return (jsxRuntime.jsx(Td, { children: row.value }, "cell ".concat(cellIndex)));
+                    }) }, "row ".concat(rowIndex))); }) })] }));
 };
 
-var Accordion = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    Root: Root,
-    Item: Item,
-    Trigger: Trigger,
-    Content: Content
-});
+var Advisory = function (_a) {
+    var onUpdateState = _a.onUpdateState, onItemChange = _a.onItemChange, onComplete = _a.onComplete, onBack = _a.onBack, itemSelected = _a.itemSelected, props = __rest(_a, ["onUpdateState", "onItemChange", "onComplete", "onBack", "itemSelected"]);
+    var handleOnBack = function (value) {
+        onBack(value);
+    };
+    var handleOnAccept = function (value) {
+        onUpdateState(value);
+    };
+    return (jsxRuntime.jsxs(Box, __assign({ css: {
+            display: "flex",
+            border: "2px solid $bg04",
+            borderRadius: "$3",
+            height: "752px",
+        } }, { children: [jsxRuntime.jsx(Box, __assign({ css: {
+                    display: "flex",
+                    fd: "column",
+                    flex: 1,
+                    py: "$xl",
+                    backgroundColor: "$bg02",
+                    borderRight: "2px solid $bg04",
+                    btlr: "$2",
+                    bblr: "$2",
+                } }, { children: jsxRuntime.jsx(ToggleGroup, __assign({ css: {
+                        display: "flex",
+                        fd: "column",
+                        gap: "$xxs",
+                    }, type: "single", "aria-label": "Text alignment", value: itemSelected.value, onValueChange: function (value) {
+                        if (value !== "") {
+                            var content = props.items.find(function (item) { return item.value === value; });
+                            if (content) {
+                                onItemChange(content);
+                            }
+                        }
+                    } }, { children: props.items.map(function (item, index) { return (jsxRuntime.jsx(AdvisoryToggleItem, __assign({ disabled: item.state === "upcoming", value: item.value, "aria-label": item.title, css: { borderLeftWidth: "0px" }, "data-state-item": item.value === itemSelected.value ? "selected" : "" }, { children: jsxRuntime.jsx(AdvisoryToggleBullet, __assign({ state: item.state, rank: item.rank, onClick: function () { return console.log("enable next, complete this"); } }, { children: item.title }), ":ab".concat(index, ":")) }), ":at".concat(index, ":"))); }) })) })), jsxRuntime.jsx(Box, __assign({ css: {
+                    display: "flex",
+                    flex: 2,
+                    fd: "column",
+                    p: "$2xl",
+                    backgroundColor: "$bg01",
+                    btrr: "$2",
+                    bbrr: "$2",
+                } }, { children: itemSelected.content(itemSelected.rank, itemSelected.enableNextStep, handleOnAccept, handleOnBack, onComplete) }))] })));
+};
+var Flex = styled(Box, { display: "flex", fd: "column" });
+
+var defaultLinks = [
+    {
+        title: "Docs",
+        links: [
+            {
+                title: "Intro to Obol",
+                link: "https://docs.obol.tech/docs/int/Overview",
+            },
+            { title: "Charon", link: "https://github.com/ObolNetwork/charon" },
+            {
+                title: "DV Launchpad",
+                link: "https://docs.obol.tech/docs/dvk/distributed_validator_launchpad",
+            },
+        ],
+    },
+    {
+        title: "Community",
+        links: [
+            { title: "Discord", link: "https://discord.com/invite/n6ebKsX46w" },
+            { title: "Twitter", link: "https://twitter.com/ObolNetwork" },
+        ],
+    },
+    {
+        title: "More",
+        links: [
+            { title: "Blog", link: "https://blog.obol.tech" },
+            { title: "Github", link: "https://github.com/ObolNetwork" },
+        ],
+    },
+];
+var Footer = function (_a) {
+    var _b = _a.links, links = _b === void 0 ? defaultLinks : _b;
+    var year = new Date().getFullYear();
+    return (jsxRuntime.jsxs(Box, __assign({ css: {
+            display: "flex",
+            "@sm": {
+                flexDirection: "column",
+                gap: "$xl",
+            },
+        } }, { children: [jsxRuntime.jsxs(Box, __assign({ css: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "$xxs",
+                    flex: 1,
+                } }, { children: [jsxRuntime.jsx(ObolSolidDarkBgH, {}), jsxRuntime.jsx(Text, __assign({ variant: "body", css: { fontSize: "$3" } }, { children: "Copyright \u00A9 ".concat(year, " Obol Labs, Inc.") }))] })), jsxRuntime.jsx(Box, __assign({ className: "footer-obol", css: {
+                    display: "grid",
+                    gridTemplateColumns: "repeat(3, 1fr)",
+                    "@sm": {
+                        gridTemplateColumns: "repeat(2, 1fr)",
+                        gap: "$xl",
+                    },
+                    flex: 2,
+                } }, { children: links.map(function (item, index) { return (jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", flexDirection: "column", gap: "10px" } }, { children: [jsxRuntime.jsx(Text, __assign({ variant: "body", css: { fontSize: "$5", fontWeight: "$bold" } }, { children: item.title })), item.links.map(function (link, idx) { return (jsxRuntime.jsx(Link, __assign({ variant: "docs", target: "_blank", href: link.link, css: { color: "$textLight", fontSize: "$4" } }, { children: link.title }), "link-".concat(idx))); })] }), "link-section-".concat(index))); }) }))] })));
+};
 
 function useMediaQuery(query) {
     var _a = React.useState(false), matches = _a[0], setMatches = _a[1];
@@ -1771,62 +2116,10 @@ var TwoColumnSection = function (_a) {
                 } }, { children: !screenDownSm ? (jsxRuntime.jsx(Image__default["default"], { src: image.basePath, alt: "Obol Logo", objectFit: "fill", layout: "fill" })) : (jsxRuntime.jsx(Image__default["default"], { src: image.mobilePath || image.basePath, alt: "Obol Logo", objectFit: "fill", layout: "fill" })) }))] })));
 };
 
-var defaultLinks = [
-    {
-        title: "Docs",
-        links: [
-            {
-                title: "Intro to Obol",
-                link: "https://docs.obol.tech/docs/int/Overview",
-            },
-            { title: "Charon", link: "https://github.com/ObolNetwork/charon" },
-            {
-                title: "DV Launchpad",
-                link: "https://docs.obol.tech/docs/dvk/distributed_validator_launchpad",
-            },
-        ],
-    },
-    {
-        title: "Community",
-        links: [
-            { title: "Discord", link: "https://discord.com/invite/n6ebKsX46w" },
-            { title: "Twitter", link: "https://twitter.com/ObolNetwork" },
-        ],
-    },
-    {
-        title: "More",
-        links: [
-            { title: "Blog", link: "https://blog.obol.tech" },
-            { title: "Github", link: "https://github.com/ObolNetwork" },
-        ],
-    },
-];
-var Footer = function (_a) {
-    var _b = _a.links, links = _b === void 0 ? defaultLinks : _b;
-    var year = new Date().getFullYear();
-    return (jsxRuntime.jsxs(Box, __assign({ css: {
-            display: "flex",
-            "@sm": {
-                flexDirection: "column",
-                gap: "$xl",
-            },
-        } }, { children: [jsxRuntime.jsxs(Box, __assign({ css: {
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: "$xxs",
-                    flex: 1,
-                } }, { children: [jsxRuntime.jsx(ObolSolidDarkBgH, {}), jsxRuntime.jsx(Text, __assign({ variant: "body", css: { fontSize: "$3" } }, { children: "Copyright \u00A9 ".concat(year, " Obol Labs, Inc.") }))] })), jsxRuntime.jsx(Box, __assign({ className: "footer-obol", css: {
-                    display: "grid",
-                    gridTemplateColumns: "repeat(3, 1fr)",
-                    "@sm": {
-                        gridTemplateColumns: "repeat(2, 1fr)",
-                        gap: "$xl",
-                    },
-                    flex: 2,
-                } }, { children: links.map(function (item, index) { return (jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", flexDirection: "column", gap: "10px" } }, { children: [jsxRuntime.jsx(Text, __assign({ variant: "body", css: { fontSize: "$5", fontWeight: "$bold" } }, { children: item.title })), item.links.map(function (link, idx) { return (jsxRuntime.jsx(Link, __assign({ variant: "docs", target: "_blank", href: link.link, css: { color: "$textLight", fontSize: "$4" } }, { children: link.title }), "link-".concat(idx))); })] }), "link-section-".concat(index))); }) }))] })));
-};
-
 exports.Accordion = Accordion;
+exports.Advisory = Advisory;
+exports.AdvisoryToggleBullet = AdvisoryToggleBullet;
+exports.AdvisoryToggleItem = AdvisoryToggleItem;
 exports.AlertIcon = AlertIcon;
 exports.AloneIcon = AloneIcon;
 exports.ArrowForward = ArrowForward;
@@ -1845,9 +2138,11 @@ exports.CopyIcon = CopyIcon;
 exports.CreateIcon = CreateIcon;
 exports.Download = Download;
 exports.ExistingGroupIcon = ExistingGroupIcon;
+exports.Flex = Flex;
 exports.Footer = Footer;
 exports.GithubIcon = GithubIcon;
 exports.GroupIcon = GroupIcon;
+exports.HelpIcon = HelpIcon;
 exports.HeroSection = HeroSection;
 exports.Hexapod = Hexapod;
 exports.HexapodMobile = HexapodMobile;
@@ -1861,6 +2156,8 @@ exports.MediaQueryKeys = MediaQueryKeys;
 exports.MenuIcon = MenuIcon;
 exports.MigrateIcon = MigrateIcon;
 exports.Navbar = Navbar;
+exports.NotificationCard = NotificationCard;
+exports.NotificationContainer = NotificationContainer;
 exports.NumberField = NumberField;
 exports.ObolDarkBgH = ObolDarkBgH;
 exports.ObolDarkBgMark = ObolDarkBgMark;
@@ -1882,10 +2179,20 @@ exports.PlanetGreen = PlanetGreen;
 exports.PlanetGrey = PlanetGrey;
 exports.PlanetMagenta = PlanetMagenta;
 exports.PlanetOrange = PlanetOrange;
+exports.ProgressTracker = ProgressTracker;
+exports.Provider = Provider;
 exports.PublicGoodIcon = PublicGoodIcon;
+exports.RadioGroup = RadioGroup;
+exports.RadioGroupComponent = RadioGroupComponent;
+exports.RadioGroupIndicator = RadioGroupIndicator;
+exports.RadioGroupItem = RadioGroupItem;
+exports.RadioGroupItemLabel = RadioGroupItemLabel;
+exports.RadioGroupRadio = RadioGroupRadio;
 exports.RunIcon = RunIcon;
 exports.Spin = Spin;
+exports.SplitterTable = SplitterTable;
 exports.SvgIcon = SvgIcon;
+exports.Table = Table;
 exports.Tabs = Tabs$1;
 exports.TeamMemberCard = TeamMemberCard;
 exports.TestIcon = TestIcon;
@@ -1896,6 +2203,11 @@ exports.TextStory = TextStory;
 exports.ToggleCardItem = ToggleCardItem;
 exports.ToggleGroup = ToggleGroup;
 exports.ToggleGroupItem = ToggleGroupItem;
+exports.Tooltip = Tooltip;
+exports.TooltipArrow = TooltipArrow;
+exports.TooltipComponent = TooltipComponent;
+exports.TooltipContent = TooltipContent;
+exports.TooltipTrigger = TooltipTrigger;
 exports.TrashIcon = TrashIcon;
 exports.TrustMinimisedIcon = TrustMinimisedIcon;
 exports.TwitterIcon = TwitterIcon;