krl-alfred 1.77.6 → 1.77.7

package/dist/components/Checkbox/Checkbox.styled.js

@@ -12,7 +12,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var svgToBase64_1 = __importDefault(require("./../../utils/svgToBase64"));
-exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex:1;\n    position:relative;\n    align-items:center;\n    justify-content:flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    input[type=\"checkbox\"]{\n        height: 0;\n        width: 0;\n        opacity: 0; \n        z-index: -1;\n        position: absolute;\n        &:checked ~ .indicator{\n            background-image:url('", "');\n        }\n    }\n    div.indicator{\n        background-image:url('", "');\n        background-size:100% 100%;\n        display:block;\n        position:relative;\n        margin: 0 ", " 0 0;\n        width: ", ";\n        height: ", ";\n        &:disabled {\n            cursor: not-allowed;\n        }\n    }\n    div.labelsWrapper{\n        position: relative;\n        display: grid;\n        row-gap: 8px;\n        cursor: ", ";\n        margin: 0;\n        color:", ";\n        * {\n            ", ";\n        }\n        label.label{\n            display:block;\n            margin:0;\n            font: ", ";\n        }\n        label.description{\n            display:block;\n            margin:0;\n            font:var(--body-regular-13-16);\n        }\n    }\n"], ["\n    flex:1;\n    position:relative;\n    align-items:center;\n    justify-content:flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    input[type=\"checkbox\"]{\n        height: 0;\n        width: 0;\n        opacity: 0; \n        z-index: -1;\n        position: absolute;\n        &:checked ~ .indicator{\n            background-image:url('", "');\n        }\n    }\n    div.indicator{\n        background-image:url('", "');\n        background-size:100% 100%;\n        display:block;\n        position:relative;\n        margin: 0 ", " 0 0;\n        width: ", ";\n        height: ", ";\n        &:disabled {\n            cursor: not-allowed;\n        }\n    }\n    div.labelsWrapper{\n        position: relative;\n        display: grid;\n        row-gap: 8px;\n        cursor: ", ";\n        margin: 0;\n        color:", ";\n        * {\n            ", ";\n        }\n        label.label{\n            display:block;\n            margin:0;\n            font: ", ";\n        }\n        label.description{\n            display:block;\n            margin:0;\n            font:var(--body-regular-13-16);\n        }\n    }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "CheckboxElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "CheckboxElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "CheckboxElementUncheck" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "CheckboxElementInvalid" }))); }, function (props) { return props.$labelOffset; }, function (props) {
+exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex:1;\n    position:relative;\n    align-items:center;\n    justify-content:flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    input[type=\"checkbox\"]{\n        height: 0;\n        width: 0;\n        opacity: 0; \n        z-index: -1;\n        position: absolute;\n        &:checked ~ .indicator{\n            background-image:url('", "');\n        }\n    }\n    div.indicator{\n        background-image:url('", "');\n        background-size:100% 100%;\n        display:block;\n        position:relative;\n        margin: 0 ", " 0 0;\n        width: ", ";\n        height: ", ";\n        &:disabled {\n            cursor: not-allowed;\n        }\n    }\n    div.labelsWrapper{\n        position: relative;\n        display: grid;\n        row-gap: 8px;\n        cursor: ", ";\n        margin: 0;\n        color:", ";\n        * {\n            ", ";\n        }\n        label.label{\n            display:block;\n            margin:0;\n            cursor: inherit;\n            font: ", ";\n        }\n        label.description{\n            display:block;\n            margin:0;\n            cursor: inherit;\n            font:var(--body-regular-13-16);\n        }\n    }\n"], ["\n    flex:1;\n    position:relative;\n    align-items:center;\n    justify-content:flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    input[type=\"checkbox\"]{\n        height: 0;\n        width: 0;\n        opacity: 0; \n        z-index: -1;\n        position: absolute;\n        &:checked ~ .indicator{\n            background-image:url('", "');\n        }\n    }\n    div.indicator{\n        background-image:url('", "');\n        background-size:100% 100%;\n        display:block;\n        position:relative;\n        margin: 0 ", " 0 0;\n        width: ", ";\n        height: ", ";\n        &:disabled {\n            cursor: not-allowed;\n        }\n    }\n    div.labelsWrapper{\n        position: relative;\n        display: grid;\n        row-gap: 8px;\n        cursor: ", ";\n        margin: 0;\n        color:", ";\n        * {\n            ", ";\n        }\n        label.label{\n            display:block;\n            margin:0;\n            cursor: inherit;\n            font: ", ";\n        }\n        label.description{\n            display:block;\n            margin:0;\n            cursor: inherit;\n            font:var(--body-regular-13-16);\n        }\n    }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "CheckboxElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "CheckboxElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "CheckboxElementUncheck" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "CheckboxElementInvalid" }))); }, function (props) { return props.$labelOffset; }, function (props) {
     switch (props.$size) {
         case 'small':
             return "16px";

package/dist/components/InsuranceBox/InsuranceBox.js

@@ -22,7 +22,7 @@ var Tooltip_1 = __importDefault(require("../Tooltip"));
 var Loader_1 = __importDefault(require("../Loader"));
 var InsuranceBox = function (props) {
     var hasClickAction = props.hasClickAction, popupSize = props.popupSize, size = props.size, popupRight = props.popupRight, popupWidth = props.popupWidth, disabled = props.disabled, hasBorder = props.hasBorder, hasBgColor = props.hasBgColor, priceText = props.priceText, onChange = props.onChange, width = props.width, checked = props.checked, height = props.height, tooltipTitle = props.tooltipTitle, tooltipDescription = props.tooltipDescription, tooltipPosition = props.tooltipPosition, isTitleWrap = props.isTitleWrap, hasCloseOnOutsideClick = props.hasCloseOnOutsideClick, isLoading = props.isLoading;
-    return ((0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.InsuranceBoxStyled, __assign({ "$hasBorder": hasBorder, "$hasBgColor": hasBgColor, "$width": width, "$height": height, "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.CheckboxWrapper, __assign({ "$size": size }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { disabled: disabled, onChange: onChange, checked: checked, size: "large" }) })), (0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.InnerWrapper, __assign({ "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.Logo, __assign({ "$size": size }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin" }) })), (0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.DescriptionWrapper, __assign({ "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.Description, __assign({ "$size": size }, { children: isLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave" }) : (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: "Hasar g\u00FCvenceni %100\u2019e ".concat(isTitleWrap ? "<br/>" : '', "tamamlars\u0131n! <b>").concat(priceText, "</b>") } }) })), (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ iconStrokeWidth: "2px", popupSize: popupSize, title: tooltipTitle, position: tooltipPosition, hasCloseOnOutsideClick: hasCloseOnOutsideClick, hasClickAction: hasClickAction, popupWidth: popupWidth, popupRight: popupRight, iconWidth: "24px", iconHeight: "24px" }, { children: tooltipDescription || ((0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.TooltipDescription, { children: props.insuranceText })) }))] }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.InsuranceBoxStyled, __assign({ htmlFor: "insuranceCheckbox", "$hasBorder": hasBorder, "$hasBgColor": hasBgColor, "$width": width, "$height": height, "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.CheckboxWrapper, __assign({ "$size": size }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: "insuranceCheckbox", disabled: disabled, onChange: onChange, checked: checked, size: "large" }) })), (0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.InnerWrapper, __assign({ "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.Logo, __assign({ htmlFor: "insuranceCheckbox", "$size": size }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin" }) })), (0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.DescriptionWrapper, __assign({ "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.Description, __assign({ "$size": size }, { children: isLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave" }) : (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: "Hasar g\u00FCvenceni %100\u2019e ".concat(isTitleWrap ? "<br/>" : '', "tamamlars\u0131n! <b>").concat(priceText, "</b>") } }) })), (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "nothing" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ iconStrokeWidth: "2px", popupSize: popupSize, title: tooltipTitle, position: tooltipPosition, hasCloseOnOutsideClick: hasCloseOnOutsideClick, hasClickAction: hasClickAction, popupWidth: popupWidth, popupRight: popupRight, iconWidth: "24px", iconHeight: "24px" }, { children: tooltipDescription || ((0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.TooltipDescription, { children: props.insuranceText })) })) }))] }))] }))] })));
 };
 InsuranceBox.defaultProps = {
     height: "90px",

package/dist/components/InsuranceBox/InsuranceBox.styled.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TooltipDescription = exports.Description = exports.Logo = exports.DescriptionWrapper = exports.CheckboxWrapper = exports.InnerWrapper = exports.InsuranceBoxStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.InsuranceBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: 0 1.5rem;\n    height: ", ";\n    background: ", ";\n    border: ", ";\n    border-radius: 8px;\n    width: ", ";\n    display: grid;\n    grid-template-columns: auto 1fr;\n    align-items: center;\n    box-sizing: border-box;\n    ", ";\n    @media only screen and ", " {\n        padding: 1rem;\n        height: auto;\n        align-items: flex-start;\n    }\n"], ["\n    padding: 0 1.5rem;\n    height: ", ";\n    background: ", ";\n    border: ", ";\n    border-radius: 8px;\n    width: ", ";\n    display: grid;\n    grid-template-columns: auto 1fr;\n    align-items: center;\n    box-sizing: border-box;\n    ", ";\n    @media only screen and ", " {\n        padding: 1rem;\n        height: auto;\n        align-items: flex-start;\n    }\n"])), function (props) { return props.$height; }, function (props) { return props.$hasBgColor ? 'var(--primary-opacity-5)' : '#fff'; }, function (props) { return props.$hasBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.$width ? props.$width : "466px"; }, function (props) {
+exports.InsuranceBoxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: 0 1.5rem;\n    height: ", ";\n    background: ", ";\n    border: ", ";\n    border-radius: 8px;\n    width: ", ";\n    display: grid;\n    grid-template-columns: auto 1fr;\n    align-items: center;\n    box-sizing: border-box;\n    cursor: pointer;\n    ", ";\n    @media only screen and ", " {\n        padding: 1rem;\n        height: auto;\n        align-items: flex-start;\n    }\n"], ["\n    padding: 0 1.5rem;\n    height: ", ";\n    background: ", ";\n    border: ", ";\n    border-radius: 8px;\n    width: ", ";\n    display: grid;\n    grid-template-columns: auto 1fr;\n    align-items: center;\n    box-sizing: border-box;\n    cursor: pointer;\n    ", ";\n    @media only screen and ", " {\n        padding: 1rem;\n        height: auto;\n        align-items: flex-start;\n    }\n"])), function (props) { return props.$height; }, function (props) { return props.$hasBgColor ? 'var(--primary-opacity-5)' : '#fff'; }, function (props) { return props.$hasBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.$width ? props.$width : "466px"; }, function (props) {
     switch (props.$size) {
         case 'small':
             return "\n            padding: 1rem;\n            height: auto;\n            align-items: flex-start;";
@@ -18,7 +18,7 @@ exports.InsuranceBoxStyled = styled_components_1.default.div(templateObject_1 ||
             return null;
     }
 }, devices_1.devices.md);
