@100mslive/roomkit-react 0.3.22-alpha.3 → 0.3.22-alpha.5

package/dist/VideoTile/StyledVideoTile.d.ts

@@ -274,73 +274,167 @@ export declare const Root: import("@stitches/react/types/styled-component").Styl
     transition: "transitions";
     zIndex: "zIndices";
 }, {
-    bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">) => {
-        backgroundColor: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">;
-    };
-    c: (value: import("@stitches/react/types/css-util").WithPropertyValue<"color">) => {
-        color: import("@stitches/react/types/css-util").WithPropertyValue<"color">;
-    };
-    r: (value: import("@stitches/react/types/css-util").WithScaleValue<"radii">) => {
-        borderRadius: import("@stitches/react/types/css-util").WithScaleValue<"radii">;
-    };
-    fs: (value: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">) => {
-        fontSize: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">;
-    };
-    size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    w: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    h: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    py: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    my: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    bg: (value: {
+        readonly [$$PropertyValue]: "backgroundColor";
+    }) => {
+        backgroundColor: {
+            readonly [$$PropertyValue]: "backgroundColor";
+        };
+    };
+    c: (value: {
+        readonly [$$PropertyValue]: "color";
+    }) => {
+        color: {
+            readonly [$$PropertyValue]: "color";
+        };
+    };
+    r: (value: {
+        readonly [$$ScaleValue]: "radii";
+    }) => {
+        borderRadius: {
+            readonly [$$ScaleValue]: "radii";
+        };
+    };
+    fs: (value: string | number | {
+        readonly [$$PropertyValue]: "fontSize";
+    }) => {
+        fontSize: string | number | {
+            readonly [$$PropertyValue]: "fontSize";
+        };
+    };
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    w: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    h: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
 }>>;
 declare const Container: import("@stitches/react/types/styled-component").StyledComponent<"div", {
@@ -622,73 +716,167 @@ declare const Container: import("@stitches/react/types/styled-component").Styled
     transition: "transitions";
     zIndex: "zIndices";
 }, {
-    bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">) => {
-        backgroundColor: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">;
-    };
-    c: (value: import("@stitches/react/types/css-util").WithPropertyValue<"color">) => {
-        color: import("@stitches/react/types/css-util").WithPropertyValue<"color">;
-    };
-    r: (value: import("@stitches/react/types/css-util").WithScaleValue<"radii">) => {
-        borderRadius: import("@stitches/react/types/css-util").WithScaleValue<"radii">;
-    };
-    fs: (value: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">) => {
-        fontSize: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">;
-    };
-    size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    w: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    h: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    py: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    my: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    bg: (value: {
+        readonly [$$PropertyValue]: "backgroundColor";
+    }) => {
+        backgroundColor: {
+            readonly [$$PropertyValue]: "backgroundColor";
+        };
+    };
+    c: (value: {
+        readonly [$$PropertyValue]: "color";
+    }) => {
+        color: {
+            readonly [$$PropertyValue]: "color";
+        };
+    };
+    r: (value: {
+        readonly [$$ScaleValue]: "radii";
+    }) => {
+        borderRadius: {
+            readonly [$$ScaleValue]: "radii";
+        };
+    };
+    fs: (value: string | number | {
+        readonly [$$PropertyValue]: "fontSize";
+    }) => {
+        fontSize: string | number | {
+            readonly [$$PropertyValue]: "fontSize";
+        };
+    };
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    w: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    h: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
 }>>;
 declare const Overlay: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
