@obolnetwork/obol-ui 1.0.33 → 1.0.35

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const LogoCard: (props: {
     image: string;
     heading: string;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type * as Stitches from "@stitches/react";
 export declare const Text: import("@stitches/react/types/styled-component").StyledComponent<"span", {
-    variant?: "body" | "h1" | "h2" | "h3" | "h4" | "h5" | "metadata" | "subline" | "ens" | undefined;
+    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;
     glow?: boolean | "true" | undefined;
@@ -488,7 +488,7 @@ export declare const Text: import("@stitches/react/types/styled-component").Styl
 }>>;
 export default Text;
 export declare const TextStory: (props: Omit<import("@stitches/react/types/styled-component").TransformProps<{
-    variant?: "body" | "h1" | "h2" | "h3" | "h4" | "h5" | "metadata" | "subline" | "ens" | undefined;
+    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;
     glow?: boolean | "true" | undefined;
@@ -504,7 +504,7 @@ export declare const TextStory: (props: Omit<import("@stitches/react/types/style
     md: "(max-width: 1200px)";
     lg: "(max-width: 1800px)";
 }>, "color" | "size" | "inline" | "variant" | "glow"> & {
-    variant?: "body" | "h1" | "h2" | "h3" | "h4" | "h5" | "metadata" | "subline" | "ens" | undefined;
+    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;
     glow?: boolean | undefined;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactNode } from "react";
 export declare const NotificationContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
     motion: "(prefers-reduced-motion)";
     hover: "(any-hover: hover)";
@@ -959,7 +959,7 @@ export declare const NotificationContainer: import("@stitches/react/types/styled
     };
 }>>;
 export interface NotificationCardProps {
-    heading: string;
+    heading: string | ReactNode;
     subHeading?: string;
     link?: string;
     linkText?: 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

@@ -735,6 +735,16 @@ var Text = styled("span", {
                 fontSize: "$2",
                 color: "$textMuted",
             },
+            pill: {
+                fontSize: "$3",
+                lineHeight: "16px",
+                color: "$$color",
+                border: " 1px solid $$color",
+                background: "rgba(60, 210, 221, 0.1)",
+                display: "inline-block",
+                borderRadius: "$1",
+                padding: "0 $xxxs",
+            }
         },
         size: {
             1: { fontSize: "$1" },

package/dist/index.js

@@ -768,6 +768,16 @@ var Text = styled("span", {
                 fontSize: "$2",
                 color: "$textMuted",
             },
+            pill: {
+                fontSize: "$3",
+                lineHeight: "16px",
+                color: "$$color",
+                border: " 1px solid $$color",
+                background: "rgba(60, 210, 221, 0.1)",
+                display: "inline-block",
+                borderRadius: "$1",
+                padding: "0 $xxxs",
+            }
         },
         size: {
             1: { fontSize: "$1" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obolnetwork/obol-ui",
-  "version": "1.0.33",
+  "version": "1.0.35",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "license": "MIT",
@@ -35,22 +35,23 @@
   },
   "devDependencies": {
     "@babel/core": "^7.17.8",
-    "@storybook/addon-actions": "^6.4.20",
-    "@storybook/addon-essentials": "^6.4.20",
-    "@storybook/addon-interactions": "^6.4.20",
-    "@storybook/addon-links": "^6.4.20",
-    "@storybook/react": "^6.4.20",
-    "@storybook/testing-library": "^0.0.9",
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addon-interactions": "^6.5.12",
+    "@storybook/addon-links": "^6.5.12",
+    "@storybook/react": "^6.5.12",
+    "@storybook/testing-library": "^0.0.13",
     "@types/node": "17.0.21",
     "@types/react": "17.0.40",
     "babel-loader": "^8.2.4",
     "eslint": "8.11.0",
     "eslint-config-next": "12.1.0",
+    "eslint-plugin-storybook": "^0.6.4",
     "figma-api": "^1.10.1",
     "np": "^7.6.1",
     "rollup": "^2.70.1",
     "rollup-plugin-typescript2": "^0.31.2",
-    "storybook-addon-designs": "^6.2.1",
+    "storybook-addon-designs": "^6.3.1",
     "tslib": "^2.3.1",
     "typescript": "^4.6.3"
   },