@maestro_io/maestro-web-sdk 2.1.1 → 2.1.3

package/dist/modules/stats/view/RecentGames/index.d.ts

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

package/dist/modules/stats/view/RecentGames/index.js

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

package/dist/modules/stats/view/StatsQRCode/StatsQRCodeView.d.ts

@@ -0,0 +1,52 @@
+/// <reference types="prop-types" />
+import React from 'react';
+import './StatsQRCodeView.styles.css';
+import { WithFocusableProps } from '@/external/spatial-navigation';
+import { StatsPromotion } from '../../interfaces/IStats';
+export interface StatsQRCodeViewProps extends WithFocusableProps {
+    promotion: StatsPromotion;
+}
+declare const _default: {
+    new (props?: (StatsQRCodeViewProps & WithFocusableProps) | undefined, 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<StatsQRCodeViewProps & 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: StatsQRCodeViewProps & 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<StatsQRCodeViewProps & WithFocusableProps>;
+        context: any;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextContext: any): void;
+        shouldComponentUpdate?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentWillUpdate?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    contextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+    childContextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+};
+export default _default;

package/dist/modules/stats/view/StatsQRCode/StatsQRCodeView.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import './StatsQRCodeView.styles.css';
+import { withFocusable, } from '@/external/spatial-navigation';
+import FocusableItem from '@/components/core/ScrollableContainer/FocusableItem';
+import Image from '@/components/atoms/Image';
+const StatsQRCodeView = (props) => {
+    const { focused, promotion } = props;
+    return (React.createElement(FocusableItem, null,
+        React.createElement("div", { className: "stats-qr-code-view focus-ring", "data-focused": focused, style: {
+                backgroundImage: `url(${promotion.backgroundImage})`,
+            } },
+            React.createElement("table", { className: "stats-qr-table" },
+                React.createElement("tbody", null,
+                    React.createElement("tr", null,
+                        React.createElement("td", { className: "stats-qr-header-cell" },
+                            React.createElement("table", { className: "stats-qr-logo-table" },
+                                React.createElement("tbody", null,
+                                    React.createElement("tr", null,
+                                        React.createElement("td", { className: "stats-qr-logo-cell" },
+                                            React.createElement(Image, { src: promotion.logo, alt: "ESPN Logo", crossOrigin: "anonymous", className: "stats-qr-logo" }))),
+                                    React.createElement("tr", null,
+                                        React.createElement("td", { className: "stats-qr-tagline-cell" },
+                                            React.createElement("div", { className: "stats-qr-tagline" },
+                                                React.createElement("p", { className: "T20" }, promotion.title)))))))),
+                    React.createElement("tr", null,
+                        React.createElement("td", { className: "stats-qr-content-cell" },
+                            React.createElement("table", { className: "stats-qr-content-table" },
+                                React.createElement("tbody", null,
+                                    React.createElement("tr", null,
+                                        React.createElement("td", { className: "stats-qr-code-cell" },
+                                            React.createElement("div", { className: "stats-qr-code-container" },
+                                                React.createElement(Image, { src: promotion.qrCode, alt: "QR Code", crossOrigin: "anonymous", className: "stats-qr-code" })))),
+                                    React.createElement("tr", null,
+                                        React.createElement("td", { className: "stats-qr-description-cell" },
+                                            React.createElement("div", { className: "stats-qr-description" },
+                                                React.createElement("p", { className: "T02" }, promotion.description)))))))))))));
+};
+export default withFocusable()(StatsQRCodeView);

package/dist/modules/stats/view/StatsQRCode/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './StatsQRCodeView';
+export { StatsQRCodeViewProps } from './StatsQRCodeView';

package/dist/modules/stats/view/StatsQRCode/index.js

@@ -0,0 +1 @@
+export { default } from './StatsQRCodeView';

package/dist/modules/stats/view/StatsView.d.ts

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import './StatsView.styles.css';
+import { StatsApiResponse } from '../interfaces/IStats';
+interface StatsViewState {
+    container: HTMLDivElement | null;
+    statsData: StatsApiResponse | null;
+    isDataLoading: boolean;
+}
+declare class StatsView extends Component<{}, StatsViewState> {
+    private container;
+    private statsDataUnsub;
+    private isDataLoadingUnsub;
+    private vm;
+    constructor(props: {});
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    renderStatsComponents: () => React.ReactElement[];
+    render(): React.JSX.Element;
+}
+export default StatsView;