-exports.InnerWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: auto 1fr;\n    align-items: center;\n    ", ";\n    @media only screen and ", " {\n        grid-template-columns: 1fr;\n    }\n"], ["\n    display: grid;\n    grid-template-columns: auto 1fr;\n    align-items: center;\n    ", ";\n    @media only screen and ", " {\n        grid-template-columns: 1fr;\n    }\n"])), function (props) {
+exports.InnerWrapper = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: auto 1fr;\n    align-items: center;\n    cursor: inherit;\n    ", ";\n    @media only screen and ", " {\n        grid-template-columns: 1fr;\n    }\n"], ["\n    display: grid;\n    grid-template-columns: auto 1fr;\n    align-items: center;\n    cursor: inherit;\n    ", ";\n    @media only screen and ", " {\n        grid-template-columns: 1fr;\n    }\n"])), function (props) {
     switch (props.$size) {
         case 'small':
             return "\n                grid-template-columns: 1fr;";
@@ -26,7 +26,7 @@ exports.InnerWrapper = styled_components_1.default.div(templateObject_2 || (temp
             return null;
     }
 }, devices_1.devices.md);
-exports.CheckboxWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    @media only screen and ", " {\n        width: 40px;\n    }\n    ", ";\n"], ["\n    @media only screen and ", " {\n        width: 40px;\n    }\n    ", ";\n"])), devices_1.devices.md, function (props) {
+exports.CheckboxWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    cursor: inherit;\n    @media only screen and ", " {\n        width: 40px;\n    }\n    ", ";\n"], ["\n    cursor: inherit;\n    @media only screen and ", " {\n        width: 40px;\n    }\n    ", ";\n"])), devices_1.devices.md, function (props) {
     switch (props.$size) {
         case 'small':
             return " width: 40px;";
@@ -34,7 +34,7 @@ exports.CheckboxWrapper = styled_components_1.default.div(templateObject_3 || (t
             return null;
     }
 });
