import { ReactNode } from 'react';
import { Styles } from 'react-jss';
import { Classes } from 'jss';
import { Color } from '@parlor/common/amplify-schema';
export type ThemeProps = {
    /**
     * ReactNode as theme's children
     */
    children: ReactNode;
    /**
     * default portal location
     * In case the app is shadowDom
     */
    portalLocation?: Element;
    /**
     * Theme Object
     * In case theme is not provided will use variables from @parlor/constants.colors
     */
    theme?: ITheme;
};
export declare enum Colors {
    bg = "#E8E9EF",
    bgDark = "#DFE1E6",
    black = "#000000",
    black10 = "rgba(0, 0, 0, 0.10)",
    black15 = "rgba(0, 0, 0, 0.15)",
    black20 = "rgba(0, 0, 0, 0.2)",
    black26 = "#00000026",
    black50 = "rgba(0, 0, 0, 0.5)",
    blue1 = "#3651DD",
    blue2 = "#7F92F3",
    blue3 = "#C6CFFD",
    blue4 = "#E7EBFF",
    blue5 = "#F4F6FF",
    blue6 = "#0077FE",
    buttonDisabled = "#BABDD0",
    buttonHover = "#163944",
    darkBlue = "#43536D",
    dodgerBlue = "#0073FF",
    gold1 = "#E7B33D",
    gold2 = "#FFE7B0",
    gray1 = "#6C6F76",
    gray2 = "#B9BEC8",
    gray3 = "#DBDEE3",
    gray4 = "#F0F3F8",
    gray5 = "#696969",
    gray50 = "#FBFCFD",
    green1 = "#00C395",
    green2 = "#93E0CE",
    green3 = "#C7FDF0",
    green4 = "#E6FDF9",
    green5 = "#6CDCC2",
    navy1 = "#163944",
    navy2 = "#8A9DA4",
    navy3 = "#C6D3D8",
    navy4 = "#EDF2F3",
    navy5 = "#E9EDF3",
    navy50 = "rgba(25, 33, 99, 0.5)",
    red1 = "#F1324C",
    red2 = "#FFBAC4",
    red3 = "#FFE2E6",
    red4 = "#FFF3F4",
    red5 = "#FB9AA7",
    white = "#ffffff",
    widgetAlert = "#FF3954",
    widgetAlertHover = "#EE334D",
    widgetBG = "#F5F5F5",
    widgetBorder = "#DDDDDD",
    widgetSentimentNegative = "#FF3954",
    widgetSentimentNeutral = "#FFE55D",
    widgetSentimentPositive = "#1EDBB4",
    yellow1 = "#F2CE62",
    yellow2 = "#F3E5BB",
    yellow3 = "#F5F1E5",
    yellow4 = "#FAF9F6"
}
export declare const DEFAULT_THEME: {
    widgetWidgetSideBar: 396;
    postSidebar: 400;
    widePostSidebar: 650;
    needSidebar: 550;
    desiredOutcomeSidebar: 1122;
    taskSidebar: 850;
    ticketSidebar: 550;
    surveyResponse: 550;
    followUpQuestion: 550;
    sidebarWidth: {
        readonly standard: 650;
        readonly xSmall: 396;
        readonly small: 550; /**
         * ReactNode as theme's children
         */
        readonly large: 850;
        readonly xLarge1: 1122;
        readonly xLarge2: 1140;
    };
    bg: Colors.bg;
    bgDark: Colors.bgDark;
    black: Colors.black;
    black10: Colors.black10;
    black15: Colors.black15;
    black20: Colors.black20;
    black26: Colors.black26;
    black50: Colors.black50;
    blue1: Colors.blue1;
    blue2: Colors.blue2;
    blue3: Colors.blue3;
    blue4: Colors.blue4;
    blue5: Colors.blue5;
    blue6: Colors.blue6;
    buttonDisabled: Colors.buttonDisabled;
    buttonHover: Colors.buttonHover;
    darkBlue: Colors.darkBlue;
    dodgerBlue: Colors.dodgerBlue;
    gold1: Colors.gold1;
    gold2: Colors.gold2;
    gray1: Colors.gray1;
    gray2: Colors.gray2;
    gray3: Colors.gray3;
    gray4: Colors.gray4;
    gray5: Colors.gray5;
    gray50: Colors.gray50;
    green1: Colors.green1;
    green2: Colors.green2;
    green3: Colors.green3;
    green4: Colors.green4;
    green5: Colors.green5;
    navy1: Colors.buttonHover;
    navy2: Colors.navy2;
    navy3: Colors.navy3;
    navy4: Colors.navy4;
    navy5: Colors.navy5;
    navy50: Colors.navy50;
    red1: Colors.red1;
    red2: Colors.red2;
    red3: Colors.red3;
    red4: Colors.red4;
    red5: Colors.red5;
    white: Colors.white;
    widgetAlert: Colors.widgetAlert;
    widgetAlertHover: Colors.widgetAlertHover;
    widgetBG: Colors.widgetBG;
    widgetBorder: Colors.widgetBorder;
    widgetSentimentNegative: Colors.widgetAlert;
    widgetSentimentNeutral: Colors.widgetSentimentNeutral;
    widgetSentimentPositive: Colors.widgetSentimentPositive;
    yellow1: Colors.yellow1;
    yellow2: Colors.yellow2;
    yellow3: Colors.yellow3;
    yellow4: Colors.yellow4;
    portalLocation: HTMLElement;
    fontFamily: string;
    fontFamilyMono: string;
    textColor: Colors;
    widgetPrimary: Colors;
    widgetSecondary: Colors;
    widgetPrimaryHover: string;
    widgetSecondaryHover: string;
    widgetPrimaryPreSelectHover: string;
    widgetSecondaryPreSelectHover: string;
    /**  @deprecated use `widgetPrimaryTextColor` instead */
    textColorOnPrimary: Colors;
    widgetPrimaryTextColor: Colors;
    /**  @deprecated use `widgetSecondaryTextColor` instead */
    textColorOnSecondary: Colors;
    widgetSecondaryTextColor: Colors;
    useWhiteOnPrimary: boolean;
    useWhiteOnSecondary: boolean;
};
export declare const APP_COLORS_STATIC: ({
    id: Color;
    label: Color;
    color: Colors;
    textColor: Colors;
} | {
    id: Color;
    label: string;
    color: Colors;
    textColor?: undefined;
})[];
export type IParlorTheme = typeof DEFAULT_THEME;
export type ITheme = Partial<Record<keyof IParlorTheme, unknown>>;
export declare const ParlorTheme: ({ children, theme: _theme, portalLocation }: ThemeProps) => JSX.Element;
export declare function useAppTheme(): {
    widgetWidgetSideBar: 396;
    postSidebar: 400;
    widePostSidebar: 650;
    needSidebar: 550;
    desiredOutcomeSidebar: 1122;
    taskSidebar: 850;
    ticketSidebar: 550;
    surveyResponse: 550;
    followUpQuestion: 550;
    sidebarWidth: {
        readonly standard: 650;
        readonly xSmall: 396;
        readonly small: 550; /**
         * ReactNode as theme's children
         */
        readonly large: 850;
        readonly xLarge1: 1122;
        readonly xLarge2: 1140;
    };
    bg: Colors.bg;
    bgDark: Colors.bgDark;
    black: Colors.black;
    black10: Colors.black10;
    black15: Colors.black15;
    black20: Colors.black20;
    black26: Colors.black26;
    black50: Colors.black50;
    blue1: Colors.blue1;
    blue2: Colors.blue2;
    blue3: Colors.blue3;
    blue4: Colors.blue4;
    blue5: Colors.blue5;
    blue6: Colors.blue6;
    buttonDisabled: Colors.buttonDisabled;
    buttonHover: Colors.buttonHover;
    darkBlue: Colors.darkBlue;
    dodgerBlue: Colors.dodgerBlue;
    gold1: Colors.gold1;
    gold2: Colors.gold2;
    gray1: Colors.gray1;
    gray2: Colors.gray2;
    gray3: Colors.gray3;
    gray4: Colors.gray4;
    gray5: Colors.gray5;
    gray50: Colors.gray50;
    green1: Colors.green1;
    green2: Colors.green2;
    green3: Colors.green3;
    green4: Colors.green4;
    green5: Colors.green5;
    navy1: Colors.buttonHover;
    navy2: Colors.navy2;
    navy3: Colors.navy3;
    navy4: Colors.navy4;
    navy5: Colors.navy5;
    navy50: Colors.navy50;
    red1: Colors.red1;
    red2: Colors.red2;
    red3: Colors.red3;
    red4: Colors.red4;
    red5: Colors.red5;
    white: Colors.white;
    widgetAlert: Colors.widgetAlert;
    widgetAlertHover: Colors.widgetAlertHover;
    widgetBG: Colors.widgetBG;
    widgetBorder: Colors.widgetBorder;
    widgetSentimentNegative: Colors.widgetAlert;
    widgetSentimentNeutral: Colors.widgetSentimentNeutral;
    widgetSentimentPositive: Colors.widgetSentimentPositive;
    yellow1: Colors.yellow1;
    yellow2: Colors.yellow2;
    yellow3: Colors.yellow3;
    yellow4: Colors.yellow4;
    portalLocation: HTMLElement;
    fontFamily: string;
    fontFamilyMono: string;
    textColor: Colors;
    widgetPrimary: Colors;
    widgetSecondary: Colors;
    widgetPrimaryHover: string;
    widgetSecondaryHover: string;
    widgetPrimaryPreSelectHover: string;
    widgetSecondaryPreSelectHover: string;
    /**  @deprecated use `widgetPrimaryTextColor` instead */
    textColorOnPrimary: Colors;
    widgetPrimaryTextColor: Colors;
    /**  @deprecated use `widgetSecondaryTextColor` instead */
    textColorOnSecondary: Colors;
    widgetSecondaryTextColor: Colors;
    useWhiteOnPrimary: boolean;
    useWhiteOnSecondary: boolean;
};
export declare function createAppStyles<Props = unknown, C extends string = string>(styles: Styles<C, Props, IParlorTheme> | ((theme: IParlorTheme) => Styles<C, Props>), options?: any): (data?: Props & {
    theme?: IParlorTheme;
}) => Classes<C>;
