@obolnetwork/obol-ui 1.0.35 → 1.0.37

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

@@ -60,6 +60,7 @@ export declare const Tabs: import("@stitches/react/types/styled-component").Styl
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;
@@ -540,6 +541,7 @@ export declare const TabsList: import("@stitches/react/types/styled-component").
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;
@@ -1020,6 +1022,7 @@ export declare const TabsTrigger: import("@stitches/react/types/styled-component
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;
@@ -1500,6 +1503,7 @@ export declare const TabsContent: import("@stitches/react/types/styled-component
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;

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

@@ -3,7 +3,7 @@ import type * as Stitches from "@stitches/react";
 export declare const Text: import("@stitches/react/types/styled-component").StyledComponent<"span", {
     variant?: "body" | "pill" | "h1" | "h2" | "h3" | "h4" | "h5" | "metadata" | "subline" | "ens" | undefined;
     size?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined;
-    color?: "white" | "black" | "lightBackground" | "obolBlue" | "primaryBgDefault" | "primaryBgDefaultHover" | "primaryTextDefault" | "secondaryBgDefault" | "secondaryBgHover" | "grayBgDefault" | "gray2BgDefault" | "neutralDark" | "navButtonBgDefault" | "navButtonBgHover" | "cardBackgroundDark" | "cardBackgroundLight" | "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" | undefined;
+    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" | "lightGrey" | "coordinate" | "coordinateHover" | "test" | "testHover" | "create" | "createHover" | "light" | "body" | "muted" | "menu" | "bg01" | "bg02" | "bg03" | "bg04" | "bg05" | "tooltip" | "tooltip2" | undefined;
     glow?: boolean | "true" | undefined;
     inline?: boolean | "true" | undefined;
 }, {
@@ -66,6 +66,7 @@ export declare const Text: import("@stitches/react/types/styled-component").Styl
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;
@@ -490,7 +491,7 @@ export default Text;
 export declare const TextStory: (props: Omit<import("@stitches/react/types/styled-component").TransformProps<{
     variant?: "body" | "pill" | "h1" | "h2" | "h3" | "h4" | "h5" | "metadata" | "subline" | "ens" | undefined;
     size?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined;
-    color?: "white" | "black" | "lightBackground" | "obolBlue" | "primaryBgDefault" | "primaryBgDefaultHover" | "primaryTextDefault" | "secondaryBgDefault" | "secondaryBgHover" | "grayBgDefault" | "gray2BgDefault" | "neutralDark" | "navButtonBgDefault" | "navButtonBgHover" | "cardBackgroundDark" | "cardBackgroundLight" | "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" | undefined;
+    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" | "lightGrey" | "coordinate" | "coordinateHover" | "test" | "testHover" | "create" | "createHover" | "light" | "body" | "muted" | "menu" | "bg01" | "bg02" | "bg03" | "bg04" | "bg05" | "tooltip" | "tooltip2" | undefined;
     glow?: boolean | "true" | undefined;
     inline?: boolean | "true" | undefined;
 }, {
@@ -506,7 +507,7 @@ export declare const TextStory: (props: Omit<import("@stitches/react/types/style
 }>, "color" | "size" | "inline" | "variant" | "glow"> & {
     variant?: "body" | "pill" | "h1" | "h2" | "h3" | "h4" | "h5" | "metadata" | "subline" | "ens" | undefined;
     size?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined;
-    color?: "white" | "black" | "lightBackground" | "obolBlue" | "primaryBgDefault" | "primaryBgDefaultHover" | "primaryTextDefault" | "secondaryBgDefault" | "secondaryBgHover" | "grayBgDefault" | "gray2BgDefault" | "neutralDark" | "navButtonBgDefault" | "navButtonBgHover" | "cardBackgroundDark" | "cardBackgroundLight" | "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" | undefined;
+    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" | "lightGrey" | "coordinate" | "coordinateHover" | "test" | "testHover" | "create" | "createHover" | "light" | "body" | "muted" | "menu" | "bg01" | "bg02" | "bg03" | "bg04" | "bg05" | "tooltip" | "tooltip2" | undefined;
     glow?: boolean | undefined;
     inline?: boolean | undefined;
 } & {

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

@@ -62,6 +62,7 @@ export declare const TextField: import("@stitches/react/types/styled-component")
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;
@@ -547,6 +548,7 @@ export declare const TextFieldWithCopy: import("react").ForwardRefExoticComponen
             obolDisabled: string;
             linkButtonHover: string;
             progressTrackerGreen: string;
+            lightGrey: string;
             coordinate: string;
             coordinateHover: string;
             test: string;

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

@@ -60,6 +60,7 @@ export declare const ToggleGroup: import("@stitches/react/types/styled-component
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;
@@ -540,6 +541,7 @@ export declare const ToggleGroupItem: import("@stitches/react/types/styled-compo
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;

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

@@ -16,4 +16,5 @@ export * from "./NumberField/NumberField";
 export * from './Tooltip/Tooltip';
 export * from './LoadingButton/LoadingButton';
 export * from './Checkbox/Checkbox';
+export * from './Switch/Switch';
 export * from './Dialog/Dialog';

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

@@ -60,6 +60,7 @@ export declare const GlowIconBox: import("@stitches/react/types/styled-component
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;

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

@@ -62,6 +62,7 @@ declare const SvgIconPlanet: import("@stitches/react/types/styled-component").St
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;

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

@@ -60,6 +60,7 @@ export declare const Root: import("@stitches/react/types/styled-component").Styl
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;
@@ -540,6 +541,7 @@ export declare const Item: import("@stitches/react/types/styled-component").Styl
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;

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

@@ -65,6 +65,7 @@ export declare const AdvisoryToggleItem: import("@stitches/react/types/styled-co
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;
@@ -544,6 +545,7 @@ export declare const AdvisoryToggleItem: import("@stitches/react/types/styled-co
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;

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

@@ -75,6 +75,7 @@ export declare const ToggleCardItem: import("@stitches/react/types/styled-compon
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;
@@ -554,6 +555,7 @@ export declare const ToggleCardItem: import("@stitches/react/types/styled-compon
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;

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

@@ -59,6 +59,7 @@ export declare const NotificationContainer: import("@stitches/react/types/styled
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;
@@ -538,6 +539,7 @@ export declare const NotificationContainer: import("@stitches/react/types/styled
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;

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

@@ -61,6 +61,7 @@ export declare const RadioGroupRadio: import("@stitches/react/types/styled-compo
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;
@@ -541,6 +542,7 @@ export declare const RadioGroupIndicator: import("@stitches/react/types/styled-c
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;
@@ -1021,6 +1023,7 @@ export declare const RadioGroupItemLabel: import("@stitches/react/types/styled-c
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;

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

@@ -29,6 +29,7 @@ export interface SplitterTableProps extends TableProps {
     onRemoveRow?(item: string | number): void;
     onUpdateRow?(id: string, value: string | number, accessorKey: unknown): void;
     totalSplitFooter?: number;
+    addText?: string;
 }
 export declare const SplitterTable: React.FC<SplitterTableProps>;
 export declare const Table: React.FC<TableProps>;

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

@@ -77,6 +77,7 @@ export declare const Flex: import("@stitches/react/types/styled-component").Styl
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;
@@ -556,6 +557,7 @@ export declare const Flex: import("@stitches/react/types/styled-component").Styl
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;

package/dist/components/utils/color-variants.d.ts

@@ -37,6 +37,7 @@ declare const COLORS: {
     obolDisabled: import("@stitches/react/types/theme").Token<"obolDisabled", string, "colors", "">;
     linkButtonHover: import("@stitches/react/types/theme").Token<"linkButtonHover", string, "colors", "">;
     progressTrackerGreen: import("@stitches/react/types/theme").Token<"progressTrackerGreen", string, "colors", "">;
+    lightGrey: import("@stitches/react/types/theme").Token<"lightGrey", string, "colors", "">;
     coordinate: import("@stitches/react/types/theme").Token<"coordinate", string, "colors", "">;
     coordinateHover: import("@stitches/react/types/theme").Token<"coordinateHover", string, "colors", "">;
     test: import("@stitches/react/types/theme").Token<"test", string, "colors", "">;

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

@@ -58,6 +58,7 @@ export declare const GlowIcon: import("@stitches/react/types/styled-component").
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;

package/dist/index.es.js

@@ -5,6 +5,7 @@ import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import React, { useState, forwardRef, useRef, useImperativeHandle, useEffect, useLayoutEffect } from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as ReactSwitch from '@radix-ui/react-switch';
 import { Cross2Icon } from '@radix-ui/react-icons';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
@@ -119,6 +120,7 @@ var styled = (_a = createStitches({
             obolDisabled: "#1A292D",
             linkButtonHover: "#A0F3D9",
             progressTrackerGreen: "#1D5249",
+            lightGrey: "#C4C4C4",
             //secondary
             coordinate: "#9167E4",
             coordinateHover: "#BB99FF",
@@ -1522,6 +1524,34 @@ var Checkbox = function (_a) {
     return (jsx(CheckboxRoot, __assign({}, props, { children: jsx(CheckboxIndicator, { children: jsx(CheckboxIcon, {}) }) })));
 };
 
+var SwitchRoot = styled(ReactSwitch.Root, {
+    width: "78px",
+    height: "40px",
+    border: "0",
+    backgroundColor: "$lightGrey",
+    borderRadius: "40px",
+    padding: "0",
+    "&[data-state='checked']": {
+        backgroundColor: "$obolGreen",
+    }
+});
+var SwitchThumb = styled(ReactSwitch.Thumb, {
+    display: "block",
+    width: "30px",
+    height: "30px",
+    backgroundColor: "white",
+    borderRadius: "40px",
+    transition: "transform 100ms",
+    transform: "translateX(4px)",
+    "&[data-state='checked']": {
+        transform: "translateX(40px)",
+    }
+});
+var Switch = function (_a) {
+    var props = __rest(_a, []);
+    return (jsx(SwitchRoot, __assign({}, props, { children: jsx(SwitchThumb, {}) })));
+};
+
 var overlayShow = keyframes({
     "0%": { opacity: 0 },
     "100%": { opacity: 1 },
@@ -2033,10 +2063,10 @@ var Td = styled("td", {
         borderRadius: 0,
         width: "100%",
     },
-    textOverflow: 'ellipsis',
+    textOverflow: "ellipsis",
     maxWidth: 0,
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
+    whiteSpace: "nowrap",
+    overflow: "hidden",
     variants: {
         splitter: {
             true: {
@@ -2059,6 +2089,7 @@ var Td = styled("td", {
 });
 var Th = styled("th", {
     border: "2px solid $bg04",
+    minWidth: "20px",
     py: "$sm",
     px: "$sm",
     textAlign: "center",
@@ -2081,8 +2112,12 @@ var BoxBorderTop = styled(Box, {
     px: "$sm",
 });
 var AddNewRow = function (_a) {
-    var onAddRow = _a.onAddRow, totalSplitFooter = _a.totalSplitFooter;
-    return (jsxs(Tr, { children: [jsx(Td, __assign({ splitter: true }, { children: jsx(BoxBorderTop, {}) })), jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsx(BoxBorderTop, { children: onAddRow && (jsx(Button, __assign({ type: "button", css: {
+    var onAddRow = _a.onAddRow, totalSplitFooter = _a.totalSplitFooter, _b = _a.addText, addText = _b === void 0 ? "+ Add Recipient" : _b;
+    return (jsxs(Tr, { children: [jsx(Td, __assign({ splitter: true }, { children: jsx(BoxBorderTop, {}) })), jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsx(BoxBorderTop, __assign({ css: {
+                        "@xs": {
+                            px: "$2",
+                        },
+                    } }, { children: onAddRow && (jsxs(Button, __assign({ type: "button", css: {
                             color: "$obolGreen",
                             justifyContent: "start",
                             borderRadius: 0,
@@ -2092,13 +2127,16 @@ var AddNewRow = function (_a) {
                             "&:disabled": {
                                 borderColor: "transparent",
                             },
+                            "@xs": {
+                                px: "$1",
+                            },
                         }, fullWidth: true, ghost: true, onClick: function (e) {
                             e.preventDefault();
                             onAddRow();
-                        }, disabled: totalSplitFooter === 100 }, { children: "+ Add Signer" }))) }) })), jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsx(BoxBorderTop, { children: jsx(Box, { children: totalSplitFooter && "".concat(totalSplitFooter, "%") }) }) }))] }));
+                        }, disabled: totalSplitFooter === 100 }, { children: [jsx(Box, __assign({ css: { display: "none", "@xs": { display: "inline-block" } } }, { children: "+ Recipient" })), " ", jsx(Box, __assign({ css: { "@xs": { display: "none" } } }, { children: addText }))] }))) })) })), jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsx(BoxBorderTop, { children: jsx(Box, { children: totalSplitFooter && "".concat(totalSplitFooter, "%") }) }) }))] }));
 };
 var SplitterTable = function (_a) {
-    var rows = _a.rows, columns = _a.columns, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow, _b = _a.totalSplitFooter, totalSplitFooter = _b === void 0 ? 100 : _b;
+    var rows = _a.rows, columns = _a.columns, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow, _b = _a.totalSplitFooter, totalSplitFooter = _b === void 0 ? 100 : _b, addText = _a.addText;
     return (jsxs(StyledTable, { children: [jsx("thead", { children: jsxs("tr", { children: [jsx(Th, {}), columns.map(function (_a, index) {
                             var css = _a.css, column = __rest(_a, ["css"]);
                             return (jsx(Th, __assign({ css: __assign({ textAlign: "start" }, css) }, { children: column.header }), "header-".concat(index)));
@@ -2150,7 +2188,7 @@ var SplitterTable = function (_a) {
                                                     onUpdateRow(row.id, value, column.accessorKey);
                                             }, 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 })] })] }));
+                    }), jsx(AddNewRow, { onAddRow: onAddRow, totalSplitFooter: totalSplitFooter, addText: addText })] })] }));
 };
 var Table = function (_a) {
     var rows = _a.rows, columns = _a.columns;
@@ -2366,4 +2404,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, Checkbox, CheckboxIcon, CheckboxIndicator, CheckboxRoot, ChevronDownIcon, ChevronUpIcon, CloseIcon, CodeIcon, Container, CopyIcon, CreateIcon, Dialog, DialogClose, DialogComponent, DialogContent, DialogDescription, DialogIconButton, DialogOverlay, DialogPortal, DialogStyledContent, DialogTitle, DialogTrigger, 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 };
+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, Dialog, DialogClose, DialogComponent, DialogContent, DialogDescription, DialogIconButton, DialogOverlay, DialogPortal, DialogStyledContent, DialogTitle, DialogTrigger, 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, Switch, SwitchRoot, SwitchThumb, 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

@@ -9,6 +9,7 @@ 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 ReactSwitch = require('@radix-ui/react-switch');
 var reactIcons = require('@radix-ui/react-icons');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
@@ -40,6 +41,7 @@ var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
+var ReactSwitch__namespace = /*#__PURE__*/_interopNamespace(ReactSwitch);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
@@ -152,6 +154,7 @@ var styled = (_a = react.createStitches({
             obolDisabled: "#1A292D",
             linkButtonHover: "#A0F3D9",
             progressTrackerGreen: "#1D5249",
+            lightGrey: "#C4C4C4",
             //secondary
             coordinate: "#9167E4",
             coordinateHover: "#BB99FF",
@@ -1555,6 +1558,34 @@ var Checkbox = function (_a) {
     return (jsxRuntime.jsx(CheckboxRoot, __assign({}, props, { children: jsxRuntime.jsx(CheckboxIndicator, { children: jsxRuntime.jsx(CheckboxIcon, {}) }) })));
 };
 
+var SwitchRoot = styled(ReactSwitch__namespace.Root, {
+    width: "78px",
+    height: "40px",
+    border: "0",
+    backgroundColor: "$lightGrey",
+    borderRadius: "40px",
+    padding: "0",
+    "&[data-state='checked']": {
+        backgroundColor: "$obolGreen",
+    }
+});
+var SwitchThumb = styled(ReactSwitch__namespace.Thumb, {
+    display: "block",
+    width: "30px",
+    height: "30px",
+    backgroundColor: "white",
+    borderRadius: "40px",
+    transition: "transform 100ms",
+    transform: "translateX(4px)",
+    "&[data-state='checked']": {
+        transform: "translateX(40px)",
+    }
+});
+var Switch = function (_a) {
+    var props = __rest(_a, []);
+    return (jsxRuntime.jsx(SwitchRoot, __assign({}, props, { children: jsxRuntime.jsx(SwitchThumb, {}) })));
+};
+
 var overlayShow = keyframes({
     "0%": { opacity: 0 },
     "100%": { opacity: 1 },
@@ -2066,10 +2097,10 @@ var Td = styled("td", {
         borderRadius: 0,
         width: "100%",
     },
-    textOverflow: 'ellipsis',
+    textOverflow: "ellipsis",
     maxWidth: 0,
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
+    whiteSpace: "nowrap",
+    overflow: "hidden",
     variants: {
         splitter: {
             true: {
@@ -2092,6 +2123,7 @@ var Td = styled("td", {
 });
 var Th = styled("th", {
     border: "2px solid $bg04",
+    minWidth: "20px",
     py: "$sm",
     px: "$sm",
     textAlign: "center",
@@ -2114,8 +2146,12 @@ var BoxBorderTop = styled(Box, {
     px: "$sm",
 });
 var AddNewRow = function (_a) {
-    var onAddRow = _a.onAddRow, totalSplitFooter = _a.totalSplitFooter;
-    return (jsxRuntime.jsxs(Tr, { children: [jsxRuntime.jsx(Td, __assign({ splitter: true }, { children: jsxRuntime.jsx(BoxBorderTop, {}) })), jsxRuntime.jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsxRuntime.jsx(BoxBorderTop, { children: onAddRow && (jsxRuntime.jsx(Button, __assign({ type: "button", css: {
+    var onAddRow = _a.onAddRow, totalSplitFooter = _a.totalSplitFooter, _b = _a.addText, addText = _b === void 0 ? "+ Add Recipient" : _b;
+    return (jsxRuntime.jsxs(Tr, { children: [jsxRuntime.jsx(Td, __assign({ splitter: true }, { children: jsxRuntime.jsx(BoxBorderTop, {}) })), jsxRuntime.jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsxRuntime.jsx(BoxBorderTop, __assign({ css: {
+                        "@xs": {
+                            px: "$2",
+                        },
+                    } }, { children: onAddRow && (jsxRuntime.jsxs(Button, __assign({ type: "button", css: {
                             color: "$obolGreen",
                             justifyContent: "start",
                             borderRadius: 0,
@@ -2125,13 +2161,16 @@ var AddNewRow = function (_a) {
                             "&:disabled": {
                                 borderColor: "transparent",
                             },
+                            "@xs": {
+                                px: "$1",
+                            },
                         }, fullWidth: true, ghost: true, onClick: function (e) {
                             e.preventDefault();
                             onAddRow();
-                        }, disabled: totalSplitFooter === 100 }, { children: "+ Add Signer" }))) }) })), jsxRuntime.jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsxRuntime.jsx(BoxBorderTop, { children: jsxRuntime.jsx(Box, { children: totalSplitFooter && "".concat(totalSplitFooter, "%") }) }) }))] }));
+                        }, disabled: totalSplitFooter === 100 }, { children: [jsxRuntime.jsx(Box, __assign({ css: { display: "none", "@xs": { display: "inline-block" } } }, { children: "+ Recipient" })), " ", jsxRuntime.jsx(Box, __assign({ css: { "@xs": { display: "none" } } }, { children: addText }))] }))) })) })), jsxRuntime.jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsxRuntime.jsx(BoxBorderTop, { children: jsxRuntime.jsx(Box, { children: totalSplitFooter && "".concat(totalSplitFooter, "%") }) }) }))] }));
 };
 var SplitterTable = function (_a) {
-    var rows = _a.rows, columns = _a.columns, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow, _b = _a.totalSplitFooter, totalSplitFooter = _b === void 0 ? 100 : _b;
+    var rows = _a.rows, columns = _a.columns, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow, _b = _a.totalSplitFooter, totalSplitFooter = _b === void 0 ? 100 : _b, addText = _a.addText;
     return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx(Th, {}), columns.map(function (_a, index) {
                             var css = _a.css, column = __rest(_a, ["css"]);
                             return (jsxRuntime.jsx(Th, __assign({ css: __assign({ textAlign: "start" }, css) }, { children: column.header }), "header-".concat(index)));
@@ -2183,7 +2222,7 @@ var SplitterTable = function (_a) {
                                                     onUpdateRow(row.id, value, column.accessorKey);
                                             }, 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 })] })] }));
+                    }), jsxRuntime.jsx(AddNewRow, { onAddRow: onAddRow, totalSplitFooter: totalSplitFooter, addText: addText })] })] }));
 };
 var Table = function (_a) {
     var rows = _a.rows, columns = _a.columns;
@@ -2493,6 +2532,9 @@ exports.RunIcon = RunIcon;
 exports.Spin = Spin;
 exports.SplitterTable = SplitterTable;
 exports.SvgIcon = SvgIcon;
+exports.Switch = Switch;
+exports.SwitchRoot = SwitchRoot;
+exports.SwitchThumb = SwitchThumb;
 exports.Table = Table;
 exports.Tabs = Tabs$1;
 exports.TeamMemberCard = TeamMemberCard;

package/dist/stitches.config.d.ts

@@ -60,6 +60,7 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;
@@ -470,6 +471,7 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;
@@ -861,6 +863,7 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;
@@ -1277,6 +1280,7 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
             obolDisabled: string;
             linkButtonHover: string;
             progressTrackerGreen: string;
+            lightGrey: string;
             coordinate: string;
             coordinateHover: string;
             test: string;
@@ -1667,6 +1671,7 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
         obolDisabled: string;
         linkButtonHover: string;
         progressTrackerGreen: string;
+        lightGrey: string;
         coordinate: string;
         coordinateHover: string;
         test: string;
@@ -2057,6 +2062,7 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
             obolDisabled: string;
             linkButtonHover: string;
             progressTrackerGreen: string;
+            lightGrey: string;
             coordinate: string;
             coordinateHover: string;
             test: string;
@@ -2443,6 +2449,7 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
         obolDisabled: import("@stitches/react/types/theme").Token<"obolDisabled", string, "colors", "">;
         linkButtonHover: import("@stitches/react/types/theme").Token<"linkButtonHover", string, "colors", "">;
         progressTrackerGreen: import("@stitches/react/types/theme").Token<"progressTrackerGreen", string, "colors", "">;
+        lightGrey: import("@stitches/react/types/theme").Token<"lightGrey", string, "colors", "">;
         coordinate: import("@stitches/react/types/theme").Token<"coordinate", string, "colors", "">;
         coordinateHover: import("@stitches/react/types/theme").Token<"coordinateHover", string, "colors", "">;
         test: import("@stitches/react/types/theme").Token<"test", string, "colors", "">;
@@ -2594,6 +2601,7 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
         obolDisabled?: string | number | boolean | undefined;
         linkButtonHover?: string | number | boolean | undefined;
         progressTrackerGreen?: string | number | boolean | undefined;
+        lightGrey?: string | number | boolean | undefined;
         coordinate?: string | number | boolean | undefined;
         coordinateHover?: string | number | boolean | undefined;
         test?: string | number | boolean | undefined;
@@ -2750,6 +2758,7 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
         obolDisabled?: string | number | boolean | undefined;
         linkButtonHover?: string | number | boolean | undefined;
         progressTrackerGreen?: string | number | boolean | undefined;
+        lightGrey?: string | number | boolean | undefined;
         coordinate?: string | number | boolean | undefined;
         coordinateHover?: string | number | boolean | undefined;
         test?: string | number | boolean | undefined;
@@ -2922,6 +2931,7 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
             obolDisabled: string;
             linkButtonHover: string;
             progressTrackerGreen: string;
+            lightGrey: string;
             coordinate: string;
             coordinateHover: string;
             test: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obolnetwork/obol-ui",
-  "version": "1.0.35",
+  "version": "1.0.37",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "license": "MIT",
@@ -24,6 +24,7 @@
     "@radix-ui/react-dialog": "^0.1.7",
     "@radix-ui/react-icons": "^1.1.1",
     "@radix-ui/react-radio-group": "^0.1.5",
+    "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tabs": "^0.1.5",
     "@radix-ui/react-toggle-group": "^0.1.5",
     "@radix-ui/react-tooltip": "^0.1.7",