@livepeer/design-system 0.0.0-beta.8 → 1.0.1

package/dist/custom/AppBar.d.ts

@@ -1,5 +1,5 @@
 export declare const AppBar: import("@stitches/react/types/styled-component").StyledComponent<"div", {
-    size?: 1 | "1" | "2" | "3" | 2 | 3 | undefined;
+    size?: "1" | "2" | "3" | 1 | 2 | 3 | undefined;
     sticky?: boolean | "true" | undefined;
     glass?: boolean | "true" | undefined;
     border?: boolean | "true" | undefined;
@@ -55,342 +55,6 @@ export declare const AppBar: import("@stitches/react/types/styled-component").St
         whiteA10: string;
         whiteA11: string;
         whiteA12: string;
-        goldA1: string;
-        goldA2: string;
-        goldA3: string;
-        goldA4: string;
-        goldA5: string;
-        goldA6: string;
-        goldA7: string;
-        goldA8: string;
-        goldA9: string;
-        goldA10: string;
-        goldA11: string;
-        goldA12: string;
-        bronzeA1: string;
-        bronzeA2: string;
-        bronzeA3: string;
-        bronzeA4: string;
-        bronzeA5: string;
-        bronzeA6: string;
-        bronzeA7: string;
-        bronzeA8: string;
-        bronzeA9: string;
-        bronzeA10: string;
-        bronzeA11: string;
-        bronzeA12: string;
-        brownA1: string;
-        brownA2: string;
-        brownA3: string;
-        brownA4: string;
-        brownA5: string;
-        brownA6: string;
-        brownA7: string;
-        brownA8: string;
-        brownA9: string;
-        brownA10: string;
-        brownA11: string;
-        brownA12: string;
-        orangeA1: string;
-        orangeA2: string;
-        orangeA3: string;
-        orangeA4: string;
-        orangeA5: string;
-        orangeA6: string;
-        orangeA7: string;
-        orangeA8: string;
-        orangeA9: string;
-        orangeA10: string;
-        orangeA11: string;
-        orangeA12: string;
-        amberA1: string;
-        amberA2: string;
-        amberA3: string;
-        amberA4: string;
-        amberA5: string;
-        amberA6: string;
-        amberA7: string;
-        amberA8: string;
-        amberA9: string;
-        amberA10: string;
-        amberA11: string;
-        amberA12: string;
-        yellowA1: string;
-        yellowA2: string;
-        yellowA3: string;
-        yellowA4: string;
-        yellowA5: string;
-        yellowA6: string;
-        yellowA7: string;
-        yellowA8: string;
-        yellowA9: string;
-        yellowA10: string;
-        yellowA11: string;
-        yellowA12: string;
-        limeA1: string;
-        limeA2: string;
-        limeA3: string;
-        limeA4: string;
-        limeA5: string;
-        limeA6: string;
-        limeA7: string;
-        limeA8: string;
-        limeA9: string;
-        limeA10: string;
-        limeA11: string;
-        limeA12: string;
-        grassA1: string;
-        grassA2: string;
-        grassA3: string;
-        grassA4: string;
-        grassA5: string;
-        grassA6: string;
-        grassA7: string;
-        grassA8: string;
-        grassA9: string;
-        grassA10: string;
-        grassA11: string;
-        grassA12: string;
-        greenA1: string;
-        greenA2: string;
-        greenA3: string;
-        greenA4: string;
-        greenA5: string;
-        greenA6: string;
-        greenA7: string;
-        greenA8: string;
-        greenA9: string;
-        greenA10: string;
-        greenA11: string;
-        greenA12: string;
-        tealA1: string;
-        tealA2: string;
-        tealA3: string;
-        tealA4: string;
-        tealA5: string;
-        tealA6: string;
-        tealA7: string;
-        tealA8: string;
-        tealA9: string;
-        tealA10: string;
-        tealA11: string;
-        tealA12: string;
-        cyanA1: string;
-        cyanA2: string;
-        cyanA3: string;
-        cyanA4: string;
-        cyanA5: string;
-        cyanA6: string;
-        cyanA7: string;
-        cyanA8: string;
-        cyanA9: string;
-        cyanA10: string;
-        cyanA11: string;
-        cyanA12: string;
-        mintA1: string;
-        mintA2: string;
-        mintA3: string;
-        mintA4: string;
-        mintA5: string;
-        mintA6: string;
-        mintA7: string;
-        mintA8: string;
-        mintA9: string;
-        mintA10: string;
-        mintA11: string;
-        mintA12: string;
-        skyA1: string;
-        skyA2: string;
-        skyA3: string;
-        skyA4: string;
-        skyA5: string;
-        skyA6: string;
-        skyA7: string;
-        skyA8: string;
-        skyA9: string;
-        skyA10: string;
-        skyA11: string;
-        skyA12: string;
-        blueA1: string;
-        blueA2: string;
-        blueA3: string;
-        blueA4: string;
-        blueA5: string;
-        blueA6: string;
-        blueA7: string;
-        blueA8: string;
-        blueA9: string;
-        blueA10: string;
-        blueA11: string;
-        blueA12: string;
-        indigoA1: string;
-        indigoA2: string;
-        indigoA3: string;
-        indigoA4: string;
-        indigoA5: string;
-        indigoA6: string;
-        indigoA7: string;
-        indigoA8: string;
-        indigoA9: string;
-        indigoA10: string;
-        indigoA11: string;
-        indigoA12: string;
-        violetA1: string;
-        violetA2: string;
-        violetA3: string;
-        violetA4: string;
-        violetA5: string;
-        violetA6: string;
-        violetA7: string;
-        violetA8: string;
-        violetA9: string;
-        violetA10: string;
-        violetA11: string;
-        violetA12: string;
-        purpleA1: string;
-        purpleA2: string;
-        purpleA3: string;
-        purpleA4: string;
-        purpleA5: string;
-        purpleA6: string;
-        purpleA7: string;
-        purpleA8: string;
-        purpleA9: string;
-        purpleA10: string;
-        purpleA11: string;
-        purpleA12: string;
-        plumA1: string;
-        plumA2: string;
-        plumA3: string;
-        plumA4: string;
-        plumA5: string;
-        plumA6: string;
-        plumA7: string;
-        plumA8: string;
-        plumA9: string;
-        plumA10: string;
-        plumA11: string;
-        plumA12: string;
-        pinkA1: string;
-        pinkA2: string;
-        pinkA3: string;
-        pinkA4: string;
-        pinkA5: string;
-        pinkA6: string;
-        pinkA7: string;
-        pinkA8: string;
-        pinkA9: string;
-        pinkA10: string;
-        pinkA11: string;
-        pinkA12: string;
-        crimsonA1: string;
-        crimsonA2: string;
-        crimsonA3: string;
-        crimsonA4: string;
-        crimsonA5: string;
-        crimsonA6: string;
-        crimsonA7: string;
-        crimsonA8: string;
-        crimsonA9: string;
-        crimsonA10: string;
-        crimsonA11: string;
-        crimsonA12: string;
-        redA1: string;
-        redA2: string;
-        redA3: string;
-        redA4: string;
-        redA5: string;
-        redA6: string;
-        redA7: string;
-        redA8: string;
-        redA9: string;
-        redA10: string;
-        redA11: string;
-        redA12: string;
-        tomatoA1: string;
-        tomatoA2: string;
-        tomatoA3: string;
-        tomatoA4: string;
-        tomatoA5: string;
-        tomatoA6: string;
-        tomatoA7: string;
-        tomatoA8: string;
-        tomatoA9: string;
-        tomatoA10: string;
-        tomatoA11: string;
-        tomatoA12: string;
-        sandA1: string;
-        sandA2: string;
-        sandA3: string;
-        sandA4: string;
-        sandA5: string;
-        sandA6: string;
-        sandA7: string;
-        sandA8: string;
-        sandA9: string;
-        sandA10: string;
-        sandA11: string;
-        sandA12: string;
-        oliveA1: string;
-        oliveA2: string;
-        oliveA3: string;
-        oliveA4: string;
-        oliveA5: string;
-        oliveA6: string;
-        oliveA7: string;
-        oliveA8: string;
-        oliveA9: string;
-        oliveA10: string;
-        oliveA11: string;
-        oliveA12: string;
-        sageA1: string;
-        sageA2: string;
-        sageA3: string;
-        sageA4: string;
-        sageA5: string;
-        sageA6: string;
-        sageA7: string;
-        sageA8: string;
-        sageA9: string;
-        sageA10: string;
-        sageA11: string;
-        sageA12: string;
-        slateA1: string;
-        slateA2: string;
-        slateA3: string;
-        slateA4: string;
-        slateA5: string;
-        slateA6: string;
-        slateA7: string;
-        slateA8: string;
-        slateA9: string;
-        slateA10: string;
-        slateA11: string;
-        slateA12: string;
-        mauveA1: string;
-        mauveA2: string;
-        mauveA3: string;
-        mauveA4: string;
-        mauveA5: string;
-        mauveA6: string;
-        mauveA7: string;
-        mauveA8: string;
-        mauveA9: string;
-        mauveA10: string;
-        mauveA11: string;
-        mauveA12: string;
-        grayA1: string;
-        grayA2: string;
-        grayA3: string;
-        grayA4: string;
-        grayA5: string;
-        grayA6: string;
-        grayA7: string;
-        grayA8: string;
-        grayA9: string;
-        grayA10: string;
-        grayA11: string;
-        grayA12: string;
         gold1: string;
         gold2: string;
         gold3: string;
@@ -784,210 +448,308 @@ export declare const AppBar: import("@stitches/react/types/styled-component").St
     p: (value: {
         readonly [$$PropertyValue]: "padding";
     }) => {
-        padding: {};
+        padding: {
+            readonly [$$PropertyValue]: "padding";
+        };
     };
     pt: (value: {
         readonly [$$PropertyValue]: "paddingTop";
     }) => {
-        paddingTop: {};
+        paddingTop: {
+            readonly [$$PropertyValue]: "paddingTop";
+        };
     };
     pr: (value: {
         readonly [$$PropertyValue]: "paddingRight";
     }) => {
-        paddingRight: {};
+        paddingRight: {
+            readonly [$$PropertyValue]: "paddingRight";
+        };
     };
     pb: (value: {
         readonly [$$PropertyValue]: "paddingBottom";
     }) => {
-        paddingBottom: {};
+        paddingBottom: {
+            readonly [$$PropertyValue]: "paddingBottom";
+        };
     };
     pl: (value: {
         readonly [$$PropertyValue]: "paddingLeft";
     }) => {
-        paddingLeft: {};
+        paddingLeft: {
+            readonly [$$PropertyValue]: "paddingLeft";
+        };
     };
     px: (value: {
         readonly [$$PropertyValue]: "paddingLeft";
     }) => {
-        paddingLeft: {};
-        paddingRight: {};
+        paddingLeft: {
+            readonly [$$PropertyValue]: "paddingLeft";
+        };
+        paddingRight: {
+            readonly [$$PropertyValue]: "paddingLeft";
+        };
     };
     py: (value: {
         readonly [$$PropertyValue]: "paddingTop";
     }) => {
-        paddingTop: {};
-        paddingBottom: {};
+        paddingTop: {
+            readonly [$$PropertyValue]: "paddingTop";
+        };
+        paddingBottom: {
+            readonly [$$PropertyValue]: "paddingTop";
+        };
     };
     m: (value: {
         readonly [$$PropertyValue]: "margin";
     }) => {
-        margin: {};
+        margin: {
+            readonly [$$PropertyValue]: "margin";
+        };
     };
     mt: (value: {
         readonly [$$PropertyValue]: "marginTop";
     }) => {
-        marginTop: {};
+        marginTop: {
+            readonly [$$PropertyValue]: "marginTop";
+        };
     };
     mr: (value: {
         readonly [$$PropertyValue]: "marginRight";
     }) => {
-        marginRight: {};
+        marginRight: {
+            readonly [$$PropertyValue]: "marginRight";
+        };
     };
     mb: (value: {
         readonly [$$PropertyValue]: "marginBottom";
     }) => {
-        marginBottom: {};
+        marginBottom: {
+            readonly [$$PropertyValue]: "marginBottom";
+        };
     };
     ml: (value: {
         readonly [$$PropertyValue]: "marginLeft";
     }) => {
-        marginLeft: {};
+        marginLeft: {
+            readonly [$$PropertyValue]: "marginLeft";
+        };
     };
     mx: (value: {
         readonly [$$PropertyValue]: "marginLeft";
     }) => {
-        marginLeft: {};
-        marginRight: {};
+        marginLeft: {
+            readonly [$$PropertyValue]: "marginLeft";
+        };
+        marginRight: {
+            readonly [$$PropertyValue]: "marginLeft";
+        };
     };
     my: (value: {
         readonly [$$PropertyValue]: "marginTop";
     }) => {
-        marginTop: {};
-        marginBottom: {};
+        marginTop: {
+            readonly [$$PropertyValue]: "marginTop";
+        };
+        marginBottom: {
+            readonly [$$PropertyValue]: "marginTop";
+        };
     };
     ta: (value: {
         readonly [$$PropertyValue]: "textAlign";
     }) => {
-        textAlign: {};
+        textAlign: {
+            readonly [$$PropertyValue]: "textAlign";
+        };
     };
     fd: (value: {
         readonly [$$PropertyValue]: "flexDirection";
     }) => {
-        flexDirection: {};
+        flexDirection: {
+            readonly [$$PropertyValue]: "flexDirection";
+        };
     };
     fw: (value: {
         readonly [$$PropertyValue]: "flexWrap";
     }) => {
-        flexWrap: {};
+        flexWrap: {
+            readonly [$$PropertyValue]: "flexWrap";
+        };
     };
     ai: (value: {
         readonly [$$PropertyValue]: "alignItems";
     }) => {
-        alignItems: {};
+        alignItems: {
+            readonly [$$PropertyValue]: "alignItems";
+        };
     };
     ac: (value: {
         readonly [$$PropertyValue]: "alignContent";
     }) => {
-        alignContent: {};
+        alignContent: {
+            readonly [$$PropertyValue]: "alignContent";
+        };
     };
     jc: (value: {
         readonly [$$PropertyValue]: "justifyContent";
     }) => {
-        justifyContent: {};
+        justifyContent: {
+            readonly [$$PropertyValue]: "justifyContent";
+        };
     };
     as: (value: {
         readonly [$$PropertyValue]: "alignSelf";
     }) => {
-        alignSelf: {};
+        alignSelf: {
+            readonly [$$PropertyValue]: "alignSelf";
+        };
     };
     fg: (value: {
         readonly [$$PropertyValue]: "flexGrow";
     }) => {
-        flexGrow: {};
+        flexGrow: {
+            readonly [$$PropertyValue]: "flexGrow";
+        };
     };
     fs: (value: {
         readonly [$$PropertyValue]: "flexShrink";
     }) => {
-        flexShrink: {};
+        flexShrink: {
+            readonly [$$PropertyValue]: "flexShrink";
+        };
     };
     fb: (value: {
         readonly [$$PropertyValue]: "flexBasis";
     }) => {
-        flexBasis: {};
+        flexBasis: {
+            readonly [$$PropertyValue]: "flexBasis";
+        };
     };
     bc: (value: {
         readonly [$$PropertyValue]: "backgroundColor";
     }) => {
-        backgroundColor: {};
+        backgroundColor: {
+            readonly [$$PropertyValue]: "backgroundColor";
+        };
     };
     br: (value: {
         readonly [$$PropertyValue]: "borderRadius";
     }) => {
-        borderRadius: {};
+        borderRadius: {
+            readonly [$$PropertyValue]: "borderRadius";
+        };
     };
     btrr: (value: {
         readonly [$$PropertyValue]: "borderTopRightRadius";
     }) => {
-        borderTopRightRadius: {};
+        borderTopRightRadius: {
+            readonly [$$PropertyValue]: "borderTopRightRadius";
+        };
     };
     bbrr: (value: {
         readonly [$$PropertyValue]: "borderBottomRightRadius";
     }) => {
-        borderBottomRightRadius: {};
+        borderBottomRightRadius: {
+            readonly [$$PropertyValue]: "borderBottomRightRadius";
+        };
     };
     bblr: (value: {
         readonly [$$PropertyValue]: "borderBottomLeftRadius";
     }) => {
-        borderBottomLeftRadius: {};
+        borderBottomLeftRadius: {
+            readonly [$$PropertyValue]: "borderBottomLeftRadius";
+        };
     };
     btlr: (value: {
         readonly [$$PropertyValue]: "borderTopLeftRadius";
     }) => {
-        borderTopLeftRadius: {};
+        borderTopLeftRadius: {
+            readonly [$$PropertyValue]: "borderTopLeftRadius";
+        };
     };
     bs: (value: {
         readonly [$$PropertyValue]: "boxShadow";
     }) => {
-        boxShadow: {};
+        boxShadow: {
+            readonly [$$PropertyValue]: "boxShadow";
+        };
     };
     lh: (value: {
         readonly [$$PropertyValue]: "lineHeight";
     }) => {
-        lineHeight: {};
+        lineHeight: {
+            readonly [$$PropertyValue]: "lineHeight";
+        };
     };
     ox: (value: {
         readonly [$$PropertyValue]: "overflowX";
     }) => {
-        overflowX: {};
+        overflowX: {
+            readonly [$$PropertyValue]: "overflowX";
+        };
     };
     oy: (value: {
         readonly [$$PropertyValue]: "overflowY";
     }) => {
-        overflowY: {};
+        overflowY: {
+            readonly [$$PropertyValue]: "overflowY";
+        };
     };
     pe: (value: {
         readonly [$$PropertyValue]: "pointerEvents";
     }) => {
-        pointerEvents: {};
+        pointerEvents: {
+            readonly [$$PropertyValue]: "pointerEvents";
+        };
     };
     us: (value: {
         readonly [$$PropertyValue]: "userSelect";
     }) => {
-        WebkitUserSelect: {};
-        userSelect: {};
+        WebkitUserSelect: {
+            readonly [$$PropertyValue]: "userSelect";
+        };
+        userSelect: {
+            readonly [$$PropertyValue]: "userSelect";
+        };
     };
     userSelect: (value: {
         readonly [$$PropertyValue]: "userSelect";
     }) => {
-        WebkitUserSelect: {};
-        userSelect: {};
+        WebkitUserSelect: {
+            readonly [$$PropertyValue]: "userSelect";
+        };
+        userSelect: {
+            readonly [$$PropertyValue]: "userSelect";
+        };
     };
     size: (value: {
         readonly [$$PropertyValue]: "width";
     }) => {
-        width: {};
-        height: {};
+        width: {
+            readonly [$$PropertyValue]: "width";
+        };
+        height: {
+            readonly [$$PropertyValue]: "width";
+        };
     };
     appearance: (value: {
         readonly [$$PropertyValue]: "appearance";
     }) => {
-        WebkitAppearance: {};
-        appearance: {};
+        WebkitAppearance: {
+            readonly [$$PropertyValue]: "appearance";
+        };
+        appearance: {
+            readonly [$$PropertyValue]: "appearance";
+        };
     };
     backgroundClip: (value: {
         readonly [$$PropertyValue]: "backgroundClip";
     }) => {
-        WebkitBackgroundClip: {};
-        backgroundClip: {};
+        WebkitBackgroundClip: {
+            readonly [$$PropertyValue]: "backgroundClip";
+        };
+        backgroundClip: {
+            readonly [$$PropertyValue]: "backgroundClip";
+        };
     };
 }>>;

package/dist/custom/Avatars.d.ts

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

package/dist/custom/DarkThemeButton.d.ts

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

package/dist/custom/Kbds.d.ts

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