@@ -967,73 +1155,167 @@ declare const Overlay: import("@stitches/react/types/styled-component").StyledCo
     transition: "transitions";
     zIndex: "zIndices";
 }, {
-    bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">) => {
-        backgroundColor: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">;
-    };
-    c: (value: import("@stitches/react/types/css-util").WithPropertyValue<"color">) => {
-        color: import("@stitches/react/types/css-util").WithPropertyValue<"color">;
-    };
-    r: (value: import("@stitches/react/types/css-util").WithScaleValue<"radii">) => {
-        borderRadius: import("@stitches/react/types/css-util").WithScaleValue<"radii">;
-    };
-    fs: (value: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">) => {
-        fontSize: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">;
-    };
-    size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    w: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    h: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    py: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    my: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    bg: (value: {
+        readonly [$$PropertyValue]: "backgroundColor";
+    }) => {
+        backgroundColor: {
+            readonly [$$PropertyValue]: "backgroundColor";
+        };
+    };
+    c: (value: {
+        readonly [$$PropertyValue]: "color";
+    }) => {
+        color: {
+            readonly [$$PropertyValue]: "color";
+        };
+    };
+    r: (value: {
+        readonly [$$ScaleValue]: "radii";
+    }) => {
+        borderRadius: {
+            readonly [$$ScaleValue]: "radii";
+        };
+    };
+    fs: (value: string | number | {
+        readonly [$$PropertyValue]: "fontSize";
+    }) => {
+        fontSize: string | number | {
+            readonly [$$PropertyValue]: "fontSize";
+        };
+    };
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    w: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    h: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
 }>>;
 declare const Info: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
@@ -1312,73 +1594,167 @@ declare const Info: import("@stitches/react/types/styled-component").StyledCompo
     transition: "transitions";
     zIndex: "zIndices";
 }, {
-    bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">) => {
-        backgroundColor: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">;
-    };
-    c: (value: import("@stitches/react/types/css-util").WithPropertyValue<"color">) => {
-        color: import("@stitches/react/types/css-util").WithPropertyValue<"color">;
-    };
-    r: (value: import("@stitches/react/types/css-util").WithScaleValue<"radii">) => {
-        borderRadius: import("@stitches/react/types/css-util").WithScaleValue<"radii">;
-    };
-    fs: (value: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">) => {
-        fontSize: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">;
-    };
-    size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    w: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    h: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    py: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    my: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    bg: (value: {
+        readonly [$$PropertyValue]: "backgroundColor";
+    }) => {
+        backgroundColor: {
+            readonly [$$PropertyValue]: "backgroundColor";
+        };
+    };
+    c: (value: {
+        readonly [$$PropertyValue]: "color";
+    }) => {
+        color: {
+            readonly [$$PropertyValue]: "color";
+        };
+    };
+    r: (value: {
+        readonly [$$ScaleValue]: "radii";
+    }) => {
+        borderRadius: {
+            readonly [$$ScaleValue]: "radii";
+        };
+    };
+    fs: (value: string | number | {
+        readonly [$$PropertyValue]: "fontSize";
+    }) => {
+        fontSize: string | number | {
+            readonly [$$PropertyValue]: "fontSize";
+        };
+    };
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    w: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    h: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
 }>>;
 declare const AttributeBox: import("@stitches/react/types/styled-component").StyledComponent<"div", {
@@ -1660,73 +2036,167 @@ declare const AttributeBox: import("@stitches/react/types/styled-component").Sty
     transition: "transitions";
     zIndex: "zIndices";
 }, {
-    bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">) => {
-        backgroundColor: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">;
-    };
-    c: (value: import("@stitches/react/types/css-util").WithPropertyValue<"color">) => {
-        color: import("@stitches/react/types/css-util").WithPropertyValue<"color">;
-    };
-    r: (value: import("@stitches/react/types/css-util").WithScaleValue<"radii">) => {
-        borderRadius: import("@stitches/react/types/css-util").WithScaleValue<"radii">;
-    };
-    fs: (value: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">) => {
-        fontSize: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">;
-    };
-    size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    w: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    h: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    py: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    my: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    bg: (value: {
+        readonly [$$PropertyValue]: "backgroundColor";
+    }) => {
+        backgroundColor: {
+            readonly [$$PropertyValue]: "backgroundColor";
+        };
+    };
+    c: (value: {
+        readonly [$$PropertyValue]: "color";
+    }) => {
+        color: {
+            readonly [$$PropertyValue]: "color";
+        };
+    };
+    r: (value: {
+        readonly [$$ScaleValue]: "radii";
+    }) => {
+        borderRadius: {
+            readonly [$$ScaleValue]: "radii";
+        };
+    };
+    fs: (value: string | number | {
+        readonly [$$PropertyValue]: "fontSize";
+    }) => {
+        fontSize: string | number | {
+            readonly [$$PropertyValue]: "fontSize";
+        };
+    };
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    w: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    h: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
 }>>;
 declare const AudioIndicator: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