package/dist/modules/stats/view/StatsView.js

@@ -0,0 +1,107 @@
+import React, { Component } from 'react';
+import './StatsView.styles.css';
+import ScrollableContainer from '@/components/core/ScrollableContainer';
+import MatchPredictorView from './MatchPredictor';
+import SDK from '@/index';
+import StatsQRCodeView from './StatsQRCode';
+import TeamStatsView from './TeamStats';
+const STICKY_HEADER_HEIGHT = 32; // Match KeyPlaysView
+class StatsView extends Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "statsDataUnsub", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "isDataLoadingUnsub", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "vm", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "renderStatsComponents", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                const { statsData } = this.state;
+                if (!statsData) {
+                    return [];
+                }
+                try {
+                    const teams = statsData.entities.teams;
+                    const homeTeam = Object.values(teams).find((team) => team.homeAway === 'home');
+                    const awayTeam = Object.values(teams).find((team) => team.homeAway === 'away');
+                    const availableStatistics = homeTeam?.statistics || awayTeam?.statistics || [];
+                    const components = [];
+                    if (statsData.predictor) {
+                        components.push(React.createElement(MatchPredictorView, { key: "match-predictor", predictor: statsData.predictor, teams: statsData.entities.teams }));
+                    }
+                    // Add TeamStatsView if available
+                    if (homeTeam && awayTeam && availableStatistics.length > 0) {
+                        components.push(React.createElement(TeamStatsView, { key: "team-stats", homeTeam: homeTeam, awayTeam: awayTeam, statistics: availableStatistics }));
+                    }
+                    // Add StatsQRCodeView if available
+                    if (statsData.promotion) {
+                        components.push(React.createElement(StatsQRCodeView, { key: "stats-qr-code", promotion: statsData.promotion }));
+                    }
+                    return components;
+                }
+                catch (error) {
+                    console.error('Error rendering stats components:', error);
+                    return [];
+                }
+            }
+        });
+        this.vm = SDK.getMaestroEventViewModel().statsViewModel;
+        this.state = {
+            container: null,
+            statsData: this.vm.statsData.value,
+            isDataLoading: this.vm.isDataLoading.value,
+        };
+    }
+    componentDidMount() {
+        this.statsDataUnsub = this.vm.statsData.subscribe((value) => {
+            this.setState({ statsData: value });
+        });
+        this.isDataLoadingUnsub = this.vm.isDataLoading.subscribe((value) => {
+            this.setState({ isDataLoading: value });
+        });
+        this.setState({
+            container: this.container,
+        });
+        // Initialize the view model
+        this.vm.init();
+    }
+    componentWillUnmount() {
+        this.statsDataUnsub && this.statsDataUnsub();
+        this.isDataLoadingUnsub && this.isDataLoadingUnsub();
+        // Clean up the view model
+        this.vm.cleanup();
+    }
+    render() {
+        const { container, statsData } = this.state;
+        const components = this.renderStatsComponents();
+        return (React.createElement(ScrollableContainer, { scrollableContainerRef: container, containerTopOffset: STICKY_HEADER_HEIGHT },
+            React.createElement("div", { ref: (el) => {
+                    this.container = el;
+                }, className: "stats-view" },
+                !statsData ? (React.createElement("div", { className: "stats-loading T02" }, "Loading...")) : components.length > 0 ? (React.createElement("div", { className: "stats-content" }, components.map((component, index) => (React.createElement("div", { key: component.key || index, className: "stats-component" }, component))))) : (React.createElement("div", { className: "stats-loading T02" }, "No stats available")),
+                React.createElement("div", { className: "stats-bottom-padding" }))));
+    }
+}
+export default StatsView;

package/dist/modules/stats/view/TeamStats/TeamStatsView.d.ts

