@maestro_io/maestro-web-sdk 5.0.0 → 5.1.0

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

@@ -0,0 +1,111 @@
+import React, { useState, useRef, useCallback, useMemo } from 'react';
+import './ScrollableContainer.styles.css';
+const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+/**
+ * Context for ScrollableContainer
+ */
+export const ScrollableContainerContext = React.createContext({
+    setRef: () => { },
+    removeRef: () => { },
+    scrollToFocusedElement: () => { },
+});
+/**
+ * ScrollableContainer component provides a context for focusable items
+ * that allows them to register themselves and handle scrolling
+ * when they become focused.
+ * @example
+ * ```jsx
+ * <ScrollableContainer scrollableContainerRef={scrollableContainerRef}>
+ *    <FocusableItem>Item 1</FocusableItem>
+ *    <FocusableItem>Item 2</FocusableItem>
+ *    <FocusableItem>Item 3</FocusableItem>
+ * </ScrollableContainer>
+ * ```
+ */
+export const ScrollableContainer = ({ children, scrollableContainerRef, containerTopOffset = 0, ...rest }) => {
+    const [scrolled, setScrolled] = useState(false);
+    const refsSet = useRef(new Set());
+    const hashRef = useRef('');
+    const lastHashRef = useRef('');
+    const sortedRefsCache = useRef([]);
+    const setRef = useCallback((ref) => {
+        refsSet.current.add(ref);
+        hashRef.current = Math.random().toString(36).substring(2, 15);
+    }, []);
+    const removeRef = useCallback((ref) => {
+        refsSet.current.delete(ref);
+        hashRef.current = Math.random().toString(36).substring(2, 15);
+    }, []);
+    const getOrderedRefs = useCallback(() => {
+        if (hashRef.current === lastHashRef.current) {
+            return sortedRefsCache.current;
+        }
+        const refsArray = Array.from(refsSet.current);
+        sortedRefsCache.current = refsArray.sort((a, b) => {
+            if (!scrollableContainerRef)
+                return 0;
+            const containerRect = scrollableContainerRef.getBoundingClientRect();
+            const aRect = a ? a.getBoundingClientRect() : { top: 0, bottom: 0 };
+            const bRect = b ? b.getBoundingClientRect() : { top: 0, bottom: 0 };
+            // Calculate the actual distance from container top (positive means below, negative means above)
+            const aDistance = aRect.top - containerRect.top;
+            const bDistance = bRect.top - containerRect.top;
+            return aDistance - bDistance;
+        });
+        lastHashRef.current = hashRef.current;
+        return sortedRefsCache.current;
+    }, [scrollableContainerRef]);
+    /**
+     * @description - Scrolls the container to the focused element if necessary
+     */
+    const scrollToFocusedElement = useCallback(async (layout, options) => {
+        if (!scrollableContainerRef || !layout.node)
+            return;
+        const offsetTop = options?.offsetTop || 0;
+        const refs = getOrderedRefs();
+        // Wait for the next frame to ensure the layout is updated
+        if (process.env.NODE_ENV !== 'test') {
+            await wait(0);
+        }
+        const containerRect = scrollableContainerRef.getBoundingClientRect();
+        const nodeRect = layout.node.getBoundingClientRect();
+        let index = -1;
+        for (let i = refs.length - 1; i >= 0; i--) {
+            if (refs[i].contains(layout.node)) {
+                index = i;
+                break;
+            }
+        }
+        if (index === -1) {
+            console.warn('Element not found in refsMap to focus to. Register the element wrapping it with <FocusableItem />');
+            return;
+        }
+        let hasOutside = false;
+        refs.slice(index).forEach((el) => {
+            const rect = el.getBoundingClientRect();
+            if (rect.bottom > containerRect.bottom ||
+                rect.top < containerRect.top) {
+                hasOutside = true;
+            }
+        });
+        if (!hasOutside)
+            return;
+        const target = index === 0
+            ? 0
+            : scrollableContainerRef.scrollTop +
+                (nodeRect.top - containerRect.top - containerTopOffset - offsetTop);
+        scrollableContainerRef.scrollTop = target;
+        setScrolled((prev) => {
+            const newScrolled = target > 0;
+            return prev !== newScrolled ? newScrolled : prev;
+        });
+    }, [scrollableContainerRef, containerTopOffset, getOrderedRefs]);
+    const contextValue = useMemo(() => ({
+        setRef,
+        removeRef,
+        scrollToFocusedElement,
+    }), [setRef, removeRef, scrollToFocusedElement]);
+    return (React.createElement(ScrollableContainerContext.Provider, { value: contextValue },
+        React.createElement("div", { className: "scrollable-container", "data-scrolled": scrolled, ...rest }, children)));
+};
+export default ScrollableContainer;

