(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "tslib", "styled-components", "@greenatom/icons", "../Pallette/Shape", "../utils/theme/getTheme", "../Pallette/themes", "./themes"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.DaysContainer = exports.ButtonContainer = exports.WeekItem = exports.DaysItem = exports.WeekContainer = exports.CalendarContainer = exports.YearItem = exports.YearsContainer = exports.MonthItem = exports.MonthsContainer = exports.ArrowRight = exports.ArrowLeft = exports.ArrowIconStyles = exports.YearBtn = exports.MonthBtn = exports.BtnBase = exports.ArrowsContainer = exports.HeaderWrapper = exports.HeaderContainer = exports.CalendarRoot = void 0;
    var tslib_1 = require("tslib");
    var styled_components_1 = (0, tslib_1.__importStar)(require("styled-components"));
    var icons_1 = require("@greenatom/icons");
    var Shape_1 = require("../Pallette/Shape");
    var getTheme_1 = require("../utils/theme/getTheme");
    var themes_1 = require("../Pallette/themes");
    var themes_2 = require("./themes");
    var COMPONENT_NAME = "calendar";
    exports.CalendarRoot = styled_components_1.default.section.attrs(function (props) { return ({
        theme: (0, getTheme_1.getTheme)({
            theme: props.theme,
            componentName: COMPONENT_NAME,
            defaultTheme: themes_2.defaultThemeCalendar
        })
    }); })(templateObject_2 || (templateObject_2 = (0, tslib_1.__makeTemplateObject)(["\n  position: relative;\n  padding: 16px;\n  width: 320px;\n\n  ", "\n"], ["\n  position: relative;\n  padding: 16px;\n  width: 320px;\n\n  ", "\n"])), function (_a) {
        var theme = _a.theme;
        return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n    background: ", ";\n    border-radius: ", ";\n    ", ";\n  "], ["\n    background: ", ";\n    border-radius: ", ";\n    ", ";\n  "])), theme.components.calendar.background, Shape_1.Shape.borderRadiusMedium, theme.shadows.sp.bottom);
    });
    exports.CalendarRoot.defaultProps = {
        theme: themes_1.LIGHT_THEME
    };
    // Header Styles
    exports.HeaderContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = (0, tslib_1.__makeTemplateObject)(["\n  position: relative;\n  display: flex;\n  user-select: none;\n  height: 28px;\n"], ["\n  position: relative;\n  display: flex;\n  user-select: none;\n  height: 28px;\n"])));
    exports.HeaderWrapper = styled_components_1.default.header(templateObject_4 || (templateObject_4 = (0, tslib_1.__makeTemplateObject)(["\n  margin-bottom: 12px;\n  justify-content: ", ";\n  align-items: center;\n  position: relative;\n  display: flex;\n  user-select: none;\n"], ["\n  margin-bottom: 12px;\n  justify-content: ", ";\n  align-items: center;\n  position: relative;\n  display: flex;\n  user-select: none;\n"])), function (_a) {
        var isMonthEditing = _a.isMonthEditing;
        return isMonthEditing ? "center" : "space-between";
    });
    exports.ArrowsContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = (0, tslib_1.__makeTemplateObject)(["\n  display: flex;\n  user-select: none;\n  cursor: pointer;\n"], ["\n  display: flex;\n  user-select: none;\n  cursor: pointer;\n"])));
    exports.BtnBase = styled_components_1.default.button.attrs(function (props) { return ({
        theme: (0, getTheme_1.getTheme)({
            theme: props.theme,
            componentName: COMPONENT_NAME,
            defaultTheme: themes_2.defaultThemeCalendar
        })
    }); })(templateObject_7 || (templateObject_7 = (0, tslib_1.__makeTemplateObject)(["\n  padding: 0;\n  border: none;\n  outline: none;\n  cursor: pointer;\n\n  & + & {\n    margin: 0 0 0 48px;\n  }\n  background: transparent;\n\n  ", "\n"], ["\n  padding: 0;\n  border: none;\n  outline: none;\n  cursor: pointer;\n\n  & + & {\n    margin: 0 0 0 48px;\n  }\n  background: transparent;\n\n  ", "\n"])), function (_a) {
        var theme = _a.theme;
        return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = (0, tslib_1.__makeTemplateObject)(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n  "])), theme.typography.fontFamily, theme.typography.fontSizeM, theme.typography.lineHeightM, theme.components.calendar.colorButton, theme.components.calendar.colorButtonHover);
    });
    exports.BtnBase.defaultProps = {
        theme: themes_1.LIGHT_THEME
    };
    exports.MonthBtn = (0, styled_components_1.default)(exports.BtnBase)(templateObject_9 || (templateObject_9 = (0, tslib_1.__makeTemplateObject)(["\n  background: transparent;\n\n  ", "\n"], ["\n  background: transparent;\n\n  ", "\n"])), function (_a) {
        var offset = _a.offset;
        return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = (0, tslib_1.__makeTemplateObject)(["\n    opacity: ", ";\n    ", "\n  "], ["\n    opacity: ", ";\n    ", "\n  "])), offset ? "0" : "1", offset && "pointer-events: none;");
    });
    exports.YearBtn = (0, styled_components_1.default)(exports.BtnBase)(templateObject_11 || (templateObject_11 = (0, tslib_1.__makeTemplateObject)(["\n  height: 28px;\n  flex-shrink: 0;\n  ", "\n"], ["\n  height: 28px;\n  flex-shrink: 0;\n  ", "\n"])), function (_a) {
        var offset = _a.offset;
        return (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = (0, tslib_1.__makeTemplateObject)(["\n    transform: translateX(-", "px);\n  "], ["\n    transform: translateX(-", "px);\n  "])), offset && offset - 14);
    });
    exports.ArrowIconStyles = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = (0, tslib_1.__makeTemplateObject)(["\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  ", "\n"], ["\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  ", "\n"])), function (_a) {
        var theme = _a.theme;
        return (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = (0, tslib_1.__makeTemplateObject)(["\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n  "], ["\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n  "])), theme.components.calendar.iconColorArrow, theme.components.calendar.iconColorArrowHover);
    });
    exports.ArrowLeft = (0, styled_components_1.default)(icons_1.IconBrokenArrowLeft2).attrs(function (props) { return ({
        theme: (0, getTheme_1.getTheme)({
            theme: props.theme,
            componentName: COMPONENT_NAME,
            defaultTheme: themes_2.defaultThemeCalendar
        })
    }); })(templateObject_14 || (templateObject_14 = (0, tslib_1.__makeTemplateObject)(["\n  ", ";\n  margin-right: 4px;\n"], ["\n  ", ";\n  margin-right: 4px;\n"])), exports.ArrowIconStyles);
    exports.ArrowLeft.defaultProps = {
        theme: themes_1.LIGHT_THEME
    };
    exports.ArrowRight = (0, styled_components_1.default)(icons_1.IconBrokenArrowRight3).attrs(function (props) { return ({
        theme: (0, getTheme_1.getTheme)({
            theme: props.theme,
            componentName: COMPONENT_NAME,
            defaultTheme: themes_2.defaultThemeCalendar
        })
    }); })(templateObject_15 || (templateObject_15 = (0, tslib_1.__makeTemplateObject)(["\n  ", ";\n"], ["\n  ", ";\n"])), exports.ArrowIconStyles);
    exports.ArrowRight.defaultProps = {
        theme: themes_1.LIGHT_THEME
    };
    // Months & Dates Styles
    exports.MonthsContainer = styled_components_1.default.ul(templateObject_16 || (templateObject_16 = (0, tslib_1.__makeTemplateObject)(["\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-wrap: wrap;\n  list-style-type: none;\n"], ["\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-wrap: wrap;\n  list-style-type: none;\n"])));
    exports.MonthItem = styled_components_1.default.li.attrs(function (props) { return ({
        theme: (0, getTheme_1.getTheme)({
            theme: props.theme,
            componentName: COMPONENT_NAME,
            defaultTheme: themes_2.defaultThemeCalendar
        })
    }); })(templateObject_21 || (templateObject_21 = (0, tslib_1.__makeTemplateObject)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px 8px;\n  height: 40px;\n  width: 33.33%;\n  border-radius: 16px;\n  text-align: center;\n  transition: all 0.4s ease-out;\n\n  ", "\n\n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px 8px;\n  height: 40px;\n  width: 33.33%;\n  border-radius: 16px;\n  text-align: center;\n  transition: all 0.4s ease-out;\n\n  ", "\n\n  ", "\n"])), function (_a) {
        var theme = _a.theme;
        return (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = (0, tslib_1.__makeTemplateObject)(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), theme.typography.fontFamily, theme.typography.fontSizeM, theme.typography.lineHeightXs);
    }, function (_a) {
        var theme = _a.theme, isActive = _a.isActive, isDisabled = _a.isDisabled;
        if (isDisabled) {
            return (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = (0, tslib_1.__makeTemplateObject)(["\n        color: ", ";\n        background: ", ";\n        pointer-events: none;\n        cursor: default;\n      "], ["\n        color: ", ";\n        background: ", ";\n        pointer-events: none;\n        cursor: default;\n      "])), theme.components.calendar.colorMonthItemDisabled, theme.components.calendar.background);
        }
        else if (isActive) {
            return (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = (0, tslib_1.__makeTemplateObject)(["\n        color: ", ";\n        background: ", ";\n        cursor: pointer;\n      "], ["\n        color: ", ";\n        background: ", ";\n        cursor: pointer;\n      "])), theme.components.calendar.colorButton, theme.components.calendar.backgroundDayItemBefore);
        }
        else {
            return (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = (0, tslib_1.__makeTemplateObject)(["\n        color: ", ";\n        background: ", ";\n        cursor: pointer;\n      "], ["\n        color: ", ";\n        background: ", ";\n        cursor: pointer;\n      "])), theme.components.calendar.colorItem, theme.components.calendar.background);
        }
    });
    exports.MonthItem.defaultProps = {
        theme: themes_1.LIGHT_THEME
    };
    exports.YearsContainer = (0, styled_components_1.default)(exports.MonthsContainer)(templateObject_22 || (templateObject_22 = (0, tslib_1.__makeTemplateObject)(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
    exports.YearItem = (0, styled_components_1.default)(exports.MonthItem)(templateObject_23 || (templateObject_23 = (0, tslib_1.__makeTemplateObject)(["\n  width: 33.33%;\n"], ["\n  width: 33.33%;\n"])));
    // Calendar Styles
    exports.CalendarContainer = styled_components_1.default.section(templateObject_24 || (templateObject_24 = (0, tslib_1.__makeTemplateObject)(["\n  display: block;\n"], ["\n  display: block;\n"])));
    exports.WeekContainer = styled_components_1.default.ul(templateObject_25 || (templateObject_25 = (0, tslib_1.__makeTemplateObject)(["\n  margin: 0 0 8px 0;\n  padding: 0;\n  display: flex;\n  justify-content: space-between;\n  list-style-type: none;\n"], ["\n  margin: 0 0 8px 0;\n  padding: 0;\n  display: flex;\n  justify-content: space-between;\n  list-style-type: none;\n"])));
    exports.DaysItem = styled_components_1.default.li.attrs(function (props) { return ({
        theme: (0, getTheme_1.getTheme)({
            theme: props.theme,
            componentName: COMPONENT_NAME,
            defaultTheme: themes_2.defaultThemeCalendar
        })
    }); })(templateObject_31 || (templateObject_31 = (0, tslib_1.__makeTemplateObject)(["\n  position: relative;\n  margin: 0 8px 8px 0;\n  padding: 4px 4px 4px 5px;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-shrink: 0;\n  transition: all 0.4s ease-out;\n\n  ", "\n"], ["\n  position: relative;\n  margin: 0 8px 8px 0;\n  padding: 4px 4px 4px 5px;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-shrink: 0;\n  transition: all 0.4s ease-out;\n\n  ", "\n"])), function (_a) {
        var theme = _a.theme, isDisabled = _a.isDisabled, isActive = _a.isActive, isInRange = _a.isInRange, isRangeStart = _a.isRangeStart, isDiffMonth = _a.isDiffMonth, isRangeEnd = _a.isRangeEnd, isOuterItem = _a.isOuterItem, isToday = _a.isToday;
        return (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = (0, tslib_1.__makeTemplateObject)(["\n    &:nth-child(7n),\n    &:nth-child(7n - 1),\n    &:last-child {\n      color: ", ";\n    }\n\n    ", ";\n    ", ";\n\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    background: ", ";\n    color: ", ";\n    cursor: ", ";\n\n    ", ";\n\n    ", ";\n\n    ", ";\n  "], ["\n    &:nth-child(7n),\n    &:nth-child(7n - 1),\n    &:last-child {\n      color: ", ";\n    }\n\n    ", ";\n    ", ";\n\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    background: ", ";\n    color: ", ";\n    cursor: ", ";\n\n    ", ";\n\n    ", ";\n\n    ", ";\n  "])), function () {
            if (isActive || isRangeStart || isRangeEnd) {
                return theme.components.calendar.colorDayItemWeekendActive;
            }
            else if (isInRange) {
                return theme.components.calendar.colorDayItemRange;
            }
            else if (isDisabled) {
                return theme.components.calendar.colorDayItemDisabled;
            }
            return theme.components.calendar.colorDayItemWeekend;
        }, !isOuterItem && "border-radius: 8px;", isInRange && (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = (0, tslib_1.__makeTemplateObject)(["\n      &:before {\n        position: absolute;\n        left: -18px;\n        width: calc(100% + 40px);\n        height: 32px;\n        content: \"\";\n        z-index: -1;\n        top: 0;\n      }\n\n      &:nth-child(7n) {\n        &:before {\n          width: calc(100% + 18px);\n        }\n      }\n\n      &:nth-child(7n + 1),\n      &:last-child {\n        &:before {\n          left: 0;\n          width: calc(100% + 18px);\n        }\n      }\n    "], ["\n      &:before {\n        position: absolute;\n        left: -18px;\n        width: calc(100% + 40px);\n        height: 32px;\n        content: \"\";\n        z-index: -1;\n        top: 0;\n      }\n\n      &:nth-child(7n) {\n        &:before {\n          width: calc(100% + 18px);\n        }\n      }\n\n      &:nth-child(7n + 1),\n      &:last-child {\n        &:before {\n          left: 0;\n          width: calc(100% + 18px);\n        }\n      }\n    "]))), theme.typography.fontFamily, theme.typography.fontSizeXs, theme.typography.lineHeight2xs, getDayBackGroundColor(theme, isActive, isDisabled, isDiffMonth, isInRange, isRangeStart, isRangeEnd, isToday), getDayColor(theme, isActive, isDisabled, isDiffMonth, isRangeStart, isRangeEnd, isInRange, isToday), isDisabled || isActive || isOuterItem ? "default" : "pointer", isRangeStart && (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = (0, tslib_1.__makeTemplateObject)(["\n      &:before {\n        position: absolute;\n        top: 0;\n        right: 0;\n        width: 8px;\n        border-radius: 0 8px 8px 0;\n        height: 100%;\n        content: \"\";\n        background: ", ";\n        z-index: 0;\n      }\n    "], ["\n      &:before {\n        position: absolute;\n        top: 0;\n        right: 0;\n        width: 8px;\n        border-radius: 0 8px 8px 0;\n        height: 100%;\n        content: \"\";\n        background: ", ";\n        z-index: 0;\n      }\n    "])), theme.components.calendar.backgroundDayItemBefore), isRangeEnd && (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = (0, tslib_1.__makeTemplateObject)(["\n      &:before {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 8px;\n        border-radius: 8px 0 0 8px;\n        height: 100%;\n        content: \"\";\n        background: ", ";\n        z-index: 0;\n      }\n    "], ["\n      &:before {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 8px;\n        border-radius: 8px 0 0 8px;\n        height: 100%;\n        content: \"\";\n        background: ", ";\n        z-index: 0;\n      }\n    "])), theme.components.calendar.backgroundDayItemBefore), !isDisabled &&
            !isActive &&
            !isOuterItem && (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = (0, tslib_1.__makeTemplateObject)(["\n      &:hover {\n        background: ", ";\n        color: ", ";\n      }\n    "], ["\n      &:hover {\n        background: ", ";\n        color: ", ";\n      }\n    "])), theme.components.calendar.backgroundDayItemHover, theme.components.calendar.colorDayItemHover));
    });
    exports.DaysItem.defaultProps = {
        theme: themes_1.LIGHT_THEME
    };
    exports.WeekItem = styled_components_1.default.li.attrs(function (props) { return ({
        theme: (0, getTheme_1.getTheme)({
            theme: props.theme,
            componentName: COMPONENT_NAME,
            defaultTheme: themes_2.defaultThemeCalendar
        })
    }); })(templateObject_33 || (templateObject_33 = (0, tslib_1.__makeTemplateObject)(["\n  padding: 4px 4px 4px 5px;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-shrink: 0;\n  user-select: none;\n\n  &:nth-child(7n),\n  &:nth-child(7n - 1),\n  &:last-child {\n    color: ", ";\n  }\n\n  ", "\n"], ["\n  padding: 4px 4px 4px 5px;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-shrink: 0;\n  user-select: none;\n\n  &:nth-child(7n),\n  &:nth-child(7n - 1),\n  &:last-child {\n    color: ", ";\n  }\n\n  ", "\n"])), function (_a) {
        var theme = _a.theme;
        return theme.components.calendar.colorWeekItemWeekend;
    }, function (_a) {
        var theme = _a.theme;
        return (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = (0, tslib_1.__makeTemplateObject)(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-transform: uppercase;\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-transform: uppercase;\n  "])), theme.typography.fontFamily, theme.typography.fontSizeXs, theme.typography.lineHeight2xs, theme.components.calendar.colorWeekItem);
    });
    exports.WeekItem.defaultProps = {
        theme: themes_1.LIGHT_THEME
    };
    exports.ButtonContainer = styled_components_1.default.div(templateObject_34 || (templateObject_34 = (0, tslib_1.__makeTemplateObject)(["\n  display: flex;\n  justify-content: space-between;\n  padding-top: 24px;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  padding-top: 24px;\n"])));
    exports.ButtonContainer.defaultProps = {
        theme: themes_1.LIGHT_THEME
    };
    exports.DaysContainer = styled_components_1.default.ul(templateObject_35 || (templateObject_35 = (0, tslib_1.__makeTemplateObject)(["\n  position: relative;\n  z-index: 0;\n  margin: 0 -8px -8px 0;\n  padding: 0;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  list-style-type: none;\n\n  & + button {\n    margin-top: 24px;\n  }\n"], ["\n  position: relative;\n  z-index: 0;\n  margin: 0 -8px -8px 0;\n  padding: 0;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  list-style-type: none;\n\n  & + button {\n    margin-top: 24px;\n  }\n"])));
    var getDayColor = function (theme, isActive, isDisabled, isDiffMonth, isRangeStart, isRangeEnd, isInRange, isToday) {
        if (isActive || isRangeStart || isRangeEnd) {
            return theme.components.calendar.colorDayItemActive;
        }
        else if (isInRange) {
            return theme.components.calendar.colorDayItemRange;
        }
        else if (isDisabled) {
            return theme.components.calendar.colorDayItemDisabled;
        }
        else if (isDiffMonth) {
            return theme.components.calendar.colorDayItemDifferentMonth;
        }
        else if (isToday) {
            return theme.components.calendar.colorButton;
        }
        else {
            return theme.components.calendar.colorItem;
        }
    };
    var getDayBackGroundColor = function (theme, isActive, isDisabled, isDiffMonth, isInRange, isRangeStart, isRangeEnd, isToday) {
        if (isActive || isRangeStart || isRangeEnd) {
            return theme.components.calendar.backgroundDayItemActive;
        }
        else if (isInRange) {
            return theme.components.calendar.backgroundDayItemRange;
        }
        else if (isDisabled) {
            return theme.components.calendar.backgroundDayItemDisabled;
        }
        else if (isDiffMonth) {
            return "";
        }
        else if (isToday) {
            return theme.components.calendar.backgroundDayItemToday;
        }
        else {
            return theme.components.calendar.backgroundDayItem;
        }
    };
    var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35;
});
