@xylabs/sdk-react 2.11.10 → 2.11.13

package/dist/node-esm/lib/Tracking/Drip/BaseEvent.d.ts

@@ -1,5 +1,5 @@
-declare type DripEvent<T extends Record<string, unknown>> = (string | T)[];
-declare class DripBaseEvent<T extends Record<string, unknown>> {
+export declare type DripEvent<T extends Record<string, unknown>> = (string | T)[];
+export declare class DripBaseEvent<T extends Record<string, unknown>> {
     name: string;
     param?: string;
     dcq: DripEvent<T>[];
@@ -9,4 +9,3 @@ declare class DripBaseEvent<T extends Record<string, unknown>> {
     private getDcq;
     private getDcs;
 }
-export { DripBaseEvent };

package/dist/node-esm/lib/Tracking/Drip/Data/Result.d.ts

@@ -1,7 +1,6 @@
-interface DripResult {
+export interface DripResult {
     anonymous?: boolean;
     error?: string;
     success?: boolean;
     visitor_uuid?: string;
 }
-export type { DripResult };

package/dist/node-esm/lib/Tracking/Drip/Data/index.d.ts

@@ -1,2 +1,2 @@
-import { DripIdentifyData } from './Identify';
-export type { DripIdentifyData };
+export * from './Identify';
+export * from './Result';

package/dist/node-esm/lib/Tracking/Drip/index.d.ts

@@ -1,5 +1,4 @@
-import { DripCustomEvent } from './CustomEvent';
-import { DripIdentifyData } from './Data';
-import { DripStandardEvents } from './StandardEvents';
-export { DripCustomEvent, DripStandardEvents };
-export type { DripIdentifyData };
+export * from './BaseEvent';
+export * from './CustomEvent';
+export * from './Data';
+export * from './StandardEvents';

package/dist/node-esm/lib/Tracking/Facebook/index.d.ts

@@ -1,9 +1,10 @@
-import { FacebookCustomEvent } from './CustomEvent';
-import { Fbq } from './Fbq';
+export * from './BaseEvent';
+export * from './CustomEvent';
+export * from './Fbq';
+export * from './StandardEvent';
 export * from './StandardEvents';
 export * from './UserEventHandler';
 export interface FacebookUserClick {
     elementName: string;
     elementType: string;
 }
-export { FacebookCustomEvent, Fbq };

package/dist/node-esm/lib/Tracking/Google/BaseEvent.d.ts

@@ -1,6 +1,6 @@
 import { Gtag } from './Gtag';
 import { Gtm } from './Gtm';
-declare class GoogleBaseEvent<T extends Record<string, unknown>> {
+export declare class GoogleBaseEvent<T extends Record<string, unknown>> {
     name: string;
     protected adwordConversionId?: string;
     constructor(name: string, adwordConversionId?: string);
@@ -10,4 +10,3 @@ declare class GoogleBaseEvent<T extends Record<string, unknown>> {
     gtag(): Gtag;
     gtm(): Gtm;
 }
-export { GoogleBaseEvent };

package/dist/node-esm/lib/Tracking/Google/StandardEvent.d.ts

@@ -1,4 +1,3 @@
 import { GoogleBaseEvent } from './BaseEvent';
-declare class GoogleStandardEvent<T extends Record<string, unknown>> extends GoogleBaseEvent<T> {
+export declare class GoogleStandardEvent<T extends Record<string, unknown>> extends GoogleBaseEvent<T> {
 }
-export { GoogleStandardEvent };

package/dist/node-esm/lib/Tracking/Google/index.d.ts

@@ -1,7 +1,7 @@
-import { GoogleBaseEvent } from './BaseEvent';
-import { GoogleCustomEvent } from './CustomEvent';
-import { Gtag } from './Gtag';
-import { Gtm } from './Gtm';
-import { GoogleUserEventHandler } from './UserEventHandler';
+export * from './BaseEvent';
+export * from './CustomEvent';
+export * from './Gtag';
+export * from './Gtm';
+export * from './StandardEvent';
 export * from './StandardEvents';
-export { GoogleBaseEvent, GoogleCustomEvent, GoogleUserEventHandler, Gtag, Gtm };
+export * from './UserEventHandler';

package/dist/node-esm/lib/Tracking/Reddit/index.d.ts

@@ -1,4 +1,5 @@
-import { RedditCustomEvent } from './CustomEvent';
-import { Rdt } from './Rdt';
-import { RedditStandardEvents } from './StandardEvents';
-export { Rdt, RedditCustomEvent, RedditStandardEvents };
+export * from './BaseEvent';
+export * from './CustomEvent';
+export * from './Rdt';
+export * from './StandardEvent';
+export * from './StandardEvents';

package/dist/node-esm/lib/Tracking/Referrer.d.ts

@@ -1,4 +1,4 @@
-declare class Referrer {
+export declare class Referrer {
     private static storageId;
     local: string;
     session: string;
@@ -10,4 +10,3 @@ declare class Referrer {
         session: string;
     } | undefined;
 }
-export { Referrer };

package/dist/node-esm/lib/Tracking/Snapchat/StandardEvent.d.ts

@@ -1,6 +1,5 @@
 import { SnapchatBaseEvent } from './BaseEvent';
 import { SnapchatStandardProperties } from './StandardProperties';
-declare class SnapchatStandardEvent<T extends SnapchatStandardProperties> extends SnapchatBaseEvent<T> {
+export declare class SnapchatStandardEvent<T extends SnapchatStandardProperties> extends SnapchatBaseEvent<T> {
     send(data: T): Promise<void>;
 }
-export { SnapchatStandardEvent };

package/dist/node-esm/lib/Tracking/Snapchat/index.d.ts

@@ -1,6 +1,6 @@
-import { SnapTr } from './Snaptr';
-import { SnapchatStandardProperties } from './StandardProperties';
-import { SnapchatUserProperties } from './UserProperties';
+export * from './BaseEvent';
+export * from './Snaptr';
+export * from './StandardEvent';
 export * from './StandardEvents';
-export { SnapTr };
-export type { SnapchatStandardProperties, SnapchatUserProperties };
+export * from './StandardProperties';
+export * from './UserProperties';

package/dist/node-esm/lib/Tracking/Tiktok/BaseEvent.d.ts

@@ -1,8 +1,7 @@
 import { Ttq } from './Ttq';
-declare class TiktokBaseEvent<T> {
+export declare class TiktokBaseEvent<T> {
     name: string;
     ttq: Ttq;
     constructor(name: string);
     send(_data: T): Promise<void>;
 }
-export { TiktokBaseEvent };

package/dist/node-esm/lib/Tracking/Tiktok/StandardEvent.d.ts

@@ -1,5 +1,4 @@
 import { TiktokBaseEvent } from './BaseEvent';
-declare class TiktokStandardEvent<T extends Record<string, unknown>> extends TiktokBaseEvent<T> {
+export declare class TiktokStandardEvent<T extends Record<string, unknown>> extends TiktokBaseEvent<T> {
     send(data: T): Promise<void>;
 }
-export { TiktokStandardEvent };

package/dist/node-esm/lib/Tracking/Tiktok/index.d.ts

@@ -1,4 +1,6 @@
-import { TiktokCustomEvent } from './CustomEvent';
-import { Ttq } from './Ttq';
+export * from './BaseEvent';
+export * from './CustomEvent';
+export * from './StandardEvent';
 export * from './StandardEvents';
-export { TiktokCustomEvent, Ttq };
+export * from './StandardProperties';
+export * from './Ttq';

package/dist/node-esm/lib/Tracking/index.d.ts

@@ -1,11 +1,10 @@
-import { Referrer } from './Referrer';
-import { XyoUserEventHandler } from './XyoUserEventHandler';
 export * from './Drip';
 export * from './Facebook';
 export * from './Google';
 export * from './Reddit';
+export * from './Referrer';
 export * from './Snapchat';
 export * from './Tapjoy';
 export * from './Tiktok';
 export * from './Xy';
-export { Referrer, XyoUserEventHandler };
+export * from './XyoUserEventHandler';

package/dist/node-esm/lib/index.d.ts

@@ -1,10 +1,8 @@
-import { ComponentSizes } from './ComponentSizes';
-import { getApiStage } from './getApiStage';
-import { isLocalhost } from './isLocalHost';
-import { useAsyncEffect } from './useAsyncEffect';
+export * from './ComponentSizes';
+export * from './getApiStage';
+export * from './isLocalHost';
 export * from './profile';
 export * from './safeLocalStorage';
 export * from './safeSessionStorage';
 export * from './Tracking';
-export { getApiStage, isLocalhost, useAsyncEffect };
-export type { ComponentSizes };
+export * from './useAsyncEffect';

package/dist/node-esm/lib/profile.d.ts

@@ -1,4 +1,4 @@
-interface ProfileResult {
+export interface ProfileResult {
     endTime: number;
     name: string;
     startTime: number;
@@ -6,4 +6,3 @@ interface ProfileResult {
 export declare const enableProfileLogging: (enabled: boolean) => void;
 export declare const profileResults: Array<ProfileResult>;
 export declare const profileBlock: (name: string, closure: () => Promise<unknown>) => Promise<void>;
-export {};

package/dist/node-esm/lib/useAsyncEffect.d.ts

@@ -1,5 +1,4 @@
-declare type EffectFuncWithMounted = (isMounted: () => boolean) => Promise<(() => void) | void>;
-declare type EffectFuncWithoutMounted = () => Promise<(() => void) | void>;
-declare type EffectFunc = EffectFuncWithMounted | EffectFuncWithoutMounted;
-declare function useAsyncEffect(effect: EffectFunc, inputs?: unknown[]): void;
-export { useAsyncEffect };
+export declare type EffectFuncWithMounted = (isMounted: () => boolean) => Promise<(() => void) | void>;
+export declare type EffectFuncWithoutMounted = () => Promise<(() => void) | void>;
+export declare type EffectFunc = EffectFuncWithMounted | EffectFuncWithoutMounted;
+export declare function useAsyncEffect(effect: EffectFunc, inputs?: unknown[]): void;

package/package.json

@@ -17,7 +17,7 @@
     "@mui/material": "^5.6.2",
     "@mui/styles": "^5.6.2",
     "@xylabs/pixel": "^1.3.7",
-    "@xylabs/sdk-js": "^2.4.5",
+    "@xylabs/sdk-js": "^2.4.8",
     "axios": "^0.26.1",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
@@ -34,10 +34,10 @@
     "@types/lodash": "^4.14.182",
     "@types/md5": "^2.3.2",
     "@types/numeral": "^2.0.2",
-    "@types/react": "^18.0.5",
-    "@types/react-dom": "^18.0.1",
+    "@types/react": "^18.0.6",
+    "@types/react-dom": "^18.0.2",
     "@types/react-helmet": "^6.1.5",
-    "@xylabs/eslint-config-react": "^2.1.4",
+    "@xylabs/eslint-config-react": "^2.1.5",
     "@xylabs/rollup-config": "^1.1.15",
     "@xylabs/ts-scripts": "^1.0.53",
     "@xylabs/tsconfig": "^1.0.13",
@@ -49,6 +49,7 @@
     "rimraf": "^3.0.2",
     "rollup": "^2.70.2",
     "ts-node": "^10.7.0",
+    "typedoc": "^0.22.15",
     "typescript": "^4.6.3"
   },
   "peerDependencies": {
@@ -60,6 +61,7 @@
     "react-dom": "^18"
   },
   "esm5": "dist/esm5/index.js",
+  "docs": "dist/docs.json",
   "exports": {
     ".": {
       "esm5": "./dist/esm5/index.js",
@@ -69,6 +71,9 @@
       },
       "default": "./dist/index.js"
     },
+    "./dist/docs.json": {
+      "default": "./dist/docs.json"
+    },
     "./package.json": "./package.json"
   },
   "homepage": "https://xylabs.com",
@@ -93,10 +98,12 @@
     "deploy": "yarn version patch -i && yarn build && yarn npm publish",
     "lint-pkg": "npmPkgJsonLint .",
     "start": "start-storybook -p 6006",
-    "test": "env TS_NODE_PROJECT=\"tsconfig.test.json\" mocha -r ts-node/register 'src/**/*.spec.ts'"
+    "test": "env TS_NODE_PROJECT=\"tsconfig.test.json\" mocha -r ts-node/register 'src/**/*.spec.ts'",
+    "build": "yarn xylabs-build && yarn gen:docs",
+    "gen:docs": "typedoc ./src/index.ts --json ./dist/docs.json --tsconfig ./tsconfig.build.json"
   },
   "sideEffects": false,
   "types": "dist/index.d.ts",
-  "version": "2.11.10",
+  "version": "2.11.13",
   "packageManager": "yarn@3.1.1"
 }

package/src/BoxlikeComponentProps.ts

@@ -1,9 +1,9 @@
 import { Margin } from './Margin'
 import { Padding } from './Padding'
 
-type FlexValue = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch'
+export type FlexValue = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch'
 
-interface BoxlikeComponentProps {
+export interface BoxlikeComponentProps {
   alignContent?: FlexValue
   alignItems?: FlexValue
   alignSelf?: FlexValue
@@ -39,5 +39,3 @@ interface BoxlikeComponentProps {
   style?: React.CSSProperties
   width?: number | string
 }
-
-export type { BoxlikeComponentProps }

package/src/BusyProps.ts

@@ -1,9 +1,9 @@
 import { CircularProgressProps, LinearProgressProps } from '@mui/material'
 
-type MaterialUIThemeColor = 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning'
-type BusyVariant = 'circular' | 'linear'
+export type MaterialUIThemeColor = 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning'
+export type BusyVariant = 'circular' | 'linear'
 
-interface BusyProps {
+export interface BusyProps {
   busy?: boolean
   busyOpacity?: string | number
   busyColor?: MaterialUIThemeColor
@@ -12,5 +12,3 @@ interface BusyProps {
   busyLinearProps?: LinearProgressProps
   busySize?: number
 }
-
-export type { BusyProps }

package/src/Margin.ts

@@ -1,3 +1 @@
-type Margin = string | number | undefined
-
-export type { Margin }
+export type Margin = string | number | undefined

package/src/Padding.ts

@@ -1,3 +1 @@
-type Padding = string | number | undefined
-
-export type { Padding }
+export type Padding = string | number | undefined

package/src/components/BasePage/BasePage.tsx

@@ -29,40 +29,18 @@ const BasePage: React.FC<BasePageProps> = ({
   const scrollToTopAnchorId = 'scroll-to-top-anchor'
 
   return (
-    <FlexCol
-      justifyContent="flex-start"
-      color={theme.palette.text.primary}
-      alignItems="stretch"
-      width="100%"
-      maxWidth="100vw"
-      minHeight="100vh"
-      {...props}
-    >
+    <FlexCol justifyContent="flex-start" color={theme.palette.text.primary} alignItems="stretch" width="100%" maxWidth="100vw" minHeight="100vh" {...props}>
       <ScrollToTop />
       <Helmet title={title}>{noindex ? <meta content="noindex" name="robots" /> : null}</Helmet>
       {scrollToTopButton ? <div id={scrollToTopAnchorId} /> : null}
       {hideAppBar ? null : appBar}
       {beta ? (
-        <FlexRow
-          margin={1}
-          position="absolute"
-          top={0}
-          left={0}
-          bgcolor="#cccccc88"
-          paddingX={1}
-          style={{ opacity: 0.5 }}
-        >
-          <Typography variant="body2">
-            Important: This page is a Beta page. It is possible that some information may not be correct.
-          </Typography>
+        <FlexRow margin={1} position="absolute" top={0} left={0} bgcolor="#cccccc88" paddingX={1} style={{ opacity: 0.5 }}>
+          <Typography variant="body2">Important: This page is a Beta page. It is possible that some information may not be correct.</Typography>
         </FlexRow>
       ) : null}
       {container ? (
-        <Container
-          style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1 }}
-          maxWidth={container}
-          disableGutters={disableGutters}
-        >
+        <Container style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1 }} maxWidth={container} disableGutters={disableGutters}>
           {children}
         </Container>
       ) : (

package/src/components/Breadcrumbs/BreadcrumbsEx.tsx

@@ -1,9 +1,9 @@
-import { Breadcrumbs, Link } from '@mui/material'
+import { Breadcrumbs, BreadcrumbsProps, Link } from '@mui/material'
 import { assertEx } from '@xylabs/sdk-js'
+import { ReactElement } from 'react'
 import { Link as RouteLink } from 'react-router-dom'
 
 import { FlexRow } from '../FlexBox'
-import { BreadcrumbsExProps } from './BreadcrumbsExProps'
 
 const getPartialPath = (pathParts: string[], index: number) => {
   const result = []
@@ -13,41 +13,27 @@ const getPartialPath = (pathParts: string[], index: number) => {
   return result.join('')
 }
 
-const BreadcrumbsEx: React.FC<BreadcrumbsExProps> = ({
-  titles,
-  path = document.location.pathname,
-  separator = '|',
-  logo,
-  children,
-  ...props
-}) => {
+export interface BreadcrumbsExProps extends BreadcrumbsProps {
+  logo?: string | ReactElement
+  path?: string
+  titles?: string[]
+}
+
+export const BreadcrumbsEx: React.FC<BreadcrumbsExProps> = ({ titles, path = document.location.pathname, separator = '|', logo, children, ...props }) => {
   const pathParts = path.split('/')
   //if the url has a trailing '/', remove the last part
   if (pathParts[pathParts.length - 1]?.length === 0) {
     pathParts.pop()
   }
 
-  assertEx(
-    pathParts.length - 1 === titles?.length,
-    `Path/Title length mismatch: ${JSON.stringify(titles)} with ${JSON.stringify(pathParts)}`
-  )
+  assertEx(pathParts.length - 1 === titles?.length, `Path/Title length mismatch: ${JSON.stringify(titles)} with ${JSON.stringify(pathParts)}`)
   return (
     <Breadcrumbs separator={separator} {...props}>
       {pathParts.map((_pathPart, index) => {
         const path = getPartialPath(pathParts, index)
         return (
-          <Link
-            title={index > 0 ? titles?.[index - 1] : 'COIN'}
-            color={index === pathParts.length - 1 ? 'textPrimary' : 'inherit'}
-            key={path}
-            component={RouteLink}
-            to={path}
-          >
-            {index > 0 ? (
-              titles?.[index - 1]
-            ) : (
-              <FlexRow>{typeof logo === 'string' ? <img src={logo} /> : logo}</FlexRow>
-            )}
+          <Link title={index > 0 ? titles?.[index - 1] : 'COIN'} color={index === pathParts.length - 1 ? 'textPrimary' : 'inherit'} key={path} component={RouteLink} to={path}>
+            {index > 0 ? titles?.[index - 1] : <FlexRow>{typeof logo === 'string' ? <img src={logo} /> : logo}</FlexRow>}
           </Link>
         )
       })}
@@ -55,5 +41,3 @@ const BreadcrumbsEx: React.FC<BreadcrumbsExProps> = ({
     </Breadcrumbs>
   )
 }
-
-export { BreadcrumbsEx }

package/src/components/Breadcrumbs/index.ts

@@ -1,3 +1 @@
-import { BreadcrumbsEx } from './BreadcrumbsEx'
-
-export { BreadcrumbsEx }
+export * from './BreadcrumbsEx'

package/src/components/ButtonEx/ButtonExBase.tsx

@@ -8,14 +8,7 @@ import { ButtonExProps } from './ButtonExProps'
 
 const ButtonExBase: React.FC<ButtonExProps> = (props) => {
   const theme = useTheme()
-  const {
-    busy,
-    busyVariant = 'linear',
-    busyOpacity,
-    onClick,
-    children,
-    ...rootProps
-  } = mergeBoxlikeStyles<ButtonExProps>(theme, props)
+  const { busy, busyVariant = 'linear', busyOpacity, onClick, children, ...rootProps } = mergeBoxlikeStyles<ButtonExProps>(theme, props)
 
   const localOnClick = (event: MouseEvent<HTMLButtonElement>) => {
     if (!busy) {
@@ -26,9 +19,7 @@ const ButtonExBase: React.FC<ButtonExProps> = (props) => {
   return (
     <Button onClick={localOnClick} {...rootProps}>
       {busy && busyVariant === 'linear' ? <BusyLinearProgress rounded opacity={busyOpacity ?? 0} /> : null}
-      {busy && busyVariant === 'circular' ? (
-        <BusyCircularProgress rounded size={24} opacity={busyOpacity ?? 0.5} />
-      ) : null}
+      {busy && busyVariant === 'circular' ? <BusyCircularProgress rounded size={24} opacity={busyOpacity ?? 0.5} /> : null}
       {children}
     </Button>
   )

package/src/components/CookieConsent/CookieConsent.tsx

@@ -2,23 +2,12 @@ import { CookieConsentLoader, useCookieConsent } from '../../contexts'
 import { CookieConsentBody } from './CookieConsentBody'
 import { CookieConsentProps } from './CookieConsentProps'
 
-const CookieConsent: React.FC<CookieConsentProps> = (props) => {
+export const CookieConsent: React.FC<CookieConsentProps> = (props) => {
   const { storageName } = useCookieConsent()
 
   const Inner: React.FC = () => {
     const { accepted } = useCookieConsent()
-    return accepted ? null : (
-      <CookieConsentBody
-        background
-        paper
-        position="fixed"
-        bottom={0}
-        maxWidth="100vw"
-        width="100%"
-        zIndex={1000}
-        {...props}
-      />
-    )
+    return accepted ? null : <CookieConsentBody background paper position="fixed" bottom={0} maxWidth="100vw" width="100%" zIndex={1000} {...props} />
   }
 
   //if not inside a context, make a context
@@ -32,5 +21,3 @@ const CookieConsent: React.FC<CookieConsentProps> = (props) => {
 
   return <Inner />
 }
-
-export { CookieConsent }

package/src/components/CookieConsent/CookieConsentBody.tsx

@@ -6,7 +6,7 @@ import { ButtonEx } from '../ButtonEx'
 import { FlexRow } from '../FlexBox'
 import { CookieConsentProps } from './CookieConsentProps'
 
-const CookieConsentBody: React.FC<CookieConsentProps> = ({ acceptOnScroll, acceptOnTimer = 0, onAccept, ...props }) => {
+export const CookieConsentBody: React.FC<CookieConsentProps> = ({ acceptOnScroll, acceptOnTimer = 0, onAccept, ...props }) => {
   const { accepted, setAccepted, storageName } = useCookieConsent()
 
   const onScroll = () => {
@@ -70,5 +70,3 @@ const CookieConsentBody: React.FC<CookieConsentProps> = ({ acceptOnScroll, accep
     </FlexRow>
   )
 }
-
-export { CookieConsentBody }

package/src/components/CookieConsent/{CookieConsentProps.ts → CookieConsentProps.tsx}

@@ -1,9 +1,7 @@
 import { FlexBoxProps } from '../FlexBox'
 
-interface CookieConsentProps extends FlexBoxProps {
+export interface CookieConsentProps extends FlexBoxProps {
   acceptOnScroll?: boolean
   acceptOnTimer?: number
   onAccept?: (accepted: boolean) => void
 }
-
-export type { CookieConsentProps }

package/src/components/CookieConsent/index.ts

@@ -1,4 +1,3 @@
-import { CookieConsent } from './CookieConsent'
-import { CookieConsentBody } from './CookieConsentBody'
-
-export { CookieConsent, CookieConsentBody }
+export * from './CookieConsent'
+export * from './CookieConsentBody'
+export * from './CookieConsentProps'

package/src/components/CoverProgress.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { ErrorsViewer } from './Errors'
 import { FlexGrowRow } from './FlexBox'
 
-interface Props {
+export interface CoverProgressProps {
   errors?: Error[]
   onRetry?: () => void
   opacity?: number | string
@@ -12,29 +12,15 @@ interface Props {
   paper?: boolean
 }
 
-const CoverProgress: React.FC<Props> = (props) => {
+export const CoverProgress: React.FC<CoverProgressProps> = (props) => {
   const { paper = true, open, opacity = 0.25, errors, onRetry } = props
   const theme = useTheme()
   if (open) {
     return (
-      <FlexGrowRow
-        position="absolute"
-        margin={-1}
-        top={0}
-        bottom={0}
-        right={0}
-        left={0}
-        bgcolor={paper ? theme.palette.background.paper : theme.palette.background.default}
-      >
-        {(errors?.length ?? 0) === 0 ? (
-          <CircularProgress style={{ opacity }} />
-        ) : (
-          <ErrorsViewer margin={1} errors={errors} onRetry={onRetry} />
-        )}
+      <FlexGrowRow position="absolute" margin={-1} top={0} bottom={0} right={0} left={0} bgcolor={paper ? theme.palette.background.paper : theme.palette.background.default}>
+        {(errors?.length ?? 0) === 0 ? <CircularProgress style={{ opacity }} /> : <ErrorsViewer margin={1} errors={errors} onRetry={onRetry} />}
       </FlexGrowRow>
     )
   }
   return null
 }
-
-export { CoverProgress }

package/src/components/EthAccount/EthAccount.tsx

@@ -54,12 +54,7 @@ const EthAccount: React.FC<EthAccountProps> = ({
         {icon && address ? <Identicon size={iconSize} value={address?.toHex()} /> : null}
         {iconOnly ? null : (
           <FlexRow>
-            <Typography
-              marginLeft={icon ? 1 : 0}
-              variant="body1"
-              fontFamily={fontFamily}
-              visibility={address ? 'inherit' : 'hidden'}
-            >
+            <Typography marginLeft={icon ? 1 : 0} variant="body1" fontFamily={fontFamily} visibility={address ? 'inherit' : 'hidden'}>
               {testToDisplay}
             </Typography>
             {address ? null : (

package/src/components/Experiments/Experiment.tsx

@@ -5,9 +5,7 @@ export interface ExperimentProps {
   key: string
 }
 
-const Experiment: React.FC<PropsWithChildren<ExperimentProps>> = (props) => {
+export const Experiment: React.FC<PropsWithChildren<ExperimentProps>> = (props) => {
   const { children } = props
   return <>{children}</>
 }
-
-export { Experiment }

package/src/components/Experiments/Experiments.tsx

@@ -40,11 +40,7 @@ const makeChildrenArray = (children: ReactElement<ExperimentProps>[] | ReactElem
 }
 
 const buildLocalStorageKey = (localStorageProp: boolean | string) => {
-  return localStorageProp === true
-    ? defaultLocalStorageKey
-    : typeof localStorageProp === 'string'
-    ? localStorageProp ?? defaultLocalStorageKey
-    : ''
+  return localStorageProp === true ? defaultLocalStorageKey : typeof localStorageProp === 'string' ? localStorageProp ?? defaultLocalStorageKey : ''
 }
 
 const calcTotalWeight = (childList: ReactElement<ExperimentProps>[]) => {