package/dist/src/components/core/ScrollableContainer/index.d.ts

@@ -0,0 +1,6 @@
+import ScrollableContainer from './ScrollableContainer';
+export { ScrollableContainerContext } from './ScrollableContainer';
+export { useScrollableContainer } from './useScrollableContainer';
+export { default as FocusableItem } from './FocusableItem';
+export type { ScrollableContainerContextType } from './ScrollableContainer';
+export default ScrollableContainer;

package/dist/src/components/core/ScrollableContainer/index.js

@@ -0,0 +1,5 @@
+import ScrollableContainer from './ScrollableContainer';
+export { ScrollableContainerContext } from './ScrollableContainer';
+export { useScrollableContainer } from './useScrollableContainer';
+export { default as FocusableItem } from './FocusableItem';
+export default ScrollableContainer;

package/dist/src/components/core/ScrollableContainer/useScrollableContainer.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Custom hook to access the ScrollableContainer context.
+ * Use this hook in components that need to interact with the scrollable container.
+ *
+ * @example
+ * ```tsx
+ * const { scrollToFocusedElement } = useScrollableContainer();
+ *
+ * const handleFocus = (layout: Layout) => {
+ *   scrollToFocusedElement(layout, { offsetTop: 20 });
+ * };
+ * ```
+ */
+export declare const useScrollableContainer: () => import("./ScrollableContainer").ScrollableContainerContextType;

package/dist/src/components/core/ScrollableContainer/useScrollableContainer.js

@@ -0,0 +1,22 @@
+import { useContext } from 'react';
+import { ScrollableContainerContext } from './ScrollableContainer';
+/**
+ * Custom hook to access the ScrollableContainer context.
+ * Use this hook in components that need to interact with the scrollable container.
+ *
+ * @example
+ * ```tsx
+ * const { scrollToFocusedElement } = useScrollableContainer();
+ *
+ * const handleFocus = (layout: Layout) => {
+ *   scrollToFocusedElement(layout, { offsetTop: 20 });
+ * };
+ * ```
+ */
+export const useScrollableContainer = () => {
+    const context = useContext(ScrollableContainerContext);
+    if (!context) {
+        throw new Error('useScrollableContainer must be used within a ScrollableContainer');
+    }
+    return context;
+};

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

@@ -0,0 +1,96 @@
+/// <reference types="prop-types" />
+import './ActionButton.styles.css';
+import { WithFocusableProps } from '@/external/spatial-navigation';
+import React from 'react';
+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/components/molecules/ActionButton/ActionButton.js

@@ -0,0 +1,15 @@
+import BaseButton from '@/components/atoms/BaseButton';
+import './ActionButton.styles.css';
+import { withFocusable, } from '@/external/spatial-navigation';
+import React from 'react';
+class ActionButton extends React.Component {
+    render() {
+        const { children, 
+        // spatial-navigation props (must not hit DOM)
+        focused: _focused, focusKey: _focusKey, parentFocusKey: _parentFocusKey, preferredChildFocusKey: _preferredChildFocusKey, forgetLastFocusedChild: _forgetLastFocusedChild, trackChildren: _trackChildren, autoRestoreFocus: _autoRestoreFocus, blockNavigationOut: _blockNavigationOut, hasFocusedChild: _hasFocusedChild, focusable: _focusable, onEnterPress: _onEnterPress, onEnterRelease: _onEnterRelease, onBackPress: _onBackPress, onArrowPress: _onArrowPress, onBecameFocused: _onBecameFocused, onBecameBlurred: _onBecameBlurred, 
+        // injected/internal props (also must not hit DOM)
+        realFocusKey: _realFocusKey, setFocus: _setFocus, navigateByDirection: _navigateByDirection, stealFocus: _stealFocus, onUpdateFocus: _onUpdateFocus, onUpdateHasFocusedChild: _onUpdateHasFocusedChild, ...buttonProps } = this.props;
+        return (React.createElement(BaseButton, { className: "action-button T05_ALT", ...buttonProps }, children));
+    }
+}
+export default withFocusable()(ActionButton);

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

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

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

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

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