-exports.DescriptionWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    ", ";\n    @media only screen and ", " {\n        margin-top: 18px;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    ", ";\n    @media only screen and ", " {\n        margin-top: 18px;\n    }\n"])), function (props) {
+exports.DescriptionWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: inherit;\n    ", ";\n    @media only screen and ", " {\n        margin-top: 18px;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: inherit;\n    ", ";\n    @media only screen and ", " {\n        margin-top: 18px;\n    }\n"])), function (props) {
     switch (props.$size) {
         case 'small':
             return "margin-top: 18px;";
@@ -42,7 +42,7 @@ exports.DescriptionWrapper = styled_components_1.default.div(templateObject_4 ||
             return null;
     }
 }, devices_1.devices.md);
-exports.Logo = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    background-color: white;\n    width: 96px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-5);\n    box-sizing: border-box;\n\n    svg {\n        display: block;\n        width: 80px;\n        ", ";\n        @media only screen and ", " {\n            width: 116px;\n        }\n    }\n    ", ";\n\n    @media only screen and ", " {\n        background-color: transparent;\n        width: auto;\n        height: auto;\n        border: 0;\n        border-radius: 0;\n        margin-top: 6px;\n        justify-content: flex-start;\n    }\n"], ["\n    background-color: white;\n    width: 96px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-5);\n    box-sizing: border-box;\n\n    svg {\n        display: block;\n        width: 80px;\n        ", ";\n        @media only screen and ", " {\n            width: 116px;\n        }\n    }\n    ", ";\n\n    @media only screen and ", " {\n        background-color: transparent;\n        width: auto;\n        height: auto;\n        border: 0;\n        border-radius: 0;\n        margin-top: 6px;\n        justify-content: flex-start;\n    }\n"])), function (props) {
+exports.Logo = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    background-color: white;\n    width: 96px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-5);\n    box-sizing: border-box;\n    cursor: inherit;\n\n    svg {\n        display: block;\n        width: 80px;\n        ", ";\n        @media only screen and ", " {\n            width: 116px;\n        }\n    }\n    ", ";\n\n    @media only screen and ", " {\n        background-color: transparent;\n        width: auto;\n        height: auto;\n        border: 0;\n        border-radius: 0;\n        margin-top: 6px;\n        justify-content: flex-start;\n    }\n"], ["\n    background-color: white;\n    width: 96px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-5);\n    box-sizing: border-box;\n    cursor: inherit;\n\n    svg {\n        display: block;\n        width: 80px;\n        ", ";\n        @media only screen and ", " {\n            width: 116px;\n        }\n    }\n    ", ";\n\n    @media only screen and ", " {\n        background-color: transparent;\n        width: auto;\n        height: auto;\n        border: 0;\n        border-radius: 0;\n        margin-top: 6px;\n        justify-content: flex-start;\n    }\n"])), function (props) {
     switch (props.$size) {
         case 'small':
             return "width: 116px;";
@@ -57,7 +57,7 @@ exports.Logo = styled_components_1.default.div(templateObject_5 || (templateObje
             return null;
     }
 }, devices_1.devices.md);
