@obolnetwork/obol-ui 1.0.35 → 1.0.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/components/atoms/Box/Box.d.ts +1 -0
  2. package/dist/components/atoms/Button/Button.d.ts +1 -0
  3. package/dist/components/atoms/Checkbox/Checkbox.d.ts +1 -0
  4. package/dist/components/atoms/Container/Container.d.ts +2 -0
  5. package/dist/components/atoms/Dialog/Dialog.d.ts +6 -0
  6. package/dist/components/atoms/IconButton/IconButton.d.ts +1 -0
  7. package/dist/components/atoms/Image/Image.d.ts +1 -0
  8. package/dist/components/atoms/Link/Link.d.ts +1 -0
  9. package/dist/components/atoms/Spin/Spin.d.ts +2 -1
  10. package/dist/components/atoms/SvgIcon/SvgIcon.d.ts +2 -1
  11. package/dist/components/atoms/Switch/Switch.d.ts +965 -0
  12. package/dist/components/atoms/Tabs/Tabs.d.ts +4 -0
  13. package/dist/components/atoms/Text/Text.d.ts +4 -3
  14. package/dist/components/atoms/TextField/TextField.d.ts +2 -0
  15. package/dist/components/atoms/Toggle/Toggle.d.ts +2 -0
  16. package/dist/components/atoms/index.d.ts +1 -0
  17. package/dist/components/icons/GlowIconBox.d.ts +1 -0
  18. package/dist/components/icons/Planet.d.ts +1 -0
  19. package/dist/components/molecules/Accordion/Accordion.d.ts +2 -0
  20. package/dist/components/molecules/AdvisoryToggle/AdvisoryToggle.d.ts +2 -0
  21. package/dist/components/molecules/Card/Card.d.ts +2 -0
  22. package/dist/components/molecules/NotificationCard/NotificationCard.d.ts +2 -0
  23. package/dist/components/molecules/RadioGroup/RadioGroup.d.ts +3 -0
  24. package/dist/components/organisms/Advisory/Advisory.d.ts +2 -0
  25. package/dist/components/utils/color-variants.d.ts +1 -0
  26. package/dist/components/utils/styles.d.ts +1 -0
  27. package/dist/index.es.js +31 -1
  28. package/dist/index.js +34 -0
  29. package/dist/stitches.config.d.ts +10 -0
  30. package/package.json +2 -1
package/dist/components/atoms/Tabs/Tabs.d.ts CHANGED
@@ -60,6 +60,7 @@ export declare const Tabs: import("@stitches/react/types/styled-component").Styl
60
60
  obolDisabled: string;
61
61
  linkButtonHover: string;
62
62
  progressTrackerGreen: string;
63
+ lightGrey: string;
63
64
  coordinate: string;
64
65
  coordinateHover: string;
65
66
  test: string;
@@ -540,6 +541,7 @@ export declare const TabsList: import("@stitches/react/types/styled-component").
540
541
  obolDisabled: string;
541
542
  linkButtonHover: string;
542
543
  progressTrackerGreen: string;
544
+ lightGrey: string;
543
545
  coordinate: string;
544
546
  coordinateHover: string;
545
547
  test: string;