@@ -2008,73 +2478,167 @@ declare const AudioIndicator: import("@stitches/react/types/styled-component").S
     transition: "transitions";
     zIndex: "zIndices";
 }, {
-    bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">) => {
-        backgroundColor: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">;
-    };
-    c: (value: import("@stitches/react/types/css-util").WithPropertyValue<"color">) => {
-        color: import("@stitches/react/types/css-util").WithPropertyValue<"color">;
-    };
-    r: (value: import("@stitches/react/types/css-util").WithScaleValue<"radii">) => {
-        borderRadius: import("@stitches/react/types/css-util").WithScaleValue<"radii">;
-    };
-    fs: (value: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">) => {
-        fontSize: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">;
-    };
-    size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    w: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    h: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    py: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    my: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    bg: (value: {
+        readonly [$$PropertyValue]: "backgroundColor";
+    }) => {
+        backgroundColor: {
+            readonly [$$PropertyValue]: "backgroundColor";
+        };
+    };
+    c: (value: {
+        readonly [$$PropertyValue]: "color";
+    }) => {
+        color: {
+            readonly [$$PropertyValue]: "color";
+        };
+    };
+    r: (value: {
+        readonly [$$ScaleValue]: "radii";
+    }) => {
+        borderRadius: {
+            readonly [$$ScaleValue]: "radii";
+        };
+    };
+    fs: (value: string | number | {
+        readonly [$$PropertyValue]: "fontSize";
+    }) => {
+        fontSize: string | number | {
+            readonly [$$PropertyValue]: "fontSize";
+        };
+    };
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    w: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    h: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
 }>>, {}, {
     allowMotion: string;
@@ -2352,73 +2916,167 @@ declare const AudioIndicator: import("@stitches/react/types/styled-component").S
     transition: "transitions";
     zIndex: "zIndices";
 }, {
-    bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">) => {
-        backgroundColor: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">;
-    };
-    c: (value: import("@stitches/react/types/css-util").WithPropertyValue<"color">) => {
-        color: import("@stitches/react/types/css-util").WithPropertyValue<"color">;
-    };
-    r: (value: import("@stitches/react/types/css-util").WithScaleValue<"radii">) => {
-        borderRadius: import("@stitches/react/types/css-util").WithScaleValue<"radii">;
-    };
-    fs: (value: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">) => {
-        fontSize: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">;
-    };
-    size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    w: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    h: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    py: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    my: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    bg: (value: {
+        readonly [$$PropertyValue]: "backgroundColor";
+    }) => {
+        backgroundColor: {
+            readonly [$$PropertyValue]: "backgroundColor";
+        };
+    };
+    c: (value: {
+        readonly [$$PropertyValue]: "color";
+    }) => {
+        color: {
+            readonly [$$PropertyValue]: "color";
+        };
+    };
+    r: (value: {
+        readonly [$$ScaleValue]: "radii";
+    }) => {
+        borderRadius: {
+            readonly [$$ScaleValue]: "radii";
+        };
+    };
+    fs: (value: string | number | {
+        readonly [$$PropertyValue]: "fontSize";
+    }) => {
+        fontSize: string | number | {
+            readonly [$$PropertyValue]: "fontSize";
+        };
+    };
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    w: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    h: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
 }>>;
 declare const FullScreenButton: import("@stitches/react/types/styled-component").StyledComponent<"button", {}, {
@@ -2697,73 +3355,167 @@ declare const FullScreenButton: import("@stitches/react/types/styled-component")
     transition: "transitions";
     zIndex: "zIndices";
 }, {
-    bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">) => {
-        backgroundColor: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">;
-    };
-    c: (value: import("@stitches/react/types/css-util").WithPropertyValue<"color">) => {
-        color: import("@stitches/react/types/css-util").WithPropertyValue<"color">;
-    };
-    r: (value: import("@stitches/react/types/css-util").WithScaleValue<"radii">) => {
-        borderRadius: import("@stitches/react/types/css-util").WithScaleValue<"radii">;
-    };
-    fs: (value: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">) => {
-        fontSize: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">;
-    };
-    size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    w: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    h: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    py: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    my: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    bg: (value: {
+        readonly [$$PropertyValue]: "backgroundColor";
+    }) => {
+        backgroundColor: {
+            readonly [$$PropertyValue]: "backgroundColor";
+        };
+    };
+    c: (value: {
+        readonly [$$PropertyValue]: "color";
+    }) => {
+        color: {
+            readonly [$$PropertyValue]: "color";
+        };
+    };
+    r: (value: {
+        readonly [$$ScaleValue]: "radii";
+    }) => {
+        borderRadius: {
+            readonly [$$ScaleValue]: "radii";
+        };
+    };
+    fs: (value: string | number | {
+        readonly [$$PropertyValue]: "fontSize";
+    }) => {
+        fontSize: string | number | {
+            readonly [$$PropertyValue]: "fontSize";
+        };
+    };
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    w: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    h: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
 }>>;
 declare const AvatarContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
