krl-alfred 2.18.1 → 2.18.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -12,7 +12,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
12
12
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
13
|
var Icon_1 = __importDefault(require("../../../Icon/Icon"));
|
|
14
14
|
var svgToBase64_1 = __importDefault(require("./../../../../utils/svgToBase64"));
|
|
15
|
-
exports.BoxedSmStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid var(--dark-opacity-10);\n position: relative;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n cursor: ", ";\n padding: calc(0.75rem - 0.5px) 1rem;\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 &:checked ", " {\n ~ div.labelsWrapper {\n &:before {\n content: \"\";\n position: absolute;\n inset: -1px;\n border-radius: 0.5rem;\n user-select: none;\n pointer-events: none;\n }\n }\n }\n \n &:checked {\n ~ div.labelsWrapper {\n &:before {\n border: 2px solid var(--primary) !important;\n }\n }\n }\n }\n\n div.indicator {\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n margin: ", ";\n width: ", ";\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n div.labelsWrapper {\n row-gap: 4px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n padding: 0 0 0 1.5rem;\n display: grid;\n\n label.label {\n display: block;\n margin: 0;\n vertical-align: middle;\n cursor: pointer;\n font:
|
|
15
|
+
exports.BoxedSmStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid var(--dark-opacity-10);\n position: relative;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n cursor: ", ";\n padding: calc(0.75rem - 0.5px) 1rem;\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 &:checked ", " {\n ~ div.labelsWrapper {\n &:before {\n content: \"\";\n position: absolute;\n inset: -1px;\n border-radius: 0.5rem;\n user-select: none;\n pointer-events: none;\n }\n }\n }\n \n &:checked {\n ~ div.labelsWrapper {\n &:before {\n border: 2px solid var(--primary) !important;\n }\n }\n }\n }\n\n div.indicator {\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n margin: ", ";\n width: ", ";\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n div.labelsWrapper {\n row-gap: 4px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n padding: 0 0 0 1.5rem;\n display: grid;\n\n label.label {\n display: block;\n margin: 0;\n vertical-align: middle;\n cursor: pointer;\n font: ", ";\n }\n }\n"], ["\n border: 1px solid var(--dark-opacity-10);\n position: relative;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n cursor: ", ";\n padding: calc(0.75rem - 0.5px) 1rem;\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 &:checked ", " {\n ~ div.labelsWrapper {\n &:before {\n content: \"\";\n position: absolute;\n inset: -1px;\n border-radius: 0.5rem;\n user-select: none;\n pointer-events: none;\n }\n }\n }\n \n &:checked {\n ~ div.labelsWrapper {\n &:before {\n border: 2px solid var(--primary) !important;\n }\n }\n }\n }\n\n div.indicator {\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n margin: ", ";\n width: ", ";\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n div.labelsWrapper {\n row-gap: 4px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n padding: 0 0 0 1.5rem;\n display: grid;\n\n label.label {\n display: block;\n margin: 0;\n vertical-align: middle;\n cursor: pointer;\n font: ", ";\n }\n }\n"])), function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "".concat(props.$color), name: "RadioButtonElementChecked" })); }, function (props) { return !props.$readOnly && " , &:hover"; }, function (props) { return props.$disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementInvalid" }))); }, function (props) { return (props.$size === "small" ? "0 8px 0 0" : "0 16px 0 0"); }, function (props) {
|
|
16
16
|
switch (props.$size) {
|
|
17
17
|
case 'small':
|
|
18
18
|
return "16px";
|
|
@@ -30,5 +30,14 @@ exports.BoxedSmStyled = styled_components_1.default.label(templateObject_1 || (t
|
|
|
30
30
|
default:
|
|
31
31
|
return "16px";
|
|
32
32
|
}
|
|
33
|
-
}, function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$valid ? 'var(--dark)' : 'var(--red)'; })
|
|
33
|
+
}, function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$valid ? 'var(--dark)' : 'var(--red)'; }, function (props) {
|
|
34
|
+
switch (props.$textSize) {
|
|
35
|
+
case 'small':
|
|
36
|
+
return "var(--caption-semi-bold-12-15)";
|
|
37
|
+
case 'medium':
|
|
38
|
+
return "var(--body-semi-bold-14-17)";
|
|
39
|
+
default:
|
|
40
|
+
return "var(--body-semi-bold-14-17)";
|
|
41
|
+
}
|
|
42
|
+
});
|
|
34
43
|
var templateObject_1;
|
|
@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.ColorStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.ColorStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n cursor: ", ";\n ", "\n\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n }\n\n .colorIndicator {\n width: ", ";\n height: ", ";\n border-radius: 50%;\n background-color: ", ";\n box-sizing: border-box;\n outline: ", ";\n outline-offset: 2px;\n\n &:hover {\n ", "\n }\n }\n\n .colorLabel {\n font: var(--caption-medium-12-15);\n color: ", ";\n text-align: center;\n white-space: nowrap;\n }\n"], ["\n position: relative;\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n cursor: ", ";\n ", "\n\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n }\n\n .colorIndicator {\n width: ", ";\n height: ", ";\n border-radius: 50%;\n background-color: ", ";\n box-sizing: border-box;\n outline: ", ";\n outline-offset: 2px;\n\n &:hover {\n ", "\n }\n }\n\n .colorLabel {\n font: var(--caption-medium-12-15);\n color: ", ";\n text-align: center;\n white-space: nowrap;\n }\n"])), function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$disabled && "\n opacity: 0.4;\n "; }, function (props) { return props.$size === "medium" ? "40px" : "32px"; }, function (props) { return props.$size === "medium" ? "40px" : "32px"; }, function (props) { return props.$color || "var(--dark)"; }, function (props) { return props.$checked ? "2px solid var(--primary)" : "
|
|
12
|
+
exports.ColorStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n cursor: ", ";\n ", "\n\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n }\n\n .colorIndicator {\n width: ", ";\n height: ", ";\n border-radius: 50%;\n background-color: ", ";\n box-sizing: border-box;\n outline: ", ";\n outline-offset: 2px;\n\n &:hover {\n ", "\n }\n }\n\n .colorLabel {\n font: var(--caption-medium-12-15);\n color: ", ";\n text-align: center;\n white-space: nowrap;\n }\n"], ["\n position: relative;\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n cursor: ", ";\n ", "\n\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n }\n\n .colorIndicator {\n width: ", ";\n height: ", ";\n border-radius: 50%;\n background-color: ", ";\n box-sizing: border-box;\n outline: ", ";\n outline-offset: 2px;\n\n &:hover {\n ", "\n }\n }\n\n .colorLabel {\n font: var(--caption-medium-12-15);\n color: ", ";\n text-align: center;\n white-space: nowrap;\n }\n"])), function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$disabled && "\n opacity: 0.4;\n "; }, function (props) { return props.$size === "medium" ? "40px" : "32px"; }, function (props) { return props.$size === "medium" ? "40px" : "32px"; }, function (props) { return props.$color || "var(--dark)"; }, function (props) { return props.$checked ? "2px solid var(--primary)" : "2px solid transparent"; }, function (props) { return !props.$disabled && !props.$checked && "\n outline: 2px solid var(--primary-hover);\n "; }, function (props) { return props.$checked ? "var(--primary)" : "var(--dark-opacity-50)"; });
|
|
13
13
|
var templateObject_1;
|