@maestro_io/maestro-web-sdk 4.0.0-beta.2 → 4.0.0-beta.4

package/dist/src/modules/fantasy/view/MatchupSingle/SingleAthleteCard/SingleAthleteCard.d.ts

@@ -4,7 +4,7 @@ import React from 'react';
 import './SingleAthleteCard.styles.css';
 import { MatchupSingleRoster } from '@/modules/fantasy/view-model/FantasyViewModel';
 declare const _default: {
-    new (props?: (MatchupSingleRoster & WithFocusableProps) | undefined, context?: any): {
+    new (props: (MatchupSingleRoster & WithFocusableProps) | Readonly<MatchupSingleRoster & WithFocusableProps>): {
         state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState;
         navigation: import("../../../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
@@ -24,20 +24,65 @@ declare const _default: {
         componentDidMount(): void;
         componentDidUpdate(): void;
         componentWillUnmount(): void;
-        render(): React.ReactElement<MatchupSingleRoster & WithFocusableProps>;
-        setState<K extends keyof import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: MatchupSingleRoster & WithFocusableProps) => import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>) | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>, callback?: (() => any) | undefined): void;
-        forceUpdate(callBack?: (() => any) | undefined): void;
-        props: Readonly<{
-            children?: React.ReactNode;
-        }> & Readonly<MatchupSingleRoster & WithFocusableProps>;
+        render(): React.ReactElement<MatchupSingleRoster & WithFocusableProps, string | React.JSXElementConstructor<any>>;
         context: any;
+        setState<K extends keyof import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<MatchupSingleRoster & WithFocusableProps>) => import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<MatchupSingleRoster & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
         refs: {
             [key: string]: React.ReactInstance;
         };
+        shouldComponentUpdate?(nextProps: Readonly<MatchupSingleRoster & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<MatchupSingleRoster & WithFocusableProps>, prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
         componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<MatchupSingleRoster & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<MatchupSingleRoster & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<MatchupSingleRoster & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<MatchupSingleRoster & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    new (props: MatchupSingleRoster & WithFocusableProps, context: any): {
+        state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../../../external/spatial-navigation/spatialNavigation").default;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: import("../../../../../external/spatial-navigation/utils").Direction, details?: Record<string, any>) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: import("../../../../../external/spatial-navigation/utils").Details) => void;
+        onEnterReleaseHandler: () => void;
+        onBackPressHandler: (details: import("../../../../../external/spatial-navigation/utils").Details) => void;
+        onArrowPressHandler: (direction: import("../../../../../external/spatial-navigation/utils").Direction, details: import("../../../../../external/spatial-navigation/utils").Details) => boolean | void;
+        onBecameFocusedHandler: (layout: import("../../../../../external/spatial-navigation/utils").Layout, details: import("../../../../../external/spatial-navigation/utils").Details) => void;
+        onBecameBlurredHandler: (layout: import("../../../../../external/spatial-navigation/utils").Layout, details: import("../../../../../external/spatial-navigation/utils").Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactElement<MatchupSingleRoster & WithFocusableProps, string | React.JSXElementConstructor<any>>;
+        context: any;
+        setState<K extends keyof import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<MatchupSingleRoster & WithFocusableProps>) => import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<MatchupSingleRoster & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
         shouldComponentUpdate?(nextProps: Readonly<MatchupSingleRoster & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<MatchupSingleRoster & WithFocusableProps>, prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<MatchupSingleRoster & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<MatchupSingleRoster & WithFocusableProps>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<MatchupSingleRoster & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<MatchupSingleRoster & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
     };
     contextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
@@ -45,5 +90,6 @@ declare const _default: {
     childContextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
     };
+    contextType?: React.Context<any> | undefined;
 };
 export default _default;

package/dist/src/modules/fantasy/view/PromoView/PromoView.d.ts

@@ -7,7 +7,7 @@ type Props = {
     item: PromoFantasyItem;
 };
 declare const _default: {
-    new (props?: (Props & WithFocusableProps) | undefined, context?: any): {
+    new (props: (Props & WithFocusableProps) | Readonly<Props & WithFocusableProps>): {
         state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState;
         navigation: import("../../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
@@ -27,20 +27,65 @@ declare const _default: {
         componentDidMount(): void;
         componentDidUpdate(): void;
         componentWillUnmount(): void;
-        render(): React.ReactElement<Props & WithFocusableProps>;
-        setState<K extends keyof import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Props & WithFocusableProps) => import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>) | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>, callback?: (() => any) | undefined): void;
-        forceUpdate(callBack?: (() => any) | undefined): void;
-        props: Readonly<{
-            children?: React.ReactNode;
-        }> & Readonly<Props & WithFocusableProps>;
+        render(): React.ReactElement<Props & WithFocusableProps, string | React.JSXElementConstructor<any>>;
         context: any;
+        setState<K extends keyof import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<Props & WithFocusableProps>) => import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Props & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
         refs: {
             [key: string]: React.ReactInstance;
         };
+        shouldComponentUpdate?(nextProps: Readonly<Props & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Props & WithFocusableProps>, prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
         componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<Props & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Props & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Props & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Props & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    new (props: Props & WithFocusableProps, context: any): {
+        state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../../external/spatial-navigation/spatialNavigation").default;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: import("../../../../external/spatial-navigation/utils").Direction, details?: Record<string, any>) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        onEnterReleaseHandler: () => void;
+        onBackPressHandler: (details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        onArrowPressHandler: (direction: import("../../../../external/spatial-navigation/utils").Direction, details: import("../../../../external/spatial-navigation/utils").Details) => boolean | void;
+        onBecameFocusedHandler: (layout: import("../../../../external/spatial-navigation/utils").Layout, details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        onBecameBlurredHandler: (layout: import("../../../../external/spatial-navigation/utils").Layout, details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactElement<Props & WithFocusableProps, string | React.JSXElementConstructor<any>>;
+        context: any;
+        setState<K extends keyof import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<Props & WithFocusableProps>) => import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Props & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
         shouldComponentUpdate?(nextProps: Readonly<Props & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Props & WithFocusableProps>, prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Props & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Props & WithFocusableProps>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<Props & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Props & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
     };
     contextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
@@ -48,5 +93,6 @@ declare const _default: {
     childContextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
     };
+    contextType?: React.Context<any> | undefined;
 };
 export default _default;

package/dist/src/modules/hello-world/HelloWorldImage.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const HelloWorldImage: () => React.JSX.Element;
+export default HelloWorldImage;

package/dist/src/modules/hello-world/HelloWorldView.d.ts

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+import './HelloWorldView.styles.css';
+import { PanelInfo } from '@/view-models/PanelManagerViewModel';
+type State = {
+    unlistedPanels: PanelInfo[];
+};
+declare class HelloWorldView extends Component<{}, State> {
+    constructor(props: {});
+    render(): React.JSX.Element;
+}
+export default HelloWorldView;

package/dist/src/modules/hello-world/HelloWorldView.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import './HelloWorldView.styles.css';
+import SDK from '@/index';
+class HelloWorldView extends Component {
+    constructor(props) {
+        super(props);
+        const vm = SDK.getMaestroEventViewModel().panelManagerViewModel;
+        this.state = {
+            unlistedPanels: vm.getUnlistedPanels(),
+        };
+    }
+    render() {
+        const { unlistedPanels } = this.state;
+        return (React.createElement("div", { className: "hello-world-view" },
+            React.createElement("div", { className: "hello-world-mascot" },
+                React.createElement("div", { className: "speech-bubble" }, "HI!"),
+                React.createElement("div", { className: "mascot-placeholder" })),
+            React.createElement("h1", { className: "T70" }, "HELLO, WORLD!"),
+            React.createElement("p", { className: "T20 subtitle" },
+                "Panel component has been",
+                React.createElement("br", null),
+                "installed correctly."),
+            unlistedPanels.length > 0 && (React.createElement(React.Fragment, null,
+                React.createElement("p", { className: "T10 unsupported-text" },
+                    "However, some panels currently active on this",
+                    React.createElement("br", null),
+                    "channel aren't supported on this device:"),
+                React.createElement("ul", { className: "unsupported-list" }, unlistedPanels.map((panel) => (React.createElement("li", { key: panel.type, className: "T10" },
+                    React.createElement("span", { className: "panel-icon" }, "\uFFFD"),
+                    panel.title))))))));
+    }
+}
+export default HelloWorldView;

package/dist/src/modules/hello-world/index.d.ts

@@ -0,0 +1,2 @@
+import HelloWorldView from './HelloWorldView';
+export default HelloWorldView;

package/dist/src/modules/hello-world/index.js

@@ -0,0 +1,2 @@
+import HelloWorldView from './HelloWorldView';
+export default HelloWorldView;

package/dist/src/modules/key-plays/view/KeyPlayCardScoreTagView.d.ts

@@ -5,5 +5,5 @@ export default class ScoreCard extends React.Component<{
     homeTeamName: string;
     awayTeamName: string;
 }, {}> {
-    render(): React.JSX.Element | null;
+    render(): JSX.Element | null;
 }

package/dist/src/modules/key-plays/view/KeyPlayCardView.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="prop-types" />
 import IKeyPlay, { KeyPlayLoadFailureStatus } from '../interfaces/IKeyPlays';
 import './KeyPlayCardView.styles.css';
 import React from 'react';
@@ -21,18 +22,18 @@ export declare class KeyPlayCardView extends React.Component<KeyPlayCardViewProp
     componentDidMount(): void;
     componentWillUnmount(): void;
     onLoad: () => void;
-    renderImage: () => React.JSX.Element | null;
-    render(): React.JSX.Element;
+    renderImage: () => JSX.Element | null;
+    render(): JSX.Element;
 }
 export default class KeyPlayCard extends React.Component<Omit<KeyPlayCardViewProps, 'setRef'> & WithFocusableProps> {
     context: import("@/components/core/ScrollableContainer/ScrollableContainer").ScrollableContainerContextType;
     static contextTypes: {
-        refsMap: React.Requireable<any>;
-        setRef: React.Requireable<any>;
-        scrollToFocusedElement: React.Requireable<any>;
+        refsMap: import("prop-types").Requireable<(HTMLElement | null | undefined)[]>;
+        setRef: import("prop-types").Requireable<(...args: any[]) => any>;
+        scrollToFocusedElement: import("prop-types").Requireable<(...args: any[]) => any>;
     };
     handleLeftPressed: (d: Direction) => void;
     onBecameFocused: (layout: Layout) => void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export {};

package/dist/src/modules/key-plays/view/KeyPlayCardView.js

@@ -5,6 +5,7 @@ import SDK from '@/index';
 import Icon from '@/components/atoms/SvgIcon';
 import React from 'react';
 import { withFocusable, } from '@/external/spatial-navigation';
+import ScoreCard from './KeyPlayCardScoreTagView';
 import FocusableItem from '@/components/core/ScrollableContainer/FocusableItem';
 import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from '@/components/core/ScrollableContainer/ScrollableContainer';
 export class KeyPlayCardView extends React.Component {
@@ -35,16 +36,16 @@ export class KeyPlayCardView extends React.Component {
             configurable: true,
             writable: true,
             value: () => {
-                const { playerImageUrl, teamImageUrl, thumbnailImageUrl } = this.props;
+                const { playerImageUrl, teamImageUrl, thumbnailImageUrl, isScoring, } = this.props;
                 if (playerImageUrl) {
                     return (React.createElement(Image, { src: playerImageUrl, crossOrigin: "anonymous", alt: "Key Play Player Image", className: "cardImage", onLoad: this.onLoad, style: {
                             display: this.state.imageLoaded ? 'block' : 'none',
-                        } }));
+                        }, "data-has-score": isScoring }));
                 }
                 if (teamImageUrl) {
                     return (React.createElement(Image, { src: teamImageUrl, crossOrigin: "anonymous", alt: "Key Play Team Image", className: "cardImage", onLoad: this.onLoad, style: {
                             display: this.state.imageLoaded ? 'block' : 'none',
-                        } }));
+                        }, "data-has-score": isScoring }));
                 }
                 if (thumbnailImageUrl) {
                     return (React.createElement(Image, { src: thumbnailImageUrl, crossOrigin: "anonymous", alt: "Key Play Thumbnail Image", className: "cardImage", onLoad: this.onLoad, style: {
@@ -77,14 +78,7 @@ export class KeyPlayCardView extends React.Component {
         }
     }
     render() {
-        const { clipID, description, isPlaying, playbackProgress, 
-        // isScoring,
-        focused,
-        // awayTeamScore,
-        // homeTeamScore,
-        // homeTeamName,
-        // awayTeamName,
-         } = this.props;
+        const { clipID, description, isPlaying, playbackProgress, isScoring, focused, awayTeamScore, homeTeamScore, homeTeamName, awayTeamName, } = this.props;
         const { failedClip } = this.state;
         return (React.createElement("div", { className: "key-play-card focus-ring", id: clipID, "data-focused": focused },
             React.createElement("div", { className: "key-play-card-content" },
@@ -93,6 +87,7 @@ export class KeyPlayCardView extends React.Component {
                 React.createElement("div", { className: "text-content T05_ALT" },
                     React.createElement("div", { className: "multi-line" }, description))),
             isPlaying && playbackProgress !== null && (React.createElement("progress", { value: playbackProgress, max: "1" })),
+            isScoring && (React.createElement(ScoreCard, { awayTeamScore: awayTeamScore, homeTeamScore: homeTeamScore, homeTeamName: homeTeamName, awayTeamName: awayTeamName })),
             failedClip === 'recentFailure' && (React.createElement("div", { className: "error-state" },
                 React.createElement("div", { className: "error-state-inner" },
                     React.createElement("div", { className: "error-state-text" },

package/dist/src/modules/key-plays/view/KeyPlayErrorStateView.d.ts

@@ -8,6 +8,6 @@ type Props = {
 };
 declare class KeyPlayErrorStateView extends React.Component<Props, {}> {
     onArrowPress: (d: Direction) => void;
-    render(): React.JSX.Element | null;
+    render(): JSX.Element | null;
 }
 export default KeyPlayErrorStateView;

package/dist/src/modules/key-plays/view/KeyPlaysView.d.ts

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import './KeyPlaysView.styles.css';
 import { KeyPlaysErrorState } from '../interfaces/IKeyPlays';
 import KeyPlaysViewModel, { KeyPlayItem } from '../view-model/KeyPlaysViewModel';
@@ -19,7 +19,7 @@ export declare class KeyPlays extends Component<{}, IKeyPlaysState> {
     componentDidMount(): void;
     componentWillUnmount(): void;
     private handlePlayClip;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 interface KeyPlaysWithErrorStateState {
     errorState: KeyPlaysErrorState;
@@ -32,6 +32,6 @@ export default class KeyPlaysWithErrorState extends Component<{}, KeyPlaysWithEr
     componentDidMount(): void;
     componentWillUnmount(): void;
     private handleRetry;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export {};

package/dist/src/modules/shop/mocks.js

@@ -333,6 +333,7 @@ export const MOCK_SHOP_EMPTY_RESPONSE = {
                 detail: {
                     disclaimer: 'Visit shop.espn.com to explore more products and exclusive offers.',
                     title: 'Shop the ESPN Store',
+                    backgroundImage: 'https://placedog.net/568x704',
                 },
             },
         },

package/dist/src/modules/shop/view/ProductDetailView/ProductDetailView.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import './ProductDetailView.styles.css';
 import { IShopBrowseCard, IShopProduct } from '../../types';
 import { WithFocusableProps } from '@/external/spatial-navigation';
@@ -6,5 +5,5 @@ export type ProductDetailViewProps = {
     product: IShopProduct | IShopBrowseCard;
     focusKey: string;
 };
-declare const ProductDetailView: (props: ProductDetailViewProps & WithFocusableProps) => React.JSX.Element;
+declare const ProductDetailView: (props: ProductDetailViewProps & WithFocusableProps) => JSX.Element;
 export default ProductDetailView;

package/dist/src/modules/shop/view/ProductDetailView/ProductDetailView.js

@@ -41,7 +41,11 @@ const ProductDetail = (props) => {
             }),
         } },
         React.createElement("div", { className: "product-detail-title T70" }, detail?.title || 'Shop the look'),
-        React.createElement("div", { className: "product-detail-product" }, isShopProduct(product) ? (React.createElement(ProductSummaryCard, { product: product, focusable: false })) : (React.createElement(BrowseCard, { browseCard: product, focusable: false }))),
+        React.createElement("div", { className: "product-detail-product" }, isShopProduct(product) ? (React.createElement(ProductSummaryCard, { product: product, focusable: false })) : (React.createElement(BrowseCard, { browseCard: {
+                ...product,
+                name: undefined,
+                caption: product.detail?.description,
+            }, focusable: false }))),
         detail?.qrCode && (React.createElement("div", { className: "product-detail-qr" },
             React.createElement(Image, { src: detail.qrCode, alt: "QR Code", className: "product-detail-qr-image" }))),
         React.createElement("div", { className: "product-detail-instruction T04" }, detail?.link?.text),

package/dist/src/modules/shop/view/ShopView.d.ts

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import './ShopView.styles.css';
 import { Direction } from '@/external/spatial-navigation/utils';
 import ShopViewModel, { ShopErrorState } from '../view-model/ShopViewModel';
@@ -29,7 +29,7 @@ declare class ShopView extends Component<{}, State> {
     openItemDetail: (selectedItem: IShopProduct | IShopBrowseCard, selectedShopSection: IShopSection, selectedItemFocusKey: string) => void;
     closeProductDetail: () => void;
     trackPromoEnterPress: () => void;
-    renderContent: () => React.JSX.Element | React.JSX.Element[];
-    render(): React.JSX.Element;
+    renderContent: () => JSX.Element | JSX.Element[];
+    render(): JSX.Element;
 }
 export default ShopView;

package/dist/src/modules/shop/view/components/BrowseCard/BrowseCard.d.ts

@@ -7,10 +7,10 @@ export type BrowseCardProps = {
     browseCard: IShopBrowseCard;
 };
 export declare class BrowseCardView extends React.Component<BrowseCardProps & WithFocusableProps> {
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 declare const _default: {
-    new (props?: (BrowseCardProps & WithFocusableProps) | undefined, context?: any): {
+    new (props: (BrowseCardProps & WithFocusableProps) | Readonly<BrowseCardProps & WithFocusableProps>): {
         state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState;
         navigation: import("../../../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
@@ -30,20 +30,65 @@ declare const _default: {
         componentDidMount(): void;
         componentDidUpdate(): void;
         componentWillUnmount(): void;
-        render(): React.ReactElement<BrowseCardProps & WithFocusableProps>;
-        setState<K extends keyof import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: BrowseCardProps & WithFocusableProps) => import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>) | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>, callback?: (() => any) | undefined): void;
-        forceUpdate(callBack?: (() => any) | undefined): void;
-        props: Readonly<{
-            children?: React.ReactNode;
-        }> & Readonly<BrowseCardProps & WithFocusableProps>;
+        render(): React.ReactElement<BrowseCardProps & WithFocusableProps, string | React.JSXElementConstructor<any>>;
         context: any;
+        setState<K extends keyof import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<BrowseCardProps & WithFocusableProps>) => import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<BrowseCardProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
         refs: {
             [key: string]: React.ReactInstance;
         };
+        shouldComponentUpdate?(nextProps: Readonly<BrowseCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<BrowseCardProps & WithFocusableProps>, prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
         componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<BrowseCardProps & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<BrowseCardProps & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<BrowseCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<BrowseCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    new (props: BrowseCardProps & WithFocusableProps, context: any): {
+        state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../../../external/spatial-navigation/spatialNavigation").default;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: import("../../../../../external/spatial-navigation/utils").Direction, details?: Record<string, any>) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: import("../../../../../external/spatial-navigation/utils").Details) => void;
+        onEnterReleaseHandler: () => void;
+        onBackPressHandler: (details: import("../../../../../external/spatial-navigation/utils").Details) => void;
+        onArrowPressHandler: (direction: import("../../../../../external/spatial-navigation/utils").Direction, details: import("../../../../../external/spatial-navigation/utils").Details) => boolean | void;
+        onBecameFocusedHandler: (layout: import("../../../../../external/spatial-navigation/utils").Layout, details: import("../../../../../external/spatial-navigation/utils").Details) => void;
+        onBecameBlurredHandler: (layout: import("../../../../../external/spatial-navigation/utils").Layout, details: import("../../../../../external/spatial-navigation/utils").Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactElement<BrowseCardProps & WithFocusableProps, string | React.JSXElementConstructor<any>>;
+        context: any;
+        setState<K extends keyof import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<BrowseCardProps & WithFocusableProps>) => import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<BrowseCardProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
         shouldComponentUpdate?(nextProps: Readonly<BrowseCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<BrowseCardProps & WithFocusableProps>, prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<BrowseCardProps & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<BrowseCardProps & WithFocusableProps>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<BrowseCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<BrowseCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
     };
     contextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
@@ -51,5 +96,6 @@ declare const _default: {
     childContextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
     };
+    contextType?: React.Context<any> | undefined;
 };
 export default _default;

package/dist/src/modules/shop/view/components/BrowseCard/BrowseCard.js

@@ -15,7 +15,7 @@ export class BrowseCardView extends React.Component {
                 backgroundClip: 'padding-box',
             } },
             React.createElement("div", { className: "browse-card-content" },
-                React.createElement("div", { className: "browse-card-tagline T20 FONT_BOLD" }, name || 'Want more?'),
+                !!name && (React.createElement("div", { className: "browse-card-tagline T20 FONT_BOLD" }, name)),
                 React.createElement("div", { className: "browse-card-caption T10" }, caption || 'Browse all merch')),
             image?.href && (React.createElement(Image, { src: image.href, width: 72, height: 72, alt: name || 'Logo', className: "browse-card-logo-image" }))));
     }