@@ -3042,73 +3794,167 @@ declare const AvatarContainer: import("@stitches/react/types/styled-component").
     transition: "transitions";
     zIndex: "zIndices";
 }, {
-    bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">) => {
-        backgroundColor: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">;
-    };
-    c: (value: import("@stitches/react/types/css-util").WithPropertyValue<"color">) => {
-        color: import("@stitches/react/types/css-util").WithPropertyValue<"color">;
-    };
-    r: (value: import("@stitches/react/types/css-util").WithScaleValue<"radii">) => {
-        borderRadius: import("@stitches/react/types/css-util").WithScaleValue<"radii">;
-    };
-    fs: (value: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">) => {
-        fontSize: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">;
-    };
-    size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    w: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    h: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    py: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    my: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    bg: (value: {
+        readonly [$$PropertyValue]: "backgroundColor";
+    }) => {
+        backgroundColor: {
+            readonly [$$PropertyValue]: "backgroundColor";
+        };
+    };
+    c: (value: {
+        readonly [$$PropertyValue]: "color";
+    }) => {
+        color: {
+            readonly [$$PropertyValue]: "color";
+        };
+    };
+    r: (value: {
+        readonly [$$ScaleValue]: "radii";
+    }) => {
+        borderRadius: {
+            readonly [$$ScaleValue]: "radii";
+        };
+    };
+    fs: (value: string | number | {
+        readonly [$$PropertyValue]: "fontSize";
+    }) => {
+        fontSize: string | number | {
+            readonly [$$PropertyValue]: "fontSize";
+        };
+    };
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    w: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    h: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
 }>>, {}, {
     allowMotion: string;
@@ -3386,73 +4232,167 @@ declare const AvatarContainer: import("@stitches/react/types/styled-component").
     transition: "transitions";
     zIndex: "zIndices";
 }, {
-    bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">) => {
-        backgroundColor: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">;
-    };
-    c: (value: import("@stitches/react/types/css-util").WithPropertyValue<"color">) => {
-        color: import("@stitches/react/types/css-util").WithPropertyValue<"color">;
-    };
-    r: (value: import("@stitches/react/types/css-util").WithScaleValue<"radii">) => {
-        borderRadius: import("@stitches/react/types/css-util").WithScaleValue<"radii">;
-    };
-    fs: (value: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">) => {
-        fontSize: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">;
-    };
-    size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    w: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    h: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    py: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-    };
-    my: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    bg: (value: {
+        readonly [$$PropertyValue]: "backgroundColor";
+    }) => {
+        backgroundColor: {
+            readonly [$$PropertyValue]: "backgroundColor";
+        };
+    };
+    c: (value: {
+        readonly [$$PropertyValue]: "color";
+    }) => {
+        color: {
+            readonly [$$PropertyValue]: "color";
+        };
+    };
+    r: (value: {
+        readonly [$$ScaleValue]: "radii";
+    }) => {
+        borderRadius: {
+            readonly [$$ScaleValue]: "radii";
+        };
+    };
+    fs: (value: string | number | {
+        readonly [$$PropertyValue]: "fontSize";
+    }) => {
+        fontSize: string | number | {
+            readonly [$$PropertyValue]: "fontSize";
+        };
+    };
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    w: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    h: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
     };
 }>>;
 interface VideoTileType {