@obolnetwork/obol-ui 1.0.34 → 1.0.36

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/AlertIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { SvgIconProps } from "../atoms/SvgIcon/SvgIcon";
 export declare const AlertIcon: (props: SvgIconProps) => JSX.Element;

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { SvgIconProps } from "../atoms/SvgIcon/SvgIcon";
 export declare const ArrowForward: (props: SvgIconProps) => JSX.Element;

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { SvgIconProps } from "../atoms/SvgIcon/SvgIcon";
 export declare const ChevronDownIcon: (props: SvgIconProps) => JSX.Element;

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { SvgIconProps } from "../atoms/SvgIcon/SvgIcon";
 export declare const ChevronUpIcon: (props: SvgIconProps) => JSX.Element;

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { SvgIconProps } from "../atoms/SvgIcon/SvgIcon";
 export declare const CloseIcon: (props: SvgIconProps) => JSX.Element;

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { SvgIconProps } from "../atoms/SvgIcon/SvgIcon";
 export declare const Download: (props: SvgIconProps) => JSX.Element;

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/Hexapod.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 export declare const Hexapod: () => JSX.Element;
 export declare const HexapodMobile: () => JSX.Element;

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { SvgIconProps } from "../atoms/SvgIcon/SvgIcon";
 export declare const OpenInNew: (props: SvgIconProps) => JSX.Element;

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/icons/static-icons/BulletCheckIcon.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const BulletCheckIcon: () => JSX.Element;

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const CheckIcon: () => JSX.Element;

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const CheckboxIcon: () => JSX.Element;

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const Coinbase: () => JSX.Element;

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const CopyIcon: () => JSX.Element;

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const GithubIcon: () => JSX.Element;

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const HelpIcon: () => JSX.Element;

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const MenuIcon: () => JSX.Element;

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const Metamask: () => JSX.Element;

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const MinusIcon: () => JSX.Element;

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const PlusIcon: () => JSX.Element;

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const TrashIcon: () => JSX.Element;

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const TwitterIcon: () => JSX.Element;

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const WaitingIcon: () => JSX.Element;

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const WalletConnect: () => JSX.Element;

package/dist/components/icons/static-icons/obol/circle/ObolDarkCircle.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ObolDarkCircle: () => JSX.Element;

package/dist/components/icons/static-icons/obol/circle/ObolLightCircle.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ObolLightCircle: () => JSX.Element;

package/dist/components/icons/static-icons/obol/horizontal/ObolDarkBgH.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ObolDarkBgH: () => JSX.Element;

package/dist/components/icons/static-icons/obol/horizontal/ObolLightBgH.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ObolLightBgH: () => JSX.Element;

package/dist/components/icons/static-icons/obol/horizontal/ObolSolidDarkBgH.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ObolSolidDarkBgH: () => JSX.Element;

package/dist/components/icons/static-icons/obol/horizontal/ObolSolidLightBgH.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ObolSolidLightBgH: () => JSX.Element;

package/dist/components/icons/static-icons/obol/mark/ObolDarkBgMark.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ObolDarkBgMark: () => JSX.Element;

package/dist/components/icons/static-icons/obol/mark/ObolLightBgMark.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ObolLightBgMark: () => JSX.Element;

package/dist/components/icons/static-icons/obol/mark/ObolSolidDarkBgMark.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ObolSolidDarkBgMark: () => JSX.Element;

package/dist/components/icons/static-icons/obol/mark/ObolSolidLightBgMark.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ObolSolidLightBgMark: () => JSX.Element;

package/dist/components/icons/static-icons/obol/vertical/ObolDarkBgV.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ObolDarkBgV: () => JSX.Element;

package/dist/components/icons/static-icons/obol/vertical/ObolLightBgV.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ObolLightBgV: () => JSX.Element;

package/dist/components/icons/static-icons/obol/vertical/ObolSolidDarkBgV.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ObolSolidDarkBgV: () => JSX.Element;

package/dist/components/icons/static-icons/obol/vertical/ObolSolidLightBgV.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ObolSolidLightBgV: () => JSX.Element;

package/dist/components/icons/static-icons/planets/PlanetBlue.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const PlanetBlue: () => JSX.Element;

package/dist/components/icons/static-icons/planets/PlanetGreen.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const PlanetGreen: () => JSX.Element;

package/dist/components/icons/static-icons/planets/PlanetGrey.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const PlanetGrey: () => JSX.Element;

package/dist/components/icons/static-icons/planets/PlanetMagenta.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const PlanetMagenta: () => JSX.Element;

package/dist/components/icons/static-icons/planets/PlanetOrange.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const PlanetOrange: () => JSX.Element;

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/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/components/utils/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type * as Stitches from "@stitches/react";
 interface StitchesMedia {
     [x: string]: any;

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 },
@@ -2366,4 +2396,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 },
@@ -2493,6 +2524,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;