@@ -0,0 +1,16 @@
+import React, { ImgHTMLAttributes } from 'react';
+export declare const BASE_64_HEADSHOT_THUMBNAIL_FALLBACK = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCACQALgDAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+O4tkcn0/z79ev/161Mg3dv8AD64/rjp3oAC3b3+n6e/8+negAB/z/Prn/DgUAG736cflyP5Z/CgA3Hpn/wDWOf65/WgYBvQ+n6H+eR396BBuzjnn6/55Geo+vU5oANxznPIoANx9cf8A18/j3Iz160AG73H8vftjsPy+goAM/wCfzx/9b/8AXQAu7/Pv0z9ff3+mABM/5/8Arfl9KAFLHue3+eP89u4FACbj69P0HP5D/PWgAzznJ57/AP16ADd/n36c9s9j6980ALuOePXOP8849B0oATJ9enT24oACxHOfT/Ae3f8AzzQAbvU/rj6D/wCsPwoAMn8+vv8AX/HrQBX3fTpj19c9Tx0IP/1qBgW9+vX3/wA/yoEG70PX16/rz2/HFAxSx554znr+X5f0oEJn8x+f/wCr6UDDceuen/6v6UCDd/8AX/n29eD6/SgYbvc/X8uc+nA60ALuPr0/z/kdKADcT39vw/r7fn1OaAE3HjnpjH8vzoEG737d+Tzx9aBiZ/l9OPfpwP8APagQu7pz7cH05oGLvP8AnOfXHXI46j6d6AE3die2Ov4/p/n1oAN2O/4E/U+vPP8AKgA3YPXB6/59aADcfX8vp7e39fegA3c8n9cHP/6qADd1Pr1/qP06fhQIN2e/t/n/AD9epyALuP8An/PrzmgZW3H1/wA//qoAM5/Hn/Pbv9fSgQm739Md/Tt/n8qBjtx/yAP88UtNQ/r+rCZ9/wDPt+fb29qYBu9/19un0PUj0HXvQAbj1z/nP9O/4+9AC7++eOvtx69Py9e1ABuOMf5GPf8AxoA77RfCayxR3Wps+JAHS0RihCHlfPcfMCw5MabWUYDODuRQR2cGm6fagCCzt48dGESmT8ZGBkY+7MTQBbeNJBtdEdem11DD06EEUAYd74a0m8BP2cW0hHElriLBznmMAwtz1zHk88gnNAzgdX8O3ulAzA/arQHHnxgq0YPQTR/N5YyMB1LR5xllZlWgDnN3p/nj3/DP4UAG7/OPxxj36460CDd05/Dt6/rj8aBhu568/wCf8KAF3f5P6f047mj+tgE3f5+vr6/4HnjFABuzznOefr/nOPb8BQAZz/n/ABoAN3/1vz7fyx+lAEG4+v8An+nXHHFABuP6f4/55oATcfX/AD0/rQAbsd+n+fx6fjjHajQA3f4+3H+f50AG7oO/Pr/kUABP+fr/AJHWgBdx9f8APOP5/nR/X9fcB23hDRUvZH1G6USQ28gjgiYZWScBXLsDwViBTavIZ25xsIYC56jQIKACgAoAayq6srAMrAqysAQykYIIPBBBwQeCKAPFvEWmjStSlhjVhbSbZ7XIJAR/vRhj18qQMnUnYEZjk0DMLdjvyfb0oAXcev8A9b/Pt+fWgPxE3H1/z/j/AJ70AGeB+Yo/UA3Z6H8v88ZoAXcRzn/PvQAm/wBwPp/P/wCv29uy0D+v6/r8w3Ed/wDPvTD+u5X3Y+n/AOruMfh2pf1/XyAXd/n3/Xrjkd6P6/r+rgJu9/1P1ph8g3H1/L/Ofr/9agA3e/6/57/rQGobvfHX8c+/f8aA8hd/8vT0/wDrnjt+FL+v6/rzATPX9aYX/r+r9z3Tw7YjT9ItIiMSSxi5n9fNnAcqR28tNkX/AADPJJJANygQUAFABQAUAYmv6UmradLDj/SI1aW1fHzLMqnCZ/uTAeW46chsbkXAB4USfp/Tn9KWgw3ev+f8/n+Zo0D+vv8A6/rcXcfX/J7f/q/wo0ATd/L9O3+fr2p6AG457/y//V/jR/WoBn/D/wDXil/Xp94XDd7++c/5/wAj0p6BqLuPqaWgFfd3z/n8aNAE3H3/AM9x/j6e1GnoH+Qu4nP5/wA+9MA3c+4+v8/z6YpAJuPr/np+f8u1GgBuz6f/AK/85/8ArUABbn/P+effr0o/HUCxap591bQnpNPDEevSSRUPA5PXH8u1H9f1+If1/X9aH0eBjgcAcADtTELQAUAFABQAUANYkKxUbmCkhem4gcDPueKAPmtpCzMzYyxLEehJJ4HUAc4FLqNDd34c8+v09Pw6Uaf1/X4gG739vT/Pb/OKNA/r5i7un9P8+5+maNg+QmfwpgG4+v8An29/15paB/X9f8EXceuaNAE3H1P+f8/pRoBBuPr7f57/AOfSjQBN34n/AD9D059fSjQP6/q39feG7tx/nPH8/wAelGgBu/z+n8/1o/r9WHqG7/J/+v8AT8KNP60DUN3H+foP8/1oHcXdx1/z/X/OKNBE9pP9nurWYn5YbiGU/SORG+vReMfhQB9LgggEHIPII5BB6EGmIWgAoAKACgAoAQkAEk4ABJJ6ADkk/SgD5kmkV5ZXUbVeR3VfRWbIGBwMAjpSK16f1/WozcfX/Pr9ffrRp/X9fkINx/z/AJ/KjQLibs9+v+f6fpQFxd3+f8/Sj+vmO/8AX9f1+IFj74+uf89aP67CDefX8/8AP8/ejToAm73/AM9KBkG7/OP8/wD1+/agP63/AK/rQTefX6f5/wA/kaNNf6/r+uwg3H1/yf8AGj+vu/r/ADC/9foKW/z/AJ6f0/KjTT+v6/q4f1/Wv/BDd/k+/b6f59KNBhux6fTtRp/XmFw3Z/P/AD+P+PFH/B/r+vzDb+v6/wCHOk8KaXBrOrpaXQdrdYJ55VjfYxCKqL8w5A8yVOnJ6dM0aC6HvdrCba3gt97SeREkKyN990jUIjPjgyFAN7AAM+5gqghQxFigAoAKACgAoAr3UH2m2nt/MaITxPC0iAF0SRSjlM8B9pOxiGCthirAbSAeB+KtKh0bV5LS23i3aGGeISNvcLIpRwWwNw82OTBPIBxzjNIdzm93T/P+evejQf8AX9f1+Iu70/z/APX4oD+v6+8TP+f89KP6/wCHF/X/AAwbv0/n2/8Arf8A6qNB3At15o0F8v6/4cXf2z/k/wCTiiw/kG78P5f5H0o6Bf8Ar7itmjQLilv/AK/+etH9ff8AMX9eX9f8AN35f/r74o03H/X9bibv8f8AP1/X8KNA/rzDd6/55o0/r+vmAbv8/rRoFw3flz/hRp/X9f16hc9E+GpB1q7B+9/Zc2Pcfa7Mt+u3rz1x3o6iPbKYgoAKACgAoAKACgDxH4kkDXLXHB/sqAn/AMC73H48c57AUmNHnu7tn8v8/n/jRoP+v6/r/gGfejQLi7j60aB/X9fqJu9Sfzo0C/l+P/AF3Hv09/8AP+frRp/wwX8ugm7v+f8An/PPvRp/X5Brp/W4u71/z/npQBW3++KAf9fl/X9MXcfyoC/9f1YN/P8An/P/AOr2oDtp/X9dbBu/n/8Ar/lRp/Xb+tg+Qbvx/wA/jRoF/L9P63DcfX/J/pRp/X9bgG7/AD/n1o03C52XgK9S18SWiu2xbyKe0yem+RPMiUn/AG5YY0A/vsKEwZ9C0yQoAKACgAoAKACgD558eXyXfiS7VGDLZpDZgggjfEu+Zep5SeSRGHGGUgj1Xf8Ar+upS06f8McduP8ASloH9f18hC3v/n/P609A/r+t+n9MUPjv/WjT+v6/rQPUN35/5z1o0+QCbv8AP50aBf8Ar+v+GF3H/P8An3o0C4bv8/59qPw/rQCvu7f4/l19T/Klp/X9f8AP6/r+thN2Oh/SndB/Wwu73/X/AD9KV0H9f1/XmJu/z/n/ADij/MLsXd/nt6Yx+lAX8v6/rqG7/P8An0/SjT+v60C4Bv8AP/16en/AC4qyMjK6MUdSGVlbayspDBlYYIYEAhhggjINHYL+R6n4O8Zavd61Z6dql8Z7W4SWGPfDbq3niMvCXmSJZXLFDGNznc8i7snBBcT8j2umIKACgAoAKAPFfGHjTV7PWb3TtLvfItrdYoHKwwO/nmMNPslkiaRCrP5eVIKvGWQjOaLjPK2kZ2Z3dmd2LM7MWZmbkszE5ZmJyWJJJOSc0h/10G7v8e1Gn9f1/wAEL+X9eX9ai7v85+vv/n6ZpBcTd7/j/jj2p6Bf/gff26i7v8+/r+n09qWn9f1YNf6/rzDd+HP+f8+9GgXDd/L/AD7UBt0/4cTf74H+e/6UAV93v/n+VGgf15hu/n/9Y/nRdB/X3f5i7vf/AD/n/PoaBf8Ar+v68uxux+v/ANf8KNAv/X9f8OG7/H8aNPwC/wDX9XDf0/z/APX/AF+tAeQbu3v/AJ5o0C/+Wv8AX+YbuO9A7/f/AF/X5m/4Vfb4k0Q5xnUrRf8AvqUJjnPXOB/k00J/1/XmfVFMkKACgAoAKAPlXxRIW8R652xql6vXP3J3X+gI9BxzS0/r7ijC3e9LQL7Buxij+v68wv27Cbvfp/8Aro+QC7vwo0C/kG40f1/X9feFw3elH9f1/XULhu/+t0oC/r/XcN3H+fT/AD/WjT+v1C/3/wBP8yvu/wA8f5/z9KLhcN2OPz/H9KNAuG7vn8fr/n/PWjQP6/r+vIN3+fxouh6Bv9/8/wA/89aBBu/z/n6//Wo0DTsG7/PPaj7h3/r+ugbvU9ef84oF9/8Al5HQeFBv8S6EOf8AkKWbdR/BMr9+3y8jqRwOaYX8j6vpkhQAUAFABQB8neKsr4k11WHP9q3zfg9w7r+akEfXip6lf1/X6mDu/XrRoF9tv8g3etGnYExN2P8AP0ov/X9f5hf+v6Qu7/P9KNAv5XE3fh/+rn/PSj+v6/r5hf8Ary/ryFDf596P66h/X9f8OG7/AD+nb0/xo0/r+uof1/X6ib+/9OvH+f50B/X9P1/4cg3f0/z/ACoVgv5Cbz7/AP1v8/56UB8hd3v+v+fw6UB8vw/roJu6fT1/z60f1/X9dB/IN3f9f8P/AK1H9f0gF3e9HUX9f1cN/v8A5x0o0/UPl5irudgigszEKqqNzMxOAoUZJJPAA5J4FAX/AK/zPZfB/wAPdbsdU0zWNRa0tobdzcNaeZJJebjC4jRkWLyEId1L/vyyAMNu4Yqgb/r5nuNBIUAFABQAUAeGeL/h7rl5qmp6vp5tLmC4c3K2qyOl5u8tfMRY3iELsXU7Ns+58gbQxxSKTPGySpKkFWBIKkEEEcEEcEEdCCMjvSuguG7n/P8An/PWi4XDd7/T/P8An+lAw3//AFv/AK30/wAaBBu/Pp/WjQd/IN+e/wDn/Io/r+v68g+Qbv8AP5Yo0F+AbvX/AD3o0D+tivu9D7/5/LjtQP8Ay6/1uG76/j/n3oC6Ddnv/n/P/wCv1AE3f59qLiuG7/PH+fSgdySJJJpEigjkmlkYIkUaNJJIx6KqIC7MT/CASaAuekaH8MNe1MJNqGzR7ViCRcAyXroepW0Ujyzxgi5lgcHBEbCnYVz2HRPAfh3Q2imitWvLyIhlvL5hPIrjBDRRAJbRFGGY3SHzV4JlYgGnYR2dAgoAKACgAoAKACgDidc8AeHdcaSd7d7G9lJZ7uxYRNI5YszSwsHt5WdiTI5iEz55lFFh3PH9c+GPiDTN0tgE1m2GebVSl4qgZy9o7EsT0AtpbhieqqDSsO55xIJInaOZHjkjYo8cisjo6nBVkYBlYHgggEHORUh8hu7+f+e/5U9B6Bv/AM/5557/AI0v6/roL+v66BuPt9P1/P8AWmP+vl/XQN3+fTvQIN3v2xQPQr7v/wBX+fpRcLhu9evHv6/WgP6/r/hxN34/5/z0oC/9f1/w5e0/T9Q1WcW2m2dxeznkpbxNIVH96QgbY055eQqg7sM0fIL/ANf1/X6euaD8Iruby5/EF4trEQGaxsystyf9iW5Ia3hPXPki54OA6nkOwrnsWj+G9F0GIR6ZYQwNjDXBXzLuTPXzLmTdMQeuwMI1yQiKOKYjcoEFABQAUAFABQAUAFABQAUAFAGBrXhnRPEEZTU7GKWTbtS6QeVeRY+75dymJNqnny3Lwk/fjYcUDvY8c174R39v5k+gXa30Iyy2V2VhvFA6JHPhbadveQWnHHzHqrdh3PJr6wvtLuGtdQtLizuF5MVxE8bEdAy7gA6H+F0LI3VWIpev9f1/THdf1/X9eRS3f45/z/k0Bfy/r/gChv8AP4H/ABzRcPz/AK/rUN359/50XC+xX3e/+f0pBdCbvf05/wA9v8igD1zwN8N5dbji1bW/MttKfElrbITHc365BEjNjMFm4+66kTTqd0JjjKTPSXcTf9bn0Np+m2GlW62unWcFnboABHBGqAkcbnYfNI56tJIzOxJLMSSaYi9QIKACgAoAKACgAoAKACgAoAKACgAoAKACgChqGmafqtu1rqVnb3tuwP7ueNX2kjG+Nj88UgH3ZImSRTyrAjNAHzt46+HM2gpJqujmW60kZa4hfL3GnA8b2Ycz2vYykeZCP9duXM1S12KTPKN3+f8APP8An3oGJu9/8/596Xy/r8A/r+kQbvf/ADxRcNP6X6HoPw58KjxPrYe6TdpWmCO6vRj5bh2Y/ZrI9eLhkdpeObeGZAyO6MGtfkDZ9aKqoqoiqiIoVEUBVVVGFVVGAqqAAAAAAMCqIHUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFADWVXVkdVdHUq6MAysrDDKynIZWBIIIIIODxQB8k/ETwuPDGuH7MpGmakr3ViAPlhw/+kWYPf7O7IU/6YSwhizbyZenoUn/XyOA3/j3/AM/5/KkPRAD/2Q==";
+interface HeadshotImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+}
+declare class HeadshotImage extends React.Component<HeadshotImageProps> {
+    private mounted;
+    state: {
+        loaded: boolean;
+    };
+    constructor(props: HeadshotImageProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onLoad: () => void;
+    render(): JSX.Element;
+}
+export default HeadshotImage;

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

@@ -0,0 +1,50 @@
+import Image from '@/components/atoms/Image';
+import React from 'react';
+export const BASE_64_HEADSHOT_THUMBNAIL_FALLBACK = 'data:image/jpeg;base64,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';
+class HeadshotImage extends React.Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "mounted", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                loaded: false,
+            }
+        });
+        Object.defineProperty(this, "onLoad", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                if (!this.mounted)
+                    return;
+                this.setState({ loaded: true });
+            }
+        });
+        this.state = {
+            loaded: false,
+        };
+    }
+    componentDidMount() {
+        this.mounted = true;
+    }
+    componentWillUnmount() {
+        this.mounted = false;
+    }
+    render() {
+        return (React.createElement(React.Fragment, null,
+            !this.state.loaded && (React.createElement(Image, { crossOrigin: "anonymous", ...this.props, src: BASE_64_HEADSHOT_THUMBNAIL_FALLBACK, alt: "Player Headshot Loading" })),
+            React.createElement(Image, { crossOrigin: "anonymous", onLoad: this.onLoad, alt: "Athlete Thumbnail", style: {
+                    ...(this.props.style || {}),
+                    display: this.state.loaded ? 'block' : 'none',
+                }, ...this.props })));
+    }
+}
+export default HeadshotImage;

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

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

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

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

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

@@ -0,0 +1,106 @@
+/// <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?: 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<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?: 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<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: "panel-nav-label 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;