@twilio/flex-ui/src/components/theme.d.ts

Twilio Flex UI

import styled from "@emotion/styled";
import { ButtonThemeProps, CSSProps, Theme as ControlsTheme } from "../flex-ui-core/src";
import { ConnectingOutboundCallCanvasThemeProps } from "./canvas/ConnectingOutboundCallCanvas/ConnectingOutboundCallCanvas.definitions";
import { IncomingTaskCanvasThemeProps } from "./canvas/IncomingTaskCanvas/IncomingTaskCanvas.definitions";
import { NewTaskCanvasThemeProps } from "./canvas/NewTaskCanvas/NewTaskCanvas.definitions";
import { NoTasksCanvasThemeProps } from "./canvas/NoTaskCanvas/NoTasksCanvas.definitions";
import { ParticipantsCanvasThemeProps } from "./canvas/ParticipantsCanvas/ParticipantsCanvas.definitions";
import { TaskCanvasThemeProps } from "./canvas/TaskCanvas/TaskCanvas.definitions";
import { TaskDetailsPanelThemeProps } from "./canvas/TaskDetailsPanel/TaskDetailsPanel.definitions";
import { TaskInfoPanelThemeProps } from "./canvas/TaskInfoPanel/TaskInfoPanel.definitions";
import { ProfileCardThemeProps } from "./MainHeader/ProfileCard/ProfileCard";
import { OutboundDialerPanelThemeProps } from "./OutboundDialerPanel/OutboundDialerPanel.definitions";
import { TaskCanvasThemeProps as SupervisorTaskCanvasThemeProps } from "./supervisor/TaskCanvas/TaskCanvas.definitions";
/**
 * Flex includes a `withTheme()` helper function that adds data about the current Theme to your component.
 * @name withTheme
 * @param {React.ReactElement<any>} Component Any user-defined React component
 * @returns {React.ReactElement<any>} `withTheme()` creates a Higher order component which can read the current [Theme](Theme) properties.
 * @memberOf context-providers
 * @kind function
 * @example
 * import React from "react";
 * import { withTheme } from "@twilio/flex-ui";
 * import styled from "react-emotion";
 *
 * class MyComponent extends React.Component {
 * constructor(props) {
 *         super(props);
 *        // Print the current theme object
 *        // You can have a look at at the structure of this object in the console
 *         console.log("Current theme: ", this.props.theme);
 *     }
 *     render() {
 *        // Return general text in the component
 *         return (
 *             <TaskSID>
 *                   <p>Now, we can change the color of the component's background.</p>
 *             </TaskSID>
 *         );
 *     }
 * }
 * // The component that has its background color set
 * // to the same color as MainHeader background
 * const TaskSID = styled("div")`
 *     background-color: ${(props) => props.theme.MainHeader.Container.background};
 * `;
 * // Note the added withTheme() helper function
 * export default withTheme(MyComponent);
 */
export { css, useTheme, withTheme } from "@emotion/react";
export interface ChannelColors {
    inactive: string;
    call: string;
    video: string;
    sms: string;
    chat: string;
    facebook: string;
    googleBusinessMessages: string;
    line: string;
    whatsapp: string;
    appleMessagesForBusiness: string;
    email: string;
    custom: string;
}
/**
 * Base Flex colors
 * @typedef Theme.BaseThemeColors
 * @ignore
 * @property {string} holdColor - Color of the hold button
 * @property {string} declineColor - Color of the decline button
 * @property {string} declineTextColor - Color of the decline text
 * @property {string} acceptColor - Color of the accept button
 * @property {string} acceptTextColor - Color of the accept text
 * @property {string} completeTaskColor - Color of the "complete task" button
 * @property {string} flexBlueColor - FlexBlue color
 * @property {string} agentAvailableColor - Color that indicates available agent status
 * @property {string} agentBusyColor - Color that indicates busy agent status
 * @property {string} agentUnavailableColor - Color that indicates unavailable agent status
 * @property {string} agentOfflineColor - Color that indicates offline agent status
 */
