(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", "../../../utils/theme/getTheme", "../../themes", "../../../", "../../../Pallette/themes"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.StepItemVertical = exports.StepItemHorizontal = exports.Description = exports.Title = exports.NumberStep = void 0;
    var tslib_1 = require("tslib");
    var styled_components_1 = (0, tslib_1.__importStar)(require("styled-components"));
    var getTheme_1 = require("../../../utils/theme/getTheme");
    var themes_1 = require("../../themes");
    var __1 = require("../../../");
    var themes_2 = require("../../../Pallette/themes");
    var StepItemStyle = styled_components_1.default.div.attrs(function (props) { return ({
        status: props.status.charAt(0).toUpperCase() + props.status.slice(1),
        theme: (0, getTheme_1.getTheme)({
            theme: props.theme,
            defaultTheme: themes_1.defaultThemeStep,
            componentName: "steps"
        })
    }); })(templateObject_6 || (templateObject_6 = (0, tslib_1.__makeTemplateObject)(["\n  .step-item-number {\n    ", "\n  }\n\n  ", "\n"], ["\n  .step-item-number {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
        var theme = _a.theme, status = _a.status, isDisabled = _a.isDisabled, isCurrent = _a.isCurrent;
        if (isDisabled) {
            return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n          color: ", ";\n          background: ", ";\n          cursor: no-drop;\n        "], ["\n          color: ", ";\n          background: ", ";\n          cursor: no-drop;\n        "])), theme.components.step.colorDisabled, theme.components.step.backgroundDisabled);
        }
        if (isCurrent) {
            return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = (0, tslib_1.__makeTemplateObject)(["\n          color: ", ";\n          background: ", ";\n          & svg {\n            color: ", ";\n          }\n          :hover {\n            color: ", ";\n            background: ", ";\n            svg {\n              color: ", ";\n            }\n          }\n          :active {\n            color: ", ";\n            background: ", ";\n            svg {\n              color: ", ";\n            }\n          }\n        "], ["\n          color: ", ";\n          background: ", ";\n          & svg {\n            color: ", ";\n          }\n          :hover {\n            color: ", ";\n            background: ", ";\n            svg {\n              color: ", ";\n            }\n          }\n          :active {\n            color: ", ";\n            background: ", ";\n            svg {\n              color: ", ";\n            }\n          }\n        "])), theme.components.step.colorCurrent, theme.components.step.backgroundCurrent, theme.components.step.colorCurrent, theme.components.step.colorCurrentHover, theme.components.step.backgroundCurrentHover, theme.components.step.colorCurrentHover, theme.components.step.colorCurrentPressed, theme.components.step.backgroundCurrentPressed, theme.components.step.colorCurrentPressed);
        }
        return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = (0, tslib_1.__makeTemplateObject)(["\n        color: ", ";\n        background: ", ";\n        & svg {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          background: ", ";\n          svg {\n            color: ", ";\n          }\n        }\n        :active {\n          color: ", ";\n          background: ", ";\n          svg {\n            color: ", ";\n          }\n        }\n      "], ["\n        color: ", ";\n        background: ", ";\n        & svg {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          background: ", ";\n          svg {\n            color: ", ";\n          }\n        }\n        :active {\n          color: ", ";\n          background: ", ";\n          svg {\n            color: ", ";\n          }\n        }\n      "])), theme.components.step["color" + status], theme.components.step["background" + status], theme.components.step["color" + status], theme.components.step["color" + status + "Hover"], theme.components.step["background" + status + "Hover"], theme.components.step["color" + status + "Hover"], theme.components.step["color" + status + "Pressed"], theme.components.step["background" + status + "Pressed"], theme.components.step["color" + status + "Pressed"]);
    }, function (_a) {
        var theme = _a.theme, isDisabled = _a.isDisabled;
        if (isDisabled) {
            return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = (0, tslib_1.__makeTemplateObject)(["\n        .step-item-title,\n        .step-item-description {\n          color: ", ";\n        }\n      "], ["\n        .step-item-title,\n        .step-item-description {\n          color: ", ";\n        }\n      "])), theme.components.step.colorDisabled);
        }
        return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = (0, tslib_1.__makeTemplateObject)(["\n      .step-item-title {\n        color: ", ";\n      }\n      .step-item-description {\n        color: ", ";\n      }\n      .step-item-title:hover {\n        color: ", ";\n      }\n      .step-item-description:hover {\n        color: ", ";\n      }\n      .step-item-title:active {\n        color: ", ";\n      }\n      .step-item-description:active {\n        color: ", ";\n      }\n    "], ["\n      .step-item-title {\n        color: ", ";\n      }\n      .step-item-description {\n        color: ", ";\n      }\n      .step-item-title:hover {\n        color: ", ";\n      }\n      .step-item-description:hover {\n        color: ", ";\n      }\n      .step-item-title:active {\n        color: ", ";\n      }\n      .step-item-description:active {\n        color: ", ";\n      }\n    "])), theme.components.step.colorTitle, theme.components.step.colorSubTitle, theme.components.step.colorTitleHover, theme.components.step.colorSubTitleHover, theme.components.step.colorTitlePressed, theme.components.step.colorSubTitlePressed);
    });
    StepItemStyle.defaultProps = {
        theme: themes_2.LIGHT_THEME
    };
    exports.NumberStep = styled_components_1.default.div(templateObject_7 || (templateObject_7 = (0, tslib_1.__makeTemplateObject)(["\n  width: 28px;\n  min-width: 28px;\n  height: 28px;\n  min-height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n"], ["\n  width: 28px;\n  min-width: 28px;\n  height: 28px;\n  min-height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n"])));
    exports.Title = (0, styled_components_1.default)(__1.P1)(templateObject_8 || (templateObject_8 = (0, tslib_1.__makeTemplateObject)(["\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n"], ["\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n"])));
    exports.Description = (0, styled_components_1.default)(__1.P2)(templateObject_9 || (templateObject_9 = (0, tslib_1.__makeTemplateObject)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n  padding-left: 40px;\n"], ["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n  padding-left: 40px;\n"])));
    exports.StepItemHorizontal = (0, styled_components_1.default)(StepItemStyle)(templateObject_10 || (templateObject_10 = (0, tslib_1.__makeTemplateObject)(["\n  flex-direction: column;\n  gap: 4px;\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  white-space: nowrap;\n  flex: 1 1 auto;\n  width: 0;\n\n  .step-item-row {\n    width: 100%;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: start;\n    border-radius: 8px;\n    gap: 12px;\n    cursor: pointer;\n\n    .step-item-title {\n      flex: 0 1 auto;\n      width: max-content;\n      min-width: 0;\n    }\n\n    .step-item-divider {\n      flex: 1 2 auto;\n      min-width: 20px;\n      width: max-content;\n      max-width: 100%;\n    }\n  }\n"], ["\n  flex-direction: column;\n  gap: 4px;\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  white-space: nowrap;\n  flex: 1 1 auto;\n  width: 0;\n\n  .step-item-row {\n    width: 100%;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: start;\n    border-radius: 8px;\n    gap: 12px;\n    cursor: pointer;\n\n    .step-item-title {\n      flex: 0 1 auto;\n      width: max-content;\n      min-width: 0;\n    }\n\n    .step-item-divider {\n      flex: 1 2 auto;\n      min-width: 20px;\n      width: max-content;\n      max-width: 100%;\n    }\n  }\n"])));
    exports.StepItemVertical = (0, styled_components_1.default)(StepItemStyle)(templateObject_11 || (templateObject_11 = (0, tslib_1.__makeTemplateObject)(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-direction: row;\n  gap: 20px;\n  flex: 1;\n\n  .step-item-divider {\n    min-height: 20px;\n    height: 100%;\n    flex: 1;\n  }\n  & > div:first-child {\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n    gap: 16px;\n  }\n  .step-item-text {\n    display: flex;\n    flex-direction: column;\n    width: max-content;\n    max-width: 100%;\n    min-width: 0;\n    white-space: nowrap;\n    gap: 6px;\n    margin-bottom: 2px;\n  }\n  .step-item-title {\n    padding-top: 2px;\n  }\n  .step-item-description {\n    padding-left: 0;\n  }\n"], ["\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-direction: row;\n  gap: 20px;\n  flex: 1;\n\n  .step-item-divider {\n    min-height: 20px;\n    height: 100%;\n    flex: 1;\n  }\n  & > div:first-child {\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n    gap: 16px;\n  }\n  .step-item-text {\n    display: flex;\n    flex-direction: column;\n    width: max-content;\n    max-width: 100%;\n    min-width: 0;\n    white-space: nowrap;\n    gap: 6px;\n    margin-bottom: 2px;\n  }\n  .step-item-title {\n    padding-top: 2px;\n  }\n  .step-item-description {\n    padding-left: 0;\n  }\n"])));
    var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
});