@@ -1020,6 +1022,7 @@ export declare const TabsTrigger: import("@stitches/react/types/styled-component
1020
1022
  obolDisabled: string;
1021
1023
  linkButtonHover: string;
1022
1024
  progressTrackerGreen: string;
1025
+ lightGrey: string;
1023
1026
  coordinate: string;
1024
1027
  coordinateHover: string;
1025
1028
  test: string;
@@ -1500,6 +1503,7 @@ export declare const TabsContent: import("@stitches/react/types/styled-component
1500
1503
  obolDisabled: string;
1501
1504
  linkButtonHover: string;
1502
1505
  progressTrackerGreen: string;
1506
+ lightGrey: string;
1503
1507
  coordinate: string;
1504
1508
  coordinateHover: string;
1505
1509
  test: string;
package/dist/components/atoms/Text/Text.d.ts CHANGED
@@ -3,7 +3,7 @@ import type * as Stitches from "@stitches/react";
3
3
  export declare const Text: import("@stitches/react/types/styled-component").StyledComponent<"span", {
4
4
  variant?: "body" | "pill" | "h1" | "h2" | "h3" | "h4" | "h5" | "metadata" | "subline" | "ens" | undefined;
5
5
  size?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined;
6
- 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;
6
+ 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;
7
7
  glow?: boolean | "true" | undefined;
8
8
  inline?: boolean | "true" | undefined;
9
9
  }, {
@@ -66,6 +66,7 @@ export declare const Text: import("@stitches/react/types/styled-component").Styl
66
66
  obolDisabled: string;
67
67
  linkButtonHover: string;
68
68
  progressTrackerGreen: string;
69
+ lightGrey: string;
69
70
  coordinate: string;
70
71
  coordinateHover: string;
71
72
  test: string;
@@ -490,7 +491,7 @@ export default Text;
490
491
  export declare const TextStory: (props: Omit<import("@stitches/react/types/styled-component").TransformProps<{
491
492
  variant?: "body" | "pill" | "h1" | "h2" | "h3" | "h4" | "h5" | "metadata" | "subline" | "ens" | undefined;
492
493
  size?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined;
493
- 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;
494
+ 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;
494
495
  glow?: boolean | "true" | undefined;
495
496
  inline?: boolean | "true" | undefined;
496
497
  }, {
@@ -506,7 +507,7 @@ export declare const TextStory: (props: Omit<import("@stitches/react/types/style
506
507
  }>, "color" | "size" | "inline" | "variant" | "glow"> & {
507
508
  variant?: "body" | "pill" | "h1" | "h2" | "h3" | "h4" | "h5" | "metadata" | "subline" | "ens" | undefined;
508
509
  size?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined;
509
- 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;
510
+ 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;
510
511
  glow?: boolean | undefined;
511
512
  inline?: boolean | undefined;
512
513
  } & {
package/dist/components/atoms/TextField/TextField.d.ts CHANGED
@@ -62,6 +62,7 @@ export declare const TextField: import("@stitches/react/types/styled-component")
62
62
  obolDisabled: string;
63
63
  linkButtonHover: string;
64
64
  progressTrackerGreen: string;
65
+ lightGrey: string;
65
66
  coordinate: string;
66
67
  coordinateHover: string;
67
68
  test: string;
@@ -547,6 +548,7 @@ export declare const TextFieldWithCopy: import("react").ForwardRefExoticComponen
547
548
  obolDisabled: string;
548
549
  linkButtonHover: string;
549
550
  progressTrackerGreen: string;
551
+ lightGrey: string;
550
552
  coordinate: string;
551
553
  coordinateHover: string;
552
554
  test: string;
package/dist/components/atoms/Toggle/Toggle.d.ts CHANGED
@@ -60,6 +60,7 @@ export declare const ToggleGroup: import("@stitches/react/types/styled-component
60
60
  obolDisabled: string;
61
61
  linkButtonHover: string;
62
62
  progressTrackerGreen: string;
63
+ lightGrey: string;
63
64
  coordinate: string;
64
65
  coordinateHover: string;
65
66
  test: string;
@@ -540,6 +541,7 @@ export declare const ToggleGroupItem: import("@stitches/react/types/styled-compo
540
541
  obolDisabled: string;
541
542
  linkButtonHover: string;
542
543
  progressTrackerGreen: string;
544
+ lightGrey: string;
543
545
  coordinate: string;
544
546
  coordinateHover: string;
545
547
  test: string;
package/dist/components/atoms/index.d.ts CHANGED
@@ -16,4 +16,5 @@ export * from "./NumberField/NumberField";
16
16
  export * from './Tooltip/Tooltip';
17
17
  export * from './LoadingButton/LoadingButton';
18
18
  export * from './Checkbox/Checkbox';
19
+ export * from './Switch/Switch';
19
20
  export * from './Dialog/Dialog';
package/dist/components/icons/GlowIconBox.d.ts CHANGED
@@ -60,6 +60,7 @@ export declare const GlowIconBox: import("@stitches/react/types/styled-component
60
60
  obolDisabled: string;
61
61
  linkButtonHover: string;
62
62
  progressTrackerGreen: string;
63
+ lightGrey: string;
63
64
  coordinate: string;
64
65
  coordinateHover: string;
65
66
  test: string;
package/dist/components/icons/Planet.d.ts CHANGED
@@ -62,6 +62,7 @@ declare const SvgIconPlanet: import("@stitches/react/types/styled-component").St
62
62
  obolDisabled: string;
63
63
  linkButtonHover: string;
64
64
  progressTrackerGreen: string;
65
+ lightGrey: string;
65
66
  coordinate: string;
66
67
  coordinateHover: string;
67
68
  test: string;
package/dist/components/molecules/Accordion/Accordion.d.ts CHANGED
@@ -60,6 +60,7 @@ export declare const Root: import("@stitches/react/types/styled-component").Styl
60
60
  obolDisabled: string;
61
61
  linkButtonHover: string;
62
62
  progressTrackerGreen: string;
63
+ lightGrey: string;
63
64
  coordinate: string;
64
65
  coordinateHover: string;
65
66
  test: string;
@@ -540,6 +541,7 @@ export declare const Item: import("@stitches/react/types/styled-component").Styl
540
541
  obolDisabled: string;
541
542
  linkButtonHover: string;
542
543
  progressTrackerGreen: string;
544
+ lightGrey: string;
543
545
  coordinate: string;
544
546
  coordinateHover: string;
545
547
  test: string;
package/dist/components/molecules/AdvisoryToggle/AdvisoryToggle.d.ts CHANGED
@@ -65,6 +65,7 @@ export declare const AdvisoryToggleItem: import("@stitches/react/types/styled-co
65
65
  obolDisabled: string;
66
66
  linkButtonHover: string;
67
67
  progressTrackerGreen: string;
68
+ lightGrey: string;
68
69
  coordinate: string;
69
70
  coordinateHover: string;
70
71
  test: string;
@@ -544,6 +545,7 @@ export declare const AdvisoryToggleItem: import("@stitches/react/types/styled-co
544
545
  obolDisabled: string;
545
546
  linkButtonHover: string;
546
547
  progressTrackerGreen: string;
548
+ lightGrey: string;
547
549
  coordinate: string;
548
550
  coordinateHover: string;
549
551
  test: string;
package/dist/components/molecules/Card/Card.d.ts CHANGED
@@ -75,6 +75,7 @@ export declare const ToggleCardItem: import("@stitches/react/types/styled-compon
75
75
  obolDisabled: string;
76
76
  linkButtonHover: string;
77
77
  progressTrackerGreen: string;
78
+ lightGrey: string;
78
79
  coordinate: string;
79
80
  coordinateHover: string;
80
81
  test: string;
@@ -554,6 +555,7 @@ export declare const ToggleCardItem: import("@stitches/react/types/styled-compon
554
555
  obolDisabled: string;
555
556
  linkButtonHover: string;
556
557
  progressTrackerGreen: string;
558
+ lightGrey: string;
557
559
  coordinate: string;
558
560
  coordinateHover: string;
559
561
  test: string;
package/dist/components/molecules/NotificationCard/NotificationCard.d.ts CHANGED
@@ -59,6 +59,7 @@ export declare const NotificationContainer: import("@stitches/react/types/styled
59
59
  obolDisabled: string;
60
60
  linkButtonHover: string;
61
61
  progressTrackerGreen: string;
62
+ lightGrey: string;
62
63
  coordinate: string;
63
64
  coordinateHover: string;
64
65
  test: string;
@@ -538,6 +539,7 @@ export declare const NotificationContainer: import("@stitches/react/types/styled
538
539
  obolDisabled: string;
539
540
  linkButtonHover: string;
540
541
  progressTrackerGreen: string;
542
+ lightGrey: string;
541
543
  coordinate: string;
542
544
  coordinateHover: string;
543
545
  test: string;
package/dist/components/molecules/RadioGroup/RadioGroup.d.ts CHANGED
@@ -61,6 +61,7 @@ export declare const RadioGroupRadio: import("@stitches/react/types/styled-compo
61
61
  obolDisabled: string;
62
62
  linkButtonHover: string;
63
63
  progressTrackerGreen: string;
64
+ lightGrey: string;
64
65
  coordinate: string;
65
66
  coordinateHover: string;
66
67
  test: string;
@@ -541,6 +542,7 @@ export declare const RadioGroupIndicator: import("@stitches/react/types/styled-c
541
542
  obolDisabled: string;
542
543
  linkButtonHover: string;
543
544
  progressTrackerGreen: string;
545
+ lightGrey: string;
544
546
  coordinate: string;
545
547
  coordinateHover: string;
546
548
  test: string;
@@ -1021,6 +1023,7 @@ export declare const RadioGroupItemLabel: import("@stitches/react/types/styled-c
1021
1023
  obolDisabled: string;
1022
1024
  linkButtonHover: string;
1023
1025
  progressTrackerGreen: string;
1026
+ lightGrey: string;
1024
1027
  coordinate: string;
1025
1028
  coordinateHover: string;
1026
1029
  test: string;
package/dist/components/organisms/Advisory/Advisory.d.ts CHANGED
@@ -77,6 +77,7 @@ export declare const Flex: import("@stitches/react/types/styled-component").Styl
77
77
  obolDisabled: string;
78
78
  linkButtonHover: string;
79
79
  progressTrackerGreen: string;
80
+ lightGrey: string;
80
81
  coordinate: string;
81
82
  coordinateHover: string;
82
83
  test: string;
@@ -556,6 +557,7 @@ export declare const Flex: import("@stitches/react/types/styled-component").Styl
556
557
  obolDisabled: string;
557
558
  linkButtonHover: string;
558
559
  progressTrackerGreen: string;
560
+ lightGrey: string;
559
561
  coordinate: string;
560
562
  coordinateHover: string;
561
563
  test: string;
package/dist/components/utils/color-variants.d.ts CHANGED
@@ -37,6 +37,7 @@ declare const COLORS: {
37
37
  obolDisabled: import("@stitches/react/types/theme").Token<"obolDisabled", string, "colors", "">;
38
38
  linkButtonHover: import("@stitches/react/types/theme").Token<"linkButtonHover", string, "colors", "">;
39
39
  progressTrackerGreen: import("@stitches/react/types/theme").Token<"progressTrackerGreen", string, "colors", "">;
40
+ lightGrey: import("@stitches/react/types/theme").Token<"lightGrey", string, "colors", "">;
40
41
  coordinate: import("@stitches/react/types/theme").Token<"coordinate", string, "colors", "">;
41
42
  coordinateHover: import("@stitches/react/types/theme").Token<"coordinateHover", string, "colors", "">;
42
43
  test: import("@stitches/react/types/theme").Token<"test", string, "colors", "">;
package/dist/components/utils/styles.d.ts CHANGED
@@ -58,6 +58,7 @@ export declare const GlowIcon: import("@stitches/react/types/styled-component").
58
58
  obolDisabled: string;
59
59
  linkButtonHover: string;
60
60
  progressTrackerGreen: string;
61
+ lightGrey: string;
61
62
  coordinate: string;
62
63
  coordinateHover: string;
63
64
  test: string;
package/dist/index.es.js CHANGED
@@ -5,6 +5,7 @@ import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
5
5
  import React, { useState, forwardRef, useRef, useImperativeHandle, useEffect, useLayoutEffect } from 'react';
6
6
  import * as TooltipPrimitive from '@radix-ui/react-tooltip';
7
7
  import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
8
+ import * as ReactSwitch from '@radix-ui/react-switch';
8
9
  import { Cross2Icon } from '@radix-ui/react-icons';
9
10
  import * as DialogPrimitive from '@radix-ui/react-dialog';
10
11
  import * as AccordionPrimitive from '@radix-ui/react-accordion';
@@ -119,6 +120,7 @@ var styled = (_a = createStitches({
119
120
  obolDisabled: "#1A292D",
120
121
  linkButtonHover: "#A0F3D9",
121
122
  progressTrackerGreen: "#1D5249",
123
+ lightGrey: "#C4C4C4",
122
124
  //secondary
123
125
  coordinate: "#9167E4",
124
126
  coordinateHover: "#BB99FF",
@@ -1522,6 +1524,34 @@ var Checkbox = function (_a) {
1522
1524
  return (jsx(CheckboxRoot, __assign({}, props, { children: jsx(CheckboxIndicator, { children: jsx(CheckboxIcon, {}) }) })));
1523
1525
  };
1524
1526
 
1527
+ var SwitchRoot = styled(ReactSwitch.Root, {
1528
+ width: "78px",
1529
+ height: "40px",
1530
+ border: "0",
1531
+ backgroundColor: "$lightGrey",
1532
+ borderRadius: "40px",
1533
+ padding: "0",
1534
+ "&[data-state='checked']": {
1535
+ backgroundColor: "$obolGreen",
1536
+ }
1537
+ });
1538
+ var SwitchThumb = styled(ReactSwitch.Thumb, {
1539
+ display: "block",
1540
+ width: "30px",
1541
+ height: "30px",
1542
+ backgroundColor: "white",
1543
+ borderRadius: "40px",
1544
+ transition: "transform 100ms",
1545
+ transform: "translateX(4px)",
1546
+ "&[data-state='checked']": {
1547
+ transform: "translateX(40px)",
1548
+ }
1549
+ });
1550
+ var Switch = function (_a) {
1551
+ var props = __rest(_a, []);
1552
+ return (jsx(SwitchRoot, __assign({}, props, { children: jsx(SwitchThumb, {}) })));
1553
+ };
1554
+
1525
1555
  var overlayShow = keyframes({
1526
1556
  "0%": { opacity: 0 },
1527
1557
  "100%": { opacity: 1 },
@@ -2366,4 +2396,4 @@ var TwoColumnSection = function (_a) {
2366
2396
  } }, { 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" })) }))] })));
2367
2397
  };
2368
2398
 
2369
- 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 };
2399
+ 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 CHANGED
@@ -9,6 +9,7 @@ var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
9
9
  var React = require('react');
10
10
  var TooltipPrimitive = require('@radix-ui/react-tooltip');
11
11
  var CheckboxPrimitive = require('@radix-ui/react-checkbox');
12
+ var ReactSwitch = require('@radix-ui/react-switch');
12
13
  var reactIcons = require('@radix-ui/react-icons');
13
14
  var DialogPrimitive = require('@radix-ui/react-dialog');
14
15
  var AccordionPrimitive = require('@radix-ui/react-accordion');
@@ -40,6 +41,7 @@ var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup
40
41
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
41
42
  var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
42
43
  var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
44
+ var ReactSwitch__namespace = /*#__PURE__*/_interopNamespace(ReactSwitch);
43
45
  var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
44
46
  var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
45
47
  var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
@@ -152,6 +154,7 @@ var styled = (_a = react.createStitches({
152
154
  obolDisabled: "#1A292D",
153
155
  linkButtonHover: "#A0F3D9",
154
156
  progressTrackerGreen: "#1D5249",
157
+ lightGrey: "#C4C4C4",
155
158
  //secondary
156
159
  coordinate: "#9167E4",
157
160
  coordinateHover: "#BB99FF",
@@ -1555,6 +1558,34 @@ var Checkbox = function (_a) {
1555
1558
  return (jsxRuntime.jsx(CheckboxRoot, __assign({}, props, { children: jsxRuntime.jsx(CheckboxIndicator, { children: jsxRuntime.jsx(CheckboxIcon, {}) }) })));
1556
1559
  };
1557
1560
 
1561
+ var SwitchRoot = styled(ReactSwitch__namespace.Root, {
1562
+ width: "78px",
1563
+ height: "40px",
1564
+ border: "0",
1565
+ backgroundColor: "$lightGrey",
1566
+ borderRadius: "40px",
1567
+ padding: "0",
1568
+ "&[data-state='checked']": {
1569
+ backgroundColor: "$obolGreen",
1570
+ }
1571
+ });
1572
+ var SwitchThumb = styled(ReactSwitch__namespace.Thumb, {
1573
+ display: "block",
1574
+ width: "30px",
1575
+ height: "30px",
1576
+ backgroundColor: "white",
1577
+ borderRadius: "40px",
1578
+ transition: "transform 100ms",
1579
+ transform: "translateX(4px)",
1580
+ "&[data-state='checked']": {
1581
+ transform: "translateX(40px)",
1582
+ }
1583
+ });
1584
+ var Switch = function (_a) {
1585
+ var props = __rest(_a, []);
1586
+ return (jsxRuntime.jsx(SwitchRoot, __assign({}, props, { children: jsxRuntime.jsx(SwitchThumb, {}) })));
1587
+ };
1588
+
1558
1589
  var overlayShow = keyframes({
1559
1590
  "0%": { opacity: 0 },
1560
1591
  "100%": { opacity: 1 },
@@ -2493,6 +2524,9 @@ exports.RunIcon = RunIcon;
2493
2524
  exports.Spin = Spin;
2494
2525
  exports.SplitterTable = SplitterTable;
2495
2526
  exports.SvgIcon = SvgIcon;
2527
+ exports.Switch = Switch;
2528
+ exports.SwitchRoot = SwitchRoot;
2529
+ exports.SwitchThumb = SwitchThumb;
2496
2530
  exports.Table = Table;
2497
2531
  exports.Tabs = Tabs$1;
2498
2532
  exports.TeamMemberCard = TeamMemberCard;
package/dist/stitches.config.d.ts CHANGED
@@ -60,6 +60,7 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
60
60
  obolDisabled: string;
61
61
  linkButtonHover: string;
62
62
  progressTrackerGreen: string;
63
+ lightGrey: string;
63
64
  coordinate: string;
64
65
  coordinateHover: string;
65
66
  test: string;
@@ -470,6 +471,7 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
470
471
  obolDisabled: string;
471
472
  linkButtonHover: string;
472
473
  progressTrackerGreen: string;
474
+ lightGrey: string;
473
475
  coordinate: string;
474
476
  coordinateHover: string;
475
477
  test: string;
@@ -861,6 +863,7 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
861
863
  obolDisabled: string;
862
864
  linkButtonHover: string;
863
865
  progressTrackerGreen: string;
866
+ lightGrey: string;
864
867
  coordinate: string;
865
868
  coordinateHover: string;
866
869
  test: string;
@@ -1277,6 +1280,7 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
1277
1280
  obolDisabled: string;
1278
1281
  linkButtonHover: string;
1279
1282
  progressTrackerGreen: string;
1283
+ lightGrey: string;
1280
1284
  coordinate: string;
1281
1285
  coordinateHover: string;
1282
1286
  test: string;
@@ -1667,6 +1671,7 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
1667
1671
  obolDisabled: string;
1668
1672
  linkButtonHover: string;
1669
1673
  progressTrackerGreen: string;
1674
+ lightGrey: string;
1670
1675
  coordinate: string;
1671
1676
  coordinateHover: string;
1672
1677
  test: string;
@@ -2057,6 +2062,7 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
2057
2062
  obolDisabled: string;
2058
2063
  linkButtonHover: string;
2059
2064
  progressTrackerGreen: string;
2065
+ lightGrey: string;
2060
2066
  coordinate: string;
2061
2067
  coordinateHover: string;
2062
2068
  test: string;
@@ -2443,6 +2449,7 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
2443
2449
  obolDisabled: import("@stitches/react/types/theme").Token<"obolDisabled", string, "colors", "">;
2444
2450
  linkButtonHover: import("@stitches/react/types/theme").Token<"linkButtonHover", string, "colors", "">;
2445
2451
  progressTrackerGreen: import("@stitches/react/types/theme").Token<"progressTrackerGreen", string, "colors", "">;
2452
+ lightGrey: import("@stitches/react/types/theme").Token<"lightGrey", string, "colors", "">;
2446
2453
  coordinate: import("@stitches/react/types/theme").Token<"coordinate", string, "colors", "">;
2447
2454
  coordinateHover: import("@stitches/react/types/theme").Token<"coordinateHover", string, "colors", "">;
2448
2455
  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").
2594
2601
  obolDisabled?: string | number | boolean | undefined;
2595
2602
  linkButtonHover?: string | number | boolean | undefined;
2596
2603
  progressTrackerGreen?: string | number | boolean | undefined;
2604
+ lightGrey?: string | number | boolean | undefined;
2597
2605
  coordinate?: string | number | boolean | undefined;
2598
2606
  coordinateHover?: string | number | boolean | undefined;
2599
2607
  test?: string | number | boolean | undefined;
@@ -2750,6 +2758,7 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
2750
2758
  obolDisabled?: string | number | boolean | undefined;
2751
2759
  linkButtonHover?: string | number | boolean | undefined;
2752
2760
  progressTrackerGreen?: string | number | boolean | undefined;
2761
+ lightGrey?: string | number | boolean | undefined;
2753
2762
  coordinate?: string | number | boolean | undefined;
2754
2763
  coordinateHover?: string | number | boolean | undefined;
2755
2764
  test?: string | number | boolean | undefined;
@@ -2922,6 +2931,7 @@ export declare const styled: <Type extends import("@stitches/react/types/util").
2922
2931
  obolDisabled: string;
2923
2932
  linkButtonHover: string;
2924
2933
  progressTrackerGreen: string;
2934
+ lightGrey: string;
2925
2935
  coordinate: string;
2926
2936
  coordinateHover: string;
2927
2937
  test: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@obolnetwork/obol-ui",
3
- "version": "1.0.35",
3
+ "version": "1.0.36",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.es.js",
6
6
  "license": "MIT",
@@ -24,6 +24,7 @@
24
24
  "@radix-ui/react-dialog": "^0.1.7",
25
25
  "@radix-ui/react-icons": "^1.1.1",
26
26
  "@radix-ui/react-radio-group": "^0.1.5",
27
+ "@radix-ui/react-switch": "^1.0.1",
27
28
  "@radix-ui/react-tabs": "^0.1.5",
28
29
  "@radix-ui/react-toggle-group": "^0.1.5",
29
30
  "@radix-ui/react-tooltip": "^0.1.7",