import { __makeTemplateObject } from "tslib";
import styled, { css } from "styled-components";
import { LIGHT_THEME } from "../Pallette/themes";
import P2 from "../typography/P2";
import H from "../typography/H";
import { getTheme } from "../utils/theme/getTheme";
import { defineResponsibleWidth } from "../utils/defineResponsibleSize";
import { defaultThemeEmptyState } from "./themes";
var COMPONENT_NAME = "emptyState";
export var EmptyStateWrapper = styled.div.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        componentName: COMPONENT_NAME,
        defaultTheme: defaultThemeEmptyState
    })
}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  padding: 24px;\n  ", ";\n"], ["\n  max-width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  padding: 24px;\n  ", ";\n"])), function (_a) {
    var width = _a.width;
    return defineResponsibleWidth(width);
});
EmptyStateWrapper.defaultProps = {
    theme: LIGHT_THEME
};
export var IconBox = styled.div.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        componentName: COMPONENT_NAME,
        defaultTheme: defaultThemeEmptyState
    })
}); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  width: 48px;\n  height: 48px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  margin-bottom: 24px;\n"], ["\n  ", "\n  display: flex;\n  width: 48px;\n  height: 48px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  margin-bottom: 24px;\n"])), function (_a) {
    var theme = _a.theme;
    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: ", ";\n      svg {\n        width: 32px;\n        height: 32px;\n      }\n    "], ["\n      background: ", ";\n      svg {\n        width: 32px;\n        height: 32px;\n      }\n    "])), theme.components.emptyState.backgroundIcon);
});
IconBox.defaultProps = {
    theme: LIGHT_THEME
};
export var HeaderStyled = styled(H).attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        componentName: COMPONENT_NAME,
        defaultTheme: defaultThemeEmptyState
    })
}); })(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  padding: 4px;\n  line-height: 24px;\n  margin-bottom: 8px;\n"], ["\n  ", ";\n  padding: 4px;\n  line-height: 24px;\n  margin-bottom: 8px;\n"])), function (_a) {
    var theme = _a.theme;
    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), theme.components.emptyState.headerColor);
});
HeaderStyled.defaultProps = {
    theme: LIGHT_THEME
};
export var TextStyled = styled(P2).attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        componentName: COMPONENT_NAME,
        defaultTheme: defaultThemeEmptyState
    })
}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n  padding: 4px;\n  margin-bottom: 24px;\n  line-height: 24px;\n"], ["\n  ", ";\n  padding: 4px;\n  margin-bottom: 24px;\n  line-height: 24px;\n"])), function (_a) {
    var theme = _a.theme;
    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font-weight: ", ";\n    font-size: ", ";\n    font-family: ", ";\n    color: ", ";\n  "], ["\n    font-weight: ", ";\n    font-size: ", ";\n    font-family: ", ";\n    color: ", ";\n  "])), theme.typography.fontWeightRegular, theme.typography.fontSizeM, theme.typography.fontFamily, theme.components.emptyState.textColor);
});
TextStyled.defaultProps = {
    theme: LIGHT_THEME
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
