@maestro_io/maestro-web-sdk 5.1.2 → 5.2.0

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@maestro_io/maestro-web-sdk",
     "private": false,
-    "version": "5.0.0",
+    "version": "5.2.0",
     "type": "commonjs",
     "license": "MIT",
     "main": "dist/maestro-web-sdk.umd.js",

package/dist/src/components/atoms/SvgIcon/AddIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './Icon';
+declare const AddIcon: (props: IconProps) => JSX.Element;
+export default AddIcon;

package/dist/src/components/atoms/SvgIcon/AddIcon.js

@@ -0,0 +1,6 @@
+import React from 'react';
+const AddIcon = (props) => {
+    return (React.createElement("svg", { width: props.width, height: props.height, viewBox: "0 0 21 21", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M10.5 1V20M1 10.5H20", stroke: "#FFFFFF", strokeWidth: "2", strokeLinecap: "round" })));
+};
+export default AddIcon;

package/dist/src/components/atoms/SvgIcon/Icon.js

@@ -22,6 +22,7 @@ const BuilderIcon = lazy(() => import('./BuilderIcon'));
 const FoxKeyPlaysIcon = lazy(() => import('./FoxKeyPlaysIcon'));
 const FoxStatsIcon = lazy(() => import('./FoxStatsIcon'));
 const FoxMultiViewIcon = lazy(() => import('./FoxMultiViewIcon'));
+const AddIcon = lazy(() => import('./AddIcon'));
 // Ensures all MaestroPanelType values have icons
 const panelIcons = {
     [MaestroPanelType.ESPN_KEY_PLAYS]: KeyPlaysIcon,
@@ -47,6 +48,7 @@ const otherIcons = {
     mobilePhone: MobilePhoneIcon,
     chat: ChatIcon,
     shopifyBlockPanel: ShopifyIcon,
+    add: AddIcon,
 };
 const iconImports = {
     ...panelIcons,

package/dist/src/components/core/PanelManager/PanelManager.js

@@ -2,6 +2,7 @@ import React, { Suspense, lazy } from 'react';
 import './PanelManager.styles.css';
 import PanelNavigation from '@/components/organisms/PanelNavigation';
 import SDK from '@/index';
+import { isFoxSiteID } from '@/helpers/site';
 // Lazy load panel components
 const KeyPlaysView = lazy(() => import('@/modules/espn/key-plays/view/KeyPlaysView'));
 const BetsView = lazy(() => import('@/modules/espn/bets/view/BetsView'));
@@ -23,7 +24,7 @@ const PANELS_MAP = {
     espnShop: ShopView,
     helloWorld: HelloWorldView,
     foxKeyPlays: FoxKeyPlays,
-    foxMultiview: FoxMultiView,
+    foxMultiView: FoxMultiView,
     foxStats: FoxStatsView,
     builderBlockPanel: BuilderView,
 };
@@ -84,6 +85,7 @@ class PanelManager extends React.Component {
     }
     render() {
         const { activePanel, visiblePanels } = this.state;
+        const isFoxSite = isFoxSiteID(SDK.getSiteID());
         // Create panel items only for visible panels
         const PANEL_ITEMS = visiblePanels.map((panel) => ({
             iconName: panel.type,
@@ -92,8 +94,8 @@ class PanelManager extends React.Component {
             active: activePanel === panel.type,
         }));
         const ActivePanelComponent = activePanel ? PANELS_MAP[activePanel] : null;
-        return (React.createElement("div", { className: "sdk--panel-manager" },
-            React.createElement(PanelNavigation, { items: PANEL_ITEMS }),
+        return (React.createElement("div", { className: 'sdk--panel-manager' + (isFoxSite ? ' sdk--panel-manager-fox' : '') },
+            React.createElement(PanelNavigation, { items: PANEL_ITEMS, isFoxSite: isFoxSite }),
             ActivePanelComponent && (React.createElement("div", { className: "sdk--panel-wrapper" },
                 React.createElement(Suspense, { fallback: React.createElement(PanelLoading, null) },
                     React.createElement(ActivePanelComponent, null))))));

package/dist/src/components/molecules/NetworkDialog/NetworkDialog.d.ts

@@ -0,0 +1,11 @@
+import './NetworkDialog.styles.css';
+type NetworkDialogViewDetails = {
+    description?: string;
+    icon?: 'warning' | 'info' | 'loading';
+};
+interface NetworkDialogViewProps {
+    details?: NetworkDialogViewDetails;
+    isVisible?: boolean;
+}
+declare const NetworkDialogView: (props: NetworkDialogViewProps) => JSX.Element | null;
+export default NetworkDialogView;

package/dist/src/components/molecules/NetworkDialog/NetworkDialog.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import './NetworkDialog.styles.css';
+const WarningIcon = () => (React.createElement("svg", { className: "network-dialog-icon", width: "21", height: "19", viewBox: "0 0 21 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.333 0C9.16683 0 8.31608 0.70209 7.58823 1.61668C6.87631 2.51125 6.1187 3.81989 5.18179 5.43827L2.52557 10.0263C1.58508 11.6507 0.824792 12.9639 0.402195 14.0299C-0.029695 15.1194 -0.215504 16.2097 0.368381 17.2224C0.952267 18.2351 1.98898 18.6206 3.14823 18.7927C4.28254 18.9611 5.79993 18.9611 7.67693 18.9611H12.9891C14.8661 18.9611 16.3835 18.9611 17.5178 18.7927C18.6771 18.6206 19.7138 18.2351 20.2977 17.2224C20.8815 16.2097 20.6957 15.1194 20.2638 14.0299C19.8413 12.9639 19.081 11.6507 18.1405 10.0263L15.4843 5.43827C14.5473 3.81989 13.7897 2.51125 13.0778 1.61668C12.35 0.70209 11.4992 0 10.333 0ZM11.2809 6.67659C11.2809 6.15337 10.8567 5.72922 10.3335 5.72922C9.81027 5.72922 9.38612 6.15337 9.38612 6.67659V10.7992C9.38612 11.3224 9.81027 11.7465 10.3335 11.7465C10.8567 11.7465 11.2809 11.3224 11.2809 10.7992V6.67659ZM11.3641 13.8909C11.3641 14.4601 10.9027 14.9215 10.3334 14.9215C9.76423 14.9215 9.3028 14.4601 9.3028 13.8909C9.3028 13.3216 9.76423 12.8602 10.3334 12.8602C10.9027 12.8602 11.3641 13.3216 11.3641 13.8909Z", fill: "white" })));
+const InfoIcon = () => (React.createElement("svg", { className: "network-dialog-icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("circle", { cx: "12", cy: "12", r: "11", stroke: "currentColor", strokeWidth: "2" }),
+    React.createElement("path", { d: "M12 8V16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+    React.createElement("circle", { cx: "12", cy: "6", r: "1", fill: "currentColor" })));
+const LoadingIcon = () => (React.createElement("svg", { className: "network-dialog-icon network-dialog-icon--loading", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("circle", { cx: "12", cy: "12", r: "11", stroke: "currentColor", strokeWidth: "2", opacity: "0.3" }),
+    React.createElement("path", { d: "M23 12C23 18.0751 18.0751 23 12 23", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })));
+const getIcon = (iconType) => {
+    switch (iconType) {
+        case 'warning':
+            return React.createElement(WarningIcon, null);
+        case 'info':
+            return React.createElement(InfoIcon, null);
+        case 'loading':
+            return React.createElement(LoadingIcon, null);
+        default:
+            return React.createElement(InfoIcon, null);
+    }
+};
+const NetworkDialogView = (props) => {
+    const { details = {}, isVisible = false } = props;
+    const { description, icon = 'info' } = details;
+    if (!description || !isVisible)
+        return null;
+    return (React.createElement("div", { className: "network-dialog-container" },
+        React.createElement("div", { className: "network-dialog-notification" },
+            getIcon(icon),
+            React.createElement("p", { className: "T10 FONT_BOLD" }, description))));
+};
+export default NetworkDialogView;

package/dist/src/components/molecules/NetworkDialog/index.d.ts

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

package/dist/src/components/molecules/NetworkDialog/index.js

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

package/dist/src/components/molecules/NetworkError/NetworkError.d.ts

@@ -0,0 +1,104 @@
+/// <reference types="prop-types" />
+import { WithFocusableProps } from '@/external/spatial-navigation';
+import React from 'react';
+import './NetworkError.styles.css';
+type NetworkErrorViewDetails = {
+    description?: string;
+    actionButtonText?: string;
+};
+interface NetworkErrorViewState {
+    details?: NetworkErrorViewDetails;
+    isVisible?: boolean;
+}
+declare const _default: {
+    new (props: (NetworkErrorViewState & WithFocusableProps) | Readonly<NetworkErrorViewState & WithFocusableProps>): {
+        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?: import("../../../external/spatial-navigation/utils").Details) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onClickPressHandler: (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<NetworkErrorViewState & 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<NetworkErrorViewState & 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<NetworkErrorViewState & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<NetworkErrorViewState & WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<NetworkErrorViewState & WithFocusableProps>, prevState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<NetworkErrorViewState & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<NetworkErrorViewState & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<NetworkErrorViewState & WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<NetworkErrorViewState & WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    new (props: NetworkErrorViewState & 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?: import("../../../external/spatial-navigation/utils").Details) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onClickPressHandler: (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<NetworkErrorViewState & 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<NetworkErrorViewState & 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<NetworkErrorViewState & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<NetworkErrorViewState & WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<NetworkErrorViewState & WithFocusableProps>, prevState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<NetworkErrorViewState & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<NetworkErrorViewState & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<NetworkErrorViewState & WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<NetworkErrorViewState & 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>;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export default _default;

package/dist/src/components/molecules/NetworkError/NetworkError.js

@@ -0,0 +1,26 @@
+import { withFocusable, } from '@/external/spatial-navigation';
+import React from 'react';
+import ActionButton from '../ActionButton';
+import './NetworkError.styles.css';
+const DefaultDetails = {
+    description: '',
+    actionButtonText: '',
+};
+const NetworkErrorView = (props) => {
+    const { focused, onEnterPress, details = DefaultDetails, isVisible = false, focusKey = 'network-error', } = props;
+    const { description, actionButtonText } = details;
+    if ((!description && !actionButtonText) || !isVisible)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { "data-focused": focused, className: "network-error-container" },
+            React.createElement("div", { className: "network-error-content" },
+                description && React.createElement("p", { className: "T10 FONT_BOLD" }, description),
+                actionButtonText && (React.createElement("div", { className: "fox" },
+                    React.createElement(ActionButton, { focusKey: `${focusKey}-action-button`, "data-focused": focused, onEnterPress: onEnterPress }, actionButtonText))))),
+        React.createElement("div", { className: "network-error-background" })));
+};
+export default withFocusable({
+    trackChildren: true,
+    autoRestoreFocus: true,
+    blockNavigationOut: true,
+})(NetworkErrorView);

package/dist/src/components/molecules/NetworkError/index.d.ts

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

package/dist/src/components/molecules/NetworkError/index.js

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

package/dist/src/components/molecules/PanelNavButton/PanelNavButton.d.ts

@@ -6,6 +6,7 @@ type PanelNavButtonProps = {
     iconName: IconsName;
     index: number;
     active: boolean;
+    isFoxSite: boolean;
     children?: React.ReactNode;
     focused?: boolean;
     focusKey: string;

package/dist/src/components/molecules/PanelNavButton/PanelNavButton.js

@@ -4,18 +4,27 @@ import './PanelNavButton.styles.css';
 import React from 'react';
 import { withFocusable } from '@/external/spatial-navigation';
 class PanelNavButton extends React.Component {
+    getContainerClassName() {
+        const { active, isFoxSite } = this.props;
+        if (isFoxSite && active) {
+            return 'panel-nav-button-container panel-nav-button-container-fox T02 panel-nav-button-active';
+        }
+        if (isFoxSite) {
+            return 'panel-nav-button-container panel-nav-button-container-fox T02';
+        }
+        if (active) {
+            return 'panel-nav-button-container T02 panel-nav-button-active';
+        }
+        return 'panel-nav-button-container T02';
+    }
     render() {
-        const { iconName, active, children, focused, width } = this.props;
-        return (React.createElement("div", { className: [
-                'panel-nav-button-container',
-                'T02',
-                active ? 'panel-nav-button-active' : '',
-            ].join(' '), "data-focused": focused, style: {
+        const { iconName, isFoxSite, children, focused, width } = this.props;
+        return (React.createElement("div", { className: this.getContainerClassName(), "data-focused": focused, style: {
                 width,
             } },
             React.createElement(BaseButton, null,
                 React.createElement(Icon, { iconName: iconName, height: 36, width: 36 })),
-            React.createElement("div", { className: "panel-nav-label FONT_BOLD" }, children)));
+            !isFoxSite && (React.createElement("div", { className: "panel-nav-label FONT_BOLD" }, children))));
     }
 }
 Object.defineProperty(PanelNavButton, "displayName", {

package/dist/src/components/organisms/PanelNavigation/PanelNavigation.d.ts

@@ -8,6 +8,7 @@ interface PanelNavigationProps {
         iconName: IconsName;
         active: boolean;
     }[];
+    isFoxSite: boolean;
 }
 declare class PanelNavigation extends React.Component<PanelNavigationProps> {
     handleBecameFocused: (index: number) => () => void;

package/dist/src/components/organisms/PanelNavigation/PanelNavigation.js

@@ -2,8 +2,9 @@ import PanelNavButton from '@/components/molecules/PanelNavButton';
 import './PanelNavigation.styles.css';
 import React from 'react';
 import SDK from '@/index';
-import { withFocusable, } from '@/external/spatial-navigation';
-const BUTTON_MARGIN = 12;
+import { withFocusable } from '@/external/spatial-navigation';
+const ESPN_BUTTON_MARGIN = 12;
+const FOX_BUTTON_MARGIN = 8;
 class PanelNavigationButton extends React.Component {
     constructor() {
         super(...arguments);
@@ -23,8 +24,8 @@ class PanelNavigationButton extends React.Component {
         });
     }
     render() {
-        const { item, index, width } = this.props;
-        return (React.createElement(PanelNavButton, { iconName: item.iconName, key: item.title, index: index, onBecameFocused: this.props.onBecameFocused(index), active: item.active, focusKey: `PANEL_NAV_BUTTON_${index}`, onArrowPress: this.handleArrowPress, parentFocusKey: "PANEL_NAVIGATION", width: width }, item.title));
+        const { item, index, isFoxSite, width } = this.props;
+        return (React.createElement(PanelNavButton, { iconName: item.iconName, key: item.title, index: index, isFoxSite: isFoxSite, onBecameFocused: this.props.onBecameFocused(index), active: item.active, focusKey: `PANEL_NAV_BUTTON_${index}`, onArrowPress: this.handleArrowPress, parentFocusKey: "PANEL_NAVIGATION", width: width }, item.title));
     }
 }
 class PanelNavigation extends React.Component {
@@ -43,17 +44,20 @@ class PanelNavigation extends React.Component {
     }
     render() {
         const itemsCount = this.props.items.length;
+        const { isFoxSite } = this.props;
+        const buttonMargin = isFoxSite ? FOX_BUTTON_MARGIN : ESPN_BUTTON_MARGIN;
         if (itemsCount === 0) {
             return null;
         }
-        const marginTotal = (itemsCount - 1) * BUTTON_MARGIN;
+        const marginTotal = (itemsCount - 1) * buttonMargin;
         const buttonWidth = `calc((100% - ${marginTotal}px) / ${itemsCount})`;
-        return (React.createElement(FocusableWrapper, { focusKey: "PANEL_NAVIGATION" }, this.props.items.map((item, index) => (React.createElement(PanelNavigationButton, { onBecameFocused: this.handleBecameFocused, key: item.title, item: item, index: index, width: buttonWidth })))));
+        return (React.createElement(FocusableWrapper, { focusKey: "PANEL_NAVIGATION", isFoxSite: isFoxSite }, this.props.items.map((item, index) => (React.createElement(PanelNavigationButton, { onBecameFocused: this.handleBecameFocused, key: item.title, item: item, index: index, isFoxSite: isFoxSite, width: buttonWidth })))));
     }
 }
 class Wrapper extends React.Component {
     render() {
-        return React.createElement("div", { className: "panel-navigation" }, this.props.children);
+        const { isFoxSite } = this.props;
+        return (React.createElement("div", { className: 'panel-navigation' + (isFoxSite ? ' panel-navigation-fox' : '') }, this.props.children));
     }
 }
 const FocusableWrapper = withFocusable({ trackChildren: true })(Wrapper);

package/dist/src/development/MaestroEventDelegate.js

@@ -61,6 +61,7 @@ export default class MaestroEventDelegate {
         throw new Error('Method not implemented.');
     }
     startFocusManagement() {
+        alert('Focus going to client. Passing back to SDK');
         return Promise.resolve(SDK.getMaestroEventViewModel().startFocusManagement());
     }
     userIsAuthenticated() {

package/dist/src/helpers/site.d.ts

@@ -0,0 +1 @@
+export declare const isFoxSiteID: (siteID: string) => boolean;

package/dist/src/helpers/site.js

@@ -0,0 +1,6 @@
+import { SITE_BRAND_BY_SITE_ID } from './siteConfig';
+export const isFoxSiteID = (siteID) => {
+    const normalizedSiteID = siteID.trim().toLowerCase();
+    const siteBrand = SITE_BRAND_BY_SITE_ID[normalizedSiteID];
+    return siteBrand === 'fox';
+};

package/dist/src/helpers/siteConfig.d.ts

@@ -0,0 +1 @@
+export declare const SITE_BRAND_BY_SITE_ID: Record<string, 'espn' | 'fox' | 'maestro'>;

package/dist/src/helpers/siteConfig.js

@@ -0,0 +1,5 @@
+export const SITE_BRAND_BY_SITE_ID = {
+    '664b9c57d59a7a431542d814': 'espn',
+    '69388ee52b46b639897261f1': 'maestro',
+    '695c05610f99e7584a1b7407': 'fox',
+};

package/dist/src/models/IPanel.d.ts

@@ -6,7 +6,7 @@ export declare const MaestroPanelType: {
     readonly ESPN_SHOP: "espnShop";
     readonly HELLO_WORLD: "helloWorld";
     readonly FOX_KEY_PLAYS: "foxKeyPlays";
-    readonly FOX_MULTI_VIEW: "foxMultiview";
+    readonly FOX_MULTI_VIEW: "foxMultiView";
     readonly FOX_STATS: "foxStats";
     readonly BUILDER_BLOCK_PANEL: "builderBlockPanel";
 };

package/dist/src/models/IPanel.js

@@ -6,7 +6,7 @@ export const MaestroPanelType = {
     ESPN_SHOP: 'espnShop',
     HELLO_WORLD: 'helloWorld',
     FOX_KEY_PLAYS: 'foxKeyPlays',
-    FOX_MULTI_VIEW: 'foxMultiview',
+    FOX_MULTI_VIEW: 'foxMultiView',
     FOX_STATS: 'foxStats',
     BUILDER_BLOCK_PANEL: 'builderBlockPanel',
 };

package/dist/src/modules/espn/bets/view/BetsView.js

@@ -8,8 +8,8 @@ import HotPropsView from './HotProps/HotPropsView';
 import GamblingDisclaimer from './components/GamblingDisclaimer/GamblingDisclaimer';
 import LocationWarning from './components/LocationWarning/LocationWarning';
 import { BetItemPromoCode } from './components/PromoCodeBanner';
-import TabLoadErrorView from '@/components/molecules/TabLoadError';
 import { setupMaxHeightToBottom } from '@/hooks/useMaxHeightToBottom';
+import TabLoadErrorView from '../../components/TabLoadError';
 class BetsView extends Component {
     constructor(props) {
         super(props);

package/dist/src/modules/espn/components/TabLoadError/TabLoadError.d.ts

@@ -0,0 +1,96 @@
+/// <reference types="prop-types" />
+import { WithFocusableProps } from '@/external/spatial-navigation';
+import React from 'react';
+import './TabLoadError.styles.css';
+declare const _default: {
+    new (props: (object & WithFocusableProps) | Readonly<object & WithFocusableProps>): {
+        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?: import("../../../../external/spatial-navigation/utils").Details) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        onClickPressHandler: (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<object & 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<object & 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<object & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<object & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<object & WithFocusableProps>, prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<object & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<object & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<object & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<object & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    new (props: object & 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?: import("../../../../external/spatial-navigation/utils").Details) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        onClickPressHandler: (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<object & 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<object & 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<object & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<object & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<object & WithFocusableProps>, prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<object & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<object & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<object & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<object & 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>;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export default _default;

package/dist/src/modules/espn/components/TabLoadError/TabLoadError.js

@@ -0,0 +1,14 @@
+import { withFocusable, } from '@/external/spatial-navigation';
+import React from 'react';
+import './TabLoadError.styles.css';
+import ActionButton from '@/components/molecules/ActionButton';
+class TabLoadErrorView extends React.Component {
+    render() {
+        const { focused, onEnterPress } = this.props;
+        return (React.createElement("div", { "data-focused": focused, className: "tab-load-error focus-ring" },
+            React.createElement("h3", { className: "T70" }, "We dropped the ball."),
+            React.createElement("p", { className: "T20" }, "We're having trouble loading that for you. Please try again."),
+            React.createElement(ActionButton, { "data-focused": focused, onEnterPress: onEnterPress }, "Try Again")));
+    }
+}
+export default withFocusable()(TabLoadErrorView);

package/dist/src/modules/espn/components/TabLoadError/index.d.ts

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

package/dist/src/modules/espn/components/TabLoadError/index.js

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

package/dist/src/modules/espn/fantasy/components/TournamentOverflowQR/TournamentOverflowQR.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="prop-types" />
 import React from 'react';
 import { WithFocusableProps } from '@/external/spatial-navigation';
-import { Direction, Layout } from '@/external/spatial-navigation/utils';
+import { Layout } from '@/external/spatial-navigation/utils';
 import './TournamentOverflowQR.styles.css';
 import { TournamentOverflowQRItem } from '../../types';
 type Props = {
@@ -17,7 +17,7 @@ declare const _default: {
             parentFocusKey: string;
         };
         setFocus: (focusKey: string) => void;
-        navigateByDirection: (direction: Direction, details?: import("@/external/spatial-navigation/utils").Details) => void;
+        navigateByDirection: (direction: import("@/external/spatial-navigation/utils").Direction, details?: import("@/external/spatial-navigation/utils").Details) => void;
         stealFocus: () => void;
         onUpdateFocus: (focused: boolean) => void;
         onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
@@ -25,7 +25,7 @@ declare const _default: {
         onClickPressHandler: (details: import("@/external/spatial-navigation/utils").Details) => void;
         onEnterReleaseHandler: () => void;
         onBackPressHandler: (details: import("@/external/spatial-navigation/utils").Details) => void;
-        onArrowPressHandler: (direction: Direction, details: import("@/external/spatial-navigation/utils").Details) => boolean | void;
+        onArrowPressHandler: (direction: import("@/external/spatial-navigation/utils").Direction, details: import("@/external/spatial-navigation/utils").Details) => boolean | void;
         onBecameFocusedHandler: (layout: Layout, details: import("@/external/spatial-navigation/utils").Details) => void;
         onBecameBlurredHandler: (layout: Layout, details: import("@/external/spatial-navigation/utils").Details) => void;
         componentDidMount(): void;
@@ -58,7 +58,7 @@ declare const _default: {
             parentFocusKey: string;
         };
         setFocus: (focusKey: string) => void;
-        navigateByDirection: (direction: Direction, details?: import("@/external/spatial-navigation/utils").Details) => void;
+        navigateByDirection: (direction: import("@/external/spatial-navigation/utils").Direction, details?: import("@/external/spatial-navigation/utils").Details) => void;
         stealFocus: () => void;
         onUpdateFocus: (focused: boolean) => void;
         onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
@@ -66,7 +66,7 @@ declare const _default: {
         onClickPressHandler: (details: import("@/external/spatial-navigation/utils").Details) => void;
         onEnterReleaseHandler: () => void;
         onBackPressHandler: (details: import("@/external/spatial-navigation/utils").Details) => void;
-        onArrowPressHandler: (direction: Direction, details: import("@/external/spatial-navigation/utils").Details) => boolean | void;
+        onArrowPressHandler: (direction: import("@/external/spatial-navigation/utils").Direction, details: import("@/external/spatial-navigation/utils").Details) => boolean | void;
         onBecameFocusedHandler: (layout: Layout, details: import("@/external/spatial-navigation/utils").Details) => void;
         onBecameBlurredHandler: (layout: Layout, details: import("@/external/spatial-navigation/utils").Details) => void;
         componentDidMount(): void;