-exports.Description = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    margin-left: 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    font: var(--caption-semi-bold-12-15);\n    height: 31px;\n    @media only screen and ", " {\n        margin-left: 0;\n    }\n    ", ";\n\n    b {\n        font: var(--body-extra-bold-13-16);\n    }\n"], ["\n    margin-left: 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    font: var(--caption-semi-bold-12-15);\n    height: 31px;\n    @media only screen and ", " {\n        margin-left: 0;\n    }\n    ", ";\n\n    b {\n        font: var(--body-extra-bold-13-16);\n    }\n"])), devices_1.devices.md, function (props) {
+exports.Description = styled_components_1.default.label(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    margin-left: 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    font: var(--caption-semi-bold-12-15);\n    height: 31px;\n    cursor: inherit;\n    @media only screen and ", " {\n        margin-left: 0;\n    }\n    ", ";\n\n    b {\n        font: var(--body-extra-bold-13-16);\n    }\n"], ["\n    margin-left: 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    font: var(--caption-semi-bold-12-15);\n    height: 31px;\n    cursor: inherit;\n    @media only screen and ", " {\n        margin-left: 0;\n    }\n    ", ";\n\n    b {\n        font: var(--body-extra-bold-13-16);\n    }\n"])), devices_1.devices.md, function (props) {
     switch (props.$size) {
         case 'small':
             return "\n                    margin-left: 0;\n                    ";

package/dist/components/RadioButton/layouts/basic/Basic.styled.js

@@ -12,7 +12,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Icon_1 = __importDefault(require("../../../Icon/Icon"));
 var svgToBase64_1 = __importDefault(require("./../../../../utils/svgToBase64"));
-exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: pointer;\n  ", "\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ .indicator {\n      background-image: url('", "');\n    }\n  }\n\n  div.indicator {\n    flex: 0 0 auto;\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    margin: 0 ", " 0 0;\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n    ", "\n    label.label {\n      display: block;\n      cursor: inherit;\n      font: ", ";\n    }\n\n    label.description {\n      display: block;\n      margin: 0;\n      font: var(--body-regular-13-16);\n    }\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: pointer;\n  ", "\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ .indicator {\n      background-image: url('", "');\n    }\n  }\n\n  div.indicator {\n    flex: 0 0 auto;\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    margin: 0 ", " 0 0;\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n    ", "\n    label.label {\n      display: block;\n      cursor: inherit;\n      font: ", ";\n    }\n\n    label.description {\n      display: block;\n      margin: 0;\n      font: var(--body-regular-13-16);\n    }\n  }\n"])), function (props) { return props.$hasNoneClick && "\n    user-select:none;\n    pointer-events:none;\n  "; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "RadioButtonElementChecked" })), function (props) { return props.$disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "RadioButtonElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "RadioButtonElementInvalid" }))); }, function (props) { return props.$labelOffset; }, function (props) {
+exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: pointer;\n  ", "\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ .indicator {\n      background-image: url('", "');\n    }\n  }\n\n  div.indicator {\n    flex: 0 0 auto;\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    margin: 0 ", " 0 0;\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n    ", "\n    label.label {\n      display: block;\n      cursor: inherit;\n      font: ", ";\n    }\n\n    label.description {\n      display: block;\n      margin: 0;\n      cursor: inherit;\n      font: var(--body-regular-13-16);\n    }\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: pointer;\n  ", "\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ .indicator {\n      background-image: url('", "');\n    }\n  }\n\n  div.indicator {\n    flex: 0 0 auto;\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    margin: 0 ", " 0 0;\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n    ", "\n    label.label {\n      display: block;\n      cursor: inherit;\n      font: ", ";\n    }\n\n    label.description {\n      display: block;\n      margin: 0;\n      cursor: inherit;\n      font: var(--body-regular-13-16);\n    }\n  }\n"])), function (props) { return props.$hasNoneClick && "\n    user-select:none;\n    pointer-events:none;\n  "; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "RadioButtonElementChecked" })), function (props) { return props.$disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "RadioButtonElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "RadioButtonElementInvalid" }))); }, function (props) { return props.$labelOffset; }, function (props) {
     switch (props.$size) {
         case 'xsmall':
             return "16px";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "1.77.6",
+  "version": "1.77.7",
   "files": [
     "dist"
   ],