@maestro_io/maestro-web-sdk 4.0.0-beta.5 → 4.0.1

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

@@ -0,0 +1,104 @@
+/// <reference types="prop-types" />
+import { IconsName } from '@/components/atoms/SvgIcon/Icon';
+import './PanelNavButton.styles.css';
+import React from 'react';
+type PanelNavButtonProps = {
+    iconName: IconsName;
+    index: number;
+    active: boolean;
+    children?: React.ReactNode;
+    focused?: boolean;
+    focusKey: string;
+    onBecameFocused: () => void;
+    width: string;
+};
+declare const _default: {
+    new (props: (PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps) | Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").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?: 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<PanelNavButtonProps & import("@/external/spatial-navigation").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<PanelNavButtonProps & import("@/external/spatial-navigation").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<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, prevState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    new (props: PanelNavButtonProps & import("@/external/spatial-navigation").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<PanelNavButtonProps & import("@/external/spatial-navigation").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<PanelNavButtonProps & import("@/external/spatial-navigation").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<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, prevState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").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/PanelNavButton/PanelNavButton.js

@@ -0,0 +1,27 @@
+import BaseButton from '@/components/atoms/BaseButton/BaseButton';
+import Icon from '@/components/atoms/SvgIcon/Icon';
+import './PanelNavButton.styles.css';
+import React from 'react';
+import { withFocusable } from '@/external/spatial-navigation';
+class PanelNavButton extends React.Component {
+    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: {
+                width,
+            } },
+            React.createElement(BaseButton, null,
+                React.createElement(Icon, { iconName: iconName, height: 36, width: 36 })),
+            React.createElement("div", { className: "FONT_BOLD" }, children)));
+    }
+}
+Object.defineProperty(PanelNavButton, "displayName", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: 'PanelNavButton'
+});
+export default withFocusable()(PanelNavButton);

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+import './SegmentButton.styles.css';
+import React from 'react';
+import { WithFocusableProps } from '@/external/spatial-navigation';
+type SegmentButtonProps = HTMLAttributes<HTMLButtonElement> & WithFocusableProps & {
+    active: boolean;
+};
+declare const _default: React.ComponentType<SegmentButtonProps>;
+export default _default;

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

@@ -0,0 +1,10 @@
+import BaseButton from '@/components/atoms/BaseButton/BaseButton';
+import './SegmentButton.styles.css';
+import React from 'react';
+import { withFocusable, } from '@/external/spatial-navigation';
+class SegmentButton extends React.Component {
+    render() {
+        return (React.createElement(BaseButton, { className: "segment-button T05_ALT", "data-focused": this.props.focused, "data-active": this.props.active }, this.props.children));
+    }
+}
+export default withFocusable()(SegmentButton);

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

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

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

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

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

@@ -0,0 +1,94 @@
+/// <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?: 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<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?: 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<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/components/molecules/TabLoadError/TabLoadError.js

@@ -0,0 +1,14 @@
+import { withFocusable, } from '@/external/spatial-navigation';
+import React from 'react';
+import ActionButton from '../ActionButton';
+import './TabLoadError.styles.css';
+class TabLoadErrorView extends React.Component {
+    render() {
+        const { focused } = 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: this.props.onEnterPress }, "Try Again")));
+    }
+}
+export default withFocusable()(TabLoadErrorView);

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+import './WatchButton.styles.css';
+import React from 'react';
+interface WatchButtonProps extends HTMLAttributes<HTMLButtonElement> {
+}
+declare class WatchButton extends React.Component<WatchButtonProps> {
+    constructor(props: WatchButtonProps);
+    render(): JSX.Element;
+}
+export default WatchButton;

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

@@ -0,0 +1,15 @@
+import BaseButton from '@/components/atoms/BaseButton/BaseButton';
+import Icon from '@/components/atoms/SvgIcon';
+import './WatchButton.styles.css';
+import React from 'react';
+class WatchButton extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (React.createElement(BaseButton, { className: "watch-button T05_ALT", ...this.props },
+            React.createElement(Icon, { iconName: "play", height: 20, width: 19 }),
+            this.props.children));
+    }
+}
+export default WatchButton;

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { IconsName } from '@/components/atoms/SvgIcon/Icon';
+import './PanelNavigation.styles.css';
+import React from 'react';
+interface PanelNavigationProps {
+    items: {
+        title: string;
+        onEnter: () => void;
+        iconName: IconsName;
+        active: boolean;
+    }[];
+}
+declare class PanelNavigation extends React.Component<PanelNavigationProps> {
+    handleBecameFocused: (index: number) => () => void;
+    render(): JSX.Element | null;
+}
+export default PanelNavigation;

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

@@ -0,0 +1,60 @@
+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;
+class PanelNavigationButton extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "handleArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (d, _props) => {
+                if (d === 'left' && this.props.index === 0) {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                    return;
+                }
+                if (this.props.onArrowPress) {
+                    this.props.onArrowPress(d);
+                }
+            }
+        });
+    }
+    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));
+    }
+}
+class PanelNavigation extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "handleBecameFocused", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (index) => () => {
+                if (this.props.items[index]) {
+                    this.props.items[index].onEnter();
+                }
+            }
+        });
+    }
+    render() {
+        const itemsCount = this.props.items.length;
+        if (itemsCount === 0) {
+            return null;
+        }
+        const marginTotal = (itemsCount - 1) * BUTTON_MARGIN;
+        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 })))));
+    }
+}
+class Wrapper extends React.Component {
+    render() {
+        return React.createElement("div", { className: "panel-navigation" }, this.props.children);
+    }
+}
+const FocusableWrapper = withFocusable({ trackChildren: true })(Wrapper);
+export default PanelNavigation;

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

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

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

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

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