export interface BaseThemeColors {
    holdColor: string;
    declineColor: string;
    acceptColor: string;
    declineTextColor: string;
    acceptTextColor: string;
    completeTaskColor: string;
    flexBlueColor: string;
    agentAvailableColor: string;
    agentBusyColor: string;
    agentUnavailableColor: string;
    agentOfflineColor: string;
}
/**
 * Theme options. Material UI theme options are also valid - See Material UI theme [customisations](https://material-ui.com/customization/themes/) for more info.
 * @category Theme
 * @interface Theme
 * @property {object} RuntimeLoginView Theme properties for RuntimeLoginView component
 * @property {CSSProps} RuntimeLoginView.Container CSS properties for the RuntimeLoginView container
 * @property {CSSProps} RuntimeLoginView.LoginButton CSS properties for the login button on the login form
 * @property {object} LoginFormView  Theme properties for the login form
 * @property {CSSProps} LoginFormView.Container CSS properties for the login form wrapper
 * @property {CSSProps} LoginFormView.LoginButton CSS properties for the LoginButton
 * @property {CSSProps} RootContainer CSS properties for the upmost application wrapper
 * @property {object} AgentDesktopView Theme properties for the AgentDesktopView component
 * @property {CSSProps} AgentDesktopView.Panel1 CSS properties for the panel containing the task list and task detail
 * @property {CSSProps} AgentDesktopView.Panel2 CSS properties for the panel containing the CRM view
 * @property {CSSProps} AgentDesktopView.ContentSplitter CSS properties for the component splitter, the element that, once dragged, resizes the view
 * @property {object} MainHeader Theme properties for the MainHeader component, the banner at the top of the UI
 * @property {CSSProps} MainHeader.Container CSS properties for the header wrapper element
 * @property {Theme.ButtonThemeProps} MainHeader.Button Style Properties for the MUI buttons used in header like "Toggle Side nav", "Toggle mute", "Toggle dialpad sidebar"
 * @property {CSSProps} MainContainer CSS properties for the element wrapping sideNav and views
 * @property {object} SideNav Theme properties for the sidebar elements
 * @property {CSSProps} SideNav.Container CSS properties for the sidebar wrapper
 * @property {Theme.ButtonThemeProps} SideNav.Button Style properties for the sidebar buttons
 * @property {Theme.ButtonThemeProps} SideNav.Icon Style properties for the sidebar icons
 * @property {Theme.TaskCanvasThemeProps} TaskCanvas Style Properties for the component that renders the task canvas.
 * @property {object} TaskCanvasHeader Theme properties for the TaskCanvasHeader component
 * @property {CSSProps} TaskCanvasHeader.Container CSS properties for the TaskCanvasHeader container
 * @property {Theme.ButtonThemeProps} TaskCanvasHeader.EndTaskButton Style properties for the end task button
 * @property {Theme.ButtonThemeProps} TaskCanvasHeader.WrapupTaskButton Style properties for the wrap up task button
 * @property {Theme.IncomingTaskCanvasThemeProps} IncomingTaskCanvas Style Properties for the IncomingTaskCanvas
 * @property {Theme.ConnectingOutboundCallCanvasThemeProps} ConnectingOutboundCallCanvas Style Properties for the outbound call canvas
 * @property {object} CallCanvas  Theme properties for the CallCanvas component
 * @property {CSSProps} CallCanvas.Button CSS properties for all the buttons on the call canvas
 * @property {CSSProps} CallCanvas.HangUpButton CSS properties for the hang up call button
 * @property {Theme.TaskInfoPanelThemeProps} TaskInfoPanel Style properties for the task info panel
 * @property {Theme.TaskDetailsPanelThemeProps} TaskDetailsPanel Style properties for the task details panel
 * @property {object} TaskList Theme properties for the TaskList component
 * @property {object} TaskList.Filter Theme properties for the task list filter component
 * @property {CSSProps} TaskList.Filter.Container CSS properties for the filter wrapper component
 * @property {CSSProps} TaskList.Filter.EntryButton CSS properties for the filter entry button
 * @property {object} TaskList.Filter.Menu Theme properties for the filter menu
 * @property {CSSProps} TaskList.Filter.Menu.Items CSS properties for menu items
 * @property {CSSProps} TaskList.Filter.Menu.Item CSS properties for menu item
 * @property {object} TaskList.Item Theme properties for the TaskList items
 * @property {CSSProps} TaskList.Item.Container CSS properties for all item containers
 * @property {CSSProps} TaskList.Item.SelectedContainer CSS properties for the selected item container
 * @property {CSSProps} TaskList.Item.Icon CSS properties for all icons
 * @property {CSSProps} TaskList.Item.SelectedIcon CSS properties for selected icon
 * @property {object} TaskList.Item.Buttons Theme properties for the Item buttons
 * @property {CSSProps} TaskList.Item.Buttons.DefaultButton CSS properties for the default button
 * @property {CSSProps} TaskList.Item.Buttons.AcceptButton CSS properties for the accept button
 * @property {CSSProps} TaskList.Item.Buttons.RejectButton CSS properties for the reject button
 * @property {object} TaskCard Theme properties for the TaskCard component
 * @property {object} TaskCard.Container Theme properties for the wrapper component
 * @property {CSSProps} TaskCard.Container.Default CSS properties for the wrapper component
 * @property {CSSProps} TaskCard.Container.Selected CSS properties for when the wrapper is selected
 * @property {CSSProps} TaskCard.Container.Hover CSS properties for when the wrapper is hovered on
 * @property {object} TaskCard.IconArea Theme properties for the task card icon
 * @property {CSSProps} TaskCard.IconArea.Default CSS properties for the task card icon
 * @property {object} TaskCard.ContentArea Theme properties for the TaskCard content
 * @property {CSSProps} TaskCard.ContentArea.Default CSS properties for the content
 * @property {CSSProps} TaskCard.ContentArea.Inactive CSS properties for when the content area is inactive
 * @property {CSSProps} TaskCardPlaceholder CSS properties for placeholder component when there are no tasks to display
 * @property {Theme.NoTasksCanvasThemeProps} NoTasksCanvas Style properties for the NoTasksCanvas component
 * @property {object} CRMContainer Theme properties for the CRMContainer
 * @property {CSSProps} CRMContainer.Container CSS properties for the wrapper component
 * @property {object} CRMContainer.Placeholder Theme properties for the placeholder component
 * @property {CSSProps} CRMContainer.Placeholder.Container CSS properties for the wrapper
 * @property {CSSProps} CRMContainer.Placeholder.Icon CSS properties for the icon
 * @property {CSSProps} CRMContainer.Placeholder.Button CSS properties the button
 * @property {CSSProps} CRMContainer.Placeholder.Hint CSS properties the hint
 * @property {object} Supervisor Theme properties for the Supervisor component
 * @property {CSSProps} Supervisor.Container CSS properties for the wrapper component
 * @property {Theme.SupervisorTaskCanvasThemeProps} Supervisor.TaskCanvas Style properties for TaskCanvas component
 * @property {object} Supervisor.WorkerCanvas Theme properties for the WorkerCanvas component
 * @property {CSSProps} Supervisor.WorkerCanvas.Container CSS properties for the wrapper
 * @property {CSSProps} Supervisor.WorkerCanvas.Header CSS properties for the header
 * @property {CSSProps} Supervisor.WorkerCanvas.SectionCaption CSS properties for all the section captions
 * @property {CSSProps} Supervisor.FilterButton CSS properties for the filter button
 * @property {object} Supervisor.Search Theme properties for the search input
 * @property {CSSProps} Supervisor.Search.Container CSS properties for the wrapper
 * @property {CSSProps} Supervisor.Search.Button CSS properties for the search button
 * @property {object} WorkerDirectory Theme properties for the WorkerDirectory component
 * @property {CSSProps} WorkerDirectory.Container CSS properties for the wrapper
 * @property {object} WorkerDirectory.Header Theme properties for the header
 * @property {CSSProps} WorkerDirectory.Header.Button CSS properties for the clickable header
 * @property {CSSProps} WorkerDirectory.Header.Container CSS properties for the wrapper
 * @property {CSSProps} WorkerDirectory.ItemsContainer CSS properties for all the item wrapper components
 * @property {CSSProps} WorkerDirectory.Item CSS properties for all the items
 * @property {CSSProps} WorkerDirectory.ItemActionButton CSS properties for the action button
 * @property {object} WorkerDirectory.QueueItem Theme properties for queue items
 * @property {CSSProps} WorkerDirectory.QueueItem.Avatar CSS properties for the avatar
 * @property {object} WorkerSkills Theme properties for the WorkerSkills component
 * @property {CSSProps} WorkerSkills.SaveButton CSS properties for the save button
 * @property {CSSProps} WorkerSkills.CancelButton CSS properties for the cancel button
 * @property {CSSProps} WorkerSkills.DeleteButton CSS properties for the delete button
 * @property {object} LoadingView Theme properties for the LoadingView component
 * @property {CSSProps} LoadingView.Container CSS properties for the wrapper
 * @property {object} ErrorPage Theme properties for the Error Page
 * @property {CSSProps} ErrorPage.Container CSS properties for the wrapper component
 * @property {object} ErrorPage.Actions Theme properties for the error page action buttons
 * @property {CSSProps} ErrorPage.Actions.RetryButton CSS properties for the retry button
 * @property {CSSProps} ErrorPage.Actions.DownloadReportButton CSS properties for the download report button
 * @property {Theme.ParticipantsCanvasThemeProps} ParticipantsCanvas Style properties for the Participants Canvas
 * @property {Theme.OutboundDialerPanelThemeProps} OutboundDialerPanel Style properties for the Outbound Dialer
 * @property {(Theme.CoreThemeColors | Theme.BaseThemeColors)} colors theme colors
 * @category Theming
 */