@@ -0,0 +1,54 @@
+/// <reference types="prop-types" />
+import React from 'react';
+import './TeamStatsView.styles.css';
+import { WithFocusableProps } from '@/external/spatial-navigation';
+import { Team, TeamStatistic } from '../../interfaces/IStats';
+export interface TeamStatsViewProps {
+    homeTeam: Team;
+    awayTeam: Team;
+    statistics?: TeamStatistic[];
+}
+declare const _default: {
+    new (props?: (TeamStatsViewProps & WithFocusableProps) | undefined, 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<TeamStatsViewProps & 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: TeamStatsViewProps & 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<TeamStatsViewProps & WithFocusableProps>;
+        context: any;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<TeamStatsViewProps & WithFocusableProps>, nextContext: any): void;
+        shouldComponentUpdate?(nextProps: Readonly<TeamStatsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentWillUpdate?(nextProps: Readonly<TeamStatsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    contextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+    childContextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+};
+export default _default;

package/dist/modules/stats/view/TeamStats/TeamStatsView.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import './TeamStatsView.styles.css';
+import Image from '@/components/atoms/Image';
+import { withFocusable, } from '@/external/spatial-navigation';
+import { renderTeamStatistic } from '../../utils/renderTeamStatistic';
+const TeamStatsView = (props) => {
+    const { homeTeam, awayTeam, statistics } = props;
+    // If no statistics available, don't render the component
+    if (!statistics || statistics.length === 0) {
+        return null;
+    }
+    // Get statistics for both teams and match them by displayName
+    const homeStats = homeTeam.statistics || [];
+    const awayStats = awayTeam.statistics || [];
+    // Create a map of statistics by displayName for easier lookup
+    const createStatsMap = (stats) => {
+        return stats.reduce((map, stat) => {
+            map[stat.displayName] = stat;
+            return map;
+        }, {});
+    };
+    const homeStatsMap = createStatsMap(homeStats);
+    const awayStatsMap = createStatsMap(awayStats);
+    // Filter statistics to only include those that exist for both teams
+    const matchedStatistics = statistics.filter((stat) => homeStatsMap[stat.displayName] && awayStatsMap[stat.displayName]);
+    return (React.createElement("section", { className: "team-stats-view focus-ring", "data-focused": props.focused, style: {
+            '--home-team': `#${homeTeam.color}`,
+            '--away-team': `#${awayTeam.color}`,
+        } },
+        React.createElement("div", { className: "team-stats-header" },
+            React.createElement("div", { className: "team-stats-team away-team" },
+                React.createElement("div", { className: "team-stats-team-inner" },
+                    awayTeam.logo && (React.createElement(Image, { src: awayTeam.logo, alt: awayTeam.displayName, crossOrigin: "anonymous", className: "team-logo" })),
+                    React.createElement("div", { className: "team-swatch away-swatch" }),
+                    React.createElement("span", { className: "team-abbreviation" }, awayTeam.abbreviation))),
+            React.createElement("h2", { className: "stats-title" }, "Team Stats"),
+            React.createElement("div", { className: "team-stats-team home-team" },
+                React.createElement("div", { className: "team-stats-team-inner" },
+                    React.createElement("span", { className: "team-abbreviation" }, homeTeam.abbreviation),
+                    React.createElement("div", { className: "team-swatch home-swatch" }),
+                    homeTeam.logo && (React.createElement(Image, { src: homeTeam.logo, alt: homeTeam.displayName, crossOrigin: "anonymous", className: "team-logo" }))))),
+        React.createElement("div", { className: "team-stats-content" }, matchedStatistics.map((statistic) => {
+            const homeStat = homeStatsMap[statistic.displayName];
+            const awayStat = awayStatsMap[statistic.displayName];
+            // Parse values, handle different formats (numbers and strings)
+            const homeValue = homeStat
+                ? parseFloat(homeStat.displayValue) || 0
+                : 0;
+            const awayValue = awayStat
+                ? parseFloat(awayStat.displayValue) || 0
+                : 0;
+            return renderTeamStatistic({
+                statisticName: statistic.displayName,
+                firstDisplayValue: awayStat?.displayValue || '0',
+                secondDisplayValue: homeStat?.displayValue || '0',
+                awayProgressValue: awayValue,
+                homeProgressValue: homeValue,
+                key: statistic.displayName,
+                classNames: {
+                    container: 'team-stat-item',
+                    header: 'stat-header',
+                    firstValue: 'stat-value away-value',
+                    secondValue: 'stat-value home-value',
+                    statisticName: 'stat-name',
+                },
+            });
+        }))));
+};
+export default withFocusable()(TeamStatsView);

package/dist/modules/stats/view/TeamStats/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './TeamStatsView';
+export type { TeamStatsViewProps } from './TeamStatsView';

package/dist/modules/stats/view/TeamStats/index.js

@@ -0,0 +1 @@
+export { default } from './TeamStatsView';

package/dist/modules/stats/view/Teams/StatsCarousel.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+type Props = {
+    itemsLength: number;
+    children: ReactNode;
+};
+declare const StatsCarousel: (props: Props) => React.JSX.Element;
+declare const CarouselSlider: (props: Props) => React.JSX.Element;
+export { StatsCarousel, CarouselSlider };

package/dist/modules/stats/view/Teams/StatsCarousel.js

@@ -0,0 +1,14 @@
+import React from 'react';
+const StatsCarousel = (props) => {
+    return (React.createElement("div", { className: "carousel" },
+        React.createElement("div", { className: "carousel-track", style: {
+                width: `${props.itemsLength * 100}%`,
+                animation: `carousel-slide ${props.itemsLength * 6}s steps(${props.itemsLength}) infinite`,
+            } }, props.children)));
+};
+const CarouselSlider = (props) => {
+    return (React.createElement("div", { className: "carousel-slide", style: {
+            width: `${100 / props.itemsLength}%`,
+        } }, props.children));
+};
+export { StatsCarousel, CarouselSlider };

package/dist/modules/stats/view/Teams/StatsProgressBar.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    awayTeamValue: number;
+    homeTeamValue: number;
+};
+declare const StatsProgressBar: (props: Props) => React.JSX.Element;
+export default StatsProgressBar;

package/dist/modules/stats/view/Teams/StatsProgressBar.js

@@ -0,0 +1,18 @@
+import React from 'react';
+const StatsProgressBar = (props) => {
+    const total = props.homeTeamValue + props.awayTeamValue;
+    const awayTeamPercentage = total === 0 ? 0 : Math.round((props.awayTeamValue / total) * 100);
+    return (React.createElement("div", { className: "progress-bar" },
+        React.createElement("div", { className: "progress-fill" },
+            React.createElement("div", { className: "progress-solid", style: {
+                    width: `${awayTeamPercentage}%`,
+                } }),
+            React.createElement("div", { className: "progress-stripes", style: {
+                    left: `${awayTeamPercentage}%`,
+                    width: `${100 - awayTeamPercentage}%`,
+                } }),
+            React.createElement("div", { className: "progress-divider", style: {
+                    left: `${awayTeamPercentage}%`,
+                } }))));
+};
+export default StatsProgressBar;

package/dist/modules/stats/view/Teams/Teams.d.ts

@@ -0,0 +1,68 @@
+/// <reference types="prop-types" />
+import React from 'react';
+import './TeamsView.styles.css';
+import { WithFocusableProps } from '@/external/spatial-navigation';
+type Team = {
+    color?: string;
+    id: string;
+    logo: string;
+    name?: string;
+    abbreviation: string;
+    record?: string;
+    linescores: string[];
+};
+export type HeaderTeamStatItem = {
+    isLive: boolean;
+    linescoresHeader: string[];
+    statistics?: {
+        displayName: string;
+        homeTeamValue: number;
+        awayTeamValue: number;
+    }[];
+    homeTeam: Team;
+    awayTeam: Team;
+};
+declare const _default: {
+    new (props?: (HeaderTeamStatItem & WithFocusableProps) | undefined, 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<HeaderTeamStatItem & 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: HeaderTeamStatItem & 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<HeaderTeamStatItem & WithFocusableProps>;
+        context: any;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<HeaderTeamStatItem & WithFocusableProps>, nextContext: any): void;
+        shouldComponentUpdate?(nextProps: Readonly<HeaderTeamStatItem & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentWillUpdate?(nextProps: Readonly<HeaderTeamStatItem & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    contextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+    childContextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+};
+export default _default;

package/dist/modules/stats/view/Teams/Teams.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import './TeamsView.styles.css';
+import Image from '@/components/atoms/Image';
+import { withFocusable, } from '@/external/spatial-navigation';
+import { CarouselSlider, StatsCarousel } from './StatsCarousel';
+import { renderTeamStatistic } from '../../utils/renderTeamStatistic';
+const Teams = (props) => {
+    const teams = [props.homeTeam, props.awayTeam];
+    return (React.createElement("section", { className: "stats-teams-view focus-ring", "data-focused": props.focused, style: {
+            '--home-team': `#${props.homeTeam.color}`,
+            '--away-team': `#${props.awayTeam.color}`,
+        }, "data-live": props.isLive },
+        React.createElement("div", { className: "stats-teams-view-header" }, teams.map((team) => (React.createElement("div", { key: team.id, className: "stats-team" },
+            React.createElement(Image, { src: team.logo, alt: team.name, crossOrigin: "anonymous" }),
+            React.createElement("div", null,
+                React.createElement("span", { className: props.isLive ? 'T05_ALT' : 'T30' }, team.abbreviation),
+                React.createElement("p", { className: "T02" }, team.record)))))),
+        props.isLive && (React.createElement("div", { className: "statistics" },
+            React.createElement("table", { className: "statistics-table" },
+                React.createElement("thead", null,
+                    React.createElement("tr", null,
+                        React.createElement("th", { className: "T10" }),
+                        props.linescoresHeader.map((header) => (React.createElement("th", { key: header, className: "T10" }, header))))),
+                React.createElement("tbody", null, teams.map((team) => (React.createElement("tr", { key: team.id },
+                    React.createElement("td", { className: "T30" }, team.name),
+                    team.linescores.map((lineScore, index) => (React.createElement("td", { key: `${lineScore}-${index}`, className: "T10" }, lineScore)))))))),
+            props.statistics && props.statistics.length > 0 && (React.createElement(StatsCarousel, { itemsLength: props.statistics.length }, props.statistics.map((statistic) => (React.createElement(CarouselSlider, { itemsLength: props.statistics.length, key: statistic.displayName }, renderTeamStatistic({
+                statisticName: statistic.displayName,
+                firstDisplayValue: statistic.homeTeamValue,
+                secondDisplayValue: statistic.awayTeamValue,
+                awayProgressValue: statistic.awayTeamValue,
+                homeProgressValue: statistic.homeTeamValue,
+                classNames: {
+                    container: 'score-statistics',
+                    header: 'score-statistics-header',
+                    firstValue: 'T30',
+                    secondValue: 'T30',
+                    statisticName: 'statistic-name T02',
+                },
+            }))))))))));
+};
+export default withFocusable()(Teams);

package/dist/modules/stats/view/Teams/index.d.ts

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

package/dist/modules/stats/view/Teams/index.js

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

package/dist/modules/stats/view/WinProbability/WinProbability.d.ts

@@ -0,0 +1,63 @@
+/// <reference types="prop-types" />
+import React from 'react';
+import './WinProbability.styles.css';
+import { WithFocusableProps } from '@/external/spatial-navigation';
+export type WinProbabilityStatsItem = {
+    chartImageUrl: string;
+    awayTeam: {
+        id: string;
+        abbreviation: string;
+        logo: string;
+        winPercentage: string;
+    };
+    homeTeam: {
+        id: string;
+        abbreviation: string;
+        logo: string;
+        winPercentage: string;
+    };
+};
+declare const _default: {
+    new (props?: (WinProbabilityStatsItem & WithFocusableProps) | undefined, 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<WinProbabilityStatsItem & 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: WinProbabilityStatsItem & 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<WinProbabilityStatsItem & WithFocusableProps>;
+        context: any;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<WinProbabilityStatsItem & WithFocusableProps>, nextContext: any): void;
+        shouldComponentUpdate?(nextProps: Readonly<WinProbabilityStatsItem & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentWillUpdate?(nextProps: Readonly<WinProbabilityStatsItem & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    contextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+    childContextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+};
+export default _default;