@@ -0,0 +1,30 @@
+/// <reference types="prop-types" />
+import React from 'react';
+import './SegmentController.styles.css';
+import { Direction, Layout } from '@/external/spatial-navigation/utils';
+import { WithFocusableProps } from '@/external/spatial-navigation';
+export type SegmentItem = {
+    title: string;
+    onEnter: () => void;
+};
+interface SegmentControllerProps {
+    backgroundColor?: string;
+    items: SegmentItem[];
+}
+declare class SegmentController extends React.Component<SegmentControllerProps> {
+    context: import("@/components/core/ScrollableContainer/ScrollableContainer").ScrollableContainerContextType;
+    static contextTypes: {
+        refsMap: import("prop-types").Requireable<(HTMLElement | null | undefined)[]>;
+        setRef: import("prop-types").Requireable<(...args: any[]) => any>;
+        scrollToFocusedElement: import("prop-types").Requireable<(...args: any[]) => any>;
+    };
+    state: {
+        activeIndex: number;
+        lastActiveIndex: number;
+    };
+    onBecameFocused: (item: SegmentItem, i: number) => (layout: Layout) => void;
+    onEnterPress: (item: SegmentItem) => () => void;
+    handleArrowPress: (index: number) => (direction: Direction, _props: WithFocusableProps) => void;
+    render(): JSX.Element;
+}
+export default SegmentController;

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import SegmentButton from '@/components/molecules/SegmentButton';
+import './SegmentController.styles.css';
+import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from '@/components/core/ScrollableContainer/ScrollableContainer';
+import SDK from '@/index';
+class SegmentController extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "context", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: DEFAULT_SCROLLABLE_CONTAINER_CONTEXT
+        });
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                activeIndex: 0,
+                lastActiveIndex: 0,
+            }
+        });
+        Object.defineProperty(this, "onBecameFocused", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (item, i) => (layout) => {
+                if (this.state.lastActiveIndex !== i &&
+                    this.state.lastActiveIndex !== null) {
+                    SDK.getMaestroEventViewModel().navigation.setFocus(`segment-controller-${this.state.lastActiveIndex}`);
+                    return;
+                }
+                this.setState({
+                    activeIndex: i,
+                    lastActiveIndex: null,
+                });
+                item.onEnter();
+                this.context.scrollToFocusedElement(layout);
+            }
+        });
+        Object.defineProperty(this, "onEnterPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (item) => () => {
+                item.onEnter();
+            }
+        });
+        Object.defineProperty(this, "handleArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (index) => (direction, _props) => {
+                if (direction === 'down' || direction === 'up') {
+                    this.setState({ lastActiveIndex: this.state.activeIndex });
+                }
+                if (direction === 'left' && index === 0) {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                }
+            }
+        });
+    }
+    render() {
+        return (React.createElement("div", { className: "segment-controller", style: {
+                backgroundColor: this.props.backgroundColor,
+            } }, this.props.items.map((item, index) => (React.createElement(SegmentButton, { focusKey: `segment-controller-${index}`, key: item.title, onBecameFocused: this.onBecameFocused(item, index), onArrowPress: this.handleArrowPress(index), onEnterPress: this.onEnterPress(item), active: this.state.activeIndex === index }, item.title)))));
+    }
+}
+Object.defineProperty(SegmentController, "contextTypes", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: SCROLLABLE_CONTEXT_TYPE
+});
+export default SegmentController;

package/dist/src/components/organisms/SegmentController/index.d.ts

@@ -0,0 +1,3 @@
+import SegmentController, { SegmentItem } from './SegmentController';
+export default SegmentController;
+export { SegmentItem };

package/dist/src/components/organisms/SegmentController/index.js

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

package/dist/src/development/MaestroEventDelegate.d.ts

@@ -0,0 +1,27 @@
+import IMaestroEventDelegate, { PanelEvent } from '../interfaces/IMaestroEventDelegate';
+import { ActionTrackEvent, ImpressionTrackEvent } from '../services/AnalyticsService/types';
+type Environment = 'development' | 'production';
+/**
+ * Our own implementation of the IMaestroEventDelegate interface. Useful for Development and Testing
+ */
+export default class MaestroEventDelegate implements IMaestroEventDelegate {
+    loggedIn: boolean;
+    env: Environment;
+    constructor({ env, loggedIn, }?: {
+        env: Environment;
+        loggedIn: boolean;
+    });
+    onPanelEvent(event: PanelEvent): void;
+    toggleLogin(): void;
+    trackImpression(impression: ImpressionTrackEvent): void;
+    trackAction(action: ActionTrackEvent): void;
+    getStatsAPIBaseURL(): string;
+    getBettingAPIBaseURL(): string;
+    userRequestedNewKeyPlaysData(): Promise<void>;
+    startFocusManagement(): Promise<void>;
+    userIsAuthenticated(): Promise<boolean>;
+    getUserSWID(): Promise<string | null>;
+    getUserToken(): Promise<string | null>;
+    playClip(atIndex: number): void;
+}
+export {};