export interface Theme extends ControlsTheme {
    /**
     * UserActivityControls deprecated but maintained to avoid breaking change in types
     * @type {object} Theme.UserActivityControls Theme properties for the popup component that opens once the agent clicks on their profile picture in the top right conrner of the UI
     * @property {CSSProps} UserActivityControls.Divider CSS properties for the element dividing activity list from logout button
     * @property {CSSProps} UserActivityControls.Items CSS properties for list of items / button in the popup
     * @property {CSSProps} UserActivityControls.Item CSS properties for the single item / button in the popup
     * @deprecated
     * @deprecatedSince 2.0.0
     * @altRecommendation No direct alternative available, however font color and other design aspects are still able to be customized using Twilio Paste and the global theme.
     * @altRecommendationExample
     * Please see above.
     * @ignore
     */
    UserActivityControls: {
        Divider: CSSProps;
        Items: CSSProps;
        Item: CSSProps;
    };
    /**
     * not used
     * @ignore
     */
    LoginView: {
        Container: CSSProps;
        LoginButton: CSSProps;
        Logo: CSSProps;
    };
    RuntimeLoginView: {
        Container: CSSProps;
        LoginButton: CSSProps;
    };
    LoginFormView: {
        Container: CSSProps;
        LoginButton: CSSProps;
    };
    RootContainer: CSSProps;
    AgentDesktopView: {
        Panel1: CSSProps;
        Panel2: CSSProps;
        ContentSplitter: CSSProps;
    };
    MainHeader: {
        Container: CSSProps;
        Button: ButtonThemeProps;
    };
    MainContainer: CSSProps;
    ProfileCard: ProfileCardThemeProps;
    SideNav: {
        Container: CSSProps;
        Button: ButtonThemeProps;
        Icon: ButtonThemeProps;
        SelectedIcon: ButtonThemeProps;
    };
    TaskCanvas: TaskCanvasThemeProps;
    TaskCanvasHeader: {
        Container: CSSProps;
        EndTaskButton: ButtonThemeProps;
        WrapupTaskButton: ButtonThemeProps;
        JoinCallButton: ButtonThemeProps;
    };
    IncomingTaskCanvas: IncomingTaskCanvasThemeProps;
    ConnectingOutboundCallCanvas: ConnectingOutboundCallCanvasThemeProps;
    CallCanvas: {
        Button: CSSProps;
        HangUpButton: CSSProps;
    };
    TaskInfoPanel: TaskInfoPanelThemeProps;
    TaskDetailsPanel: TaskDetailsPanelThemeProps;
    TaskList: {
        Filter: {
            Container: CSSProps;
            EntryButton: CSSProps;
            Menu: {
                Items: CSSProps;
                Item: CSSProps;
            };
        };
        Item: {
            Container: CSSProps;
            SelectedContainer: CSSProps;
            Icon: CSSProps;
            SelectedIcon: CSSProps;
            Buttons: {
                DefaultButton: CSSProps;
                AcceptButton: CSSProps;
                RejectButton: CSSProps;
            };
        };
    };
    TaskCard: {
        Container: {
            Default: CSSProps;
            Selected: CSSProps;
            Inactive: CSSProps;
            Hover: CSSProps;
        };
        IconArea: {
            Default: CSSProps;
        };
        ContentArea: {
            Default: CSSProps;
        };
    };
    TaskCardPlaceholder: CSSProps;
    NoTasksCanvas: NoTasksCanvasThemeProps;
    CRMContainer: {
        Container: CSSProps;
        Placeholder: {
            Container: CSSProps;
            Icon: CSSProps;
            Button: CSSProps;
            Hint: CSSProps;
        };
    };
    Supervisor: {
        Container: CSSProps;
        TaskCanvas: SupervisorTaskCanvasThemeProps;
        WorkerCanvas: {
            Container: CSSProps;
            Header: CSSProps;
            SectionCaption: CSSProps;
        };
        FilterButton: CSSProps;
        Search: {
            Container: CSSProps;
            Button: CSSProps;
        };
    };
    WorkerDirectory: {
        Container: CSSProps;
        Header: {
            Button: CSSProps;
            Container: CSSProps;
        };
        ItemsContainer: CSSProps;
        Item: CSSProps;
        ItemActionButton: CSSProps;
        QueueItem: {
            Avatar: CSSProps;
        };
    };
    WorkerSkills: {
        SaveButton: CSSProps;
        CancelButton: CSSProps;
        DeleteButton: CSSProps;
    };
    LoadingView: {
        Container: CSSProps;
    };
    ErrorPage: {
        Container: CSSProps;
        Actions: {
            RetryButton: CSSProps;
            DownloadReportButton: CSSProps;
        };
    };
    ParticipantsCanvas: ParticipantsCanvasThemeProps;
    QueueStats: {
        Container: CSSProps;
        TilesGrid: CSSProps;
        TableContainer: CSSProps;
    };
    QueuesStats: {
        Container: CSSProps;
        TilesGrid: CSSProps;
        TableContainer: CSSProps;
        QueuesDataTableCell: CSSProps;
        QueueStatsFilterPanel: {
            Header: CSSProps;
            Container: CSSProps;
            HeaderButton: CSSProps;
            QueueStatsFilterTabs: {
                Container: CSSProps;
                LabelsContainer: CSSProps;
                Button: ButtonThemeProps;
                Active: CSSProps;
                Inactive: CSSProps;
            };
        };
    };
    ConversationView: {
        Container: CSSProps;
        Player: {
            Container: CSSProps;
        };
        SegmentInfo: {
            Container: CSSProps;
        };
        ConversationInfo: {
            Container: CSSProps;
        };
        Questionnaire: {
            Answer: CSSProps;
            AnswerSelected: CSSProps;
            AnswerHover: CSSProps;
        };
    };
    ToggleLoggingPanel: {
        IconButton: CSSProps;
        Panel: CSSProps;
        Button: CSSProps;
    };
    ErrorUI: {
        Panel: CSSProps;
        IconButton: CSSProps;
        NoErrorsIcon: CSSProps;
        CloseButton: CSSProps;
        DownloadButton: CSSProps;
        ClearButton: CSSProps;
        ActionText: CSSProps;
        WarningIcon: CSSProps;
        ErrorContainer: CSSProps;
    };
    OutboundDialerPanel: OutboundDialerPanelThemeProps;
    TranscriptPlayer: {
        Sidepanel: CSSProps;
    };
    Dashboards: {
        Sidebar: {
            Container: CSSProps;
            Divider: CSSProps;
            ActionButton: CSSProps;
            Item: CSSProps;
            SelectedItem: CSSProps;
        };
    };
    NewTaskCanvas: NewTaskCanvasThemeProps;
    AppStatusSidebar: {
        PlatformService: {
            WarningIcon: CSSProps;
            SuccessIcon: CSSProps;
            InformationIcon: CSSProps;
            MoreInfoText: CSSProps;
            StatusPageAnchor: CSSProps;
            ContentContainer: CSSProps;
        };
        ApplicationStatus: {
            InfoContainer: CSSProps;
            UnavailableContainer: CSSProps;
        };
        YourApp: {
            WarningIcon: CSSProps;
            SuccessIcon: CSSProps;
            InformationIcon: CSSProps;
            DegradedIcon: CSSProps;
        };
    };
    ProfileConnector: {
        Container: CSSProps;
        LoadingView: {
            LoadingContainer: CSSProps;
        };
        ProfileNotFoundView: {
            SearchContainer: CSSProps;
            StatContainer: CSSProps;
        };
        ProfileView: {
            ProfileViewContainer: CSSProps;
            ProfileStatGroup: CSSProps;
            ProfileGroupHeader: CSSProps;
            StyledSeparator: CSSProps;
        };
        SearchView: {
            SearchListItem: {
                SearchItemContainer: CSSProps;
                SearchItemTextContainer: CSSProps;
            };
            SearchContainer: CSSProps;
            SearchSectionContainer: CSSProps;
            SearchSectionHeader: CSSProps;
            SearchBarContainer: CSSProps;
            SearchListContainer: CSSProps;
            SearchViewNotFoundContainer: CSSProps;
            ProfileCloseContainer: CSSProps;
            StyledComboBox: CSSProps;
        };
    };
    FlexUnifyContainer: {
        ProfileHeader: {
            ProfileHeaderContainer: CSSProps;
            StyledSeparator: CSSProps;
        };
        ProfileHighlights: {
            ProfileHighlightsContainer: CSSProps;
        };
        CustomerProfileView: {
            CustomerProfileViewContainer: CSSProps;
        };
    };
    DeviceManager: {
        Menu: CSSProps;
        MenuItemText: CSSProps;
    };
    DEVICE_MANAGER_MENU_BUTTON: CSSProps;
    ConditionalHighlightingBadge: CSSProps;
    TopicList: CSSProps;
    NotificationPanel: {
        Container: CSSProps;
        Header: CSSProps;
    };
    NOTIFICATION_FILTER_GROUP_SET: CSSProps;
    NOTIFICATION_FILTER_OPTION_CONTROL: CSSProps;
}
export default styled;
export type PropsWithTheme<P> = {
    theme?: Theme;
} & P;
/**
 * @typedef ThemeProps
 * @property {Theme} [theme] The theme
 * @memberof Theme
 */
export type ThemeProps = {
    theme?: Theme;
};
/**
 * @ignore
 * @property {Theme.ProfileConnector} ProfileConnector Theme properties for ProfileConnector component.
 * @property {CSSProps} ProfileConnector.Container CSS properties for Container of Profile Container.
 * @property {object} ProfileConnector.LoadingView Theme properties for LoadingView component.
 * @property {CSSProps} ProfileConnector.LoadingView.LoadingContainer CSS properties for LoadingViewContainer of Profile Container.
 * @property {object} ProfileConnector.ProfileNotFoundView Theme properties for ProfileNotFoundView.
 * @property {CSSProps} ProfileConnector.ProfileNotFoundView.SearchContainer CSS properties for SearchContainer of ProfileNotFoundView.
 * @property {CSSProps} ProfileConnector.ProfileNotFoundView.StatContainer CSS properties for StatContainer of ProfileNotFoundView.
 * @property {object} ProfileConnector.ProfileView Theme properties for ProfileView.
 * @property {CSSProps} ProfileConnector.ProfileView.ProfileViewContainer CSS Properties for ProfileViewContainer of ProfileView.
 * @property {CSSProps} ProfileConnector.ProfileView.ProfileStatGroup CSS Properties for ProfileStatGroup of ProfileView.
 * @property {CSSProps} ProfileConnector.ProfileView.ProfileGroupHeader CSS Properties for ProfileGroupHeader of ProfileView.
 * @property {CSSProps} ProfileConnector.ProfileView.StyledSeparator CSS Properties for StyledSeparator of ProfileView.
 * @property {object} ProfileConnector.SearchView Theme properties for SearchView.
 * @property {CSSProps} ProfileConnector.SearchView.SearchContainer CSS Properties for SearchContainer of SearchView.
 * @property {CSSProps} ProfileConnector.SearchView.SearchSectionContainer CSS Properties for SearchSectionContainer of SearchView.
 * @property {CSSProps} ProfileConnector.SearchView.SearchSectionHeader CSS Properties for SearchSectionHeader of SearchView.
 * @property {CSSProps} ProfileConnector.SearchView.SearchBarContainer CSS Properties for SearchBarContainer of SearchView.
 * @property {CSSProps} ProfileConnector.SearchView.SearchListContainer CSS Properties for SearchListContainer of SearchView.
 * @property {CSSProps} ProfileConnector.SearchView.SearchViewNotFoundContainer CSS Properties for SearchViewNotFoundContainer of SearchView.
 * @property {CSSProps} ProfileConnector.SearchView.ProfileCloseContainer CSS Properties for ProfileCloseContainer of SearchView.
 * @property {CSSProps} ProfileConnector.SearchView.StyledComboBox CSS Properties for StyledComboBox of SearchView.
 * @property {object} ProfileConnector.SearchView.SearchListItem Theme properties for SearchView.SearchListItem.
 * @property {CSSProps} ProfileConnector.SearchView.SearchListItem.SearchItemContainer CSS Properties for SearchItemContainer of SearchListItem
 * @property {CSSProps} ProfileConnector.SearchView.SearchListItem.SearchItemTextContainer CSS Properties for SearchItemTextContainer of SearchListItem
 * @property {Theme.FlexUnifyContainer} FlexUnifyContainer Theme properties for FlexUnifyContainer component.
 * @property {object} FlexUnifyContainer.ProfileHeader Theme properties for ProfileHeader
 * @property {CSSProps} FlexUnifyContainer.ProfileHeader.ProfileHeaderContainer CSS Properties for ProfileHeaderContainer of Profile Header
 * @property {CSSProps} FlexUnifyContainer.ProfileHeader.ProfileHighlightsContainer CSS Properties for ProfileHighlightsContainer of Profile Header
 * @property {CSSProps} FlexUnifyContainer.ProfileHeader.StyledSeparator CSS Properties for line separator
 * @property {object} FlexUnifyContainer.CustomerProfileView Theme properties for CustomerProfileView
 * @property {CSSProps} FlexUnifyContainer.CustomerProfileView.CustomerProfileViewContainer CSS Properties for CustomerProfileViewContainer
 */